번역 작업 진행중입니다.

CSS 속성의 사용값계산값에 모든 계산을 수행한 후의 결과 값입니다.

사용자 에이전트가 계산을 끝내면 모든 CSS 속성이 사용 값을 가집니다. 크기(width, line-height 등)는 픽셀 단위로 정해집니다. 단축 속성(background 등)의 값은 그 구성요소(background-color, background-size 등)와 position, float이 가질 값과 일치합니다.

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

예제

This example computes and displays the used width value of three elements (updates on resize):

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 1)
The definition of 'used value' in that specification.
Recommendation Initial definition.

같이 보기

문서 태그 및 공헌자

태그: 
이 페이지의 공헌자: mdnwebdocs-bot, alattalatta, Netaras
최종 변경자: mdnwebdocs-bot,