- Typography
- Line Height
Typography
Line Height
요소의 줄 간격(leading)을 조절하는 유틸리티
Basic usage
상대적인 줄 간격
현재 폰트 크기를 기준으로 상대적인 줄 간격을 지정하려면 leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose 유틸리티를 사용하세요.
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분께 거짓말하지 않겠습니다. 나는 무서웠어요. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌습니다. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감이었는지 모르겠지만, 제리에게 말씀드리죠. 그 순간 나는 해양 생물학자였습니다.
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분께 거짓말하지 않겠습니다. 나는 무서웠어요. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌습니다. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감이었는지 모르겠지만, 제리에게 말씀드리죠. 그 순간 나는 해양 생물학자였습니다.
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분께 거짓말하지 않겠습니다. 나는 무서웠어요. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌습니다. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감이었는지 모르겠지만, 제리에게 말씀드리죠. 그 순간 나는 해양 생물학자였습니다.
<p class="leading-normal ...">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>
<p class="leading-relaxed ...">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>
<p class="leading-loose ...">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>고정된 줄 간격
leading-6이나 leading-7과 같은 유틸리티를 사용하면 현재 폰트 크기와 상관없이 요소에 고정된 줄 간격을 적용할 수 있습니다. 이는 요소의 최종 크기를 매우 정밀하게 제어해야 할 때 유용합니다.
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분에게 거짓말하지 않겠다, 나는 무서웠다. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌다. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감이었는지 모르겠지만, 그 순간 나는 제리에게 말했다. 나는 해양 생물학자였다.
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분에게 거짓말하지 않겠다, 나는 무서웠다. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌다. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감이었는지 모르겠지만, 그 순간 나는 제리에게 말했다. 나는 해양 생물학자였다.
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분에게 거짓말하지 않겠다, 나는 무서웠다. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌다. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감이었는지 모르겠지만, 그 순간 나는 제리에게 말했다. 나는 해양 생물학자였다.
<p class="leading-6 ...">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>
<p class="leading-7 ...">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>
<p class="leading-8 ...">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>Applying conditionally
호버, 포커스 및 기타 상태
Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:leading-loose 를 사용하면 leading-loose 유틸리티를 hover 상태에서만 적용할 수 있습니다.
<p class="leading-none hover:leading-loose">
<!-- ... -->
</p>
사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.
브레이크포인트와 미디어 쿼리
여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:leading-loose를 사용하면 중간 화면 크기 이상에서만 leading-loose 유틸리티를 적용할 수 있습니다.
<p class="leading-none md:leading-loose">
<!-- ... -->
</p>
더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.
기본 줄 간격 재정의하기
기본적으로 Tailwind의 font-size 유틸리티는 각각 고유한 기본 줄 간격(line-height)을 설정합니다. 이는 sm:text-xl과 같은 반응형 폰트 크기 유틸리티를 사용할 때, 더 작은 브레이크포인트에서 설정한 명시적 줄 간격이 재정의됨을 의미합니다.
<!-- `md` 브레이크포인트에서 `leading-loose` 클래스가 재정의됩니다 -->
<p class="text-lg leading-loose md:text-xl">
Maybe we can live without libraries...
</p>브레이크포인트별 폰트 크기를 설정한 후 기본 줄 간격을 재정의하려면, 브레이크포인트별 줄 간격도 함께 설정해야 합니다:
<!-- `md` 브레이크포인트에서 `leading-loose` 클래스가 재정의됩니다 -->
<p class="text-lg leading-loose md:text-xl md:leading-loose">
Maybe we can live without libraries...
</p>서로 다른 폰트 크기에 동일한 줄 간격을 사용하는 것은 일반적으로 좋은 타이포그래피 결과를 제공하지 않습니다. 줄 간격은 폰트 크기가 커질수록 일반적으로 작아져야 하므로, 이 기본 동작은 대부분의 경우 많은 작업을 줄여줍니다. 만약 이 동작이 불편하다면, 폰트 크기 스케일을 커스터마이징하여 기본 줄 간격을 포함하지 않도록 설정할 수 있습니다.
Using custom values
테마 커스터마이징
기본적으로 Tailwind는 여섯 가지 상대적 및 여덟 가지 고정된 line-height 유틸리티를 제공합니다. Tailwind 테마 설정 파일의 lineHeight 섹션을 커스터마이징하여 이를 변경하거나 추가하거나 제거할 수 있습니다.
module.exports = {
theme: {
extend: {
lineHeight: {
'extra-loose': '2.5',
'12': '3rem',
}
}
}
}
기본 테마를 커스터마이징하는 방법에 대해 더 알아보려면 테마 커스터마이징 문서를 참고하세요.
임의 값
테마에 포함시키기 어려운 line-height 값을 일회성으로 사용해야 한다면, 대괄호를 사용해 임의의 값으로 속성을 즉석에서 생성할 수 있습니다.
<p class="leading-[3rem]">
<!-- ... -->
</p>
임의 값 지원에 대해 더 알아보려면 임의 값 문서를 참고하세요.
