CSS 강좌 05강 - CSS font 스타일
font는 글꼴을 의미하는데, 쉽게 말하자면 글자의 서체.. 즉 모양입니다.
※Font Family
▷웹 페이지에서 스타일링 한 글꼴을 사용자가 보기 위해서는 사용자의 디바이스에 해당 글꼴이 포함되어 있어야 합니다.
▷그렇기 때문에 Font Family라는 것을 사용하는데요.
▷Font Family를 사용하여 여러개의 글꼴을 지정하고, 사용자에게 있는 글꼴로 적용을 합니다.
예제)
<style type="text/css">
a{
font-family:NanumGothicWeb,verdana,dotum,Helvetica,sans-serif;
}
</style>
<body>
<a href="http://kiara77.tistory.com/">Go Learning!</a>
</body>
※Sans-serif/serif
▷serif란 문자를 디자인 하는 요소입니다. 문자의 획 끝부분을 장식하는 모양을 말합니다.
▷serif의 대표적인 글꼴은 바탕체, 궁서체, Time New Roman이 있습니다.
▷sans-serif란 serif처럼 획 끝부분을 장식하는 모양이 없습니다.
▷sans-serif의 대표적인 글꼴은 굴림체, 돋음체, Arial, Verdana가 있습니다.
▷font-family에 serif나 sans-serif를 지정할 경우 OS의 기준에 따라 적당한 글꼴로 표시됩니다.
예제)
<style type="text/css">
span{
font-family:sans-serif; font-size:30px;
}
p{
font-family:serif; font-size:30px;
}
</style>
<body>
<span>ABCDEFG abcdefg</span>
<p>ABCDEFG abcdefg</p>
</body>
※Font Size
▷font-size는 글자의 크기를 지정할 때 사용합니다.
▷font-size로 글자의 크기를 지정하는 단위는 두 가지 입니다.
▷첫 번째 단위는 px 이고, 두 번째 단위는 em 입니다.
▷1em은 기본적으로 16px 정도 입니다. 하지만 요소가 상속하고 있는 font-size를 기준.. 상대적으로 결정됩니다.
예제)
<style type="text/css">
span{
font-family:sans-serif; font-size:30px;
}
p{
font-family:sans-serif; font-size:3em;
}
div{
font-family:sans-serif; font-size:50px;
}
</style>
<body>
<span>ABCDEFG abcdefg</span>
<p>ABCDEFG abcdefg</p>
<div>ABCDEFG abcdefg</div>
</body>
※Font Weight
▷font-weight을 사용하여 글자의 두께를 지정합니다.
▷font-weight의 값은 normal, bold, bolder, lighter 혹은 숫자값으로 지정할 수 있습니다.
예제)
<style type="text/css">
#div1{
font-family:sans-serif; font-size:30px; font-weight:normal;
}
#div2{
font-family:sans-serif; font-size:30px; font-weight:bold;
}
#div3{
font-family:sans-serif; font-size:30px; font-weight:lighter;
}
#div4{
font-family:sans-serif; font-size:30px; font-weight:400;
}
#div5{
font-family:sans-serif; font-size:30px; font-weight:600;
}
</style>
<body>
<div id="div1">ABCDEFG abcdefg</div>
<div id="div2">ABCDEFG abcdefg</div>
<div id="div3">ABCDEFG abcdefg</div>
<div id="div4">ABCDEFG abcdefg</div>
<div id="div5">ABCDEFG abcdefg</div>
</body>
모든 코드는 직접 코딩하면서 테스트를 해보세요 :)
'코딩이야기 > CSS' 카테고리의 다른 글
| CSS 박스 스타일 CSS 강좌 07강 (0) | 2016.03.08 |
|---|---|
| CSS 강좌 06강 - CSS 링크/표/배경 스타일 (0) | 2016.03.05 |
| CSS 강좌 04강 - CSS 텍스트 스타일 (0) | 2016.03.03 |
| CSS 강좌 03강 - CSS 선택자 조합 (1) | 2016.03.03 |
| CSS 강좌 02강 - CSS 선택자 (0) | 2016.03.02 |