CSS에서는 ::first-letter 가상 요소(pseudo-element)를 사용하면 블록 수준 요소의 첫 번째 글자에 별도의 스타일을 적용할 수 있습니다. 이 기능은 신문이나 잡지에서 흔히 볼 수 있는 드롭캡(drop cap) 효과를 웹에서 구현할 때 특히 유용합니다.
단, 주의할 점이 있습니다. 문장 부호(따옴표 등), 합자(digraph), 그리고 content 속성이 포함된 경우에는 실제로 스타일이 적용되는 '첫 글자'가 달라질 수 있습니다.
아래 예제들을 통해 CSS ::first-letter 가상 요소의 사용법을 살펴보겠습니다.
예제 1
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
::first-letter {
font-size: 3em;
color: sienna;
box-shadow: -10px 0 10px green;
background-color: gainsboro;
}
</style>
</head>
<body>
<h2>Proin ut diam eros</h2>
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
첫 번째 예제에서는 글자 크기를 3em으로 확대하고, 배경색과 박스 그림자(box-shadow)를 함께 적용해 첫 글자를 눈에 잘 띄게 만들었습니다.
예제 2
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
body > * {
background-color: slategrey;
}
::first-letter {
font-size: 1.6em;
color: darkviolet;
background-color: silver;
text-shadow: -15px 8px palevioletred;
}
</style>
</head>
<body>
<h2>Proin ut diam eros
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
두 번째 예제에서는 text-shadow 속성을 활용해 첫 글자에 그림자 효과를 추가했습니다. 이처럼 ::first-letter는 일반적인 CSS 속성 대부분과 조합하여 사용할 수 있으므로, 폰트 크기·색상·배경·그림자 등을 자유롭게 조절해 다양한 타이포그래피 연출이 가능합니다.