HTML 단위: 글자 등의 크기를 지정하는 수치 단위 : px, pt, %, em 차이점

블로그나 웹페이지를 작성할 때, 글자나 줄간격 등의 크기를 수자로 지정하게 되는데, 이때 사용되는 단위로는 px(pixel), pt(point), %(percent), em 등이 있다.


수치 크기 단위 종류

px (Pixel / 픽셀) :
픽셀은 모니터에 가로/세로로 이루어진 하나의 격자(사각형)를 말한다. 모니터의 격자 간격을 픽셀피치라고 하며, 대체로 데스크탑 모니터 보다 노트북 모니터가 픽셀피치가 작고, 따라서 글자가 더 작게 보인다. 어쨋거나 1px은 격자 하나의 크기를 뜻한다.

pt (Point / 포인트):
포인트는 인치(inch)의 개념이고, 1인치(inch)는 2.54 센티미터(cm : centimeter)이다. 1pt는 72분의 1인치(1/72)를 말한다. 따라서, 포인트는 1pt~ 72pt까지 있다.

% (Percent / 퍼센트):
퍼센트는 백분율이며, 상위요소(부모요소, parent element)에 대한 상대적인 비율을 말한다. 즉, 50%는 부모요소 크기의 절반크기라는 뜻이며, 100%는 부모요소와 크기가 같다는 뜻이다.

em (이엠)
이엠은 현재 지정되어 있는 폰트에서 알파벳 대문자 "M"의 가로 너비를 기준으로 한 상대적인 크기를 배율로 표시하는 단위이다. 따라서, 기본적으로는 위의 퍼센트(%)와 같은 개념이다.

즉, 1em은 현재 지정되어 있는 글자 크기와 같은 크기를 뜻하고, 100%와 같은 결과가 된다. 0.5em은 현재 적용되어 있는 크기의 절반 크기를 뜻하고, 50%와 같은 크기가 되며,  1.5em은 현재 적용되어 있는 크기의 1.5배를 말하고, 150%와 같은 크기가 된다.

<> em 이 무엇의 약자인가에 대한 명확한 설명을 찾을 수 없다. 다만, "Equal to the width of the capital letter M / 대문자 M의 가로폭과 같다" 라고 설명하는 것에 비추어 볼 때 Equal의 e와 M을 합쳐 만든 것이 아닌가 추측할 따름이다. 

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...