글자 크기 계산 어려워... em과 rem 이해

em과 rem을 써서 css 코드를 작성하는 경우가 있었는데 사실 처음에는 어떤 차이인지 몰랐다. 둘다 부모요소한테 영향을 받는다고 생각했는데 조금의 차이가 있었다.
내가 이해한 내용은 em은 바로 자기가 감싸진 부모요소를 말하고 rem은 최상위 요소를 말한다. 최상위 요소가

html{
	font-size: 16px;
    }
#div1{
	font-size: 20px;
	width: 1em;
}
#div2{
	font-size: 20px;
    width: 1rem;
}

위의 코드 처럼 작성되어 있다고 하면 div1 안에 있는 폰트 사이즈는 1 x 20px = 20px이고 div2안에 있는 폰트 사이즈는 1 x 16px = 16px이된다.
그러니까 em은 rem보다 글자 수가 적으므로 더 하위에 있는 요소를 받는다고 생각하면 편하고 rem은 em 보다는 글자 수가 많으니까 최상위 요소를 받는 다고 생각했다.
em이 rem보다 영향을 받는 변수가 많아서 em보다 rem을 사용하는 것을 권장한다고 한다. 그래서 나중에 유지 보수할때도 rem을 쓰면 유지보수하기 편하다고 했다. 코드를 작성하는 것도 중요한데 나중에 유지보수하는 것도 중요하다고 생각한다. 한마디로 나같은 초보는 rem을 써서 실수를 줄이고 나중에 유지보수를 위해서 rem을 사용하자.