☞ font-style , font-variant ,
font-weight
font-style 속성은 글자체의 스타일을
지정해주는 것으로서 normal , italic
, oblique 값을 사용할 수 있습니다.
그런데 font-style 속성을 이용해보면 알겠지만
italic은 말 그대로 이탤릭체이고 oblique는
이탤릭체와 비스므레(^^)한 정도로 볼 수 있습니다
.
font-variant 의 경우는 단순히 보통의 텍스트를
작은 대문자 폰트를 이용해서 작은 대문자로
바꾸어 주는 것입니다. 예컨데 p {
font-variant : small-caps } ☜이런식으로 사용할
수 있죠. ^^
font-weight 의 경우는 폰트의 굵기를
지정해주는 속성으로서 lighter ,
light , normal , bold ,bolder 값을 지정해 줄 수
있습니다.
예제를 봐 볼까요?
<style type="text/css">
<!--
body { font-style : italic ; }
p { font-variant : small-caps ; }
u { font-weight : bold ; }
-->
</style>
<body>
안녕하세요? 태그매니아 입니다.<br>
<p> tagmania ☜이건 소문자 였는데..대문자로
나오네요</p>
<u> TAGMANIA </u>
</body> |
위의 예제를 실행시켜 보면 글자가 다
이탤릭체로 나오게 됩니다. 그리고 font-variant
속성이 적용된 부분(tagmania)은 글자가
소문자임에도 불구하고 대문자로 표현되서
나오게 됩니다. 그리고 font-weight 속성의 경우 bold
로 지정되었기 때문에 더 굵게 나오게 되는 거죠.
단, font-weight 속성의 경우 표현되는 글자체에 bold체가
있어야 합니다. 예컨데..arial 체의 경우 arial bold체가
있어야만히 표현이 된다는 거죠. 각각의 글자체에
bold 체가 없는 경우엔 font-weight 속성은 적용될
수가 없습니다. 주의하시길......근뎅....bold체가
있는지 없는지 어떻게 확인하냐구요? 그건
여러분들의 컴퓨터의 [시작메뉴] -> [ 설정] ->
[제어판] -> [글꼴] 을 클릭해서 확인해보시면
될겁니다. 또한 font-weight 속성의 경우 100~900까지
숫자로 굵기를 조절해줄 수 있는데요....단, verdana체와
arial체에서만 적용이 되기 때문에 제한적이라고
할 수 있답니다.
☞ text-transform , text-decoration
text-transform 속성은 모든 글자를 대문자나
소문자로 바꿔준다거나 단어의 첫글자만
대문자로 출력해주는 기능을 합니다. (물론
영문자에만 효과가 있습니다.)
| uppercase |
lowercase |
capitalize |
none |
| 모든 글자를 대문자 변환 |
모든 글자를 소문자 변환 |
첫글자만 대문자로 변환 |
아무런 효과를 주지 않음 |
text-decoration 속성은 글자에 밑줄 , 윗줄 ,
가운데 줄을 긋게하는 기능을 합니다. (영문이나
한글 모두 적용)
underline : 밑줄을 긋는 효과
overline : 윗줄을 긋는 효과
line-through : 가운데 줄을 긋는 효과 |
blink : 깜빡이게 하는 효과
none : 아무 효과도 없게 함
|
속성을 설명을 했으니 이제 예제를 보면서
실제로 어떻게 사용되는지 알아볼까요?
<style type="text/css">
<!--
h1 { font-size:30px; font-weight:bold; }
body { font-size:20px; }
.love { text-transform:lowercase; text-decoration:underline; }
.story { text-transform:uppercase; text-decoration:line-through; }
.kiss { text-transform:none; text-decroation:none; }
a { text-transform:none; text-decoration:none; }
-->
</style>
<body>
<h1>스타일 시트</h1>
<p class=love>TAGMANIA에서는 태그와 각종 자바스크립 예제를 제공하고 있습니다.</p>
<p class=story>style sheet 특강을 실시하고 있습니다.</p>
<a href="이건 연습"> 링크인디....밑줄이 없네...</a>
</body> |
예제를 실행시켜 보니 바로 알겠죠? ^^ 잘
모르겠다고 하시는 분들은 소스를 주의깊게
째려보신 다음에 위에 속성 설명한 거하고
비교하면서 하나씩 봐보세요. 그러면 제가 굳이
설명 안 하더라도 다 아실 수 있을 겁니다.
여기까지 읽어주신 거 고맙고요...여기서
세번째 특강은 마무리 짓도록 하죠. ^^
|
