CSS의 가상 클래스(:hover 등)와 가상 요소(::before 등)는 어떻게 구분하나요?

이렇게 답해 보세요 (핵심 답변)

가상 클래스(Pseudo-class)는 :hover, :focus-visible, :checked처럼 실제 DOM에 존재하는 요소가 특정 상태나 위치 조건에 놓였을 때 그 요소를 선택하는 방법입니다. 반면 가상 요소(Pseudo-element)는 ::before, ::after, ::first-line처럼 선택한 요소의 특정 일부분이나 새롭게 생성된 가상 박스를 스타일링 대상으로 삼습니다. 키보드나 터치 환경에서도 상태 변화가 잘 드러나도록 설계하고 선택자별 명시도 규칙도 함께 확인합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 마우스만 고려해 :hover에만 툴팁이나 메뉴를 연결하면 키보드나 터치 기기 사용자가 접근하기 어려우므로 :focus-visible과 클릭 상태를 함께 설계해야 합니다.
2. ::before와 ::after로 생성한 장식 콘텐츠는 실제 DOM 노드가 아니므로 핵심 정보나 상호작용 버튼은 실제 HTML 요소로 마크업해야 안전합니다.

면접에서 자주 하는 실수

콜론이 한 개인지 두 개인지만 기계적으로 외우고, 기존 요소의 조건 선택인지 부분·생성 박스 대상인지라는 본질적 차이를 놓치면 안 됩니다.