가상 요소와 가상 클래스

CSS 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드를 말합니다.

요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 마치 하나의 하위 요소처럼 사용할 수 있어서 가상 요소(Pseudo-Element)라고 합니다.

가상 요소 키워드 중에는 HTML 태그로 표현하기 어려운 콘텐츠의 특정 부분만 동적으로 선택하거나, HTML 콘텐츠 내용을 변경하지 않고도 선택한 요소의 앞 뒤에 새 콘텐츠를 추가하는 기능을 하는 키워드도 있습니다.

요소를 꾸미는 다양한 기능들을 제공하기 때문에 잘 사용하면 CSS만으로도 미려하고 고급스러운 레이아웃을 만들 수 있습니다.

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

"::before", "::after" 2개만 새 컨텐츠를 추가하는 가상 요소이고, 나머지 4개는 콘텐츠의 특정 부분을 선택하는 가상 요소입니다.

"::before", "::after" 가상 요소는 HTML 태그나 자바스크립트 없이도 HTML 페이지 안에 콘텐츠, 또는 디자인 요소를 추가할 수 있는 특별한 기능을 합니다.

CSS로 HTML 컨텐츠를 변경할 수 있는 몇 안 되는 중요한 키워드입니다.

CSS를 작성할 때 가장 많이 사용하는 가상 요소가 "::before", "::after" 2개입니다.

그만큼 중요하기 때문에 이 2가지 가상 요소에 대해서 집중적으로 알아보도록 하겠습니다.

가상 요소 작성 방법

가상 요소는 키워드 앞에 콜론(:) 2개를 연달아 붙여 표기해서 가상 요소임을 표시합니다.

가상 클래스는 콜론(:) 1개로 표시합니다. CSS1, CSS2 때는 가상 요소 또한 콜론 1개로만 표시를 했었지만, CSS3에 오면서 가상 클래스와 가상 요소를 구분하기 위해서 가상 요소에 콜론 2개를 붙이게 되었습니다.

가상 클래스와 가상 요소는 새로운 가상의 요소를 생성하는지에 따라 구분합니다.

호환성을 위해서 대부분의 메이저 웹 브라우저들은 ":before", "::before" 표기 모두를 지원합니다.

두 가지 표기 방법 모두 사용 가능하지만 가상 요소는 "::before"로 표기하는 것이 CSS3 표준 표기 방법입니다.

기본 사용 구문 구조는 다음과 같습니다.

선택자::가상요소 {

    속성: 속성 값;

}

실제로 사용할 때는 다음처럼 사용합니다.

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

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

content 속성과 속성 값

content 속성은 ::before와 ::after 가상 요소에 사용할 수 있는 속성들 중 가장 중요한 역할을 하는 속성입니다. 그리고 가상 요소에만 사용할 수 있습니다.

::before와 ::after 가상 요소로 추가하는 콘텐츠의 내용에 해당하는 것을 표시하는 속성입니다.

content 속성 값에는 문자열, 이미지, HTML 속성, 변수, 함수 등 CSS로 표현할 수 있는 대부분의 콘텐츠를 사용할 수 있습니다.

문자열 내용을 표시할 때는 content: '내용'과 같이 따옴표로 문자열 내용을 감싸서 표시합니다. 문자열은 일반 문자열일 수도 있고, 코드 값일 수도 있습니다. 이모지도 사용할 수 있습니다.

p::before {
  content: ''; /* 빈 컨텐츠 표시 */
}
p::before {
  content: '문단 맨 앞에 텍스트 표시';
}
p::before {
  content: '