px, em, rem, % 단위

px

기본적인 단위로 고정된 값

rem

페이지의 최상위 요소(root)의 폰트 사이즈를 기준으로 결정

최상위 요소(root)의 폰트 사이즈 * rem 단위

html {
	font-size: 10px;
}
div {
	width:3em;
}

div의 width는 10px*3=30px이 된다.

em

부모 요소의 폰트 사이즈를 기준으로 자식 요소의 크기가 결정

부모 요소 폰트 사이즈 * em 단위 

html {
	font-size: 10px;
}

div {
	width:3em;
    font-size: 20px;
}

div의 width는 20px*3=60px이 된다.

%

화면에서 차지하는 비중