{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"f1e819bd-d5b0-5cf2-b25c-69055fddee93","excerpt":"노드가 뭐야? HTML 문서의 모든 것이 노드. 문서는 곧 노드의 집합. 노드의 종류 문서 노드 document node HTML 문서 전체를 나타내는 노드임. 요소 노드 element node 모든 HTML 요소는 요소 노드. 속성 노드를 가질 수 있는 유일한 노드임. 태그나 element라고 하는 것들. 요소 노드들끼리는 서로 포함 관계 텍스트 노드 text node HTML 문서의 모든 텍스트는 텍스트 노드임. ” 사이가 텍스트 노드. XHTML…","html":"<h2 id=\"노드가-뭐야\"><a href=\"#%EB%85%B8%EB%93%9C%EA%B0%80-%EB%AD%90%EC%95%BC\" aria-label=\"노드가 뭐야 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>노드가 뭐야?</h2>\n<p>HTML 문서의 모든 것이 노드. 문서는 곧 노드의 집합.</p>\n<h2 id=\"노드의-종류\"><a href=\"#%EB%85%B8%EB%93%9C%EC%9D%98-%EC%A2%85%EB%A5%98\" aria-label=\"노드의 종류 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>노드의 종류</h2>\n<ul>\n<li>\n<p>문서 노드 document node</p>\n<p>HTML 문서 전체를 나타내는 노드임.</p>\n</li>\n<li>\n<p>요소 노드 element node</p>\n<p>모든 HTML 요소는 요소 노드. 속성 노드를 가질 수 있는 유일한 노드임.</p>\n<p>태그나 element라고 하는 것들.</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\">ex)\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>head</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>ul</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h1</span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h1</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>ul</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>head</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>body</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>요소 노드들끼리는 서로 포함 관계</p>\n</li>\n<li>\n<p>텍스트 노드 text node</p>\n<p>HTML 문서의 모든 텍스트는 텍스트 노드임.</p>\n<p>'이 안에 있는 부분이 텍스트 노드'</p>\n<p>” 사이가 텍스트 노드. XHTML에서 텍스트 노드는 보통 요소 노드 안에 포함된다.</p>\n</li>\n<li>\n<p>속성 노드 attribute node</p>\n<p>모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음.</p>\n<p>하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않음.</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span> <span class=\"token attr-name\">title</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>nodeName<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>U Can do it<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">></span></span>\n위의 소스에서 보면 p라는 요소노드가 있고\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">></span></span>\n사이에 U Can do it이라는 텍스트 노드가 보인다. p라는 요소 노드 내에 title이\n바로 속성 노드이다.</code></pre></div>\n<p>속성 노드는 항상 요소 노드 태그 내에 포함되어 있다.</p>\n</li>\n<li>\n<p>주석 노드</p>\n<p>HTML 문서의 모든 주석은 주석 노드임.</p>\n</li>\n</ul>\n<h2 id=\"노드의-관계\"><a href=\"#%EB%85%B8%EB%93%9C%EC%9D%98-%EA%B4%80%EA%B3%84\" aria-label=\"노드의 관계 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>노드의 관계</h2>\n<p>HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장됩니다. 이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여줍니다.</p>\n<p>노드 트리는 최상위 레벨인 루트 노드(root node)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려갑니다. 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있습니다.</p>\n<p>노드 트리의 가장 상위에는 단 하나의 루트 노드(root node)가 존재합니다. 루트 노드를 제외한 모든 노드는 단 하나의 부모 노드(parent node)만을 가집니다 모든 요소 노드는 자식 노드(child node)를 가질 수 있습니다.</p>\n<p>형제 노드(sibling node)란 같은 부모 노드를 가지는 모든 노드를 가리킵니다.</p>\n<p>조상 노드(ancestor node)란 부모 노드를 포함해 계층적으로 현재 노드보다 상위에 존재하는 모든 노드를 가리킵니다.</p>\n<p>자손 노드(descendant node)란 자식 노드를 포함해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드를 가리킵니다.</p>\n<h2 id=\"참조한-사이트\"><a href=\"#%EC%B0%B8%EC%A1%B0%ED%95%9C-%EC%82%AC%EC%9D%B4%ED%8A%B8\" aria-label=\"참조한 사이트 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>참조한 사이트</h2>\n<p><a href=\"http://liketh.tistory.com/entry/%EB%85%B8%EB%93%9C%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80\">http://liketh.tistory.com/entry/%EB%85%B8%EB%93%9C%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80</a></p>\n<p><a href=\"http://tcpschool.com/javascript/js_dom_node\">http://tcpschool.com/javascript/js<em>dom</em>node</a></p>\n<h2 id=\"html-태그\"><a href=\"#html-%ED%83%9C%EA%B7%B8\" aria-label=\"html 태그 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>HTML 태그</h2>\n<p><code class=\"language-text\">&lt;h&gt;</code> heading을 의미, 크기에 따라 h1~h6까지 있음</p>\n<p><code class=\"language-text\">&lt;div&gt;</code> content divison을 뜻함</p>\n<p><code class=\"language-text\">&lt;span&gt;</code> 줄바꿈이 없는 content 컨테이너</p>\n<h2 id=\"트리-구조\"><a href=\"#%ED%8A%B8%EB%A6%AC-%EA%B5%AC%EC%A1%B0\" aria-label=\"트리 구조 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>트리 구조</h2>\n<ul>\n<li>\n<p>html 문서 시작</p>\n<ul>\n<li>html</li>\n<li>\n<p>head</p>\n<ul>\n<li>title</li>\n</ul>\n</li>\n<li>\n<p>body</p>\n<ul>\n<li>h1 : hell world</li>\n<li>div : contents here</li>\n<li>span : here too!</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"html에-css-삽입하기\"><a href=\"#html%EC%97%90-css-%EC%82%BD%EC%9E%85%ED%95%98%EA%B8%B0\" aria-label=\"html에 css 삽입하기 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>html에 css 삽입하기</h2>\n<ol>\n<li>inline</li>\n<li>내부 삽입 : <code class=\"language-text\">&lt;Head&gt;</code> 안에,</li>\n<li>외부 삽입 : <code class=\"language-text\">&lt;link&gt;</code>태그 사용</li>\n</ol>\n<p><code class=\"language-text\">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;location.css&quot; /&gt;</code></p>\n<h2 id=\"용어-정의\"><a href=\"#%EC%9A%A9%EC%96%B4-%EC%A0%95%EC%9D%98\" aria-label=\"용어 정의 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>용어 정의</h2>\n<p>태그 : 시작 및 종료 태그와 같이 마크업(Markup)을 의미</p>\n<p>요소 : 의미를 갖는 하나의 구조</p>","frontmatter":{"title":"What is node + html review","date":"August 20, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180820 What is node + html review/","previous":{"fields":{"slug":"/til/20180818 트렐로 작업을 하며 느낀 점/"},"frontmatter":{"title":"트렐로 작업을 하며 느낀 점","category":"TIL"}},"next":{"fields":{"slug":"/til/20180820 IAT interview practice/"},"frontmatter":{"title":"IAT interview practice","category":"TIL"}}}}