[HTML/CSS] 대/소문자 변경하기 (text-transform)
- Web/HTML, CSS
- 2023. 1. 16.
영문자의 대/소문자를 일괄적으로 변경해야 할 경우에는 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처리하면 위와 같이 됩니다.
'Web > HTML, CSS' 카테고리의 다른 글
[HTML/CSS] 글자 글꼴(폰트) 변경하기 (font-family) (0) | 2023.01.18 |
---|---|
[HTML/CSS] 작은 대문자로 표시하기 (font-variant) (1) | 2023.01.17 |
[HTML/CSS] 텍스트 이탤릭체, 밑줄, 취소선 적용하기 (1) | 2023.01.15 |
[HTML/CSS] 글자 굵기 변경하기 (font-weight) (1) | 2023.01.14 |