CSS text-indent — 첫 줄 들여쓰기 완전 정리

 

 

Web Development · CSS Text

CSS text-indent —
첫 줄 들여쓰기 완전 정리

단락 첫 줄만 안쪽으로 들이는 책 본문 스타일

.indent1 { text-indent: 15px; } /* 픽셀 */ .indent2 { text-indent: 5%; } /* 부모 너비의 5% */

기본 — 들여쓰기 없음. 단락의 첫 글자가 박스 왼쪽 끝에서 시작합니다. 일반 웹 본문의 기본 모습입니다.

30px — 첫 줄만 30픽셀 안쪽으로 들여쓰기. 책처럼 단락 시작이 명확하게 표시됩니다.

8% — 부모 너비의 비율로. 화면 크기에 따라 자동 조정. 반응형에 유리합니다.

음수 들여쓰기 — 첫 줄을 왼쪽으로 빼내어 라벨처럼. 정의 목록 등에 사용. padding-left와 함께.

---

1 단위와 사용 패턴

단위	예	특징
px	15px	고정값 — 정확
em	2em	폰트 크기 배수 — 글자 크기에 따라 자동 조정
%	5%	부모 너비 기준 — 반응형에 유리
음수	-20px	왼쪽으로 빼냄 — 라벨/정의 스타일

---

반응형

2 첫 줄만 적용된다

text-indent는 각 단락의 첫 줄만 들여쓰기. 두 번째 줄부터는 영향 X. 책 본문 스타일이 자동으로 만들어진다.

---

3 음수 — 행잉 인덴트

음수 값과 padding-left를 조합하면 첫 줄은 안쪽, 둘째 줄부터 더 안쪽인 행잉 인덴트(hanging indent) 가능. 사전·인용 등에 자주.

text-indent: -20px; padding-left: 30px; → 첫 줄은 왼쪽 끝, 둘째 줄부터 30px 들여쓰기

---

핵심 한 줄 요약

text-indent단락 첫 줄 들여쓰기

단위px / em / % / 음수

첫 줄만두 번째 줄부터는 영향 X

음수 + padding행잉 인덴트 효과

% 권장반응형에 유리

Tags

#text-indent #들여쓰기 #px #% #em #CSS #HTML #p #단락 #첫줄 #책스타일 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

text-indent, 들여쓰기, px, %, em, CSS, HTML, p, 단락, 첫줄, 책스타일, 웹개발, 티스토리