[HTML/CSS] 대/소문자 변경하기 (text-transform)

문장 대/소문자 변경하기

<p style="text-transform:none;">aPple</p>
<p style="text-transform:capitalize;">apple</p>
<p style="text-transform:uppercase;">apple</p>
<p style="text-transform:lowercase;">APPLE</p>

text-trasnform 속성 값

• none : 기본값
• capitalize : 문장의 첫글자만 대문자로 변형
• uppercase : 문장 대문자로 변형
• lowercase : 문장 소문자로 변형

CSS 처리

HTML

<div class="none">aPple</div>
<span class="capitalize">apple</span>
<p class="uppercase">apple</p>
<p class="lowercase">APPLE</p>

CSS

.none{text-transform:none;}
.capitalize{text-transform:capitalize;}
.uppercase{text-transform:uppercase;}
.lowercase{text-transform:lowercase;}

결과 :

aPple

Apple

APPLE

apple