From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/used_value/index.html | 127 +++++++++++++++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 files/ko/web/css/used_value/index.html (limited to 'files/ko/web/css/used_value') 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 +--- +
{{cssref}}
+ +

CSS 속성의 사용값은 계산값에 모든 계산을 수행한 후의 결과 값입니다.

+ +

모든 CSS 속성은 {{glossary("user agent", "사용자 에이전트")}}가 계산을 끝낸 후 사용값을 가집니다. 크기({{cssxref("width")}}, {{cssxref("line-height")}} 등)는 픽셀 단위로 정해집니다. 단축 속성({{cssxref("background")}} 등)의 값은 그 구성요소({{cssxref("background-color")}}, {{cssxref("background-size")}} 등)와 {{cssxref("position")}}, {{cssxref("float")}}이 가질 값과 일치합니다.

+ +
+

참고: {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API는 결정값을 반환합니다. 결정값은 속성에 따라 계산값일 수도, 사용값일 수도 있습니다.

+
+ +

예제

+ +

다음 예제는 요소 세 개 width 속성의 사용값을 계산하고 보여줍니다. (창 크기 조절 시 업데이트)

+ +

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>
+
+ +

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;
+}
+ +

JavaScript

+ +
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);
+
+ +

결과

+ +

{{ EmbedLiveSample('예제', '80%', 372) }}

+ +

계산값과의 차이

+ +

CSS 2.0은 속성의 계산에서 마지막 단계로 계산값만 정의했고, 그 다음 CSS 2.1에서 사용값의 분명한 정의를 도입했습니다. 덕분에, 부모의 너비/높이 계산값이 백분율이더라도 상속받을 수 있게 됐습니다. 레이아웃에 의존하지 않는 CSS 속성(가령, display, font-size, line-height)의 경우, 계산값과 사용값은 같습니다. 다음은 레이아웃에 의존하는 CSS 2.1 속성으로, 계산값과 사용값이 다릅니다. (CSS 2.1 Changes: Specified, computed, and actual values에서 가져옴)

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS2.2", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.2")}}No change.
{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.1")}}Initial definition.
+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf