This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<percentage>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
<percentage>CSS자료형은 백분율 값을 나타냅니다. 보통 부모 객체와의 상대적 크기를 지정할 때 사용합니다.width,height,margin,padding,font-size 처럼 다양한 속성에서 백분율을 쓸 수 있습니다.
참고 :계산된 값만 상속받을 수 있습니다. 따라서 부모 속성이 백분율 값을 사용하더라도 전달되는 값은 실제값(예컨대 너비의<length> 값은 픽셀)이며 백분율 값은 접근할 수 없습니다.
구문
<percentage> 자료형은<number>와 그 뒤의 백분율 기호(%)로 표기합니다. 선택적으로 하나의+ 또는- 기호로 부호를 표기할 수 있지만, 음의 값은 어떤 속성에서도 유효하지 않습니다. 다른 CSS 단위와 마찬가지로 숫자와 기호 사이에 공백은 없습니다.
보간
애니메이션에서<percentage> 자료형의 값은 유동소수점 실수를 사용해 보간됩니다. 보간의 속도는 애니메이션과 연결된타이밍 함수가 결정합니다.
예제
width와margin-left
html
<div> <div> width: 50%, margin-left: 20% </div> <div> width: 30%, margin-left: 60% </div></div>font-size
html
<div> <p>원본 텍스트 (18px)</p> <p><span>50%</span></p> <p><span>200%</span></p></div>명세
| Specification |
|---|
| CSS Values and Units Module Level 4 # percentages |