CSS의 ::first-line 가상 요소(pseudo-element)는 블록 레벨 요소에서 실제로 화면에 표시되는 첫 번째 줄에만 스타일을 적용할 수 있게 해주는 강력한 도구입니다.
일반적인 텍스트 스타일링과 달리, ::first-line은 줄바꿈 위치나 화면 크기에 따라 자동으로 첫 줄 범위가 조정되기 때문에 반응형 환경에서도 자연스럽게 동작합니다. 신문이나 잡지에서 흔히 볼 수 있는 '드롭캡' 스타일의 첫 줄 강조 효과를 손쉽게 구현할 때 유용합니다.
아래 예제들을 통해 ::first-line 가상 요소의 실제 활용법을 살펴보겠습니다.
예제 1: 첫 줄에 글자 크기와 그림자 효과 적용하기
첫 번째 예제에서는 문단의 첫 줄에 큰 글꼴 크기, 굵은 글씨, 그리고 텍스트 그림자를 적용해 시각적인 강조 효과를 만들어 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: darkorchid;
}
::first-line {
font-size: 2em;
color: black;
font-weight: bold;
text-shadow: 0 -10px grey;
}
</style>
</head>
<body>
<article>
<p>Donec rutrum a erat vitae interdum.</p>
<p>Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec semper ligula ac consequat scelerisque.</p>
</article>
</body>
</html>실행 결과
위 코드를 실행하면 각 문단의 첫 번째 줄만 다른 문단들보다 크고 굵게 표시되며, 회색 텍스트 그림자 효과가 함께 적용된 것을 확인할 수 있습니다.
예제 2: 첫 줄에 박스 그림자(box-shadow) 효과 적용하기
두 번째 예제에서는 box-shadow 속성의 inset(내부 그림자) 값을 활용하여 첫 줄 영역 전체에 은은한 배경 강조 효과를 부여하는 방법을 알아보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
article {
text-align: center;
}
::first-line {
box-shadow: inset 0 0 13px orchid;
}
</style>
</head>
<body>
<article>
<h2>Donec rutrum a erat vitae interdum.</h2>
<p>Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec semper ligula ac consequat scelerisque.</p>
<p>Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo.</p>
</article>
</body>
</html>실행 결과
실행하면 각 문단의 첫 줄 배경에 연보라색(orchid) 내부 그림자가 은은하게 번지는 효과가 나타나는 것을 볼 수 있습니다.
::first-line에 사용할 수 있는 주요 속성
::first-line 가상 요소에는 모든 CSS 속성을 사용할 수 있는 것은 아니며, 아래와 같은 속성들만 적용됩니다.
- 글꼴 관련: font, font-size, font-style, font-weight, font-family 등
- 색상 관련: color, background-color, background-image 등 background 계열 속성
- 텍스트 장식: text-decoration, text-shadow, text-transform, letter-spacing, word-spacing
- 정렬 및 기타: line-height, vertical-align, clear
또한 최신 브라우저에서는 box-shadow처럼 일부 추가 속성도 지원하고 있으므로, 실제 프로젝트에서 활용하기 전에 대상 브라우저의 지원 여부를 확인하는 것이 좋습니다.