상대 단위란 ?

px,pt와 같은 절대(absolute) 단위는 항상 고정된 값을 가지는 반면 em,rem과 같은 상대
(relative) 단위는 font-size에 따라 유동적으로 값이 변하는 단위를 말한다.

em과 rem의 차이점

기본적으로 em과 rem의 값이 계산되는 로직은 같다.
1em = 10px * 1 = 10px
2em = 20px * 2 = 20px
3em = 30px * 3 = 30px
4em = 40px * 4 = 40px

위와 같이 기준값에 따라 값이 변하며, 이는 em뿐만 아니라 rem도 같다.
그렇다면 em과 rem은 어떠한 것이 다를까 ? 

em의 기준값

em은 해당 요소의 font-size에 따라 변하는데 아래와 같다.

div{
 font-size : 10px;
 width : 2em; <-- 20px -->
}

만약 상위 div의 font-size가 20px이였다면 width의 값은 40px이 된다.

em 사용 시 만약 해당 요소에 font-size가 없다면 어떻게 될까 ?
만약 em 사용시 요소에 font-size가 없다면 해당 요소의 부모의 font-size를 참조한다.

rem의 기준값

rem의 r은 root를 뜻하는데 root,즉 rem은 최상위 요소의 기준값을 참고한다.
여기서 최상위 요소란 html을 말하며 아래와 같다

html {
 font-size : 15px;
} 일때

div{
font-size : 10px;
width : 2rem; <-- 30px -->
}

상위 div처럼 해당 요소에 font-size 10px이 선언되었음에도 width값을 rem으로 지정하였기 때문에
실질적인 width값은 root, 즉 최상위 요소인 html의 font-size를 기준으로 할당되는걸 알 수 있다.