Webi Blog

웹아이에서 운영되고 있는 블로그입니다.

Web/CSS

반응형 폰트 사이즈 단위 em? rem? 뭐가 다를까? | css font-size 상대 단위

웹아이 2021. 8. 30. 10:16
반응형

오늘은 반응형 사이트 제작할 때 많이 쓰는 size 단위인 em, rem에 대해서 알아보도록 하겠습니다.

 

보통 폰트사이즈를 12px 요렇게 고정 크기 픽셀 단위로 설정하지만 em과 rem은 배율이라고 보시면 되요

1.2em 1.2rem은 1.2배라고 보시면 되요~

근데 배율이면 기준이 있어야하자나요? 도대체 어떤 요소의 1.2배란 말일까요?

여기서 em과 rem은 서로 다른 길을 갑니다.

 

em은 상위 요소(부모)가 기준이 되구요 rem은 최상위 요소가 기준이 됩니다.

rem의 뜻은 최상위를 뜻하는 root의 r을 붙여줘서 r + em이 된답니다.

 

상위? 최상위?

 

상위와 최상위의 차이가 어떻게 다른지는 예제를 통해서 한번 알아보도록 하겠습니다.

 

<style>
    html { font-size:10px }
    section { font-size:20px }
    section .div_em { font-size:1.2em }
    section .div_rem { font-size:1.5rem }
</style>

<html>
    <head>
        <title>em과 rem의 차이를 알아보자!!</title>
    </head>
    <body>
        <section>
            <div class="div_em">EM의 글자크기</div>
            <div class="div_rem">REM의 글자크기</div>
        </section>
    </body>
</html>
<!-- 편의를 위해 style과 html을 분리하여 작성하였습니다. -->

 

위 코드를 실행하게 되면 다음과 같이 됩니다.

 

 

흠...어째서 이렇게 될까요? 분명 em은 1.2, rem은 1.5를 지정해줬는데...

숫자를 더 크게 지정한 rem이 더 작아진거죠? 개발자 도구로 font-size가 어떻게 설정되었는지 확인해 보겠습니다.

 

em은 font-size가 24픽셀로 적용이 되었습니다.

 

rem은 font-size가 15픽셀로 적용이 되었습니다.

 

이제 왜 이런건지 설명을 해드릴께요~~

 

em은 바로 상위요소(부모)에 영향을 받는다고 했잖아요? 그럼 div_em의 상위요소는 어딜까요?

바로 위 SECTION 태그 입니다.

제가 SECTION태그에는 font-size를 20px로 설정을 해주었어요~

20px의 1.2배는...바로 24px이 되네요~ 그래서 24px이 적용된거에요!!

 

그렇다면 rem은???

제가 HTML 태그에 font-size를 10px를 줬어요~ 그냥 심심해서 설정해준건 아니랍니다.^^;;

REM의 Root는 바로 최상위 태그 HTML을 가르키는거였어요~~~

그래서 10px의 1.5배인 15픽셀이 적용된거에요~~

 

잘 이해가 안되신다고요??? 그림으로 알려드릴께요~~^^

 

 

이제 이해가 좀 되시나요?

em은 바로 위 상위요소!! rem은 최상위 요소 HTML만 기억하시면 되요~~

 

em과 rem을 사용했을때의 좋은 점은 상위 태그의 값으로 모든 하위 크기를 변경해줄 수 있다는거에요~

그럼 반응형 사이트 만들때 미디어 쿼리로 상위 요소의 사이즈만 변경해 주면 되니 코드도 많이 줄고 코딩시간도 많이 줄일 수 있어요!~

 

참고로 em과 rem은 margin, padding 같이 사이즈를 사용하는 곳에도 모두 사용이 가능하답니다.^^

 

아직도 이해가 안되신다구요?

알고 싶은 다른게 있으시다구요?

그럼 댓글로 남겨주세요. 댓글을 늘 지켜보고 있겠습니다~^^

반응형