글꼴 관련 스타일

<h1>글꼴(폰트) 관련 스타일</h1>

    <h3>font-size : 글꼴의 크기를 지정하는 속성</h3>
    <pre>
        px : 픽셀(화면 해상도)
        pt : 포인트(1pt = 0.72인치)
        
        % : 상위 요소 크기에 대한 백분율
        em : 1em == 100%
    </pre>

    <ul id="size-test">
        <li>픽셀(px)</li>
        <li>포인트(pt)</li>
        <li>퍼센트(%)</li>
        <li>em</li>
    </ul>

    <hr>

    <h3>font-weight : 글꼴의 굵기(두께)를 지정하는 속성</h3>
    <pre>
        숫자 : (얇음) 100 ~ 900(두꺼움) (100단위)
        normal : 폰트에 지정된 기본 두께(400)
        bold : 굵게 (700)

        bolder : 상속 받은 두께보다 더 굵게
        lighter : 상속 받은 두께보다 더 얇게
    </pre>

    <ul id="weight-test">
        <li>테스트1</li>
        <li>테스트2</li>
        <li>테스트3</li>
        <li>테스트4</li>
        <li>테스트5</li>
    </ul>

    <hr>

    <h3>font-famliy : 글꼴을 지정하는 속성</h3>

    <ul id="famliy-test1" class="cls">
        <li>가나다라, 오가람, ABCD, abcd, 1234, !@#$</li>
        <li>가나다라, 오가람, ABCD, abcd, 1234, !@#$</li>
        <li>가나다라, 오가람, ABCD, abcd, 1234, !@#$</li>
    </ul>

    <h3>웹 폰트 사용</h3>
    <p>웹 폰트 제공 사이트1 : <a href="https://fonts.google.com" target="_blank">구글 웹폰트 사이트</a></p>
    <p>웹 폰트 제공 사이트1 : <a href="https://noonnu.cc/" target="_blank">눈누 상업용 무료 한글폰트 사이트</a></p>


    <ul id="famliy-test2" class="cls">
        <li>가나다라, 오가람, ABCD, abcd, 1234, !@#$</li>
        <li>가나다라, 오가람, ABCD, abcd, 1234, !@#$</li>
        <li>가나다라, 오가람, ABCD, abcd, 1234, !@#$</li>
    </ul>