1 files changed, 240 insertions, 0 deletions
diff --git a/files/ko/web/api/mutationobserver/index.html b/files/ko/web/api/mutationobserver/index.html
new file mode 100644
index 0000000000..092b7c5634
--- /dev/null
+++ b/files/ko/web/api/mutationobserver/index.html
@@ -0,0 +1,240 @@
+---
+title: MutationObserver
+slug: Web/API/MutationObserver
+translation_of: Web/API/MutationObserver
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>MutationObserver</code> 는 개발자들에게 <a href="/en-US/docs/DOM">DOM</a> 변경 감시를 제공합니다. DOM3 이벤트 기술 설명서에 정의된 <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> 를 대체합니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<h3 id="MutationObserver"><code>MutationObserver()</code></h3>
+
+<p>새 DOM 변경 감시자의 인스턴스화에 대한 생성자.</p>
+
+<pre class="syntaxbox">new MutationObserver(
+  function callback
+);
+</pre>
+
+<h6 id="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>콜백 함수는 각 DOM 변경시 마다 호출될 것입니다. 감시자는 두 인자와 함께 이 함수를 호출할 것입니다. 첫째 인자는 오브젝트들의 배열이며, 오브젝트의 각 형식은 {{domxref("MutationRecord")}} 입니다. 둘째 인자는 이 <code>MutationObserver</code> 인스턴스 입니다.</dd>
+</dl>
+
+<h2 id="인스턴스_함수들">인스턴스 함수들</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#disconnect()">disconnect</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>주</strong>: {{domxref("Node")}}의 대상은 <a href="https://nodejs.org/en/">NodeJS</a> 와 혼동되지 말아야 합니다.</p>
+</div>
+
+<h3 id="observe"><code>observe()</code></h3>
+
+<p>특정 노드에서 DOM 변경의 알림을 받을 수 있도록 <code>MutationObserver</code> 인스턴스를 등록.</p>
+
+<pre class="syntaxbox">void observe(
+  {{domxref("Node")}} target,
+  <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options
+);
+</pre>
+
+<h6 id="파라미터">파라미터</h6>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>DOM 변경을 감시할 {{domxref("Node")}}.</dd>
+ <dt><code>options</code></dt>
+ <dd>DOM 변경이 보고되어야 할 특정 <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> 객체.</dd>
+</dl>
+
+<div class="note">주: observer를 element에 추가하는 것은 addEventListner와 비슷하며, 여러 번 element를 관찰하더라도 차이가 나지 않습니다. element를 두번 관찰한다고해서 observe callback이 두 번 발생하지 않으며, disconnect()를 두번 실행하지 않아도 됩니다. 다시 말해서, 한번 element를 관찰하면 동일한 observer instance로 다시 관찰하더라도 아무 일이 발생하지 않습니다. 물론 callback object가 다르다면 다른 observer를 추가합니다.</div>
+
+<h3 id="disconnect"><code>disconnect()</code></h3>
+
+<p>DOM 변경 알림을 받는 <code>MutationObserver</code> 인스턴스 중지. <a href="#observe()"><code>observe()</code></a> 재사용시까지 감시 콜백은 발동되지 않을 것입니다.</p>
+
+<pre class="syntaxbox">void disconnect();
+</pre>
+
+<h3 id="takeRecords"><code>takeRecords()</code></h3>
+
+<p><code>MutationObserver</code> 인스턴스의 레코드 큐를 비우고 안에 든것을 반환합니다.</p>
+
+<pre class="syntaxbox">Array takeRecords();
+</pre>
+
+<h6 id="반환값">반환값</h6>
+
+<p>{{domxref("MutationRecord")}}들의 배열을 반환.</p>
+
+<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2>
+
+<p><code>MutationObserverInit</code> 는 다음 속성들을 가진 객체입니다:</p>
+
+<div class="note">주: 최소한 <code>childList</code>, <code>attributes</code>, 또는 <code>characterData</code>는 <code>true</code>로 설정해야합니다. 그렇지 않으면 'An invalid or ilegal string was specified' 오류가 발생합니다. </div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">속성</td>
+   <td class="header">설명</td>
+  </tr>
+  <tr>
+   <td><code>childList</code></td>
+   <td>Set to <code>true</code> if additions and removals of the target node's child elements (including text nodes) are to be observed.</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>Set to <code>true</code> if mutations to target's attributes are to be observed.</td>
+  </tr>
+  <tr>
+   <td><code>characterData</code></td>
+   <td>Set to <code>true</code> if mutations to target's data are to be observed.</td>
+  </tr>
+  <tr>
+   <td><code>subtree</code></td>
+   <td>Set to <code>true</code> if mutations to target and target's descendants are to be observed.</td>
+  </tr>
+  <tr>
+   <td><code>attributeOldValue</code></td>
+   <td>Set to <code>true</code> if <code>attributes</code> is set to <code>true</code> and target's attribute value before the mutation needs to be recorded.</td>
+  </tr>
+  <tr>
+   <td><code>characterDataOldValue</code></td>
+   <td>Set to <code>true</code> if <code>characterData</code> is set to <code>true</code> and target's data before the mutation needs to be recorded.</td>
+  </tr>
+  <tr>
+   <td><code>attributeFilter</code></td>
+   <td>Set to an array of attribute local names (without namespace) if not all attribute mutations need to be observed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="사용_예">사용 예</h2>
+
+<p>다음 예제는 <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">이 블로그 글</a>에서 발췌했습니다.</p>
+
+<pre class="brush: js">// 대상 node 선택
+var target = document.getElementById('some-id');
+
+// 감시자 인스턴스 만들기
+var observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    console.log(mutation.type);
+  });
+});
+
+// 감시자의 설정:
+var config = { attributes: true, childList: true, characterData: true };
+
+// 감시자 옵션 포함, 대상 노드에 전달
+observer.observe(target, config);
+
+// 나중에, 감시를 중지 가능
+observer.disconnect();
+</pre>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li>
+ <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li>
+ <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">규격</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('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#mutationobserver', 'MutationObserver')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>크롬</th>
+   <th>파이어폭스 (Gecko)</th>
+   <th>인터넷 익스플로러</th>
+   <th>오페라</th>
+   <th>사파리</th>
+  </tr>
+  <tr>
+   <td>기본 지원</td>
+   <td>18 {{property_prefix("-webkit")}}<br>
+    26</td>
+   <td>{{CompatGeckoDesktop(14)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6.0 {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>안드로이드</th>
+   <th>안드로이드용 크롬</th>
+   <th>파이어폭스 모바일 (Gecko)</th>
+   <th>IE 폰</th>
+   <th>오페라 모바일</th>
+   <th>사파리 모바일</th>
+  </tr>
+  <tr>
+   <td>기본 지원</td>
+   <td>4.4</td>
+   <td>18 {{property_prefix("-webkit")}}<br>
+    26</td>
+   <td>{{CompatGeckoMobile(14)}}</td>
+   <td>11 (8.1)</td>
+   <td>15</td>
+   <td>6 {{property_prefix("-webkit")}}<br>
+    7</td>
+  </tr>
+ </tbody>
+</table>
+</div>