의사 요소
의사 요소(pseudo-element)
의사 요소(pseudo-element)는 해당 HTML 요소의 특정 부분만을 선택할 때 사용합니다.
의사 요소의 문법
의사 요소(pseudo-element)를 사용하기 위한 문법은 다음과 같습니다.
문법
선택자::의사요소이름 {속성: 속성값;}
하지만 CSS3에서는 의사 클래스의 표현과 의사 요소의 표현을 구분하기로 합니다.
따라서 CSS3에서는 의사 클래스는 하나의 콜론(:)을, 의사 요소에는 두 개의 콜론(::)을 사용하고 있습니다.
대표적인 CSS 의사 요소
CSS에서 자주 사용하는 대표적인 의사 요소는 다음과 같습니다.
- ::first-letter
- ::first-line
- ::before
- ::after
- ::selection
::first-letter
이 의사 요소(pseudo-element)는 텍스트의 첫 글자만을 선택합니다.
단, 블록(block) 타입의 요소에만 사용할 수 있습니다.
이 의사 요소를 통해 사용할 수 있는 속성은 다음과 같습니다.
- font 속성
- color 속성
- background 속성
- margin 속성
- padding 속성
- border 속성
- text-decoration 속성
- text-transform 속성
- line-height 속성
- float 속성
- clear 속성
- vertical-align 속성 (단, float 속성값이 none일 경우에만)
::first-line
이 의사 요소는 텍스트의 첫 라인만을 선택합니다.
단, 블록(block) 타입의 요소에만 사용할 수 있습니다.
이 의사 요소를 통해 사용할 수 있는 속성은 다음과 같습니다.
- font 속성
- color 속성
- background 속성
- word-spacing 속성
- letter-spacing 속성
- text-decoration 속성
- text-transform 속성
- line-height 속성
- clear 속성
- vertical-align 속성
::before
이 의사 요소는 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용합니다.
::after
이 의사 요소는 특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용합니다.
::selection
이 의사 요소는 해당 요소에서 사용자가 선택한 부분만을 선택할 때 사용합니다.
의사 요소의 동시 적용
하나의 HTML 요소에 여러 개의 의사 요소를 동시에 적용할 수 있습니다.
예제
<style>
p::first-letter { color: #FFD700; font-size: 2em; font-weight: bold; }
p::first-line { color: #FF4500; }
</style>
CSS 의사 요소(pseudo-elements)
| 의사 요소 | 설명 |
|---|---|
| ::first-letter | 텍스트의 첫 글자만을 선택함. |
| ::first-line | 텍스트의 첫 라인만을 선택함. |
| ::before | 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용함. |
| ::after | 특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용함. |
| ::selection | 해당 요소에서 사용자가 선택한 부분만 선택함. |
