rem과 em의 차이는?

HTML 에서 CSS 를 이용해 폰트나 마진, 패딩 등의 크기를 지정할 때 정확한 px 로 지정할 수도 있지만, 반응형 웹에서는 px보다 상대적인 값을 표현해주는 단위인 rem 이나 em 을 사용하는 것이 좋은데요. 헷갈리는 rem과 em의 차이를 알아봅시다.

rem

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

html { font-size: 16px; }

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

기준이 되는 값인 html의 font-size 값이 16px이니까 2rem은 16 x 2를 해서 32px인 것입니다.

em

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

div { font-size: 16px; }

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

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

차이점

rem과 em은 기준이 되는 값이 다릅니다. rem은 최상위 태그의 font-size 값이 기준이고, em은 현재 요소의 font-size 값이 기준입니다.

만약 em 을 사용해 스타일을 지정한 요소에 따로 font-size 값이 지정되지 않았다면, 해당 요소는 부모요소로 부터 font-size 값을 상속 받게되고 em은 상속 받은 값을 기준으로 삼게 됩니다.