제목이나 인용구의 모든 글자가 대문자로 표시되는 경우가 있습니다. 그런 경우 CSS의 text-transform 속성을 사용하여 소문자로 변환할 수 있습니다. text-transform 속성을 이용하여 대문자 또는 소문자로 변환하더라도 본래의 텍스트는 그대로 유지됩니다. (즉, 브라우저상에서만 대문자 또는 소문자로 변환되어 표시됩니다.)
text-transform 속성
정의 및 사용법
text-transform 속성은 텍스트의 대소문자 표시 형식을 제어합니다.
- 기본 값: none
- 상속: Yes
- 버전: CSS1
- JavaScript 문법: object.style.textTransform="uppercase"
한글에서는 대소문자가 없으므로 이 속성은 한글에는 영향을 미치지 않습니다.
브라우저 호환성
CSS 문법
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
속성 값:
- none: 대소문자 변환 없음. 텍스트를 입력된 그대로 표시합니다. 이 값이 기본 설정입니다.
- capitalize: 각 단어의 첫 번째 글자를 대문자로 변환합니다.
- uppercase: 모든 문자를 대문자로 변환합니다.
- lowercase: 모든 문자를 소문자로 변환합니다.
- initial: 이 속성을 기본값으로 설정합니다.
- inherit: 부모 요소의 속성을 상속합니다.
예를 들어, 워드프레스 Newspaper 테마에서는 인용구의 모든 글자(영문)가 대문자로 표시됩니다. 다음과 같은 CSS를 추가하면 텍스트가 입력된 그대로 표시됩니다.
.single-post .td-post-content blockquote p {
text-transform: none;
}
법률 문서에서는 간혹 모든 글자가 대문자로 표시될 수 있습니다. 대문자에 익숙하지 않으면 문서를 읽는 것이 고역일 수 있습니다. 그런 경우 MS 워드에서 제공하는 대소문자 변환 기능을 사용하여 대문자를 소문자로 변환할 수 있습니다.