<percentage>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<percentage> CSS 자료형은 백분율 값을 나타냅니다. 보통 부모 객체와의 상대적 크기를 지정할 때 사용합니다. width, height, margin, padding, font-size 처럼 다양한 속성에서 백분율을 쓸 수 있습니다.

참고 : 계산된 값만 상속받을 수 있습니다. 따라서 부모 속성이 백분율 값을 사용하더라도 전달되는 값은 실제값(예컨대 너비의 <length> 값은 픽셀)이며 백분율 값은 접근할 수 없습니다.

구문

<percentage> 자료형은 <number>와 그 뒤의 백분율 기호(%)로 표기합니다. 선택적으로 하나의 + 또는 - 기호로 부호를 표기할 수 있지만, 음의 값은 어떤 속성에서도 유효하지 않습니다. 다른 CSS 단위와 마찬가지로 숫자와 기호 사이에 공백은 없습니다.

보간

애니메이션에서 <percentage> 자료형의 값은 유동소수점 실수를 사용해 보간됩니다. 보간의 속도는 애니메이션과 연결된 타이밍 함수가 결정합니다.

예제

width와 margin-left

html
<div style="background-color:blue;">
  <div style="width:50%; margin-left:20%; background-color:lime;">
    width: 50%, margin-left: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    width: 30%, margin-left: 60%
  </div>
</div>

font-size

html
<div style="font-size:18px;">
  <p>원본 텍스트 (18px)</p>
  <p><span style="font-size:50%;">50%</span></p>
  <p><span style="font-size:200%;">200%</span></p>
</div>

명세

Specification
CSS Values and Units Module Level 4
# percentages

브라우저 호환성

BCD tables only load in the browser