[CSS] em, rem 알아보기

rem, em 은 요소의 크기를 결정해 주는 단위들입니다.

 

| rem

rem 은 최상위 요소의 폰트 크기를 기준으로 요소의 폰트크기를 정해줍니다.

html {
  font-size: 16px;
}

div {
  font-size: 1rem; /* 16px */
}

div {
  font-size: 2rem; /* 32px */
}

 

| em

em은 부모요소의 폰트 크기를 기준으로 요소의 폰트크기를 정해줍니다.

div {
  font-size: 30px;
}

div span {
  font-size: 1em; /* 30px */
}

div span {
  font-size: 2em; /* 60px */
}