[CSS] 상대 단위(em, rem)

FrontEnd/CSS

[CSS] 상대 단위(em, rem)

범데이 2022. 5. 8. 14:52

반응형 웹디자인이 대두되면서 점점 많은 웹사이트들이 em과 rem라고 불리는 CSS단위를 이용해서 스타일링이 되고 있다. 이번 포스팅에서는 상대 단위가 뭔지, em과 rem단위가 실제로 브라우저에서 어떻게 동작하는지 정확히 알고 좀 더 적재적소에 사용하는 방법에 대해 알아보고자 한다.

1. 상대 단위란?

상대(relative)단위란 고정되지 않고 어떤 기준에 따라 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다. 본 포스팅에서 다룰 em, rem을 포함해 %, vw, vh등이 대표적인 CSS의 상대 단위이다.

반면 절대(absolute)단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위이다. 대표적으로 예전부터 현재까지 많이 사용되는 px와 pt를 들 수 있고, cm나 in와 같은 실생활에서 많이 사용되는 단위들도 이 절대 단위라고 부를수 있다.

정리해 보면, 실생활에서 1cm가 항상 1cm인 것처럼 1px는 항상 1px(=0.02645833cm)이지만, 1em이나 1rem은 항상 고정된 길이를 나타내지 않고 대신 브라우저가 어떤 기준에 따라 계산을 하여 px로 변환을 해준다. 따라서 그 기준이 무엇인지를 파악하는 것이 em과 rem을 정확히 이해하고 사용하는 데에 핵심이 된다.

2. em과 rem의 공통점

브라우저에서 사실상 이 두 단위가 같은 길이로 계산될 때가 상당히 많고, 둘중에 뭐를 쓰든 큰 차이가 나지 않을 경우가 많다. em과 rem은 둘 다 CSS의 font-size 속성 값에 비례해서 결정되는 상대 단위이다.

예를 들어, font-size: 16px 인 경우, 상대 단위는 브라우저에 의해 다음과 같이 계산된다.

0.5em = 16px * 0.5 = 8px
1em = 16px * 1 = 16px
2em = 16px * 2 = 32px

위와 같이 font-size값에 증감에 비례해서 유동적으로 길이가 결정되고 싶은 속성에 em이나 rem 단위를 사용해서 길이 지정을 해줄 수 있다.

하지만 em과 rem을 텍스트의 크기를 조정하기 위해서만 사용한다고 오해할 수 있는데, 이는 잘못된 생각이다. em과 rem 모두 font-size값에 따라 수치가 결정될 뿐이지, px과 마찬가지로 여러 요소들의 크기를 나타내기 위한 단위이다.

3. em과 rem의 차이점

em과 rem단위의 기준은 font-size 속성 값이라고 했는데, 정확히 어디에 있는 font-size속성 값인지에 따라 차이가 발생한다. em의 경우, 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 된다. 반면에 rem에서 r은 root, 즉 최상위 요소의 font-size 속성 값을 의미한다. HTML에서 최상위 요소는 <html> 이다. 따라서 rem의 경우, html요소의 font-size 속성 값이 기준이 된다.

예를 들어, 다음과 같이 html 요소의 font-size 속성 값이 16px이라고 가정해보자.

html {
	font-size: 16px;
}

그리고 다음과 같이 div 요소가 스타일링 된다면 width 속성의 값은 200px이 된다. 왜냐하면 em은 해당 요소의 font-size에 비례해서 커지기 때문에 div 요소의 font-size인 20px에 10을 곱해야 한다.

div {
	font-size: 20px;
    width: 10em; /* 200px */
}

만일, 해당 요소에 font-size 속성이 정의되지 않은 경우 부모의 font-size값을 그대로 상속받게 된다.

하지만 다음과 같이 em 대신에 rem단위를 이용해서 div요소가 스타일링 된다면 width속성 값은 160px이 된다. 왜냐하면 rem은 html 요소의 font-size가 16px이기 때문에, 16px에 10을 곱해야 한다.

div {
	font-size: 20px;
    width: 10rem; /* 160px */
}

다시 말해, rem 단위를 사용하면 해당 요소의 font-size 속성 값은 전혀 중요하지 않다.

4. em 단위가 중첩되는 경우

아래의 예제를 살펴보자.

<html>
    <header>
    		<div>
            </div>
    </header>
</html>

html {
	font-size: 16px;
}

header {
	font-size: 2rem;
}

div {
	width: 10em;
}

위의 상황에서는 div의 width가 어떻게 계산이 될까?

우선 div요소의 width 속성은 10em 이다. 하지만 해당 div에 font-size 속성이 없기 때문에, 부모의 font-size값을 상속받게 되는데, 부모인 header의 font-size는 2rem이다. 따라서 최상의 요소의 font-size인 16px에 2를 곱한 32px이 될 것이다. 따라서 div의 width는 부모의 font-size인 32px에서 10em단위를 적용하기 때문에 320px으로 계산이 될 것이다.

5. 그럼 em과 rem중 어떤걸 사용해야 할까?

많은 CSS 가이드들이 em을 사용해야만 하는 타당한 이유가 없는 경우라면 가급적 rem을 우선적으로 쓰도록 권고하고 있다.(특히 초보자들에게) 왜냐하면 em의 경우 위의 상황에서 보았듯이 실제로 몇px로 변환될지에 영향을 주는 변수가 많아지기에, em을 사용해서 스타일된 요소의 경우 재사용이 어렵고 유지보수가 힘들어지는 경향이 있기 때문이다.

#References

https://brunch.co.kr/@jihoonleeh9l6/32

https://www.daleseo.com/css-em-rem/

저작자표시

'FrontEnd > CSS' 카테고리의 다른 글

[CSS] 웹 개발에서 피해야 할 10가지 공통 CSS 실수 (0)	2024.01.18
[CSS] vw와 vh이 무엇인가? %와의 차이점은? (0)	2022.05.08
[CSS] Table tbody에 스크롤 적용하기 (0)	2022.05.02
::before와 ::after (가상요소)는 무엇일까? (0)	2022.04.18

현재글[CSS] 상대 단위(em, rem)

범데이의 개발노트 📄