From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../web/api/htmlelement/accesskeylabel/index.html | 84 +++++++ files/ko/web/api/htmlelement/click/index.html | 47 ++++ .../web/api/htmlelement/contenteditable/index.html | 59 +++++ files/ko/web/api/htmlelement/dataset/index.html | 127 ++++++++++ files/ko/web/api/htmlelement/index.html | 271 +++++++++++++++++++++ .../ko/web/api/htmlelement/input_event/index.html | 100 ++++++++ .../ko/web/api/htmlelement/offsetparent/index.html | 43 ++++ files/ko/web/api/htmlelement/outertext/index.html | 33 +++ files/ko/web/api/htmlelement/style/index.html | 41 ++++ files/ko/web/api/htmlelement/tabindex/index.html | 26 ++ 10 files changed, 831 insertions(+) create mode 100644 files/ko/web/api/htmlelement/accesskeylabel/index.html create mode 100644 files/ko/web/api/htmlelement/click/index.html create mode 100644 files/ko/web/api/htmlelement/contenteditable/index.html create mode 100644 files/ko/web/api/htmlelement/dataset/index.html create mode 100644 files/ko/web/api/htmlelement/index.html create mode 100644 files/ko/web/api/htmlelement/input_event/index.html create mode 100644 files/ko/web/api/htmlelement/offsetparent/index.html create mode 100644 files/ko/web/api/htmlelement/outertext/index.html create mode 100644 files/ko/web/api/htmlelement/style/index.html create mode 100644 files/ko/web/api/htmlelement/tabindex/index.html (limited to 'files/ko/web/api/htmlelement') 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 +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

HTMLElement.accessKeyLabel 읽기 전용 속성은 엘리먼트의 할당된 접근키를 나타내는 {{jsxref("String")}} 를 반환합니다. 존재하지 않는 경우 빈 문자열을 반환합니다.

+ +

구문

+ +
label = element.accessKeyLabel
+
+ +

예시

+ +

JavaScript

+ +
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);
+};
+
+ +

HTML

+ +
<button accesskey="h" title="Caption" id="btn1">Hover me</button>
+
+ +

Result

+ +

{{ EmbedLiveSample('Example') }}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + +
명세상태코멘트
{{SpecName('HTML WHATWG', "interaction.html#dom-accesskeylabel", "HTMLElement.accessKeyLabel")}}{{Spec2('HTML WHATWG')}}초기 정의로부터 변경 사항 없음.
{{SpecName('HTML5.1')}}{{Spec2('HTML5.1')}}제거됨. pull w3c/html#144, issue w3c/html#99, WICG discussion.
{{SpecName('HTML5 W3C', "editing.html#dom-accesskeylabel", "HTMLElement.accessKeyLabel")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}}, 초기 정의의 스냅샷.
+ +

브라우저 호환성

+ +
+ + +

{{Compat("api.HTMLElement.accessKeyLabel")}}

+
+ +

함께 보기

+ + 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 +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

HTMLElement.click() 메소는 엘리먼트에 마우스 클릭을 시뮬레이션합니다.

+ +

지원하는 엘리먼트({{HTMLElement("input")}} 등)에서 click() 이 사용될 때, 엘리먼트의 클릭 이벤트가 실행됩니다. 그 다음, 다큐먼트 트리(또는 이벤트 체인)에서 더 상위의 엘리먼트로 버블링되며 상위 엘리먼트의 클릭 이벤트를 실행합니다.

+ +

구문

+ +
element.click()
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태코멘트
{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}{{Spec2('DOM2 HTML')}}초기 정의.
+ +

브라우저 호환성

+ + + +

{{Compat("api.HTMLElement.click")}}

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 +--- +
{{APIRef("HTML DOM")}}
+ +

{{domxref("HTMLElement")}} 요소의 contenteditable 속성은 요소의 편집 가능 여부를 나타냅니다. 열거형 속성으로, 다음 중 하나의 값을 가질 수 있습니다.

+ + + +

{{domxref("HTMLElement.isContentEditable")}} 속성으로 이 속성의 {{jsxref("Boolean")}} 계산값을 얻을 수 있습니다.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

브라우저 호환성

+ +
+ + +

{{Compat("api.HTMLElement.contentEditable")}}

+ +

Internet Explorer에서 contenteditable은 {{htmlelement("table")}}, {{htmlelement("col")}}, {{htmlelement("colgroup")}}, {{htmlelement("tbody")}}, {{htmlelement("td")}}, {{htmlelement("tfoot")}}, {{htmlelement("th")}}, {{htmlelement("thead")}}, {{htmlelement("tr")}} 요소에 바로 적용할 수 없습니다. 대신 편집 가능한 {{htmlelement("span")}} 또는 {{htmlelement("div")}} 요소를 표의 각 칸에 배치할 수 있습니다.

