웹페이지에서 텍스트를 출력해 화면에 보여줄 때 대문자 또는 소문자로 변경한 뒤 보여줄 경우가 존재합니다. 때로는 텍스트의 모든 앞글자만 대문자로 변경하거나 아니면 전부 소문자나 대문자로 변경이 필요하죠.

! 편리한 CSS 대소문자 변경하기

이런 경우 서버에서 변환하거나 아니면 자바스크립트에서 변환하여 사용할 수 있겠지만 더 간단한 방법도 있습니다. 바로 CSS를 사용하여 변환하는 방법입니다. css를 사용하여 대소문자를 변경할 경우 text-transform을 사용하여 가능합니다. 아래는 간단한 문법입니다.

선택할 요소 { text-transform: uppercase | lowercase | capitalize; }

text-transform 속성을 사용하는 방법은 매우 간단합니다. 아래의 속성 값 중 원하는 값을 선택하여 적용하면 됩니다. 적용 가능한 값은 아래와 같습니다.

uppercase // 모두 대문자로 변경함
lowercase // 모두 소문자로 변경함
capitalize // 맨 처음 시작하는 단어만 대문자로 변경함

위 값들을 각각 적용하였을 때 어떻게 나타나는지 아래 예제에서 확인고하세요.

# CSS text-transform 예제소스 보기

아래는 간단한 예제소스로 위 값들을 차례로 적용하여 결과를 알아보겠습니다.

!. 대문자로 변경하기

만약 아래의 문구처럼 모두 소문자인 경우 대문자로 변경하려면 다음과 같습니다.

<p>abcde</p>

<style>
p {
text-transform: uppercase;
}
</style>

출력하면 대문자로 변경되어 출력됩니다.

ABCDE // 소문자가 대문자로 바뀌어 출력됨

! 소문자로 변경하기

이번에는 반대로 대문자를 소문자로 변환하는 방법을 알아봅니다. 값으로 lowercase를 적용합니다.

<p>ABCDE</p>

<style>
p {
text-transform: lowercase;
}
</style>

출력하면 다음과 같습니다.

abcde // 소문자로 변환되어 출력함

! Capitalize, 텍스트의 앞 한글자만 변환할 경우

이 값도 많이 사용되며 특히 제목 등에 사용하기 위해 맨 첫 글자만 대문자로 사용하는 경우에 capitalize값을 사용합니다. 그럼 아래 예제를 보세요.

<p>hello web is free</p>

<style>
p {
text-transform: capitalize;
}
</style>

결과는 아래와 같이 출력되죠.

Hello Web Is Free // 앞문자만 대문자로 변환됨

만약 문장의 맨 앞에 위치한 소문자가 변환하지 않는다면? 스페이스.. 즉 한 칸 띄우는 것으로 해결할 수 있습니다.

! 마치면서

여기까지 CSS의 transform 속성에 대하여 알아보았습니다. 참고로 transform 속성은 브라우저는 IE 9 이상만 지원하니 알아두세요.