::first-line 의사 요소(가상 요소)는 선택자로 지정한 요소의 텍스트 중 첫 번째 줄에만 특별한 스타일을 적용할 때 사용합니다. 문단 전체가 아니라 실제로 화면에 렌더링된 첫 줄에만 스타일이 적용되며, 브라우저 창 크기가 변해 줄바꿈 위치가 달라지더라도 자동으로 해당 줄에 스타일이 유지됩니다.
:first-line 의사 요소 예제
다음 예제는 :first-line 의사 요소를 활용해 문서 내 요소의 첫 줄에 밑줄 효과를 추가하는 방법을 보여줍니다.
<html>
<head>
<style>
p:first-line {
text-decoration: underline;
}
p.noline:first-line {
text-decoration: none;
}
</style>
</head>
<body>
<p class="noline"> 이 문장은 noline 클래스에 속하므로 밑줄이 적용되지 않습니다.</p>
<p>위에서 정의한 CSS 규칙에 따라 이 문단의 첫 줄에는 밑줄이 그어집니다. 나머지 줄은 일반적인 스타일로 유지됩니다. 이 예제는 :first-line 의사 요소를 사용하여 HTML 요소의 첫 줄에 효과를 주는 방법을 보여줍니다.</p>
</body>
</html>
코드 설명
p:first-line— 모든<p>요소의 첫 줄에text-decoration: underline;을 적용하여 밑줄을 표시합니다.p.noline:first-line—noline클래스를 가진 문단은text-decoration: none;으로 설정되어 첫 줄에도 밑줄이 나타나지 않습니다.
실행 결과
브라우저에서 실행하면 두 번째 문단의 첫 줄에만 밑줄이 그어지고, 나머지 줄은 일반 텍스트로 표시됩니다. 반면 noline 클래스가 지정된 첫 번째 문단에는 어떤 장식 효과도 적용되지 않습니다.
참고 사항
::first-line에는 모든 CSS 속성을 사용할 수 있는 것은 아닙니다. 주로 font 관련 속성, color, background, text-decoration, text-transform, letter-spacing, word-spacing, line-height 등 텍스트 꾸미기와 관련된 일부 속성만 적용됩니다. 또한 최신 CSS 표준에서는 콜론 두 개(::first-line) 표기를 권장하지만, 하위 호환성을 위해 단일 콜론(:first-line)도 여전히 사용할 수 있습니다.