크기 단위

크기 단위에는 일상에서 사용하는 cm, inch 등도 있지만, 대표적으로 px, %, em, viewport를 사용한다. px는 절대값이고, 나머지는 상대값이다.

(1) px

px는 pixel(pictures elements, 화소)을 표현하는 단위로, 모니터의 해상도를 표현한다. 내 노트북의 현재 해상도는 1920 * 1080으로, 2,073,600 화소를 가지고 있다.

물론 장치에 따라 상대적인 해상도를 갖기 때문에 '대부분의 브라우저는 1px을 1/96 인치의 절대단위로 인식'한다.

웹 문서 내에서 px은 요소의 크기 지정에 사용한다.

(2) %

모두가 아는 것처럼 백분율로 상대적인 크기를 나타낸다. 50%라면 부모 사이즈의 절반만큼의 크기를 가진다.

em

배수로 표현하는 상대 단위이다. 요소의 기본 사이즈가 14px일 때, 1em은 14 * 1로 그대로이고, 2em은 14 * 2로 두배가 된다.

단, 태그 요소에 적용 시 모든 자식 요소에 영향을 미치므로 주의가 필요하다.

기본 font-size가 10px지만, 중첩 요소의 영향으로 인해, 부모 div의 사이즈를 각 자식 div가 이어 받아 상위 크기에 2배하는 것을 볼 수 있다.

rem

em과 마찬가지로 배수이지만, root를 의미하는 r이 붙어있다. root는 html을 의미한다.

html에서 font-size: 14px를 지정했기 때문에 rem은 그것에 맞춰 크기가 변한다.

예시는 font-size지만, 다양한 프로퍼티에서 사용할 수 있다. 예를 들어, wrapper 요소에 적용해 콘텐츠 크기에 가변적으로 대응할 수 있다.

viewport 단위

viewport 단위는 화면에 보여지는 영역을 기준으로 한 상대적 단위이다.

단위	의미
vw	viewport width(너비)의 1/100
vh	viewport height(높이)의 1/100
vmax	viewport 너비와 높이 중 더 큰 쪽의 1/100
vmin	viewport 너비와 높이 중 더 작은 쪽의 1/100

viewport의 너비가 1000px, 높이가 600px라면 아래와 같은 값을 가진다.

1vw = 1000 1/100 = 10px
1vh = 600 1/100 = 6px
1vmax = 1000 1/100 = 10px
1vmin = 600 1/100 = 6px

---

참고
웹 프로그래밍 튜토리얼 poiemaweb