CSS에서 텍스트를 대문자로 변환하려면 text-transform 속성에 uppercase 값을 사용하면 됩니다. 이 속성은 HTML 소스 코드를 직접 수정하지 않고도 화면에 표시되는 텍스트의 대소문자 형태를 손쉽게 변경할 수 있어 매우 유용합니다.
text-transform 속성의 주요 값
text-transform 속성은 uppercase 외에도 다양한 값을 지원합니다.
- uppercase: 모든 문자를 대문자로 변환합니다.
- lowercase: 모든 문자를 소문자로 변환합니다.
- capitalize: 각 단어의 첫 글자만 대문자로 변환합니다.
- none: 변환을 적용하지 않습니다.
예제 코드
아래 코드를 실행하면 일반 텍스트와 대문자로 변환된 텍스트의 차이를 확인할 수 있습니다.
<html> <head> </head> <body> <p>일반 텍스트</p> <p style = "text-transform:uppercase;"> 일반 텍스트! 이 부분은 모두 대문자로 표시됩니다! </p> </body> </html>
실행 결과
위 예제에서 첫 번째 문단은 입력한 그대로 표시되지만, 두 번째 문단은 text-transform: uppercase; 스타일이 적용되어 모든 글자가 대문자로 출력됩니다.
참고 사항
text-transform 속성은 원본 HTML 텍스트 자체를 변경하는 것이 아니라 화면에 보이는 형태만 바꿉니다. 따라서 복사·붙여넣기나 검색 엔진에는 원본 텍스트가 그대로 유지된다는 점을 기억하세요. 또한 인라인 스타일뿐 아니라 CSS 클래스나 외부 스타일시트에 정의하여 재사용할 수도 있습니다.