<!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>