text-transform 속성의 이해

text-transform 속성은
스타일링 목적으로 요소의 텍스트를 대소문자로 변환하는 방법을 지정합니다.

이 속성을 사용하면 요소의 텍스트를
모두 대문자(uppercase 값),
모두 소문자(lowercase 값),
각 단어의 첫 글자를 대문자(capitalize 값)로
변환하여 스타일링할 수 있습니다.

CSS 데모: text-transform 데모 버튼을 클릭해 보세요!

주의하세요!
의미적 목적으로 text-transform에 의존해서는 안 됩니다. 오히려 올바른 대소문자 구분과 의미론은 소스 문서 텍스트와 마크업에서 명확하게 표현되어야 합니다.
예를 들어, March는 3월을 의미하지만, march는 행진을 의미합니다.

형식 구문

CSS 
selector {
    text-transform: /* none | uppercase | lowercase | capitalize */
}

구문

CSS 
text-transform: none; /* 초깃값 */
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

/* 전역 값 */
text-transform: inherit;
text-transform: initial;
text-transform: revert;
text-transform: revert-layer;
text-transform: unset;

값

text-transform 속성의 값
none 텍스트 변환을 적용하지 않습니다.
모든 문자의 대소문자를 변경하지 않도록 하는 키워드입니다.
uppercase 요소의 텍스트를 모두 대문자로 변환합니다.
lowercase 요소의 텍스트를 모두 소문자로 변환합니다.
capitalize 요소의 텍스트 각 단어의 첫 글자를 대문자로 변환합니다.
다른 문자는 변경되지 않습니다. 즉, 요소 텍스트에 쓰여진 원래 대소문자를 유지합니다.

제한된 호환성으로 인해 다루지 않는 값들

명세서에서는 언급되어 있지만, 주요 브라우저에서 제한적으로만 지원되거나 전혀 지원되지 않는 text-transform 속성의 값들이 있습니다.

다음 세 가지 값은 브라우저마다 호환성이 다를 수 있으므로 주의가 필요합니다.

CSS 
/* 브라우저 호환성 문제 */
text-transform: full-width;
text-transform: full-size-kana;
text-transform: math-auto;

text-transform 속성 값들의 브라우저 호환성은 caniuse.com에서 더 자세한 정보를 확인해 보세요.

형식 정의

text-transform 속성의 형식 정의
초깃값 none
적용 요소 모든 요소
상속 예
애니메이션 아니오

예제

HTML 
<section class="uppercase">
    <h3>text-transform: uppercase;</h3>
    <p>
        Lorem Ipsum is simply dummy text of the printing...
    </p>
</section>
<section class="lowercase">
    <h3>text-transform: lowercase;</h3>
    <p>
        Lorem Ipsum is simply dummy text of the printing...
    </p>
</section>
<section class="capitalize">
    <h3>text-transform: capitalize;</h3>
    <p>
        Lorem Ipsum is simply dummy text of the printing...
    </p>
</section>
CSS 
.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}
.capitalize {
    text-transform: capitalize;
}
실제 적용된 모습

주의할 점

text-transform 속성을 수학 공식이나 프로그램, 컴퓨터 코드의 일부에서는 사용하지 말아야 합니다.
이러한 경우에 대소문자를 임의로 변환하면 의미가 왜곡되거나, 대소문자의 차이로 인해 완전히 다른 의미를 가질 수 있기 때문입니다.

예를 들어, 자바스크립트에서 문자열의 길이를 반환하는 속성은 length이지만, 아래처럼 잘못된 코드를 작성하거나 대소문자 변환을 적용하면 의미가 완전히 달라질 수 있습니다. 자바스크립트는 대소문자를 구분합니다.

HTML 
<style>
    p {
        text-transform: uppercase;
    }
</style>
<p>
    자바스크립트에서 문자열 길이를
    반환하는 속성은 <code>length</code>입니다.
</p>
실제 적용된 모습

자바스크립트에 LENGTH는 올바른 속성이 아니므로, 코드가 틀리게 표시됩니다. 이러한 상황에서 text-transform을 사용하는 것은 문제가 될 수 있습니다.

브라우저 호환성

text-transform 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
text-transform 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

text-transform 속성의 명세서 사양
명세서 사양
text-transform CSS Text Module Level 4
#text-transform

참고문헌

같이 보기