- font-variant : small-caps 영문 소문자를 조금 작은 크기의 대문자로 바꿔줍니다.
- font-variant : normal 은 기본값이며 이미 설정된 값을 초기화 할 때 사용하면 됩니다.
font-variant
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
font-variant 는 영문 소문자를 "작은" 대문자로 바꾸어 줍니다.
예제 1
font-variant 개요
보기
font-variant : normal
ABCDEF
abcdef
Abcdef
한글은?
CSS 공작소
abcdef
Abcdef
한글은?
CSS 공작소
font-variant : small-caps
ABCDEF
abcdef
Abcdef
한글은?
CSS 공작소
abcdef
Abcdef
한글은?
CSS 공작소
소스
<style type="text/css">
.css_test {
font-size : 15pt !important;
text-align : center;
font-variant : small-caps;
float : left;
width : 250px;
}
</style>
<div style="width:500px; margin:0 auto;">
<div class="css_test" style="font-variant:normal;">
font-variant : normal
ABCDEF<br>
abcdef<br>
Abcdef<br>
한글은?<br>
CSS 공작소
</div>
<div class="css_test">
font-variant : small-caps
ABCDEF<br>
abcdef<br>
Abcdef<br>
한글은?<br>
CSS 공작소
</div>
<div style="clear:both;"></div>
</div>
.css_test {
font-size : 15pt !important;
text-align : center;
font-variant : small-caps;
float : left;
width : 250px;
}
</style>
<div style="width:500px; margin:0 auto;">
<div class="css_test" style="font-variant:normal;">
font-variant : normal
ABCDEF<br>
abcdef<br>
Abcdef<br>
한글은?<br>
CSS 공작소
</div>
<div class="css_test">
font-variant : small-caps
ABCDEF<br>
abcdef<br>
Abcdef<br>
한글은?<br>
CSS 공작소
</div>
<div style="clear:both;"></div>
</div>
설명
예제 2
실습 - font-variant 속성 조절해 보기
보기
| font-variant : | |
|---|---|
|
font-variant : normal
|
|
When the sun shines on the mountains And the night is on the run It's a new day It's a new way And I fly up to the sun I can feel the morning sunlight I can smell the new mown hay I can hear god's voices calling On my golden skylight way