CSS의 text-transform 속성을 사용하면 요소에 포함된 텍스트의 대소문자 표기 방식을 손쉽게 제어할 수 있습니다. HTML 소스 코드는 그대로 둔 채 화면에 보이는 텍스트만 변환되므로, 검색 엔진 최적화(SEO)나 데이터 구조에는 영향을 주지 않으면서 시각적인 스타일만 바꿀 수 있다는 장점이 있습니다.
text-transform 속성에 사용할 수 있는 값은 다음과 같습니다.
- capitalize — 각 단어의 첫 글자를 대문자로 표시합니다.
- lowercase — 모든 문자를 소문자로 변환합니다.
- uppercase — 모든 문자를 대문자로 변환합니다.
- full-width — 문자를 전각(全角) 형태로 변환합니다. 주로 동아시아 언어에서 사용됩니다.
- full-size-kana — 가타카나 확장 문자를 전각 형태로 변환합니다.
- none — 변환을 적용하지 않습니다.
기본 문법
CSS text-transform 속성의 기본 문법은 다음과 같습니다.
Selector {
text-transform: /*value*/
}예제 1: uppercase, lowercase, capitalize 활용
다음 예제는 h2 요소에는 대문자 변환, 클래스 demo에는 소문자 변환, q 요소에는 첫 글자 대문자 변환을 각각 적용한 모습입니다.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-transform: uppercase;
}
.demo {
text-transform: lowercase;
}
q {
text-transform: capitalize;
font-style: italic;
}
</style>
</head>
<body>
<h2>WordPress</h2>
<q>WordPress is open source software you can use to create a beautiful website, blog, or app.</q>
<p class="demo">34% of the web uses WordPress, from hobby blogs to the biggest news sites online.</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2: article 요소에 lowercase 적용
다음 예제에서는 배경색과 함께 text-transform 속성을 조합하여, article 요소 내부의 텍스트가 모두 소문자로 표시되도록 설정했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgreen;
margin: auto;
text-align: center;
}
p {
width: 80%;
background-color: aquamarine;
text-decoration: uppercase;
}
article {
background-color: darksalmon;
text-transform: lowercase;
}
</style>
</head>
<body>
<h2>What is Magento?</h2>
<div>
<p>Magento is an open-source e-commerce platform written in PHP.</p>
<article>
Build your own branded store powered by Magento Commerce and Amazon. Choose from 4,600 themes and extensions in the Magento Marketplace as well as more than 300,000 Magento developers.
</article>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
정리
text-transform 속성은 버튼 라벨, 제목, 내비게이션 메뉴 등에서 일관된 타이포그래피 스타일을 유지할 때 특히 유용합니다. 원본 HTML 콘텐츠를 수정하지 않고도 CSS 한 줄로 텍스트 표기를 변경할 수 있으므로, 유지보수 측면에서도 효율적인 방법입니다.