+
+ +

같이 보기

+ + 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 +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLElement.dataset 읽기 전용 속성은 요소의 사용자 지정 데이터 특성(data-*)에 대한 읽기와 쓰기 접근 방법을 HTML과 DOM 양측에 제공합니다. 반환하는 값은 {{domxref("DOMStringMap")}}으로, 각 데이터 특성마다 하나의 항목을 가집니다. dataset 속성 자체는 읽기 전용이라는 점에 주의하세요. 모든 쓰기 작업은 dataset 안의, 데이터 특성을 나타내는 각각의 속성에 수행해야 합니다. 또한 HTML의 data-이름과, 이에 대응하는 DOM dataset['이름']의 이름은 서로 일치하지 않으나, 다음 규칙에 따라 유사함을 기억하세요.

+ + + +

아래의 내용과 함께, Using data attributes 아티클에서는 HTML 데이터 속성을 어떻게 쓰는지 안내를 찾을 수 있습니다. 

+ +

Name conversion

+ +

dash-style 에서 camelCase로 변환: 커스텀 데이터 속성의 이름은 아래의 규칙에 따라 {{ domxref("DOMStringMap") }}의 key로 변환됩니다. 

+ + + +

camelCase 에서 dash-style로 변환: key를 속성 이름으로 매핑하는 반대의 변환은 아래의 규칙을 따릅니다.:

+ + + +

이러한 제약 조건은 반드시 두 변환이 서로의 역이 되도록 합니다.

+ +

예를 들어, data-abc-def 라는 이름의 속성은 abcDef 라는 키에 대응합니다.

+ +

Accessing values

+ + + +

Syntax

+ + + +

예시

+ +
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
+ +
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
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

브라우저 호환성

+ +

{{Compat("api.HTMLElement.dataset")}}

+ +

See also

+ + 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 +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

HTMLElement 인터페이스는 모든 종류의 HTML 요소를 나타냅니다. 일부 요소는 이 인터페이스를 직접 구현하지만 나머지 요소는 HTMLElement를 상속한 자식 인터페이스를 구현합니다.

+ +

{{InheritanceDiagram}}

+ +

속성

+ +

부모인 {{domxref("Element")}}의 속성을 상속합니다. {{domxref("GlobalEventHandlers")}}, {{domxref("TouchEventHandlers")}}의 속성을 구현합니다.

