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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
---
title: 사용값
slug: Web/CSS/used_value
tags:
- CSS
- Reference
translation_of: Web/CSS/used_value
---
<div>{{cssref}}</div>
<p><a href="/ko/docs/Web/CSS">CSS</a> 속성의 <strong>사용값</strong>은 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>에 모든 계산을 수행한 후의 결과 값입니다.</p>
<p>모든 CSS 속성은 {{glossary("user agent", "사용자 에이전트")}}가 계산을 끝낸 후 사용값을 가집니다. 크기({{cssxref("width")}}, {{cssxref("line-height")}} 등)는 픽셀 단위로 정해집니다. 단축 속성({{cssxref("background")}} 등)의 값은 그 구성요소({{cssxref("background-color")}}, {{cssxref("background-size")}} 등)와 {{cssxref("position")}}, {{cssxref("float")}}이 가질 값과 일치합니다.</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>일 수도, 사용값일 수도 있습니다.</p>
</div>
<h2 id="예제">예제</h2>
<p>다음 예제는 요소 세 개 <code>width</code> 속성의 사용값을 계산하고 보여줍니다. (창 크기 조절 시 업데이트)</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">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);
</pre>
<h3 id="결과">결과</h3>
<p>{{ EmbedLiveSample('예제', '80%', 372) }}</p>
<h2 id="계산값과의_차이">계산값과의 차이</h2>
<p>CSS 2.0은 속성의 계산에서 마지막 단계로 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>만 정의했고, 그 다음 CSS 2.1에서 사용값의 분명한 정의를 도입했습니다. 덕분에, 부모의 너비/높이 계산값이 백분율이더라도 상속받을 수 있게 됐습니다. 레이아웃에 의존하지 않는 CSS 속성(가령, <code>display</code>, <code>font-size</code>, <code>line-height</code>)의 경우, 계산값과 사용값은 같습니다. 다음은 레이아웃에 의존하는 CSS 2.1 속성으로, 계산값과 사용값이 다릅니다. (<a href="https://www.w3.org/TR/CSS2/changes.html#q21.36">CSS 2.1 Changes: Specified, computed, and actual values</a>에서 가져옴)</p>
<ul>
<li><code>background-position</code></li>
<li><code>bottom</code>, <code>left</code>, <code>right</code>, <code>top</code></li>
<li><code>height</code>, <code>width</code></li>
<li><code>margin-bottom</code>, <code>margin-left</code>, <code>margin-right</code>, <code>margin-top</code></li>
<li><code>min-height</code>, <code>min-width</code></li>
<li><code>padding-bottom</code>, <code>padding-left</code>, <code>padding-right</code>, <code>padding-top</code></li>
<li><code>text-indent</code></li>
</ul>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS2.2", "cascade.html#used-value", "used value")}}</td>
<td>{{Spec2("CSS2.2")}}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{domxref("window.getComputedStyle")}}</li>
<li>{{css_key_concepts}}</li>
</ul>
|
