CSS em과 rem

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

최상위 요소(보통은 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 */
}