initial commit

22 files changed, 2673 insertions, 0 deletions

diff --git a/files/ko/web/api/element/accesskey/index.html b/files/ko/web/api/element/accesskey/index.html
new file mode 100644
index 0000000000..f3206eae4b
--- /dev/null
+++ b/files/ko/web/api/element/accesskey/index.html
@@ -0,0 +1,34 @@
+---
+title: Element.accessKey
+slug: Web/API/Element/accessKey
+tags:
+  - API
+  - Access Keys
+  - DOM
+  - Hotkeys
+  - NeedsContent
+  - 레퍼런스
+  - 속성
+  - 엘리먼트
+  - 키보드 단축키
+translation_of: Web/API/HTMLElement/accessKey
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Element.accessKey</strong></code> 속성은 주어진 사용자가 눌러 주어진 엘리먼트로 이동할 수 있는 키 입력 세트입니다.</p>
+
+<div class="note">
+<p><code>Element.accessKey</code> 속성은 브라우저에 이미 바인딩 된 키와의 여러 충돌로 인해 거의 사용되지 않습니다. 이를 해결하기 위해, 브라우저는 다른 "적절한" 키(예, <kbd>Alt</kbd> + accesskey)와 함께 키가 눌렸을 때동작하도록 구현하였습니다.</p>
+</div>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Element.accessKey")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/accesskey">HTML 전역 속성: accesskey</a></li>
+</ul>
diff --git a/files/ko/web/api/element/attributes/index.html b/files/ko/web/api/element/attributes/index.html
new file mode 100644
index 0000000000..53f9f8f0cf
--- /dev/null
+++ b/files/ko/web/api/element/attributes/index.html
@@ -0,0 +1,72 @@
+---
+title: element.attributes
+slug: Web/API/Element/attributes
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Element/attributes
+---
+<p>{{ ApiRef() }}</p>
+<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
+<p>주어진 요소의 속성 모음(collection)을 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">var<i>attrs</i> =<i>element</i>.attributes;
+</pre>
+<p>반환하는 개체는 <code>Attr</code> 노드를 포함하는 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1780488922">NamedNodeMap</a> 형입니다. 요소가 지정된 속성이 없으면, 반환하는 개체는 길이가 0입니다. 이 속성은 읽기 전용입니다.</p>
+<h3 id=".EC.98.88" name=".EC.98.88">예</h3>
+<pre class="eval">// 문서에서 첫 &lt;p&gt; 요소 얻기
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+</pre>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<p>모음의 항목은 이름과 찾아보기(index)로 접근할 수 있습니다. <code>NodeList</code>와는 달리, <code>NamedNodeMap</code>은 항목을 어떤 특정 순서로 유지하지 않음을 주의하세요.</p>
+<p>여러분은 문서에서 "p1" 요소의 모든 속성값을 찍는 다음 예에서처럼 요소의 속성을 열거(enumerate)할 때 오직 찾아보기로 접근(access by index)을 써야 합니다.</p>
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;html&gt;
+
+ &lt;head&gt;
+  &lt;title&gt;Attributes example&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+   function showFirstAttr()
+   {
+    var firstPara = document.getElementById("p1");
+    var outputText = document.getElementById("result");
+
+    // 먼저, paragraph에 어떤 속성이 있는지 검증
+    if (firstPara.hasAttributes())
+    {
+      var attrs = firstPara.attributes;
+      var text = "";
+      for(var i=attrs.length-1; i&gt;=0; i--) {
+        text += attrs[i].name + "-&gt;" + attrs[i].value;
+      }
+      outputText.value = text;
+    } else {
+      outputText.value = "No attributes to show"
+    };
+   }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+&lt;body&gt;
+ &lt;p id="p1" style="color: green;"&gt;Sample Paragraph&lt;/p&gt;
+ &lt;form action=""&gt;
+  &lt;p&gt;&lt;input type="button" value="Show first attribute name and value"
+      onclick="showFirstAttr();"&gt;
+  &lt;input id="result" type="text" value=""&gt;&lt;/p&gt;
+ &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p><code>NamedNodeMap</code>은 배열처럼 반복될 수 있지만, <code>join</code>, <code>split</code> 등과 같은 <code>Array</code>에 있는 어떤 특수 메소드는 없습니다.</p>
+<p>이름으로 특정 속성에 접근하려면, <a href="ko/DOM/element.getAttribute">getAttribute</a> 메소드를 쓰세요.</p>
+<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-84CF096">W3C DOM Level 2 Core: attributes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-84CF096">W3C DOM Level 3 Core: attributes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1780488922">W3C DOM Level 3 NamedNodeMap interface</a></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/element.attributes", "fr": "fr/DOM/element.attributes", "pl": "pl/DOM/element.attributes" } ) }}</p>
diff --git a/files/ko/web/api/element/classlist/index.html b/files/ko/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..49b710c2be
--- /dev/null
+++ b/files/ko/web/api/element/classlist/index.html
@@ -0,0 +1,285 @@
+---
+title: Element.classList
+slug: Web/API/Element/classList
+tags:
+  - API
+  - DOM
+  - 레퍼런스
+  - 속성
+  - 엘리먼트
+  - 읽기 전용
+translation_of: Web/API/Element/classList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Element.classList</strong></code>는 엘리먼트의 클래스 속성의 컬렉션인 활성 {{domxref("DOMTokenList")}}를 반환하는 읽기 전용 프로퍼티이다.</p>
+
+<p><code>classList</code> 사용은 공백으로 구분된 문자열인 {{domxref("element.className")}}을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox" dir="rtl">const <var>elementClasses</var> = elementNodeReference.classList;
+</pre>
+
+<p><em>elementClasses</em>는 <em>elementNodeReference</em>의 클래스 속성을 나타내는 {{domxref("DOMTokenList")}}이다. 만약 클래스 속성이 설정되어 있지 않거나 비어있다면 <em>elementClasses.length</em>는 <code>0</code>을 반환한다. <code>element.classList</code> 그 자체는 읽기 전용 프로퍼티지만 <code>add()</code>와 <code>remove()</code> 메서드를 이용하여 변형할 수 있다.</p>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt><code>add( String [, String [, ...]] )</code></dt>
+ <dd>지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 <code>class</code> 속성에 이미 존재한다면 무시한다.</dd>
+ <dt><code>remove( String [, String [, ...]] )</code></dt>
+ <dd>지정한 클래스 값을 제거한다.</dd>
+ <dd>
+ <div class="note"><strong>노트:</strong> 존재하지 않는 클래스를 제거하는 것은 <strong>에러를 발생시키지 않습니다.</strong></div>
+ </dd>
+ <dt><code><strong>item</strong>( Number )</code></dt>
+ <dd>콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.</dd>
+ <dt><code><strong>toggle</strong>( String [, force] )</code></dt>
+ <dd>하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 <code>false</code>를 반환하며, 존재하지 않으면 클래스를 추가하고 <code>true</code>를 반환한다.</dd>
+ <dd>두번째 인수가 있을 때: 두번째 인수가 <code>true</code>로 평가되면 지정한 클래스 값을 추가하고 <code>false</code>로 평가되면 제거한다.</dd>
+ <dt><code>contains( String )</code></dt>
+ <dd>지정한 클래스 값이 엘리먼트의 <code>class</code> 속성에 존재하는지 확인한다.</dd>
+ <dt><code>replace( oldClass, newClass )</code></dt>
+ <dd>존재하는 클래스를 새로운 클래스로 교체한다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>const div = document.createElement('div');
+div.className = 'foo';
+
+// our starting state: &lt;div class="foo"&gt;&lt;/div&gt;
+console.log(div.outerHTML);
+
+// use the classList API to remove and add classes
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// &lt;div class="anotherclass"&gt;&lt;/div&gt;
+console.log(div.outerHTML);
+
+// if visible is set remove it, otherwise add it
+div.classList.toggle("visible");
+
+// add/remove visible, depending on test conditional, i less than 10
+div.classList.toggle("visible", i &lt; 10 );
+
+console.log(div.classList.contains("foo"));
+
+// add or remove multiple classes
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// add or remove multiple classes using spread syntax
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// replace class "foo" with class "bar"
+div.classList.replace("foo", "bar");</pre>
+
+<div class="note">
+<p>파이어폭스 26 이전의 버전에서는 add/remove/toggle 메서드에서 여러 인수의 사용을 구현하지 않았다. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a> 링크를 참조하라.</p>
+</div>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>The legacy <code><a href="https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)">onpropertychange</a></code> event can be used to create a living <code>classList</code> mockup thanks to a <code>Element.prototype.className</code> property that fires the specified event once it is changed.</p>
+
+<p>The following polyfill for both <code>classList</code> and <code>DOMTokenList</code> ensures <strong>full</strong> compliance (coverage) for all standard methods and properties of <code>Element.prototype.classList</code> for <strong>IE10</strong>-<strong>IE11 </strong>browsers plus <em>nearly</em> compliant behavior for <strong>IE 6-9</strong>. Check it out:</p>
+
+<pre>// 1. String.prototype.trim polyfill
+if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
+(function(window){"use strict"; // prevent global namespace pollution
+if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
+var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
+  if (V === "") throw new DOMException(
+    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
+  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
+    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
+}
+// 2. Implement the barebones DOMTokenList livelyness polyfill
+if (typeof DOMTokenList !== "function") (function(window){
+    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
+    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
+    function DOMTokenList(){
+        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
+    }
+    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
+    DOMTokenList.prototype.add = function(){
+        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
+            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
+                if (this[i] === val) continue a; else resStr += " " + this[i];
+            this[Len] = val, proto.length += 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    DOMTokenList.prototype.remove = function(){
+        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
+            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
+                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
+            if (!is) continue;
+            delete this[Len], proto.length -= 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    window.DOMTokenList = DOMTokenList;
+    function whenPropChanges(){
+        var evt = window.event, prop = evt.propertyName;
+        if ( !skipPropChange &amp;&amp; (prop==="className" || (prop==="classList" &amp;&amp; !defineProperty)) ) {
+            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
+            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
+            var oldLen = protoObjProto.length;
+            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
+                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
+                resTokenList[cI-sub] = tokens[cI];
+            }
+            for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            if(prop !== "classList") return;
+            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
+            skipPropChange = 0, resTokenList.length = tokens.length - sub;
+        }
+    }
+    function polyfillClassList(ele){
+        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
+        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
+        allowTokenListConstruction = 1;
+        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
+        finally { allowTokenListConstruction = 0 }
+        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
+        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
+            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
+            this[cI-sub] = toks[cI];
+        }
+        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
+        if (defineProperty) { defineProperty(ele, "classList", { // IE8 &amp; IE9 allow defineProperty on the DOM
+            enumerable:   1, get: function(){return resTokenList},
+            configurable: 0, set: function(newVal){
+                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
+                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
+                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
+                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
+                    resTokenList[cI-sub] = toks[cI];
+                }
+                for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            }
+        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
+            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
+        }); defineProperty(protoObjProto, " uCL", {
+            enumerable: 0, configurable: 0, writeable: 0, value: ele
+        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
+        ele.attachEvent( "onpropertychange", whenPropChanges );
+    }
+    try { // Much faster &amp; cleaner version for IE8 &amp; IE9:
+        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
+        window.Object.defineProperty(window.Element.prototype, "classList", {
+            enumerable: 1,   get: function(val){
+                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
+                                 return this.classList;
+                             },
+            configurable: 0, set: function(val){this.className = val}
+        });
+    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
+        window[" uCL"] = polyfillClassList;
+        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
+        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
+            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' + //  IE6
+            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' //IE7-8
+        );
+    }
+})(window);
+// 3. Patch in unsupported methods in DOMTokenList
+(function(DOMTokenListProto, testClass){
+    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
+        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
+    };
+    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
+        if (arguments.length &gt; 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
+        var oldValue = this.value;
+        return (this.remove(oldValue), oldValue === this.value &amp;&amp; (this.add(val), true) /*|| false*/);
+    };
+    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
+        DOMTokenListProto.replace = function(oldToken, newToken){
+            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
+            var oldValue = this.value;
+            return (this.remove(oldToken), this.value !== oldValue &amp;&amp; (this.add(newToken), true));
+        };
+    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
+        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
+        return false;
+    };
+    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
+        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
+        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
+    };
+    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: [nextIndex, that[nextIndex]], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: that[nextIndex], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: nextIndex, done: false} : {done: true};
+        }};
+    };
+})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
+})(window);
+</pre>
+
+<h3 id="Caveats">Caveats</h3>
+
+<p>The polyfill is limited in functionality. It's currently unable to polyfill out-of-document-elements (e.g. elements created by <code>document.createElement</code> before they are appended to a parent node) in IE6-7.</p>
+
+<p>However, it should work just fine in IE9. A major discrepancy between the polyfilled version of <code>classList</code> and the W3 specs is that for IE6-8, there is no way to create an immutable object (an object whose properties cannot be directly modified). In IE9, however, it is possible through extending the prototype, freezing the visible object, and overwritting native property methods. However, such actions would not work in IE6-IE8 and, in IE9, slow the performance of the entire webpage to a snail's crawl, making these modifications completely impractical for this polyfill.</p>
+
+<p>A minor note is that in IE6-7, this polyfill uses the <code>window[" uCL"]</code> property on the window object for communicating with the CSS expressions, the <code>x-uCLp</code> css property on all elements, and the <code>element[" uCL"]</code> property on all elements to allow garbage collection and boost performance. In all polyfilled browsers (IE6-9), an additional <code>element[" uCLp"]</code> property is added to element to ensure standards compliant prototyping, and a <code>DOMTokenList[" uCL"]</code>property is added to each <code>element["classList"]</code> object to ensure that the DOMTokenList is bounded to its own element.</p>
+
+<h2 id="명세">명세</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", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Element.classList")}}</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>{{domxref("element.className")}}</li>
+ <li>{{domxref("DOMTokenList")}}</li>
+</ul>
diff --git a/files/ko/web/api/element/classname/index.html b/files/ko/web/api/element/classname/index.html
new file mode 100644
index 0000000000..866678adb2
--- /dev/null
+++ b/files/ko/web/api/element/classname/index.html
@@ -0,0 +1,122 @@
+---
+title: Element.className
+slug: Web/API/Element/className
+translation_of: Web/API/Element/className
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="개요">개요</h2>
+
+<p><strong>className</strong> 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className;
+<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
+
+<ul>
+ <li><var>cName은 현재 요소의 클래스 혹은 공백으로 구분된 클래스들을 표현하는 문자열 변수이다.</var></li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">let elm = document.getElementById('item');
+
+if(elm.className === 'active'){
+    elm.className = 'inactive';
+} else {
+    elm.className = 'active';
+}</pre>
+
+<h2 id="Notes" name="Notes">주의</h2>
+
+<p>많은 언어에서 DOM 조작을 위해 사용되는 "class " 키워드와의 혼란을 줄이기 위하여 class 대신 className이라는 프로퍼티 명을 사용한다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세서</th>
+   <th scope="col">상태</th>
+   <th scope="col">주석</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="살펴보기">살펴보기</h2>
+
+<ul>
+ <li>{{domxref("element.classList")}}</li>
+</ul>
diff --git a/files/ko/web/api/element/click_event/index.html b/files/ko/web/api/element/click_event/index.html
new file mode 100644
index 0000000000..97a03f2921
--- /dev/null
+++ b/files/ko/web/api/element/click_event/index.html
@@ -0,0 +1,227 @@
+---
+title: click
+slug: Web/API/Element/click_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+translation_of: Web/API/Element/click_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>click</code></strong> 이벤트는 포인팅 디바이스 버튼(일반적으로 마우스 기본 버튼)이 하나의 요소(엘리먼트)에서 눌려지고 놓을 때 시작합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Sync / Async</th>
+   <td>Sync</td>
+  </tr>
+  <tr>
+   <th>Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Cancelable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Target</th>
+   <td>{{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <th>Composed</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Default Action</th>
+   <td>Varies</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="속성">속성</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>이벤트 타겟 (DOM 트리 내에서의 최상위 타겟).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>이벤트의 타입.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>이벤트가 정상적으로 버블을 발생시키는지 여부</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>이벤트 취소 가능 여부</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("Document.defaultView")}} (문서의 <code>window</code>)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>짧은 시간 내에 발생한 연속 클릭 수로, 1씩 증가합니다.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>이벤트 리스너가 연결된 노드.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td><code>ouseover</code>, <code>mouseout</code>, <code>mouseenter</code>, <code>mouseleave</code> 이벤트: 이벤트에 대한 보조 타겟 (<code>mouseenter</code> 의 경우는 <code>mouseleave</code> 타겟). 그렇지 않으면 <code>null을</code> 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td><code>long</code></td>
+   <td>글로벌(스크린) 좌표에서 마우스 포인터의 X 좌표.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td><code>long</code></td>
+   <td>글로벌(스크린) 좌표에서 마우스 포인터의 Y 좌표.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td><code>long</code></td>
+   <td>로컬(DOM 컨텐츠) 좌표에서 마우스 포인터의 X 좌표.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td><code>long</code></td>
+   <td>로컬(DOM 컨텐츠) 좌표에서 마우스 포인터의 Y 좌표.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td><code>unsigned short</code></td>
+   <td>마우스 이벤트가 발생했을 때 누른 버튼 번호: 왼쪽 버튼=0, 가운데 버튼=1 (있다면), 오른쪽 버튼=2. 왼손잡이용 마우스의 경우 버튼 동작을 반대로하면, 값은 오른쪽에서 왼쪽으로 읽습니다.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td><code>unsigned short</code></td>
+   <td>마우스 이벤트가 발생했을 때 눌려진 버튼: 왼쪽 버튼=1, 오른쪽 버튼=2, 가운데(휠) 버튼=4, 4번째 버튼(일반적으로 브라우저의 뒤로가기 버튼)=8, 5번째 버튼 (일반적으로 앞으로가기 버튼)=16. 두개 이상의 버튼을 누르면, 값의 논리합이 반환됩니다. 예를 들어 왼쪽 버튼과 오른쪽 버튼을 누르면 3이 반환됩니다. (1 | 2). <a href="/ko/docs/Web/API/MouseEvent">보다 자세한건 여기를 참조하세요</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td><code>float</code></td>
+   <td>이벤트를 발생시킬 때 터치 또는 탭 장치에 적용되는 압력의 양; 이 값의 범위는 0.0(최소 압력)과 1.0(최대 압력) 사이 입니다.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>이벤트가 발생했을 때 컨트롤 키가 눌러져 있으면 <code>true</code> 그렇지 않으면 <code>false</code> 를 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>이벤트가 발생했을 때 시프트 키가 눌러져 있으면 <code>true</code> 그렇지 않으면 <code>false</code> 를 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>이벤트가 발생했을 때 알트 키가 눌러져 있으면 <code>true</code> 그렇지 않으면 <code>false</code> 를 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>이벤트가 발생했을 때 메타 키가 눌러져 있으면 <code>true</code> 그렇지 않으면 <code>false</code> 를 반환합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 {{htmlelement("button")}}의 연속한 클릭 수를 표시합니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button&gt;Click&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const button = document.querySelector('button');
+
+button.addEventListener('click', event =&gt; {
+  button.innerHTML = `클릭 수: ${event.detail}`;
+});
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>빠르고 반복적인 클릭으로 카운터를 늘려보세요. 클릭 중간에 쉬면 숫자가 초기화됩니다.</p>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<h2 id="명세">명세</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('UI Events', '#event-type-click')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td>Specifies this event as composed.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-click', 'click')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Element.click_event")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("GlobalEventHandlers.onclick")}}</li>
+ <li>{{event("mousedown")}}</li>
+ <li>{{event("mouseup")}}</li>
+ <li>{{event("mousemove")}}</li>
+ <li>{{event("click")}}</li>
+ <li>{{event("dblclick")}}</li>
+ <li>{{event("mouseover")}}</li>
+ <li>{{event("mouseout")}}</li>
+ <li>{{event("mouseenter")}}</li>
+ <li>{{event("mouseleave")}}</li>
+ <li>{{event("contextmenu")}}</li>
+</ul>
diff --git a/files/ko/web/api/element/clientheight/index.html b/files/ko/web/api/element/clientheight/index.html
new file mode 100644
index 0000000000..764e72b18d
--- /dev/null
+++ b/files/ko/web/api/element/clientheight/index.html
@@ -0,0 +1,70 @@
+---
+title: Element.clientHeight
+slug: Web/API/Element/clientHeight
+translation_of: Web/API/Element/clientHeight
+---
+<p>{{ APIRef() }}</p>
+
+<p><code>읽기 전용 속성인<strong> Element.clientHeight</strong>은</code> 엘리먼트의 내부 높이를 픽셀로 반환합니다. 이 내부 높이라는 것은 내부 여백(padding)을 포함하지만, 수평 스크롤바의 높이, 경계선, 또는 외부 여백(margin)은 포함하지 않습니다.</p>
+
+<p><code>clientHeight는 CSS상의 높이 + CSS상의 내부 여백 - 수평 스크롤바의 높이(존재하는 경우에만)로 </code> 계산됩니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 이 속성은 integer로 반올림됩니다. 소수점이 포함된 값이 필요하다면, {{ domxref("element.getBoundingClientRect()") }}을 사용하시기 바랍니다.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">구문</h2>
+
+<pre class="syntaxbox">var <var>h</var> = <var>element</var>.clientHeight;</pre>
+
+<p><code><var>h는</var></code> 엘리먼트의 높이를 나타내는 픽셀 단위의 integer입니다.</p>
+
+<h2 id="Example" name="Example">예</h2>
+
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+
+<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+
+<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/" rel="freelink">http://www.best-cat-art.com/</a></p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -20px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em></div>
+
+<p style="margin-top: 270px;"> </p>
+
+<h2 id="Specification" name="Specification">스펙 정의</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('CSSOM View', '#dom-htmlelement-clientheight', 'clientheight')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">주의</h3>
+
+<p><code>clientHeight는 </code>Internet Explorer의 객체 모델에서 소개된 속성입니다.</p>
+
+<h2 id="See_Also" name="See_Also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Element.offsetHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements">MSDN Determining the dimensions of elements</a></li>
+</ul>
diff --git a/files/ko/web/api/element/clientleft/index.html b/files/ko/web/api/element/clientleft/index.html
new file mode 100644
index 0000000000..9e7afd0a4e
--- /dev/null
+++ b/files/ko/web/api/element/clientleft/index.html
@@ -0,0 +1,66 @@
+---
+title: Element.clientLeft
+slug: Web/API/Element/clientLeft
+translation_of: Web/API/Element/clientLeft
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p>엘리먼트의 왼쪽 테두리의 너비 (픽셀 단위)입니다. 엘리먼트의 텍스트 방향이 오른쪽에서 왼쪽이고 오버플로로 인해 왼쪽 수직 스크롤 막대가 렌더링되는 경우 수직 스크롤 막대의 너비가 포함됩니다. <code>clientLeft</code>는 왼쪽 여백 또는 왼쪽 패딩을 포함하지 않습니다. <code>clientLeft</code>는 읽기 전용입니다.</p>
+
+<p><a href="en/Gecko">Gecko</a> 기반 응용 프로그램은 Gecko 1.9부터 clientLeft를 지원합니다. (<a href="en/Firefox_3">Firefox 3</a>, {{ Bug(111207) }}에서 구현됨). 이 속성은 Firefox 2 이전 버전은 지원하지 않습니다.</p>
+
+<p><a href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> 환경 설정</a>이 1 또는 3으로 설정되고 텍스트 방향이 RTL로 설정된 경우 세로 스크롤 막대가 왼쪽에 배치되며 이는 clientLeft가 계산되는 방식에 영향을줍니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 이 속성은 값을 정수로 반올림합니다. 소수점 단위 값이 필요할 경우, {{ domxref("element.getBoundingClientRect()") }}을 사용하십시오.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>left</var> = <var>element</var>.clientLeft;
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<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('CSSOM View', '#dom-element-clientleft', 'clientLeft')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.clientLeft")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p><code>clientLeft</code> was first introduced in the MS IE DHTML object model.</p>
+
+<p>The position of the vertical scrollbar in right–to–left text direction set on the element will depend on the <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> preference</a></p>
+
+<p>When element has <code>display: inline</code>, then <code>clientLeft</code> returns <code>0</code> regardless of the element's border.</p>
diff --git a/files/ko/web/api/element/closest/index.html b/files/ko/web/api/element/closest/index.html
new file mode 100644
index 0000000000..2bafcaa294
--- /dev/null
+++ b/files/ko/web/api/element/closest/index.html
@@ -0,0 +1,145 @@
+---
+title: Element.closest()
+slug: Web/API/Element/closest
+translation_of: Web/API/Element/closest
+---
+<div>{{APIRef('DOM')}}</div>
+
+<div></div>
+
+<div>기준 {{domxref("Element")}} 에서부터 <code><strong>closest()</strong></code> 메소드를 통해 자신부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색한다(문서 루트까지 이동). 이 중 가장 가깝게 조건에 만족한 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 <code>null</code> 값을 반환한다.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>closestElement</var> = <var>targetElement</var>.closest(<var>selectors</var>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<ul>
+ <li><code><var>selectors</var></code> CSS 선택자가 들어가는 {{domxref("DOMString")}} 개체 문자열, 예)<br>
+  <code>"p:hover, .toto + q"</code>.</li>
+</ul>
+
+<h3 id="Result_value">Result value</h3>
+
+<ul>
+ <li><code><var>closestElement</var></code> 기준 요소를 포함하여 부모 요소 단위로 선택자 조건에 가장 가까운 {{domxref("Element")}} 객체를 가져오며, <code>null</code> 값이 될 수 있다.</li>
+</ul>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{exception("SyntaxError")}} : CSS 선택자 (<code><var>selectors</var></code>)가 올바른 선택자 식이 아닐 경우.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div id="div-01"&gt;Here is div-01
+    &lt;div id="div-02"&gt;Here is div-02
+      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// id=div-02 조건이 만족하므로 속성을 가진 부모 요소가 반환된다.
+
+var r2 = el.closest("div div");
+// div 요소에 만족한 요소 중 div 자식을 가리키므로, id=div-03 자신이 만족된다.
+
+var r3 = el.closest("article &gt; div");
+// 가장 가까운 article 요소 바로 하위의 div 요소 id=div-01 속성을 가진 요소가 반환된다.
+
+var r4 = el.closest(":not(div)");
+// div 요소가 아닌 가장 가까운 부모 article 요소가 반환된다.</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>아래 폴리필은 <code>Element.closest()</code>, 메소드를 지원하지 않는 브라우저를 위한 방법이지만, <code>element.matches()</code> 메소드를 사용하므로 IE 9 이상에서 동작한다.</p>
+
+<pre class="brush: js">if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null &amp;&amp; el.nodeType === 1);
+    return null;
+  };
+}</pre>
+
+<p>만약 정말 IE 8 지원을 고려해야 한다면, 아래 폴리필을 사용할 수 있다. 그러나 해당 폴리필은 성능이 매우 느리며, IE 8 특성 상 CSS 2.1 사양의 선택자까지밖에 사용할 수 없다. 또한 실제 운영 시 약간의 지연이 발생할 수 있다.</p>
+
+<pre class="brush: js">if (window.Element &amp;&amp; !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
+    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
+    return el;
+  };
+}
+</pre>
+
+<h2 id="규격">규격</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Element.closest")}}</p>
+
+<h3 id="Compatibility_notes">Compatibility notes</h3>
+
+<ul>
+ <li>Edge 15-18 브라우저에서는, <code>document.createElement(tagName).closest(tagName)</code> 식이 직접적이던 간접적이던 요소와 연결되지 않았다면 <code>null</code> 값을 반환한다. 예를 들면, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree."><code>Document</code></a>객체 내에서 생성한 일반 DOM 요소에서 일어난다.</li>
+</ul>
+</div>
+
+<h2 id="같이보기">같이보기</h2>
+
+<ul>
+ <li>{{domxref("Element")}} 인터페이스.</li>
+ <li>
+  <div class="syntaxbox"><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">선택자 구문</a></div>
+ </li>
+ <li>
+  <div class="syntaxbox">선택자 구문을 사용하는 다른 메소드: {{domxref("element.querySelector()")}} 및 {{domxref("element.matches()")}}.</div>
+ </li>
+</ul>
diff --git a/files/ko/web/api/element/currentstyle/index.html b/files/ko/web/api/element/currentstyle/index.html
new file mode 100644
index 0000000000..a18422e884
--- /dev/null
+++ b/files/ko/web/api/element/currentstyle/index.html
@@ -0,0 +1,80 @@
+---
+title: Element.currentStyle
+slug: Web/API/Element/currentStyle
+tags:
+  - 돔
+  - 속성 추출
+  - 요소 속성
+translation_of: Web/API/Element/currentStyle
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p><strong><code>Element.currentStyle</code></strong> 은 표준화된 {{domxref("window.getComputedStyle")}} 메서드의 인터넷 익스플로러 전용 대체 프로퍼티입니다. 오래된 버젼의 인터넷 익스플로러에서 사용 가능합니다.</p>
+
+<h2 id="Specification">Specification</h2>
+
+<p>명세에 포함 되는 부분이 아닙니다.</p>
+
+<p>마이크로소프트 <a href="https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">MSDN에 설명이 있습니다</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element.runtimeStyle")}}</li>
+</ul>
diff --git a/files/ko/web/api/element/getattribute/index.html b/files/ko/web/api/element/getattribute/index.html
new file mode 100644
index 0000000000..c8f3947310
--- /dev/null
+++ b/files/ko/web/api/element/getattribute/index.html
@@ -0,0 +1,53 @@
+---
+title: Element.getAttribute()
+slug: Web/API/Element/getAttribute
+tags:
+  - API
+  - DOM
+  - 속성
+translation_of: Web/API/Element/getAttribute
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p><span class="seoSummary"><code>getAttribute()</code> 은 해당 요소에 지정된 값을 반환 합니다.</span> 만약 주어진 속성이 존재 하지 않는 다면, null 값이나 ""(빈문자열); 을 반환 할 것입니다. 자세한 사항은 {{Anch("Notes")}}  참조 하십시오.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><em>var attribute</em> = element.getAttribute(<em>attributeName</em>);
+</pre>
+
+<ul>
+ <li><code><em>attribute</em></code>는 <code><em>attributeName</em></code>의 값을 가지고 있는 문자열입니다.</li>
+ <li><code><em>attributeName</em></code>은 값을 얻고자 하는 속성의 이름입니다.</li>
+</ul>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush:js">let div1 = document.getElementById("div1");
+let align = div1.getAttribute("align");
+
+alert(align); // id가 "div1"인 요소(element)의 align 값을 보여줍니다.
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>When called on an HTML element in a DOM flagged as an HTML document, <code>getAttribute()</code> lower-cases its argument before proceeding.</p>
+
+<p>Essentially all web browsers (Firefox, Internet Explorer, recent versions of Opera, Safari, Konqueror, and iCab, as a non-exhaustive list) return <code>null</code> when the specified attribute does not exist on the specified element; this is what <a href="http://dom.spec.whatwg.org/#dom-element-getattribute" title="http://dom.spec.whatwg.org/#dom-element-getattribute">the current DOM specification draft</a> specifies. The old DOM 3 Core specification, on the other hand, says that the correct return value in this case is actually the <em>empty string</em>, and some DOM implementations implement this behavior. The implementation of <code>getAttribute()</code> in XUL (Gecko) actually follows the DOM 3 Core specification and returns an empty string. Consequently, you should use {{domxref("element.hasAttribute()")}} to check for an attribute's existence prior to calling <code>getAttribute()</code> if it is possible that the requested attribute does not exist on the specified element.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.Element.getAttribute")}}</p>
+</div>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/ko/web/api/element/getelementsbyclassname/index.html b/files/ko/web/api/element/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..f33e43b019
--- /dev/null
+++ b/files/ko/web/api/element/getelementsbyclassname/index.html
@@ -0,0 +1,108 @@
+---
+title: Element.getElementsByClassName()
+slug: Web/API/Element/getElementsByClassName
+translation_of: Web/API/Element/getElementsByClassName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("Element")}}의 메소드 <code><strong>getElementsByClassName()</strong></code> 는 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 {{domxref("HTMLCollection")}} 을 반환합니다.</span></p>
+
+<p>{{domxref("Document")}}의 {{domxref("Document.getElementsByClassName", "getElementsByClassName()")}} 메소드는 도큐먼트 루트로부터 도큐먼트 전체를 탐색한다는 점을 제외하고는 동일하게 작동합니다. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>names</code></dt>
+ <dd>검색할 클래스 혹은 클래스들을 띄어쓰기로 구분한 {{domxref("DOMString")}}</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>실시간으로 업데이트되는 해당 클래스명을 가진 요소 목록의 {{domxref("HTMLCollection")}} 이 반환됩니다.</p>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>항상 그렇듯, 반환되는 collection은 실시간입니다. 즉, 함수가 호출된 이후에도 DOM 트리의 현재 상태가 반영됩니다. <code>names</code> 에 해당하는 클래스를 가진 요소가 하위에 추가되면, 그 요소는 즉시 collection에 나타납니다. 비슷하게, <code>names</code> 에 매칭되는 클래스를 갖고 있지 않은 요소에 매칭되는 클래스명이 적용되면, 그 요소 역시 즉시 collection에 나타나게 됩니다.</p>
+
+<p>반대도 역시 마찬가지입니다. 클래스명이 더 이상 <code>names</code> 와 일치하지 않게 되면, collection으로 부터 즉시 제거됩니다.</p>
+
+<div class="note">
+<p><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">호환모드</a>에서는 클래스명의 대소문자를 구분하지 않습니다. 그 외의 경우에는, 대소문자를 구분합니다.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="단일_클래스_찾기">단일 클래스 찾기</h3>
+
+<p>요소들 중 하나의 클래스를 포함하고 있는 요소를 검색하기 위해서는, 그 클래스명을 <code>getElementsByClassName()</code>의 인자로 넣으세요:</p>
+
+<pre class="brush: js">element.getElementsByClassName('test');</pre>
+
+<p>아래의 예시는 <code>main</code> 이라는 <code>id</code> 를 가진 요소의 하위 요소들 중 <code>test</code>라는 클래스를 가진 모든 요소를 탐색합니다. </p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<h3 id="여러개의_클래스로_탐색하기">여러개의 클래스로 탐색하기</h3>
+
+<p><code>red</code> 와 <code>test</code> 라는 클래스를 모두 포함하고 있는 요소를 탐색하기 위해서는 다음과 같이 합니다:</p>
+
+<pre class="brush: js">element.getElementsByClassName('red test');</pre>
+
+<h3 id="결과값_검토하기">결과값 검토하기</h3>
+
+<p>collection의 개별 요소를 가져오기 위해 <code>HTMLCollection</code> 의{{domxref("HTMLCollection.item", "item()")}} 메소드를 이용하거나 표준 배열 문법을 사용할 수 있습니다. 아래는 잘못된 코드의 예시입니다. <code>"matches"</code> 는 <code>"colorbox"</code> 클래스가 삭제됨에 따라 바로 변경될것이기 때문에 <u><strong> 아래의 코드는 작동하지 않습니다.</strong></u></p>
+
+<pre class="brush: js">var matches = element.getElementsByClassName('colorbox');
+
+for (var i=0; i&lt;matches.length; i++) {
+  matches[i].classList.remove('colorbox');
+  matches.item(i).classList.add('hueframe');
+}
+</pre>
+
+<p>대신 다른 방법을 사용하세요. 예시:</p>
+
+<pre class="brush: js">var matches = element.getElementsByClassName('colorbox');
+
+while (matches.length &gt; 0) {
+  matches.item(0).classList.add('hueframe');
+  matches[0].classList.remove('colorbox');
+}</pre>
+
+<p>위 코드는  <code>"colorbox"</code> 클래스를 가진 모든 자식 요소를 찾고, <code>item(0)</code> 을 호출해 <code>"hueframe"</code>이라는 클래스를 추가합니다 . 그리고 <code>"colorbox" </code> 클래스를 제거합니다(배열 표기법을 사용하여). 다른 요소 (만약 남아있다면) 가 <code>item(0)</code> 이 될 것입니다.</p>
+
+<h3 id="배열_함수를_이용해_결과값을_필터링하기">배열 함수를 이용해 결과값을 필터링하기</h3>
+
+<p>{{domxref("HTMLCollection")}}을 <code>this</code> 로 사용하면 {{jsxref("Array.prototype")}} 을 어떤 {{ domxref("HTMLCollection") }}에서든 사용할 수 있습니다. 아래의 예제에서는 <code>test</code> 클래스를 가진 모든 {{HTMLElement("div")}} 요소를 찾아봅니다 :</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement) {
+  return testElement.nodeName === 'DIV';
+});</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('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.getElementsByClassName")}}</p>
diff --git a/files/ko/web/api/element/getelementsbytagname/index.html b/files/ko/web/api/element/getelementsbytagname/index.html
new file mode 100644
index 0000000000..345a8503f4
--- /dev/null
+++ b/files/ko/web/api/element/getelementsbytagname/index.html
@@ -0,0 +1,136 @@
+---
+title: Element.getElementsByTagName()
+slug: Web/API/Element/getElementsByTagName
+translation_of: Web/API/Element/getElementsByTagName
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><strong>Element.getElementsByTagName() </strong>메서드는 제공된 태그 네임(<a href="/en/DOM/element.tagName" title="en/DOM/element.tagName">tag name</a>)을 가지는 엘리먼트의 유효한 {{domxref("HTML 컬랙션")}}를 반환합니다. 엘리먼트가 특정된 범위를 검색하는 경우, 그 자신의 엘리먼트는 제외하고, 특정된 엘리먼트의 하위에 있는 서브트리가 검색됩니다. 반환된 리스트가 <em>live </em>상태이면,  리스트는 DOM 트리와 함께 자동적으로 업데이트 되는 것을 의미합니다. 결과적으로, 동일한 엘리먼트와 인자값으로 <strong>Element.getElementsByTagName()</strong>을 여러번 호출할 필요성은 없어집니다.</p>
+
+<p>HTML 문서 내에서 HTML 엘리먼트가 호출되면, getElementsByTagName는 진행하기 전에 그 인자들을 소문자로 변환합니다. 따라서, 카멜케이스로 이루어진 SVG 엘리먼트를 HTML문서의 서브트리 내에서 매칭하고자 하는 경우에는 {{ domxref("Element.getElementsByTagNameNS()") }}을 사용해야 합니다.</p>
+
+<p>Element.getElementsByTagName는 특정된 엘리먼트의 하위에 있는 엘리먼트 만을 검색하는 것으로 한정된 것을 제외하고는 {{domxref("Document.getElementsByTagName()")}}와 실질적으로 유사합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre>
+
+<ul>
+ <li><code>elements</code> is a <em>live</em> {{domxref("HTMLCollection")}} of found elements in the order they appear in the sub-tree. If no elements were found, the <code>HTMLCollection</code> is empty.</li>
+ <li>요소들의 서브트리안에서 나타나는 순서대로 발견된 요소들은 live {{domxref("HTMLCollection")}} 입니다.</li>
+ <li><code>element</code> is the element from where the search should start. Note that only the descendants of this element are included in the search, but not the element itself.</li>
+ <li>검색이 시작되어야 하는 요소에서부터 요소들이라고 할 수 있습니다. 요소 그 자체가 아니라 요소들에서 파생된 요소만 검색에 포함된다는 것을 알아두세요.</li>
+ <li><code>tagName</code> is the qualified name to look for. The special string <code>"*"</code> represents all elements. For compatibility with XHTML, lower-case should be used.</li>
+ <li>tagName은 둘러볼 만한 가치가 있는 이름이다.특별한 문자열인 "*"은 모든 요소들을 대표합니다. XHTML과의 호환성을 위해서, 소문자가 사용되어야 합니다.</li>
+</ul>
+
+<h2 id="Example_예제">Example 예제</h2>
+
+<pre class="brush: js">// check the alignment on a number of cells in a table.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagName("td");
+for (var i = 0; i &lt; cells.length; i++) {
+    var status = cells[i].getAttribute("data-status");
+    if ( status == "open" ) {
+        // grab the data
+    }
+}
+</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('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Changed the return value from {{domxref("NodeList")}} to {{domxref("HTMLCollection")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility_브라우저_호환성">Browser compatibility 브라우저 호환성</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 [2]</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>5.5</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+  </tr>
+  <tr>
+   <td>getElementsByTagName("*")</td>
+   <td>1.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>6.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Firefox 19, this method was returning a {{domxref("NodeList")}}; it was then changed to reflect the spec change.</p>
+
+<p>[1] Firefox 19 이전에는, 이 메서드는 {{domxref("NodeList")}};를 반환 했습니다. 그 후 사양의 변화를 반영하기 위해서 변경 되었습니다.</p>
+
+<p>[2] Initially, this method was returning a {{domxref("NodeList")}}; it was then changed to reflect the spec change.</p>
+
+<p>[2] 처음에는 이 메서드는 {{domxref("NodeList")}};를 반환 하였습니다. 그 후 사양의 변화를 반영하기 위해서 변경 되었습니다.</p>
diff --git a/files/ko/web/api/element/id/index.html b/files/ko/web/api/element/id/index.html
new file mode 100644
index 0000000000..9c9f343239
--- /dev/null
+++ b/files/ko/web/api/element/id/index.html
@@ -0,0 +1,67 @@
+---
+title: Element.id
+slug: Web/API/Element/id
+translation_of: Web/API/Element/id
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p><strong><code>Element.id</code></strong> 속성은 요소의 식별자를 나타내며, HTML의 전역적인 id 속성을 반영합니다.</p>
+
+<p>이 값은 도큐먼트 내에서 유일해야 하며, 종종 {{domxref("document.getElementById", "getElementById")}}를 사용하여 요소를 찾아내는데 사용됩니다. <code>id</code> 속성을 이용하는 다른 보편적인 방법에는 <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>로 도큐먼트를 스타일링 할때 <a href="/en-US/docs/Web/CSS/ID_selectors" title="Web/CSS/ID_selectors">ID를 선택자로 사용</a>하는 방법이 있습니다. </p>
+
+<div class="note">
+<p><strong>Note</strong>: 식별자는 대소문자를 구분하지만, 그래도 ID를 대소문자만 다르게 생성해서는 안됩니다.  (<a href="/en-US/docs/Case_Sensitivity_in_class_and_id_Names" title="Case_Sensitivity_in_class_and_id_Names">클래스명과 식별자에서의 대소문자 구분</a>참고).</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>idStr</em> = <em>elt</em>.id; // 아이디를 가져옵니다.
+<em>elt</em>.id = <em>idStr; // 아이디를 부여합니다</em>
+</pre>
+
+<ul>
+ <li><em><code>idStr</code></em>는 요소의 식별자입니다.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change from {{SpecName('DOM2 HTML')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.id")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The DOM <a href="/en-US/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a> global attribute.</li>
+</ul>
diff --git a/files/ko/web/api/element/index.html b/files/ko/web/api/element/index.html
new file mode 100644
index 0000000000..daaf1d7742
--- /dev/null
+++ b/files/ko/web/api/element/index.html
@@ -0,0 +1,306 @@
+---
+title: Element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - Element
+  - Interface
+  - Reference
+translation_of: Web/API/Element
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Element</code></strong>는 {{domxref("Document")}} 안의 모든 객체가 상속하는 제일 범용적인 기반 클래스로 공통 메서드와 속성만 가지고 있으며, 특정 요소를 더 상세하게 표현하는 클래스가 <code>Element</code>를 상속합니다. 예를 들어 {{domxref("HTMLElement")}} 인터페이스는 HTML 요소의 기반 인터페이스이고 {{domxref("SVGElement")}} 인터페이스는 모든 SVG 요소의 기초입니다.</p>
+
+<p>XUL의 <code>XULElement</code>처럼 웹 플랫폼 밖에서도 <code>Element</code>를 구현합니다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties" name="Properties">속성</h2>
+
+<p><em>부모 인터페이스인 {{domxref("Node")}}와 그 부모인 {{domxref("EventTarget")}}의 속성을 상속합니다. {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}와 {{domxref("Animatable")}}의 속성을 구현합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("Element.attributes")}} {{readOnlyInline}}</dt>
+ <dd>HTML 요소에 할당한 속성을 담은 {{domxref("NamedNodeMap")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("Element.classList")}} {{readOnlyInline}}</dt>
+ <dd>요소의 클래스 속성 리스트를 담은 {{domxref("DOMTokenList")}}를 반환합니다.</dd>
+ <dt>{{domxref("Element.className")}}</dt>
+ <dd>요소의 클래스를 나타내는 {{domxref("DOMString")}}을 반환합니다.</dd>
+ <dt>{{domxref("Element.clientHeight")}} {{readOnlyInline}}</dt>
+ <dd>요소의 안쪽 높이를 나타내는 {{jsxref("Number")}}를 반환합니다.</dd>
+ <dt>{{domxref("Element.clientLeft")}} {{readOnlyInline}}</dt>
+ <dd>요소의 왼쪽 테두리 너비를 나타내는 {{jsxref("Number")}}를 반환합니다.</dd>
+ <dt>{{domxref("Element.clientTop")}} {{readOnlyInline}}</dt>
+ <dd>요소의 위쪽 테두리 너비를 나타내는 {{jsxref("Number")}}를 반환합니다.</dd>
+ <dt>{{domxref("Element.clientWidth")}} {{readOnlyInline}}</dt>
+ <dd>요소의 안쪽 너비를 나타내는 {{jsxref("Number")}}를 반환합니다.</dd>
+ <dt>{{domxref("Element.computedName")}} {{readOnlyInline}}</dt>
+ <dd>요소가 노출하는 접근성 라벨을 포함한 {{domxref("DOMString")}}을 반환합니다.</dd>
+ <dt>{{domxref("Element.computedRole")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the ARIA role that has been applied to a particular element.</dd>
+ <dt>{{ domxref("Element.id") }}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the id of the element.</dd>
+ <dt>{{ domxref("Element.innerHTML") }}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the markup of the element's content.</dd>
+ <dt>{{ domxref("Element.localName") }} {{readOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing the local part of the qualified name of the element.</dd>
+ <dt>{{domxref("Element.namespaceURI")}} {{readonlyInline}}</dt>
+ <dd>The namespace URI of the element, or <code>null</code> if it is no namespace.
+ <div class="note">
+ <p><strong>참고:</strong> Firefox 3.5 이하에서는 HTML 요소가 네임스페이스에 속해있지 않습니다. 이후 버전에서는 HTML과 XML 트리 모두에서 <code><a href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> 네임스페이스를 사용합니다. {{ gecko_minversion_inline("1.9.2") }}</p>
+ </div>
+ </dd>
+ <dt>{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }} {{readOnlyInline}}</dt>
+ <dd>Is an {{ domxref("Element") }}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd>
+ <dt>{{ domxref("Element.outerHTML") }}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.</dd>
+ <dt>{{ domxref("Element.prefix") }} {{readOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd>
+ <dt>{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }} {{readOnlyInline}}</dt>
+ <dd>Is a {{ domxref("Element") }}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd>
+ <dt>{{ domxref("Element.scrollHeight") }} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd>
+ <dt>{{ domxref("Element.scrollLeft") }}</dt>
+ <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd>
+ <dt>{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd>
+ <dt>{{ domxref("Element.scrollTop") }}</dt>
+ <dd>A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.</dd>
+ <dt>{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd>
+ <dt>{{ domxref("Element.scrollWidth") }} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd>
+ <dt>{{domxref("Element.shadowRoot") }}{{readOnlyInline}}</dt>
+ <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd>
+ <dt>{{domxref("Element.openOrClosedShadowRoot")}} {{non-standard_inline}}{{readOnlyInline}}</dt>
+ <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
+ <dt>{{domxref("Element.slot")}} {{experimental_inline}}</dt>
+ <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd>
+ <dt>{{domxref("Element.tabStop")}} {{non-standard_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd>
+ <dt>{{ domxref("Element.tagName") }} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</dd>
+ <dt>{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns the {{domxref("UndoManager")}} associated with the element.</dd>
+ <dt>{{ domxref("Element.undoScope")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> DOM Level 3 명세는 <code>namespaceURI</code>, <code>localName</code>, <code>prefix</code>를 {{domxref("Node")}}에 정의했고, DOM4에서 <code>Element</code>로 옮겨졌습니다.</p>
+
+<p>이 변경점은 Chrome 46.0과 Firefox 48.0부터 구현됐습니다.</p>
+</div>
+
+<h3 id="Slotable_속성"><code>Slotable</code> 속성</h3>
+
+<p><em><code>Element</code> 인터페이스는 {{domxref("Slotable")}} 믹스인에 정의된 다음 속성을 가집니다.</em></p>
+
+<dl>
+ <dt>{{domxref("Slotable.assignedSlot")}}{{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.</dd>
+</dl>
+
+<h3 id="Handlers" name="Handlers">이벤트 처리기</h3>
+
+<dl>
+ <dt>{{domxref("Element.ongotpointercapture")}}</dt>
+ <dd>Returns the event handler for the {{event("gotpointercapture")}} event type.</dd>
+ <dt>{{domxref("Element.onlostpointercapture")}}</dt>
+ <dd>Returns the event handler for the {{event("lostpointercapture")}} event type.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">메서드</h2>
+
+<p><em>부모 인터페이스인 {{domxref("Node")}}와 그 부모인 {{domxref("EventTarget")}}의 메서드를 상속합니다. {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}와 {{domxref("Animatable")}}의 메서드를 구현합니다.</em></p>
+
+<dl>
+ <dt>{{ domxref("EventTarget.addEventListener()") }}</dt>
+ <dd>Registers an event handler to a specific event type on the element.</dd>
+ <dt>{{domxref("Element.attachShadow()")}}</dt>
+ <dd>Attatches a shadow DOM tree to the specified element and returns a reference to its {{domxref("ShadowRoot")}}.</dd>
+ <dt>{{domxref("Element.animate()")}} {{experimental_inline}}</dt>
+ <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd>
+ <dt>{{ domxref("Element.closest()")}} {{experimental_inline}}</dt>
+ <dd>Returns the {{domxref("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.</dd>
+ <dt>{{ domxref("Element.createShadowRoot()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Creates a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{domxref("ShadowRoot")}}.</dd>
+ <dt>{{domxref("Element.computedStyleMap()")}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{domxref("CSSStyleDeclaration")}}.</dd>
+ <dt>{{ domxref("EventTarget.dispatchEvent()") }}</dt>
+ <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd>
+ <dt>{{domxref("Element.getAnimations()")}} {{experimental_inline}}</dt>
+ <dd>Returns an array of Animation objects currently active on the element.</dd>
+ <dt>{{ domxref("Element.getAttribute()") }}</dt>
+ <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{ domxref("Element.getAttributeNames()") }}</dt>
+ <dd>Returns an array of attribute names from the current element.</dd>
+ <dt>{{ domxref("Element.getAttributeNS()") }}</dt>
+ <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{ domxref("Element.getBoundingClientRect()") }}</dt>
+ <dd>Returns the size of an element and its position relative to the viewport.</dd>
+ <dt>{{ domxref("Element.getClientRects()") }}</dt>
+ <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd>
+ <dt>{{ domxref("Element.getElementsByClassName()") }}</dt>
+ <dd>Returns a live {{ domxref("HTMLCollection") }} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd>
+ <dt>{{ domxref("Element.getElementsByTagName()") }}</dt>
+ <dd>Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name, from the current element.</dd>
+ <dt>{{ domxref("Element.getElementsByTagNameNS()") }}</dt>
+ <dd>Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd>
+ <dt>{{ domxref("Element.hasAttribute()") }}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd>
+ <dt>{{ domxref("Element.hasAttributeNS()") }}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd>
+ <dt>{{ domxref("Element.hasAttributes()") }}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd>
+ <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt>
+ <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd>
+ <dt>{{ domxref("Element.insertAdjacentElement()") }}</dt>
+ <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{ domxref("Element.insertAdjacentHTML()") }}</dt>
+ <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd>
+ <dt>{{ domxref("Element.insertAdjacentText()") }}</dt>
+ <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{ domxref("Element.matches()") }} {{experimental_inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd>
+ <dt>{{ domxref("Element.querySelector()") }}</dt>
+ <dd>Returns the first {{ domxref("Node") }} which matches the specified selector string relative to the element.</dd>
+ <dt>{{ domxref("Element.querySelectorAll()") }}</dt>
+ <dd>Returns a {{ domxref("NodeList") }} of nodes which match the specified selector string relative to the element.</dd>
+ <dt>{{ domxref("Element.releasePointerCapture()")}}</dt>
+ <dd>Releases (stops) pointer capture that was previously set for a specific {{domxref("PointerEvent","pointer event")}}.</dd>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Removes the element from the children list of its parent.</dd>
+ <dt>{{ domxref("Element.removeAttribute()") }}</dt>
+ <dd>Removes the named attribute from the current node.</dd>
+ <dt>{{ domxref("Element.removeAttributeNS()") }}</dt>
+ <dd>Removes the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt>
+ <dd>Removes an event listener from the element.</dd>
+ <dt>{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}</dt>
+ <dd>Asynchronously asks the browser to make the element full-screen.</dd>
+ <dt>{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd>
+ <dt>{{domxref("Element.scroll()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
+ <dt>{{domxref("Element.scrollBy()")}}</dt>
+ <dd>Scrolls an element by the given amount.</dd>
+</dl>
+
+<dl>
+ <dt>{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}</dt>
+ <dd>Scrolls the page until the element gets into the view.</dd>
+ <dt>{{ domxref("Element.scrollTo()") }}</dt>
+ <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
+ <dt>{{ domxref("Element.setAttribute()") }}</dt>
+ <dd>Sets the value of a named attribute of the current node.</dd>
+ <dt>{{ domxref("Element.setAttributeNS()") }}</dt>
+ <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{ domxref("Element.setCapture()") }} {{non-standard_inline}}</dt>
+ <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd>
+ <dt>{{domxref("Element.setPointerCapture()")}}</dt>
+ <dd>Designates a specific element as the capture target of future <a href="https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd>
+ <dt>{{domxref("Element.toggleAttribute()")}}</dt>
+ <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</dd>
+</dl>
+
+<p> </p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Added the <code>getAnimationPlayers()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
+    Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>Added the following methods:<code> matches()</code> (implemented as <code>mozMatchesSelector()</code>), <code>find()</code>, <code>findAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Added the <code>requestPointerLock()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Added the <code>requestFullscreen()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br>
+    Added the following method: <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br>
+    Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, and <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added inheritance of the {{domxref("ElementTraversal")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the following methods: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br>
+    Removed the <code>schemaTypeInfo</code> property.<br>
+    Modified the return value of <code>getElementsByTag()</code> and <code>getElementsByTagNS()</code>.<br>
+    Moved <code>hasAttributes()</code> form the <code>Node</code> interface to this one.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br>
+    Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>The <code>normalize()</code> method has been moved to {{domxref("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Element")}}</p>
diff --git a/files/ko/web/api/element/innerhtml/index.html b/files/ko/web/api/element/innerhtml/index.html
new file mode 100644
index 0000000000..6b9e4ce73c
--- /dev/null
+++ b/files/ko/web/api/element/innerhtml/index.html
@@ -0,0 +1,204 @@
+---
+title: Element.innerHTML
+slug: Web/API/Element/innerHTML
+translation_of: Web/API/Element/innerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("Element")}} 속성(property) <strong><code>innerHTML</code></strong> 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정합니다.</span></p>
+
+<div class="note"><strong>주의: </strong>{{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} 노드가 (&amp;), (&lt;), (&gt;) 문자를 포함하는 텍스트 노드를 자식으로 가지고 있다면, <code>innerHTML</code>은 이러한 문자들을 각각 <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code> ,<code>"&amp;gt;"</code>로 반환합니다. {{domxref("Node.textContent")}}를 사용하여 이러한 텍스트 노드 내용의 원본을 복사할 수 있습니다.</div>
+
+<p>요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입하려면, {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} 메서드를 사용하십시오.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">const <var>content</var> = <var>element</var>.innerHTML;
+
+<var>element</var>.innerHTML = <var>htmlString</var>;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>요소(element)의 자손의 HTML 직렬화를 포함하는 {{domxref("DOMString")}} 입니다. Setting the value of <code>innerHTML</code> 의 값을 설정(대입)하면 요소의 모든 자손이 제거되고, 문자열 htmlString에 지정된 HTML을 파싱하고, 생성된 노드로 대체합니다.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>HTML의 양식에 맞지 않는 문자열을 사용하여, <code>innerHTML</code> 의 값을 설정하려는 시도가 있었습니다.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>부모가 {{domxref("Document")}}인 노드에 HTML을 삽입하려고 했습니다.</dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p><code>innerHTML</code> 속성(property)은 페이지가 처음 로드 된 이후의 모든 변경 사항을 포함하여, 페이지의 현재 HTML 소스를 검사하는데 사용할 수 있습니다.</p>
+
+<h3 id="Reading_the_HTML_contents_of_an_element">Reading the HTML contents of an element</h3>
+
+<p><code>innerHTML</code> 를 읽으면 유저 에이전트(user agent)가 요소의 자손으로 구성된 HTML 또는 XML조각을 직렬화 합니다. 그 결과는 문자열로 반환합니다.</p>
+
+<pre class="brush: js">let contents = myElement.innerHTML;</pre>
+
+<p>이를 통해 요소의 컨텐트 노드에 대한 HTML 마크업을 볼 수 있습니다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> 반환 된 HTML, XML 파편은 요소의 현재 내용일 기반으로 생성됩니다. 따라서 반환 된 마크업과 양식이 본래의 페이지 마크업과 일치하지 않을 수 있습니다.</p>
+</div>
+
+<h3 id="Replacing_the_contents_of_an_element">Replacing the contents of an element</h3>
+
+<p><code>innerHTML</code> 값을 설정하면 요소의 기존 내용(content)을 새 내용으로 쉽게 변경할 수 있습니다.</p>
+
+<p>예를 들어, 문서(document)의 {{domxref("Document.body", "body")}} 속성(attribute)을 지우면, 문서의 전체 내용을 지울 수 있습니다.</p>
+
+<pre class="brush: js">document.body.innerHTML = "";</pre>
+
+<p>이 예제는 문서의 현재 HTML 마크업을 가져오고, <code>"&lt;"</code> 문자를 HTML 엔터티 <code>"&amp;lt;"</code> 로 대체하합니다. 그러면 HTML을 원시 텍스트(raw text - 파싱 이전의 모습)로 반환합니다. 이것을 {{HTMLElement("pre")}} 요소로 래핑합니다. 그러면 <code>innerHTML</code> 값은 새 문자열로 변경됩니다. 그 결과, 문서의 내용은 페이지의 전체 소스 코드의 출력으로 대체됩니다.</p>
+
+<pre class="brush: js">document.documentElement.innerHTML = "&lt;pre&gt;" +
+         document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") +
+            "&lt;/pre&gt;";</pre>
+
+<h4 id="Operational_details">Operational details</h4>
+
+<p><code>innerHTML</code> 값을 설정할 때, 정확히 어떤 일이 발생하나요? 값을 설정하면, 유저 에이전트는 다음 단계를 따르게 됩니다.</p>
+
+<ol>
+ <li>지정한 값은 HTML 또는 XML(문서 타입에 따라)로 파싱되어, {{domxref("DocumentFragment")}} 객체가 새 요소에 대한 새로운 노드 DOM 노드 집합을 나타냅니다.</li>
+ <li>내용이 대체되는 요소가 {{HTMLElement("template")}} 요소 인 경우, <code>&lt;template&gt;</code> 요소의 {{domxref("HTMLTemplateElement.content", "content")}} 속성(attribute)은 1단계에서 작성한 새  <code>DocumentFragment</code> 로 대체됩니다.</li>
+ <li>다른 모든 요소의 경우, 요소의 내용은 새 <code>DocumentFragment</code> 의 노드로 대체됩니다.</li>
+</ol>
+
+<h3 id="Security_considerations">Security considerations</h3>
+
+<p><code>innerHTML</code> 이 웹 페이지에 텍스트를 삽입하는데 사용되는 것은 종종 볼 수 있습니다. 이것은 사이트의 공격 경로가 되어 잠재적인 보안 위험이 발생할 수 있습니다.</p>
+
+<pre class="brush: js">const name = "John";
+// assuming 'el' is an HTML DOM element
+el.innerHTML = name; // harmless in this case
+
+// ...
+
+name = "&lt;script&gt;alert('I am John in an annoying alert!')&lt;/script&gt;";
+el.innerHTML = name; // harmless in this case</pre>
+
+<p>이것은 {{interwiki("wikipedia", "cross-site scripting")}} 공격처럼 보일 수 있지만, 결과는 무해합니다. HTML5 는 <code>innerHTML</code> 과 함께 삽입된 {{HTMLElement("script")}} 태그가 <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">실행되지 않도록 </a>지정합니다.</p>
+
+<p>그러나 {{HTMLElement("script")}} 요소를 사용하지 않고, 자바스크립트를 실행하는 방법이 있으므로, <code>innerHTML</code> 을 사용하여 제어할 수 없는 문자열을 설정할 때 마다 여전히 보안위험이 있습니다. 예를들어:</p>
+
+<pre class="brush: js">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
+el.innerHTML = name; // shows the alert</pre>
+
+<p>따라서 일반 텍스트를 삽입 할 때는 <code>innerHTML</code> 을 사용하지 않는 것이 좋습니다. 대신  {{domxref("Node.textContent")}}를 사용하십시오. 이것은 전달 된 내용을 HTML로 파싱하지 않고 원시 텍스트(raw text)로 삽입합니다.</p>
+
+<div class="warning">
+<p><strong>경고:</strong> 프로젝트가 보안 점검을 거치게 되는 프로젝트인 경우, <code>innerHTML</code> 을 사용하면 코드가 거부 될 가능성이 높습니다. 예를 들어, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">브라우저 확장</a>에서  <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation"><code>innerHTML</code>을 사용하고</a> <a href="https://addons.mozilla.org/">addons.mozilla.org</a>에 확장을 제출하면 자동 검토 프로세스를 통과하지 못합니다.</p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<p>이 예제에서는 <code>innerHTML</code> 을 사용하여 메시지를 웹 페이지의 상자에 기록하는 매커니즘을 만듭니다.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "&lt;br/&gt;";
+}
+
+log("Logging mouse events inside this container...");
+</pre>
+
+<p><code>log()</code> 함수는 {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}을 사용하여 {{jsxref("Date")}} 객체에서 현재 시간을 가져 오고, 타임 스탬프와 메시지 텍스트가 있는 문자열을 작성하여 로그 출력을 만듭니다. 그런 다음 메시지는 클래스 <code>"log"</code>가 있는 상자에 추가됩니다.</p>
+
+<p>{{domxref("MouseEvent")}} 기반 이벤트 ({{event("mousedown")}}, {{event("click")}}, {{event("mouseenter")}}와 같은) 정보를 기록하는 두 번째 메서드를 추가합니다:</p>
+
+<pre class="brush: js">function logEvent(event) {
+  var msg = "Event &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
+            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
+  log(msg);
+}</pre>
+
+<p>그리고나서, 우리의 로그가 들어있는 상자에 여러 마우스 이벤트에 대한 이벤트 핸들러로 사용합니다.</p>
+
+<pre class="brush: js">var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML은 우리의 예제에서 아주 간단합니다.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
+  &lt;div class="log"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>클래스 <code>"box"</code>를 갖는 {{HTMLElement("div")}} 는 레이아웃을 위한 컨테이너 입니다. class가 <code>"log"</code> 인 <code>&lt;div&gt;</code> 는 로그 텍스트 자체의 컨테이너 입니다.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>다음 CSS는 우리의 예제 내용을 꾸밉니다.</p>
+
+<pre class="brush: css">.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>결과 컨텐츠는 다음과 같습니다. 마우스를 상자 안팎으로 움직이거나 클릭하고 로그에서 출력을 볼 수 있습니다.</p>
+
+<p>{{EmbedLiveSample("Example", 640, 350)}}</p>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.innerHTML")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node.textContent")}} 과 {{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+ <li>DOM 트리에 HTML 파싱하기: {{domxref("DOMParser")}}</li>
+ <li>XML 또는 HTML을 DOM 트리로 직렬화 하기: {{domxref("XMLSerializer")}}</li>
+</ul>
diff --git a/files/ko/web/api/element/insertadjacenthtml/index.html b/files/ko/web/api/element/insertadjacenthtml/index.html
new file mode 100644
index 0000000000..7b1cb1d4e5
--- /dev/null
+++ b/files/ko/web/api/element/insertadjacenthtml/index.html
@@ -0,0 +1,79 @@
+---
+title: Element.insertAdjacentHTML()
+slug: Web/API/Element/insertAdjacentHTML
+translation_of: Web/API/Element/insertAdjacentHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>insertAdjacentHTML()</code></strong> 메서드는 HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가 한다.  이미 사용중인 element 는 다시 파싱하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml은 과 좀 다름). innerHtml보다 작업이 덜 드므로 빠르다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre>
+
+<p><font face="Courier, Andale Mono, monospace">position은 아래 있는 단어만 사용 가능하다.</font></p>
+
+<dl>
+ <dt><code style="color: red;">'beforebegin'</code></dt>
+ <dd>element 앞에 </dd>
+ <dt><code style="color: green;">'afterbegin'</code></dt>
+ <dd>element 안에 가장 첫번째 child</dd>
+ <dt><code style="color: blue;">'beforeend'</code></dt>
+ <dd>element 안에 가장 마지막 child</dd>
+ <dt><code style="color: magenta;">'afterend'</code></dt>
+ <dd>element 뒤에</dd>
+</dl>
+
+<p><code>text(인자)는 HTML 또는 XML로 해석될 수 있는 문자열이고(html code), (DOM) tree에 삽입할 수 있다.</code></p>
+
+<h3 id="position_의_예시_그림">position 의 예시 그림</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+foo
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Note:</strong>  <code>beforebegin</code> , <code>afterend position은 element의 부모가 존재해야 하고, node가 tree 안에 있어야 한다.</code></div>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+
+// At this point, the new structure is:
+// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#insertadjacenthtml()', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("api.Element.insertAdjacentHTML")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.appendChild()")}} ((position)beforeend 와 같은 효과를 갖는다.)</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</span></li>
+</ul>
diff --git a/files/ko/web/api/element/outerhtml/index.html b/files/ko/web/api/element/outerhtml/index.html
new file mode 100644
index 0000000000..28952f5d69
--- /dev/null
+++ b/files/ko/web/api/element/outerhtml/index.html
@@ -0,0 +1,119 @@
+---
+title: Element.outerHTML
+slug: Web/API/Element/outerHTML
+tags:
+  - API
+  - DOM
+  - DOM Parsing
+  - Element
+  - Parsing
+  - Property
+  - Reference
+  - Serializing
+translation_of: Web/API/Element/outerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>outerHTML</code> 속성은 요소(element)의 자식 요소를 포함하여 요소를 나타내는 직렬화된 HTML 파편을 가져옵니다. 또한 주어진 문자열에서 파싱한 노드로 요소를 대체할 수 있습니다.</p>
+
+<p>요소의 내용만을 HTML 형태로 가져오거나 설정하기 위해서는 {{domxref("Element.innerHTML", "innerHTML")}} 속성을 대신 사용하십시오.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="eval"><em>var content</em> = <em>element</em>.outerHTML;
+
+<em>element</em>.outerHTML = <em>htmlString</em>;
+</pre>
+
+<h3 id="값">값</h3>
+
+<p><code>outerHTML</code>로 값을 읽어올 때는 요소와 요소의 자식 요소가 직렬화된 HTML이 포함된 {{domxref("DOMString")}}을 반환합니다. <code>outerHTML</code>로 값을 설정할 때는 요소와 요소의 모든 자식 요소를 <code>htmlString</code> 형태로 파싱된 새로운 DOM 트리 구조로 대체합니다.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>유효하지 않은 HTML 문자열을 사용해 <code>outerHTML</code>을 설정하도록 시도할 경우 <code>SyntaxError</code> 예외가 발생합니다. </dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>{{domxref("Document.documentElement")}}와 같이 {{domxref("Document")}}의 바로 아래 자식 요소에 <code>outerHTML</code>을 설정하도록 시도할 경우 <code>NoModificationAllowedError</code> 예외가 발생합니다.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<p>다음은 요소의 <code>outerHTML</code> 속성을 가져오는 예시입니다.</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;
+
+d = document.getElementById("d");
+console.log(d.outerHTML);
+
+// '&lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;'
+// 위 문자열이 콘솔창에 출력됩니다.
+</pre>
+
+<p>다음은 <code>outerHTML</code> 속성으로 노드를 대체하는 예시입니다.</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="container"&gt;&lt;div id="d"&gt;This is a div.&lt;/div&gt;&lt;/div&gt;
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // "DIV"를 출력합니다.
+
+d.outerHTML = "&lt;p&gt;This paragraph replaced the original div.&lt;/p&gt;";
+console.log(container.firstChild.nodeName); // "P"를 출력합니다.
+
+// #d의 div 요소가 문서 트리에서 제거되고,
+// 새 p 요소로 대체되었습니다.
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<p>부모 요소가 없는 요소에 <code>outerHTML</code> 속성을 설정하려고 하면 변경되지 않습니다. 많은 브라우저는 예외를 발생시킵니다. 아래는 예시입니다.</p>
+
+<pre class="brush: js">var div = document.createElement("div");
+div.outerHTML = "&lt;div class=\"test\"&gt;test&lt;/div&gt;";
+// 많은 브라우저에서 DOMException 예외를 발생시킵니다.
+console.log(div.outerHTML); // 결과: "&lt;div&gt;&lt;/div&gt;"</pre>
+
+<p>또한, 문서 내의 요소가 변경되더라도 변수의 <code>outerHTML</code> 속성은 원본 요소를 계속 참조합니다.</p>
+
+<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // "P"를 출력합니다.
+p.outerHTML = "&lt;div&gt;This div replaced a paragraph.&lt;/div&gt;";
+console.log(p.nodeName); // 여전히 "P"를 출력합니다.
+</pre>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Element.outerHTML")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>DOM 트리를 XML이나 HTML으로 직렬화하는 {{domxref("XMLSerializer")}}</li>
+ <li>XML이나 HTML을 파싱하여 DOM 트리로 변환하는 {{domxref("DOMParser")}}</li>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+</ul>
diff --git a/files/ko/web/api/element/removeattribute/index.html b/files/ko/web/api/element/removeattribute/index.html
new file mode 100644
index 0000000000..d31f6ded75
--- /dev/null
+++ b/files/ko/web/api/element/removeattribute/index.html
@@ -0,0 +1,66 @@
+---
+title: Element.removeAttribute()
+slug: Web/API/Element/removeAttribute
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Reference
+translation_of: Web/API/Element/removeAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><code><strong>Element.removeAttribute()</strong></code> 메서드는 요소에서 주어진 이름의 특성을 제거합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>element</em>.removeAttribute(<em>attrName</em>);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>attrName</code></dt>
+ <dd>요소에서 제거할 특성 이름을 지정하는 {{domxref("DOMString")}}. 지정하지 않으면 오류 없이 아무 동작도 하지 않습니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p>많은 특성은 {{jsxref("null")}}을 대입했을 때 예상치 못한 동작을 하곤 합니다. 그러므로 특성을 삭제할 때 <code>null</code>을 직접 대입하거나, {{domxref("Element.setAttribute", "setAttribute()")}}의 매개변수로 제공하기보단 <code>removeAttribute()</code> 메서드를 사용해야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// Given: &lt;div id="div1" align="left" width="200px"&gt;
+document.getElementById("div1").removeAttribute("align");
+// Now: &lt;div id="div1" width="200px"&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-removeattribute', 'Element" removeAttribute')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Element.removeAttribute")}}</p>
diff --git a/files/ko/web/api/element/scrollheight/index.html b/files/ko/web/api/element/scrollheight/index.html
new file mode 100644
index 0000000000..32b5f72eb1
--- /dev/null
+++ b/files/ko/web/api/element/scrollheight/index.html
@@ -0,0 +1,168 @@
+---
+title: Element.scrollHeight
+slug: Web/API/Element/scrollHeight
+tags:
+  - API
+  - Element
+  - Property
+  - Reference
+translation_of: Web/API/Element/scrollHeight
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><strong><code>Element.scrollHeight</code></strong> 읽기 전용 속성은 요소 콘텐츠의 총 높이를 나타내며, 바깥으로 넘쳐서 보이지 않는 콘텐츠도 포함합니다.</p>
+
+<p><code>scrollHeight</code> 값은 수직 스크롤바를 사용하지 않고 요소의 콘텐츠를 모두 나타낼 때 필요한 최소 높이의 값과 동일합니다. 높이 측정은 {{domxref("Element.clientHeight", "clientHeight")}}와 동일한 방법을 사용하여 요소의 안쪽 여백은 포함하고, 테두리와 바깥 여백, (존재하는 경우) 수평 스크롤바의 높이는 포함하지 않습니다. 또한 {{cssxref("::before")}}, {{cssxref("::after")}} 등 의사 요소의 높이도 결과에 포함합니다. 요소의 콘텐츠를 수직 스크롤바 없이 모두 보일 수 있는 경우의 <code>scrollHeight</code>는 <code>clientHeight</code>와 동일합니다.</p>
+
+<div class="note">
+<p><code>scrollHeight</code>의 반환 값은 정수로 반올림됩니다. 소수점을 포함한 값이 필요한 경우 {{domxref("Element.getBoundingClientRect()")}}를 사용하세요.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">구문</h2>
+
+<pre class="eval notranslate">var <em>intElemScrollHeight</em> = <em>element</em>.scrollHeight;
+</pre>
+
+<p><em>intElemScrollHeight</em>은 요소 <code>scrollHeight</code>의 픽셀 값을 저장하는 정수형 변수입니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong>Left</strong> <strong>Top</strong> <strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+
+<h2 id="문제와_해결책">문제와 해결책</h2>
+
+<h3 id="요소를_끝까지_스크롤했는지_판별하기">요소를 끝까지 스크롤했는지 판별하기</h3>
+
+<p>다음 등식이 참인 경우 요소를 끝까지 스크롤한 것입니다.</p>
+
+<pre class="brush: js notranslate">element.scrollHeight - element.scrollTop === element.clientHeight</pre>
+
+<p>컨테이너가 스크롤 대신 오버플로된 자식을 노출하는 경우, 다음 검사로 컨테이너가 스크롤 가능한지 알아볼 수 있습니다.</p>
+
+<pre class="brush: js notranslate">window.getComputedStyle(element).overflowY === 'visible'
+window.getComputedStyle(element).overflowY !== 'hidden'</pre>
+
+<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">예제</h2>
+
+<p><code><a href="/en-US/docs/DOM/element.onscroll" title="en-US/docs/DOM/element.onscroll">onscroll</a></code>이벤트를 함께 사용하여, 내용을 다 읽었는지 확인할 수 있습니다. (<code><a href="/en-US/docs/DOM/element.scrollTop" title="en-US/docs/DOM/element.scrollTop">element.scrollTop</a></code> 과 <code><a href="/en-US/docs/DOM/element.clientHeight" title="en-US/docs/DOM/element.clientHeight">element.clientHeight</a></code> 를 참조하세요).</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form name="registration"&gt;
+  &lt;p&gt;
+    &lt;textarea id="rules"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
+Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
+neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
+velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
+ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id.
+Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem,
+mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta
+at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
+dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas
+luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem
+sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue
+turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum.
+Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in
+ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse
+platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat
+consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et
+a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam
+pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum
+ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit
+interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
+laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
+nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
+    &lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;input type="checkbox" name="accept" id="agree" /&gt;
+    &lt;label for="agree"&gt;동의합니다&lt;/label&gt;
+    &lt;input type="submit" id="nextstep" value="다음" /&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function checkReading () {
+  if (checkReading.read) {
+    return;
+  }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ? "감사합니다" : "다음 내용을 확인해주십시오";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}</pre>
+
+<p>{{ EmbedLiveSample('scrollHeight_Demo', '640', '400') }}</p>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Supported" name="Supported">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Element.scrollHeight")}}</p>
+
+<h2 id="See_Also" name="See_Also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.offsetHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+</ul>
diff --git a/files/ko/web/api/element/scrollintoview/index.html b/files/ko/web/api/element/scrollintoview/index.html
new file mode 100644
index 0000000000..1736aa2e40
--- /dev/null
+++ b/files/ko/web/api/element/scrollintoview/index.html
@@ -0,0 +1,88 @@
+---
+title: element.scrollIntoView
+slug: Web/API/Element/scrollIntoView
+translation_of: Web/API/Element/scrollIntoView
+---
+<div>
+<p>{{APIRef("DOM")}}</p>
+
+
+
+<p>{{domxref("Element")}} 인터페이스의 <strong><code>scrollIntoView()</code></strong> 메소드는 <code>scrollIntoView()</code>가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre><em>element</em>.scrollIntoView();
+<em>element</em>.scrollIntoView(<var>alignToTop</var>); // Boolean parameter
+<em>element</em>.scrollIntoView(<var>scrollIntoViewOptions</var>); // Object parameter</pre>
+
+<dl>
+ <dt>
+ <h3 id="Parameters">Parameters</h3>
+ </dt>
+ <dt><code>alignToTop</code> {{optional_inline}}</dt>
+ <dd>{{jsxref("Boolean")}} 값:
+ <ul>
+  <li><code>true</code>일때, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>. This is the default value.</li>
+  <li><code>false</code>일때, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>scrollIntoViewOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>다음의 프로퍼티를 가지는 객체</dd>
+ <dd>
+ <dl>
+  <dt><code>behavior</code> {{optional_inline}}</dt>
+  <dd>전환에니메이션을 정의.<br>
+  <code>"auto"</code>, <code>"smooth"</code>중 하나 선택. 기본값은 <code>"auto"</code>.</dd>
+  <dt><code>block</code> {{optional_inline}}</dt>
+  <dd>수직 정렬을 정의<br>
+  <code>"start"</code>, <code>"center"</code>, <code>"end"</code>, <code>"nearest"</code>중 하나 선택. 기본값은 <code>"start"</code>.</dd>
+  <dt><code>inline</code> {{optional_inline}}</dt>
+  <dd>수평 정렬을 정함<br>
+  One of <code>"start"</code>, <code>"center"</code>, <code>"end"</code>, <code>"nearest"</code>중 하나 선택. 기본값은 <code>"nearest"</code>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre><code>var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});</code></pre>
+
+<h2 id="Notes">Notes</h2>
+
+
+
+<p>다른 요소의 레이아웃에 따라 위쪽 또는 아래쪽으로 완전히 스크롤되지 않을 수 있습니다.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Element.scrollIntoView")}}</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollIntoViewIfNeeded()")}}<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"> </a>{{non-standard_inline}}<a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollintoview" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollintoview"> </a></li>
+</ul>
diff --git a/files/ko/web/api/element/tagname/index.html b/files/ko/web/api/element/tagname/index.html
new file mode 100644
index 0000000000..ecbbc3a405
--- /dev/null
+++ b/files/ko/web/api/element/tagname/index.html
@@ -0,0 +1,62 @@
+---
+title: Element.tagName
+slug: Web/API/Element/tagName
+translation_of: Web/API/Element/tagName
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("Element")}} 인터페이스의 <strong><code>tagName</code></strong> 읽기 전용 속성은 요소에 호출된 태그 명을 가져온다.</span> 예를 들면, 만약 {{HTMLElement("img")}} 요소일 경우, 해당 요소의 <code>tagName</code> 속성의 내용은 <code>"IMG"</code> 가 된다 (XML/XHTML 및 HTML 문서에서 대소문자가 다르게 나올 수 있다).</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>elementName</em> = <em>Element</em>.tagName;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>태그 명이 명시된 문자열을 가져온다, 이 때, 아래 경우에 따라 대소문자가 달라질 수 있다.</p>
+
+<ul>
+ <li>HTML 문서에 설계된 DOM 구조에서 가져온 요소는 항시 대소문자로만 이루어진 값을 가져오게 된다.예를 들면, {{HTMLElement("div")}} 객체로 생성한 요소의 <code>tagName</code>  값은 <code>"DIV"</code>가 된다.</li>
+ <li>XML 문서에 설계된 요소 구조의 경우 문서에 작성된 태그 명을 그대로 가져오게 된다. <code>"&lt;SomeTag&gt;"</code> 이라는 명칭으로 태그를 작성하였을 경우, <code>tagName</code> 속성 값은 <code>"SomeTag"</code>이 된다.</li>
+</ul>
+
+<p>{{domxref("Element")}} 객체에서 사용하는 <code>tagName</code> 속성의 값은 {{domxref("Node")}} 객체의 {{domxref("Node.nodeName", "nodeName")}} 속성과 동일한 값을 가져온다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span id="born"&gt;내가 어렸을 적...&lt;/span&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var span = document.getElementById("born");
+console.log(span.tagName);
+</pre>
+
+<p>XHTML (또는 여느 XML 방식) 문서의 경우, 정의한 태그 명 그대로 가져오기 때문에, <code>"span"</code>  같은 소문자 태그명을 가져오게 될 것이다.그에 반해 HTML 문서에서는, 원본 문서에 정의된 태그명과 달리 대소문자를 무시하면서 대문자로만 이루어진 <code>"SPAN"</code> 값을 가져오게 된다.</p>
+
+<h2 id="규격">규격</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-tagname', 'Element: tagName')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Element.tagName")}}</p>
diff --git a/files/ko/web/api/element/touchcancel_event/index.html b/files/ko/web/api/element/touchcancel_event/index.html
new file mode 100644
index 0000000000..e5b198282b
--- /dev/null
+++ b/files/ko/web/api/element/touchcancel_event/index.html
@@ -0,0 +1,116 @@
+---
+title: touchcancel
+slug: Web/API/Element/touchcancel_event
+translation_of: Web/API/Element/touchcancel_event
+---
+<p><code style="font-size: 14px; line-height: inherit;">touchcancel</code><span style="line-height: inherit;"> 이벤트는  터치포인트가 현재 구현된 방식안에서 방해 받을때 ( 예를들어 너무 많은 터치 포인트)  발생한다.</span></p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/touch-events/#the-touchcancel-event">Touch Events</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">TouchEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td>long (float)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>touches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact currently touching the surface.</td>
+  </tr>
+  <tr>
+   <td><code>targetTouches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact that is touching the surface and started on the element that is the target of the current event.</td>
+  </tr>
+  <tr>
+   <td><code>changedTouches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en-US/docs/DOM/Touch"><code>Touch</code></a>es for every point of contact which contributed to the event.<br>
+    For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p>해당 이벤트의 샘플코드는 <a href="/en-US/docs/DOM/Touch_events" style="line-height: inherit;">Touch events</a> 에서 확인할 수 있다.</p>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("touchstart")}}</li>
+ <li>{{event("touchend")}}</li>
+ <li>{{event("touchmove")}}</li>
+ <li>{{event("touchcancel")}}</li>
+</ul>