이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

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

참고: <percentage> 값은 <length> 값을 받는 일부 속성에 사용할 수 있는 CSS 단위지만 <length> 값은 아닙니다.

구문

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

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

단위

상대길이 단위

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

글꼴 상대 길이

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

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

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
Equal to 1% of the height of the viewport's initial containing block.
vw
Equal to 1% of the width of the viewport's initial containing block.
vi
Equal to 1% of the size of the initial containing block, in the direction of the root element’s inline axis.
vb
Equal to 1% of the size of the initial containing block, in the direction of the root element’s block axis.
vmin
Equal to the smaller of vw and vh.
vmax
Equal to the larger of vw and vh.

절대길이 단위

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

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

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

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

px
One pixel. For screen displays, it traditionally represents one device pixel (dot). However, for printers and high-resolution screens, one CSS pixel implies multiple device pixels. 1px = 1/96th of 1in.
cm
One centimeter. 1cm = 96px/2.54.
mm
One millimeter. 1mm = 1/10th of 1cm.
Q
One quarter of a millimeter. 1Q = 1/40th of 1cm.
in
One inch. 1in = 2.54cm = 96px.
pc
One pica. 1pc = 12pt = 1/6th of 1in.
pt
One point. 1pt = 1/72nd of 1in.
mozmm , removed in Firefox 59
An experimental unit that attempts to render at exactly one millimeter regardless of the size or resolution of the display. This is rarely actually what you want, but may be useful in particular for mobile devices.

보간

When animated, values of the <length> data type are interpolated as real, floating-point numbers. The interpolation happens on the calculated value. The speed of the interpolation is determined by the timing function associated with the animation.

명세

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 empt, pc, and px units.
CSS Level 1
The definition of '<length>' in that specification.
Recommendation Initial definition. Implicit definition of the empt, pc, and px units.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 NoEdge Mobile 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 YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 7.1Samsung Internet Android Full support Yes
ex unitChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 NoEdge Mobile 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 NoEdge Mobile 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 NoEdge Mobile No support NoFirefox Android ? Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
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 63Edge Mobile No support NoFirefox Android Full support 49Opera Android Full support 50Safari 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 YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support 12Safari iOS Full support 4Samsung Internet Android Full support Yes
rlh unit
Experimental
Chrome No support NoEdge Full support YesFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox 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 NoEdge Mobile 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 19IE Full support 9Opera Full support 20Safari Full support 6WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 19Opera 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 NoEdge Mobile 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 ? Firefox Full support 19IE No support NoOpera Full support 20Safari Full support YesWebView Android Full support 1.5Chrome Android Full support YesEdge Mobile ? Firefox Android Full support 19Opera Android No support NoSafari iOS Full support 4Samsung Internet Android Full support Yes
vmin unitChrome Full support 20Edge ? Firefox Full support 19IE Full support 10
Full support 10
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: vm
Opera Full support 20Safari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 19Opera Android No support NoSafari iOS Full support 6Samsung Internet Android Full support Yes
vw unitChrome Full support 20Edge Full support 12Firefox Full support 19IE Full support 9Opera Full support 20Safari Full support 6WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 19Opera Android Full support YesSafari iOS Full support 6Samsung Internet Android Full support Yes
Viewport-percentage lengths invalid in @pageChrome ? Edge ? Firefox Full support 21IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 21Opera Android ? Safari iOS ? Samsung Internet Android ?
1in is always equal to 96pxChrome Full support YesEdge ? Firefox Full support 4IE No support NoOpera No support NoSafari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
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.

 

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656
최종 변경자: urty5656,