CSS <length> 자료형: 길이

CSS <length> 자료형은 길이를 나타내며, width, height, margin, padding, inset, font-size 등 다양한 속성의 값으로 사용합니다.

일부 CSS 속성에서는 <length>를 받을 수 있는 곳에 <percentage>도 사용할 수 있지만, <percentage>는 <length>와 다른 별도의 자료형입니다. <length-percentage>를 참고하세요.

구문

<length> 자료형은 <number>와 그 뒤의 단위로 구성됩니다. 다른 모든 CSS의 수치와 마찬가지로 수와 단위 리터럴 사이에 공백이 있어선 안됩니다. 수가 0일 땐 단위를 붙이지 않아도 됩니다.

일부 속성은 음의 <length>를 허용하지만, 모든 <length>를 사용하는 속성이 음수를 받을 수 있는 것은 아닙니다.

길이의 지정 값(“지정 길이”)은 크기와 단위를 사용해 표현됩니다. 길이의 계산 값(“계산 길이”)은 지정 값을 절대 길이로 변환한 값으로, 단위를 구별하지 않습니다.

<length>의 단위는 크게 상대 단위와 절대 단위 두 범주로 나뉩니다. 상대 단위는 어떤 다른 단위를 기준으로 삼아 길이를 표현합니다. 상대 단위의 정확한 기준은 단위에 따라 다른데, 어떤 특정 문자의 크기, 줄 간격, 뷰포트 크기 등을 사용합니다. 상대 단위를 사용하면 다양한 출력 환경에 더 쉽게 대응할 수 있습니다.

자식 요소들은 부모의 상대 길이 값을 지정한 그대로 상속하지 않고 계산 값, 즉 절대 길이로 상속합니다.

글꼴 상대 길이 단위

글꼴 상대 길이는 현재 요소에 적용된 글꼴의 특성 값이나 어떤 특정 문자의 크기를 기준으로 <length> 값을 정의합니다.

글꼴 상대 길이 단위, 특히 em과 rem은 사용자가 글꼴 크기를 변경하더라도 페이지의 수직 흐름을 유지하는 유연한 레이아웃을 만들 때 자주 사용합니다.

cap: 요소 글꼴의 대문자 높이(cap height)를 나타냅니다.
ch: 요소 글꼴에서 문자 0(숫자 0, Unicode U+0030)의 “진행 척도”(advance measure)를 나타냅니다. 진행 척도란 요소의 인라인 방향에 따라 어떤 문자가 차지하는 너비(가로쓰기) 또는 높이(세로쓰기)를 말합니다. 문자 0의 진행 척도를 알아낼 수 없거나 알아내기 어려운 경우, 너비로는 0.5em, 높이로는 1em으로 취급합니다.
em: 요소 font-size 속성의 계산 값을 나타냅니다. font-size 속성에 em 단위를 사용하는 경우 상속받은 font-size 값을 나타냅니다.
ex: 요소 글꼴에서 문자 x의 높이를 나타냅니다. x를 포함하는 글꼴에서는 보통 다른 알파벳 소문자의 높이와도 같으며, 많은 글꼴에서 1ex ≈ 0.5em입니다.
ic: 요소 글꼴에서 문자 水(CJK 물 한자, Unicode U+6C34)의 “진행 척도”(advance measure)를 나타냅니다. 진행 척도의 정의는 ch 단위의 설명을 참고하세요.
lh: 요소 line-height 속성의 계산 값을 나타냅니다. lh 단위를 사용하면 이상적인 상황에서 줄 수에 따른 높이 계산이 가능하지만, 실제 줄 높이는 콘텐츠에 따라 달라질 수 있습니다.

루트 요소 글꼴 상대 길이 단위

루트 요소 글꼴 상대 길이는 루트 요소에 적용된 글꼴의 특성 값이나 어떤 특정 문자의 크기를 기준으로 <length> 값을 정의합니다. 루트 요소는 보통 <html> 요소를 가리킵니다.

rcap: cap을 참고하세요.
rch: ch를 참고하세요.
rem: em을 참고하세요. 브라우저 기본 설정에서는 보통 16px과 같지만, 사용자 설정에 따라 달라질 수 있습니다.
rex: ex를 참고하세요.
ric: ic를 참고하세요.
rlh: lh를 참고하세요.

뷰포트 상대 길이 단위

