개발일지

px, em, rem의 차이점은?

• px: 모니터의 픽셀, 즉 점의 갯수와 일치하며 절대적인 값입니다.
  모니터의 크기와 관계없이 픽셀은 동일하지만, OS에 따라 표시 방식이 달라질 수 있습니다.

• em: 부모 요소의 픽셀을 기준으로 한 상대값입니다.
  예를 들어, 부모 요소의 폰트 사이즈가 18PX 이라면 자식 요소의 em 값은 1em이 됩니다.
  부모 요소의 폰트 사이즈가 18PX 이라면, 자식 요소의 0.5em 은 9px이 됩니다.

• rem: root em의 약어입니다. 기본적으로 em과 동일하지만, 기준점이 html이라는 점이 다릅니다.
  예를 들어, html 요소의 폰트 사이즈가 18PX 이라면, 자식 요소의 em 값은 1rem이 됩니다.
  html 요소의 폰트 사이즈가 18PX 이라면, 자식 요소의 0.5rem 은 9px이 됩니다.

See the Pen px, em, rem by cinos (@shoveller) on CodePen.