📌 text-transform
: 대소문자로 바꾸는 CSS 속성
- capitalize : 단어의 첫번째 글자를 대문자로 바꿈
- uppercase : 모든 글자를 대문자로 바꿈
- lowercase : 모든 글자를 소문자로 바꿈
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속 받음
- none : 입력된 그대로 출력
#info {
display: flex;
justify-content: space-between;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
}
📌 font-variant
: 대소문자에 대한 글꼴 설정
- normal: 보통 글꼴로 지정
- 기본값 - small-caps: 소문자 크기의 대문자
- 대문자는 크기가 조정되지 않음 X
- 대소문자가 있는 글꼴에만 적용되므로 한국어에서는 적용되지 않음 - all-small-caps: 텍스트의 모든 글자를 작은 대문자(소문자 크기)로 변환
- 대문자가 있는 경우에도 작은 대문자로 표시 - petite-caps: 텍스트의 소문자를 작은 대문자로 변환, 대문자는 더 작은 크기로 표시
- all-petite-caps: 텍스트의 모든 글자를 작은 대문자로 변환, 대문자는 더 작은 크기로 표시
- unicase: 대문자와 소문자를 통합하여 표시
See the Pen font-variant by nadia kwon (@nadia-kwon) on CodePen.
참고
text-transform - CSS: Cascading Style Sheets | MDN
The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.
developer.mozilla.org
font-variant - CSS: Cascading Style Sheets | MDN
The font-variant CSS shorthand property allows you to set all the font variants for a font.
developer.mozilla.org