[HTML, CSS] em 과 rem 의 차이

글꼴 사이즈를 정할 때,

절대 단위 (px, pt)와 상대단위 (%, em, rem, ch, vw, vh등) 정한다.

 

 

em과 rem 의 공통점

CSS의 font-size 속성 값에 비례해서 결정되는 상대 단위

 

차이점

 

html 요소의 font-size 속성 값이 16px 이라고 가정

html {
     font-size: 16px;
}

em

최상위 요소의 기준이 되는 값(html태그의 font-size값)을 지정된 배수로 변환해 표현한 크기

div {
   font-size: 20px;
   width: 10rem;  /* 160px*/
}
rem은 html 요소의 font size가 16px 이기에 16px*10(width)= 160px

 

rem

 

현재 요소의 기준이 되는 값(html태그의 font-size값)을 지정된 배수로 변환해 표현한 크기

div {
   font-size: 20px;
   width: 10em;  /* 200px*/
}
rem은 해당요소의  font size가 20px 이기에 20px*10(width)= 400px

 

em은 실제 몇 px 로 변환될지 영향을 주는 변수가 많고, 재사용이 어려워 유지보수가 힘들어지는 경향이 있다.

그래서 rem 사용 권고한다.