css hover 가상클래스

안녕하세요 오늘은  css hover 가상클래스 선택자에 대해 포스팅을 하려고 합니다.

우선 가상클래스':' 콜론 기호를 이용해서 hover, active, focus를 사용할 수 있습니다.

 

엘리먼트라는 요소에 마우스가 올라가 있는 동안에 발생 또는 동작하므로 css  hover 가상클래스를 사용할 수 있습니다.

그렇다면 예시를 보면서 사용을 해보겠습니다.

 

html 코드에 보시면 a 태그가 있고 네이버로 이동할 수 있는 하이퍼링크가 걸려있습니다.

css hover라는 가상클래스를 이용해서 :hover을 이용해 마우스를 올리면 굵게, 사이즈를 20px로 만들 수 있는 예제이고

 

또 다른 예제를 보면 div 태그를 box 클래스로 css 에서도 아까와 마찬가지로 :hover 가상클래스를 이용해서 width 크기를 100px로 주고 마우스를 올려보면 줄어드는 효과를 볼 수 있는데 좀 더 자연스럽게 변환을 하려면 .box 클래스에 transiton이라는 효과를 적용하면 0.4초동안 애니메이션 효과를 받을 수 있다.

 

현재 html 및 css에서 만들었던 링크와 박스인데 이것을 hover를 이용해 적용시키면 naver! 와 박스가 변환하는것을 보실 수가 있습니다.

 

오늘은 css hover에 대해서 배워봤습니다. 다음에는 active, focus에 대해서 배워보도록 하겠습니다. 감사합니다