CSS 유닛(Unit) 단위와 픽셀과의 관계

CSS 에는 꽤 많은 유닛 단위가 사용됩니다.

모바일 기기, 또는 레티나(Retina) 디스플레이와 같은 고해상도 기기가 나오기 전에는 웹의 세상은 픽셀(px) 단위를 사용하는 것이 기본이었습니다.

그리고 CSS 규격에는 96ppi(Pixel per inch) 라는 실제 크기에 대한 픽셀의 갯수도 정해져 있었습니다.

우리가 사용하는 픽셀 단위의 CSS 크기 단위는 1인치 너비에 96개의 픽셀이 들어가는 것을 기준으로 하고 있습니다.

모니터 크기나 해상도에 따라 96픽셀에 대한 실제 크기는 달라지지만, 규격은 어쨋든 그렇게 정해져 있습니다.

 

레티나 디스플레이나 고해상도 모니터가 일반화 되면서 픽셀 단위로는 다양한 기기에 대한 웹 표현이 어려워지면서 여러가지 CSS 단위들이 추가되었습니다.

 

em. rem, fr, %, vw, vh, ex, ch 등이 현재 CSS 에서 사용 가능한 상대 크기 유닛 단위들 입니다.

 

이들 단위들은 기준 대상에 대한 상대 크기로 단위를 표현하기 때문에 인치 단위에 대한 환산이 바로 되지 않습니다.

상대 크기에 따른 픽셀 값을 먼저 구하게 되고, 대상 기기의 ppi에 따라 픽셀 값을 절대 크기(인치당 픽셀)로 환산하게 됩니다.

 

그리고 우리가 사용하는 웹 브라우저는 운영체제 해상도에 따라, 또는 웹 브라우저의 자체적인 해상도 인식에 따라 배율을 적용해 웹 페이지를 표시합니다.

예를 들어 윈도우OS 에서 고해상도 화면을 위해 150% 배율로 윈도우 화면을 표시하는 경우 웹 브라우저도 150%로 웹 페이지를 표시하게 됩니다.

이럴 경우 우리가 아는 인치당 픽셀은 1.5배가 됩니다.

 

오래전(그래봐야 몇 년전)에는 16px로 정한 글자 크기가 고해상도 화면에서는 그만큼 더 작게 보이는 것이 일반적이었지만, 운영체제와 웹 브라우저가 고해상도 화면에 대응하는 배율 표현에 대응을 하면서 더 이상 16px 글자가 고해상도 기기에서 무조건 더 작게 보일 것이라는 가정은 할 수 없게 되었습니다.

 

즉, 인치당 픽셀수 기준으로 단순 환산하는 방식으로는 더 이상 글자의 정확한 실제 크기를 알 수가 없습니다.

그래서 웹 브라우저의 기본 크기 설정 값에 대한 상대적인 크기를 사용하는 em, rem과 같은 단위를 사용하는 것을 권장하고, 또 그렇게 바뀌어 가고 있는 것입니다.

 

고해상도 레티나 기기에 대응해 운영체제가 200%의 배율을 적용한다면, 웹 브라우저 또한 200%의 배율로 웹 페이지를 보여줄 것이고, 우리가 "1em" 으로 정한 글자 크기는 일반 데스크탑 웹브라우저 화면의 기본 글자 크기인 "16px" 가 아니라 "32px" 크기로 정해지게 됩니다.

 

200% 배율이 적용된 고해상도 레티나 디스플레이가 CSS 기본 규격인 96ppi 의 2배인 192ppi 화면이라면 실제로 예상되는 크기와 거의 비슷한 실제 인치 크기로 글자가 표현 되겠지만, 240ppi 해상도인 화면이라면 글자 크기는 약 20% 정도 작게 표시가 될 것입니다.

실제로는 250% 배율로 표시되어야 겠지만, 운영체제에 따라서는 사용자가 배율을 임의로 조정할 수도 있기 때문에 고해상도 디스플레이에 대한 대응은 어디까지나 운영체제, 또는 웹 브라우저가 정하는 바에 따라 표현되는 것이기 때문에 CSS에서 이런 배율 부분을 고려할 필요는 없습니다.

 

CSS는 정해진 규격에 따라 상대 유닛 단위로 표현을 하면 되므로 상대 유닛 단위에 대해 먼저 알아보겠습니다.

 

