CSS text-transform 속성이란?
text-transform 속성은 HTML 문서의 실제 텍스트 내용을 변경하지 않고, 화면에 표시되는 텍스트의 대소문자 형태를 변환하는 CSS 속성입니다. 이 속성을 사용하면 텍스트의 첫 글자만 대문자로 만들거나, 전체를 대문자 또는 소문자로 바꿀 수 있습니다.
특히 버튼, 메뉴, 제목 등 UI 요소에서 일관된 텍스트 스타일을 유지해야 할 때 매우 유용하며, 원본 HTML 콘텐츠는 그대로 유지되기 때문에 SEO나 접근성 측면에서도 안전하게 사용할 수 있습니다.
text-transform 속성값
text-transform 속성에 사용할 수 있는 주요 값은 다음과 같습니다.
- none – 기본값으로, 어떠한 변환도 적용하지 않습니다.
- capitalize – 각 단어의 첫 글자를 대문자로 변환합니다.
- uppercase – 모든 글자를 대문자로 변환합니다.
- lowercase – 모든 글자를 소문자로 변환합니다.
사용 예제
아래 예제는 세 가지 변환 값을 인라인 스타일로 적용한 코드입니다.
<html> <head> </head> <body> <p style = "text-transform:capitalize;"> This will be capitalized </p> <p style = "text-transform:uppercase;"> This will be in uppercase </p> <p style = "text-transform:lowercase;"> This will be in lowercase </p> </body> </html>
실행 결과
- capitalize 적용 시: This Will Be Capitalized
- uppercase 적용 시: THIS WILL BE IN UPPERCASE
- lowercase 적용 시: this will be in lowercase
참고 사항
text-transform은 한글처럼 대소문자 구분이 없는 문자에는 영향을 주지 않으며, 주로 영문 텍스트에 효과적입니다. 또한 이 속성은 시각적인 표현만 변경하므로, 복사·붙여넣기나 검색 엔진 크롤링 시에는 원본 텍스트가 그대로 사용됩니다.