em,rem

em : 해당 요소 (element) 의 글꼴 크기를 1em 으로 사용.
rem : 루트 요소 (html) 의 글꼴 크기를 1rem 으로 사용.

em

em은 요소(element)의 글꼴 크기를 1em으로 가지며 해당 요소의 크기가 없다면 부모의 크기를 1em으로 해당한다.

rem

em에 비해 rem은 간단한 편. rem은 루트 요소인 html의 폰트 사이즈를 1rem으로 사용함.
따라서 중첩되는 경우에도 em과 달리 기준값이 변하지 않음.
html의 font-size가 10px 이라면 해당 html 내의 어떤 요소든 1rem = 10px임.

계산하기 쉽게 html 의 font-size를 10px로 맞춰놓고 사용하는 경우가 많음.
브라우저 기본 설정은 16px 인데 여기에 62.5% 를 곱해주면 10px로 맞춰놓고 시작할 수 있음.

html {
	font-size: 62.5%;
}

적절한 사용법

해당 요소가 폰트 사이즈에 따라서 padding과 margin,width 등 박스 모델의 너비를 계산하는 값이 바뀌어야 하는 경우에는 em을 사용할 수 있음.
-em의 가장 큰 단점은 자기 자신의 글자 크기를 참조하기 때문에 em을 사용하는 다른 속성 역시 글자 크기에 영향을 받을 수 밖에 없다는 점. 글자 크기는 상속이 기본 속성이기 때문에, 현재 대상의 글자 크기가 변하지 않더라도 부모의 글자 크기가 변하면 복잡해질 수 있어 필요한 곳에서만 사용하는 것을 추천.