Letter Spacing
Letter Spacing
텍스트의 자간(글자 사이 간격)을 정해주는 유틸리티예요. 좁게, 넓게, 그리고 사용자 정의 값까지 다양한 방식으로 자간을 조절할 수 있어요.
출처: 문서
본문
ClassStyles
| Class | Properties |
|---|---|
tracking-tighter |
letter-spacing: var(--tracking-tighter); /* -0.05em */ |
tracking-tight |
letter-spacing: var(--tracking-tight); /* -0.025em */ |
tracking-normal |
letter-spacing: var(--tracking-normal); /* 0em */ |
tracking-wide |
letter-spacing: var(--tracking-wide); /* 0.025em */ |
tracking-wider |
letter-spacing: var(--tracking-wider); /* 0.05em */ |
tracking-widest |
letter-spacing: var(--tracking-widest); /* 0.1em */ |
tracking-(<custom-property>) |
letter-spacing: var(<custom-property>); |
tracking-[<value>] |
letter-spacing: <value>; |
예시 (Examples)
기본 예시 (Basic example)
tracking-tight, tracking-wide 같은 유틸리티를 사용해 요소의 자간을 설정할 수 있어요.
<p class="tracking-tight ...">The quick brown fox ...</p>
<p class="tracking-normal ...">The quick brown fox ...</p>
<p class="tracking-wide ...">The quick brown fox ...</p>
음수 값 사용하기 (Using negative values)
Tailwind가 기본으로 제공하는 이름 있는 자간 스케일로는 음수 값을 쓰는 게 딱히 의미가 없을 수 있지만, 스케일을 숫자로 커스터마이징했다면 유용할 수 있어요.
@theme {
--tracking-1: 0em;
--tracking-2: 0.025em;
--tracking-3: 0.05em;
--tracking-4: 0.1em;
}
음수 자간 값을 사용하려면 클래스 이름 앞에 대시(-)를 붙여 음수 값으로 변환하면 돼요.
<p class="-tracking-2">The quick brown fox ...</p>
사용자 정의 값 사용하기 (Using a custom value)
tracking-[<value>] 문법을 사용하면 완전히 사용자 정의한 값으로 자간을 정할 수 있어요.
<p class="tracking-[.25em] ...">
Lorem ipsum dolor sit amet...
</p>
CSS 변수를 사용할 때는 tracking-(<custom-property>) 문법도 쓸 수 있어요.
<p class="tracking-(--my-tracking) ...">
Lorem ipsum dolor sit amet...
</p>
이것은 tracking-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 붙여주는 것뿐이에요.
반응형 디자인 (Responsive design)
letter-spacing 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<p class="tracking-tight md:tracking-wide ...">
Lorem ipsum dolor sit amet...
</p>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.
테마 커스터마이징 (Customizing your theme)
--tracking-* 테마 변수를 사용해 프로젝트의 자간 유틸리티를 커스터마이징할 수 있어요.
@theme {
--tracking-tightest: -0.075em;
}
이제 마크업에서 tracking-tightest 유틸리티를 사용할 수 있어요.
<p class="tracking-tightest">
Lorem ipsum dolor sit amet...
</p>
테마를 커스터마이징하는 방법을 더 알아보려면 theme 문서를 확인해 보세요.