CSS ::first-line 가상 요소 – 블록 컨테이너 요소의 첫 번째 줄 선택

정의 및 사용 방법

::first-line 가상 요소 선택자는 블록 컨테이너 요소의 첫 번째 줄을 선택합니다.
이 첫 번째 줄은 소스 코드상의 줄이 아니라, 실제로 화면에 렌더링되어 나타나는 첫 번째 줄을 의미합니다.

블록 컨테이너 요소: 문서 흐름 맥락에서 블록(영역) 상자 수준의 레이아웃을 형성하며, 컨테이너 영역을 정의(너비와 높이를 지정)할 수 있는 요소를 말합니다.
::first-line은 display 속성 값이 block, inline-block, flex, inline-flex, grid, inline-grid, table 등으로 설정된 블록 컨테이너 요소에는 적용 가능하지만, inline이나 contents 등 블록 컨테이너가 아닌 요소에는 아무런 효과가 없습니다.

이 선택자를 활용하면, 텍스트 블록의 첫 줄을 강조하여 도입부를 시각적으로 돋보이게 만들 수 있습니다.

기본 예제

HTML

<p>
    이 문장의 첫 번째 줄은 굵고 파란색으로 표시되지만,
    줄바꿈 이후의 내용은 기본 스타일로 나타납니다.
    ::first-line 가상 요소 선택자를 활용하면,
    텍스트 블록의 첫 줄을 강조하여
    도입부를 시각적으로 돋보이게 만들 수 있습니다.
</p>

구문

첫 번째 줄이 결정되는 방식

블록 컨테이너 요소는 화면에 렌더링될 때, 요소의 너비와 글꼴 크기 등에 따라 한 줄, 또는 여러 줄로 나뉘어 표시됩니다. 이때 첫 번째 줄은 소스 코드상의 줄이 아니라, 실제로 화면에 표시된 결과를 기준으로 결정됩니다.

::first-line 가상 요소 선택자는 실제로 화면에 표시된 블록 컨테이너 요소의 첫 번째 줄을 강조하여 특히, 텍스트 도입부를 시각적으로 돋보이게 하기 위해서 고안된 것입니다.

첫 번째 줄에 포함된 '텍스트 흐름 콘텐츠'만 선택

::first-line 가상 요소 선택자는 블록 컨테이너 요소의 첫 번째 줄을 기준으로 스타일을 적용합니다. 그러나 이 줄에 포함된 모든 콘텐츠에 동일하게 적용되는 것은 아니며, 텍스트 흐름(Inline formatting context) 콘텐츠에만 효과가 나타납니다.

첫 번째 줄에 텍스트 흐름(inline formatting context) 콘텐츠가 없다면, ::first-line 가상 요소 선택자는 아무런 효과가 없습니다.
첫 번째 줄에 텍스트 흐름(inline formatting context) 콘텐츠가 일부 포함되어 있다면, ::first-line 가상 요소 선택자는 텍스트 흐름 콘텐츠에만 영향을 미칩니다.

텍스트 흐름(inline formatting context) 콘텐츠: 텍스트 흐름(Inline formatting context) 콘텐츠란, 한 줄에 다른 요소와 나란히 배치되면서도, 너비나 높이 등의 컨테이너 영역을 정의할 수 없는 인라인 레벨(Inline level) 요소나, 단순 텍스트로 나열되는 콘텐츠(text sequences)를 말합니다.

예제

HTML

<p>
    <button>button</button>
    <br> <!-- 줄바꿈을 시켜 버튼이 첫 번째 줄을 모두 차지하게 함 -->
    너비나 높이를 지정할 수 있는 버튼이
    첫 번째 줄을 전부 차지함으로,
    첫 번째 줄에는 텍스트 흐름 콘텐츠가 없습니다.
    따라서, ::first-line 가상 요소 선택자는
    아무런 효과가 없습니다.
</p>
<p>
    <button>button</button>
    너비나 높이를 지정할 수 있는 버튼이
    첫 번째 줄의 일부와 텍스트 흐름 콘텐츠가인 단순 텍스가 함께 있으므로
    따라서, ::first-line 가상 요소 선택자는
    단순 텍스트에만 영향을 미칩니다.
</p>
<p>
    <span>span</span>
    첫 번째 줄에 텍스트 흐름 콘텐츠인 span과 단순 텍스가 함께 있으므로
    ::first-line 가상 요소 선택자는
    span과 단순 텍스트 모두에 영향을 미칩니다.
</p>

제한된 스타일 속성만 허용

::first-line 가상 요소 선택자는 블록 컨테이너 첫 번째 줄의 텍스트 흐름(Inline formatting context) 콘텐츠, 특히 텍스트 라인을 시각적으로 쉽게 스타일링하기 위한 것입니다.

첫 번째 줄 전체의 폰트와 텍스트, 그리고 그 배경과 관련된 대부분의 CSS 속성은 적용 가능하지만, 선택한 첫 번째 줄이라고 하는 줄 자체의 레이아웃을 틀어지게 할 수 있는 속성(예: margin, padding, border)이나, 컨테이너 흐름에서 완전히 벗어나 사용자에게 첫 번째 줄이라는 인식에 대한 가독성이라는 접근성을 방해할 수 있는 속성(예: transform, unicode-bidi, float)은 적용할 수 없습니다.

다음은 ::first-line 가상 요소 선택자에 적용할 수 있는 속성입니다.