[CSS] 가상 요소 vs 가상 클래스
·
Web
CSS를 사용하다보면 가상 클래스 또는 가상 요소 선택자를 사용한다. 사용하면서 우리는 두 개가 같은 거라고 생각하며 사용하고 있지만 실제로는 둘은 다른 녀석들이다. 가상 요소 실제로 존재하지 않는 가상의 요소를 만들어서 스타일을 주는 것을 말한다. 사용할 때 콜론( : )을 사용할 수 있지만 가상 클래스와 구분하기 위해서 이중 클론( :: )을 권장한다. 대표적인 가상 요소들을 나열하자면, ▶ ::before : 지정된 요소의 앞에 가상의 요소 생성 ▶ ::after : 지정된 요소의 뒤에 가상의 요소 생성 ▶ ::placeholder : Input 필드의 힌트 텍스트에 스타일을 적용한다. ▶ ::selection : 사용자에 의해서 선택(드래그)된 텍스트 영역의 속성을 변경한다. ▶ ::first-l..