AAtomic CSS

text-indent

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

클래스 목록

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

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스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 들여씁니다. 작은 단위의 들여쓰기에 사용합니다.

<!-- Small indent -->
<p class="ti16px fs16px cFAFAFA lh1-7">
  The first line of this paragraph is indented by 16px.
  From the second line onward, no indentation is applied.
</p>

ti2remtext-indent: 2rem

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

<!-- Standard paragraph indent -->
<p class="ti2rem fs16px cFAFAFA lh1-7">
  The first line of this paragraph is indented by 2rem (20px).
  This is the most commonly used indent value in paragraphs.
</p>

ti4remtext-indent: 4rem

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

<!-- Wide indent -->
<p class="ti4rem fs16px cFAFAFA lh1-7">
  This paragraph has a wide indent of 4rem (40px).
  Can be used for visual emphasis or quote blocks.
</p>

neg-ti2remtext-indent: -2rem

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

<!-- Hanging indent (bibliography style) -->
<p class="neg-ti2rem pl2rem fs16px cFAFAFA lh1-7">
  Kim, J. (2024). "Efficiency Analysis of Atomic CSS Patterns."
  Web Development Journal, 15(3), 45-62.
</p>

<!-- Glossary style -->
<dl>
  <dd class="neg-ti2rem pl2rem fs16px cFAFAFA lh1-7 mb16px">
    <strong>Atomic CSS</strong> — A utility-first CSS methodology that maps
    one CSS property to one class.
  </dd>
</dl>

팁 & 주의사항

첫 줄만 영향받음

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

내어쓰기(hanging indent) 패턴

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

paddingmargintext-align