[CSS] rem | em 차이점

rem

rem은 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환된다. 보통 HTML tag에서 지정된 font-size가 기준이 되는데, 별도의 font-size를 설정하지 않은 경우에는 각 브라우저에서 기본적으로 설정되어 있는값을 상속받게 된다.

html {
  font-size : 10px; 
}
div {
  margin: 1.5em; /*대략 15px*/
}

em

rem은 기준이 되는 폰트 크기 하나로 고정되어 있는데, em은 어디서라도 기준이 바뀔 수 있기 때문에 복잡한 css를 가질 경우 변환될 크기를 예측하기 어렵다는 단점이 있습니다.

html {
  font-size : 15px
}

div .content {
  margin-left : 2em; /* 15px * 2  = 30px */
}

div .contentRem {
  margin : 2rem;  /* 15px * 2 = 30px */
}

div .contentEm {
  font-size : 2em;  /* 15px * 2 * 2 = 60px */
}

div .contentRem의 기준은 html의 폰트 사이즈 15px 이기 때문에 15px* 2 하여 30px 으로 출력이 된다.

div .contentEm의 기준은 div .parent의 2em인 15px * 2가 기준점이 되어 30px * 2인 60 px 된다.