[CSS] 길이 단위 총정리 (em, rem, %, vh, px 등등)

상대 길이 단위(글꼴 기준)

em과 rem은 사용자가 글꼴 크기를 늘려도 페이지의 수직 흐름을 유지하는, 확대 가능한 레이아웃을 만들기 위해 많이 쓰인다.

• em: 부모요소의 폰트 사이즈에 대한 상대값. 부모요소의 폰트 크기가 정해져 있지 않다면 1em = 16px

• rem(root em): 최상위 root(요소)의 글꼴 크기에 대한 상대값. em과 달리 문서 전체에서 일관적인 크기를 가진다. 폰트 사이즈 이외에도 크기를 나타낼 때 쓰인다.

• %: 부모 요소를 기준으로 한 비율 표현. ex. 부모 요소의 폰트 사이즈가 10px이라면 font-size: 200%;(==20px)이다

• ch: "0"의 너비를 기준으로 하는 상대값.

• ex: 소문자 "x"를 기준으로 한 상대값. 많은 글꼴에서 1ex는 0.5em의 값과 비슷하다.

• ic: 水(물 수)문자를 렌더링할 때 사용하는 글꼴에서의 너비를 기준으로 한 값

• cap: 영어 대문자의 평균 높이값을 기준으로 한 값.

• lh: line-heigth를 가지고 있는 요소의 경우, line-height의 계산값을 절대길이로 변환한 값이 기준.

• rlh: 루트 요소(보통)의 line-height를 절대 길이로 변환해 나타낸 값.

상대 길이 단위(브라우저 창:viewport 기준)

뷰포트 길이는 @page 선언 블록에서는 유효하지 않다.

• vh: 사용자 창 높이의 1%에 비례.

• vw: 사용자 창 너비의 1%에 비례.

• vmin: 사용자 창 높이와 너비사이 최솟값의 1%에 비례.

• vmax: 사용자 창 높이와 너비사이 최댓값의 1%에 비례.

  (IE 9-11에서는 제대로 지원되지 않으므로 주의)

절대 길이 단위

절대길이 단위는 프린트 등 출력 수단의 크기를 알 수 있을 때의 물리적 측정 거리를 나타낸다.
구현은 어떤 단위를 물리적인 실제 거리에 맞춰 기준으로 삼고, 나머지 단위를 상대적으로 계산해 설정한다.
기준 단위는 화면 등 저해상도 장치와 프린터 등 고해상도 장치에서 다르다.

(주의) 절대 길이는 사용자 에이전트의 기본 크기 설정을 따르지 않기 때문에 접근성 문제를 유발할 수 있다.

따라서 폰트 사이즈를 설정할 때는 em, rem등 상대길이가 권장된다.

• px: 1 픽셀. 화면에서는 전통적으로 하나의 장치 픽셀(점)을 의미했지만, 프린터나 고해상도 화면에서는 1/96 in을 맞출 수 있도록 여러 개의 장치 픽셀을 의미.

• 그 외) cm, mm, Q, in, pc, pt