AAtomic CSS

text-indent

텍스트 블록의 첫 번째 줄 들여쓰기를 설정합니다. ti2rem으로 단락 들여쓰기를, neg-ti로 내어쓰기를 적용할 수 있습니다.

클래스 목록

패턴: ti{N}px, ti{N}rem — 음수는 neg-ti 접두사를 사용합니다.

클래스CSS설명
ti16pxtext-indent: 16px16px 들여쓰기
ti2remtext-indent: 2rem2rem(20px) 들여쓰기
ti3-2remtext-indent: 3.2rem3.2rem(32px) 들여쓰기
ti4remtext-indent: 4rem4rem(40px) 들여쓰기
neg-ti2remtext-indent: -2rem-2rem 내어쓰기 (hanging indent)

시각적 비교

첫 번째 줄의 들여쓰기가 변하는 모습을 확인하세요.

기본값 (0) —

좋은 타이포그래피는 읽기 편한 텍스트를 만드는 것입니다. 단락의 첫 줄을 들여쓰면 단락 사이의 구분이 명확해지며, 시선의 흐름을 자연스럽게 유도할 수 있습니다. 이는 특히 긴 글에서 효과적입니다.

16px — ti16px

좋은 타이포그래피는 읽기 편한 텍스트를 만드는 것입니다. 단락의 첫 줄을 들여쓰면 단락 사이의 구분이 명확해지며, 시선의 흐름을 자연스럽게 유도할 수 있습니다. 이는 특히 긴 글에서 효과적입니다.

2rem (20px) — ti2rem

좋은 타이포그래피는 읽기 편한 텍스트를 만드는 것입니다. 단락의 첫 줄을 들여쓰면 단락 사이의 구분이 명확해지며, 시선의 흐름을 자연스럽게 유도할 수 있습니다. 이는 특히 긴 글에서 효과적입니다.

4rem (40px) — ti4rem

좋은 타이포그래피는 읽기 편한 텍스트를 만드는 것입니다. 단락의 첫 줄을 들여쓰면 단락 사이의 구분이 명확해지며, 시선의 흐름을 자연스럽게 유도할 수 있습니다. 이는 특히 긴 글에서 효과적입니다.

-2rem (내어쓰기) — neg-ti2rem pl2rem

좋은 타이포그래피는 읽기 편한 텍스트를 만드는 것입니다. 단락의 첫 줄을 들여쓰면 단락 사이의 구분이 명확해지며, 시선의 흐름을 자연스럽게 유도할 수 있습니다. 이는 특히 긴 글에서 효과적입니다.

클래스별 상세

ti16pxtext-indent: 16px

첫 줄을 16px 들여씁니다. 작은 단위의 들여쓰기에 사용합니다.

<!-- 작은 들여쓰기 -->
<p class="ti16px fs16px cFAFAFA lh1-7">
  이 단락의 첫 줄은 16px만큼 들여쓰기됩니다.
  두 번째 줄부터는 들여쓰기가 적용되지 않습니다.
</p>

ti2remtext-indent: 2rem

첫 줄을 2rem(20px) 들여씁니다. 가장 일반적인 단락 들여쓰기 값입니다.

<!-- 일반적인 단락 들여쓰기 -->
<p class="ti2rem fs16px cFAFAFA lh1-7">
  이 단락의 첫 줄은 2rem(20px)만큼 들여쓰기됩니다.
  한국어 문단에서 가장 자주 사용되는 들여쓰기 값입니다.
</p>

ti4remtext-indent: 4rem

첫 줄을 4rem(40px) 들여씁니다. 넓은 들여쓰기가 필요한 경우 사용합니다.

<!-- 넓은 들여쓰기 -->
<p class="ti4rem fs16px cFAFAFA lh1-7">
  이 단락은 4rem(40px)의 넓은 들여쓰기가 적용됩니다.
  시각적 강조나 인용 블록에 활용할 수 있습니다.
</p>

neg-ti2remtext-indent: -2rem

첫 줄을 -2rem 내어씁니다(hanging indent). 참고문헌, 용어집 등에서 첫 줄 이외를 들여쓸 때 pl2rem과 함께 사용합니다.

<!-- hanging indent (참고문헌 스타일) -->
<p class="neg-ti2rem pl2rem fs16px cFAFAFA lh1-7">
  Kim, J. (2024). "Atomic CSS 패턴의 효율성 분석."
  웹 개발 저널, 15(3), 45-62. 서울: 한국웹학회.
</p>

<!-- 용어집 스타일 -->
<dl>
  <dd class="neg-ti2rem pl2rem fs16px cFAFAFA lh1-7 mb16px">
    <strong>Atomic CSS</strong> — 하나의 CSS 속성에 하나의 클래스를
    매핑하는 유틸리티 우선 CSS 방법론.
  </dd>
</dl>

팁 & 주의사항

첫 줄만 영향받음

text-indent는 블록 요소의 첫 번째 줄에만 적용됩니다. 모든 줄을 들여쓰려면 pl2rem(padding-left)을 사용하세요.

내어쓰기(hanging indent) 패턴

neg-ti2rem pl2rem 조합으로 첫 줄만 왼쪽으로 빠지는 hanging indent를 만들 수 있습니다.

paddingmargintext-align