절대적인 값(Absolute)

상대적인 값(Relative)

em

relative to parent element 로 부모 태그에 지정된 폰트 사이즈를 기준으로 자식 요소에 지정된 em을 곱한 값이다.

/* 기본 html font-size는 16px */
div.parent {
	font-size: 8em; /* 16px * 8 = 128px */
}

div.child {
		font-size: 0.5em; /* 128px * 0.5 = 64px */
}
/* 부모 font-size: 16px 이면 자식 font-size: 8em -> font-size: 128px 이다. */
/* 부모 font-size: 128px 이면 자식 font-size: 0.5em -> font-size: 64px 이다. */
/* (부모 font-size) * (자식 X em) = (자식 font-size) */
/* 1em == 100%, 8em == 800% */

/* html font-size: 100% 로 변경하면 em으로 지정된 자식 요소들의 폰트 크기를
   유동적으로 변경할 수 있다. */

rem

relative to root element 로 rem 단위를 쓰면, 변환된 픽셀 크기는 페이지 최상위(root) 요소, 그러니까 html 요소의 폰트 크기가 기준이 됩니다. 이 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 바로 마지막 변환된 값입니다.

html {
	font-size: 16px; /* 기본 html font-size는 16px */
	padding: 10rem;
}

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

<aside> 💡 *letter-spacing, line-height 의 em은 부모 태그가 아닌 해당 태그의 font-size 의 크기를 기준으로 em를 곱한 값이다. 즉, 간격이 해당 태그의 글꼴 크기를 기준으로 유지됩니다.*

</aside>

vw

현재 보여지는(Viewport) 브라우저의 너비 만큼 유동적으로 지정하는 것을 의미한다.