HTML 대문자 및 소문자, 첫 글자 대문자 변경

by

HTML 대문자 변경은 uppercase, 소문자 변경은 lowercase 속성값을 사용하며 기본 설정은 none으로 초기화합니다.

HTML 대문자 변경 방법

text-transform : uppercase 속성 및 속성값을 사용하면, HTML 문서의 텍스트를 대문자로 변경할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p
      {
        text-transform : uppercase;
      }
    </style>
  </head>

  <body>
    <p>hello, my name is babo. do you have any idea to eat something?</p>
  </body>
</html>

결과

HELLO, MY NAME IS BABO. DO YOU HAVE ANY IDEA TO EAT SOMETHING?

HTML 소문자 변경 방법

text-transform : lowercase 속성은 해당 범위의 텍스트를 소문자로 모두 변경합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p
      {
        text-transform : lowercase;
      }
    </style>
  </head>
  <body>
    <p>WHERE IS YOUR MONEY?</p>
  </body>
</html>

결과

where is your money?

HTML 첫 글자만 대문자로 변경

text-transform : capitalize 속성을 사용하면, 각 단어의 첫 글자만 대문자로 변경이 됩니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p
      {
        text-transform : capitalize;
      }
    </style>
  </head>
  <body>
    <p>where is your love?</p>
  </body>
</html>

결과

Where Is Your Love?

HTML 대소문자 변환 값을 기본으로 돌리고 싶은 경우 text-transform : none 속성을 사용하면 됩니다.