모든 글자를 대문자, 소문자로 변환 - text-transform
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;
}data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="480"
data-pen-title="CSS 대문자 또는 소문자로 자동으로 바꾸는 방법 text-transform 예제"
data-slug-hash="dyXXbxg"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 480px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
Tip :
href="https://urliveblogger.blogspot.com/2021/01/css-font-variant.html"
>소문자를 작은 대문자로 바꾸는 방법 - font-variant >