rem, em에 대한 정리

반응형의 시작, 상대적 font-size

1. em 단위

.box{
	font-size: 20px;
	.child{
		width: 0.5em;
	}
}

em은 px, % 와 같이 웹브라우저에서 사용되는 단위이다. child의 폭은 가장 가까운 root 즉, .box의 font-size에 따라, 10px이 되게 된다.

2. rem 단위

html {
	font-size: 16px;
}
.box{
	font-size: 20px;
	.child{
		width: 0.5rem;
	}
}

rem은 em과 달리 root의 font-size에 따라 변경된다. 따라서, 위와 같은 경우 child의 폭은 8px이 된다. 대부분의 브라우저의 default font-size는 16px이다.