디자인 아틀라스
EN
Aa 타이포그래피

행잉 인덴트

Hanging indent

문단 첫 줄은 왼쪽 끝에 붙이고, 그 다음 줄들을 오히려 안쪽으로 들여 쓰는 배치. 일반적인 들여쓰기와 정반대입니다.

다른 이름: 내어쓰기Hanging indentation
···
html
<div class="stage">
  <p class="entry"><span class="label">Bass, S. (1960).</span> Saul Bass on title sequences and the beginnings of kinetic typography in American film design practice.</p>
  <div class="readout" id="readout">확인 중…</div>
</div>
css
.stage{width:min(92%,420px)}
.entry{font-size:12px;line-height:1.6;color:var(--fg);margin:0;font-family:Georgia,'Times New Roman',serif;text-indent:-1.4em;padding-left:1.4em}
.label{font-weight:700}
.readout{margin-top:14px;font:10px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}
js
const readout = document.getElementById('readout');
const supported = CSS.supports('text-indent', '3em hanging');
readout.textContent = supported
  ? 'CSS.supports("text-indent: 3em hanging") = true — 신형 키워드 지원됨 (데모는 호환성 위해 고전 방식 사용)'
  : 'CSS.supports("text-indent: 3em hanging") = false — 이 브라우저는 신형 키워드 미지원, 음수 인덴트 방식만 동작';

일반 들여쓰기가 "여기서 새 문단이 시작한다"를 알린다면, 행잉 인덴트는 "이 항목이 어디까지 이어지는지"를 보여줍니다. 참고문헌 목록·사전 표제어·법률 조항 번호처럼 짧은 "표지"(저자명, 표제어, 조항 번호) 뒤에 긴 내용이 이어지는 구조에서, 첫 줄의 표지를 왼쪽에 고정하고 내용이 이어지는 줄들을 안으로 들여서 표지와 본문을 시각적으로 분리합니다.

CSS의 고전적인 구현은 `text-indent`에 음수를 주고 그만큼 `padding-left`(또는 `margin-left`)를 더하는 것입니다: `text-indent: -1.5em; padding-left: 1.5em;`. 첫 줄만 `text-indent`의 영향을 받으므로 왼쪽으로 당겨지고, 나머지 줄은 `padding`만큼 안으로 들어간 상태로 남습니다.

더 최근 표준인 `text-indent: 3em hanging`은 의도를 명시적으로 드러내지만 브라우저 지원이 고르지 않습니다. 데모는 `CSS.supports`로 이 최신 키워드가 실제로 지원되는지 그 자리에서 확인하고, 지원 여부와 무관하게 항상 동작하는 고전적인 음수 인덴트 방식으로 시각을 보여줍니다.

언제 쓰나

참고문헌 목록, 용어집, 번호 매긴 목록처럼 "짧은 표지 + 긴 내용"이 반복되는 구조에. 일반 본문 문단에는 필요 없습니다.