1. 개발자를 위한 웹 기술
  2. CSS
  3. ::first-letter

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

::first-letter

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

* Some parts of this feature may have varying levels of support.

::first-letter CSS 의사 요소는 블록 컨테이너의 첫 번째 줄에 있는 첫 글자에 스타일을 적용합니다. 단, 그 앞에 다른 콘텐츠(이미지나 인라인 테이블)가 없는 경우에만 적용됩니다.

시도해 보기

p::first-letter {
  font-size: 1.5rem;
  font-weight: bold;
  color: brown;
}

<p>
  Scientists exploring the depths of Monterey Bay unexpectedly encountered a
  rare and unique species of dragonfish. This species is the rarest of its
  species.
</p>

<p>
  When Robison and a team of researchers discovered this fish, they were aboard
  a week-long expedition.
</p>

요소의 첫 글자를 식별하는 일은 항상 단순하지 않습니다.

  • 첫 글자 앞뒤에 오는 구두점은 매칭에 포함됩니다. 구두점에는 유니코드에서 정의된 여는 괄호(Ps), 닫는 괄호(Pe), 시작 따옴표(Pi), 끝 따옴표(Pf), 기타 구두점(Po) 클래스에 해당하는 문자가 포함됩니다.
  • 일부 언어에는 항상 함께 대문자로 쓰이는 이중 문자(digraph)가 있습니다. 예를 들어 네덜란드어의 IJ가 그러합니다. 이런 경우 ::first-letter 의사 요소는 두 글자를 모두 매칭해야 합니다.
  • ::before 의사 요소와 content 속성을 조합해 요소 앞에 텍스트를 삽입할 수 있습니다. 이 경우 ::first-letter는 삽입된 콘텐츠의 첫 글자를 매칭합니다.

참고 : CSS는 의사 클래스와 의사 요소를 구분하기 위해 ::first-letter와 같이 콜론 두 개(::)를 사용하는 표기법을 도입했습니다. 하위 호환성을 위해 브라우저는 이전에 도입된 단일 콜론(:first-letter) 표기도 지원합니다.

네덜란드어 IJ 같은 이중 문자에 대한 브라우저 지원은 미흡합니다. 아래 호환성 표에서 현재 상태를 확인하세요.

사용 가능한 속성

::first-letter 의사 요소와 함께 사용할 수 있는 CSS 속성은 일부에 한정됩니다.

구문

css
::first-letter {
  /* ... */
}

예제

기본 드롭 캡 (drop cap)

이 예제에서는 ::first-letter 의사 요소를 사용해 <h2> 바로 뒤에 오는 단락의 첫 글자를 드롭 캡 효과로 꾸밉니다.

HTML

html
<h2>My heading</h2>
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est.
</p>
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>

CSS

css
p {
  width: 500px;
  line-height: 1.5;
}

h2 + p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px 3px 0 red;
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}

결과

특수 구두점 및 비라틴 문자에 대한 효과

이 예제는 ::first-letter가 특수 구두점 및 비(非)라틴 문자에 어떻게 적용되는지 보여줍니다.

HTML

html
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>"特殊的汉字标点符号开头。</p>

CSS

css
p::first-letter {
  color: red;
  font-size: 150%;
}

결과

SVG text 요소에서 첫 글자 스타일링

이 예제에서는 ::first-letter 의사 요소를 사용해 SVG <text> 요소의 첫 글자를 스타일링합니다.

참고 : 작성 시점 기준으로 이 기능은 제한적으로만 지원됩니다.

HTML

html
<svg viewBox="0 0 300 40">
  <text y="30">First letter in &lt;text&gt; SVG</text>
</svg>

CSS

css
text {
  font-family: sans-serif;
}

text::first-letter {
  font-family: serif;
  font-size: 2rem;
  font-weight: 600;
  fill: tomato;
  stroke: indigo;
}

결과

명세서

Specification
CSS Pseudo-Elements Module Level 4
# first-letter-pseudo

브라우저 호환성

같이 보기

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content