CSS에서 텍스트를 변환하려면 text-transform 속성을 사용합니다. 이 속성은 HTML 문서의 텍스트를 그대로 두거나, 각 단어의 첫 글자만 대문자로 바꾸거나, 전체를 대문자 또는 소문자로 변환할 수 있게 해줍니다.
text-transform 속성 값
text-transform 속성에 사용할 수 있는 값은 다음과 같습니다.
text-transform: none | capitalize | uppercase | lowercase | initial | inherit;
- none — 변환 없이 원본 텍스트 그대로 표시합니다.
- capitalize — 각 단어의 첫 글자를 대문자로 변환합니다.
- uppercase — 모든 문자를 대문자로 변환합니다.
- lowercase — 모든 문자를 소문자로 변환합니다.
- initial — 기본값으로 설정합니다.
- inherit — 부모 요소의 값을 상속받습니다.
예제 1: uppercase로 전체 대문자 변환
다음 예제는 div 영역 안의 텍스트를 모두 대문자로 변환합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
line-height: 1.9;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text.<br>
This is another demo text.
</p>
</div>
</body>
</html>출력 결과
위 코드를 실행하면 div 내부의 모든 텍스트가 대문자로 표시되는 것을 확인할 수 있습니다.
예제 2: lowercase로 전체 소문자 변환
이번에는 반대로 소문자로 변환하는 예제입니다. 원본 텍스트에 대문자가 섞여 있어도 모두 소문자로 바뀝니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-transform: lowercase;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>THIS is demo text.<br>
This is ANOTHER demo text.
</p>
</div>
</body>
</html>출력 결과
정리
text-transform 속성을 활용하면 HTML 소스 코드를 수정하지 않고도 화면에 보이는 텍스트의 대소문자를 자유롭게 제어할 수 있습니다. 특히 제목, 버튼 라벨, 메뉴 항목 등에서 일관된 스타일을 유지하고 싶을 때 매우 유용합니다.