+ +
+
{{domxref("HTMLElement.accessKey")}}
+
요소에 할당된 접근 키를 나타내는 {{domxref("DOMString")}}입니다.
+
{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}
+
요소에 할당된 접근 키를 포함하는 {{domxref("DOMString")}}을 반환합니다.
+
{{domxref("HTMLElement.contentEditable")}}
+
요소가 수정 가능하면 "true", 그렇지 않으면 "false" 값을 갖는 {{domxref("DOMString")}}입니다.
+
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}
+
요소의 콘텐츠가 수정 가능한지 여부를 나타내는 {{domxref("Boolean")}}을 반환합니다.
+
{{domxref("HTMLElement.contextMenu")}} {{deprecated_inline}}
+
요소와 관련된 콘텍스트 메뉴를 나타내는 {{domxref("HTMLMenuElement")}}입니다. {{jsxref("null")}}일 수 있습니다.
+
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}
+
요소의 사용자 지정 데이터 속성(data-*)을 스크립트에서 읽고 쓸 수 있는 {{domxref("DOMStringMap")}}을 반환합니다.
+
{{domxref("HTMLElement.dir")}}
+
요소의 방향성을 표현하는 전역 속성 dir 을 나타내는 {{domxref("DOMString")}} 을 반환합니다. 가능한 값은 "ltr", "rtl", "auto" 입니다.
+
{{domxref("HTMLElement.draggable")}}
+
요소가 드래그 가능한지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다.
+
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}
+
dropzone 전역 속성을 나타내고 drop 작업에 대한 동작을 설명하는 {{domxref("DOMSettableTokenList")}} 를 반환합니다.
+
{{domxref("HTMLElement.hidden")}}
+
요소가 숨김상태인지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다.
+
{{domxref("HTMLElement.inert")}}
+
유저 에이전트가 사용자 인터렉션 이벤트, 페이지 내 텍스트 검색("페이지에서 찾기"), 텍스트 선택의 목적으로 주어진 노드가 없는 것처럼 동작해야하는지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다.
+
{{domxref("HTMLElement.innerText")}}
+
노드와 그 자손의 "렌더링된" 텍스트 컨텐츠를 나타냅니다. getter 로써, 이는 사용자가 커서로 요소의 컨텐츠를 하이라이팅한 후 클립보드로 복사하면 얻을 수 있는 텍스트와 유사합니다.
+
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}
+
항목 스코프를 나타내는 {{jsxref("Boolean")}} 입니다.
+
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}
+
{{domxref("DOMSettableTokenList")}}… 를 반환합니다.
+
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}
+
항목 ID 를 나타내는 {{domxref("DOMString")}} 입니다.
+
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}
+
{{domxref("DOMSettableTokenList")}}… 를 반환합니다.
+
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}
+
{{domxref("DOMSettableTokenList")}}… 를 반환합니다.
+
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}
+
항목 값을 나타내는 {{jsxref("Object")}} 를 반환합니다.
+
{{domxref("HTMLElement.lang")}}
+
요소의 속성, 텍스트, 컨텐츠의 언어를 나타내는 {{domxref("DOMString")}} 입니다.
+
{{domxref("HTMLElement.noModule")}}
+
임포트한 스크립트가 모듈 스크립트를 지원하는 유저 에이전트에서 실행될 수 있는지를 나타내는 {{jsxref("Boolean")}} 입니다.
+
{{domxref("HTMLElement.nonce")}}
+
주어진 페치(fetch)의 진행을 허용할지를 결정하기 위한 컨텐츠 보안 정책(Content Security Policy)에서 한 번 사용된 암호회된 숫자를 반환합니다.
+
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}
+
레이아웃에 상대적인 요소의 높이를 갖는 double 을 반환합니다.
+
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}
+
요소의 left border 부터 offsetParent 의 left border 까지의 거리를 double 로 반환합니다.
+
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}
+
모든 오프셋 계산이 현재 연산된 요소인 {{domxref("Element")}} 를 반환합니다.
+
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}
+
요소의 top border 부터 offsetParent 의 top border 까지의 거리를 double 로 반환합니다.
+
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}
+
레이아웃에 상대적인 요소의 너비를 갖는 double 을 반환합니다.
+
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}
+
{{domxref("HTMLPropertiesCollection")}}… 을 반환합니다.
+
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}
+
철자 검사를 제어하는 {{jsxref("Boolean")}} 입니다. 모든 HTML 요소에 존재하지만, 모두에 대해 적용되지는 않습니다.
+
{{domxref("HTMLElement.style")}}
+
요소의 스타일 속성의 정의를 나타내는 {{domxref("CSSStyleDeclaration")}} 객체입니다.
+
{{domxref("HTMLElement.tabIndex")}}
+
탭 순서에서 요소의 위치를 나타내는 long 입니다.
+
{{domxref("HTMLElement.title")}}
+
요소에 마우스를 오버할 때 팝업 상자에 표시되는 텍스트를 갖는 {{domxref("DOMString")}} 입니다.
+
{{domxref("HTMLElement.translate")}} {{experimental_inline}}
+
번역을 나타내는 {{jsxref("Boolean")}} 입니다.
+
+ +

이벤트 핸들러

+ +

onXYZ 형태의 대부분의 이벤트 핸들러 속성은 {{domxref("GlobalEventHandlers")}} 또는 {{domxref("TouchEventHandlers")}} 에 정의되어 있으며 HTMLElement 에 의해 구현되었습니다. 다음 HTMLElement 에 해당하는 핸들러입니다.

