[CSS] 속성 값의 크기 단위

 

CSS에서 크기의 단위는 문서매체의 종류 ( 인쇄물 / 웹 )에 따라서 달라진다.

 

- 인쇄용 : in(인치), cm, mm, pt, pc(파이카) 등

- 웹용 : px, %, em, rem 등

 

HTML5에서 rem, ch와 vw, vh, vmin, vmax가 추가되었다.

 

절대 크기 단위

일반적으로 항상 동일한 크기로 간주되는 단위.

 

단위	이름	다음과 동일
in	인치	1in = 2.54cm
cm	센티미터	1cm = 37.75..px
mm	밀리미터	1mm = 0.1cm
pc	파이카	1pc = 16px
px	픽셀	1px = 0.0104...in

 

상대 크기 단위

상대 크기  단위는 다른 요소의 영향을 받는다. 텍스트나 다른 요소의 크기가 다른 것에 비례하여 조정될 수 있도록 할 수 있다는 이점이 있다.

 

단위	관련 사항
em	부모 요소에 영향을 받는 단위.
rem	루트 요소에 영향을 받는 단위.
ch	요소 글꼴의 glyph "0"의 사전 길이
vw	viewport 너비의 1%.
vh	viewport 높이의 1%.
vmin	viewport의 작은 치수의 1%.
vmax	viewport의 큰 치수의 1%.

 

px

- px은 화소 단위이다. 1px = 화소 1개를 뜻한다.

- 디바이스 해상도에 따라 상대적인 크기를 갖아 디바이스 별로 픽셀의 크기가 제각기 다르다. 대부분의 브라우저는 1px을 1/96인치의 절대단위로 인식한다.

 

%

- %는 백분율의 상대 단위이다. 

- 부모 요소의 크기를 상속받아 영향을 받는다.

- 요소의 font size를 백분율로 설정할 경우, 부모 글꼴 크기에 대한 백분율이 되며 width 값에 백분율을 사용할 경우, 부모 너비의 백분율이 된다.

 

em

- em은 배수 단위로 상대 단위이다.

- 부모 요소의 크기에 영향을 받는다.

- 중첩된 자식요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미치기 때문에 복잡해질 수 있다.

- 폰트 사이즈 설정이나 콘텐츠를 포함하는 컨테이너 크기 설정에 사용하면 상대적인 설정이 가능하다.

 

See the Pen em by k (@kjwboa) on CodePen.

 

기본 font size가 16px 일 때,

.grandparent의 font size가 1.2em면 부모 요소의 font size 16px에 1.2를 곱해서 나온 값, 19.2px이 font size가 된다.

.parent의 font size가 1.5em면 부모 요소인 .grandparent의 font size 19.2px에 1.5를 곱해서 나온 값, 28.8px이 font size가 된다.

.child의 font size가 2em면 부모 요소인 .parent의 font size 28.8px에 2를 곱해서 나온 값, 57.6px이 font size가 된다.

 

rem

- rem은 상대 단위로, 최상위 요소(html)의 크기를 기준으로 삼는다.

- 폰트 사이즈 뿐만이 아니라 콘텐츠의 크기에 따라 가변적으로 대응해야하는 컨테이너 등에 적합하다.

 

See the Pen rem by k (@kjwboa) on CodePen.

 

html의 font-size가 16px,

.grandparent의 font-size가 1.2rem일 때, 16px *1.2 = 19.2px이 font-size가 된다.

.parent의 font-size가 1.5rem일 때, 16px *1.5 = 24px이 font-size가 된다.

.child의 font-size가 1.2rem일 때, 16px *2 = 32px이 font-size가 된다.

 

단순히 최상위 요소를 기준으로 삼기때문에 em처럼 자식요소가 중첩되어도 계산이 복잡해지지 않는다.

 

Viewport 단위

반응형 웹에서 화면의 크기에 동적으로 대응하기 위한 단위이다.

 

- vw : viewport 너비의 1%

- vh : viewport 높이의 1%.

- vmin : viewport의 작은 치수의 1%

- vmax : viewport의 큰 치수의 1%.

 

vw와 %의 차이

반응형 웹에서 크기에 동적으로 대응하기 위한 단위로 %도 많이 이용한다.

하지만 %는 em과 마찬가지로 상속에 의해 부모 요소의 영향을 받는다.

그에 반해 viewport 단위는 무조건 viewport를 기준으로 한다.

 

See the Pen % vs vw by k (@kjwboa) on CodePen.

 

width가 70%인 .parent는 부모요소인 .grandparent의 크기의 70% 너비를 가지며

width가 80vw인 .parent_vw는 부모요소인 .grandparent와 상관없이 보여지는 화면 (viewport)의 80%의 너비를 가진다.