em과 px은 어떻게 다른가 - CSS의 단위들

• ex

1ex는 폰트의 x-height를 말한다. 일반적으로 x-height는 폰트 사이즈의 절반. 아래 그림을 참고.

• pt

point. 1pt는 1/72 인치를 말한다. 프린터와 연계하여 사용할 수 있는 단위.

• pc

pica. 1pc는 12 points(12pt)와 같다.

• px

pixels. 픽셀. 컴퓨터 화면과 같은 스크린 매체에서 사용되는 고정된 크기의 단위. 1 px은 컴퓨터 화면의 점 한개와 같다.

• em

1em은 현재 지정된 폰트 사이즈와 같다. 2em은 현재 폰트 사이즈의 2배, 즉 200%를 의미한다. 예를 들어, 블로거 본문 폰트 사이즈가 12 픽셀이라면, '1em'은 12 픽셀, '.5em'은 6픽셀이다. 고정 단위인 px나 pt 등과 달리, em은 가변 단위이다. 가변성과 모바일 장치 친화적인 특성 때문에 점점 많이 쓰이고 있는 단위이다.

source : kyleschaeffer, w3schools, wikipedia