CSS 텍스트-트랜스포ーム 속성
- 이전 페이지 text-shadow
- 다음 페이지 텍스트-언더라인 오프셋
정의와 사용법
text-transform 속성은 텍스트의 대소문자를 제어합니다.
설명
이 속성은 원본 문서의 텍스트 대소문자와 관계없이 요소 내의 문자 대소문자를 변경합니다. 값이 capitalize라면 일부 문자를 대문자로 만들어야 하지만, 어떤 문자를 대문자로 만드는지 명확히 정의되어 있지 않으며, 이는 사용자代理가 각 "단어"를 인식하는 방식에 따라 달라집니다.
추가로 참조:
CSS 강의:CSS 텍스트
HTML DOM 참조 설명서:textTransform 속성
예제
다른 요소 내의 텍스트를 변환:
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
가이드와 주석
주석:다른 사용자代理는 단어가 어디서 시작하는지를 결정하는 방법이 달라서, 따라서 대문자를 결정하는 방법도 달라질 수 있습니다. 예를 들어, 텍스트 "w3-school"은 "W3-school"과 "W3-School"으로 두 가지 방식으로 표시될 수 있습니다. CSS는 어떤 것이 올바른지 규정하지 않기 때문에 두 가지 모두 가능합니다.
CSS 문법
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| none | 기본. 소문자와 대문자가 포함된 표준 텍스트를 정의합니다. |
| capitalize | 텍스트 내의 각 단어가 대문자로 시작합니다. |
| uppercase | 대문자만 있는 경우를 정의합니다. |
| lowercase | 대문자가 없고 소문자만 있는 경우를 정의합니다. |
| inherit | 부모 요소에서 text-transform 속성 값을 상속해야 합니다. |
기술 세부 사항
| 기본 값: | none |
|---|---|
| 상속성: | yes |
| 버전: | CSS1 |
| JavaScript 문법: | object.style.textTransform="uppercase" |
더 많은 예제
- 텍스트 내의 문자를 제어
- 이 예제에서는 텍스트 내의 문자의 대소문자를 어떻게 제어하는지 보여줍니다.
브라우저 지원
표中的 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
| 크롬 | IE / 엣지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
- 이전 페이지 text-shadow
- 다음 페이지 텍스트-언더라인 오프셋