유닛 단위	설명	예
em	부모 요소의 크기에 대한 자신의 상대 크기를 정합니다. 1은 같은 크기입니다. 글자 크기에 적용할 경우 부모 요소의 글자 크기에 대한 상대 크기를 배율로 표시합니다. 글자 크기를 0.875em으로 선언했을 때, 부모 요소의 글자 크기가 16px 인 경우 글자 크기는 14px가 됩니다. 글자 크기를 정하는데 많이 사용될 뿐 글자 크기에 제한된 단위는 아닙니다.	p{   line-height: 1.2em;   font-size: 1.2em; }
rem	루트 요소의 크기에 대한 자신의 상대 크기를 정합니다. 1은 같은 크기 입니다. 글자 크기에 적용할 경우 루트 요소의 글자 크기에 대한 상대 크기를 배율로 표시합니다. DOM 트리가 깊어질 경우 em 단위만으로는 처음의 기본 크기를 표현하기 어려운 경우 상대 크기를 초기화하기 위해 사용할 때 유용합니다. 글자 크기를 0.625rem으로 선언했을 때 루트 요소의 글자 크기가 16px(웹 브라우저의 기본 글자 크기) 인 경우 글자 크기는 10px가 됩니다.	h1{   line-height: 1.25rem;   font-size: 1.5rem; }
%	부모 요소의 크기에 대한 자신의 상대 크기를 정합니다. em 단위와 같은 방식으로 크기가 상대값으로 정해지며, 퍼센트 값으로 표현하는 차이만 있습니다.	div{   width: 100%;   height: 50%; } span{   font-size: 82.5% }
fr	fraction 의 약어. 그리드 셀을 배분하는 비율을 표시하는 용도로 사용합니다. 그리드(Grid) 셀이 차지하는 영역을 배분하는 전용 단위 표시입니다.	.grid{   grid-template-columns: 1fr 1fr 2fr; }
vw, vh	vw(Viewport Width), vh(Viewport Height) 의 약어입니다. 뷰포트 너비/높이에 대한 상태 크기를 표현하는 단위로, 1wh는 뷰포트 너비의 1%가 됩니다. 뷰포트 크기에 대한 % 표현을 단위화 한 것입니다. 뷰포트 크기를 기준으로 내부 요소들의 크기를 상대적으로 정해야 할 때 사용합니다.	.sidebar{   width: 20vw; }
ex	현재 글꼴의 소문자 "x" 문자의 높이를 1ex로 표현합니다. 글꼴 별로 다른 글자 높이에 대해 대응하기 위해 만든 단위로, 글꼴 별로 자간, 줄간, 인라인 이미지 위치를 맞춰서 좀더 가독성 높은 텍스트 표현을 위해 만들어진 단위입니다. 웹에서의 사용 효용성에 대한 논란이 있는 단위로 현재는 사용되고 있지 않습니다.	p{   letter-spacing: 0.25ex; }
ch	Character의 약어. 현재 글꼴의 "0"(숫자 0) 문자의 너비를 1ch로 표현합니다. 자간이 고정된 고정간격 글꼴에서 자간 등의 스타일을 정의할 때 상태 크기를 정의하기 위해 제한적으로 사용합니다. 거의 사용되지 않습니다.	span{   letter-spacing: 1ch;   line-height: 1.25ch; }

 

웹에서는 사용하지 않지만 in, cm, pc, pt와 같은 절대 크기 유닛 단위들도 사용할 수 있습니다.

그리고, 절대 유닛은 다음과 같이 픽셀 단위로 환산됩니다.

우리가 사는 디스플레이의 세상은 미국 표준 단위인 인치 단위를 기준으로하는 세상이며, 인쇄 단위 또한 인치를 기준으로하는 상대 단위인 포인트를 기준으로 하고 있습니다.

CSS의 표준은 1인치에 96픽셀이 들어가는 것을 기준으로 하고 있으며, 인쇄 표준인 포인트(Points)는 1인치에 72개의 점이 들어가는 것을 기준으로 하고 있습니다.

CSS는 웹에서만 사용하는 것이 아니기 때문에 다음과 같이 환산되는 CSS 환산 크기도 알아둘 필요가 있습니다.

 

절대 유닛 단위	픽셀 환산
인치(inch)	96px = 2.54cm = 1inch
센티미터(cm)	96/2.54
파이카(picas, pc)	96/6
포인트(points, pt)	96*1/72
픽셀(pixels, px)	1px = 1/96inch

 

CSS Level 3 단위 표준에 대한 자세한 정보는 다음 문서를 참고하시기 바랍니다.

 

www.w3.org/TR/css3-values/

CSS Values and Units Module Level 3