텍스트 변환
텍스트 변환 (Text Transform)
텍스트의 대소문자 형식을 바꿔주는 유틸리티예요. 모두 대문자로, 모두 소문자로, 첫 글자만 대문자로 만들거나 원래 형식으로 되돌릴 수 있어요.
출처: 문서
본문
클래스 & 스타일 (Class Styles)
uppercase
text-transform: uppercase;
lowercase
text-transform: lowercase;
capitalize
text-transform: capitalize;
normal-case
text-transform: none;
예시 (Examples)
텍스트 대문자로 만들기 (Uppercasing text)
uppercase 유틸리티를 사용하면 요소의 텍스트를 대문자로 만들 수 있어요.
<p class="uppercase">The quick brown fox ...</p>
텍스트 소문자로 만들기 (Lowercasing text)
lowercase 유틸리티를 사용하면 요소의 텍스트를 소문자로 만들 수 있어요.
<p class="lowercase">The quick brown fox ...</p>
첫 글자 대문자로 만들기 (Capitalizing text)
capitalize 유틸리티를 사용하면 요소의 텍스트 첫 글자를 대문자로 만들 수 있어요.
<p class="capitalize">The quick brown fox ...</p>
텍스트 대소문자 리셋하기 (Resetting text casing)
normal-case 유틸리티를 사용하면 요소의 원래 대소문자 형식을 유지해요. 주로 다른 브레이크포인트에서 대문자 변환을 해제할 때 사용해요.
<p class="normal-case">The quick brown fox ...</p>
반응형 디자인 (Responsive design)
text-transform 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<p class="capitalize md:uppercase ...">
Lorem ipsum dolor sit amet...
</p>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.