[CSS] 문장 맨 앞 글자 크게 만들기 - Drop Cap 만들기

Drop Cap

위와 같이 문단 가장 앞의 글자를 크게 써 두는 것을 Drop Cap 이라고 합니다.

CSS에서 위와 같은 Drop Cap을 만드는 방법은 아주 쉽습니다.

 

.drop-cap-text::first-letter {
  margin-right: 10px;
  font-size: xx-large;
  font-weight: bold;
  float: left;
}

클래스명 뒤에 ::first-letter를 넣는 것이 핵심입니다.

그러면 맨 앞의 글자 하나만 CSS 속성의 대상이 됩니다.

 

See the Pen drop cap by wooncloud (@wooncloud) on CodePen.