모든 글자를 대문자, 소문자로 변환 - text-transform

text-transform은 대문자로 또는 소문자로 바꾸는 속성입니다. 한글에서는 의미가 없는 속성입니다.
1 min read

text-transform

영문자를 표기 할 때 text-transform 속성은 모든 글자를 대문자로 또는 소문자로 바꾸거나 첫번째 글자를 대문자로 변환할 수 있습니다. 이 속성은 한글에서는 의미가 없는 속성입니다.

 

기본형

text-transform : none | capitalize | uppercase | lowercase
  • none : 입력된 그대로 출력합니다.
  • capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다.
  • uppercase : 모든 글자를 대문자로 바꿉니다.
  • lowercase : 모든 글자를 소문자로 바꿉니다.

 

예제

<p class="og">Lorem ipsum dolor sit amet.</p>
<p class="ca">Lorem ipsum dolor sit amet.</p>
<p class="up">Lorem ipsum dolor sit amet.</p>
<p class="lo">Lorem ipsum dolor sit amet.</p>
<p class="va">Lorem ipsum dolor sit amet.</p>
.og {
  text-transform: none;
}
.ca {
  text-transform: capitalize;
}
.up {
  text-transform: uppercase;
}
.lo {
  text-transform: lowercase;
}
.va {
  font-variant: small-caps;
}

Tip : 소문자를 작은 대문자로 바꾸는 방법 - font-variant

 

기타 CSS 참조

You may like these posts

  • text-transform 영문자를 표기 할 때 text-transform 속성은 모든 글자를 대문자로 또는 소문자로 바꾸거나 첫번째 글자를 대문자로 변환할 수 있습니다. 이 속성은 한글에서는 의미가 없는 속성입니다.   기본형 text-transform : none | capita…
  • 텍스트에 그림자 효과를 줄 수 있습니다. 그림자 효과는 본문에서 자주 사용하면 지저분해 보이지만 사이트 제목이나 강조해야 할 글자에 사용하면 글자를 눈에 띄게 할 수 있습니다.   text-shadow text-shadow는 글자에 그림자 효과를 주어 텍스트를 좀 더 입체적으로 보이게…
  • text-decoration text-decoration은 글자 위로 밑줄을 긋거나 취소선을 표시할 수 있습니다.   기본형 text-decoration : none | line-through | overline | underline none : 선을 만들지 않습니다. line-throu…
  • 텍스트 자간을 조절해보십시오. 강조하고 싶은 글자나 큰 글자들은 글자 사이 간격을 조절해 여유있게 표시하면 읽기 편합니다. 텍스트 간격 조절하기 letter-spacing 속성은 낱 글자 사이의 간격을 조절하고, word-spacing 속성은 단어와 단어 사이의 간격을 조절합니다.  …
  • font-weight font-weight 속성으로 글자의 굵기를 지정합니다.   기본형 font-weight : normal | bold | bolder | lighter | number normal : 보통 굵기입니다. 숫자 400과 같습니다. bold : 굵은 굵기입니다. 숫자 …
  • font-variant font-variant는 소문자를 작은 대문자로 바꾸는 속성입니다. 즉, 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다.   기본형 font-variant : normal | small-caps normal : 일반적인…

Post a Comment