뷰포트 상대 길이 단위, 또는 뷰포트 백분율 길이 단위는 뷰포트의 네 가지 크기, 즉 소형, 대형, 동적, 기본 크기에 기반한 길이입니다. 뷰포트의 크기 종류가 다양한 이유는 브라우저, 특히 모바일 브라우저의 인터페이스가 사용자 동작에 따라 늘어나거나 줄어들면서 뷰포트의 크기도 변하기 때문입니다.

소형 (small)

브라우저 인터페이스가 가장 커졌을 때, 즉 뷰포트가 가장 작을 때의 크기가 필요할 때는 소형 뷰포트 크기를 사용해야 합니다. 소형 뷰포트 크기를 사용하면 브라우저 인터페이스가 최대로 확장됐을 때 뷰포트를 가득 채울 수 있습니다. 반면 브라우저 인터페이스가 축소됐을 땐 빈 공간이 보일 수 있습니다.

예를 들어, 소형 뷰포트 백분율 길이 단위를 사용한 크기의 요소는 동적 브라우저 인터페이스가 커져도 콘텐츠가 잘리지 않고 화면에 완벽하게 맞습니다. 하지만 인터페이스가 줄어들거나 숨겨지면 요소 주위에 공간이 남습니다. 따라서 소형 뷰포트 크기는 일반적인 사용에 ‘안전’하다고 할 수 있지만, 사용자가 볼 때 가장 매력적인 레이아웃을 만들진 못할 수 있습니다.

소형 뷰포트 크기는 sv 접두사를 사용한 sv* 뷰포트 백분율 단위로 표현합니다. 소형 뷰포트 백분율 길이는 안정된 고정 값으로, 뷰포트 자체의 크기가 변하지 않으면 달라지지 않습니다.

대형 (large)

브라우저 인터페이스가 가장 작아졌을 때, 즉 뷰포트가 가장 클 때의 크기가 필요할 때는 대형 뷰포트 크기를 사용해야 합니다. 대형 뷰포트 크기를 사용하면 브라우저 인터페이스가 최대로 줄어들었을 때 뷰포트를 가득 채울 수 있습니다. 하지만 브라우저 인터페이스가 확장되면 콘텐츠가 가릴 수 있다는 점을 주의해야 합니다.

예를 들어, 화면 위의 작은 영역조차 귀한 모바일 장치에서는, 사용자가 페이지를 스크롤하기 시작하면 페이지 제목과 주소 표시줄 영역을 일부 혹은 완전히 숨기곤 합니다. 대형 뷰포트 백분율 길이 단위를 사용한 크기의 요소는 이렇게 인터페이스가 숨겨졌을 때 화면의 보이는 영역 전체를 채울 수 있습니다. 하지만 브라우저 인터페이스가 다시 보이게 되면 대형 뷰포트 백분율 길이 단위를 사용한 요소의 콘텐츠는 크기와 위치에 따라 브라우저 인터페이스가 가려버릴 수 있습니다.

대형 뷰포트 크기는 lv 접두사를 사용한 lv* 뷰포트 백분율 단위로 표현합니다. 대형 뷰포트 백분율 길이는 안정된 고정 값으로, 뷰포트 자체의 크기가 변하지 않으면 달라지지 않습니다.

동적 (dynamic)

브라우저 인터페이스가 동적으로 작아지거나 커질 때, 바뀐 뷰포트 크기에 맞춰 대응하려면 동적 뷰포트 크기를 사용하세요. 동적 뷰포트 크기를 사용하면 브라우저 인터페이스의 유동적인 크기에 상관하지 않고 정확히 현재 뷰포트 크기에 맞출 수 있습니다.

동적 뷰포트 크기는 dv 접두사를 사용한 dv* 뷰포트 백분율 단위로 표현합니다. 동적 뷰포트 백분율 길이는 안정적이지 않은 유동 값으로, 뷰포트 자체의 크기가 변하지 않더라도 바뀔 수 있습니다.

동적 뷰포트 크기는 유연하고 제어하기도 좋지만, 남용하면 페이지의 스크롤 방향이 바뀔 때마다 콘텐츠의 크기가 달라져서 사용자 인터페이스 품질 뿐만 아니라 애플리케이션의 성능도 떨어질 수 있습니다.

기본

