<length-percentage>

<length-percentage> CSS 자료형은 <length> 또는 <percentage>인 값을 나타냅니다.

구문

<length>와 <percentage> 문서에서 각 자료형의 구문을 살펴보세요.

calc()에서 사용하기

<length-percentage>를 허용한다면 백분율이 길이로 이행한다는 뜻이므로 calc()와 함께 사용할 수 있습니다. 따라서 아래의 width 값 모두 유효합니다.

width: 200px
width: 20%
width: calc(100% - 200px)

명세

Specification Status Comment
CSS Values and Units Module Level 4
The definition of '<length-percentage>' in that specification.		 Editor's Draft  
CSS Values and Units Module Level 3
The definition of '<length-percentage>' in that specification.		 Candidate Recommendation Defines <length-percentage>. Adds calc()

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<length-percentage>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 1.0
Q unitChrome 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 Full support 8.0
cap unitChrome 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 7Samsung Internet Android Full support 1.5
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 unitChrome 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 unitChrome 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
Non-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 1.0
rlh unitChrome 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 unitChrome 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 19IE Full support 9Opera Full support 20Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 25Firefox Android Full support 19Opera Android Full support YesSafari iOS Full support 6Samsung Internet Android Full support 1.5
vi unitChrome 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 1.5
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 1.5
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 1.5

Legend

Full support  
Full support
No support  
No support
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.
관련 주제