CSS 속성의 사용값은 계산값에 모든 계산을 수행한 후의 결과 값입니다.
모든 CSS 속성은 사용자 에이전트가 계산을 끝낸 후 사용값을 가집니다. 크기(width
, line-height
등)는 픽셀 단위로 정해집니다. 단축 속성(background
등)의 값은 그 구성요소(background-color
, background-size
등)와 position
, float
이 가질 값과 일치합니다.
참고: getComputedStyle()
DOM API는 결정값을 반환합니다. 결정값은 속성에 따라 계산값일 수도, 사용값일 수도 있습니다.
예제
다음 예제는 요소 세 개 width
속성의 사용값을 계산하고 보여줍니다. (창 크기 조절 시 업데이트)
HTML
<div id="no-width">
<p>No explicit width.</p>
<p class="show-used-width">..</p>
<div id="width-50">
<p>Explicit width: 50%.</p>
<p class="show-used-width">..</p>
<div id="width-inherit">
<p>Explicit width: inherit.</p>
<p class="show-used-width">..</p>
</div>
</div>
</div>
CSS
#no-width {
width: auto;
}
#width-50 {
width: 50%;
}
#width-inherit {
width: inherit;
}
/* Make results easier to see */
div {
border: 1px solid red;
padding: 8px;
}
JavaScript
function updateUsedWidth(id) {
var div = document.querySelector(`#${id}`);
var par = div.querySelector('.show-used-width');
var wid = window.getComputedStyle(div)["width"];
par.textContent = `Used width: ${wid}.`;
}
function updateAllUsedWidths() {
updateUsedWidth("no-width");
updateUsedWidth("width-50");
updateUsedWidth("width-inherit");
}
updateAllUsedWidths();
window.addEventListener('resize', updateAllUsedWidths);
결과
계산값과의 차이
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
명세
Specification | Status | Comment |
---|---|---|
CSS Level 2 (Revision 2) The definition of 'used value' in that specification. |
Working Draft | No change. |
CSS Level 2 (Revision 1) The definition of 'used value' in that specification. |
Recommendation | Initial definition. |
같이 보기
window.getComputedStyle
- CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. Definitions of value syntax, shorthand properties and replaced elements.