여자 이름

이 HTML을 예로 들어 보겠습니다.

<div id="outer">
    <h1 class="heading">Outer heading</h1>

    <div id="inner">
        <h1 class="heading">Inner heading</h1>
    </div>
</div>

그리고 다음 CSS:

#outer { font-size: 30px; }
#inner { font-size: 20px; }
.heading { font-size: 3em; }

결과는 다음과 같습니다.



개발 도구에서 제목을 검사하는 경우 계산 탭으로 전환하면 외부 제목의 글꼴 크기는 90px이고 내부 제목의 글꼴 크기는 60입니다.

em이 부모의 글꼴 크기를 기반으로 하기 때문입니다.
#inner에 글꼴 크기를 지정하지 않으면 두 제목의 크기가 동일합니다.

렘

렘은 조금 다릅니다. .heading 글꼴 크기 단위를 em에서 rem으로 변경해 보겠습니다.

.heading { font-size: 3rem; }

이제 두 머리글의 크기가 같습니다.


rem은 요소의 상위 글꼴 크기를 기반으로 하지 않습니다. html 요소인 루트 요소의 글꼴 크기를 기반으로 합니다.

html의 글꼴 크기를 지정하지 않으면 모든 브라우저에서 기본값은 16px입니다.

dev 도구에서 제목을 검사하고 계산 탭으로 전환했을 때 제목의 글꼴 크기는 48(16 * 3)입니다.