[CSS] rem 과 em 의 차이를 간단히 알아보자

HTML 에서 CSS 를 이용해 폰트나 마진, 패딩 등의 크기를 지정할 때 정확한 px 로 지정할 수도 있지만, 상대적인 값을 표현해주는 단위인 rem 이나 em 을 사용하기도 합니다.

그런데 이 rem 과 em 이 표현하는 내용이 가끔 헷갈릴때가 있어 정리해둡니다.

rem

rem 의 개념은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미합니다. 여기서 기준이 되는 값은 최상위 요소(보통은 html 태그)에서 지정된 font-size 의 값을 이야기 합니다.

예를 들어 기준이 되는 값, 즉 html 태그의 font-size 값이 이 16px 라면 2rem 은 32px 을 의미합니다.

html { font-size: 16px; }
div { 
	font-size: 1.5rem; /* 24px */
	margin: 2rem /* 32px */
	padding: 1.25rem /* 20px */
} 

em

em 의 개념은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미합니다. 여기서 기준이 되는 값이란 현재 스타일 지정 요소의 font-size 값을 의미합니다.

예를 들어 기준이 되는 값, 즉 현재 요소의 font-size 값이 16px 이라면 2em 은 32px 을 의미합니다.

div { font-size: 16px; }
div { 
	font-size: 1.5em; /* 24px */
	margin: 2em /* 32px */
	padding: 1.25em /* 20px */
} 

차이점

차이점을 간단하게 이야기 하자면 rem 이과 em 은 기준이 되는 값이 다르다는 것입니다. rem 은 최상위 태그의 font-size 값이 기준이며, em 은 현재 요소의 font-size 값이 기준이라는 것입니다. 만약 em 을 사용해 스타일을 지정한 요소에 따로 font-size 값이 지정되지 않았다면, 해당 요소는 부모요소로 부터 font-size 값을 상속(inherit) 받을 것이며, em 은 그 상속 받은 값을 기준으로 삼게 됩니다.

예를 들어 이와 같은 경우를 생각 해봅시다. 최상위에 html 태그가 있고, 그 밑에 body 태그로 본문 영역이 표시 되며, container 라는 클래스를 가진 div 요소 하위에 content1 과 content2 라는 클래스의 div 요소가 자리 잡고 있습니다.

html { font-size: 16px; }
body { font-size: 2em; }
div.container { font-size: 2em; }
div.content1 { font-size: 2rem; }
div.content2 { font-size: 2em; }

이 경우 content1 의 font-size 는 32px 이지만, content2 의 font-size 는 16px * 2 * 2 * 2 이므로 128px 로 지정됩니다.

둘의 차이를 정확해 이해 하지 못하고 있으면, 웹페이지를 스타일링 하면서 절대 풀리지 않는 숙제에 빠진다거나 곤란한 상황에 처할 수 있으니, 반드시 숙지해야겠습니다.