TIL 12 | CSS 가상셀렉터 (:active, :hover, :focus)

1. Pseudo Selector

(:active, :hover, :focus)

가상셀렉터란?
보통 선택자는 HTML 태그, Class, ID 등 HTML 요소를 직접 선택하여 CSS를 통해 꾸며주는 반면, 가상 선택자는 요소의 상태에 따라 선택하여 꾸며준다.

1) 가상셀렉터 :hover

:hover를 이용하면 마우스가 해당 요소 위에 있을 때 요소의 스타일 변경할 수 있다.
말 그대로 '클릭'을 따로 하지 않아도 선택자 위에 마우스 커서가 위치하게되면 꾸며준 스타일을(색상이 변경 되는 등) 볼 수 있게 된다.

2) 가상셀렉터 :active

가상 선택자 :active를 이용하면 사용자의 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경할 수 있다.

3) 가상셀렉터 :focus

사용자의 마우스가 해당 요소를 클릭하면 요소의 스타일 변경할 수 있다.
tab 키를 이용해서 요소를 선택해도 활성화된다.

하단의 참고자료를 클릭하여 더 자세하게 살펴볼 수 있다.

참고자료: https://hogni.tistory.com/110