이 글은 기술 검토가 필요합니다. 도울을 줄 수 있는 방법을 살펴보세요.
모든 CSS 속성(property)의 사용값(used value)은 모든 계산이 수행된 뒤 그 속성의 최종값입니다. 일부 속성의 경우, 사용값은 window.getComputedStyle을 호출하여 검색될 수 있습니다. 크기(가령, width, line-height)는 모두 픽셀이고, 단축(shorthand) 속성(예, background)은 그 컴포넌트 속성(가령, background-color, display)과 일치하고 position 및 float과 일치하며 모든 CSS 속성은 값이 있습니다.
상세
모든 CSS 속성의 최종값을 계산하는 세 단계가 있습니다. 먼저, 지정값은 종속(cascading, 속성을 바꾸는 가장 구체적인(specific) 스타일시트 규칙을 선택하는), 상속(그 속성이 상속 가능한 경우 부모와 같은 계산값을 사용하는) 또는 기본값(default)을 사용한 결과입니다. 그 뒤에, 계산값은 스펙에 따라 계산됩니다(예를 들어, position: absolute인 span은 display의 계산값이 block으로 바뀌게 됩니다). 끝으로, 레이아웃이 계산되고 (부모에 대해 auto 또는 퍼센트인 크기(dimension)는 픽셀값으로 대체됩니다) 그 결과가 사용값입니다. 이 단계는 내부적으로 계산됩니다. 그래서 스크립트는 최종 사용값을 window.getComputedStyle로만 읽을 수 있습니다 (비록 이 메서드가 속성에 따라 계산값을 대신 반환할 수 있지만; 이 반환 값은 일반적으로 결정값이라고 합니다).
예
<div style="border: 1px solid red">명시된 width 없음. 지정된 width: auto (default). 계산된 width: auto. 사용된 width: 998px (예를 들어). <div style="border: 1px solid green; width: 50%">명시된 width: 50%. 지정된 width: 50%. 계산된 width: 50%. 사용된 width: 447px (예를 들어). <div style="border: 1px solid blue; width: inherit">명시된 width: inherit. 지정된 width: 50%. 계산된 width: 50%. 사용된 width: 221px (예를 들어).</div> </div> </div>
계산값과의 차이
CSS 2.0은 속성의 계산에서 마지막 단계로 계산값만 정의했습니다. 그 뒤에, CSS 2.1은 요소가 계산값이 퍼센트인 부모의 너비/높이를 명시해서 상속할 수 있도록 사용값의 분명한 정의를 도입했습니다. 레이아웃에 의존하지 않는 CSS 속성(가령, display, font-size, line-height)의 경우, 계산값 및 사용값은 같습니다. 다음은 레이아웃에 의존하는 CSS 2.1 속성으로, 그래서 그들은 서로 다른 계산값 및 사용값이 있습니다: (CSS 2.1 Changes: Specified, computed, and actual values에서 가져옴):
- background-position
- bottom, left, right, top
- height, width
- margin-bottom, margin-left, margin-right, margin-top,
- min-height, min-width
- padding-bottom, padding-left, padding-right, padding-top
- text-indent
스펙
참조
- CSS Reference
- CSS Key Concepts: CSS syntax, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, used and actual values. Definitions of value syntax, shorthand properties and replaced elements.
- window.getComputedStyle