기본 뷰포트 크기는 브라우저가 정합니다. 따라서 기본 뷰포트 크기에 기반한 뷰포트 백분율 길이의 정확한 값은 소형이나 대형 뷰포트 크기일 수도 있고, 그 중간일 수도 있고, 동적 뷰포트 크기와 같을 수도 있습니다.

뷰포트 상대 길이는 <length> 값을 초기 컨테이닝 블록 크기의 1%로 정의합니다. 그리고 초기 컨테이닝 블록은 뷰포트 또는 페이지 영역, 즉 현재 문서에서 볼 수 있는 부분의 크기에 기반합니다. 다음은 각각의 뷰포트 크기에 기반한 뷰포트 백분율 길이 단위의 목록입니다.

@page 선언 블록에는 뷰포트 백분율 길이를 사용할 수 없습니다.

vh

뷰포트 최초 컨테이닝 블록 높이의 백분율입니다. 1vh는 뷰포트 높이의 1%와 같습니다. 예를 들어, 뷰포트 높이가 300px이라면 70vh는 210px과 같습니다.

소형, 대형, 동적 뷰포트 크기의 경우 각각 svh, lvh, dvh 단위를 사용합니다. vh는 브라우저 기본 뷰포트 크기에 기반한 뷰포트 백분율 길이 단위입니다.

vw

뷰포트 최초 컨테이닝 블록 너비의 백분율입니다. 1vw는 뷰포트 너비의 1%와 같습니다. 예를 들어, 뷰포트 너비가 800px이라면 50vw는 400px과 같습니다.

소형, 대형, 동적 뷰포트 크기의 경우 각각 svw, lvw, dvw 단위를 사용합니다. vw는 브라우저 기본 뷰포트 크기에 기반한 뷰포트 백분율 길이 단위입니다.

vmax

vw와 vh 중 큰 값과 같습니다.

소형, 대형, 동적 뷰포트 크기의 경우 각각 svmax, lvmax, dvmax 단위를 사용합니다. vmax는 브라우저 기본 뷰포트 크기에 기반한 뷰포트 백분율 길이 단위입니다.

vmin

vw와 vh 중 작은 값과 같습니다.

소형, 대형, 동적 뷰포트 크기의 경우 각각 svmin, lvmin, dvmin 단위를 사용합니다. vmin는 브라우저 기본 뷰포트 크기에 기반한 뷰포트 백분율 길이 단위입니다.

vb

루트 요소의 블록 축 방향에 대한 뷰포트 최초 컨테이닝 블록의 크기 백분율입니다.

소형, 대형, 동적 뷰포트 크기의 경우 각각 svb, lvb, dvb 단위를 사용합니다. vb는 브라우저 기본 뷰포트 크기에 기반한 뷰포트 백분율 길이 단위입니다.

vi

루트 요소의 인라인 축 방향에 대한 뷰포트 최초 컨테이닝 블록의 크기 백분율입니다.

소형, 대형, 동적 뷰포트 크기의 경우 각각 svi, lvi, dvi 단위를 사용합니다. vi는 브라우저 기본 뷰포트 크기에 기반한 뷰포트 백분율 길이 단위입니다.

컨테이너 쿼리 길이 단위

컨테이너 쿼리를 통해 컨테이너에 스타일을 적용할 땐 컨테이너 쿼리 길이 단위를 사용할 수 있습니다. 이 단위들은 쿼리 컨테이너의 크기에 대한 상대적인 값으로 길이를 정의합니다. 컨테이너 쿼리 길이 단위를 사용한 컴포넌트들은 컨테이너를 바꿔도 스스로의 스타일에 적용할 정확한 길이를 계산하지 않아도 되므로 배치가 유연해집니다. 컨테이너 쿼리에서 자세히 알아보세요.

