CSS - 가상 클래스(의사 클래스), 가상요소

CSS에서 선택자는 HTML태그나 Class, ID 등으로 요소(element)를 직접적으로 선택하여 CSS를 통해 꾸며주는데, 가상클래스는 다르다.

가상 클래스는 별도의 class를 지정하지 않아도 요소의 상태에 따라 선택하여 꾸며준다.
쉽게 이해하면, 미리 정의해놓은 상황에 따른 변화를 준다고 할 수 있다.

가상 클래스는 의사 클래스라고도 부른다.

: (보통클론) 을 사용한다.

예시로 확인하면

위와 같이 버튼에 마우스 포인터가 요소에 올라갔을 시 버튼에 style이 적용되는 것을 확인할 수 있다.

가상 클래스 적용 안되는 경우

1. <form>, <input>, <img> 태그는 가상 클래스 적용되지 않는다.
2. IE7 이하 버전은 지원하지 않는다.
3. IE8 이하 버전은 ::이 적용되지 않는다.

그렇다면, 가상요소는 무엇일까?

실제로 존재하는 요소에 가상으로 클래스를 주는 가상 클래스와는 다르게
가상요소는 실제로 존재하지 않는 가상의 요소를 만들어 스타일을 준다.

:: (이중클론) 사용을 한다.
: (보통클론)을 사용도 가능하지만 가상 클래스와 구분을 하기 위해 :: 사용을 권장한다.

예시로 확인하면

::after를 사용했을때 class명이 p3인 요소 뒤에 "가상요소 after"가 출력되는 것을 확인할 수 있다.