CSS: 대문자로 또는 소문자로 바꾸는 속성 - text-transform

2019. 10. 22. 10:50 | 댓글 15

제목이나 인용구의 모든 글자가 대문자로 표시되는 경우가 있습니다. 그런 경우 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 워드에서 제공하는 대소문자 변환 기능을 사용하여 대문자를 소문자로 변환할 수 있습니다.

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    청결원

    오늘도 포스팅 잘 보고 갑니다
    좋은 하루 보내세요~

  2. thumbnail
    내로라하다

    혹시 div 중앙으로 보내기 간단한 용어 아시나요?^^

  3. thumbnail
    空空(공공)

    처음 시작을 영어,한글 이런것도 조정을 할수 잇는가요.
    궁금합니다.