CSS - 가상요소

가상 요소와 가상 클래스

CSS 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드를 말합니다.
요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 마치 하나의 하위 요소처럼 사용할 수 있어서 가상 요소(Pseudo-Element)라고 합니다.
가상 요소 키워드 중에는 HTML 태그로 표현하기 어려운 콘텐츠의 특정 부분만 동적으로 선택하거나, HTML 콘텐츠 내용을 변경하지 않고도 선택한 요소의 앞 뒤에 새 콘텐츠를 추가하는 기능을 하는 키워드도 있습니다.
요소를 꾸미는 다양한 기능들을 제공하기 때문에 잘 사용하면 CSS만으로도 미려하고 고급스러운 레이아웃을 만들 수 있습니다.

가상 요소는 다음 6가지가 있습니다.

"::before", "::after" 2개만 새 컨텐츠를 추가하는 가상 요소이고, 나머지 4개는 콘텐츠의 특정 부분을 선택하는 가상 요소입니다.
"::before", "::after" 가상 요소는 HTML 태그나 자바스크립트 없이도 HTML 페이지 안에 콘텐츠, 또는 디자인 요소를 추가할 수 있는 특별한 기능을 합니다.
CSS로 HTML 컨텐츠를 변경할 수 있는 몇 안 되는 중요한 키워드입니다.
CSS를 작성할 때 가장 많이 사용하는 가상 요소가 "::before", "::after" 2개입니다.

가상 요소 작성 방법

가상 요소는 키워드 앞에 콜론(:) 2개를 연달아 붙여 표기해서 가상 요소임을 표시합니다. 가상 클래스는 콜론(:) 1개로 표시합니다. CSS1, CSS2 때는 가상 요소 또한 콜론 1개로만 표시를 했었지만, CSS3에 오면서 가상 클래스와 가상 요소를 구분하기 위해서 가상 요소에 콜론 2개를 붙이게 되었습니다. 가상 클래스와 가상 요소는 새로운 가상의 요소를 생성하는지에 따라 구분합니다. 호환성을 위해서 대부분의 메이저 웹 브라우저들은 ":before", "::before" 표기 모두를 지원합니다. 두 가지 표기 방법 모두 사용 가능하지만 가상 요소는 "::before"로 표기하는 것이 CSS3 표준 표기 방법입니다. 기본 사용 구문 구조는 다음과 같습니다.

선택자::가상요소 {
속성: 속성 값;
}

사용할 땐 이렇게 사용합니다

p::before {
    content: "■ ";
}
article.content::selection {
    color: #00ff00;
}

가상 요소는 선택된 요소에 의존적인 키워드입니다. 가상 요소를 적용하기 위해 CSS 선택자로 선택한 요소가 여러 개면 가상 요소로 적용하는 속성도 선택된 요소들에 모두 적용됩니다.