text-indent

text-indent 유틸리티는 블록 안에서 텍스트 앞에 표시되는 들여쓰기(빈 공간)의 양을 결정해 줘요.

출처: 문서

본문

클래스	CSS
`indent-<number>`	`text-indent: calc(var(--spacing) * <number>);`
`-indent-<number>`	`text-indent: calc(var(--spacing) * -<number>);`
`indent-px`	`text-indent: 1px;`
`-indent-px`	`text-indent: -1px;`
`indent-(<custom-property>)`	`text-indent: var(<custom-property>);`
`indent-[<value>]`	`text-indent: <value>;`

기본 예시 (Basic example)

indent-<number> 형태의 유틸리티(예: indent-2, indent-8)를 사용하면 블록 안에서 텍스트 앞에 표시되는 빈 공간(들여쓰기)의 양을 설정할 수 있어요:

<p class="indent-8">So I started to walk into the water...</p>

음수 값 사용하기 (Using negative values)

음수 텍스트 들여쓰기 값을 사용하려면 클래스 이름 앞에 대시(-)를 붙여 음수 값으로 변환하면 돼요:

<p class="-indent-8">So I started to walk into the water...</p>

커스텀 값 사용하기 (Using a custom value)

indent-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 텍스트 들여쓰기를 설정할 수 있어요:

<p class="indent-[50%] ...">
  Lorem ipsum dolor sit amet...
</p>

CSS 변수의 경우 indent-(<custom-property>) 문법을 사용할 수도 있어요:

<p class="indent-(--my-indentation) ...">
  Lorem ipsum dolor sit amet...
</p>

이것은 indent-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 추가해 주는 문법이에요.

반응형 디자인 (Responsive design)

text-indent 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

<p class="indent-4 md:indent-8 ...">
  Lorem ipsum dolor sit amet...
</p>

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.