cqw: 쿼리 컨테이너 너비의 백분율입니다. 1cqw는 컨테이너 너비의 1%와 같습니다. 예를 들어, 쿼리 컨테이너 너비가 800px이라면 50cqw는 400px과 같습니다.
cqh: 쿼리 컨테이너 높이의 백분율입니다. 1cqh는 컨테이너 높이의 1%와 같습니다. 예를 들어, 쿼리 컨테이너 높이가 300px이라면 10cqh는 30px과 같습니다.
cqi: 쿼리 컨테이너의 인라인 축 방향 크기 백분율입니다. 1cqi는 컨테이너 인라인 크기의 1%와 같습니다. 예를 들어, 쿼리 컨테이너 인라인 크기가 800px이라면 50cqi는 400px과 같습니다.
cqb: 쿼리 컨테이너의 블록 축 방향 크기 백분율입니다. 1cqb는 컨테이너 블록 크기의 1%와 같습니다. 예를 들어, 쿼리 컨테이너 블록 크기가 300px이라면 10cqb는 30px과 같습니다.
cqmin: 쿼리 컨테이너의 인라인과 블록 축 방향 중 더 작은 크기의 백분율입니다. 예를 들어, 쿼리 컨테이너 인라인 크기가 800px이고 블록 크기가 300px이라면 50cqmin은 150px과 같습니다.
cqmax: 쿼리 컨테이너의 인라인과 블록 축 방향 중 더 큰 크기의 백분율입니다. 예를 들어, 쿼리 컨테이너 인라인 크기가 800px이고 블록 크기가 300px이라면 50cqmax는 400px과 같습니다.

절대 길이 단위

절대 길이는 출력 매체의 물리적 속성에 기반한 길이를 나타냅니다. 먼저 어떤 단위 하나를 출력 매체의 물리 단위와 연관지어 기준으로 삼고, 다른 단위는 기준 단위에 상대적으로 정의하는 방식입니다. 모니터 등 저해상도 장치와 프린터 등 고해상도 장치에서의 기준 단위는 서로 다릅니다.

저해상도 장치에서는 px 단위가 물리적인 픽셀 하나의 크기에 대응하며, 다른 단위는 픽셀에 상대적으로 정의됩니다. 예컨대, 1in은 96px이자 72pt입니다. 이 방식의 부작용은 인치(in), 센티미터(cm), 밀리미터(mm) 단위를 사용한 길이가 실제 물리적 인치, 센티미터, 밀리미터 길이와 다를 수 있다는 점입니다.

고해상도 장치에서는 인치(in), 센티미터(cm), 밀리미터(mm) 단위가 물리적 길이와 일치하며, px이 물리적 길이에 상대적으로 정의됩니다. (1in의 1/96)

많은 사용자들이 사용자 에이전트의 기본 글씨 크기를 키워서 사용합니다. 절대 길이 단위는 사용자 설정의 영향을 받지 않는 고정된 단위므로 접근성을 저해할 수 있습니다. font-size를 설정할 땐 em이나 rem처럼 상대 길이 단위를 쓰는 편이 좋습니다.

px: 픽셀 한 개입니다. 전통적으로 화면에서는 장치의 픽셀 하나를 나타냈습니다. 하지만 프린터와 고해상도 화면에서는 하나의 CSS 픽셀이 다수의 장치 픽셀에 대응합니다. 이때는 1px을 1in의 1/96으로 정의합니다.
cm: 1 센티미터입니다. 1cm = (96 / 2.54)px입니다.
mm: 1 밀리미터입니다. 1mm = (1 / 10)cm입니다.
Q: 0.25 밀리미터입니다. 1Q = (1 / 40)cm입니다.
in: 1 인치입니다. 1in = 2.54cm = 96px입니다.
pc: 1 피카입니다. 1pc = 12pt = (1 / 6)in입니다.
pt: 1 포인트입니다. 1pt = (1 / 72)in입니다.

보간

애니메이션에서 <length> 값은 부동소수점 실수로서 보간됩니다. 보간에는 계산 값을 사용합니다. 보간 속도는 애니메이션이 사용하는 타이밍 함수가 결정합니다.

명세

CSS Values and Units Module Level 4

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS	Android
	Safari	Chrome	Firefox	Safari	Chrome	Firefox	Samsung Internet
`<length>`
`Q` unit
`cap` unit
`ch` unit
Container query length units `cqw`, `cqh`, `cqi`, `cqb`, `cqmin`, `cqmax`
`em` unit
`ex` unit
`ic` unit
`lh` unit
`rcap` unit
`rch` unit
`rem` unit
`rex` unit
`ric` unit
`rlh` unit
`vb` unit
`vh` unit
`vi` unit
`dvb`, `dvh`, `dvi`, `dvmax`, `dvmin`, `dvw` units
`lvb`, `lvh`, `lvi`, `lvmax`, `lvmin`, `lvw` units
`svb`, `svh`, `svi`, `svmax`, `svmin`, `svw` units
`vmax` unit
`vmin` unit
`vw` unit