사용값

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

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

예제

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

명세

같이 보기

• 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.