목차

CSS Pseudo-elements

  • description : CSS Pseudo-classes
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-30


What are Pseudo-Elements?

CSS 가상 요소(pseudo=element)는 요소의 지정된 부분에 스타일을 지정하는데 사용됩니다.

예를 들어, 다음과 같은 용도로 사용할 수 있습니다.

Syntax

가상 요소(pseudo-element)의 구문:

selector::pseudo-element {
  property: value;
}

The ::first-line Pseudo-element

first-line 가상 요소는 텍스트의 첫 번째 줄에 특별한 스타일을 추가하는 데 사용됩니다.

하기의 예제는 모든 <p> 요소에 있는 텍스트의 첫 번째 줄을 형식화(format)합니다.

예제

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}


small caps (작은 대문자): 작은 대문자(소문자 크기의 대문자)

Note: ::first-line 가상 요소는 블럭 레벨 요소에만 적용할 수 있습니다.

아래의 속성은 first-line 가상 요소에 적용됩니다.


이중 콜론 표기법-::first-line:first-line

이중 콜론은 CSS3의 가상 요소(pseudo-elements)의 단일 콜론 표기법을 대체했습니다.
이것은 W3C가 가상 클래스(pseudo-classes)와 가상 요소(pseudo-elements)를 구별하려는 시도였습니다.

단일 콜론 구문은 CSS2 및 CSS1의 가상 클래스와 가상 요소 모두에 사용되었습니다.

이전 버전과의 호환성을 위해 CSS2 및 CSS1 가상 요소에 단일 콜론 구문을 사용할 수 있습니다.

The ::first-letter Pseudo-element

::first-letter 가상 요소는 텍스트의 첫 글자에 특별한 스타일을 추가하는 데 사용됩니다.

다음 예제는 모든 <p> 요소에서 텍스트의 첫 번째 단어의 첫 글자에 스타일을 추가합니다.

예제

p::first-letter {
  color: #ff0000;
  font-variant: ss-large;
}

Note: ::first-letter 가상 요소는 블럭 레벨 요소에만 적용할 수 있습니다.

아래의 속성은 first-letter 가상 요소에 적용됩니다.


Pseudo-element and CSS Classes

가상 요소는 CSS 클래스와 결합할 수 있습니다:

예제

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

상기 예제는 class="intro" 를 가진 단락의 첫 번째 단어의 첫 번째 철자를 red 컬러의 큰 글꼴로 표시합니다.

Multiple Pseudo-elements

여러 가상 요소를 결합할 수도 있습니다.

다음 예제에서, 단락의 첫 글자는 xx-large 글꼴 크기의 red 컬러입니다.
첫 번째 줄의 나머지 글꼴은 blue이며 작은 대문자로 표시됩니다.
나머지 단락은 기본 글꼴 크기 및 색상이 됩니다.

예제

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
 
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

CSS - The ::before Pseudo-element

::before 가상 요소를 사용하여 요소의 콘텐츠 앞에 다른 콘텐츠를 삽입할 수 있습니다.

다음 예제에서는 각 <h1> 요소의 콘텐츠 앞에 이미지를 삽입합니다.

예제

This is a heading.

The ::before pseudo-element inserts content before the content of an element.

This is a heading.

CSS - The ::after Pseudo-element

::after 가상 요소를 사용하여 요소의 콘텐츠 앞에 다른 콘텐츠를 삽입할 수 있습니다.

다음 예제에서는 각 <h1> 요소의 콘텐츠 뒤에 이미지를 삽입합니다.

예제

<style>
h1::after {
  content: url(smiley.gif);
    }
</style>

CSS - The ::marker Pseudo-element

::marker 가상 요소는 목록 항목(list items)를 선택합니다.

다음 예제에서는 목록 항목에 스타일을 지정합니다.

예제

  1. First
  2. Second
  3. Third

Result

CSS - The ::selection Pseudo-element

::selection 가상 요소는 사용자가 선택한 요소의 부분과 일치합니다.

::selection: color, background, cursor 그리고 outlineCSS 속성을 적용할 수 있습니다.

다음 예제에서는 선택한 텍스트를 노란색 배경에서 빨간색으로 만듭니다.

예제

Select some text on this page:

This is a paragraph.

This is some text in a div element.

Note:Firefox supports an alternative, the ::-moz-selection property.

Result


All CSS Pseudo Classes

Selector Example Example description
::after p::after 각 <p> 요소의 콘텐츠 뒤에 삽입합니다.
::before p::before 각 <p> 요소의 콘텐츠 앞에 삽입합니다.
::first-letter p::first-letter 각 <p> 요소의 첫 번째 철자를 선택합니다.
::first-line p::first-line 각 <p> 요소의 첫 번째 줄을 선택합니다.
::marker ::marker 목록 항목 (list items)의 마커(marker)를 선택합니다.
::selection p::selection 사용자가 선택한 요소의 부분을 선택합니다.