이미지에 마우스를 올렸을 때(hover) 이미지가 확대되고 마우스가 벗어나면 원래 상태로 축소되도록 해보겠습니다. 소스 보시겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 마우스 올렸을 때 이미지 확대/축소 Colored by Color Scripter cs HTML파일은 태그에 클래스를 주고 태그로 이미지 하나를 불러오도록 했습니다. 1 2 3 4 5 6 7 8 9 .box img { /* hover 뒤 애니메이션 */ transform: scale(1.0); /* 이미지 확대 */ transition: transform .5s; /* 시간 설정 */ } .box img:hover { /* hover 시 애니메이션 */ transform: scale(1.5); /* 이미지 확대 */ t..

열심히 코딩을 하다 보면 이전까지 잘 되던 CSS파일의 변경사항이 갑자기 적용이 안 돼 난처한 상황이 생기곤 합니다. 제가 실제로 겪었던 문제이고 이 문제를 해결하느라 시간을 많이 썼던 기억이 남아 작지만 모르는 분들에게 도움을 드리고자 이렇게 공유합니다. 실제 코딩을 하다 보면 아래와 비슷한 상황을 겪게 되실 것 같은데요. 예시로 저는 content class에 backgroun-color를 주도록 하겠습니다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 CSS 적용 문제 Hello CSS! Colored by Color Scripter cs CSS 1 2 3 .content { background-color: orange; } cs 결과 화면 이렇게 CSS 파일 적용이 안 되는 경우..

웹페이지나 모바일 메뉴에서 흔히 볼 수 있는 3줄로 구성된 모양의 햄버거 버튼입니다. 클릭 시 두 번째 줄은 투명해지고 첫 번째와 세 번째 줄이 이동하면서 각도를 바꿔 X자 형태를 만드는 원리입니다. HTML, CSS, JavaScript 를 구분해 놓고 간략한 설명을 위해 주석을 달았습니다. HTML CSS JavaScript

오늘은 텍스트 배경색이 움직이는 효과를 만들어보겠습니다. 사용할 이미지는 gif 처럼 동적인 파일이 아닌 jpg 파일로 스트라이프 패턴의 이미지를 사용할 건데요. stripe, stripe background 등으로 검색하시면 비슷한 이미지를 찾으실 수 있을 거예요😀 여기서 유의할 점은 스트라이프 패턴이 세로로 되어 있는 게 아닌 위와 같이 사선으로 되어 있어야 한다는 점입니다. 만약 세로 패턴의 이미지라면 각도를 돌려 사용하면 되겠네요! 먼저 완성 소스를 보여드리겠습니다. 여기서 중요한 태그는 background-clip, @keyframes, animation 정도가 되겠네요! background-clip 요소의 배경을 어디까지 차지할 지 지정하는 속성으로 아래와 같은 값을 지정할 수 있습니다. bo..

flex란? 일반적인 웹페이지의 레이아웃을 구성하기 위해서는 display, float, position등을 사용하여 레이아웃을 구축해 왔지만 이와 같은 속성을 사용하면 구현 방법이 복잡하고 레이아웃을 표현하는 데 한계에 부딪히곤 했습니다. 이런 문제점을 해결하기 위해 flex가 나타난 것이며 사용 방법은 display: flex;로 해당 요소에 flex를 지정하면 됩니다. 부모 요소에 display: flex; 를 설정하게 되면 그 부모 요소는 플렉스 컨테이너가 되고 자식 요소는 플렉스 아이템으로 인식하게 되므로 flexbox 레이아웃 모듈을 구성할 때는 콘텐츠(플렉스 항목)를 감싸는 부모 요소에 이 속성을 지정해야 합니다. justify-content flex요소들을 가로 선에서 정렬 flex-sta..

z-index란? 객체를 원하는 순서대로 배치할 수 있는 기능으로 몇 가지 특성을 가집니다. position 속성이 relatuve 거나 absolute 일 때 동작합니다. 기본값은 auto이며 음수, 양수의 숫자를 사용할 수 있습니다. z-index 의 값인 숫자가 높을 수록 가장 상단(보이는 화면에서 가깝게)에 배치되며 낮을 수록(보이는 화면에서 멀게) 배치됩니다. z-index는 같은 선상에 있는 태그값부터 확인하지만 부모 태그의 z-index가 우선이기 때문에 자식 태그가 z-index 숫자가 크더라도 부모 태그의 값을 우선시합니다. 활용 예제를 알아보기 위해 아래와 같이 3개의 div 에 style 을 부여했습니다. 이 중 두번째, div_2 를 가장 앞으로 나오게 하고 싶을 때 z-index ..