CSS의 길이 단위 중 상대적으로 크기를 정하는  em과 rem에 대해 정리하고자 한다.

해당 요소의 글꼴 크기를 1em으로 사용하지만 만약 해당 요소의 폰트 크기 가 없으면 부모 요소의 글꼴 크기를 1em을 갖는다.

HTML 최상위 요소인 <html>font-size 속성 값이 기준으로 html 글꼴 크기를 1rem으로 사용한다.

px 값을 rem으로 바꾸면 계산이 어렵고 사용자 접근성 옵션(accessibility options)을 고려해 10px로 바꿔주는  

를 설정하기도 한다. ( 고정 10px 로 적용되어 있을 경우에는 접근성 옵션이 적용되지 않는다. )

html {
  /* 62.5% of 16px browser font size is 10px */
  /* 16px * 0.625 = 10px */
  font-size: 62.5%;
}

PX to EM 으로 계산 해주는 사이트 

PX to REM 으로 계산 해주는 사이트 

CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정한다.

em 단위와 rem 단위의 차이