Rewrite and add IntersectionObserver methods

1 files changed, 42 insertions, 57 deletions

diff --git a/files/ko/web/api/intersectionobserver/observe/index.md b/files/ko/web/api/intersectionobserver/observe/index.md
index 5c10623363..942c42af61 100644
--- a/files/ko/web/api/intersectionobserver/observe/index.md
+++ b/files/ko/web/api/intersectionobserver/observe/index.md
@@ -1,85 +1,70 @@
 ---
 title: IntersectionObserver.observe()
 slug: Web/API/IntersectionObserver/observe
+tags:
+  - API
+  - Intersection Observer
+  - Intersection Observer API
+  - IntersectionObserver
+  - Method
+  - Reference
+browser-compat: api.IntersectionObserver.observe
 translation_of: Web/API/IntersectionObserver/observe
 ---
-<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+{{APIRef("Intersection Observer API")}}
 
-<p><span class="seoSummary">The {{domxref("IntersectionObserver")}} <code><strong>observe()</strong></code> 메서드는 <code>IntersectionObserver</code> 객체가 관찰할 엘리먼트 목록에 단일 엘리먼트를 추가합니다. 하나의 옵저버 객체는 단일한 threshold와 root를 가지지만 복수의 타겟 엘리먼트의 가시성 변화를 관찰할 수 있습니다.</span> 만일 엘리먼트 관찰을 중지하고 싶다면 {{domxref("IntersectionObserver.unobserve()")}} 메서드를 호출하세요.</p>
+{{domxref("IntersectionObserver")}}의 **`observe()`** 메서드는 `IntersectionObserver`의 주시 대상 목록에 요소를 추가합니다. 하나의 감지기는 하나의 루트와 하나의 역치 목록만 가질 수 있지만, 동시에 여러 요소를 주시할 수 있습니다.
 
-<p>특정 엘리먼트의 가시성이 다른 옵저버의 가시성 threshold와 교차할 때({{domxref("IntersectionObserver.thresholds")}} 참조), 옵저버 콜백은 발생한 교차성 변경을 알리는 {{domxref("IntersectionObserverEntry")}} 객체와 함께 실행됩니다.</p>
+요소의 주시를 중단하려면 {{domxref("IntersectionObserver.unobserve()")}}를 호출하세요.
 
-<p>노트. 이 디자인은 복수 엘리먼트의 교차성 변경이 하나의 콜백 실행을 통해 처리되는 것을 허용합니다.</p>
+지정한 주시 대상 요소의 가시성 비율이 감지기의 역치({{domxref("IntersectionObserver.thresholds")}})를 통과하는 순간 감지기 콜백이 호출됩니다. 이때 역치를 통과한 요소를 나타내는 {{domxref("IntersectionObserverEntry")}}의 배열을 콜백 매개변수로 제공합니다. 이런 구조 덕분에 한 번의 콜백 호출만으로 많은 요소의 가시성 변화를 한 번에 처리할 수 있습니다.
 
-<h2 id="문법">문법</h2>
+## 구문
 
-<pre class="syntaxbox"><em>IntersectionObserver</em>.observe(<em>targetElement</em>);</pre>
+```js
+IntersectionObserver.observe(targetElement);
+```
+### 매개변수
 
-<h3 id="Parameters">Parameters</h3>
+- `targetElement`
+  - : 루트 내에서의 가시성 변화를 감지할 {{domxref("element")}}입니다. 루트 요소의 자손이어야 합니다. 루트가 현재 문서의 뷰포트일 경우 이 요소도 문서 내에 위치해야 합니다.
 
-<dl>
- <dt><code>targetElement</code></dt>
- <dd>가시성이 감시될 root 내부의 {{domxref("element")}}. 해당 엘리먼트는 루트 엘리먼트의 자손 노드여야 합니다(혹은 현재 root가 document의 viewport일 때는 현재 document 내부의 엘리먼트여야 합니다).</dd>
-</dl>
+### 반환 값
 
-<h3 id="Return_value">Return value</h3>
+`undefined`.
 
-<p><code>undefined</code>.</p>
+## 예제
 
-<dl>
-</dl>
-
-<h2 id="Examples">Examples</h2>
-
-<p>IntersectionObserver 를 등록한다</p>
-
-<pre>
-// IntersectionObserver 를 등록한다.
+```js
+// IntersectionObserver 등록
 const io = new IntersectionObserver(entries => {
   entries.forEach(entry => {
-    // 관찰 대상이 viewport 안에 들어온 경우 'tada' 클래스를 추가
+    // 주시 대상이 뷰포트 안으로 들어오면 active 클래스 추가
     if (entry.intersectionRatio > 0) {
-      entry.target.classList.add('tada');
+      entry.target.classList.add('active');
     }
-    // 그 외의 경우 'tada' 클래스 제거
+    // 아니면 active 클래스 제거
     else {
-      entry.target.classList.remove('tada');
+      entry.target.classList.remove('active');
     }
   })
 })
 
-// 관찰할 대상을 선언하고, 해당 속성을 관찰시킨다.
+// 주시 대상 선언, 주시 시작
 const boxElList = document.querySelectorAll('.box');
 boxElList.forEach((el) => {
   io.observe(el);
 })
-</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-observe','IntersectionObserver.observe()')}}</td>
-   <td>{{Spec2('IntersectionObserver')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<div>
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{Compat("api.IntersectionObserver.observe")}}</p>
-</div>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{domxref("IntersectionObserver.unobserve()")}}</li>
-</ul>
+```
+
+## 명세
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{domxref("IntersectionObserver.unobserve()")}}