프론트엔드 개발자로서 실무에서 css를 사용하다 보면 가상 클래스와 가상 요소 선택자라는 단어를 많이 들을 수 있다. 평소엔 이 두 선택자의 차이를 구분하지 못하고 사용했는데, 이번 기회에 각 선택자의 특징과 차이점에 대해서 알아보려 한다. 가상 클래스 먼저 가상 클래스란 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 부여해 css로 제어하는 것을 의미한다. (동적으로 스타일 부여) 예를 들어, 특정 a태그에 마우스를 올려 (hover) 색상을 변경하려고 할 때 가상 클래스를 사용하지 않는다면 a 태그에 스크립트로 mouseover 이벤트를 이용하여 해당 이벤트 발생 시 색상을 변경해는 로직을 추가해야 한다. Button 이러한 상황에선 마우스 오버라는 이벤트 상황에 맞춰 실제로 존..