CSS에서 텍스트를 소문자로 변환하려면 text-transform 속성에 lowercase 값을 지정하면 됩니다. 이 속성은 HTML 문서의 대소문자 구조를 변경하지 않고도 화면에 표시되는 텍스트의 형태만 손쉽게 바꿀 수 있어 매우 유용합니다.
기본 사용법
텍스트가 포함된 요소에 다음과 같이 스타일을 적용합니다.
text-transform: lowercase;
예제
아래 코드를 실행하면 일반 텍스트와 소문자로 변환된 텍스트의 차이를 확인할 수 있습니다.
<html> <head> </head> <body> <p>Normal Text</p> <p style = "text-transform:lowercase;"> Normal Text! This will be in lowercase! </p> </body> </html>
참고: text-transform의 다른 값들
text-transform 속성은 소문자 변환 외에도 다양한 값을 지원합니다.
- uppercase: 모든 문자를 대문자로 변환합니다.
- capitalize: 각 단어의 첫 글자만 대문자로 표시합니다.
- none: 변환을 적용하지 않고 원본 그대로 표시합니다.
이처럼 text-transform 속성을 활용하면 자바스크립트 없이 순수 CSS만으로 텍스트의 대소문자 형태를 간편하게 제어할 수 있습니다.