text-transform
텍스트의 대소문자를 변환하는 속성입니다. 원본 텍스트를 변경하지 않고 시각적으로만 대문자, 소문자, 첫 글자 대문자 등을 적용합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
ttn | text-transform: none | 변환 없음. 상속된 transform 초기화 |
ttu | text-transform: uppercase | 전체 대문자. 라벨, 헤더, 버튼에 자주 사용 |
ttl | text-transform: lowercase | 전체 소문자. 이메일, URL 정규화 표시 |
ttc | text-transform: capitalize | 각 단어 첫 글자 대문자. 이름, 제목 |
시각적 비교
동일한 텍스트에 각 text-transform 값을 적용했을 때의 차이를 비교합니다.
None — ttn
the Quick Brown Fox jumps Over the Lazy Dog
원본 텍스트 그대로 표시됩니다
Uppercase — ttu
the Quick Brown Fox jumps Over the Lazy Dog
모든 글자가 대문자로 변환됩니다
Lowercase — ttl
the Quick Brown Fox jumps Over the Lazy Dog
모든 글자가 소문자로 변환됩니다
Capitalize — ttc
the Quick Brown Fox jumps Over the Lazy Dog
각 단어의 첫 글자만 대문자로 변환됩니다
클래스별 상세
ttutext-transform: uppercase
모든 글자를 대문자로 변환합니다. 섹션 헤더, 버튼, 라벨 등 UI 요소에서 매우 자주 사용됩니다. letter-spacing과 함께 사용하면 라벨 스타일이 완성됩니다.
<!-- 섹션 라벨 (이 문서의 테이블 헤더 스타일) -->
<th class="ttu fs12px fw600 ls0-05em cA1A1AA">클래스</th>
<!-- 버튼 -->
<button class="ttu fs14px fw600 ls0-05em bg6366F1 cFFFFFF py12px px2-4rem br8px bn cp">
get started
</button>
<!-- 뱃지 -->
<span class="ttu fs12px fw600 ls0-05em c34D399 bg34D399-10 py4px px8px br4px">
active
</span>미리보기 — 라벨 스타일
자주 쓰는 조합
ttu fs12px fw600 ls0-05em | 섹션 라벨 — 이 문서의 테이블 헤더와 동일한 스타일 |
ttu fs14px fw700 ls0-05em | 강조 라벨 — 더 큰 사이즈의 라벨 |
ttu fs12px ls0-05em cA1A1AA | 보조 라벨 — 연한 색상의 카테고리 표시 |
ttltext-transform: lowercase
모든 글자를 소문자로 변환합니다. 이메일 표시 정규화나 URL 스타일 텍스트 등에 활용합니다.
<!-- 이메일 표시 정규화 -->
<span class="ttl c71717A">User@Example.COM</span>
<!-- URL 스타일 텍스트 -->
<span class="ttl fs14px cA1A1AA">/Docs/Getting-Started</span>미리보기
User@Example.COM
이메일이 소문자로 표시됩니다
ttctext-transform: capitalize
각 단어의 첫 글자를 대문자로 변환합니다. 사람 이름, 제목, 메뉴 항목 등에 사용합니다.
<!-- 사용자 이름 -->
<span class="ttc cFAFAFA fw600">john doe smith</span>
<!-- 메뉴 항목 -->
<nav class="df gap2rem">
<a href="#" class="ttc tdn cFAFAFA hover-c6366F1">home</a>
<a href="#" class="ttc tdn cFAFAFA hover-c6366F1">about us</a>
<a href="#" class="ttc tdn cFAFAFA hover-c6366F1">contact</a>
</nav>미리보기
john doe smith
각 단어의 첫 글자가 대문자로 표시됩니다
ttntext-transform: none
상속된 text-transform을 초기화합니다. 부모 요소에 ttu가 적용되어 있을 때 특정 자식만 원래 대소문자를 유지하고 싶은 경우에 사용합니다.
<!-- 부모의 ttu를 자식에서 초기화 -->
<div class="ttu fs16px cFAFAFA">
SECTION TITLE
<span class="ttn c71717A fs14px ml8px">Original Case Text</span>
</div>
<!-- 반응형 초기화 -->
<h2 class="ttu sm-ttn fs2rem fw700">
데스크탑에서만 대문자
</h2>미리보기
부모는 ttu지만 녹색 텍스트는 ttn으로 원본 유지
자주 쓰는 패턴
테이블 헤더, 섹션 라벨, 뱃지 등에서 자주 사용되는 조합입니다.
<!-- 테이블 헤더 라벨 (이 문서에서 실제 사용 중) -->
<th class="ttu fs12px fw600 ls0-05em cA1A1AA">column name</th>
<!-- 카테고리 라벨 -->
<div class="mb2rem">
<span class="ttu fs12px fw600 ls0-05em cA1A1AA mb8px db">category</span>
<h3 class="fs2rem fw700 cFAFAFA">실제 제목은 원본 그대로</h3>
</div>
<!-- CTA 버튼 -->
<button class="ttu fs14px fw600 ls0-05em bg6366F1 cFFFFFF py12px px3-2rem br8px bn cp hover-bg818CF8 tall200msease">
subscribe now
</button>| 패턴 | 용도 |
|---|---|
ttu fs12px fw600 ls0-05em cA1A1AA | 섹션 라벨 / 테이블 헤더 — 문서 전반에서 사용 |
ttu fs14px fw700 ls0-05em | 강조 라벨 — 버튼, CTA |
ttc tdn cFAFAFA hover-c6366F1 | 네비게이션 링크 — 첫 글자 대문자 + 링크 스타일 |
ttl c71717A fs14px | 정규화 표시 — 이메일, URL 등 |
ttu sm-ttn | 반응형 초기화 — 데스크탑만 대문자 |
팁 & 주의사항
ttu는 실제 텍스트를 변경하지 않습니다
text-transform은 시각적 변환만 수행합니다. 복사/붙여넣기 시 원본 텍스트가 유지되며, JavaScript의 textContent도 원본 값을 반환합니다.
letter-spacing과 함께 사용
대문자 텍스트는 자간을 약간 넓혀주면 가독성이 좋아집니다. ttu ls0-05em 조합은 라벨, 테이블 헤더 등에서 사실상 표준 패턴입니다.
접근성: 스크린리더는 원본 텍스트를 읽습니다
스크린리더는 CSS의 text-transform을 무시하고 원본 텍스트를 읽습니다. 시각적 대문자 변환은 접근성에 영향을 주지 않으므로, HTML에 직접 대문자를 쓰는 것보다 CSS 변환이 권장됩니다.