계산값

CSS 속성의 계산값은 상속 과정에서 부모가 자식에게 물려주는 값을 말합니다. 계산값은 지정값으로부터 다음 방법을 통해 구합니다.

  • 특수값인 inherit, initial, unset, revert를 처리하여.
  • 각 속성 정의 표의 "Computed value" 항목이 가리키는 연산을 수행하여.

계산값을 구하기 위한 연산은 보통 상댓값(em 단위나 백분율 등)을 절댓값으로 변환하는 작업을 수반합니다. 예컨대 요소가 font-size: 1pxpadding-top: 2em을 가진다면, padding-top의 계산값은 글씨 크기의 두 배인 32px입니다.

그러나, width, margin-right, text-index, top과 같이, 백분율의 값을 알아내려면 레이아웃부터 계산해야 하는 속성의 백분율 지정값은 백분율 계산값이 됩니다. 추가로, line-height 속성의 단위 없는 값도 그대로 계산값이 됩니다. 이렇게 남겨진 상대적 계산값은 사용값을 구할 때 절댓값이 됩니다.

참고:getComputedStyle() DOM API는 결정값을 반환합니다. 결정값은 속성에 따라 계산값일 수도, 사용값일 수도 있습니다.

명세

명세 상태 설명
CSS Level 2 (Revision 1)
The definition of 'computed value' in that specification.
Recommendation Initial definition.
CSS Level 2 (Revision 2)
The definition of 'computed-value' in that specification.
Working Draft

같이 보기