타이포그래피
font-size
엘리먼트의 폰트 크기를 조절하는 유틸리티입니다.
| Class | Styles |
|---|---|
text-xs | font-size: var(--text-xs); /* 0.75rem (12px) */
line-height: var(--text-xs--line-height); /* calc(1 / 0.75) */ |
text-sm | font-size: var(--text-sm); /* 0.875rem (14px) */
line-height: var(--text-sm--line-height); /* calc(1.25 / 0.875) */ |
text-base | font-size: var(--text-base); /* 1rem (16px) */
line-height: var(--text-base--line-height); /* calc(1.5 / 1) */ |
text-lg | font-size: var(--text-lg); /* 1.125rem (18px) */
line-height: var(--text-lg--line-height); /* calc(1.75 / 1.125) */ |
text-xl | font-size: var(--text-xl); /* 1.25rem (20px) */
line-height: var(--text-xl--line-height); /* calc(1.75 / 1.25) */ |
text-2xl | font-size: var(--text-2xl); /* 1.5rem (24px) */
line-height: var(--text-2xl--line-height); /* calc(2 / 1.5) */ |
text-3xl | font-size: var(--text-3xl); /* 1.875rem (30px) */
line-height: var(--text-3xl--line-height); /* calc(2.25 / 1.875) */ |
text-4xl | font-size: var(--text-4xl); /* 2.25rem (36px) */
line-height: var(--text-4xl--line-height); /* calc(2.5 / 2.25) */ |
text-5xl | font-size: var(--text-5xl); /* 3rem (48px) */
line-height: var(--text-5xl--line-height); /* 1 */ |
text-6xl | font-size: var(--text-6xl); /* 3.75rem (60px) */
line-height: var(--text-6xl--line-height); /* 1 */ |
text-7xl | font-size: var(--text-7xl); /* 4.5rem (72px) */
line-height: var(--text-7xl--line-height); /* 1 */ |
text-8xl | font-size: var(--text-8xl); /* 6rem (96px) */
line-height: var(--text-8xl--line-height); /* 1 */ |
text-9xl | font-size: var(--text-9xl); /* 8rem (128px) */
line-height: var(--text-9xl--line-height); /* 1 */ |
text-(length:<custom-property>) | font-size: var(<custom-property>); |
text-[<value>] | font-size: <value>; |
예제
기본 예제
text-sm과 text-lg 같은 유틸리티를 사용해 엘리먼트의 글꼴 크기를 설정할 수 있습니다:
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="text-sm ...">The quick brown fox ...</p><p class="text-base ...">The quick brown fox ...</p><p class="text-lg ...">The quick brown fox ...</p><p class="text-xl ...">The quick brown fox ...</p><p class="text-2xl ...">The quick brown fox ...</p>줄 간격 설정하기
text-sm/6과 text-lg/7 같은 유틸리티를 사용해 요소의 글꼴 크기와 줄 간격을 동시에 설정할 수 있습니다.
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분에게 거짓말하지 않겠어요, 나는 무서웠어요. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌어요. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감이었는지 모르겠지만, 제리에게 말하자면 그 순간 나는 해양 생물학자였어요.
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분에게 거짓말하지 않겠어요, 나는 무서웠어요. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌어요. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감이었는지 모르겠지만, 제리에게 말하자면 그 순간 나는 해양 생물학자였어요.
그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분에게 거짓말하지 않겠어요, 나는 무서웠어요. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌어요. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감이었는지 모르겠지만, 제리에게 말하자면 그 순간 나는 해양 생물학자였어요.
<p class="text-sm/6 ...">그래서 나는 물속으로 걸어 들어가기 시작했다...</p><p class="text-sm/7 ...">그래서 나는 물속으로 걸어 들어가기 시작했다...</p><p class="text-sm/8 ...">그래서 나는 물속으로 걸어 들어가기 시작했다...</p>커스텀 값 사용하기
text-[<value>] 구문을 사용하세요 font size를 완전히 커스텀한 값으로 설정하려면:
<p class="text-[14px] ..."> <!-- ... --></p>CSS 변수를 사용하려면 text-(length:<custom-property>) 구문을 사용할 수도 있습니다:
<p class="text-(length:--my-text-size) ..."> <!-- ... --></p>이는 text-[length:var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a font-size 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<p class="text-sm md:text-base ..."> <!-- ... --></p>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
테마 커스터마이징
--text-* 테마 변수를 사용해 프로젝트에서 font size 유틸리티를 커스터마이징할 수 있습니다:
@theme { --text-tiny: 0.625rem; }이제 text-tiny 유틸리티를 마크업에서 사용할 수 있습니다:
<div class="text-tiny"> <!-- ... --></div>폰트 크기에 대한 기본 line-height, letter-spacing, font-weight 값을 제공할 수도 있습니다:
@theme { --text-tiny: 0.625rem; --text-tiny--line-height: 1.5rem; --text-tiny--letter-spacing: 0.125rem; --text-tiny--font-weight: 500; }테마 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.
