Font
font-family : 글꼴을 지정
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p.test1 {font-family: Georgia, "Times New Roman", serif;}
p.test2 {font-family: serif; }
p.test3 {font-family: sans-serif; }
p.test4 {font-family: monospace; }
p.test5 {font-family: cursive; }
p.test6 {font-family: fantasy; }
p.test7 {font-family: Georgia, "Malgun Gothic", serif;}
</style>
</head>
<body>
<p class="test1">font-family test</p>
<p class="test2">font-family test - serif</p>
<p class="test3">font-family test - sans-serif</p>
<p class="test4">font-family test - monospace</p>
<p class="test5">font-family test - cursive</p>
<p class="test6">font-family test - fantasy</p>
<p class="test7">font-family test</p>
<p class="test7">font-family 한글 테스트</p>
</body>
</html>
font-size : 글자 크기(medium…)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p.test1 {font-size : medium;}
p.test2 {font-size : xx-small ;}
p.test3 {font-size : x-small ;}
p.test4 {font-size : small ;}
p.test5 {font-size : large ;}
p.test6 {font-size : x-large ;}
p.test7 {font-size : xx-large;}
div.parent_test {font-size: 20px;}
div p.test8 {font-size : smaller;}
div p.test9 {font-size : larger;}
</style>
</head>
<body>
<p class="test1">font-size : medium (16px)</p>
<p class="test2">font-size : xx-small</p>
<p class="test3">font-size : x-small</p>
<p class="test4">font-size : small</p>
<p class="test5">font-size : large</p>
<p class="test6">font-size : x-large</p>
<p class="test7">font-size : xx-large</p>
<div class="parent_test">
<p class="test8">font-size : smaller</p>
<p class="test9">font-size : larger </p>
</div>
</body>
</html>
font-size : 글자 크기(length)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html { font-size: 20px; }
div.parent_test {font-size: 30px;}
p.test1 {font-size: 16px;}
p.test2 {font-size: 100%;}
p.test3 {font-size: 1em;}
p.test4 {font-size: 1rem;}
p.test5 {font-size: initial;}
p.test6 {font-size: inherit;}
</style>
</head>
<body>
<p>20px</p>
<div class="parent_test">
<p>30px</p>
<p class="test1">font-size: 16px</p>
<p class="test2">font-size: 100%(30px)</p>
<p class="test3">font-size: 1em(30px)</p>
<p class="test4">font-size: 1rem(20px)</p>
<p class="test5">font-size: initial(16px-기본값)</p>
<p class="test6">font-size: inherit(30px)</p>
</div>
</body>
</html>
font-weight : 글자 두께
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div.parent_test {font-weight: 300;}
p.test1 {font-weight: normal;}
p.test2 {font-weight: bold;}
p.test3 {font-weight: bolder;}
p.test4 {font-weight: lighter;}
p.test5 {font-weight: initial;}
p.test6 {font-weight: inherit;}
</style>
</head>
<body>
<div class="parent_test">
<p class="test1">font-weight: normal(=400)</p>
<p class="test2">font-weight: bold(=700)</p>
<p class="test3">font-weight: bolder</p>
<p class="test4">font-weight: lighter</p>
<p class="test5">font-weight: initial</p>
<p class="test6">font-weight: inherit</p>
</div>
</body>
</html>
font-variant : 작은 대문자를 표현
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p.test1 {font-variant:normal;}
p.test2 {font-variant:small-caps;}
</style>
</head>
<body>
<p class="test1">Hello World!!</p>
<p class="test2">Hello World!!</p>
<p class="test2">hello world!!</p>
</body>
</html>
font-style : 글꼴 스타일
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p.test1 {font-style:normal;}
p.test2 {font-style:italic;}
p.test3 {font-style:oblique;}
</style>
</head>
<body>
<p class="test1">font-style:normal</p>
<p class="test2">font-style:italic</p>
<p class="test3">font-style:oblique</p>
</body>
</html>
line-height : 줄간격, 줄높이
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {font-size:14px; width : 500px; border:1px solid red;}
div.test1 {line-height : normal;}
/*div.test1 {line-height : 1;}*/ /*14px, 전체 레이어 높이:56px*/
/*div.test1 {line-height : 1.5;}*/ /*21px, 전체 레이어 높이:84px*/
/*div.test1 {line-height : 2;}*/ /*28px, 전체 레이어 높이:112px*/
/*div.test1 {line-height : 10px;}*/
/*div.test1 {line-height : 20px;}*/
/*div.test1 {line-height : 100%;}*/ /*14px, 전체 레이어 높이:56px*/
</style>
</head>
<body>
<div class="test1">Hello World!!! Hello World!!! Hello World!!!
Hello World!!! Hello World!!! Hello World!!!
Hello World!!! Hello World!!! Hello World!!!
Hello World!!! Hello World!!! Hello World!!!
Hello World!!! Hello World!!! Hello World!!!
Hello World!!! Hello World!!! Hello World!!!
Hello World!!!</div>
</body>
</html>
font : 글꼴 설정
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p.test1 { font: 12pt/14pt sans-serif }
p.test2 { font: 80% sans-serif }
p.test3 { font: x-large/110% "new century schoolbook", serif }
p.test4 { font: bold italic large Palatino, serif }
p.test5 { font: normal small-caps 120%/120% fantasy }
</style>
</head>
<body>
<p class="test1">font: 12pt/14pt sans-serif</p>
<p class="test2">font: 80% sans-serif</p>
<p class="test3">font: x-large/110% "new century schoolbook", serif</p>
<p class="test4">font: bold italic large Palatino, serif</p>
<p class="test5">font: normal small-caps 120%/120% fantasy</p>
<p style="font:caption">자막이 있는 컨트롤에 사용</p>
<p style="font:icon">아이콘에 사용.</p>
<p style="font:menu">드롭다운 메뉴에 사용</p>
<p style="font:message-box">대화 상자에서 사용.</p>
<p style="font:small-caption">더 작은 캡션 글꼴.</p>
<p style="font:status-bar">상태 표시줄에 사용.</p>
</body>
</html>