[HTML/CSS] 대/소문자 변경하기 (text-transform)

영문자의 대/소문자를 일괄적으로 변경해야 할 경우에는 CSS의 text-transform 속성을 이용하시면 됩니다. 이번 포스팅에서는 텍스트의 대/소문자를 변형하는 text-transform 속성에 대해 알아보도록 하겠습니다.

 

 문장 대/소문자 변경하기 

See the Pen 대/소문자 변경하기1 by wjdxo513 (@wjdxo513) on CodePen.

 

text-trasnform 속성 값

  • none : 기본값
  • capitalize : 문장의 첫글자만 대문자로 변형
  • uppercase : 문장 대문자로 변형
  • lowercase : 문장 소문자로 변형

※ HTML 태그는 <body>, <h1>, <div>, <span>, <p>, <li> 등 텍스트를 쓸 수 있는 태그면 아무거나 됩니다.

 

CSS 처리

See the Pen 대/소문자 변경하기2 by wjdxo513 (@wjdxo513) on CodePen.

 

css처리하면 위와 같이 됩니다.

 

댓글

Designed by JB FACTORY