initial commit

2 files changed, 245 insertions, 0 deletions

diff --git a/files/ko/web/guide/html/content_categories/index.html b/files/ko/web/guide/html/content_categories/index.html
new file mode 100644
index 0000000000..cd6261c446
--- /dev/null
+++ b/files/ko/web/guide/html/content_categories/index.html
@@ -0,0 +1,180 @@
+---
+title: 콘텐츠 카테고리
+slug: Web/Guide/HTML/Content_categories
+tags:
+  - Advanced
+  - Guide
+  - HTML
+  - HTML5
+  - Web
+translation_of: Web/Guide/HTML/Content_categories
+---
+<div>{{HTMLSidebar}}</div>
+
+<p><span class="seoSummary">모든 <a href="/ko/docs/Web/HTML">HTML</a> 요소는 특성을 공유하는 요소끼리 묶는 <strong>콘텐츠 카테고리</strong> 한 가지 이상에 속합니다.</span> 콘텐츠 카테고리는 느슨한 관계로 서로 간에 어떤 관계를 형성하지는 않지만, 카테고리에서 공유하는 동작이나 관련 규칙을 정의하고 설명할 때, 특히 복잡한 세부사항을 포함할 때는 더욱 도움이 됩니다. 요소가 아무런 카테고리에도 속하지 않는 것 역시 가능합니다.</p>
+
+<p>콘텐츠 카테고리의 유형은 다음의 세 가지가 있습니다.</p>
+
+<ul>
+ <li>메인 콘텐츠 카테고리는 여러 요소가 서로 공유하는 일반적인 콘텐츠 규칙을 설명합니다.</li>
+ <li>폼 관련 콘텐츠 카테고리는 입력 폼 관련 요소가 공통으로 가지는 규칙을 설명합니다.</li>
+ <li>특정 콘텐츠 카테고리는 소수의 요소만 공유하는 카테고리를 설명하며, 특정 문맥에서만 유효하기도 합니다.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 콘텐츠 카테고리의 상세 내용과 서로간의 비교는 이 글의 범위를 벗어납니다. 궁금하시다면 <a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content">HTML 명세의 관련 항목</a>을 읽어보세요.</p>
+</div>
+
+<div style="width: 50%;"><a href="https://developer.mozilla.org/@api/deki/files/6244/=Content_categories_venn.png"><img alt="A Venn diagram showing how the various content categories interrelate. The following sections explain these relationships in text." src="https://developer.mozilla.org/@api/deki/files/6244/=Content_categories_venn.png?size=webview"></a></div>
+
+<h2 id="메인_콘텐츠_카테고리">메인 콘텐츠 카테고리</h2>
+
+<h3 id="메타데이터_콘텐츠">메타데이터 콘텐츠</h3>
+
+<p>메타데이터 콘텐츠 카테고리에 속한 요소는 문서의 표현이나 동작을 수정하거나, 다른 문서를 가리키는 링크를 설정하거나, 기타 "대역 외 정보"를 전달합니다.</p>
+
+<p>{{HTMLElement("base")}}, {{obsolete_inline}}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}</p>
+
+<h3 id="플로우_콘텐츠"><a name="flow_content">플로우 콘텐츠</a></h3>
+
+<p>플로우 콘텐츠 카테고리에 속한 요소는 보통 텍스트나 내장 콘텐츠를 포함합니다.</p>
+
+<p>{{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{obsolete_inline}}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}}, 텍스트</p>
+
+<p>특정 조건을 만족하는 경우 플로우 콘텐츠에 속하는 요소도 있습니다.</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}는 {{HTMLElement("map")}} 요소의 자손인 경우.</li>
+ <li>{{HTMLElement("link")}}가 <code><a href="/ko/docs/HTML/Global_attributes#attr-itemprop">itemprop</a></code> 특성을 가지고 있는 경우..</li>
+ <li>{{HTMLElement("meta")}}가 <code><a href="/ko/docs/HTML/Global_attributes#attr-itemprop">itemprop</a></code> 특성을 가지고 있는 경우.</li>
+ <li>{{HTMLElement("style")}}이 {{htmlattrxref("scoped","style")}} 특성을 가지고 있는 경우.</li>
+</ul>
+
+<h3 id="구획_콘텐츠">구획 콘텐츠</h3>
+
+<p>구획 콘텐츠 모델에 속한 요소는 현재 개요에서 {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{anch("제목 콘텐츠")}}의 범위를 정의하는 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽" title="Sections and Outlines of an HTML5 document">구역을 생성</a>합니다<a href="https://developer.mozilla.org/ko/docs/Web/HTML/HTML5_%EB%AC%B8%EC%84%9C%EC%9D%98_%EC%84%B9%EC%85%98%EA%B3%BC_%EC%9C%A4%EA%B3%BD" title="Sections and Outlines of an HTML5 document">.</a></p>
+
+<p>{{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}</p>
+
+<div class="note">
+<p>자신의 내용을 일반 개요와 구별하는 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽" title="Sections and Outlines of an HTML5 document#sectioning root">구획 루트</a> 카테고리와 혼동하지 마세요.</p>
+</div>
+
+<h3 id="제목_콘텐츠">제목 콘텐츠</h3>
+
+<p>제목 콘텐츠는 구획의 제목을 정의합니다. 구획은 {{anch("구획 콘텐츠")}}로 명시할 수도 있고, 제목 자신이 암시적으로 생성할 수도 있습니다.</p>
+
+<p>{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}.</p>
+
+<div class="note">
+<p>{{HTMLElement("header")}} 요소는 보통 제목을 포함하지만 제목 콘텐츠는 아닙니다.</p>
+</div>
+
+<div class="note">
+<p><strong>참고:</strong> {{HTMLElement("hgroup")}} 요소는 HTML5의 완성 전에 W3C HTML에서 제거됐으나, 여전히 WHATWG 명세의 일부이며 대부분의 브라우저에서 부분적으로나마 지원하고 있습니다.</p>
+</div>
+
+<h3 id="구문_콘텐츠">구문 콘텐츠</h3>
+
+<p>구문 콘텐츠는 텍스트와, 텍스트가 포함한 마크업을 정의합니다. 구문 콘텐츠가 모여 문단을 형성합니다.</p>
+
+<p>{{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}}, 공백으로 이루어지지 않은 일반 텍스트.</p>
+
+<p>특정 조건을 만족하는 경우 구문 콘텐츠에 속하는 요소도 있습니다.</p>
+
+<ul>
+ <li>{{HTMLElement("a")}}, 구문 콘텐츠만 포함하는 경우.</li>
+ <li>{{HTMLElement("area")}}, {{HTMLElement("map")}}의 자손인 경우.</li>
+ <li>{{HTMLElement("del")}}, 구문 콘텐츠만 포함하는 경우.</li>
+ <li>{{HTMLElement("ins")}}, 구문 콘텐츠만 포함하는 경우.</li>
+ <li>{{HTMLElement("link")}}, <code><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a></code> 속성을 가지고 있는 경우.</li>
+ <li>{{HTMLElement("map")}}, 구문 콘텐츠만 포함하는 경우.</li>
+ <li>{{HTMLElement("meta")}}, <code><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a></code> 속성을 가지고 있는 경우.</li>
+</ul>
+
+<h3 id="내장_콘텐츠">내장 콘텐츠</h3>
+
+<p>내장 콘텐츠는 다른 리소스를 가져오거나, 콘텐츠를 다른 마크업 언어나 네임스페이스로부터 문서에 삽입합니다.</p>
+
+<p>{{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("picture")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p>
+
+<h3 id="대화형_콘텐츠"><a name="interactive_content">대화형 콘텐츠</a></h3>
+
+<p>대화형 콘텐츠 는 사용자와의 상호작용을 위해 특별하게 설계된 요소를 포함합니다</p>
+
+<p>{{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{deprecated_inline}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</p>
+
+<p>특정 조건을 만족하는 경우 대화형 콘텐츠에 속하는 요소도 있습니다.</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}, {{htmlattrxref("controls", "audio")}} 속성을 가진 경우.</li>
+ <li>{{HTMLElement("img")}}, {{htmlattrxref("usemap", "img")}} 속성을 가진 경우.</li>
+ <li>{{HTMLElement("input")}}, {{htmlattrxref("type", "input")}} 속성이 <code>hidden</code>이 아닌경우.</li>
+ <li>{{HTMLElement("menu")}}, {{htmlattrxref("type", "menu")}} 속성이 <code>toolbar</code>인 경우.</li>
+ <li>{{HTMLElement("object")}}, {{htmlattrxref("usemap", "object")}} 속성을 가진 경우.</li>
+ <li>{{HTMLElement("video")}}, {{htmlattrxref("controls", "video")}} 속성을 가진 경우.</li>
+</ul>
+
+<h3 id="뚜렷한_콘텐츠">뚜렷한 콘텐츠</h3>
+
+<p dir="ltr" id="tw-target-text">내용이 비어있거나 숨겨지지 않은 경우 뚜렷한 콘텐츠입니다. 즉, 렌더링 되며 실질적인 콘텐츠면 뚜렷한 콘텐츠입니다. 플로우 콘텐츠 또는 구문 콘텐츠가 모델인 요소는 적어도 하나의 뚜렷한 노드가 있어야 합니다.</p>
+
+<h3 id="양식_관련_콘텐츠">양식 관련 콘텐츠</h3>
+
+<p>양식 관련 콘텐츠는 양식 소유자가 존재하는 요소로, <code>form</code> 특성이 소유자를 노출합니다. 양식 소유자는 요소의 조상 {{htmlelement("form")}} 요소, 또는 <code>form</code> 특성의 값으로 지정한 요소 ID의 주인입니다.</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{deprecated_inline()}}{{HTMLElement("keygen")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p>양식 관련 콘텐츠는 여러 개의 하위 카테고리를 가집니다.</p>
+
+<dl>
+ <dt><a id="나열됨" name="나열됨">나열됨</a></dt>
+ <dd>{{domxref("HTMLFormElement.elements", "form.elements")}} 및 {{domxref("HTMLFieldSetElement.elements", "fieldset.elements")}} IDL 콜렉션에 나열된 요소. {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}를 포함합니다.</dd>
+ <dt><a id="레이블_가능" name="레이블_가능">레이블 가능</a></dt>
+ <dd>{{HTMLElement("label")}} 요소와 연결할 수 있는 요소. {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}를 포함합니다.</dd>
+ <dt><a id="제출_가능" name="제출_가능">제출 가능</a></dt>
+ <dd>양식을 제출할 때, 양식 데이터셋을 구성할 수 있는 요소. {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}를 포함합니다.</dd>
+ <dt><a id="초기화_가능" name="초기화_가능">초기화 가능</a></dt>
+ <dd>양식을 초기화할 때 영향을 받는 요소. {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}를 포함합니다.</dd>
+</dl>
+
+<h2 id="보조_카테고리">보조 카테고리</h2>
+
+<p>알아두면 유용한 보조 카테고리도 있습니다.</p>
+
+<h3 id="스크립트_지원_요소">스크립트 지원 요소</h3>
+
+<p><strong>스크립트 지원 요소</strong>는 문서의 렌더링 결과에 바로 기여하지 않는 요소로, 대신 스크립트 코드를 직접 포함 또는 명시하거나, 스크립트가 사용할 데이터를 지정하는 방식으로 지원하는 요소입니다.</p>
+
+<p>스크립트 지원 요소는 다음과 같습니다.</p>
+
+<ul>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{HTMLElement("template")}}</li>
+</ul>
+
+<h2 id="투명_콘텐츠_모델">투명 콘텐츠 모델</h2>
+
+<p dir="ltr" id="tw-target-text">어느 요소가 투명 콘텐츠 모델을 가지면 해당 요소의 콘텐츠 구조를 생성할 때, 해당하는 요소를 제거한 후 자식 요소로 대체했음에도 유효한 HTML5가 되도록 해야 합니다.</p>
+
+<p>예를 들어, {{HTMLElement("del")}} 과 {{HTMLELement("ins")}} 요소는 투명합니다:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;We hold these truths to be &lt;del&gt;&lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;self-evident&lt;/ins&gt;.&lt;/p&gt;
+</pre>
+
+<p>올바른 영어는 아니지만, 두 요소를 제거하더라도 HTML은 유효합니다.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;We hold these truths to be &lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt; self-evident.&lt;/p&gt;
+</pre>
diff --git a/files/ko/web/guide/html/content_editable/index.html b/files/ko/web/guide/html/content_editable/index.html
new file mode 100644
index 0000000000..2e039ea976
--- /dev/null
+++ b/files/ko/web/guide/html/content_editable/index.html
@@ -0,0 +1,65 @@
+---
+title: Content Editable
+slug: Web/Guide/HTML/Content_Editable
+tags:
+  - HTML
+  - HTML5
+  - 가이드
+  - 고급
+  - 예제
+  - 웹
+  - 필요컨텐트
+translation_of: Web/Guide/HTML/Editable_content
+---
+<p><span class="seoSummary">HTML5 에서는 어떤 엘러먼트라도 수정이 가능하다. 약간의 JavaScript 이벤트 핸들러들을 사용하는 것만로 당신은 웹페이지를 완전하고 빠른 리치-텍스트 에디터로 변형할 수 있다. 이 문서는 이런 기능성에 대하여 대략의 정보를 제공 한다.</span></p>
+
+<h2 id="호환성">호환성</h2>
+
+<p>Content editable 은 현재 브라우저들과 완전히 호환된다.</p>
+
+<ul>
+ <li>Firefox 3.5+</li>
+ <li>Firefox for Android 19+</li>
+ <li>Chrome 4.0+</li>
+ <li>Internet Explorer 5.5+ *</li>
+ <li>Safari 3.1+</li>
+ <li>Opera 9+</li>
+ <li>iOS Safari 5.0+</li>
+ <li>Android Browser 3.0+</li>
+ <li>Opera Mobile 12.1+</li>
+ <li>Chrome for Android 25+</li>
+</ul>
+
+<p>Opera Mini 는 아직 지원되지 않는다.</p>
+
+<div class="note">
+<p>*대부분의 html elements 를 지원 하지 않는다.</p>
+</div>
+
+<h2 id="어떻게_작동_하는가">어떻게 작동 하는가?</h2>
+
+<p>{{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} 속성을 HTML element 에서 <code>true</code> 로 설정하라. 이 속성은 대부분의 HTML elements 에 사용될 수 있다.</p>
+
+<h2 id="예제들">예제들</h2>
+
+<p>간단한 예제:</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;div contentEditable="true"&gt;
+      This text can be edited by the user.
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+
+<p>LocalStorage 를 이용한 JavaScript 와 합쳐진 작동 예제를 <a class="external" href="http://html5demos.com/contenteditable" title="http://html5demos.com/contenteditable">여기</a>에서 볼 수 있다. 소스는 <a href="http://html5demos.com/contenteditable#view-source">이곳</a>에 있다.</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<pre class="code">user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre>
+
+<p><a href="/en/Midas" title="en/Midas">컨텐트와 상호 작용하는 방법 </a> (오래된 IE 스타일 API) 그리고 <a href="/en/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">이곳</a></p>