<length>

<length> CSS 자료형은 거리 값을 나타냅니다. width, height, margin, padding, border-width, font-size, text-shadow 등 다양한 속성에 사용할 수 있습니다.

참고: <percentage> 값을 일부 속성의 <length> 값으로 사용할 수는 있지만 <percentage><length> 는 다릅니다. <length-percentage>를 참고하세요.

구문

<length> 자료형은 <number> 다음에 아래 나열한 단위 중 하나를 붙여 구성합니다. 다른 CSS 단위와 마찬가지로 숫자와 단위 문자 사이에 공백은 존재하지 않습니다. 숫자 0 뒤에는 단위를 붙이지 않아도 됩니다.

참고: 일부 속성은 음의 <length>를 받지만 다른 속성은 그렇지 않습니다.

단위

상대길이 단위

상대길이는 어떤 다른 거리와의 상대적 비율을 표현합니다. 어떤 다른 거리란 단위에 따라 특정 문자, line-height, 아니면 뷰포트일 수 있습니다.

글꼴 상대 길이

글꼴 상대 길이는 <length> 값을 특정 문자나 현재 요소가 사용하는 글꼴의 특정 속성을 기준으로 설정합니다.

참고: 아래 단위들, 특히 emrem은 사용자가 글꼴 크기를 늘려도 페이지의 수직 흐름을 유지하는, 확대 가능한 레이아웃을 만들기 위해 많이 쓰입니다.

cap
요소 font의 "cap height"(영문 대문자의 평균 높이 값)를 나타냅니다.
ch
요소 font의 문자 "0"(영, 유니코드 U+0030)의 너비를 나타냅니다.
em
요소 font-size의 계산값. 요소의 font-size 속성에 사용한다면 상속받는 font-size 값을 나타냅니다.
ex
요소 fontx높이를 나타냅니다. "x"문자를 가진 글꼴에서는 보통 소문자 높이와 같습니다. 많은 글꼴에서 1ex ≈ 0.5em입니다.
ic
"水" (한중일 한자 "물", U+6C34) 문자를 렌더링할 때 사용하는 글꼴에서의 너비를 나타냅니다.
lh
요소가 line-height를 가지고 있는 경우, line-height의 계산값을 절대 길이로 변환해 나타냅니다.
rem
루트 요소(보통 <html>)의 font-size를 나타냅니다. 루트 요소의 font-size에 사용할 경우 최초값(보통 브라우저 기본값은 16px이나 사용자 설정으로 변할 수 있음)을 나타냅니다.
rlh
루트 요소(보통 <html>)의 line-height를 절대 길이로 변환해 나타냅니다. 루트 요소의 font-sizeline-height에 사용할 경우 최초값을 나타냅니다.
뷰포트 백분율 길이

뷰포트 백분율 길이는 <length> 값을 뷰포트, 즉 문서에서 볼 수 있는 부분의 크기를 기준으로 설정합니다. 뷰포트 길이는 @page 선언 블록에서는 유효하지 않습니다.

vh
뷰포트의 초기 컨테이닝 블록 높이 1%와 같습니다.
vw
뷰포트의 초기 컨테이닝 블록 너비 1%와 같습니다.
vi
초기 컨테이닝 블록의 인라인 축 크기 1%와 같습니다.
vb
초기 컨테이닝 블록의 블록 축 크기 1%와 같습니다.
vmin
vwvh 중 작은 것과 같습니다.
vmax
vwvh 중 큰 것과 같습니다.

절대길이 단위

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

저해상도 장치에서 px 단위는 물리적인 픽셀을 의미하며 나머지는 이에 상대적입니다. 따라서 1in96px로 정의하며 이는 72pt와 동일합니다. 그러나 인치(in), 센티미터(cm), 밀리미터(mm) 등 이렇게 정의하는 단위가 같은 이름을 가진 물리적인 측정 단위와 일치하지 않을 수 있다는 문제점이 있습니다.

고해상도 장치에서 인치(in), 센티미터(cm), 밀리미터(mm)가 기준이 되어 물리적 거리와 동일합니다. 그래서 px 단위도 이에 맞춰 1인치의 1/96로 정의합니다.

참고: 많은 사용자가 사용자 에이전트의 기본 글꼴 크기를 늘려 읽기 쉽도록 설정합니다. 절대길이는 사용자 설정을 따르지 않기 때문에 접근성 문제를 유발할 수 있습니다. 따라서 font-size를 설정할 땐 em, rem 등 상대길이를 선택하세요.

px
1 픽셀. 화면에서는 전통적으로 하나의 장치 픽셀(점)을 의미했지만, 프린터나 고해상도 화면에서는 1/96 in을 맞출 수 있도록 여러 개의 장치 픽셀을 의미합니다.
cm
1 센티미터, 1cm = 96px/2.54.
mm
1 밀리미터, 1mm = 1/10 cm.
Q
1/4 밀리미터, 1Q = 1/40 cm.
in
1 인치, 1in = 2.54cm = 96px.
pc
1 피카, 1pc = 12pt = 1/61in.
pt
One point. 1pt = 1/72nd of 1in.

보간

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

명세

Specification Status Comment
CSS Values and Units Module Level 4
The definition of '<length>' in that specification.
Editor's Draft Adds the vi, vb, ic, lh, and rlh units.
CSS Values and Units Module Level 3
The definition of '<length>' in that specification.
Candidate Recommendation Adds the ch, rem, vw, vh, vmin, vmax, and Q units.
CSS Level 2 (Revision 1)
The definition of '<length>' in that specification.
Recommendation Explicit definition of the em, pt, pc, and px units.
CSS Level 1
The definition of '<length>' in that specification.
Recommendation Initial definition. Implicit definition of the em, pt, pc, and px units.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<length>Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support Yes
Q unit
Experimental
Chrome Full support 63Edge No support NoFirefox Full support 49IE No support NoOpera Full support 50Safari No support NoWebView Android Full support 63Chrome Android Full support 63Firefox Android Full support 49Opera Android Full support 46Safari iOS No support NoSamsung Internet Android No support No
cap unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
ch unitChrome Full support 27Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes From Firefox 1 to Firefox 3, ch was the width of the M character.
Notes From Firefox 1 to Firefox 3, ch did not work with border-width and outline-width CSS properties.
IE Full support 9Opera Full support 20Safari Full support 7WebView Android Full support ≤37Chrome Android Full support 27Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 7.1Samsung Internet Android Full support Yes
ex unitChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
ic unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
lh unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozmm unit
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox No support 4 — 59IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support 4 — 59Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
rem unitChrome Full support 4Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support 11.6Safari Full support 4.1WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 12Safari iOS Full support 4Samsung Internet Android Full support Yes
rlh unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vb unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vh unitChrome Full support 20Edge Full support 12Firefox Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Full support 9Opera Full support 20Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 25Firefox Android Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Full support YesSafari iOS Full support 6Samsung Internet Android Full support Yes
vi unit
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vmax unitChrome Full support 26Edge Full support 16Firefox Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
IE No support NoOpera Full support 15Safari Full support 6.1WebView Android Full support 1.5Chrome Android Full support 26Firefox Android Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support Yes
vmin unitChrome Full support 26Edge Full support 12
Full support 12
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: vm
Firefox Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Full support 10
Full support 10
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: vm
Opera Full support 15Safari Full support 6.1WebView Android Full support ≤37Chrome Android Full support 26Firefox Android Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support Yes
vw unitChrome Full support 20Edge Full support 12Firefox Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Full support 9Opera Full support 20Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 25Firefox Android Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Full support YesSafari iOS Full support 6Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.