initial commit

4 files changed, 306 insertions, 0 deletions

diff --git a/files/ko/web/api/intersectionobserver/index.html b/files/ko/web/api/intersectionobserver/index.html
new file mode 100644
index 0000000000..762fd3ac09
--- /dev/null
+++ b/files/ko/web/api/intersectionobserver/index.html
@@ -0,0 +1,97 @@
+---
+title: IntersectionObserver
+slug: Web/API/IntersectionObserver
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Intersection Observer API
+  - IntersectionObserver
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - observers
+translation_of: Web/API/IntersectionObserver
+---
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> 의 <code><strong>IntersectionObserver</strong></code> 인터페이스는 대상 요소와 그 상위 요소 혹은 최상위 도큐먼트인 <span class="seoSummary">{{Glossary('viewport')}}</span>와의 교차 영역에 대한 변화를 비동기적으로 감지할 수 있도록 도와줍니다.</p>
+
+<p> <code>IntersectionObserver</code> 가 생성되면, 루트 내에서 설정된 비율 만큼의 가시성을 계속 감시하도록 설정됩니다. 한번 생성되고 나면, 설정 값은 변경될 수 없으므로, 생성된 감시자 객체는 가시성 정도의 변화를 감시하는 데에만 쓰일 수 있습니다. 하지만 동일한 감시자 객체로 여러 대상 요소를 감시할 수 있습니다.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.IntersectionObserver()")}}</dt>
+ <dd><code>IntersectionObserver</code> 객체를 생성합니다. 해당 객체는 대상 요소의 가시성이 하나 이상의 설정된 정도 값을 넘을 경우 주어진 콜백 함수를 실행합니다.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.root")}} {{readonlyinline}}</dt>
+ <dd>대상 요소 ({{domxref("element")}}) 를 감시할 상위 요소. 값을 넣지 않거나 <code>null</code> 일 경우, 최상위 문서의 뷰포트가 사용된다.</dd>
+ <dt>{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}</dt>
+ <dd>교차 정도를 계산할 때 루트의 {{Glossary('bounding box')}} 에 적용되는 offset 사각형으로, 루트의 범위를 효과적으로 늘리거나 줄입니다. 이 특성이 반환한 값은, 생성자를 호출 할 때 내부 요구 사항에 맞게 변경 될 수 있으므로 지정된 값과 같지 않을 수 있습니다. 각 offset 은 픽셀(<code>px</code>) 혹은 퍼센트(<code>%</code>)로 표기될 수 있습니다. 기본 값은 "0px 0px 0px 0px" 입니다.</dd>
+ <dt>{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}</dt>
+ <dd>임계값 목록. 숫자의 오름차순으로 정렬되며, 각 임계 값은 감시하는 대상의 경계 상자 영역과의 교차 비율입니다. 대상에 대한 알림은 해당 대상에 대한 임계 값이 초과 될 때 생성됩니다. 생성자에 값이 전달되지 않을 경우 0이 사용됩니다.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.disconnect()")}}</dt>
+ <dd><code>IntersectionObserver</code> 가 어떤 대상이라도 감시하는 것을 중지합니다.</dd>
+ <dt>{{domxref("IntersectionObserver.observe()")}}</dt>
+ <dd>대상 요소에 대한 감시를 시작합니다.</dd>
+ <dt>{{domxref("IntersectionObserver.takeRecords()")}}</dt>
+ <dd>모든 감시되는 대상의 배열 ({{domxref("IntersectionObserverEntry")}}) 을 리턴합니다.</dd>
+ <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt>
+ <dd>특정 대상 요소를 감시하는 것을 중지합니다.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function(entries) {
+  // If intersectionRatio is 0, the target is out of view
+  // and we do not need to do anything.
+  if (entries[0].intersectionRatio &lt;= 0) return;
+
+  loadItems(10);
+  console.log('Loaded new items');
+});
+// start observing
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));</pre>
+
+<h2 id="Specifications">Specifications</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("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref('MutationObserver')}}</li>
+ <li>{{domxref('PerformanceObserver')}}</li>
+ <li>{{domxref('ResizeObserver')}}</li>
+</ul>
diff --git a/files/ko/web/api/intersectionobserver/intersectionobserver/index.html b/files/ko/web/api/intersectionobserver/intersectionobserver/index.html
new file mode 100644
index 0000000000..6f89828d16
--- /dev/null
+++ b/files/ko/web/api/intersectionobserver/intersectionobserver/index.html
@@ -0,0 +1,87 @@
+---
+title: IntersectionObserver.IntersectionObserver()
+slug: Web/API/IntersectionObserver/IntersectionObserver
+tags:
+  - API
+  - Constructor
+  - Intersection Observer API
+  - IntersectionObserver
+  - Reference
+translation_of: Web/API/IntersectionObserver/IntersectionObserver
+---
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p><span class="seoSummary"><strong><code>IntersectionObserver()</code></strong> 생성자는 새로운 {{domxref("IntersectionObserver")}} 객체를 생성하고 반환합니다.</span> <code>rootMargin</code> 옵션을 지정했다면 값의 구문이 맞는지, 범위가 0.0 이상 1.0 이하인지, 그리고 역치가 오름차순으로 정렬됐는지 검사합니다. 역치 목록이 없다면 배열 <code>[0.0]</code>을 사용합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new IntersectionObserver(<em>callback</em>[, <em>options</em>]);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>대상 요소의 화면에 보이는 부분 백분율이 역치보다 클 때 호출할 함수입니다. 다음의 두 매개변수를 받습니다.
+ <dl>
+  <dt><code>entries</code></dt>
+  <dd>더 보이거나 덜 보이게 되면서 통과한 역치를 나타내는, {{domxref("IntersectionObserverEntry")}} 객체의 배열.</dd>
+  <dt><code>observer</code></dt>
+  <dd>자신을 호출한 {{domxref("IntersectionObserver")}}.</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>옵저버를 조정할 수 있는 옵션 객체. 지정하지 않는다면 옵저버는 문서의 뷰포트를 루트로 사용하고, 여백은 없이, 역치는 0(1픽셀이라도 변하면 콜백을 호출)이 됩니다. 아래 옵션을 자유롭게 지정할 수 있습니다.
+ <dl>
+  <dt><code>root</code></dt>
+  <dd>대상 요소의 조상인 {{domxref ( "Element")}} 객체는 경계 사각형이 뷰포트로 간주됩니다. 루트의 가시 영역에 보이지 않는 대상의 어떤 부분도 가시적 인 것으로 간주되지 않습니다.</dd>
+  <dt><code>rootMargin</code></dt>
+  <dd>교차점을 계산할 때, 계산 목적으로 루트를 줄이거나 늘리는 경우, 루트의 {{Glossary ( 'bounding_box')}}에 추가 할 오프셋 세트를 지정하는 문자열입니다. 구문은 CSS {{cssxref ( "margin")}} 속성의 구문과 거의 동일합니다. 여백의 작동 방식 및 구문에 대한 자세한 내용은 {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}}을 참조하십시오. 기본 설정은 "0px 0px 0px 0px"입니다.</dd>
+  <dt></dt>
+  <dt><code>threshold</code></dt>
+  <dd>관측 대상에 대한 전체 상자 영역(루트)에 대한 교차 영역의 비율을 지정하며, 0.0과 1.0 사이의 숫자 하나 혹은 숫자 배열입니다. 0.0 값은 대상의 단일 픽셀이라도 보여지면, 대상이 보이는 것으로 계산되는 것을 의미합니다. 1.0은 전체 대상 요소가 표시됨을 의미합니다. 임계 값 사용 방법에 대한 자세한 설명은 {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "Thresholds")}}를 참조하십시오. 기본값은 0.0입니다.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>지정된 가시성 <code>threshold</code> 를 통해 지정된 <code>root</code> 내에서 대상 요소의 가시성을 감시하는 데 사용할 수있는 {{domxref ( "IntersectionObserver")}} 인스턴스가 반환됩니다. {{domxref ( "IntersectionObserver.observe", "observe()")}} 메소드를 호출하여 지정된 대상의 가시성 변경을 관찰하십시오.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>설정된 <code>rootMargin</code> 이 유효하지 않은 경우.</dd>
+ <dt><code>RangeError</code></dt>
+ <dd>하나 혹은 그 이상의 <code>threshold</code> 가 0.0 - 1.0 사이가 아닌 경우</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>아래는 요소의 보여지는 부분이 10% 가 넘거나 작아질 때  <code>myObserverCallback</code> 를 호출하는 새로운 intersection observer 를 생성하는 예제입니다.</p>
+
+<pre class="brush: js">let observer = new IntersectionObserver(myObserverCallback,
+                   {"threshold": 0.1});</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.IntersectionObserver.IntersectionObserver")}}</p>
diff --git a/files/ko/web/api/intersectionobserver/observe/index.html b/files/ko/web/api/intersectionobserver/observe/index.html
new file mode 100644
index 0000000000..5ceefe8d77
--- /dev/null
+++ b/files/ko/web/api/intersectionobserver/observe/index.html
@@ -0,0 +1,65 @@
+---
+title: IntersectionObserver.observe()
+slug: Web/API/IntersectionObserver/observe
+translation_of: Web/API/IntersectionObserver/observe
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">The {{domxref("IntersectionObserver")}} <code><strong>observe()</strong></code> 메서드는 <code>IntersectionObserver</code> 객체가 관찰할 엘리먼트 목록에 단일 엘리먼트를 추가합니다. 하나의 옵저버 객체는 단일한 threshold와 root를 가지지만 복수의 타겟 엘리먼트의 가시성 변화를 관찰할 수 있습니다.</span> 만일 엘리먼트 관찰을 중지하고 싶다면 {{domxref("IntersectionObserver.unobserve()")}} 메서드를 호출하세요.</p>
+
+<p>특정 엘리먼트의 가시성이 다른 옵저버의 가시성 threshold와 교차할 때({{domxref("IntersectionObserver.thresholds")}} 참조), 옵저버 콜백은 발생한 교차성 변경을 알리는 {{domxref("IntersectionObserverEntry")}} 객체와 함께 실행됩니다.</p>
+
+<p>노트. 이 디자인은 복수 엘리먼트의 교차성 변경이 하나의 콜백 실행을 통해 처리되는 것을 허용합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>IntersectionObserver</em>.observe(<em>targetElement</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>targetElement</code></dt>
+ <dd>가시성이 감시될 root 내부의 {{domxref("element")}}. 해당 엘리먼트는 루트 엘리먼트의 자손 노드여야 합니다(혹은 현재 root가 document의 viewport일 때는 현재 document 내부의 엘리먼트여야 합니다).</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p><code>undefined</code>.</p>
+
+<dl>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>&lt;&lt;&lt;...&gt;&gt;&gt;</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.observe")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("IntersectionObserver.unobserve()")}}</li>
+</ul>
diff --git a/files/ko/web/api/intersectionobserver/root/index.html b/files/ko/web/api/intersectionobserver/root/index.html
new file mode 100644
index 0000000000..16ae5eaad2
--- /dev/null
+++ b/files/ko/web/api/intersectionobserver/root/index.html
@@ -0,0 +1,57 @@
+---
+title: IntersectionObserver.root
+slug: Web/API/IntersectionObserver/root
+translation_of: Web/API/IntersectionObserver/root
+---
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p><span class="seoSummary">{{domxref("IntersectionObserver")}} 인터페이스의 read-only 속성인 <strong><code>root</code></strong>는 옵저버의 타겟 엘리먼트가 속한 화면의 경계, 즉 {{Glossary("viewport")}}의 {{Glossary("bounding box")}} 처럼 취급되는 {{domxref("Element")}} 이나 {{domxref("Document")}} 를 식별합니다. </span>만일 <code>root</code>가 <code>null</code> 이라면 화면 경계는 실제 document viewport가 사용됩니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><var><code>var <em>root</em> = </code>intersectionObserver</var>.root;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>{{domxref("Element")}} 이나 {{domxref("Document")}} 객체로, 해당 객체의 bounding box는 observer에 의해 관찰되는 대상 요소가 화면상에 얼마나 보여지는가를 가늠할 뷰포트의 경계로 사용됩니다.</p>
+
+<p>사각형 경계의 교차성, {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} 객체 생성시에 설정된 임의의 margin에 의한 offset, 대상 요소의 경계에서 타겟 요소와 겹쳐진 모든 요소나 다른 객체의 경계를 제외한 것이 대상 요소의 가시성 계산에 고려됩니다.</p>
+
+<p>만일 <code>root</code> 가 <code>null</code>이라면 현재 document가 root로 사용되며, 그것의 viewport의 경계(즉 document의 노출 영역)가 root 의 경계로 사용됩니다.</p>
+
+<h2 id="사용예">사용예</h2>
+
+<p>이 예제는 intersection observer의 root 요소의 {{cssxref("border")}}를 2픽셀 너비의 녹색 라인으로 설정합니다.</p>
+
+<pre class="brush: js">observer.root.style.border = "2px solid #44aa44";
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.root")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></li>
+</ul>