1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
---
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>
|
