aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/api/htmlelement
diff options
context:
space:
mode:
Diffstat (limited to 'files/ko/web/api/htmlelement')
-rw-r--r--files/ko/web/api/htmlelement/accesskeylabel/index.html84
-rw-r--r--files/ko/web/api/htmlelement/click/index.html47
-rw-r--r--files/ko/web/api/htmlelement/contenteditable/index.html59
-rw-r--r--files/ko/web/api/htmlelement/dataset/index.html127
-rw-r--r--files/ko/web/api/htmlelement/index.html271
-rw-r--r--files/ko/web/api/htmlelement/input_event/index.html100
-rw-r--r--files/ko/web/api/htmlelement/offsetparent/index.html43
-rw-r--r--files/ko/web/api/htmlelement/outertext/index.html33
-rw-r--r--files/ko/web/api/htmlelement/style/index.html41
-rw-r--r--files/ko/web/api/htmlelement/tabindex/index.html26
10 files changed, 831 insertions, 0 deletions
diff --git a/files/ko/web/api/htmlelement/accesskeylabel/index.html b/files/ko/web/api/htmlelement/accesskeylabel/index.html
new file mode 100644
index 0000000000..110cf03966
--- /dev/null
+++ b/files/ko/web/api/htmlelement/accesskeylabel/index.html
@@ -0,0 +1,84 @@
+---
+title: accessKeyLabel
+slug: Web/API/HTMLElement/accessKeyLabel
+translation_of: Web/API/HTMLElement/accessKeyLabel
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><strong><code>HTMLElement.accessKeyLabel</code></strong> 읽기 전용 속성은 엘리먼트의 할당된 접근키를 나타내는 {{jsxref("String")}} 를 반환합니다. 존재하지 않는 경우 빈 문자열을 반환합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><em>label</em> = <em>element</em>.accessKeyLabel
+</pre>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var node = document.getElementById('btn1');
+if (node.accessKeyLabel) {
+ node.title += ' [' + node.accessKeyLabel + ']';
+} else {
+ node.title += ' [' + node.accessKey + ']';
+}
+
+node.onclick = function () {
+ var p = document.createElement('p');
+ p.textContent = 'Clicked!';
+ node.parentNode.appendChild(p);
+};
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button accesskey="h" title="Caption" id="btn1"&gt;Hover me&lt;/button&gt;
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</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('HTML WHATWG', "interaction.html#dom-accesskeylabel", "HTMLElement.accessKeyLabel")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>초기 정의로부터 변경 사항 없음.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5.1')}}</td>
+ <td>{{Spec2('HTML5.1')}}</td>
+ <td>제거됨. <a href="https://github.com/w3c/html/pull/144">pull w3c/html#144</a>, <a href="https://github.com/w3c/html/issues/99">issue w3c/html#99</a>, <a href="https://discourse.wicg.io/t/accesskeylabel-author-accessible-info-about-shortcuts/1392/3">WICG discussion</a>.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', "editing.html#dom-accesskeylabel", "HTMLElement.accessKeyLabel")}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>{{SpecName('HTML WHATWG')}}, 초기 정의의 스냅샷.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLElement.accessKeyLabel")}}</p>
+</div>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("element.accessKey")}}</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> 전역 속성.</li>
+</ul>
diff --git a/files/ko/web/api/htmlelement/click/index.html b/files/ko/web/api/htmlelement/click/index.html
new file mode 100644
index 0000000000..9c1c8956c0
--- /dev/null
+++ b/files/ko/web/api/htmlelement/click/index.html
@@ -0,0 +1,47 @@
+---
+title: HTMLElement.click()
+slug: Web/API/HTMLElement/click
+tags:
+ - API
+ - HTML DOM
+ - HTMLElement
+ - 레퍼런스
+ - 메소드
+translation_of: Web/API/HTMLElement/click
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><code><strong>HTMLElement.click()</strong></code> 메소는 엘리먼트에 마우스 클릭을 시뮬레이션합니다.</p>
+
+<p>지원하는 엘리먼트({{HTMLElement("input")}} 등)에서 <code>click()</code> 이 사용될 때, 엘리먼트의 클릭 이벤트가 실행됩니다. 그 다음, 다큐먼트 트리(또는 이벤트 체인)에서 더 상위의 엘리먼트로 버블링되며 상위 엘리먼트의 클릭 이벤트를 실행합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>element</em>.click()</pre>
+
+<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('DOM2 HTML', 'html.html#ID-2651361')}}</td>
+ <td>{{Spec2('DOM2 HTML')}}</td>
+ <td>초기 정의.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.click")}}</p>
diff --git a/files/ko/web/api/htmlelement/contenteditable/index.html b/files/ko/web/api/htmlelement/contenteditable/index.html
new file mode 100644
index 0000000000..8756d6afdf
--- /dev/null
+++ b/files/ko/web/api/htmlelement/contenteditable/index.html
@@ -0,0 +1,59 @@
+---
+title: HTMLElement.contentEditable
+slug: Web/API/HTMLElement/contentEditable
+tags:
+ - API
+ - HTML DOM
+ - HTML element
+ - Property
+ - Reference
+translation_of: Web/API/HTMLElement/contentEditable
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("HTMLElement")}} 요소의 <strong><code>contenteditable</code></strong> 속성은 요소의 편집 가능 여부를 나타냅니다.</span> 열거형 속성으로, 다음 중 하나의 값을 가질 수 있습니다.</p>
+
+<ul>
+ <li><code>'true'</code>는 요소가 <code>contenteditable</code>임을 의미합니다.</li>
+ <li><code>'false'</code>는 요소를 편집할 수 없음을 의미합니다.</li>
+ <li><code>'inherit'</code>은 요소가 부모의 편집 가능 여부를 상속함을 의미합니다.</li>
+</ul>
+
+<p>{{domxref("HTMLElement.isContentEditable")}} 속성으로 이 속성의 {{jsxref("Boolean")}} 계산값을 얻을 수 있습니다.</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('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>Initial definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLElement.contentEditable")}}</p>
+
+<p>Internet Explorer에서 <code>contenteditable</code>은 {{htmlelement("table")}}, {{htmlelement("col")}}, {{htmlelement("colgroup")}}, {{htmlelement("tbody")}}, {{htmlelement("td")}}, {{htmlelement("tfoot")}}, {{htmlelement("th")}}, {{htmlelement("thead")}}, {{htmlelement("tr")}} 요소에 바로 적용할 수 없습니다. 대신 편집 가능한 {{htmlelement("span")}} 또는 {{htmlelement("div")}} 요소를 표의 각 칸에 배치할 수 있습니다.</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Guide/HTML/Editable_content">콘텐츠를 편집 가능하게 만들기</a></li>
+ <li>{{domxref("HTMLElement.isContentEditable")}}</li>
+ <li>{{htmlattrxref("contenteditable")}} 전역 속성</li>
+</ul>
diff --git a/files/ko/web/api/htmlelement/dataset/index.html b/files/ko/web/api/htmlelement/dataset/index.html
new file mode 100644
index 0000000000..2b2a891dca
--- /dev/null
+++ b/files/ko/web/api/htmlelement/dataset/index.html
@@ -0,0 +1,127 @@
+---
+title: HTMLElement.dataset
+slug: Web/API/HTMLElement/dataset
+tags:
+ - API
+ - HTML DOM
+ - HTMLElement
+ - HTMLOrForeignElement
+ - Property
+ - Read-only
+ - Reference
+translation_of: Web/API/HTMLOrForeignElement/dataset
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><code><strong>HTMLElement.dataset</strong></code> 읽기 전용 속성은 요소의 <a href="/ko/docs/Web/HTML/Global_attributes/data-*">사용자 지정 데이터 특성</a>(<code>data-*</code>)에 대한 읽기와 쓰기 접근 방법을 HTML과 DOM 양측에 제공합니다.</span> 반환하는 값은 {{domxref("DOMStringMap")}}으로, 각 데이터 특성마다 하나의 항목을 가집니다. <code>dataset</code> 속성 자체는 읽기 전용이라는 점에 주의하세요. 모든 쓰기 작업은 <code>dataset</code> 안의, 데이터 특성을 나타내는 각각의 속성에 수행해야 합니다. 또한 HTML의 <code>data-이름</code>과, 이에 대응하는 DOM <code>dataset['이름']</code>의 <code>이름</code>은 서로 일치하지 않으나, 다음 규칙에 따라 유사함을 기억하세요.</p>
+
+<ul>
+ <li>HTML의 사용자 지정 특성 이름은 <code>data-</code>로 시작합니다. 또한 문자, 숫자, 대시(<code>-</code>), 점(<code>.</code>), 콜론(<code>:</code>), 언더스코어(<code>_</code>)만 사용할 수 있고, ASCII 대문자(<code>A</code>-<code>Z</code>)는 사용할 수 없습니다.</li>
+ <li>JavaScript의 사용자 지정 특성 이름은 HTML 이름을 카멜 표기법으로 변환한 형태로, 대시, 점 등을 모두 제거합니다.</li>
+</ul>
+
+<p>아래의 내용과 함께, <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a> 아티클에서는 HTML 데이터 속성을 어떻게 쓰는지 안내를 찾을 수 있습니다. </p>
+
+<h3 id="Name_conversion">Name conversion</h3>
+
+<p>dash-style 에서 camelCase로 변환: 커스텀 데이터 속성의 이름은 아래의 규칙에 따라 {{ domxref("DOMStringMap") }}의 key로 변환됩니다. </p>
+
+<ul>
+ <li>접두사 <code>data-</code> 는 삭제됩니다. (대시 포함);</li>
+ <li><code>a</code><span style="line-height: 1.5;"> 부터 </span><code>z</code> 까지 <span style="line-height: 1.5;">ASCII 소문자 앞에 오는</span> 모든 대시(<code>U+002D</code>)는 삭제되고 해당 소문자는 대문자로 변환됩니다.</li>
+ <li>다른 기호는(다른 대시들을 포함한) 바뀌지 않습니다.</li>
+</ul>
+
+<p>camelCase 에서 dash-style로 변환: key를 속성 이름으로 매핑하는 반대의 변환은 아래의 규칙을 따릅니다.:</p>
+
+<ul>
+ <li>제약 조건: 대시 바로 뒤에는 <code>a</code> 에서 <code>z</code> 까지 ASCII 소문자를 쓸 수 없습니다 (변환 전);</li>
+ <li>접두사 <code>data-</code> 가 추가됩니다;</li>
+ <li><code>A</code> 에서 <code>Z</code> 까지 모든 ASCII 대문자는 대시와 해당 소문자로 변환됩니다;</li>
+ <li>다른 문자는 변하지 않습니다.</li>
+</ul>
+
+<p>이러한 제약 조건은 반드시 두 변환이 서로의 역이 되도록 합니다.</p>
+
+<p>예를 들어, <code>data-abc-def</code> 라는 이름의 속성은 <code>abcDef</code> 라는 키에 대응합니다.</p>
+
+<h3 id="Accessing_values">Accessing values</h3>
+
+<ul>
+ <li>속성들은 <code>element.dataset.keyname</code><em>과 같이</em> dataset의 객체 속성처럼 camelCase 이름(키)을 사용해서 설정하거나 읽을 수 있습니다</li>
+ <li>속성들은 또한 <code>element.dataset[keyname]</code>과 같이 객체 속성의 괄호 신택스로 설정하거나 읽을 수 있습니다.</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<ul>
+ <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li>
+ <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li>
+ <br>
+ <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li>
+ <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li>
+ <li>
+ <p>HTML elements에서 사용자가 지정한 data attribute에 직접 설정할 수 있으나 attribute names는 위의 데이터 문법을 반드시 사용해야 합니다.</p>
+ </li>
+</ul>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: html">&lt;div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth&gt;John Doe&lt;/div&gt;</pre>
+
+<pre class="brush: js">const el = document.querySelector('#user');
+
+// el.id === 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+// set the data attribute
+el.dataset.dateOfBirth = '1960-10-03';
+// Result: el.dataset.dateOfBirth === 1960-10-03
+
+delete el.dataset.dateOfBirth;
+// Result: el.dataset.dateOfBirth === undefined
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// Result: 'someDataAttr' in el.dataset === true
+</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('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+ <td>{{Spec2('HTML5.1')}}</td>
+ <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.HTMLElement.dataset")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML <a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a> class of global attributes.</li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li>
+</ul>
diff --git a/files/ko/web/api/htmlelement/index.html b/files/ko/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..b73e398f7a
--- /dev/null
+++ b/files/ko/web/api/htmlelement/index.html
@@ -0,0 +1,271 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+tags:
+ - API
+ - HTML DOM
+ - Interface
+ - Reference
+translation_of: Web/API/HTMLElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><strong><code>HTMLElement</code></strong> 인터페이스는 모든 종류의 <a href="/ko/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> 요소를 나타냅니다. 일부 요소는 이 인터페이스를 직접 구현하지만 나머지 요소는 <code>HTMLElement</code>를 상속한 자식 인터페이스를 구현합니다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="속성">속성</h2>
+
+<p><em>부모인 {{domxref("Element")}}의 속성을 상속합니다. {{domxref("GlobalEventHandlers")}}, {{domxref("TouchEventHandlers")}}의 속성을 구현합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.accessKey")}}</dt>
+ <dd>요소에 할당된 접근 키를 나타내는 {{domxref("DOMString")}}입니다.</dd>
+ <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt>
+ <dd>요소에 할당된 접근 키를 포함하는 {{domxref("DOMString")}}을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.contentEditable")}}</dt>
+ <dd>요소가 수정 가능하면 <code>"true"</code>, 그렇지 않으면 <code>"false"</code> 값을 갖는 {{domxref("DOMString")}}입니다.</dd>
+ <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt>
+ <dd>요소의 콘텐츠가 수정 가능한지 여부를 나타내는 {{domxref("Boolean")}}을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.contextMenu")}} {{deprecated_inline}}</dt>
+ <dd>요소와 관련된 콘텍스트 메뉴를 나타내는 {{domxref("HTMLMenuElement")}}입니다. {{jsxref("null")}}일 수 있습니다.</dd>
+ <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt>
+ <dd>요소의 <a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0">사용자 지정 데이터 속성</a>(<code>data-*</code>)을 스크립트에서 읽고 쓸 수 있는 {{domxref("DOMStringMap")}}을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.dir")}}</dt>
+ <dd>요소의 방향성을 표현하는 전역 속성 <code>dir</code> 을 나타내는 {{domxref("DOMString")}} 을 반환합니다. 가능한 값은 <code>"ltr"</code>, <code>"rtl"</code>, <code>"auto"</code> 입니다.</dd>
+ <dt>{{domxref("HTMLElement.draggable")}}</dt>
+ <dd>요소가 드래그 가능한지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt>
+ <dd><code>dropzone</code> 전역 속성을 나타내고 drop 작업에 대한 동작을 설명하는 {{domxref("DOMSettableTokenList")}} 를 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.hidden")}}</dt>
+ <dd>요소가 숨김상태인지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.inert")}}</dt>
+ <dd>유저 에이전트가 사용자 인터렉션 이벤트, 페이지 내 텍스트 검색("페이지에서 찾기"), 텍스트 선택의 목적으로 주어진 노드가 없는 것처럼 동작해야하는지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.innerText")}}</dt>
+ <dd>노드와 그 자손의 "렌더링된" 텍스트 컨텐츠를 나타냅니다. getter 로써, 이는 사용자가 커서로 요소의 컨텐츠를 하이라이팅한 후 클립보드로 복사하면 얻을 수 있는 텍스트와 유사합니다.</dd>
+ <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt>
+ <dd>항목 스코프를 나타내는 {{jsxref("Boolean")}} 입니다.</dd>
+ <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>{{domxref("DOMSettableTokenList")}}… 를 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt>
+ <dd>항목 ID 를 나타내는 {{domxref("DOMString")}} 입니다.</dd>
+ <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>{{domxref("DOMSettableTokenList")}}… 를 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>{{domxref("DOMSettableTokenList")}}… 를 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt>
+ <dd>항목 값을 나타내는 {{jsxref("Object")}} 를 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.lang")}}</dt>
+ <dd>요소의 속성, 텍스트, 컨텐츠의 언어를 나타내는 {{domxref("DOMString")}} 입니다.</dd>
+ <dt>{{domxref("HTMLElement.noModule")}}</dt>
+ <dd>임포트한 스크립트가 모듈 스크립트를 지원하는 유저 에이전트에서 실행될 수 있는지를 나타내는 {{jsxref("Boolean")}} 입니다.</dd>
+ <dt>{{domxref("HTMLElement.nonce")}}</dt>
+ <dd>주어진 페치(fetch)의 진행을 허용할지를 결정하기 위한 컨텐츠 보안 정책(Content Security Policy)에서 한 번 사용된 암호회된 숫자를 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>레이아웃에 상대적인 요소의 높이를 갖는 <code>double</code> 을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>요소의 left border 부터 <code>offsetParent</code> 의 left border 까지의 거리를 <code>double</code> 로 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>모든 오프셋 계산이 현재 연산된 요소인 {{domxref("Element")}} 를 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>요소의 top border 부터 <code>offsetParent</code> 의 top border 까지의 거리를 <code>double</code> 로 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>레이아웃에 상대적인 요소의 너비를 갖는 <code>double</code> 을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>{{domxref("HTMLPropertiesCollection")}}… 을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt>
+ <dd><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/spellcheck" title="en/Controlling_spell_checking_in_HTML_forms">철자 검사</a>를 제어하는 {{jsxref("Boolean")}} 입니다. 모든 HTML 요소에 존재하지만, 모두에 대해 적용되지는 않습니다.</dd>
+ <dt>{{domxref("HTMLElement.style")}}</dt>
+ <dd>요소의 스타일 속성의 정의를 나타내는 {{domxref("CSSStyleDeclaration")}} 객체입니다.</dd>
+ <dt>{{domxref("HTMLElement.tabIndex")}}</dt>
+ <dd>탭 순서에서 요소의 위치를 나타내는 <code>long</code> 입니다.</dd>
+ <dt>{{domxref("HTMLElement.title")}}</dt>
+ <dd>요소에 마우스를 오버할 때 팝업 상자에 표시되는 텍스트를 갖는 {{domxref("DOMString")}} 입니다.</dd>
+ <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt>
+ <dd>번역을 나타내는 {{jsxref("Boolean")}} 입니다.</dd>
+</dl>
+
+<h3 id="이벤트_핸들러">이벤트 핸들러</h3>
+
+<p><code>onXYZ</code> 형태의 대부분의 이벤트 핸들러 속성은 {{domxref("GlobalEventHandlers")}} 또는 {{domxref("TouchEventHandlers")}} 에 정의되어 있으며 <code>HTMLElement</code> 에 의해 구현되었습니다. 다음 <code>HTMLElement</code> 에 해당하는 핸들러입니다.</p>
+
+<dl>
+ <dt>{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}</dt>
+ <dd><code>copy</code> 이벤트를 위한 이벤트 핸들링 코드를 반환합니다({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}</dt>
+ <dd><code>cut</code> 이벤트를 위한 이벤트 핸들링 코드를 반환합니다({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt>
+ <dd><code>paste</code> 이벤트를 위한 이벤트 핸들링 코드를 반환합니다({{bug("280959")}}).</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt>
+ <dd>{{event("touchstart")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt>
+ <dd>{{event("touchend")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt>
+ <dd>{{event("touchmove")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt>
+ <dd>{{event("touchenter")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt>
+ <dd>{{event("touchleave")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt>
+ <dd>{{event("touchcancel")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><em>부모인 {{domxref("Element")}}의 메서드를 상속합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.blur()")}}</dt>
+ <dd>현재 포커스된 요소로부터 키보드 포커스를 제거합니다.</dd>
+ <dt>{{domxref("HTMLElement.click()")}}</dt>
+ <dd>요소로 마우스 클릭 이벤트를 전달합니다.</dd>
+ <dt>{{domxref("HTMLElement.focus()")}}</dt>
+ <dd>요소에 현재 키보드 포커스를 생성합니다.</dd>
+ <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt>
+ <dd>요소에 철자 확인자를 생성합니다.</dd>
+</dl>
+
+<h2 id="이벤트">이벤트</h2>
+
+<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/invalid_event">invalid</a></code></dt>
+ <dd>Fired when an element does not satisfy its constraints during constraint validation.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninvalid">oninvalid</a></code> property.</dd>
+</dl>
+
+<h3 id="Animation_events">Animation events</h3>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationcancel_event">animationcancel</a></code></dt>
+ <dd>Fired when an animation unexpectedly aborts.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel">onanimationcancel</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event">animationend</a></code></dt>
+ <dd>Fired when an animation has completed normally.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onanimationend">onanimationend</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationiteration_event">animationiteration</a></code></dt>
+ <dd>Fired when an animation iteration has completed.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onanimationiteration">onanimationiteration</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event">animationstart</a></code></dt>
+ <dd>Fired when an animation starts.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart">onanimationstart</a></code> property.</dd>
+</dl>
+
+<h3 id="Input_events">Input events</h3>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event">beforeinput</a></code></dt>
+ <dd>Fired when the value of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element is about to be modified.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></dt>
+ <dd>Fired when the <code>value</code> of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput">oninput</a></code> property.</dd>
+</dl>
+
+<h3 id="Pointer_events">Pointer events</h3>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></dt>
+ <dd>Fired when an element captures a pointer using <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture">setPointerCapture()</a></code>.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ongotpointercapture">ongotpointercapture</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#Pointer_capture">captured pointer</a> is released.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onlostpointercapture">onlostpointercapture</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointercancel_event">pointercancel</a></code></dt>
+ <dd>Fired when a pointer event is canceled.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointercancel">onpointercancel</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></dt>
+ <dd>Fired when a pointer becomes active.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointerdown">onpointerdown</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></dt>
+ <dd>Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointerenter">onpointerenter</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></dt>
+ <dd>Fired when a pointer is moved out of the hit test boundaries of an element.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointerleave">onpointerleave</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></dt>
+ <dd>Fired when a pointer changes coordinates.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointermove">onpointermove</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></dt>
+ <dd>Fired when a pointer is moved out of the <em>hit test</em> boundaries of an element (among other reasons).<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointerout">onpointerout</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerover_event">pointerover</a></code></dt>
+ <dd>Fired when a pointer is moved into an element's hit test boundaries.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointerover">onpointerover</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></dt>
+ <dd>Fired when a pointer is no longer active.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointerup">onpointerup</a></code> property.</dd>
+</dl>
+
+<h3 id="Transition_events">Transition events</h3>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitioncancel_event">transitioncancel</a></code></dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is canceled.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitioncancel">ontransitioncancel</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event">transitionend</a></code></dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has completed.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionrun_event">transitionrun</a></code></dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is first created.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionrun" rel="nofollow">ontransitionrun</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionstart_event">transitionstart</a></code></dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has actually started.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionstart" rel="nofollow">ontransitionstart</a></code> property.</dd>
+</dl>
+
+<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('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td>
+ <td>{{Spec2('CSSOM View')}}</td>
+ <td>다음 속성들이 추가됨: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, <code>offsetHeight</code>.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>다음 속성들이 추가됨: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, <code>itemValue</code>.<br>
+ 다음 메소드가 추가됨: <code>forceSpellcheck()</code>.<br>
+ <code>onXYZ</code> 속성을 {{domxref("GlobalEventHandlers")}} 인터페이스로 이동하고 이로부터 상속을 추가함.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>다음 속성들이 추가됨: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, 모든 <code>onXYZ</code> 속성들.<br>
+ <code>id</code> 와 <code>className</code> 속성을 {{domxref("Element")}} 인터페이스로 이동함.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td>
+ <td>{{Spec2('DOM2 HTML')}}</td>
+ <td>{{SpecName('DOM2 HTML')}} 으로부터 변경 사항 없음</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td>
+ <td>{{Spec2('DOM1')}}</td>
+ <td>초기 정의.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.HTMLElement")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/ko/web/api/htmlelement/input_event/index.html b/files/ko/web/api/htmlelement/input_event/index.html
new file mode 100644
index 0000000000..d8f606a439
--- /dev/null
+++ b/files/ko/web/api/htmlelement/input_event/index.html
@@ -0,0 +1,100 @@
+---
+title: 'HTMLElement: input event'
+slug: Web/API/HTMLElement/input_event
+translation_of: Web/API/HTMLElement/input_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>input</code></strong> 이벤트는 {{HTMLElement("input")}}, {{HTMLElement("select")}} 및 {{HTMLElement("textarea")}} 요소의 <code>value</code> 속성이 바뀔 때마다 발생한다.</p>
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row">전파 가능</th>
+ <td>가능</td>
+ </tr>
+ <tr>
+ <th scope="row">취소 가능</th>
+ <td>불가</td>
+ </tr>
+ <tr>
+ <th scope="row">인터페이스</th>
+ <td>{{DOMxRef("InputEvent")}}</td>
+ </tr>
+ <tr>
+ <th scope="row">이벤트 핸들러 속성</th>
+ <td>{{domxref("GlobalEventHandlers.oninput")}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>또한, 이 이벤트는 아무 요소의 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 속성 및 {{domxref("Document.designMode", "designMode")}} 속성이 활성화 되어도 발생할 수 있다. 이런 경우, <code>contenteditable</code> 및 <code>designMode</code>, 속성이 활성화된 자식을 가진 편집 불가능한 최초 부모 요소에서 발생한다. 예를 들어 특정 요소에서 부모자식관계 중 자식 관계 여러개가 해당 속성이 활성화되어 내용 변경 시 이벤트가 발생해야 할 때, 해당 속성이 활성화되지 않은 최초의 부모 요소를 기준으로 발생하게 된다.</p>
+
+<p><code>type=checkbox</code> 및 <code>type=radio</code>, 속성을 가진 <code>&lt;input&gt;</code> 요소의 경우, <a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element:event-input-2">HTML5 규격</a>에 의하면, <code>input</code> 이벤트는 반드시 사용자가 작동시킬 때마다 발생된다. 하지만 애초부터 그렇게 설계되어 있지 않은 경우가 있으므로, 반드시 아래 호환성 문단을 참고하거나, 호환되지 않을 경우, {{domxref("HTMLElement/change_event", "change")}} 이벤트를 대신해서 사용하도록 한다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> The <code>input</code> 이벤트는 {{domxref("HTMLElement/change_event", "change")}} 이벤트와는 달리 <code>value</code> 속성이 바뀔 시마다 반드시 일어난다. 값을 선택하거나 옵션 선택하자마자 일어나지만, 특정 글자를 입력 시에는 입력이 끝나고 value 속성에 적용되어야 발생하는데, 예를 들면, 한글 입력의 경우 한글자가 완성된 뒤 다른 키를 입력(예: 엔터 키)이 일어나야 발생된다. 이 또한 브라우저마다 다르므로 호환성을 확인하여 대응해야 한다. (역자 주)</p>
+</div>
+
+<h2 id="예시">예시</h2>
+
+<p>이 예시는 {{HtmlElement("input")}} 요소에 값을 입력하자마자 로그에 기록한다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input placeholder="Enter some text" name="name"/&gt;
+&lt;p id="values"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('input', updateValue);
+
+function updateValue(e) {
+ log.textContent = e.target.value;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('DOM3 Events', "#event-type-input", "input event")}}</td>
+ <td>{{Spec2('DOM3 Events')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.input_event")}}</p>
+
+<h2 id="같이보기">같이보기</h2>
+
+<ul>
+ <li>관련 이벤트
+ <ul>
+ <li>{{domxref("HTMLElement/beforeinput_event", "beforeinput")}}</li>
+ <li>{{domxref("HTMLElement/change_event", "change")}}</li>
+ <li>{{domxref("HTMLInputElement/invalid_event", "invalid")}}</li>
+ </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/api/htmlelement/offsetparent/index.html b/files/ko/web/api/htmlelement/offsetparent/index.html
new file mode 100644
index 0000000000..f79d785530
--- /dev/null
+++ b/files/ko/web/api/htmlelement/offsetparent/index.html
@@ -0,0 +1,43 @@
+---
+title: HTMLElement.offsetParent
+slug: Web/API/HTMLElement/offsetParent
+translation_of: Web/API/HTMLElement/offsetParent
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><strong><code>HTMLElement.offsetParent</code></strong> 읽기전용 프라퍼티는 가장 가까운 (포함 계층에서 가장 가까운) 위치가 정해진 포함하는 엘리먼트 객체에 대한 참조를 반환한다. <code>offsetParent</code>는 엘리먼트의 위치가 정해지지 않으면 가장 가까운 테이블 또는 테이블 셀, 루트 엘리먼트 (표준 준수 모드에서는 <code>html</code>; quirks 렌더링 모드에서는 <code>body</code>) 를 반환한다.<br>
+ 엘리먼트의 <code>style.display</code>가 "none"으로 설정되면 null을 반환한다. <code>offsetParent</code>는 {{domxref("HTMLElement.offsetTop","offsetTop")}}과 {{domxref("HTMLElement.offsetLeft","offsetLeft")}}가 그것의 패딩 모서리에 상대적이기 때문에 유용하다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><var>parentObj</var> = element.offsetParent;
+</pre>
+
+<ul>
+ <li><var>parentObj는 현재 엘리먼트가 그 안에서 offset된 엘리먼트의 객체 참조이다. </var> is an object reference to the element in which the current element is offset.</li>
+</ul>
+
+<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-offsetparent', 'offsetParent')}}</td>
+ <td>{{Spec2('CSSOM View')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility" name="Compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("api.HTMLElement.offsetParent")}}</p>
diff --git a/files/ko/web/api/htmlelement/outertext/index.html b/files/ko/web/api/htmlelement/outertext/index.html
new file mode 100644
index 0000000000..5fba566816
--- /dev/null
+++ b/files/ko/web/api/htmlelement/outertext/index.html
@@ -0,0 +1,33 @@
+---
+title: HTMLElement.outerText
+slug: Web/API/HTMLElement/outerText
+translation_of: Web/API/HTMLElement/outerText
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p><strong><code>HTMLElement.outerText</code></strong> 는 비표준 속성(property)입니다. getter로써{{domxref("Node.innerText")}}의 값을 반환합니다. setter로써는 현재 노드를 삭제하고 주어진 텍스트값으로 대체합니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<p><a href="http://stackoverflow.com/a/18481435">StackOverflow의 이 답변을 보세요.</a></p>
+
+<h2 id="Specification">Specification</h2>
+
+<p>표준이 아니므로 스펙이 없습니다. 표준 논의가 다음에서 진행중입니다: <a href="https://github.com/whatwg/html/issues/668">whatwg/html#668</a>.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms534311(v=vs.85).aspx">has a description on MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.outerText")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.outerHTML")}}</li>
+</ul>
diff --git a/files/ko/web/api/htmlelement/style/index.html b/files/ko/web/api/htmlelement/style/index.html
new file mode 100644
index 0000000000..5976dd66bc
--- /dev/null
+++ b/files/ko/web/api/htmlelement/style/index.html
@@ -0,0 +1,41 @@
+---
+title: element.style
+slug: Web/API/HTMLElement/style
+tags:
+ - API
+ - HTML DOM
+ - HTMLElement
+ - Property
+ - Reference
+ - Style
+translation_of: Web/API/ElementCSSInlineStyle/style
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><code><strong>HTMLElement.style</strong></code> 속성은 요소의 인라인 스타일에 접근하거나 설정할 때 사용할 수 있습니다. 접근자로서는 요소의 인라인 <a href="/ko/docs/Web/HTML/Global_attributes/style"><code>style</code> 속성</a>이 포함한 CSS 선언을 담은 {{domxref("CSSStyleDeclaration")}} 객체를 반환합니다</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// Set multiple styles in a single statement
+elt.style.cssText = "color: blue; border: 1px solid black";
+// Or
+elt.setAttribute("style", "color:red; border: 1px solid blue;");
+
+// Set specific style while leaving other inline style values untouched
+elt.style.color = "blue";</pre>
+
+<h2 id="명세">명세</h2>
+
+<p><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p>
+
+<p><a href="https://www.w3.org/TR/cssom-1/#the-elementcssinlinestyle-interface">CSSOM: ElementCSSInlineStyle</a></p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.HTMLElement.style")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/DOM/Using_dynamic_styling_information" title="DOM/Using dynamic styling information">Using dynamic styling information</a></li>
+</ul>
diff --git a/files/ko/web/api/htmlelement/tabindex/index.html b/files/ko/web/api/htmlelement/tabindex/index.html
new file mode 100644
index 0000000000..7cbb0fa1f0
--- /dev/null
+++ b/files/ko/web/api/htmlelement/tabindex/index.html
@@ -0,0 +1,26 @@
+---
+title: element.tabIndex
+slug: Web/API/HTMLElement/tabIndex
+tags:
+ - DOM
+ - Gecko
+ - Gecko DOM Reference
+translation_of: Web/API/HTMLOrForeignElement/tabIndex
+---
+<p>{{ ApiRef() }}</p>
+<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
+<p>현재 요소의 탭 순서를 get/set.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">element.tabIndex =<i>iIndex</i>
+</pre>
+<h3 id=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98" name=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98">매개변수</h3>
+<ul>
+ <li><code>iIndex</code>는 숫자</li>
+</ul>
+<h3 id=".EC.98.88" name=".EC.98.88">예</h3>
+<pre>b1 = document.getElementById("button1");
+b1.tabIndex = 1;
+</pre>
+<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3>
+<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-40676705">tabIndex </a></p>
+<p>{{ languages( { "en": "en/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" } ) }}</p>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2024-12-29 08:47:36 +0000