font-size.html

font-size.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            font-size: 1em;
        }
        .two{
            font-size: 2em;
        }
        .three{
            font-size: 3em;
        }
        .onepx{
            
            font-size: 1px;
        }
        .sixteenpx{           
            font-size: 16px;
        }
        /* 1920x1080p full HD크기 표시 */
        .apx{           
            font-size: 1080px;
        }
    </style>
</head>
<body>
    <p>브라우저의 크기를 가진 단락</p>
    <p class="one">1em의 크기를 가진 단락</p>
    <p class="two">2em의 크기를 가진 단락</p>
    <p class="three">3em의 크기를 가진 단락</p>
    <p class="onepx">1px의 크기를 가진 단락</p>
    <p class="sixteenpx">16px의 크기를 가진 단락</p>
    <p class="apx">1080px의 크기를 가진 단락</p>
</body>
</html>

20230316133251.png

20230316133245.png

font-vary.html

font-vary.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .accent{
            /* 폰트 굵기를 더 가늘게 */
            font-weight: lighter;
            
        }
        .accent2{
            font-variant: small-caps;
        }
        .accent3{
             /* 폰트 굵기를 더 굵게 */
            font-weight: bold;
        }
        .accent4{
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <p>세계 <span class="accent"></span>3대</span> 미항</p>
    <p><span class="accent2">시드니(Sydney)</span>,호주</p>
    <p><span class="accent3">리우데자네이루(Rio de Janeiro)</span>,브라질</p>
    <p><span class="accent4">나폴리(Napoles)</span>,이탈리아</p>
</body>
</html>

20230316134151.png