🌱 기초 프론트엔드
CSS 가상 클래스가 뭔가요?
쉽게 이해하기
리모컨의 버튼을 누르고 있을 때만 LED가 켜지듯이, 가상 클래스는 마우스를 올렸을 때나 클릭했을 때처럼 특정 상태일 때만 스타일을 적용합니다. 버튼에서 손을 떼면 LED가 꺼지는 것처럼, 그 상태가 끝나면 스타일도 사라져요.
핵심 정리
요소의 특정 상태를 선택할 수 있게 해주는 CSS 선택자입니다.
자세히 알아보기
가상 클래스(Pseudo-class)는 콜론(:) 기호를 사용해서 요소의 특정 상태를 선택하는 CSS 선택자입니다. 가장 많이 쓰이는 것은 :hover인데, 마우스를 올렸을 때 버튼 색이 바뀌는 효과를 만들 수 있어요.
실무에서 자주 사용하는 가상 클래스로는 :hover(마우스 올렸을 때), :active(클릭하는 순간), :focus(입력창을 선택했을 때), :disabled(비활성화된 버튼), :first-child(첫 번째 자식), :last-child(마지막 자식) 등이 있습니다. 예를 들어 'button:hover { background: blue; }'라고 쓰면 버튼에 마우스를 올렸을 때만 파란색으로 바뀌어요.
가상 클래스를 쓰는 이유는 JavaScript 없이도 간단한 인터랙션을 만들 수 있고, 사용자 경험을 개선할 수 있기 때문입니다. 링크를 이미 방문했는지 보여주는 :visited, 폼 입력이 유효한지 보여주는 :valid/:invalid 같은 것들도 가상 클래스예요.
특히 접근성 측면에서도 중요한데, :focus를 사용하면 키보드로 탐색하는 사용자가 현재 어느 요소에 있는지 알 수 있게 해줍니다. 모던 웹 개발에서는 :not(), :is(), :where() 같은 고급 가상 클래스도 많이 사용하고 있어요.