--- title: 사용값 slug: Web/CSS/used_value tags: - CSS - Reference translation_of: Web/CSS/used_value ---
{{cssref}}

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

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

참고: {{domxref("Window.getComputedStyle", "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);

결과

{{ EmbedLiveSample('예제', '80%', 372) }}

계산값과의 차이

CSS 2.0은 속성의 계산에서 마지막 단계로 계산값만 정의했고, 그 다음 CSS 2.1에서 사용값의 분명한 정의를 도입했습니다. 덕분에, 부모의 너비/높이 계산값이 백분율이더라도 상속받을 수 있게 됐습니다. 레이아웃에 의존하지 않는 CSS 속성(가령, display, font-size, line-height)의 경우, 계산값과 사용값은 같습니다. 다음은 레이아웃에 의존하는 CSS 2.1 속성으로, 계산값과 사용값이 다릅니다. (CSS 2.1 Changes: Specified, computed, and actual values에서 가져옴)

명세

Specification Status Comment
{{SpecName("CSS2.2", "cascade.html#used-value", "used value")}} {{Spec2("CSS2.2")}} No change.
{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}} {{Spec2("CSS2.1")}} Initial definition.

같이 보기