Responsive CSS Units

Absolute length units

px(pixels) (컴퓨터 화면에서 가장 작은 단위)

Relative length units

<div class='parent'>
	Parent
	<div class='child'>Child</div>
</div>

em : relative to parent element

.parent {
	font-size: 8em;  //16 * 8 = 128px
}

.child {
	font-size: 0.5em  //128 * 0.5 = 64px
}

rem : relative to root element

.parent {
	font-size: 8rem;  //16 * 8 = 128px
}

.child {
	font-size: 0.5rem  //16 * 0.5 = 8px
}

vw : viewport width

vh : viewport height

% : 부모요소에서 상대적으로 계산