em, rem 이란?

css의 상대단위로서 어떠한 기준에따라 값이 상대적으로 변하는 폰트 단위이다.
그 기준이 em은 부모값에 따라 적용되며, rem은 root 즉 html의 값에 따라 적용된다.

em

.parent{
	font-size:20px;
}
.child{
	font-size:0.5em; // 10px로 적용된다.
}

rem

.parent{
	font-size:20px;
}
.child{
	font-size:0.5rem; 
    // *html의 기본값은 16px이다. 따라서 16px의 0.5인 8px이 적용된다
}

😄 rem, em을 알아보았는데 컴포넌트 단위로 쪼개서 사용할 경우 부모요소가 바뀌는 케이스가 무수히 많다. 그래서 em을 사용할 경우 폰트사이즈가 부모요소에 따라 바뀔수 있고, em은 폰트사이즈를 직관적으로 알기 어렵다. rem은 root html에따라 폰트사이즈를 직관적으로 알 수 있고, 컴포넌트 단위로 쪼개더라도 폰트사이즈에 별다른 이슈는 발생하지 않는다.