diff options
Diffstat (limited to 'files/ko/web/css/used_value/index.html')
| -rw-r--r-- | files/ko/web/css/used_value/index.html | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/files/ko/web/css/used_value/index.html b/files/ko/web/css/used_value/index.html new file mode 100644 index 0000000000..7e730820c0 --- /dev/null +++ b/files/ko/web/css/used_value/index.html @@ -0,0 +1,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> |