드롭캡 CSS 만드는 법, 코드로 이해하기

2026년 7월 18일

드롭캡 생성기 화면 — 첫 글자가 크게 강조된 미리보기 문단과 함께 생성된 CSS·HTML 코드가 나란히 표시된 모습

드롭캡(Drop Cap)은 문단 첫 글자를 크게 키워 도드라지게 만드는 타이포그래피 기법이며, CSS 표준 가상 선택자 ::first-letter 하나로 구현됩니다.

같은 속성이라도 float·line-height·여백 값을 어떻게 조합하느냐에 따라 결과가 크게 달라지기 때문에, 각 속성이 왜 필요한지 알아두면 값을 바꿔가며 원하는 모양을 직접 맞출 수 있습니다.

이 글은 ::first-letter가 실제로 동작하는 원리와, 도구의 슬라이더 값이 결과 CSS 코드의 어느 줄로 이어지는지를 정리합니다.

요약 ① 드롭캡은 .drop-cap::first-letter에 float, line-height: 1, font-size를 함께 지정해 구현하는 CSS 표준 기법입니다. ② 첫 글자 크기·색상·여백 슬라이더 값은 각각 font-size·color·margin-right·margin-top 속성 값으로 그대로 치환됩니다. ③ 공백 있는 폰트 이름의 따옴표 누락, margin-top 부호 차이, 요소별 지원 여부는 코드를 직접 확인해야 하는 대표적인 지점입니다.

드롭캡 코드를 붙여넣었는데 안 먹는 이유

블로그나 브런치 글에서 첫 문단을 강조하려고 검색으로 찾은 CSS 코드를 그대로 붙여넣는 경우가 많습니다.

그런데 막상 적용하면 폰트가 하나도 안 바뀌거나, 첫 글자가 본문과 겹쳐 보이거나, 아예 아무 변화가 없는 경우가 흔합니다.

세 가지 원인이 대부분입니다. 폰트 이름의 따옴표 누락, margin-top 부호 반전, ::first-letter가 통하지 않는 요소 사용 중 하나입니다.

아래에서 순서대로 짚습니다.

CSS만으로 드롭캡을 직접 만드는 방법

도구 없이도 아래 두 블록만 있으면 드롭캡을 완성할 수 있습니다.

.drop-cap::first-letter {
  float: left;
  font-size: 4rem;
  line-height: 1;
  font-weight: bold;
  color: #1a1a1a;
  margin-right: 8px;
  margin-top: 4px;
  font-family: Georgia, serif;
}

.drop-cap {
  font-size: 18px;
  line-height: 1.6;
}

<p class="drop-cap">
  본문 텍스트가 들어갑니다.
</p>

각 속성이 하는 일은 다음과 같습니다.

`::first-letter`로 첫 글자 선택하기

::first-letter 는 텍스트가 있는 블록 컨테이너 요소(p, div, li, td, blockquote 등)의 "첫 줄 첫 글자"에만 스타일을 입히는 가상 선택자입니다.

문단이 따옴표나 괄호로 시작하면 그 문자까지 첫 글자에 포함되는 것도 명세에 정해진 규칙입니다.

`float: left`로 흐름에서 분리하기

float: left 가 드롭캡의 시각적 핵심입니다. ::first-letter로 글자만 키우면 여전히 인라인 흐름 안에 있어 "잘려 나온" 드롭캡처럼 보이지 않습니다.

float: left를 주면 이 글자가 정상적인 텍스트 흐름에서 빠져나와 왼쪽에 고정되고, 뒤따르는 줄들이 그 오른쪽과 아래를 감싸듯 흐르게 됩니다.

`line-height: 1`로 세로 공간 맞추기

line-height: 1 은 float와 항상 짝을 이루는 이유가 있습니다. 큰 글자도 자신만의 줄 높이(line box)를 갖습니다.

본문의 line-height(예: 1.6)를 그대로 물려받으면 4rem, 5rem처럼 큰 폰트 크기에 1.6배가 곱해져 실제 글꼴 높이보다 훨씬 큰 세로 공간을 차지해, 뒤 텍스트가 어색하게 밀려 내려갑니다.

line-height를 1로 고정하면 글자 박스의 세로 크기가 글꼴 자체의 실제 높이에 가깝게 맞춰지고, 그 다음부터는 margin-top으로 위치를 조절할 수 있습니다.

`font-size`와 여백 값

font-size를 rem으로 두는 이유는 rem이 문서 루트(<html>)의 글자 크기를 기준으로 계산되는 상대 단위이기 때문입니다.

사용자가 브라우저 글자 크기를 바꾸거나, 반응형 화면에서 루트 font-size 자체가 달라져도 드롭캡과 본문 사이의 크기 비율이 유지됩니다. px로 고정하면 이 비율이 화면마다 어긋날 수 있습니다.

margin-right·margin-top 은 큰 글자가 뒤 텍스트에 바로 붙어 답답해 보이지 않도록 오른쪽 여백과 수직 위치를 미세 조정하는 값입니다.

슬라이더로 빠르게 비교하기

값을 하나씩 손으로 바꿔가며 저장하고 새로고침해서 확인하는 것도 방법이지만, 슬라이더로 값을 움직이며 실시간 미리보기를 보는 편이 각 속성이 결과에 미치는 영향을 훨씬 빠르게 파악할 수 있습니다.

저희 도구로 확인하기.

영어 드롭캡 생성기

입력과 동시에 CSS·HTML 코드가 바로 생성되며, 별도 설치나 로그인 없이 무료로 사용할 수 있습니다.

슬라이더 값이 실제 CSS 어디로 매핑되는가

도구의 각 조작 항목은 아래처럼 결과 CSS의 정해진 속성 한 줄로 그대로 치환됩니다.

