Line Height
Line Height
텍스트의 줄 높이(행간)를 정해주는 유틸리티예요. 글자 크기와 함께 설정하거나, 독립적으로 설정할 수 있어요.
출처: 문서
본문
ClassStyles
| Class | Properties |
|---|---|
text-<size>/<number> |
font-size: <size>; + line-height: calc(var(--spacing) * <number>); |
text-<size>/(<custom-property>) |
font-size: <size>; + line-height: var(<custom-property>); |
text-<size>/[<value>] |
font-size: <size>; + line-height: <value>; |
leading-none |
line-height: 1; |
leading-<number> |
line-height: calc(var(--spacing) * <number>); |
leading-(<custom-property>) |
line-height: var(<custom-property>); |
leading-[<value>] |
line-height: <value>; |
예시 (Examples)
기본 예시 (Basic example)
text-sm/6, text-lg/7 같은 글자 크기 유틸리티를 사용하면 요소의 글자 크기와 줄 높이를 동시에 설정할 수 있어요.
<p class="text-base/6 ...">So I started to walk into the water...</p>
<p class="text-base/7 ...">So I started to walk into the water...</p>
<p class="text-base/8 ...">So I started to walk into the water...</p>
각 글자 크기 유틸리티는 별도의 줄 높이가 지정되지 않았을 때 기본 줄 높이도 함께 설정해요. 이 값들과 커스터마이징 방법에 대해 더 알아보려면 font-size 문서를 확인해 보세요.
독립적으로 설정하기 (Setting independently)
leading-6, leading-7 같은 leading-<number> 유틸리티를 사용하면 글자 크기와 별개로 요소의 줄 높이를 설정할 수 있어요.
<p class="text-sm leading-6">So I started to walk into the water...</p>
<p class="text-sm leading-7">So I started to walk into the water...</p>
<p class="text-sm leading-8">So I started to walk into the water...</p>
행간 제거하기 (Removing the leading)
leading-none 유틸리티를 사용하면 요소의 줄 높이를 글자 크기와 같게 설정할 수 있어요.
<p class="text-2xl leading-none ...">The quick brown fox...</p>
사용자 정의 값 사용하기 (Using a custom value)
leading-[<value>] 문법을 사용하면 완전히 사용자 정의한 값으로 줄 높이를 정할 수 있어요.
<p class="leading-[1.5] ...">
Lorem ipsum dolor sit amet...
</p>
CSS 변수를 사용할 때는 leading-(<custom-property>) 문법도 쓸 수 있어요.
<p class="leading-(--my-line-height) ...">
Lorem ipsum dolor sit amet...
</p>
이것은 leading-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 붙여주는 것뿐이에요.
반응형 디자인 (Responsive design)
line-height 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<p class="leading-5 md:leading-6 ...">
Lorem ipsum dolor sit amet...
</p>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.
테마 커스터마이징 (Customizing your theme)
leading-<number> 유틸리티는 --spacing 테마 변수에 의해 결정돼요. 이 값은 자신의 테마에서 커스터마이징할 수 있어요.
@theme {
--spacing: 1px;
}
스페이싱 스케일을 커스터마이징하는 방법을 더 알아보려면 theme variable 문서를 확인해 보세요.