[CSS] rem vs em

반응형 폰트 단위 rem & em

캡스톤 프로젝트에서 사용될 반응형 웹 사이트를 만들면서, 지금까지 rem과 em에 대한 정확한 이해를 하지 않은 채 무작정 사용하고 있었음을 깨달았다. 따라서 이번에 알게 된 rem과 em의 차이를 정리하려고 한다.

상대 단위

rem과 em을 이해하기 위해서는 상대 단위부터 알아야 하는데, 상대(relative) 단위란 어떤 기준에 따라 유동적으로 바뀌는 길이의 단위를 의미한다.
이와 반대로 절대(absolute) 단위는 어떤 상황에서든 변하지 않는 길이의 단위이다. 대표적으로 px이 절대 단위에 해당한다. rem이나 em은 브라우저가 특정 기준에 따라 계산하여 px로 변환해주는 것이다.

rem

rem은 웹의 최상위 요소인 html 크기에 비례하여 크기가 변경된다.
보통 html에 폰트 크기를 지정한 뒤, 필요한 요소에 사용한다.

html {
  font-size: 16px;
}

div {
  font-size: 1.125rem; // 18px
  margin: 2rem; // 32px
}

em

em은 상위 요소의 크기에 비례하여 크기가 변경된다.
rem과 다르게 여러 요소의 크기가 기준이 될 수 있다.

div {
  font-size: 16px;
}

div > p {
  font-size: 1em; // 16px
}