CSS의 ::first-line 가상 요소(pseudo element)는 요소 콘텐츠의 첫 번째 줄만 선택하여 스타일을 적용할 수 있는 강력한 선택자입니다. 문단의 첫 줄만 강조하고 싶을 때 유용하게 활용됩니다.
다만 주의할 점이 있습니다. 텍스트를 감싸고 있는 요소의 너비가 고정되어 있지 않다면, 브라우저 창 크기에 따라 한 줄에 들어가는 텍스트의 양이 달라지므로 첫 번째 줄의 길이도 함께 변하게 됩니다.
::first-line 기본 예제
먼저 p 태그의 첫 번째 줄에 배경색과 글자색을 적용하는 간단한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
background-color: lightgreen;
color: white;
}
</style>
</head>
<body>
<h2>Lorem Ipsum</h2>
<p>Phasellus id ante turpis.Vestibulum luctus justo id odio iaculis condimentum. Vestibulum sapien mauris, feugiat id posuere vitae, condimentum blandit sapien.</p>
<div id="divDisplay"></div>
<script>
divDisplay.textContent = 'Current window width: '+window.innerWidth+'px';
window.addEventListener('resize', function() {
divDisplay.textContent = 'Current window width: '+window.innerWidth+'px';
})
</script>
</body>
</html>실행 결과
초기 창 너비가 '606px'일 때의 화면입니다. 첫 번째 줄에만 연두색 배경이 적용된 것을 확인할 수 있습니다.
창 너비를 늘리면 어떻게 될까요? 한 줄에 더 많은 텍스트가 들어가면서 첫 번째 줄의 범위도 넓어집니다.
반면, 텍스트를 담는 요소의 너비를 고정한 상태에서 창 크기를 조절하면 첫 번째 줄의 길이는 변하지 않습니다.
고정 너비 컨테이너 예제
이번에는 div 요소의 너비를 420px로 고정한 상태에서 ::first-line 가상 요소를 적용해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
background-color: #FF8A00;
color: white;
}
div{
width: 420px;
}
</style>
</head>
<body>
<div>
<h2>Demo Heading</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</div>
</body>
</html>실행 결과
각 문단의 첫 번째 줄에만 주황색(#FF8A00) 배경과 흰색 글자가 적용됩니다. 컨테이너 너비가 고정되어 있으므로 창 크기와 관계없이 일관된 결과를 볼 수 있습니다.
정리
::first-line 가상 요소는 문단의 첫 줄만 시각적으로 강조할 때 매우 편리합니다. 사용 시 다음 두 가지를 기억하세요.
- 컨테이너 너비가 고정되어 있지 않으면 창 크기에 따라 첫 줄의 길이가 달라집니다.
- 일부 속성(font, color, background 등)만 적용 가능하며, 모든 CSS 속성을 사용할 수 있는 것은 아닙니다.