CSS의 :first-letter 가상 요소(pseudo-element)는 선택자가 가리키는 블록 레벨 요소의 첫 글자에만 특별한 스타일을 적용할 때 사용합니다. 신문이나 잡지에서 흔히 볼 수 있는 드롭캡(drop cap) 효과를 웹에서 손쉽게 구현할 수 있어, 문서의 시각적 완성도를 높이는 데 매우 유용합니다.
기본 문법
selector:first-letter {
property: value;
}예제
다음 예제는 :first-letter 가상 요소를 활용해 문단의 첫 글자 크기를 다르게 지정하는 방법을 보여줍니다.
<html>
<head>
<style>
p:first-letter {
font-size: 5em;
}
p.normal:first-letter {
font-size: 10px;
}
</style>
</head>
<body>
<p class="normal">이 문단의 첫 글자는 일반적인 크기인 10px로 표시됩니다.</p>
<p>이 문단의 첫 글자는 위 CSS 규칙에 정의된 대로 5em 크기로 표시됩니다.
나머지 글자들은 일반 크기를 그대로 유지합니다. 이 예제는 :first-letter
가상 요소를 사용해 HTML 요소의 첫 글자에 효과를 주는 방법을 보여줍니다.</p>
</body>
</html>
예제 설명
p:first-letter 규칙은 모든 <p> 요소의 첫 글자를 5em(부모 글꼴 크기의 5배)으로 확대합니다. 반면 p.normal:first-letter 규칙은 normal 클래스를 가진 문단의 첫 글자를 10px로 지정하는데, 클래스 선택자가 더 구체적(specificity가 높음)이므로 해당 문단에는 10px가 우선 적용됩니다.
:first-letter에 사용할 수 있는 주요 속성
:first-letter 가상 요소에는 다음과 같은 CSS 속성들을 적용할 수 있습니다.
- 글꼴 속성: font, font-size, font-family, font-weight, font-style
- 색상 및 배경: color, background-color, background-image
- 여백 및 테두리: margin, padding, border
- 텍스트 장식: text-decoration, text-transform, letter-spacing, word-spacing
- 레이아웃: float, vertical-align, line-height, clear
활용 팁: 드롭캡(Drop Cap) 효과 만들기
:first-letter와 float 속성을 함께 사용하면 신문·잡지 스타일의 드롭캡 효과를 간단하게 구현할 수 있습니다.
p:first-letter {
float: left;
font-size: 3em;
line-height: 1;
padding-right: 8px;
}주의: :first-letter는 블록 레벨 요소에만 적용됩니다. 인라인 요소(<span> 등)에는 효과가 없으므로, 필요하다면 display: inline-block 또는 display: block으로 먼저 변경해야 합니다.