l10n: add getBoundingClientRect for ko (#2400)

2 files changed, 207 insertions, 0 deletions

diff --git a/files/ko/web/api/element/getboundingclientrect/element-box-diagram.png b/files/ko/web/api/element/getboundingclientrect/element-box-diagram.png
new file mode 100644
index 0000000000..6dfaa77c80
--- /dev/null
+++ b/files/ko/web/api/element/getboundingclientrect/element-box-diagram.png
diff --git a/files/ko/web/api/element/getboundingclientrect/index.html b/files/ko/web/api/element/getboundingclientrect/index.html
new file mode 100644
index 0000000000..7c56854d01
--- /dev/null
+++ b/files/ko/web/api/element/getboundingclientrect/index.html
@@ -0,0 +1,207 @@
+---
+title: Element.getBoundingClientRect()
+slug: Web/API/Element/getBoundingClientRect
+tags:
+  - API
+  - Boundary
+  - Bounding
+  - Bounds
+  - CSSOM View
+  - Client
+  - Containing
+  - DOM
+  - Element
+  - Enclosing
+  - Method
+  - Minimum
+  - Rectangle
+  - Reference
+  - Smallest
+  - clientHeight
+  - getBoundingClientRect
+  - getClientRects
+  - offsetHeight
+  - scrollHeight
+browser-compat: api.Element.getBoundingClientRect
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Element.getBoundingClientRect()</strong></code> 메서드는 엘리먼트의 크기와
+  <a href="/ko/docs/Glossary/Viewport">뷰포트</a>에 상대적인 위치 정보를 제공하는 
+  {{domxref("DOMRect")}} 객체를 반환합니다.</p>
+
+<h2 id="Syntax">구문</h2>
+
+<pre
+  class="brush: js"><em>domRect</em> = <em>element</em>.getBoundingClientRect();</pre>
+
+<h3 id="Value">값</h3>
+
+<p>반환 값은 padding과 border-width를 포함해 전체 엘리먼트가 들어 있는 가장 작은 사각형인
+  {{domxref("DOMRect")}} 객체입니다. <code>left</code>, <code>top</code>,
+  <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>,
+  <code>width</code>, <code>height</code> 프로퍼티는 전반적인 사각형의 위치와 크기를
+  픽셀 단위로 나타냅니다. <code>width</code>와 <code>height</code>가 아닌 다른 프로퍼티는
+  뷰포트의 top-left에 상대적입니다.
+</p>
+
+<p><img alt="" src="element-box-diagram.png"></p>
+
+<p>메서드가 반환하는 {{domxref("DOMRect")}} 객체의 <code>width</code>와 <code>height</code>
+  프로퍼티는 콘텐츠의 width/height뿐만 아니라 <code>padding</code>과 <code>border-width</code>도
+  포함합니다. 표준 박스 모델에서, 이는 엘리먼트 + <code>padding</code> + <code>border-width</code>의
+  <code>width</code> 또는 <code>height</code> 프로퍼티와 동일합니다. 하지만
+  <code><a href="/ko/docs/Web/CSS/box-sizing">box-sizing: border-box</a></code>가
+  해당 엘리먼트에 설정되어 있으면 이는 <code>width</code> 또는 <code>height</code>와 직접적으로 동일합니다.</p>
+
+<p>반환 값은 해당 엘리먼트의 {{domxref("Element.getClientRects", "getClientRects()")}}가 반환한
+  사각형들의 결합으로 생각해볼 수 있습니다. 해당 엘리먼트에 관계된 CSS border-box들을 예로 들어볼 수 있습니다.</p>
+
+<p>빈 border-box들은 완전히 무시합니다. 모든 엘리먼트의 border-box가 비어있다면 <code>width</code>와
+  <code>height</code>가 0인 사각형을 반환하며 <code>top</code>과 <code>left</code>는 해당 엘리먼트의
+  (콘텐츠 순서에서) 첫 번째 CSS 박스에 대한 border-box의 top-left입니다.</p>
+
+<p>뷰포트 영역(또는 스크롤 가능한 엘리먼트)에서 수행된 스크롤의 정도는 경계 사각형을 계산할 때 고려됩니다.
+  이는 사각형의 경계 모서리(<code>top</code>, <code>right</code>,
+  <code>bottom</code>, <code>left</code>)는 스크롤링 위치가 변경될 때마다 그 값이 변경됨을 의미합니다(이
+  값들은 절대적인 것이 아니라 뷰포트에 상대적이기 때문입니다).
+</p>
+
+<p>문서의 top-left 코너에 상대적인 경계 사각형이 필요하다면, 현재 스크롤링 위치를 <code>top</code>과 <code>left</code>
+  프로퍼티에 추가하여(이 값들은 {{domxref("window.scrollX")}}와 {{domxref("window.scrollY")}}를 사용하여
+  얻을 수 있습니다) 현재 스크롤링 위치로부터 독립적인 경계 사각형을 얻습니다.</p>
+
+<h3 id="Cross-browser_fallback">크로스 브라우저 폴백</h3>
+
+<p>높은 크로스 브라우저 호환성이 필요한 스크립트는 <code>window.scrollX</code>와 <code>window.scrollY</code>
+  대신에 {{domxref("window.pageXOffset")}}와 {{domxref("window.pageYOffset")}}를 사용하면 됩니다.
+  이러한 프로퍼티에 접근할 수 없는 스크립트는 다음과 같은 코드를 사용하면 됩니다.</p>
+
+<pre class="brush: js">// scrollX의 경우
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+// scrollY의 경우
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.scrollTop == 'number' ? t : document.body).scrollTop
+</pre>
+
+<h2 id="Examples">예제</h2>
+
+<h3 id="Basic">기본</h3>
+
+<p>다음 간단한 예제는 간단한 <code>&lt;div&gt;</code> 엘리먼트의 경계 클라이언트 사각형을 나타내는 <code>DOMRect</code>
+  객체를 찾고, 해당 객체의 프로퍼티를 그 아래에 출력합니다.</p>
+
+<pre class="brush: html">&lt;div&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 400px;
+  height: 200px;
+  padding: 20px;
+  margin: 50px auto;
+  background: purple;
+}</pre>
+
+<pre class="brush: js">let elem = document.querySelector('div');
+let rect = elem.getBoundingClientRect();
+for (var key in rect) {
+  if(typeof rect[key] !== 'function') {
+    let para = document.createElement('p');
+    para.textContent  = `${ key } : ${ rect[key] }`;
+    document.body.appendChild(para);
+  }
+}</pre>
+
+<p>{{EmbedLiveSample('Basic', '100%', 640)}}</p>
+
+<p><code>width</code>/<code>height</code>가
+  <code>width</code>/<code>height</code> + <code>padding</code>과 어떻게 같은지 확인하세요.</p>
+
+<p>또한 각각의 경우에서 <code>x</code>/<code>left</code>,
+  <code>y</code>/<code>top</code>, <code>right</code>, <code>bottom</code>의 값이
+  뷰포트의 관련 모서리부터 엘리먼트의 측면까지의 절대 거리와 어떻게 동일한지 확인하세요.</p>
+
+<h4 id="Scrolling">스크롤링</h4>
+<p>이 예제는 문서를 스크롤 할 때 바운딩 클라이언트 사각형이 어떻게 변경되는지를 보여줍니다.</p>
+
+<pre class="brush: html notranslate">
+&lt;div&gt;&lt;/div&gt;
+    &lt;div id="example"&gt;&lt;/div&gt;
+    &lt;div id="controls"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div#example {
+  width: 400px;
+  height: 200px;
+  padding: 20px;
+  margin: 50px auto;
+  background: purple;
+}
+
+body { padding-bottom: 1000px; }
+p { margin: 0; }</pre>
+
+<pre class="brush: js notranslate">function update() {
+  const container = document.getElementById("controls");
+  const elem = document.querySelector('div');
+  const rect = elem.getBoundingClientRect();
+
+  container.innerHTML = '';
+  for (let key in rect) {
+    if(typeof rect[key] !== 'function') {
+      let para = document.createElement('p');
+      para.textContent  = `${ key } : ${ rect[key] }`;
+      container.appendChild(para);
+    }
+  }
+}
+
+document.addEventListener('scroll', update);
+update();</pre>
+
+<p>{{EmbedLiveSample('Scrolling', '100%', 640)}}</p>
+
+
+<h2 id="Specifications">명세</h2>
+
+{{Specifications}}
+
+<h3 id="Notes">참고</h3>
+
+<p>반환된 <code>DOMRect</code> 객체는 최신 브라우저에서 수정될 수 있습니다.
+  <code>DOMRectReadOnly</code>를 효과적으로 반환하는 이전 버전의 브라우저에서는 그렇지 않습니다.
+  IE와 Edge는 그들이 반환하는 <a
+  href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"><code>ClientRect</code></a>
+  에 누락된 프로퍼티를 추가할 수 없으며, 객체는 <code>x</code>와 <code>y</code>를 다시 채우는 것을 방지합니다.</p>
+
+<p>호환성 문제로 인해(아래 참고), <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>
+  프로퍼티에만 의존하는 것이 안전합니다.</p>
+
+<p>반환된 <code>DOMRect</code> 객체의 프로퍼티는 자신의 프로퍼티가 아닙니다. <code>in</code> 연산자와
+  <code>for...in</code>은 반환된 프로퍼티를 찾을 수 있지만 <code>Object.keys()</code>와 같은 다른 API들은
+  그렇지 못합니다. 또한, 예기치 않게 ES2015 및 <code>Object.assign()</code>과 객체 레스트/스프레드와 같은
+  새로운 기능들은 반환된 프로퍼티를 복사하지 못합니다.</p>
+
+<pre class="brush: js">rect = elt.getBoundingClientRect()
+// emptyObj의 결과는 {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect
+</pre>
+
+<p><code>DOMRect</code>의 프로퍼티인 <code>top</code>, <code>left</code>,
+  <code>right</code>, <code>bottom</code>은 객체의 다른 프로퍼티의 값을 사용해 계산됩니다.</p>
+
+<h2 id="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">같이 보기</h2>
+
+<ul>
+  <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>
+  <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN:
+      <code>getBoundingClientRect</code></a></li>
+  <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN:
+      <code>ClientRect</code></a>, an earlier version of <code>DOMRect</code></li>
+</ul>