::first-letter 가상 요소란?
CSS의 ::first-letter 가상 요소(의사 요소)는 요소 콘텐츠의 첫 번째 글자만 선택하여 별도의 스타일을 적용할 수 있게 해줍니다. 신문이나 잡지에서 흔히 볼 수 있는 드롭캡(drop cap) 효처럼 단락의 첫 글자를 크고 눈에 띄게 강조하고 싶을 때 유용하게 활용됩니다.
단, 주의할 점이 있습니다. 이 가상 요소는 인라인(inline) 레벨 요소에는 동작하지 않습니다. 인라인 요소에 적용하려면 먼저 display: block; 또는 display: inline-block;으로 디스플레이 속성을 변경해야 합니다.
::first-letter에 적용할 수 있는 대표적인 속성으로는 글꼴 관련 속성(font-size, font-weight 등), color, background, margin, padding, border, text-decoration, text-transform, float 등이 있습니다.
예제 1
다음은 CSS ::first-letter 가상 요소를 사용한 기본 예제입니다 −
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #32485d;
border: 5px solid black;
color: #959799;
}
p::first-letter {
font-size: 1.5em;
color: #f9f9f9;
padding: 2px;
}
</style>
</head>
<body>
<div>
<h2>Eclipse IDE</h2>
<p>"Eclipse is an integrated development environment (IDE) for Java and other programming languages
like C, C++, PHP, and Ruby etc. Development environment provided by Eclipse includes the Eclipse Java
development tools (JDT) for Java, Eclipse CDT for C/C++, and Eclipse PDT for PHP, among others."</p>
</div>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
단락의 첫 글자인 따옴표와 E가 나머지 텍스트보다 크고 밝은 색상으로 강조되어 표시되는 것을 확인할 수 있습니다.
예제 2
이번에는 배경색과 함께 첫 글자를 강조하는 또 다른 예제를 살펴보겠습니다 −
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
font-size: 1.5em;
background-color: black;
color: #dc3545;
padding: 2px;
}
</style>
</head>
<body>
<div>
<h2>Machine Learning Tutorials</h2>
<p>TensorFlow</p><p>Machine Learning with Python</p><p>Time Series</p><p>PyTorch</p>
</div>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
각 단락의 첫 글자(T, M, T, P)가 검은색 배경 위에 붉은색으로 표시되어 시각적으로 돋보이는 효과를 얻을 수 있습니다.
마무리
::first-letter 가상 요소는 별도의 HTML 마크업 없이 순수 CSS만으로 첫 글자를 꾸밀 수 있는 간편한 도구입니다. 블로그 포스트나 아티클 스타일의 웹페이지에서 타이포그래피에 개성을 더하고 싶을 때 적극적으로 활용해 보시기 바랍니다.