조작 항목	매핑되는 CSS 속성	값 범위
첫 글자 글꼴 (select)	`.drop-cap::first-letter`의 `font-family`	프리셋 목록 중 선택
첫 글자 색상 (color picker)	`color`	헥스코드(#RRGGBB)
첫 글자 크기	`font-size`	2rem ~ 8rem
첫 글자 두께 (select)	`font-weight`	normal / bold / bolder
우측 여백	`margin-right`	0px ~ 20px
상단 정렬 여백	`margin-top`	-10px ~ 20px
본문 글자 크기	`.drop-cap`의 `font-size` (첫 글자가 아니라 본문 전체)	12px ~ 32px
본문 줄간격	`.drop-cap`의 `line-height` (첫 글자의 `line-height`는 항상 1로 고정)	1.2 ~ 2.2

float 방향은 항상 left로 고정되어 있어 조절 항목 자체가 없습니다. 그래서 위 표에도 없습니다.

본문 글자 크기·줄간격 슬라이더는 첫 글자가 아니라 .drop-cap 전체, 즉 문단 자체의 스타일을 조절하는 값입니다.

실제로 쓸 페이지의 본문 폰트 크기와 줄간격에 맞춰 먼저 이 두 값을 조절해 두면, 미리보기가 실제 게시 화면과 비슷한 비율로 보여서 첫 글자 크기를 가늠하기가 더 쉽습니다.

자주 하는 실수

공백 있는 폰트 이름에 따옴표를 빠뜨리는 경우가 가장 흔합니다. CSS는 공백으로 구분된 단어를 별개의 값으로 해석합니다.

font-family: Playfair Display, serif;라고 쓰면 "Playfair"와 "Display"를 서로 다른 값으로 읽어, 원하는 폰트를 찾지 못하고 다음 폴백 폰트로 넘어갑니다.

font-family: "Playfair Display", serif;처럼 따옴표로 감싸야 정확히 인식됩니다.

실수	나타나는 증상	원인
공백 있는 폰트명에 따옴표 누락	지정한 폰트가 안 먹고 폴백 폰트만 보임	공백으로 나뉜 단어를 별개 값으로 해석
margin-top 부호 혼동	값을 바꿔도 원하는 방향으로 안 움직이는 느낌	음수는 글자를 위로, 양수는 아래로 이동시킴
인라인 요소에 적용	셀렉터를 정확히 썼는데도 첫 글자가 그대로 보임	`::first-letter`는 블록 컨테이너 요소에만 적용됨

margin-top 방향 이해하기

margin-top 부호는 절대값이 아니라 방향을 결정합니다. 흐름에서 분리된 첫 글자는 독립된 위치에 있어, 음수면 위로 당겨지고 양수면 아래로 내려갑니다.

어느 쪽이 자연스러워 보이는지는 글꼴·크기·본문 line-height 조합마다 다르므로, 값을 바꿔가며 미리보기로 비교하는 것이 가장 정확합니다.

`::first-letter`가 적용되는 요소

::first-letter가 통하는 범위도 정해져 있습니다. 명세상 블록 컨테이너 요소—문단(p), div, 목록 항목(li), 표 셀(td), 인용문(blockquote) 등—의 텍스트에 적용됩니다.

반면 span이나 a처럼 기본 display가 inline인 요소에는 적용되지 않습니다(직접 display를 block 계열로 바꾸지 않는 한).

실제로 적용됐는지는 브라우저 개발자 도구의 Elements/Computed 탭에서 첫 글자에 스타일이 계산되고 있는지 확인하는 것이 가장 확실합니다.

정리

드롭캡은 ::first-letter 가상 선택자 하나로 구현되는 표준 CSS 기법입니다.
float: left로 글자를 흐름에서 분리하고, line-height: 1로 글자 박스의 세로 크기를 실제 글꼴 크기에 맞춥니다.
font-size는 rem 단위를 쓰면 루트 글자 크기가 바뀌어도 드롭캡과 본문의 비율이 유지됩니다.
슬라이더 값은 font-size·color·margin-right·margin-top·font-weight·font-family로 그대로 매핑되고, 본문 크기·줄간격 슬라이더는 첫 글자가 아니라 .drop-cap 전체에 적용됩니다.
공백 있는 폰트 이름은 따옴표로 감싸야 하고, margin-top 부호와 요소별 적용 여부는 브라우저에서 직접 확인하는 게 가장 확실합니다.

영어 드롭캡 생성기

입력과 동시에 CSS·HTML 코드가 바로 생성되며, 별도 설치나 로그인 없이 무료로 사용할 수 있습니다.

자주 묻는 질문

`::first-letter`는 모든 요소에 다 적용되나요?

명세상 블록 컨테이너로 분류되는 요소—문단(p), div, 목록 항목(li), 표 셀(td), 인용문(blockquote) 등—의 텍스트 첫 글자에 적용됩니다.

반면 span이나 a처럼 기본 display가 inline인 요소에는 적용되지 않습니다. 마크업 구조에 따라 예상과 다르게 동작할 수 있으므로, 브라우저 개발자 도구에서 첫 글자에 실제로 스타일이 계산되고 있는지 확인하는 것이 가장 확실합니다.

폰트 이름에 공백이 있으면 항상 따옴표를 써야 하나요?

그렇게 하는 것이 안전합니다. CSS 문법상 공백이 포함된 폰트 이름은 따옴표로 감싸 하나의 문자열로 지정해야 정확히 인식됩니다.

따옴표 없이 쓰면 공백을 기준으로 별개의 값으로 해석되어 원하는 폰트를 찾지 못하고 다음 폴백 폰트로 넘어갑니다.

margin-top을 음수로 주는 것과 양수로 주는 것은 뭐가 다른가요?

둘 다 float로 흐름에서 분리된 첫 글자의 수직 위치를 옮기는 값이지만 방향이 반대입니다. 음수 값은 글자를 원래 위치보다 위로 끌어올리고, 양수 값은 아래로 내립니다.

어느 쪽이 자연스러운지는 글꼴·크기·본문 line-height 조합마다 달라, 슬라이더로 직접 비교하는 것이 가장 빠릅니다.

도구에서 만든 코드를 워드프레스나 티스토리에 그대로 써도 되나요?

생성되는 것은 표준 CSS와 HTML(p 태그) 코드이므로, 에디터가 커스텀 CSS 삽입을 지원한다면 그대로 붙여넣어 쓸 수 있습니다.

다만 에디터마다 문단을 자동으로 다른 태그로 감싸거나 클래스명을 따로 부여하는 경우가 있습니다.

클래스명이 실제 마크업과 일치하는지와 첫 글자에 스타일이 실제로 적용됐는지는 게시 후 화면에서 직접 확인하는 것이 안전합니다.