[컴][웹] rem vs em

 

css 값 / font size / 폰트 사이즈

rem vs em

em 의 뜻

타이포그래피(typography) 분야에서 쓰는 unit(단위)이다. 현재 정의된 point size 와 같다. 16-point typeface 에서 1 em 은 16 points 가 된다.

ref. 3 에 보면 대략 유추할 수 있는데, em 은 그냥 발음 ‘엠’ 을 나타내는 듯 하다. 예전에 활자에서 ’M’의 너비를 ’단위’로 사용했어서 그런 듯 하다.

rem 의 뜻

rem 은 root em 이라고 한다.

html 에서 em 과 rem

em은 그래서 현재 font-size 에 대한 비율이라고 보면 된다. 예를 들어 1em은 현재 font-size 인 것이고, 2em 은 현재 font-size 의 2배가 되는 것이다.

rem은 그냥 항상 root 의 font-size 에 대한 비율이다. 여기서 root 는 html tag 이다. 그래서 이 html 에 정의한 font-size 를 기준으로 한 비율이다. 이 html tag 의 font-size 가 바뀌기 전까지는 항상 일정한 값을 유지하게 된다.

사용

ref.1 에서 잘 설명해준다. 그래서 실질적인 사용 팁을 주는데 다음과 같다.

1. font size 와 관련있는 값이라면 em을 사용하고,
2. 그외는 rem 을 사용한다.

Reference

1. REM vs EM – The Great Debate | Zell Liew
2. em (typography) - Wikipedia
3. What does CSS measurement unit ‘em’ actually stand for? - Stack Overflow