1. 글자체 속성 : font-family
- 글꼴 종류를 지정하면서 값이 상속된다.
{ font-family : 궁서체, 'Malgun Gothic', cursive; }- 콤마로 구분해 왼쪽부터 글꼴을 지정하고, 없으면 다음 글꼴을 찾는다.
- 글꼴 맨뒤에는 generic-family 하나를 지정해야 한다.
- 띄어쓰기가 있는 글꼴이름은 따옴표로 감싼다.
1) family-name (font1, font2)
- 글꼴 이름을 넣어주면 된다.
- 띄어쓰기가 있는 font2는 쌍따옴표로 묶었다. (따옴표도 가능)
2) generic-family (font3, font4)
- 글꼴 유형
① serif : 명조 계열 글자체
② sans-serif : 고딕 계열 글자체
③ cursive : 손으로 쓴 듯한 필기체
④ fantasy : 장식이 되어 있는 글자체
⑤ monospace : 글자 폭과 간격이 일정한 글자체
<예제>
<html>
<head>
<title> font-family </title>
<style type="text/css">
<!--
body {font-size: 15pt}
.font1 {font-family: 궁서체}
.font2 {font-family: "HY 견고딕"}
.font3 {font-family: cursive}
.font4 {font-family: fantasy}
-->
</style>
</head>
<body>
<p class="font1"> font 지정 : 궁서체 </p>
<p class="font2"> font 지정 : HY 견고딕 </p>
<p class="font3"> font 지정 : 필기체 </p>
<p class="font4"> font 지정 : 화려한 글자체 </p>
</body>
</html>
2. 글자 크기 속성 : font-size
- 글자의 크기를 설정한다.
{ font-size : 20pt }- <font> 태그의 size 속성은 1~7까지 크기 지정의 한계가 있었지만 font-size를 사용하면 더 크고 세밀한 크기 조정이 가능하다.
- 기본 값은 픽셀이며, 다른 단위의 크기도 지정하거나 브라우저 창의 크기에 대비한 퍼센트로 지정할 수도 있다.
* 절대 크기 단위
| 표기 | 단위 | 표기 | 단위 |
| in | 인치 (1in = 2.54cm | xx-small | medium보다 4.5배 축소 |
| cm | 센티미터 | x-small | medium보다 3배 축소 |
| mm | 밀리미터 | small | medium보다 1.5배 축소 |
| pt | 1pt = 1/72인치 | large | medium보다 1.5배 확대 |
| pc | 1pc = 12pt | x-large | medium보다 3배 확대 |
| medium | 12pt 크기 | xx-large | medium보다 4.5배 확대 |
* 상대 크기 단위
| 표기 | 단위 | ||
| em | 기준 글꼴 문자의 높이 | ||
| ex | 기준 글꼴 문자의 영문 소문자 높이 | ||
| % | 기준 글꼴 크기에 대한 백분율 크기 | ||
| px | 1픽셀을 1로 하는 단위 | ||
| smaller | 앞에 입력한 글자보다 작게 | ||
| larger | 앞에 입력한 글자보다 크게 | ||
<예제>
<html>
<head>
<title> font-family </title>
<style type="text/css">
<!--
.font1 {font-size: 10pt}
.font2 {font-size: 20pt}
.font3 {font-size: medium}
.font4 {font-size: x-large}
.font5 {font-size: 200%}
-->
</style>
</head>
<body>
<p class="font1"> font 지정 : 크기 10 </p>
<p class="font2"> font 지정 : 크기 20 </p>
<p class="font3"> font 지정 : 크기 medium </p>
<p class="font4"> font 지정 : 크기 x-large </p>
<p class="font5"> font 지정 : 크기 200% </p>
</body>
</html>
3. 글자 굵기 속성 : font-weight
{ font-weight : 500 }· normal : 기본 값 (400)
· bold : 굵은 글자 (700) -> <b> 태그와 동일
· bolder : 상속된 값보다 1단계 굵은 글자 굵기
· lighter : 상속된 값보다 1단계 얇은 글자 굵기
· 100~700 사이의 숫자로 굵기 지정 가능
<예제>
<html>
<head>
<title> font-weight </title>
<style type="text/css">
<!--
.font1 {font-weight: 100}
.font2 {font-weight: 400}
.font3 {font-weight: 700}
.font4 {font-weight: normal}
.font5 {font-weight: bolder}
-->
</style>
</head>
<body>
<p class="font1"> font 지정 : 굵기 100 </p>
<p class="font2"> font 지정 : 굵기 400 </p>
<p class="font3"> font 지정 : 굵기 700 </p>
<p class="font4"> font 지정 : 굵기 normal (400) </p>
<p class="font5"> font 지정 : 굵기 400보다 한단계 굵게 </p>
</body>
</html>
4. 글자 스타일 속성 : font-style
- 문자의 기울임 여부를 정한다.
{ font-style : italic } /* 기울임 */· normal : 보통 모양
· italic: 필기체 느낌으로 기울임
· oblique : 보통 모양을 그대로 기울임
· initial : 기본 값으로 설정
<예제>
<html>
<head>
<title> font-style </title>
<style type="text/css">
<!--
body { font-size: 15pt }
p { font-family: "맑은 고딕" }
.no {font-style: normal; }
.it {font-style: italic; }
.ob {font-style: oblique; }
-->
</style>
</head>
<body>
<p class="no"> font 지정 : normal style </p>
<p class="it"> font 지정 : italic style </p>
<p class="ob"> font 지정 : oblique style </p>
</body>
</html>
5. 소문자 크기의 대문자로 바꾸는 속성 : font-variant
{ font-variant : small-caps } - 소문자를 작은 대문자로 바꾸는 속성이다.
- 한글에는 의미가 없다.
<예제>
<html>
<head>
<title> font-variant </title>
<style type="text/css">
<!--
body { font-size: 15pt }
p { font-family: "Malgun Gothic" }
.font1 { font-variant: small-caps; }
.font2 { font-variant: normal; }
-->
</style>
</head>
<body>
<p class="font1"> font 지정 : Small-Caps </p>
<p class="font2"> font 지정 : Normal </p>
</body>
</html>