HTML/CSS - 가상 클래스 선택자(1)

안녕하세요, 오늘은 가상 클래스 선택자에 대해 알아보겠습니다.

 

◆ hover : 요소(기본 선택자(class/id/전체(*)/태크(div/span 등))에 마우스(포인터)가 올라가 있는 동안에만 요소 선택

 

아래 코드와 결괏값을 보며 설명드리겠습니다. 구글이라는 링크 태그 <a>를 hover로 감쌈으로써 마우스 포인트가 올라가 있지 않을 때는 일반 링크 태그이지만 올리면 크기와 굵기가 달라지게 됩니다.

아래에 <div> 박스또한 마우스 포인터를 올리면 가로나비가 늘어나는 것을 확인할 수 있습니다.

(영상이 안 올라가져서 동작을 못보여드려 죄송합니다 ㅠㅠ)

◆ active : 요소가 클릭된 동안 효과를 적용 

◆ focus : 요소가 포커스된 동안 효과를 적용 (대화형 콘텐츠에서만 사용 가능/ input, img, tabindex..)

input 입력창을 눌렀을 경우

위와 같이 포커스 될 경우 결과화면에 너비가 2 배가 되고 border 색상이 빨간색이 된 것을 확인할 수 있습니다.