반응형 웹사이트 - 상대적인 폰트 크기 단위 em, rem

민겸·2023년 4월 28일
0

Making Portfolio

목록 보기
13/13

폰트 크기 단위

대표적으로 많이 쓰는 px(픽셀)단위는 절대적인 단위로, 어떤 환경에서든 같은 크기로 나타낸다. 그에 반해 이 em과 rem은 각각의 기준이 있고 그 기준에 따라 폰트의 크기가 바뀐다.

em

px와 사용방법은 같으며 위에서 말했던 기준이란 부모 요소를 기준으로 한다.
부모 요소의 크기(px)를 기준으로 1em은 부모요소의 크기와 똑같고 배수 형태로 사용된다.

  • ex) 2em = (부모 요소의 px값 x 2)

rem

em과 마찬가지로 사용방법은 px과 같으며, rem의 기준은 부모요소가 아닌 가장 상위의 요소, 즉 html의 font-size를 기준으로 변한다.

  • ex) 0.5rem = (html의 px값 x 1/2)

참고로 font-size는 16px이 기본값이다.
font-size: 16px;
= font-size: 1em;
= font-size: 1rem;
= font-size: 100%;

실습

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>폰트 사이즈 px rm rem</title>

    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
    
    <div class="container">
        <header>
            <h1>폰트 사이즈</h1>
            <p>px | em | rem</p>
        </header>
        <section>
            <div class="box-em">
                <h1>em</h1>
                <p>
                    튼튼하며, 같은 투명하되 그것은 듣는다. 얼음 쓸쓸한 피어나는 사막이다. 끝까지 피어나기 역사를 노년에게서 주는 못하다 수 쓸쓸하랴? 품고 같이 싸인 이는 사는가 그들은 웅대한 생명을 듣는다. 속에 가치를 역사를 수 보라. 얼음과 뜨고, 일월과 청춘의 든 봄바람이다. 풍부하게 어디 안고, 별과 칼이다. 들어 내는 찾아 청춘의 끓는 가는 이상을 전인 군영과 때문이다. 것이 두기 더운지라 불어 있으랴? 장식하는 별과 곳이 속에서 든 구하기 쓸쓸하랴?
                </p>
            </div>
            <div class="box-rem">
                <h1>rem</h1>
                <p>
                    튼튼하며, 같은 투명하되 그것은 듣는다. 얼음 쓸쓸한 피어나는 사막이다. 끝까지 피어나기 역사를 노년에게서 주는 못하다 수 쓸쓸하랴? 품고 같이 싸인 이는 사는가 그들은 웅대한 생명을 듣는다. 속에 가치를 역사를 수 보라. 얼음과 뜨고, 일월과 청춘의 든 봄바람이다. 풍부하게 어디 안고, 별과 칼이다. 들어 내는 찾아 청춘의 끓는 가는 이상을 전인 군영과 때문이다. 것이 두기 더운지라 불어 있으랴? 장식하는 별과 곳이 속에서 든 구하기 쓸쓸하랴?
                </p>
            </div>
        </section>
    </div>

    <script src="./assets/js/script.js"></script>
</body>
</html>

css

@import url('https://fonts.googleapis.com/css2?
family=Noto+Sans+KR:wght@100;300;500;700;900&display=swap');

html{
    font-size: 20px;
}

body{
    font-family: 'Noto Sans KR', sans-serif;
    
}
.box-em{
    font-size: 20px;
}
.box-em p {
    /* body태그가 아닌 box-em을 기준으로 생각해서 40px가 된다 */
    font-size: 1em;
    line-height: 1.5em;
}

.box-rem{
    font-size: 2em;
}
.box-rem p{
    font-size: 1rem;
}

0개의 댓글