<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font / text</title>
<style>
body, h1, h2{
font-family: '돋움', dotum, Helvetica, sans-serif;
font-size: 12px;
}
h1{
background-color: green;
font-size: 2.4em;
letter-spacing: 1em; /*1글자 간격씩 띄워 주겠다.*/
text-transform: uppercase;
/* uppercase | lowercase | capitalize */
/* capitalize: 첫글자만 대문자 */
}
h2{
color: #ff0000;
font-size: 2em;
font-variant: small-caps;
text-decoration: line-through; /*취소선*/
/* underline | overline | line-through | none */
/* none : 원래 들어가는 자리에 없앨때 사용한다.*/
}
address{
font-style: oblique;
/* normal | italic | oblique */
}
h1 small{
background-color: lime;
font-synthesis: .5em;
vertical-align: baseline;
/* top | middle | baseline | bottom */
/* 0, 5px */
}
p.lead{
font-size: 1.2em;
font-weight: 600;
/* normal | lighter | 100 | 200 | 300 | 400 | 500 */
/* bold | bolder | 600 | 700 | 800 | 900 */
}
p.text{
text-indent: 1em;
/* 시작할때 한글자를 뺀다 */
text-align: center;
/* left | center | right | justify */
/* justify 폭이 좁으면 좋지 않다. */
line-height: 1.6em;
/*white-space: nowrap;*/
}
</style>
</head>
<body>
<h1>style example <small>sample</small></h1>
<h2>Style Example (font-variant)</h2>
<p class="lead">Lorem ipsum dolor sit am .... </p>
<p class="text">Lorem ipsum dolor sit ame ... </p>
<address>add: Lorem ipsum dolor sit amet, ... </address>
</body>
</html>
hi