diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/web/css/computed_value | |
parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip |
initial commit
Diffstat (limited to 'files/ko/web/css/computed_value')
-rw-r--r-- | files/ko/web/css/computed_value/index.html | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/files/ko/web/css/computed_value/index.html b/files/ko/web/css/computed_value/index.html new file mode 100644 index 0000000000..feb106bf43 --- /dev/null +++ b/files/ko/web/css/computed_value/index.html @@ -0,0 +1,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> |