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

정의 및 사용 방법

::first-letter 가상 요소 선택자는 블록 컨테이너 요소의 첫 번째 줄에서 첫 번째 글자를 선택합니다.

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

이 선택자를 활용하면 텍스트 블록의 첫 글자를 강조하는 세련된 스타일을 쉽게 구현할 수 있습니다.

기본 예제

HTML

<p>
    This is for everyone.
    <br>
    The power of the Web is in its universality.
    Access by everyone regardless of disability is an essential aspect.
</p>

구문

제한된 스타일 속성만 허용

::first-letter 가상 요소 선택자는 텍스트 블록의 첫 번째 글자를 쉽게 선택하여 돋보이게 하기 위해서 고안된 것입니다.
폰트나, 텍스트, 그 배경 등 박스 모델과 관련된 대부분의 CSS 속성은 적용 가능하지만, 선택한 첫 번째 글자가 텍스트 라인의 흐름에서 완전히 벗어나 사용자에게 가독성이라는 접근성을 방해할 수 있는 속성(예: transform, unicode-bidi)은 적용할 수 없습니다.

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

모든 폰트 관련 속성들: color, font-size, font-family, font-style, font-weight, font-kerning, line-height , font-variant-numeric 등
모든 배경 관련 속성들: background-color, background-image, background-size, background-repeat, background-origin, background-attachment, background-position, background-blend-mode 등
모든 마진 관련 속성들: margin, margin-top, margin-bottom, margin-left, margin-right 등
모든 패딩 관련 속성들: padding, padding-top, padding-bottom, padding-left, padding-right 등
모든 보더 관련 속성들: border, border-style, border-color, border-width, border-radius 등
텍스트 관련 일부 속성들: text-decoration, text-decoration-color, text-decoration-style, text-decoration-line, text-transform, text-shadow, letter-spacing, word-spacing
그 밖의 일부 속성들: box-shadow, float, vertical-align

첫 번째 글자에 포함되는 구두점

::first-letter 가상 요소 선택자는 첫 번째 글자를 선택하는데,
여기서 첫 번째 글자 바로 앞이나 뒤에 위치한 구두점(Punctuation)이 있으면 이 구두점과 뒤에 오는 첫 글자를 하나로 함께 선택합니다.

구두점이란, 언어의 특징이나 관습마다 다르지만 문장의 의미를 명확히 하고 논리적 구조를 밝히기 위해 사용하는 별표(*), 따옴표(", ')나 괄호((, [), 마침표(.), 쉼표(,), 물음표(?), 느낌표(!) 등의 부호를 말합니다.

이처럼 ::first-letter는 첫 번째 글자 바로 앞이나 바로 뒤에 있는 구두점을 첫 번째 글자의 일부로 간주하여 함께 선택합니다. 이는 문장의 논리를 시각적으로도 유지하기 위해 CSS 명세서에서 이 점을 반영해 처리 방식에 대한 규칙을 만든 것입니다.

첫 번째 글자에 포함되는 구두점 규칙

첫 번째 글자 바로 앞 또는 뒤에 위치한 구두점은 첫 번째 글자의 일부로 함께 선택됩니다. 단, 대시(-) 및 일부 구두점은 제외됩니다.
종류가 같든 다르든 구두점이 연속해서 배열되어 있어도, 모두 첫 번째 글자의 일부로 간주됩니다.
첫 번째 글자 바로 앞에 공백(띄어쓰기)이 있고 구두점이 그보다 더 앞에 있을 경우, 첫 번째 글자가 없다고 간주하여 ::first-letter는 아무것도 선택하지 않습니다.
첫 번째 글자 바로 뒤에 공백(띄어쓰기)이 있고 구두점이 그다음에 올 경우, 해당 구두점은 첫 번째 글자의 일부로 간주되지 않습니다.

예제

HTML

<!-- 구두점은 첫 번째 글자의 일부로 함께 선택됩니다. -->
<p>*First Letters and Associated Punctuation</p>
<p>*()First Letters and Associated Punctuation</p>
<p>F*irst Letters and Associated Punctuation</p>
<p>F**()irst Letters and Associated Punctuation</p>

<!-- 첫 번째 글자 바로 앞에 공백(띄어쓰기)이 있고
     구두점이 그보다 더 앞에 있을 경우,
     첫 번째 글자가 없다고 간주하여
     ::first-letter는 아무것도 선택하지 않습니다. -->
<p>* First Letters and Associated Punctuation</p>

<!-- 첫 번째 글자 바로 뒤에 공백(띄어쓰기)이 있고
     구두점이 그다음에 올 경우,
     해당 구두점은 첫 번째 글자의 일부로 간주되지 않습니다. -->
<p>F *irst Letters and Associated Punctuation</p>

첫 번째 글자 선택 기준

::first-letter 가상 요소 선택자는 블록 컨테이너에 연결될 때만 효과를 발휘합니다.
첫 번째 글자는 해당 요소가 속한 첫 번째 줄에서 첫 번째 글자를 선택합니다. 단 이미지 관련 콘텐츠(예: <img>) 또는 인라인 표 같은 콘텐츠가 실제 글자보다 먼저 나오지 않아야 합니다.
해당 요소에 ::before(텍스트 방향이 왼쪽에서 오른쪽 방향, 예: 영어, 한국어 등) 또는 ::after(텍스트 방향이 오른쪽에서 왼쪽 방향, 예: 아랍어, 히브리어 등) 콘텐츠가 있는 경우 첫 번째 글자는 해당 콘텐츠를 포함한 요소의 콘텐츠에서 선택됩니다.

예제

HTML

<span class="target">블록 컨테이너가 아닌 요소입니다.</span>
<p class="target"><img src="earth.jpg" width="150"> 첫 번째 글자 앞에 이미지가 있어요.</p>

<style>
    .star::before {
        content: "★";
    }
</style>
<p class="target star">::before 가상 요소의 콘텐츠로 별표(★)가 있어요</p>

활용 예제

영어 등 로마자를 사용하는 신문이나 잡지 등에서 첫 글자를 크게 만드는 걸 흔히 드롭 캡(Drop Cap)이라고 부릅니다.
활용 예제에서는 ::first-letter 가상 요소 선택자를 사용하여 제목 다음에 오는 문단의 첫 글자에 드롭 캡(Drop Cap) 효과를 적용합니다.

CSS

/* 제목 바로 다음에 오는 문단(p)의 첫 글자만 선택 */
h3 + p::first-letter {
    font-size: 4rem;      /* 글자 크기를 대폭 키움 */
    font-weight: bold;    /* 굵게 강조 */
    float: left;          /* 글자를 왼쪽으로 띄워 텍스트가 둘러싸게 함 */
    line-height: 1;       /* 줄 높이를 조절해 위아래 여백 최적화 */
    margin-right: 8px;    /* 오른쪽 본문과의 간격 */
    color: #0056b3;       /* 웹의 상징적인 파란색 계열 */
}

/* 문단의 전체적인 가독성을 위한 스타일 */
p {
    line-height: 1.6;
    font-size: 1.1rem;
}

HTML

<h3>The Birth of the World Wide Web</h3>
<p>
    When I first proposed the information management system in 1989, 
    my goal was to allow scientists to share data across the globe. 
    The web was designed to be a universal space for information, 
    accessible to everyone, everywhere, regardless of their background.
</p>
<p>
    Today, the web continues to evolve as a powerful tool for 
    creativity and collaboration. It remains a decentralized platform 
    where the only limit is our collective imagination.
</p>