모든 글자를 대문자, 소문자로 변환 - 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

  • 배경 색을 지정하려면 배경을 넣고 싶은 요소의 속성에 background-color 속성을 넣으면 됩니다. 16진수나 rgb 값 또는 색상 이름을 사용해 지정합니다. background-color background-color로 배경의 색을 정합니다.   기본형 background-c…
  • background-attachment background-attachment 속성으로 배경 이미지 고정, 스크롤 여부를 지정합니다.   기본형 background-attachment : scroll | fixed | local scroll : 내용을 스크롤하면 배경 이미지는 스크…
  • 배경을 넣고 싶은 요소들마다 속성을 입력하면 배경을 넣을 수 있지만 박스 모델 관점에서 배경 적용 범위를 조절할 수도 있습니다. 즉, 박스 모델의 가장 외곽인 테두리(border)까지 적용할지, 테두리를 빼고 패딩(padding) 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있습니다. …
  • 배경 이미지는 제목이나 본문에서 한쪽에 이미지를 표시할 때도 이용할 수 있습니다. 이때 background-position 속성을 이용해 배경 이미지가 표시되는 위치를 조절합니다. background-position background-position은 배경 이미지의 위치를 정하는 속성입니다. &n…
  • 배경 이미지의 크기가 배경을 채우려는 요소보다 작을 경우, 기본적으로 반복해 표시됩니다. 이때 background-repeat 속성을 사용하면 배경 이미지를 반복하지 않게 할 수 있고 반복하더라도 가로 반복이나 세로 반복 등으로 반복 방향을 지정할 수도 있습니다. background-repeat …
  • background-postion 속성을 이용해 배경 이미지를 배치할 때 기준이 필요합니다. 배경 이미지를 배치할 기준은 background-origin 속성으로 지정합니다. background-origin background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. &nbs…

Post a Comment