+ +
+
{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}
+
copy 이벤트를 위한 이벤트 핸들링 코드를 반환합니다({{bug("280959")}}).
+
{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}
+
cut 이벤트를 위한 이벤트 핸들링 코드를 반환합니다({{bug("280959")}}).
+
{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}
+
paste 이벤트를 위한 이벤트 핸들링 코드를 반환합니다({{bug("280959")}}).
+
{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}
+
{{event("touchstart")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.
+
{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}
+
{{event("touchend")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.
+
{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}
+
{{event("touchmove")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.
+
{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}
+
{{event("touchenter")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.
+
{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}
+
{{event("touchleave")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.
+
{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}
+
{{event("touchcancel")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.
+
+ +

메서드

+ +

부모인 {{domxref("Element")}}의 메서드를 상속합니다.

+ +
+
{{domxref("HTMLElement.blur()")}}
+
현재 포커스된 요소로부터 키보드 포커스를 제거합니다.
+
{{domxref("HTMLElement.click()")}}
+
요소로 마우스 클릭 이벤트를 전달합니다.
+
{{domxref("HTMLElement.focus()")}}
+
요소에 현재 키보드 포커스를 생성합니다.
+
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}
+
요소에 철자 확인자를 생성합니다.
+
+ +

이벤트

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
invalid
+
Fired when an element does not satisfy its constraints during constraint validation.
+ Also available via the oninvalid property.
+
+ +

Animation events

+ +
+
animationcancel
+
Fired when an animation unexpectedly aborts.
+ Also available via the onanimationcancel property.
+
animationend
+
Fired when an animation has completed normally.
+ Also available via the onanimationend property.
+
animationiteration
+
Fired when an animation iteration has completed.
+ Also available via the onanimationiteration property.
+
animationstart
+
Fired when an animation starts.
+ Also available via the onanimationstart property.
+
+ +

Input events

+ +
+
beforeinput
+
Fired when the value of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element is about to be modified.
+
input
+
Fired when the value of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed.
+ Also available via the oninput property.
+
+ +

Pointer events

+ +
+
gotpointercapture
+
Fired when an element captures a pointer using setPointerCapture().
+ Also available via the ongotpointercapture property.
+
lostpointercapture
+
Fired when a captured pointer is released.
+ Also available via the onlostpointercapture property.
+
pointercancel
+
Fired when a pointer event is canceled.
+ Also available via the onpointercancel property.
+
pointerdown
+
Fired when a pointer becomes active.
+ Also available via the onpointerdown property.
+
pointerenter
+
Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants.
+ Also available via the onpointerenter property.
+
pointerleave
+
Fired when a pointer is moved out of the hit test boundaries of an element.
+ Also available via the onpointerleave property.
+
pointermove
+
Fired when a pointer changes coordinates.
+ Also available via the onpointermove property.
+
pointerout
+
Fired when a pointer is moved out of the hit test boundaries of an element (among other reasons).
+ Also available via the onpointerout property.
+
pointerover
+
Fired when a pointer is moved into an element's hit test boundaries.
+ Also available via the onpointerover property.
+
pointerup
+
Fired when a pointer is no longer active.
+ Also available via the onpointerup property.
+
+ +

Transition events

+ +
+
transitioncancel
+
Fired when a CSS transition is canceled.
+ Also available via the ontransitioncancel property.
+
transitionend
+
Fired when a CSS transition has completed.
+ Also available via the ontransitionend property.
+
transitionrun
+
Fired when a CSS transition is first created.
+ Also available via the ontransitionrun property.
+
transitionstart
+
Fired when a CSS transition has actually started.
+ Also available via the ontransitionstart property.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태코멘트
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}다음 속성들이 추가됨: offsetParent, offsetTop, offsetLeft, offsetWidth, offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}다음 속성들이 추가됨: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, itemValue.
+ 다음 메소드가 추가됨: forceSpellcheck().
+ onXYZ 속성을 {{domxref("GlobalEventHandlers")}} 인터페이스로 이동하고 이로부터 상속을 추가함.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}다음 속성들이 추가됨: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, 모든 onXYZ 속성들.
+ id 와 className 속성을 {{domxref("Element")}} 인터페이스로 이동함.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}{{SpecName('DOM2 HTML')}} 으로부터 변경 사항 없음
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}초기 정의.
+ +

브라우저 호환성

+ + + +

{{Compat("api.HTMLElement")}}

+ +

같이 보기

+ + 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 +--- +
{{APIRef}}
+ +

input 이벤트는 {{HTMLElement("input")}}, {{HTMLElement("select")}} 및 {{HTMLElement("textarea")}} 요소의 value 속성이 바뀔 때마다 발생한다.

+ + + + + + + + + + + + + + + + + + + + +
전파 가능가능
취소 가능불가
인터페이스{{DOMxRef("InputEvent")}}
이벤트 핸들러 속성{{domxref("GlobalEventHandlers.oninput")}}
+ +

또한, 이 이벤트는 아무 요소의 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 속성 및 {{domxref("Document.designMode", "designMode")}} 속성이 활성화 되어도 발생할 수 있다. 이런 경우, contenteditable 및 designMode, 속성이 활성화된 자식을 가진 편집 불가능한 최초 부모 요소에서 발생한다. 예를 들어 특정 요소에서 부모자식관계 중 자식 관계 여러개가 해당 속성이 활성화되어 내용 변경 시 이벤트가 발생해야 할 때, 해당 속성이 활성화되지 않은 최초의 부모 요소를 기준으로 발생하게 된다.

+ +

type=checkbox 및 type=radio, 속성을 가진 <input> 요소의 경우, HTML5 규격에 의하면, input 이벤트는 반드시 사용자가 작동시킬 때마다 발생된다. 하지만 애초부터 그렇게 설계되어 있지 않은 경우가 있으므로, 반드시 아래 호환성 문단을 참고하거나, 호환되지 않을 경우, {{domxref("HTMLElement/change_event", "change")}} 이벤트를 대신해서 사용하도록 한다.

+ +
+

참고: The input 이벤트는 {{domxref("HTMLElement/change_event", "change")}} 이벤트와는 달리 value 속성이 바뀔 시마다 반드시 일어난다. 값을 선택하거나 옵션 선택하자마자 일어나지만, 특정 글자를 입력 시에는 입력이 끝나고 value 속성에 적용되어야 발생하는데, 예를 들면, 한글 입력의 경우 한글자가 완성된 뒤 다른 키를 입력(예: 엔터 키)이 일어나야 발생된다. 이 또한 브라우저마다 다르므로 호환성을 확인하여 대응해야 한다. (역자 주)

+
+ +

예시

+ +

이 예시는 {{HtmlElement("input")}} 요소에 값을 입력하자마자 로그에 기록한다.

+ +

HTML

+ +
<input placeholder="Enter some text" name="name"/>
+<p id="values"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('input', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}
+ +

Result

+ +

{{EmbedLiveSample("Examples")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + +
SpecificationStatus
{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('DOM3 Events', "#event-type-input", "input event")}}{{Spec2('DOM3 Events')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLElement.input_event")}}

+ +

같이보기

+ + 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 +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

HTMLElement.offsetParent 읽기전용 프라퍼티는 가장 가까운 (포함 계층에서 가장 가까운) 위치가 정해진 포함하는 엘리먼트 객체에 대한 참조를 반환한다. offsetParent는 엘리먼트의 위치가 정해지지 않으면 가장 가까운 테이블 또는 테이블 셀, 루트 엘리먼트 (표준 준수 모드에서는 html; quirks 렌더링 모드에서는 body) 를 반환한다.
+ 엘리먼트의 style.display가 "none"으로 설정되면 null을 반환한다. offsetParent는 {{domxref("HTMLElement.offsetTop","offsetTop")}}과 {{domxref("HTMLElement.offsetLeft","offsetLeft")}}가 그것의 패딩 모서리에 상대적이기 때문에 유용하다.

+ +

문법

+ +
parentObj = element.offsetParent;
+
+ + + +

명세

+ + + + + + + + + + + + + + + + +
명세상태주석
{{SpecName('CSSOM View', '#dom-htmlelement-offsetparent', 'offsetParent')}}{{Spec2('CSSOM View')}} 
+ +

브라우저 호환성

+ +

{{Compat("api.HTMLElement.offsetParent")}}

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 +--- +
{{APIRef("DOM")}}
+ +

{{ Non-standard_header() }}

+ +

HTMLElement.outerText 는 비표준 속성(property)입니다. getter로써{{domxref("Node.innerText")}}의 값을 반환합니다. setter로써는 현재 노드를 삭제하고 주어진 텍스트값으로 대체합니다.

+ +

Example

+ +

StackOverflow의 이 답변을 보세요.

+ +

Specification

+ +

표준이 아니므로 스펙이 없습니다. 표준 논의가 다음에서 진행중입니다: whatwg/html#668.

+ +

Microsoft has a description on MSDN.

+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLElement.outerText")}}

+ +

See also

+ + 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 +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.style 속성은 요소의 인라인 스타일에 접근하거나 설정할 때 사용할 수 있습니다. 접근자로서는 요소의 인라인 style 속성이 포함한 CSS 선언을 담은 {{domxref("CSSStyleDeclaration")}} 객체를 반환합니다

+ +

예제

+ +
// 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";
+ +

명세

+ +

DOM Level 2 Style: ElementCSSInlineStyle.style

+ +

CSSOM: ElementCSSInlineStyle

+ +

브라우저 호환성

+ +

{{Compat("api.HTMLElement.style")}}

+ +

같이 보기

+ + 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 +--- +

{{ ApiRef() }}

+

요약

+

현재 요소의 탭 순서를 get/set.

+

구문

+
element.tabIndex =iIndex
+
+

매개변수

+ +

예

+
b1 = document.getElementById("button1");
+b1.tabIndex = 1;
+
+

명세

+

tabIndex

+

{{ languages( { "en": "en/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" } ) }}

-- cgit v1.2.3-54-g00ecf