타이포그래피
text-indent
블록 내 텍스트 앞에 표시되는 빈 공간의 양을 조절하는 유틸리티입니다.
| Class | Styles |
|---|---|
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>; |
예제
기본 예제
indent-<number> 유틸리티를 사용해 블록 내 텍스트 앞에 표시되는 빈 공간(들여쓰기)의 양을 설정할 수 있습니다. 예를 들어 indent-2와 indent-8을 사용할 수 있습니다.
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분, 거짓말하지 않겠다. 나는 무서웠다. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌다. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감이었는지 모르겠지만, 제리, 그 순간 나는 해양 생물학자였다.
<p class="indent-8">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>음수 값 사용하기
텍스트 들여쓰기에 음수 값을 사용하려면, 클래스 이름 앞에 대시(-)를 붙여 음수 값으로 변환합니다:
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분에게 거짓말하지 않겠다, 나는 무서웠다. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌다. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감이었는지 모르겠지만, 그 순간 나는 제리에게 말했다. 나는 해양 생물학자였다고.
<p class="-indent-8">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>커스텀 값 사용하기
indent-[<value>] 구문을 사용하세요 text indentation를 완전히 커스텀한 값으로 설정하려면:
<p class="indent-[50%] ..."> <!-- ... --></p>CSS 변수를 사용하려면 indent-(<custom-property>) 구문을 사용할 수도 있습니다:
<p class="indent-(--my-indentation) ..."> <!-- ... --></p>이는 indent-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a text-indent 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<p class="indent-4 md:indent-8 ..."> <!-- ... --></p>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
