CSS에서는 요소의 특정 부분만 스타일링할 수 있는 강력한 기능을 제공합니다. 예를 들어 텍스트의 첫 글자(first-letter), 첫 줄(first-line)에 서로 다른 스타일을 적용하거나, 요소의 앞(before)과 뒤(after)에 새로운 콘텐츠를 삽입하는 것이 가능합니다. 이러한 작업을 위해 사용되는 것이 바로 CSS 의사 요소(Pseudo Elements)입니다.
참고: CSS3부터는 의사 클래스(Pseudo Classes)와 의사 요소(Pseudo Elements)를 명확히 구분하기 위해, 의사 요소는 이중 콜론(::) 표기법을 사용합니다.
기본 문법
의사 요소를 적용하는 기본 문법은 다음과 같습니다.
Selector::pseudo-element {
css-property: /*값*/;
}주요 CSS 의사 요소 종류
| 번호 | 의사 요소 및 설명 |
|---|---|
| 1 | ::after 지정한 각 요소의 콘텐츠 뒤에 새로운 내용을 삽입합니다. |
| 2 | ::before 지정한 각 요소의 콘텐츠 앞에 새로운 내용을 삽입합니다. |
| 3 | ::first-letter 지정한 각 요소의 첫 번째 글자를 선택합니다. |
| 4 | ::first-line 지정한 각 요소의 첫 번째 줄을 선택합니다. |
| 5 | ::placeholder 폼(form) 요소의 플레이스홀더(안내 문구) 텍스트를 선택합니다. |
| 6 | ::selection 사용자가 마우스로 드래그하여 선택한 요소의 영역을 선택합니다. |
예제 1: first-letter와 first-line 활용
다음은 단락의 첫 글자와 첫 줄에 각각 다른 배경색을 적용하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
background-color: black;
}
p::first-line {
background-color: lightgreen;
color: white;
}
span {
font-size: 2em;
color: #DC3545;
}
</style>
</head>
<body>
<h2>Computer Networks</h2>
<p><span>A</span> system of interconnected computers and computerized peripherals such as printers is called computer network.</p>
</body>
</html>위 코드를 실행하면 단락의 첫 글자는 검은색 배경으로, 첫 줄 전체는 연두색 배경에 흰색 글자로 표시됩니다.
예제 2: ::before와 ::after로 콘텐츠 삽입하기
다음 예제는 ::after와 ::before를 사용해 요소 앞뒤에 텍스트 콘텐츠를 동적으로 추가하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div:nth-of-type(1) p:nth-child(2)::after {
content: " LEGEND!";
background: orange;
padding: 5px;
}
div:nth-of-type(2) p:nth-child(2)::before {
content: "Book:";
background-color: lightblue;
font-weight: bold;
padding: 5px;
}
</style>
</head>
<body>
<div>
<p>Cricketer</p>
<p>Sachin Tendulkar:</p>
</div>
<hr>
<div>
<p><q>Chase your Dreams</q></p>
<p><q>Playing It My Way</q></p>
</div>
</body>
</html>실행 결과, 첫 번째 div의 두 번째 단락 뒤에는 주황색 배경의 "LEGEND!" 텍스트가 추가되고, 두 번째 div의 두 번째 인용문 앞에는 연한 파란색 배경의 굵은 "Book:" 라벨이 삽입됩니다.
마무리
CSS 의사 요소를 활용하면 HTML 구조를 변경하지 않고도 시각적 효과와 장식용 콘텐츠를 손쉽게 추가할 수 있습니다. 특히 ::before와 ::after는 배지, 아이콘, 구분선 등을 만들 때 널리 사용되므로 반드시 익혀두는 것이 좋습니다.