CSS의 :first-letter 가상 요소(pseudo-element)를 사용하면 문서 내 요소의 첫 번째 글자에만 특별한 효과를 적용할 수 있습니다. 이 기능은 신문이나 잡지에서 흔히 볼 수 있는 드롭캡(drop cap) 스타일처럼 문단의 시작을 강조하고 싶을 때 매우 유용합니다.
:first-letter 가상 요소란?
:first-letter는 선택자 뒤에 붙여 사용하며, 해당 선택자가 가리키는 요소의 첫 글자만 별도로 스타일링합니다. 적용할 수 있는 주요 속성은 다음과 같습니다.
- 글꼴 관련 속성 (font-size, font-weight, font-family 등)
- 색상 및 배경 (color, background)
- 여백과 테두리 (margin, padding, border)
- 텍스트 장식 (text-decoration)
- float 등
예제
다음 코드는 일반 문단의 첫 글자는 5em 크기로 확대하고, normal 클래스가 지정된 문단은 첫 글자도 10px로 유지되도록 설정한 예입니다.
<html>
<head>
<style>
p:first-letter {
font-size: 5em;
}
p.normal:first-letter {
font-size: 10px;
}
</style>
</head>
<body>
<p class="normal"> First character of this paragraph will be normal and will have font size 10 px;</p>
<p>The first character of this paragraph will be 5em big as defined in the CSS rule above. Rest of the characters in this paragraph will remain normal. This example shows how to use :first-letter pseduo element to give effect to the first characters of any HTML element.</p>
</body>
</html>코드 설명
p:first-letter 규칙은 모든 <p> 요소의 첫 글자를 5em 크기로 만듭니다. 반면 p.normal:first-letter 규칙은 normal 클래스를 가진 문단에 한해 첫 글자 크기를 다시 10px로 덮어쓰므로, 해당 문단은 첫 글자가 일반적인 크기로 표시됩니다.
실행 결과, 두 번째 문단의 첫 글자 'T'만 위 CSS 규칙에서 정의한 대로 5em으로 커지고 나머지 글자들은 평소와 같은 크기를 유지하게 됩니다. 이처럼 :first-letter 가상 요소를 활용하면 어떤 HTML 요소든 첫 글자에 원하는 효과를 손쉽게 부여할 수 있습니다.