[CSS] rem과 em

less than 1 minute read

CSS의 단위는 상대 단위와 절대 단위가 있다.

상대 단위는 rem, em, %, vw, vh 등이 있고,

절대 단위는 px, pt 등이 있다.

오늘은 rem과 em을 알아보자.

공통점

rem과 em의 공통점은 font-size 에 따라 크기가 결정된다는 것이다.

만일 font-size 가 20px 이라면,

10rem, 10em은 200px이다.

반대로 font-size 가 10px 이라면,

10rem, 10em은 100px이다.

하지만, 결정적인 차이가 있다.

바로, rem 은 최상위 요소의 font-size 를 기준으로 한다.

(rem에서 r은 root를 의미하고, HTML에서 root는 <html>이다.)

만약,

html {
  font-size: 20px;
}

위와 같이 html의 font-size 가 20px이라면, 1rem은 20px이다.

하지만,

div {
  fonst-size: 10px;
  heigh: 1em;
}

위와 같이 div 내에서 em이 쓰인다면, div의 font-size 인 10px에 따라

1em은 10px이 된다.

하지만,

div {
  font-size: 10px;
  height: 1rem;
}

위와 같이 div의 font-size 가 10px이더라도, rem은 <html>의 font-size를 따르므로,

1rem은 20px이 된다.