rem vs em

신승준·2022년 10월 3일

React를 너무 막무가내로 배웠던 것 같아 이 Udemy 강의로 처음부터 차근차근 보고 있는 와중, height랑 width 단위로 rem을 쓰는 곳이 많았는데, 그러다보니 em과 rem이 뭐가 다를까 궁금해졌다.

이전에 난 그냥 무언가에 비례하는 단위를 사용하면 좋겠지?, rem? em? 몰라잉 그냥 em 쓸래!라는 멍청한 생각으로 em을 쓰곤 했었는데 이번에 뭐가 다른지 짧게나마 알게 되었고 결과적으론 rem을 쓰는게 좋겠다는 생각이 들었다.

밑에는 주저리주저리 써놨는데, 먼저 요약해서 말하자면 rem은 html 태그에 정의된 font-size, em은 부모의 font-size에 비례한다.

rem

MDN을 참고해보면 rem은, Font size of the root element라고 나온다. 여기서 root는 최상위라고 보면 된다. 즉 최상위 요소의 font size를 뜻하게 된다. DOM의 최상위 요소는 html 태그라고 봐도 무방하다. 따라서 rem은 html 태그의 font size라고 보면 된다.

html {
	font-size: 32px;
}

만약 위와 같이 작성했다면, 이제 앞으로 rem은 32px에 비례하게 되는 것이다. 1rem당 32px이 되는 것. 나중에 나올 예시에서 알아보자.

em

반면 em은 MDN에서 Font size of the parent라고 나온다. 부모의 font size를 말하는 것이다. 만약 em이 쓰이는 요소에 font size가 정의되어 있지 않으면, font size가 정의된 부모를 탐색해나간다.

.emDiv {
	font-size: 12px;
}

emDiv라는 class를 가진 요소는 이제 1em당 12px에 비례하게 된다.

둘을 섞어 쓴다면?

<html lang="en">
<head>
    <style>
        * {
            box-sizing: border-box;
        }
        
        html {
            font-size: 32px;
        }
        
        .outer {
            font-size: 12px;
            
            width: 10rem;
            height: 10rem;
            border: 3px solid red;
        }
        
        .inner {
            width: 10em;
            height: 10em;
            border: 3px solid blue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

위와 같이 코드를 작성할 경우, 사진처럼 inner는 120px 120px이 되고 outer는 320px 320px이 된다. 참고로 html의 font-size를 따로 정의하지 않는다면 브라우저 기본값인 16px이 할당된다.

주의할 점

앞서 em을 쓸 경우, em이 속한 요소에 따로 font-size가 정의되어 있지 않다면 font-size가 정의된 부모를 탐색하게 된다.

<html lang="en">
    <head>
        <style>
            * {
                box-sizing: border-box;
            }

            html {
                font-size: 32px;
            }

            .outer {
                font-size: 12px;

                width: 10rem;
                height: 10rem;
                border: 3px solid red;
            }

            .box {
                font-size: 20px;
            }

            .box1 {
            }

            .box2 {
                width: 10em;
                height: 10em;
                border: 3px solid blue;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">
                <div class="box">
                    <div class="box1">
                        <div class="box2"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

box2는 자신에게 font-size가 정의되어 있지 않으니 부모인 box1을 보게 되고, box1에도 없으니 box까지 가서 font-size를 찾게 된다.

이렇듯 em을 사용하면 부모에게 의존하게 된다. 이게 어떤 문제가 되냐면,

* {
    box-sizing: border-box;
}

html {
    font-size: 32px;
}

.outer {
    font-size: 12px;

    width: 10rem;
    height: 10rem;
    border: 3px solid red;
}

.box {
    font-size: 10px;
}

.box1 {
    font-size: 2em;
}

.box2 {
    width: 10em;
    height: 10em;
    border: 3px solid blue;
}

위와 같이 작성되면 box2의 width와 height는 예상하기 다소 복잡해진다. outer에서는 1em당 12px, box에서는 1em당 24px, box1에서는 1em당 10px이 된다. 결국 box2는 200px * 200px이 될 것이다. 이렇게 요소를 거치면서 font-size가 변할 수 있기 때문에 em을 사용하는 것은 다소 헷갈리게 만들 수 있다.