initial commit

1 files changed, 67 insertions, 0 deletions

diff --git a/files/ko/web/api/node/firstchild/index.html b/files/ko/web/api/node/firstchild/index.html
new file mode 100644
index 0000000000..105c335e1c
--- /dev/null
+++ b/files/ko/web/api/node/firstchild/index.html
@@ -0,0 +1,67 @@
+---
+title: element.firstChild
+slug: Web/API/Node/firstChild
+tags:
+  - DOM
+  - Gecko
+translation_of: Web/API/Node/firstChild
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
+
+<p>트리에서 노드의 첫 번째 자식이나 <code>null</code>(노드가 자식이 없으면)을 반환합니다.</p>
+
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+
+<pre class="eval"><em>childNode</em> =<em>node</em>.firstChild;
+</pre>
+
+<p><code>childNode</code>는 자식이 있으면 <code>node</code>의 첫 번째 자식 참조이고 없으면 <code>null</code>입니다.</p>
+
+<h3 id=".EC.98.88" name=".EC.98.88">예</h3>
+
+<p>이 예는 <code>firstChild</code>의 쓰임과 공백 노드가 어떻게 이 프로퍼티 사용을 방해하는 지 실제로 보입니다. Gecko DOM에서 공백 처리에 관한 더 많은 정보는 {{ Anch("Notes") }} 절을 보세요.</p>
+
+<pre>&lt;p id="para-01"&gt;
+  &lt;span&gt;First span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+&lt;/script&gt;
+</pre>
+
+<p>위에서, alert은 텍스트 노드가 여는 태그 &lt;p&gt;의 끝과 여는 태그 &lt;span&gt; 사이에 공백을 유지하여 삽입되었기 때문에 '#text'를 보입니다. space 하나에서 여럿, return, tab 등 <strong>어떤</strong> 공백이든 #text 노드에 삽입되게 됩니다.</p>
+
+<p>다른 #text 노드는 닫는 태그 &lt;/span&gt;과 닫는 태그 &lt;/p&gt; 사이에 삽입됩니다.</p>
+
+<p>이 공백을 소스에서 제거하면, #text 노드는 삽입되지 않고 span 요소가 paragraph의 첫 번째 자식이 됩니다.</p>
+
+<pre>&lt;p id="para-01"&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+&lt;/script&gt;
+</pre>
+
+<p>이제 alert은 'SPAN'을 보입니다.</p>
+
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+
+<p></p><p>Gecko 기반 브라우저는 소스 마크업에서 공백을 나타내기 위해 문서 내에 텍스트 노드를 삽입합니다.
+    그러므로 예를 들어 <a href="/ko/docs/Web/API/Node/firstChild" title="트리에서 노드의 첫 번째 자식이나 null(노드가 자식이 없으면)을 반환합니다."><code>Node.firstChild</code></a>나 <a href="/ko/docs/Web/API/Node/previousSibling" title="Node.previousSibling은 읽기전용 속성이며 현재 호출하는 노드가 속해 있는 부모의 childNodes 목록에서 특정 자식 노드를 리턴하거나 childNodes 목록의 첫번째 노드일 경우 Null값을 리턴합니다."><code>Node.previousSibling</code></a>을 통해서 얻은 노드는 작성자가 얻으려 한 실제 요소와는
+    달리 공백 텍스트 노드를 참조할 지도 모릅니다. </p>
+
+    <p>더 많은 정보는 <a class="new" href="/ko/docs/Whitespace_in_the_DOM" rel="nofollow">Whitespace in the DOM</a>과
+    <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>를 보세요.</p><p></p>
+
+<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></p>
+
+<p>{{ languages( { "en": "en/DOM/element.firstChild", "fr": "fr/DOM/element.firstChild", "pl": "pl/DOM/element.firstChild" } ) }}</p>