CSS의 :first-line 가상 요소(pseudo-element)를 사용하면 문서 내 요소의 첫 번째 줄에만 특별한 효과를 적용할 수 있습니다. 단락의 첫 줄을 강조하거나 잡지 레이아웃처럼 첫 줄을 꾸미고 싶을 때 유용하게 활용됩니다.
예제
다음 코드를 실행하면 텍스트의 첫 번째 줄에 특수 스타일이 적용되는 모습을 직접 확인할 수 있습니다.
<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)하여, 클래스 기반으로 스타일을 다르게 제어하는 방법도 함께 보여줍니다.
참고로 :first-line 가상 요소는 글꼴, 색상, 배경, 자간(letter-spacing), 텍스트 장식 등 일부 CSS 속성에만 적용할 수 있으며, 화면 크기나 창 너비에 따라 '첫 번째 줄'의 범위가 달라질 수 있다는 점도 알아두면 좋습니다.