em과 rem

필자는 em과 rem이 정확히 어떻게 쓰이는지 모르고 그동안 써왔는데!

 

오늘 한가지 알게되었다.

 

rem 은 body에 font-size를 종속받아 비율이 결정된다

예를들어 body { font-size: 10px } 이라면  어떤 box의 margin을 1rem으로 주게된다면

margin이 상하좌우 10px씩 들어가고 2rem이라면 20px씩 들어간다.

 

자 그럼 em은?  해당 박스의 폰트사이즈이다.

body에 10px로 설정되어 있더라도 해당 박스의 font-size가 20px이라면

1em은 20px이고 2em은 40px이 되는 것이다.

 

mdn을 한번이라도 살펴봤다면 편했을텐데 ㅠㅠ