---
title: 계산값
slug: Web/CSS/computed_value
tags:
  - CSS
  - Reference
translation_of: Web/CSS/computed_value
---
<div>{{cssref}}</div>

<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> 속성의 <strong>계산값</strong>은 상속 과정에서 부모가 자식에게 물려주는 값을 말합니다.</span> 계산값은 <a href="/ko/docs/Web/CSS/specified_value">지정값</a>으로부터 다음 방법을 통해 구합니다.</p>

<ul>
 <li>특수값인 {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}}, {{cssxref("revert")}}를 처리하여.</li>
 <li>각 속성 정의 표의 "Computed value" 항목이 가리키는 연산을 수행하여.</li>
</ul>

<p>계산값을 구하기 위한 연산은 보통 상댓값(<code>em</code> 단위나 백분율 등)을 절댓값으로 변환하는 작업을 수반합니다. 예컨대 요소가 <code>font-size: 1px</code>과 <code>padding-top: 2em</code>을 가진다면, <code>padding-top</code>의 계산값은 글씨 크기의 두 배인 <code>32px</code>입니다.</p>

<p>그러나, <code>width</code>, <code>margin-right</code>, <code>text-index</code>, <code>top</code>과 같이, 백분율의 값을 알아내려면 레이아웃부터 계산해야 하는 속성의 백분율 지정값은 백분율 계산값이 됩니다. 추가로, <code>line-height</code> 속성의 단위 없는 값도 그대로 계산값이 됩니다. 이렇게 남겨진 상대적 계산값은 <a href="/ko/docs/Web/CSS/used_value">사용값</a>을 구할 때 절댓값이 됩니다.</p>

<div class="blockIndicator note">
<p><strong>참고:</strong>{{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API는 <a href="/ko/docs/Web/CSS/resolved_value">결정값</a>을 반환합니다. 결정값은 속성에 따라 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>일 수도, <a href="/ko/docs/Web/CSS/used_value">사용값</a>일 수도 있습니다.</p>
</div>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">설명</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}</td>
   <td>{{Spec2("CSS2.2")}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/CSS/CSS_Reference">CSS Reference</a></li>
 <li>{{CSS_key_concepts}}</li>
</ul>