px

• 가장 기본적으로 사용되는 단위
• 화소 1개의 크기를 의미한다. ( 22인치 LCD= 1680*1050 )
• 디바이스 해상도에 따라 상대적인 크기를 갖는다. ( 디바이스 별 제각각 )

em

• 유연한 가변 단위
• 스타일을 지정한 요소의 폰트 크기를 곱해 픽셀로 변환 된다.
  (상위 요소가 아닌 실제 사용된 요소의 폰트 크기와 직접 관련)
• 과거 zoom기능이 없던 브라우저에서 브라우저 글꼴 크기 옵션을 조절 했을 때 동작하는 것이 목적이었다 --> 요즘 브라우저는 모두 zoom기능이 있다. --> 잘 사용하지 않는다!

.emTest{
   font-size: 16px;
   padding: 1em; // 해당 요소의 font-size와 곱해지므로 16px이 된다.
}

rem

• 유연한 가변 단위
• 페이지 최상위(root)요소 즉, html 요소의 폰트 크기를 곱해 픽셀로 변환된다.

html{
   font-size: 18px;
   padding: 1rem; // root요소인 html의 font-size와 곱해지니까 18px이 된다.
}

em 과 rem의 차이

결국 em과 rem은 px값으로 변환할 때 고려하는 결정 요인이 다르다!
em -> 지정한 요소의 폰트 크기
rem -> 페이지 최상위(root)요소의 폰트 크기