Element.removeAttribute() - Web API

Element.removeAttribute()
=========================

**`Element.removeAttribute()`** 메서드는 요소에서 주어진 이름의 특성을 제거합니다.

구문
--

```js
element.removeAttribute(attrName);
```

### 매개변수

`attrName`

요소에서 제거할 특성 이름을 지정하는 `DOMString`. 지정하지 않으면 오류 없이 아무 동작도 하지 않습니다.

### 반환 값

`undefined`.

사용 일람
-----

많은 특성은 `null`을 대입했을 때 예상치 못한 동작을 하곤 합니다. 그러므로 특성을 삭제할 때 `null`을 직접 대입하거나, `setAttribute()`의 매개변수로 제공하기보단 `removeAttribute()` 메서드를 사용해야 합니다.

예제
--

```js
// Given: <div id="div1" align="left" width="200px">
document.getElementById("div1").removeAttribute("align");
// Now: <div id="div1" width="200px">
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-removeattribute① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Element.classList - Web API

Element.classList
=================

**`Element.classList`** 는 엘리먼트의 클래스 속성의 컬렉션인 활성 `DOMTokenList` (en-US)를 반환하는 읽기 전용 프로퍼티이다.

`classList` 사용은 공백으로 구분된 문자열인 `element.className`을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.

구문
--
```

const elementClasses = elementNodeReference.classList;
```

`elementClasses`는 `elementNodeReference`의 클래스 속성을 나타내는 `DOMTokenList` (en-US)이다. 만약 클래스 속성이 설정되어 있지 않거나 비어있다면 *elementClasses.length*는 `0`을 반환한다. `element.classList` 그 자체는 읽기 전용 프로퍼티지만 `add()`와 `remove()` 메서드를 이용하여 변형할 수 있다.

메서드
---

`add( String [, String [, ...]] )`
지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 `class` 속성에 이미 존재한다면 무시한다.
`remove( String [, String [, ...]] )`
지정한 클래스 값을 제거한다.

**노트:** 존재하지 않는 클래스를 제거하는 것은 **에러를 발생시키지 않습니다.**

`**item**( Number )`
콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.
`**toggle**( String [, force] )`
하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 `false`를 반환하며, 존재하지 않으면 클래스를 추가하고 `true`를 반환한다.
두번째 인수가 있을 때: 두번째 인수가 `true`로 평가되면 지정한 클래스 값을 추가하고 `false`로 평가되면 제거한다.
`contains( String )`
지정한 클래스 값이 엘리먼트의 `class` 속성에 존재하는지 확인한다.
`replace( oldClass, newClass )`
존재하는 클래스를 새로운 클래스로 교체한다.
예제
--

```js
const div = document.createElement("div");
div.className = "foo";

// our starting state: <div class="foo"></div>
console.log(div.outerHTML);

// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
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 < 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");
```

**참고:** Firefox 26 이전의 버전에서는 add/remove/toggle 메서드에서 여러 인수의 사용을 구현하지 않았다. https://bugzilla.mozilla.org/show\_bug.cgi?id=814014 링크를 참조하라.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-classlist① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

참고
--

* `element.className`
* `DOMTokenList` (en-US)


Element.closest() - Web API

Element.closest()
=================

`Element` (en-US)의 **`closest()`** 메서드는 주어진 CSS 선택자와 일치하는 요소를 찾을 때까지, 자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회합니다.

구문
--

```js
closest(selectors);
```

### 매개변수

`selectors`

`Element` (en-US)와 그 조상 요소들에 테스트할, 유효한 CSS 선택자 문자열입니다.

### 반환 값

`selectors`에 일치하는 가장 가까운 조상 `Element` (en-US) 또는 자기 자신, 일치하는 요소가 없으면 `null`.

### 예외

`SyntaxError` `DOMException` (en-US)

`selectors`가 유효한 CSS 선택자가 아니면 발생합니다.

예제
--

### HTML

```html
<article>
  <div id="div-01">
    Here is div-01
    <div id="div-02">
      Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>
```

### JavaScript

```js
const el = document.getElementById("div-03");

// ID가 "div-02"인 가장 가까운 조상
console.log(el.closest("#div-02")); // <div id="div-02">

// div 안에 놓인 div인 가장 가까운 조상
console.log(el.closest("div div")); // <div id="div-03">

// div면서 article을 부모로 둔 가장 가까운 조상
console.log(el.closest("article > div")); // <div id="div-01">

// div가 아닌 가장 가까운 조상
console.log(el.closest(":not(div)")); // <article>
```

폴리필
---

`element.closest()`는 지원하지 않지만, `element.matches()`(또는 공급자 접두사를 포함한 동일 메서드, 즉 IE9+)는 지원하는 브라우저를 위한 폴리필입니다.

```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 (Element.prototype.matches.call(el, s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}
```

정말 IE 8을 지원해야 하는 경우, 아래의 폴리필을 사용하면 비록 느리게나마 같은 작업을 할 수 있습니다. 하지만 IE 8에서는 CSS 2.1 선택자만 사용할 수 있고, 이 폴리필을 실제 운영하는 웹 사이트에 적용하면 심각한 지연 시간의 원인이 될 수 있습니다.

```js
if (window.Element && !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 >= 0 && matches.item(i) !== el) {}
    } while (i < 0 && (el = el.parentElement));
    return el;
  };
}
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-closest① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### 호환성 참고사항

* Edge 15-18에서는 요소가 컨텍스트 객체(일반 DOM의 경우, `Document`)와 연결되지 않은 경우 `null`을 반환합니다. 따라서 `document.createElement(tagName).closest(tagName)`의 결과는 항상 `null`입니다.
같이보기
----

* CSS 선택자 참고서
* 선택자를 받는 `Element` (en-US) 메서드: `Element.querySelector()` (en-US), `Element.querySelectorAll()` (en-US), `Element.matches()` (en-US)


Element: cut 이벤트 - Web API

Element: cut 이벤트
================

**`copy`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 잘라내기를 했을 때 발생합니다.

사용자가 수정 불가능한 콘텐츠에 대해 잘라내기를 시도할 경우에도 `cut` 이벤트는 발생하지만, 데이터는 비어있을 것입니다.

|  |  |
| --- | --- |
| 버블링 | 예 |
| 취소 가능 | 예 |
| 인터페이스 | `ClipboardEvent` |
| 이벤트 처리기 속성 | `oncut` (en-US) |

이벤트의 기본 동작은 선택한 영역(존재하는 경우)을 클립보드로 복사한 후 문서에서 제거하는 것입니다.

`cut` 이벤트 처리기는 이벤트의 `ClipboardEvent.clipboardData` 속성에 대해 `setData(format, data)` (en-US) 메서드를 호출해 클립보드로 복사할 콘텐츠를 수정할 수 있고, `event.preventDefault()`를 호출해 기본 동작을 취소할 수도 있습니다.

기본 동작을 취소할 경우 잘라낸 영역을 문서에서 제거하지도 않는다는 점에 주의하세요. 따라서 기본 잘라내기 동작을 흉내내는 처리기를 구현하는 경우, 문서의 수정도 직접 해줘야 합니다.

처리기에서 클립보드 데이터를 읽을 수는 없습니다.

합성 `cut` 이벤트를 생성해서 발송할 수는 있지만, 이 방법으로는 시스템 클립보드나 문서 내용에 영향을 줄 수 없습니다.

예제
--

### HTML

```html
<div class="source" contenteditable="true">
  이 상자에서 텍스트를 잘라내 보세요...
</div>
<div class="target" contenteditable="true">...여기에 붙여 넣어 보세요.</div>
```

```
div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}
```

### JS

```js
const source = document.querySelector("div.source");

source.addEventListener("cut", (event) => {
  const selection = document.getSelection();
  const reversed = Array.from(selection.toString()).reverse().join("");

  event.clipboardData.setData("text/plain", reversed);
  selection.deleteFromDocument();
  event.preventDefault();
});
```

### 결과

명세
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-cut |
| HTML Standard # handler-oncut |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 관련 이벤트: `copy`, `paste`
* `Document`를 대상으로 한 같은 이벤트: `cut`
* `Window`를 대상으로 한 같은 이벤트: `cut`


GlobalEventHandlers.oncontextmenu - Web API

GlobalEventHandlers.oncontextmenu
=================================

윈도우에서 마우스 오른쪽 클릭시 발생하는 이벤트 이벤트 핸들러 속성 입니다. 기본동작을 막지 않는 한 (아래의 예제를 참조하세요), 브라우저의 컨텍스트 메뉴가 활성화됩니다. (그러나 IE8는 이것과 관련된 버그가 있어 contextmenu 가 정의 되어있다고 할지라도 활성화 되지 않습니다). 이 이벤트는 비활성화되지 않은(non-disabled) 오른쪽 클릭 이벤트와 함께 발생하며 "contextmenu" 속성 을 가진 엘리먼트에는 달리지 않는다는 것을 유의하세요.

Syntax
------

```js
window.oncontextmenu = funcRef;
//funcRef refers to the function to be called
```

Example
-------

페이지상에서 오른쪽 클릭을 막는 예제들 입니다:

```js
document.oncontextmenu = function () {
  // Use document as opposed to window for IE8 compatibility
  return false;
};

window.addEventListener(
  "contextmenu",
  function (e) {
    // Not compatible with IE < 9
    e.preventDefault();
  },
  false,
);
```

명세서
---

| Specification |
| --- |
| UI Events # event-type-contextmenu |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Element: prepend() 메서드 - Web API

Element: prepend() 메서드
======================

**`Element.prepend()`** 메서드는 `Element` (en-US)의 첫 번째 자식 이전에 `Node` (en-US) 객체 혹은 문자열 객체 집합을 삽입합니다. 문자열 객체는 `Text` 노드와 동등하게 삽입됩니다.

구문
--

```js
prepend(param1)
prepend(param1, param2)
prepend(param1, param2, /\* … ,\*/ paramN)
```

### 매개변수

`param1`, …, `paramN`

삽입할 `Node` (en-US) 혹은 문자열 객체 집합.

### 반환 값

없음 (`undefined`).

### 예외

`HierarchyRequestError` `DOMException` (en-US)

노드가 계층에서 지정된 위치에 삽입될 수 없을 때 에러를 던집니다.

예제
--

### 요소를 앞에 추가하기

```js
let div = document.createElement("div");
let p = document.createElement("p");
let span = document.createElement("span");
div.append(p);
div.prepend(span);

console.log(div.childNodes); // NodeList [ <span>, <p> ]
```

### 텍스트를 앞에 추가하기

```js
let div = document.createElement("div");
div.append("Some text");
div.prepend("Headline: ");

console.log(div.textContent); // "Headline: Some text"
```

### 요소와 텍스트를 앞에 추가하기

```js
let div = document.createElement("div");
let p = document.createElement("p");
div.prepend("Some text", p);

console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]
```

### prepend 메서드는 범위가 지정되지 않습니다

`prepend()` 메서드는 `with` 문으로 범위가 지정되지 않습니다.
 자세한 내용은 `Symbol.unscopables` (en-US) 참고하시기 바랍니다.

```js
let div = document.createElement("div");

with (div) {
  prepend("foo");
}
// ReferenceError: prepend is not defined
```

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-prepend① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Element.append()` (en-US)
* `Node.appendChild()`
* `Node.insertBefore()` (en-US)
* `Element.before()` (en-US)
* `Element.insertAdjacentElement()` (en-US)
* `NodeList`


Element: copy 이벤트 - Web API

Element: copy 이벤트
=================

**`copy`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다.

|  |  |
| --- | --- |
| 버블링 | 예 |
| 취소 가능 | 예 |
| 인터페이스 | `ClipboardEvent` |
| 이벤트 처리기 속성 | `oncopy` (en-US) |

이벤트의 기본 동작은 선택한 영역(존재하는 경우)을 클립보드로 복사하는 것입니다.

`copy` 이벤트 처리기는 이벤트의 `ClipboardEvent.clipboardData` 속성에 대해 `setData(format, data)` (en-US) 메서드를 호출해 클립보드로 복사할 콘텐츠를 수정할 수 있고, `event.preventDefault()`를 호출해 기본 동작을 취소할 수도 있습니다.

그러나, 처리기에서 클립보드 데이터를 읽을 수는 없습니다.

합성 `copy` 이벤트를 생성해서 발송할 수는 있지만, 이 방법으로는 시스템 클립보드에 영향을 줄 수 없습니다.

예제
--

### HTML

```html
<div class="source" contenteditable="true">
  이 상자에서 텍스트를 복사해보세요...
</div>
<div class="target" contenteditable="true">...여기에 붙여 넣어 보세요.</div>
```

```
div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}
```

### JS

```js
const source = document.querySelector("div.source");

source.addEventListener("copy", (event) => {
  const selection = document.getSelection();
  const reversed = Array.from(selection.toString()).reverse().join("");

  event.clipboardData.setData("text/plain", reversed);
  event.preventDefault();
});
```

### 결과

명세
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-copy |
| HTML Standard # handler-oncopy |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 관련 이벤트: `cut`, `paste`
* `Document`를 대상으로 한 같은 이벤트: `copy`
* `Window`를 대상으로 한 같은 이벤트: `copy`


Element.scrollHeight - Web API

Element.scrollHeight
====================

**`Element.scrollHeight`** 읽기 전용 속성은 요소 콘텐츠의 총 높이를 나타내며, 바깥으로 넘쳐서 보이지 않는 콘텐츠도 포함합니다.

![사용자의 뷰포트는 패딩 상단, 테두리 상단, 테두리 하단, 패딩 하단의 네 가지 영역을 가진 요소입니다. 스크롤 높이는 컨테이너의 패딩 상단에서 패딩 하단의 끝까지 뷰포트의 상단과 하단을 훨씬 벗어납니다.](/ko/docs/Web/API/Element/scrollHeight/scrollheight.png)

`scrollHeight` 값은 수직 스크롤바를 사용하지 않고 요소의 콘텐츠를 모두 나타낼 때 필요한 최소 높이의 값과 동일합니다. 높이 측정은 `clientHeight`와 동일한 방법을 사용하여 요소의 안쪽 여백은 포함하고, 테두리와 바깥 여백, (존재하는 경우) 수평 스크롤바의 높이는 포함하지 않습니다. 또한 `::before` (en-US), `::after` 등 의사 요소의 높이도 결과에 포함합니다. 요소의 콘텐츠를 수직 스크롤바 없이 모두 보일 수 있는 경우의 `scrollHeight`는 `clientHeight`와 동일합니다.

**참고:** `scrollHeight`의 반환 값은 정수로 반올림됩니다. 소수점을 포함한 값이 필요한 경우 `Element.getBoundingClientRect()`를 사용하세요.

구문
--

```js
var intElemScrollHeight = element.scrollHeight;
```

*intElemScrollHeight*은 요소 `scrollHeight`의 픽셀 값을 저장하는 정수형 변수입니다.

예제
--

padding-top

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.

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.

padding-bottom

**Left** **Top** **Right** **Bottom** *margin-top* *margin-bottom* *border-top* *border-bottom*

문제와 해결책
-------

### 요소를 끝까지 스크롤했는지 판별하기

다음 등식이 참인 경우 요소를 끝까지 스크롤한 것입니다.

```js
element.scrollHeight - element.scrollTop === element.clientHeight;
```

컨테이너가 스크롤 대신 오버플로된 자식을 노출하는 경우, 다음 검사로 컨테이너가 스크롤 가능한지 알아볼 수 있습니다.

```js
window.getComputedStyle(element).overflowY === "visible";
window.getComputedStyle(element).overflowY !== "hidden";
```

예제
--

### 텍스트를 다 읽었는지 확인하기

`onscroll` (en-US) 이벤트를 함께 사용하여, 내용을 다 읽었는지 확인할 수 있습니다. (`element.scrollTop` (en-US) 과 `element.clientHeight` (en-US) 를 참조하세요).

#### HTML

```html
<form name="registration">
  <p>
    <textarea id="rules">
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.
    </textarea>
  </p>
  <p>
    <input type="checkbox" name="accept" id="agree" />
    <label for="agree">동의합니다</label>
    <input type="submit" id="nextstep" value="다음" />
  </p>
</form>
```

#### CSS

```css
#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;
}
```

#### JavaScript

```js
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);
};
```

명세
--

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollheight |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Element.clientHeight`
* `Element.offsetHeight`
* Determining the dimensions of elements


Element.getElementsByClassName() - Web API

Element.getElementsByClassName()
================================

`Element` (en-US)의 메소드 **`getElementsByClassName()`** 는 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 `HTMLCollection` 을 반환합니다.

`Document`의 `getElementsByClassName()` (en-US) 메소드는 도큐먼트 루트로부터 도큐먼트 전체를 탐색한다는 점을 제외하고는 동일하게 작동합니다.

Syntax
------

```js
var elements = element.getElementsByClassName(names);
```

### Parameters

`names`

검색할 클래스 혹은 클래스들을 띄어쓰기로 구분한 `DOMString`

### Return value

실시간으로 업데이트되는 해당 클래스명을 가진 요소 목록의 `HTMLCollection` 이 반환됩니다.

Usage notes
-----------

항상 그렇듯, 반환되는 collection은 실시간입니다. 즉, 함수가 호출된 이후에도 DOM 트리의 현재 상태가 반영됩니다. `names` 에 해당하는 클래스를 가진 요소가 하위에 추가되면, 그 요소는 즉시 collection에 나타납니다. 비슷하게, `names` 에 매칭되는 클래스를 갖고 있지 않은 요소에 매칭되는 클래스명이 적용되면, 그 요소 역시 즉시 collection에 나타나게 됩니다.

반대도 역시 마찬가지입니다. 클래스명이 더 이상 `names` 와 일치하지 않게 되면, collection으로 부터 즉시 제거됩니다.

**참고:** 호환모드에서는 클래스명의 대소문자를 구분하지 않습니다. 그 외의 경우에는, 대소문자를 구분합니다.

Examples
--------

### 단일 클래스 찾기

요소들 중 하나의 클래스를 포함하고 있는 요소를 검색하기 위해서는, 그 클래스명을 `getElementsByClassName()`의 인자로 넣으세요:

```js
element.getElementsByClassName("test");
```

아래의 예시는 `main` 이라는 `id` 를 가진 요소의 하위 요소들 중 `test`라는 클래스를 가진 모든 요소를 탐색합니다.

```js
document.getElementById("main").getElementsByClassName("test");
```

### 여러개의 클래스로 탐색하기

`red` 와 `test` 라는 클래스를 모두 포함하고 있는 요소를 탐색하기 위해서는 다음과 같이 합니다:

```js
element.getElementsByClassName("red test");
```

### 결과값 검토하기

collection의 개별 요소를 가져오기 위해 `HTMLCollection` 의`item()` 메소드를 이용하거나 표준 배열 문법을 사용할 수 있습니다. 아래는 잘못된 코드의 예시입니다. `"matches"` 는 `"colorbox"` 클래스가 삭제됨에 따라 바로 변경될것이기 때문에 **아래의 코드는 작동하지 않습니다.**

```js
var matches = element.getElementsByClassName("colorbox");

for (var i = 0; i < matches.length; i++) {
  matches[i].classList.remove("colorbox");
  matches.item(i).classList.add("hueframe");
}
```

대신 다른 방법을 사용하세요. 예시:

```js
var matches = element.getElementsByClassName("colorbox");

while (matches.length > 0) {
  matches.item(0).classList.add("hueframe");
  matches[0].classList.remove("colorbox");
}
```

위 코드는 `"colorbox"` 클래스를 가진 모든 자식 요소를 찾고, `item(0)` 을 호출해 `"hueframe"`이라는 클래스를 추가합니다 . 그리고 `"colorbox"` 클래스를 제거합니다(배열 표기법을 사용하여). 다른 요소 (만약 남아있다면) 가 `item(0)` 이 될 것입니다.

### 배열 함수를 이용해 결과값을 필터링하기

`HTMLCollection`을 `this` 로 사용하면 `Array.prototype` 을 어떤 `HTMLCollection`에서든 사용할 수 있습니다. 아래의 예제에서는 `test` 클래스를 가진 모든 `<div>` (en-US) 요소를 찾아봅니다 :

```js
var testElements = document.getElementsByClassName("test");
var testDivs = Array.prototype.filter.call(
  testElements,
  function (testElement) {
    return testElement.nodeName === "DIV";
  },
);
```

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-getelementsbyclassname |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Element.setAttribute() - Web API

Element.setAttribute()
======================

지정된 요소의 속성 값을 설정합니다. 속성이 이미 있으면 값은 업데이트됩니다. 속성이 없다면 지정된 이름과 값으로 새 속성이 추가됩니다.

속성의 현재 값을 얻으려면 `getAttribute()` (en-US)를 사용하고, 속성을 제거하려면 `removeAttribute()`를 호출하세요.

구문
--

```js
setAttribute(name, value)
```

### 매개변수

`name`

값을 설정할 속성의 이름을 지정하는 문자열입니다. 속성 이름은 HTML 문서의 HTML 요소에서 `setAttribute()`가 호출될 때 모두 자동으로 소문자로 변환됩니다.

`value`

속성에 할당할 값이 포함된 문자열입니다. 지정된 문자열이 아닌 값은 자동으로 문자열로 변환됩니다.

불리언 속성은 값이 요소에 존재하는 경우 `true`로 간주됩니다. 선행 또는 후행 공백 없이 값을 빈 문자열(`""`)로 설정하거나 속성의 이름으로 설정해야 합니다. 실제 예제는 아래를 참조하세요.

지정된 `value`가 문자열로 변환되기 때문에 `null`을 지정한다고 해서 반드시 예상대로 작동하지 않습니다. 속성을 제거하거나 해당 값을 `null`로 설정하는 대신 속성 값을 문자열 `"null"`로 설정합니다. 속성을 제거하려면 `removeAttribute()`를 호출하세요.

### 반환 값

없음 (`undefined`).

### 예외

`InvalidCharacterError` `DOMException` (en-US)

지정된 속성 `name`에 속성 이름에 유효하지 않은 문자가 하나 이상 포함되어 있습니다.

예제
--

다음 예제에서 `setAttribute()`는 `<button>`에 속성을 설정합니다.

### HTML

```html
<button>Hello World</button>
```

```
button {
  height: 30px;
  width: 100px;
  margin: 1em;
}
```

### JavaScript

```js
const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");
```

이 예제는 다음 두 가지를 보여줍니다.

* 위의 `setAttribute()`에 대한 첫 번째 호출은 `name` 속성의 값을 "helloButton"으로 변경하는 것을 보여줍니다. 브라우저의 페이지 검사기(Chrome, Edge, Firefox, Safari)를 사용하여 이를 확인할 수 있습니다.
* `disabled`와 같은 불리언 속성의 값을 설정하려면 아무 값으로든 설정할 수 있습니다.
 빈 문자열 또는 속성의 이름이 권장되는 값입니다. 중요한 것은 속성이 존재하는 경우 **실제 값에 관계없이** 해당 값이 참으로 간주된다는 것입니다. 속성이 없다는 것은 해당 값이 `false`임을 의미합니다. `disabled` 속성의 값을 빈 문자열(`""`)로 설정하면 `disabled`를 `true`로 설정하여 버튼이 비활성화됩니다.

DOM methods dealing with element's attributes:

| Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used) | DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` (en-US) | `setAttributeNode` (en-US) | `setAttributeNodeNS` (en-US) |
| `getAttribute` (en-US) (DOM 1) | `getAttributeNS` (en-US) | `getAttributeNode` (en-US) | `getAttributeNodeNS` (en-US) |
| `hasAttribute` (en-US) (DOM 2) | `hasAttributeNS` (en-US) | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` (en-US) | `removeAttributeNode` (en-US) | - |

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-setattribute① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### Gecko 참고

`setAttribute()`를 사용하여 특정 속성, 특히 XUL의 `value`를 수정하는 것은 속성이 기본값을 지정하기 때문에 일관되지 않게 작동합니다. 현재 값에 액세스하거나 수정하려면 속성을 사용해야 합니다. 예를 들어 `Element.setAttribute()` 대신 `Element.value`를 사용합니다.


Element.clientWidth - Web API

Element.clientWidth
===================

**`Element.clientWidth`** 속성은 인라인 요소나 CSS 상에 존재하지 않는 요소에 대해서는 0을 나타내고, 그렇지 않다면 엘리먼트의 내부 너비를 픽셀로 나타냅니다. 내부 너비는 안쪽 여백(패딩)을 포함하지만, 테두리, 바깥 여백(마진) 그리고 수직 스크롤바의 너비는 포함하지 않습니다.

`clientWidth`를 루트 요소(`<html>` 요소 또는 호환 모드 상에서의 `<body>` 요소)에서 사용하면 스크롤바를 제외한 뷰포트의 너비를 반환합니다. 이 방식은 `clientWidth`의 특별한 사용법입니다.

**참고:** 이 속성은 integer로 반올림됩니다. 소수점이 포함된 값이 필요하다면 `element.getBoundingClientRect()`를 사용하시기 바랍니다.

값
-

number.

구문
--

```js
var w = element.clientWidth;
```

`w` 는 요소의 너비를 나타내는 픽셀 단위의 integer입니다.

예제
--

![](/ko/docs/Web/API/Element/clientWidth/dimensions-client.png)

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-element-clientwidth |

### 참고

`clientWidth`는 MS IE DHTML 요소 모델에서 처음 도입되었습니다.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `HTMLElement.offsetWidth` (en-US)
* `Element.scrollWidth` (en-US)
* Determining
the dimensions of elements


Element.outerHTML - Web API

Element.outerHTML
=================

`outerHTML` 속성은 요소(element)의 자식 요소를 포함하여 요소를 나타내는 직렬화된 HTML 파편을 가져옵니다. 또한 주어진 문자열에서 파싱한 노드로 요소를 대체할 수 있습니다.

요소의 내용만을 HTML 형태로 가져오거나 설정하기 위해서는 `innerHTML` 속성을 대신 사용하십시오.

문법
--

```js
var content = element.outerHTML;

element.outerHTML = htmlString;
```

### 값

`outerHTML`로 값을 읽어올 때는 요소와 요소의 자식 요소가 직렬화된 HTML이 포함된 `DOMString`을 반환합니다. `outerHTML`로 값을 설정할 때는 요소와 요소의 모든 자식 요소를 `htmlString` 형태로 파싱된 새로운 DOM 트리 구조로 대체합니다.

### 예외

`SyntaxError`

유효하지 않은 HTML 문자열을 사용해 `outerHTML`을 설정하도록 시도할 경우 `SyntaxError` 예외가 발생합니다.

`NoModificationAllowedError`

`Document.documentElement`와 같이 `Document`의 바로 아래 자식 요소에 `outerHTML`을 설정하도록 시도할 경우 `NoModificationAllowedError` 예외가 발생합니다.

예제
--

다음은 요소의 `outerHTML` 속성을 가져오는 예시입니다.

```js
// HTML:
// <div id="d"><p>Content</p><p>Further Elaborated</p></div>

d = document.getElementById("d");
console.log(d.outerHTML);

// '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
// 위 문자열이 콘솔창에 출력됩니다.
```

다음은 `outerHTML` 속성으로 노드를 대체하는 예시입니다.

```js
// HTML:
// <div id="container"><div id="d">This is a div.</div></div>

container = document.getElementById("container");
d = document.getElementById("d");
console.log(container.firstChild.nodeName); // "DIV"를 출력합니다.

d.outerHTML = "<p>This paragraph replaced the original div.</p>";
console.log(container.firstChild.nodeName); // "P"를 출력합니다.

// #d의 div 요소가 문서 트리에서 제거되고,
// 새 p 요소로 대체되었습니다.
```

참고
--

부모 요소가 없는 요소에 `outerHTML` 속성을 설정하려고 하면 변경되지 않습니다. 많은 브라우저는 예외를 발생시킵니다. 아래는 예시입니다.

```js
var div = document.createElement("div");
div.outerHTML = '<div class="test">test</div>';
// 많은 브라우저에서 DOMException 예외를 발생시킵니다.
console.log(div.outerHTML); // 결과: "<div></div>"
```

또한, 문서 내의 요소가 변경되더라도 변수의 `outerHTML` 속성은 원본 요소를 계속 참조합니다.

```js
var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // "P"를 출력합니다.
p.outerHTML = "<div>This div replaced a paragraph.</div>";
console.log(p.nodeName); // 여전히 "P"를 출력합니다.
```

명세
--

| Specification |
| --- |
| DOM Parsing and Serialization # dom-element-outerhtml |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* DOM 트리를 XML이나 HTML으로 직렬화하는 `XMLSerializer` (en-US)
* XML이나 HTML을 파싱하여 DOM 트리로 변환하는 `DOMParser`
* `HTMLElement.outerText`


element.attributes - Web API

element.attributes
==================

요약
--

주어진 요소의 속성 모음(collection)을 반환합니다.

구문
--

```js
var attrs = element.attributes;
```

반환하는 개체는 `Attr` 노드를 포함하는 NamedNodeMap 형입니다. 요소가 지정된 속성이 없으면, 반환하는 개체는 길이가 0입니다. 이 속성은 읽기 전용입니다.

예시
--

```js
// 문서에서 첫 <p> 요소 얻기
var para = document.getElementsByTagName("p")[0];
var atts = para.attributes;
```

주의
--

모음의 항목은 이름과 찾아보기(index)로 접근할 수 있습니다. `NodeList`와는 달리, `NamedNodeMap`은 항목을 어떤 특정 순서로 유지하지 않음을 주의하세요.

여러분은 문서에서 "p1" 요소의 모든 속성값을 찍는 다음 예에서처럼 요소의 속성을 열거(enumerate)할 때 오직 찾아보기로 접근(access by index)을 써야 합니다.

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title>Attributes example</title>
    <script type="text/javascript">
 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 >= 0; i--) {
 text += attrs[i].name + "->" + attrs[i].value;
 }
 outputText.value = text;
 } else {
 outputText.value = "No attributes to show";
 }
 }
 </script>
  </head>

  <body>
    <p id="p1" style="color: green;">Sample Paragraph</p>
    <form action="">
      <p>
        <input
 type="button"
 value="Show first attribute name and value"
 onclick="showFirstAttr();" />
        <input id="result" type="text" value="" />
      </p>
    </form>
  </body>
</html>
```

`NamedNodeMap`은 배열처럼 반복될 수 있지만, `join`, `split` 등과 같은 `Array`에 있는 어떤 특수 메소드는 없습니다.

이름으로 특정 속성에 접근하려면, getAttribute 메소드를 쓰세요.

명세
--

| Specification |
| --- |
| DOM Standard # dom-element-attributes |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Document: keyup event - Web API

Document: keyup event
=====================

\*\*`keyup`\*\*키를 놓을 때 이벤트가 발생합니다.

| 거품 | 예 |
| --- | --- |
| 취소 가능 | 예 |
| 상호 작용 | `KeyboardEvent` |
| 이벤트 핸들러 속성 | `onkeyup` (en-US) |

`keydown` 및 `keyup`이벤트는 어떤 키를 눌렀는지 나타내는 코드를 제공하고 `keypress` 는 입력 된 *문자를* 나타냅니다. . 예를 들어, 소문자 "a"는 `keydown`및 `keyup`에서는 65로보고 되지만에서는 97 로보고 됩니다 `keypress`. 모든 이벤트에서 대문자 "A"는 65로보고됩니다.

>
> **참고 :** 입력 값의 변경에 대응하는 방법을 찾고 있다면 `[input event](/ko/docs/Web/API/HTMLElement/input_event)`를 사용해야합니다. `keyup` 예를 들어 컨텍스트 메뉴의 텍스트를 텍스트 입력에 붙여 넣는 등의 일부 변경 사항은에서 감지 할 수 없습니다.
>
>
>

```js
eventTarget.addEventListener("keyup", (event) => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // 무언가를합니다
});
```

예
-

이 예에서는 키를 놓을 때마다 `KeyboardEvent.code` (en-US) 값을 기록합니다.

### addEventListener 키업 예제

```html
<p>먼저 IFrame에 초점을 맞춘 다음 (예 : 클릭하여) 몇 가지 키를 눌러보십시오.</p>
<p id="log"></p>
```

```js
const log = document.getElementById ( 'log');

document.addEventListener ( 'keyup', logKey);

function logKey (e) {
  log.textContent + =`$ {e.code}`;
}
```

### onkeyup 해당

```js
document.onkeyup = logKey;
```

명세서
---

| Specification |
| --- |
| UI Events # event-type-keyup |
| HTML Standard # handler-onkeyup |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

또한보십시오
------

* `keydown`
* `keypress`
* `Element` (en-US) : `keyup` 이벤트


Element.tagName - Web API

Element.tagName
===============

`Element` (en-US) 인터페이스의 **`tagName`** 읽기 전용 속성은 요소에 호출된 태그 명을 가져온다. 예를 들면, 만약 `<img>` 요소일 경우, 해당 요소의 `tagName` 속성의 내용은 `"IMG"` 가 된다 (이것은 HTML인 경우에 대한 내용이고, XML/XHTML 문서에서는 대소문자가 다르게 나올 수 있다).

구문
--

```js
elementName = Element.tagName;
```

### Value

태그 명이 명시된 문자열을 가져온다, 이 때, 아래 경우에 따라 대소문자가 달라질 수 있다.

* HTML 문서에 설계된 DOM 구조에서 가져온 요소는 항시 대소문자로만 이루어진 값을 가져오게 된다.예를 들면, `<div>` (en-US) 객체로 생성한 요소의 `tagName` 값은 `"DIV"`가 된다.
* XML 문서에 설계된 요소 구조의 경우 문서에 작성된 태그 명을 그대로 가져오게 된다. `"<SomeTag>"` 이라는 명칭으로 태그를 작성하였을 경우, `tagName` 속성 값은 `"SomeTag"`이 된다.

`Element` (en-US) 객체에서 사용하는 `tagName` 속성의 값은 `Node` (en-US) 객체의 `nodeName` (en-US) 속성과 동일한 값을 가져온다.

예시
--

### HTML

```html
<span id="born">내가 어렸을 적...</span>
```

### JavaScript

```js
var span = document.getElementById("born");
console.log(span.tagName);
```

XHTML (또는 여느 XML 방식) 문서의 경우, 정의한 태그 명 그대로 가져오기 때문에, `"span"` 같은 소문자 태그명을 가져오게 될 것이다.그에 반해 HTML 문서에서는, 원본 문서에 정의된 태그명과 달리 대소문자를 무시하면서 대문자로만 이루어진 `"SPAN"` 값을 가져오게 된다.

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-tagname① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Element.className - Web API

Element.className
=================

개요
--

**className** 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.

문법
--

```js
var cName = elementNodeReference.className;
elementNodeReference.className = cName;
```

* *cName은 현재 요소의 클래스 혹은 공백으로 구분된 클래스들을 표현하는 문자열 변수이다.*
예제
--

```js
let elm = document.getElementById("item");

if (elm.className === "active") {
  elm.className = "inactive";
} else {
  elm.className = "active";
}
```

주의
--

많은 언어에서 DOM 조작을 위해 사용되는 "class " 키워드와의 혼란을 줄이기 위하여 class 대신 className이라는 프로퍼티 명을 사용한다.

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-classname① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

살펴보기
----

* `element.classList`


Element: click 이벤트 - Web API

Element: click 이벤트
==================

포인팅 장치의 포인터가 어느 요소 안에 위치하는 동안, 마우스 주 버튼처럼 장치의 버튼을 눌렀다 떼면 그 요소에서 **`click`** 이벤트가 발생합니다.

버튼을 누른 상태로 포인터가 움직여서 요소 밖으로 나가게 되면 버튼을 눌렀던 요소와 떨어진 요소의 가장 가까운 공통 조상 요소에서 이벤트가 발생합니다.

`click`은 `mousedown` (en-US)과 `mouseup` (en-US) 이벤트가 순서대로 발생한 후 발생합니다.

구문
--

이벤트 이름을 `addEventListener()` 등의 메서드에 제공하거나, 이벤트 처리기 속성을 사용하세요.

```js
addEventListener("click", (event) => {});

onclick = (event) => {};
```

이벤트 유형
------

`MouseEvent`입니다. `Event`를 상속합니다.

Event

UIEvent

MouseEvent이벤트 속성
------

`UIEvent`와 `Event` 인터페이스의 속성을 상속합니다.

`MouseEvent.altKey` (en-US) 읽기 전용

마우스 이벤트 발생 시점에 `alt`가 눌려있었으면 `true`를 반환합니다.

`MouseEvent.button` (en-US) 읽기 전용

(해당하는 경우) 마우스 이벤트를 발생시킨 버튼의 번호입니다.

`MouseEvent.buttons` (en-US) 읽기 전용

(버튼이 있는 경우) 마우스 이벤트 발생 시점에 누르고 있던 버튼 번호입니다.

`MouseEvent.clientX` 읽기 전용

로컬 (DOM 콘텐츠) 좌표계에서 마우스 포인터의 X축 좌표입니다.

`MouseEvent.clientY` (en-US) 읽기 전용

로컬 (DOM 콘텐츠) 좌표계에서 마우스 포인터의 Y축 좌표입니다.

`MouseEvent.ctrlKey` (en-US) 읽기 전용

마우스 이벤트 발생 시점에 `ctrl`이 눌려있었으면 `true`를 반환합니다.

`MouseEvent.layerX` (en-US)
비표준
 읽기 전용

이벤트의 가로축 좌표를 현재 레이어에 상대적인 값으로 반환합니다.

`MouseEvent.layerY` (en-US)
비표준
 읽기 전용

이벤트의 세로축 좌표를 현재 레이어에 상대적인 값으로 반환합니다.

`MouseEvent.metaKey` (en-US) 읽기 전용

마우스 이벤트 발생 시점에 `meta`가 눌려있었으면 `true`를 반환합니다.

`MouseEvent.movementX` (en-US) 읽기 전용

마지막 `mousemove` (en-US) 이벤트로부터 마우스 포인터가 움직인 X축 거리입니다.

`MouseEvent.movementY` (en-US) 읽기 전용

마지막 `mousemove` (en-US) 이벤트로부터 마우스 포인터가 움직인 Y축 거리입니다.

`MouseEvent.offsetX` (en-US) 읽기 전용

대상 노드의 안쪽 여백 경계를 기준으로 한 마우스 포인터의 X축 좌표입니다.

`MouseEvent.offsetY` (en-US) 읽기 전용

대상 노드의 안쪽 여백 경계를 기준으로 한 마우스 포인터의 Y축 좌표입니다.

`MouseEvent.pageX` (en-US) 읽기 전용

전체 문서를 기준으로 한 마우스 포인터의 X축 좌표입니다.

`MouseEvent.pageY` (en-US) 읽기 전용

전체 문서를 기준으로 한 마우스 포인터의 Y축 좌표입니다.

`MouseEvent.relatedTarget` (en-US) 읽기 전용

존재하는 경우, 이벤트의 보조 대상입니다.

`MouseEvent.screenX` (en-US) 읽기 전용

전역 (화면) 좌표계에서 마우스 포인터의 X축 좌표입니다.

`MouseEvent.screenY` (en-US) 읽기 전용

전역 (화면) 좌표계에서 마우스 포인터의 Y축 좌표입니다.

`MouseEvent.shiftKey` (en-US) 읽기 전용

마우스 이벤트 발생 시점에 `shift`가 눌려있었으면 `true`를 반환합니다.

`MouseEvent.mozPressure`
비표준

지원이 중단되었습니다
 읽기 전용

터치 또는 태블릿에서 이 이벤트가 발생했을 때 적용된 입력 압력의 양입니다. `0.0`(최소 압력)과 `1.0`(최대 압력) 사이의 값입니다. 사용을 권장하지 않는 비표준 속성입니다. `PointerEvent`의 `pressure` (en-US) 속성을 사용하세요.

`MouseEvent.mozInputSource` (en-US)
비표준
 읽기 전용

이벤트를 발생시킨 장치의 유형으로 `MOZ_SOURCE_*` 상수 중 하나입니다. 이 값을 사용하면 이벤트가 실제 마우스에 의해 발생했는지, 아니면 터치에 의해 발생했는지 확인해 정확도 보정 등을 적용할 수 있습니다.

`MouseEvent.webkitForce` (en-US)
비표준
 읽기 전용

클릭의 압력입니다.

`MouseEvent.x` (en-US) 읽기 전용

`MouseEvent.clientX`의 별칭입니다.

`MouseEvent.y` (en-US) 읽기 전용

`MouseEvent.clientY` (en-US)의 별칭입니다.

사용 일람
-----

`click` 이벤트 처리기가 받는 `MouseEvent` 객체의 `detail` 속성은 `target`이 클릭된 횟수를 나타냅니다. 즉 더블 클릭의 `detail`은 2, 삼중 클릭은 3...처럼 계속됩니다. 이 횟수는 짧은 시간동안 클릭이 멈추면 초기화됩니다. 정확한 초기화 시간은 브라우저와 플랫폼에 따라 다르며, 사용자 설정에 따라서도 달라질 수 있습니다. 예를 들어, 접근성 옵션이 활성화되면 적응형 인터페이스로도 다중 클릭을 쉽게 할 수 있도록 초기화 시간이 길어질 수 있습니다.

예제
--

`<button>`을 몇 번이나 연속해서 클릭했는지 표시하는 예제입니다.

### HTML

```html
<button>클릭</button>
```

### JavaScript

```js
const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  button.textContent = `클릭 횟수: ${event.detail}`;
});
```

### 결과

버튼을 빠르게 반복하여 클릭해서 클릭 횟수를 올려보세요. 클릭을 쉬면 횟수가 초기화됩니다.

명세서
---

| Specification |
| --- |
| UI Events # event-type-click |
| HTML Standard # handler-onclick |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 이벤트 입문
* `auxclick` (en-US)
* `contextmenu`
* `dblclick`
* `mousedown` (en-US)
* `mouseup` (en-US)
* `pointerdown` (en-US)
* `pointerup` (en-US)


Element.clientHeight - Web API

Element.clientHeight
====================

`읽기 전용 속성인 Element.clientHeight은` 엘리먼트의 내부 높이를 픽셀로 반환합니다. 이 내부 높이라는 것은 내부 여백(padding)을 포함하지만, 수평 스크롤바의 높이, 경계선, 또는 외부 여백(margin)은 포함하지 않습니다.

`clientHeight` 는 CSS상의 높이 + CSS상의 내부 여백 - 수평 스크롤바의 높이(존재하는 경우에만)로 계산됩니다.

**참고:** 이 속성은 integer로 반올림됩니다. 소수점이 포함된 값이 필요하다면, `element.getBoundingClientRect()`을 사용하시기 바랍니다.

구문
--

```js
var h = element.clientHeight;
```

`h는` 엘리먼트의 높이를 나타내는 픽셀 단위의 integer입니다.

예
-

![Image:Dimensions-client.png](/ko/docs/Web/API/Element/clientHeight/dimensions-client.png)

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-element-clientheight |

### 주의

`clientHeight` 는 Internet Explorer 의 객체 모델에서 소개된 속성입니다.

같이 보기
-----

* `HTMLElement.offsetHeight`
* `Element.scrollHeight`
* Determining the dimensions of elements
* MSDN Determining the dimensions of elements


Element.getClientRects() - Web API

Element.getClientRects()
========================

`Element` (en-US) 인터페이스의 **`getClientRects()`** 메서드는 클라이언트에 있는 각 CSS 테두리 박스에 대한 경계 사각형을 나타내는 `DOMRect` 객체의 컬렉션을 반환합니다.

대부분의 엘리먼트는 각각 하나의 border box만을 갖지만, 여러 줄의 인라인 엘리먼트(예를 들면, 여러 줄의 `<span>` 엘리먼트)는 각각의 줄을 감싸는 테두리 박스를 갖습니다.

구문
--

```js
let rectCollection = object.getClientRects();
```

### 반환 값

반환 값은 각 엘리먼트와 관계된 CSS 테두리 박스인 `DOMRect` 객체의 컬렉션입니다. 각각의 `DOMRect` 객체는 뷰포트의 top-left에 상대적인 top-left인 픽셀 단위의 테두리 박스를 나타내는 읽기 전용 `left`, `top`, `right`, `bottom` 프로퍼티를 갖습니다. 캡션이 있는 테이블의 경우, 캡션이 테이블의 테두리 영역 밖에 있더라도 포함됩니다. 외부-`<svg>` 이외의 SVG 엘리먼트에서 호출될 때, 결과 사각형이 상대적인 "뷰포트"는 엘리먼트의 외부-`<svg>`가 설정하는 뷰포트입니다(명확히 하자면, 사각형은 외부-`<svg>`의 `viewBox` transform이 존재할 경우, 이에 의해 변형되기도 합니다).

원래 Microsoft는 각각의 텍스트 *줄* 에 대한 `TextRectangle` 객체를 반환하기 위해 이 메서드를 만들었습니다. 하지만 CSSOM 작업 초안은 이 메서드가 각각의 *테두리 박스* 에 대한 `DOMRect`를 반환하도록 명세합니다. 인라인 엘리먼트의 경우 두 정의가 동일합니다. 하지만 블록 엘리먼트의 경우 Mozilla는 단 하나의 사각형만 반환합니다.

**참고:** Firefox 3.5는 `width`와 `height` 속성을 `TextRectangle` 객체에 추가합니다.

뷰포트 영역(또는 기타 스크롤 가능한 엘리먼트)에서 수행된 스크롤 양은 사각형을 계산할 때 고려됩니다.

반환된 사각형은 오버플로우가 발생할 수도 있는 모든 하위 엘리먼트의 경계를 포함하지 않습니다.

HTML `<area>` 엘리먼트, 스스로는 어떠한 것도 렌더링 하지 않는 SVG 엘리먼트, `display:none` 엘리먼트 및 일반적으로 직접 렌더링 되지 않는 엘리먼트의 경우, 빈 목록이 반환됩니다.

테두리 박스가 비어있는 CSS 박스의 경우에도 사각형은 반환됩니다. `left`, `top`, `right`, `bottom` 좌표는 여전히 의미가 있습니다.

소수점 단위의 픽셀 오프셋도 가능합니다.

예제
--

다음 예제들은 다양한 색상으로 클라이언트 사각형을 그립니다. 클라이언트 사각형을 칠하는 JavaScript 함수는 `withClientRectsOverlay` 클래스를 통해 마크업과 연결되어 있음을 참고하세요.

### HTML

예제 1: 다음 HTML은 세 개의 단락을 생성합니다. 각각은 `<div>` 블록 안에 있고, `<span>`을 안쪽에 포함하고 있습니다. 클라이언트 사각형은 두 번째 블록의 단락과 세 번째 블록의 `<span>` 엘리먼트를 칠합니다.

```html
<h3>span을 안쪽에 포함하는 단락</h3>
<p>
  span과 단락 모두 테두리가 설정되어 있습니다. 클라이언트 사각형은 빨간색입니다.
  p는 단 하나의 테두리 박스를 갖는 반면 span은 여러 테두리 박스를 갖는다는 점을
  유의하세요.
</p>

<div>
  <strong>원본</strong>
  <p>
    <span>여러 줄에 걸쳐있는 단락</span>
  </p>
</div>

<div>
  <strong>p의 사각형</strong>
  <p class="withClientRectsOverlay">
    <span>여러 줄에 걸쳐있는 단락</span>
  </p>
</div>

<div>
  <strong>span의 사각형</strong>
  <p>
    <span class="withClientRectsOverlay">여러 줄에 걸쳐있는 단락</span>
  </p>
</div>
```

예제 2: 다음 HTML은 세 개의 정렬된 목록을 생성합니다. 클라이언트 사각형은 두 번째 블록의 `<ol>`, 세 번째 블록의 각 `<li>` 엘리먼트를 칠합니다.

```html
<h3>목록</h3>
<p>
  테두리 박스는 숫자를 포함하지 않으므로 클라이언트 사각형에 대해서도 숫자를
  포함하지 않음을 유의하세요.
</p>

<div>
  <strong>원본</strong>
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
  </ol>
</div>

<div>
  <strong>ol의 사각형</strong>
  <ol class="withClientRectsOverlay">
    <li>Item 1</li>
    <li>Item 2</li>
  </ol>
</div>

<div>
  <strong>각 li의 사각형</strong>
  <ol>
    <li class="withClientRectsOverlay">Item 1</li>
    <li class="withClientRectsOverlay">Item 2</li>
  </ol>
</div>
```

예제 3: 다음 HTML은 캡션을 갖는 두 개의 테이블을 생성합니다. 클라이언트 사각형은 두 번째 블록의 `<table>`을 칠합니다.

```html
<h3>캡션을 갖는 테이블</h3>
<p>
  테이블의 테두리 박스가 캡션을 포함하지는 않지만, 클라이언트 사각형은 캡션을
  포함합니다.
</p>

<div>
  <strong>원본</strong>
  <table>
    <caption>
      캡션
    </caption>
    <thead>
      <tr>
        <th>thead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>tbody</td>
      </tr>
    </tbody>
  </table>
</div>

<div>
  <strong>table의 사각형</strong>
  <table class="withClientRectsOverlay">
    <caption>
      캡션
    </caption>
    <thead>
      <tr>
        <th>thead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>tbody</td>
      </tr>
    </tbody>
  </table>
</div>
```

### CSS

CSS는 첫 번째 예제에서 각 `<div>` 블록 안쪽의 `<span>`과 문단을 감싸는 테두리를, 두 번째 예제에서 `<ol>`과 `<li>`를 감싸는 테두리를, 세 번째 예제에서 `<table>`, `<th>`, `<td>` 엘리먼트를 감싸는 테두리를 그립니다.

```css
strong {
  text-align: center;
}
div {
  display: inline-block;
  width: 150px;
}
div p,
ol,
table {
  border: 1px solid blue;
}
span,
li,
th,
td {
  border: 1px solid green;
}
```

### JavaScript

JavaScript 코드는 `withClientRectsOverlay` CSS 클래스가 할당된 모든 HTML 엘리먼트에 대해 클라이언트 사각형을 그립니다.

```js
function addClientRectsOverlay(elt) {
  /\* 각 클라이언트 사각형에서 div를 절대적으로 배치하였기 때문에 div의 테두리 너비는 사각형의 너비와 동일합니다.
 Note: 유저가 크기를 조정하거나 확대/축소하는 경우 오버레이가 제 위치를 벗어날 수 있습니다. \*/
  var rects = elt.getClientRects();
  for (var i = 0; i != rects.length; i++) {
    var rect = rects[i];
    var tableRectDiv = document.createElement("div");
    tableRectDiv.style.position = "absolute";
    tableRectDiv.style.border = "1px solid red";
    var scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    var scrollLeft =
      document.documentElement.scrollLeft || document.body.scrollLeft;
    tableRectDiv.style.margin = tableRectDiv.style.padding = "0";
    tableRectDiv.style.top = rect.top + scrollTop + "px";
    tableRectDiv.style.left = rect.left + scrollLeft + "px";
    // rect.width가 테두리 너비가 되어야 하므로 콘텐츠 너비는 2px 더 작습니다.
    tableRectDiv.style.width = rect.width - 2 + "px";
    tableRectDiv.style.height = rect.height - 2 + "px";
    document.body.appendChild(tableRectDiv);
  }
}

(function () {
  /\* "withClientRectsOverlay" 클래스가 할당된 모든 엘리먼트에 대해 addClientRectsOverlay(elt) 함수를 호출합니다 \*/
  var elt = document.getElementsByClassName("withClientRectsOverlay");
  for (var i = 0; i < elt.length; i++) {
    addClientRectsOverlay(elt[i]);
  }
})();
```

### 결과

명세
--

| Specification |
| --- |
| CSSOM View Module # dom-element-getclientrects |

### 노트

`getClientRects()`는 MS IE DHTML 객체 모델에서 처음으로 소개되었습니다.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Element.getBoundingClientRect()`


Element.id - Web API

Element.id
==========

**`Element.id`** 속성은 요소의 식별자를 나타내며, HTML의 전역적인 id 속성을 반영합니다.

이 값은 도큐먼트 내에서 유일해야 하며, 종종 `getElementById`를 사용하여 요소를 찾아내는데 사용됩니다. `id` 속성을 이용하는 다른 보편적인 방법에는 CSS로 도큐먼트를 스타일링 할때 ID를 선택자로 사용하는 방법이 있습니다.

**참고:** 식별자는 대소문자를 구분하지만, 그래도 ID를 대소문자만 다르게 생성해서는 안됩니다. (클래스명과 식별자에서의 대소문자 구분참고).

Syntax
------

```js
var idStr = elt.id; // 아이디를 가져옵니다.
elt.id = idStr; // 아이디를 부여합니다
```

* \*`idStr`\*는 요소의 식별자입니다.
명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-id① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The DOM **id** global attribute.


element.scrollIntoView - Web API

element.scrollIntoView
======================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
`Element` (en-US) 인터페이스의 **`scrollIntoView()`** 메소드는 `scrollIntoView()`가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다.

문법
--

```js
element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter
```

### 매개변수

`alignToTop` Optional

불리언 값입니다.

* `true`일 경우, 요소의 상단은 스크롤 가능한 조상 요소의 보이는 영역 상단에 정렬됩니다.
 `scrollIntoViewOptions: {block: "start", inline: "nearest"}`와 일치합니다.
 이 값이 기본 값입니다.
* `false`일 경우, 요소의 하단은 스크롤 가능한 조상 요소의 보이는 영역 하단에 정렬됩니다.
 `scrollIntoViewOptions: {block: "end", inline: "nearest"}`와 일치합니다.

`scrollIntoViewOptions` Optional

Experimental

다음 속성을 포함하는 객체입니다.

`behavior` Optional

스크롤을 즉시 적용할지 아니면 부드러운 애니메이션을 적용할지 결정합니다. 이 옵션은 다음 값 중 하나의 문자열을 취해야 합니다.

* `smooth`: 스크롤이 부드럽게 움직입니다.
* `instant`: 스크롤이 단번에 즉시 적용됩니다.
* `auto`: 스크롤 동작은 `scroll-behavior` (en-US)의 계산된 값에 의해 결정됩니다.

`block` Optional

 수직 정렬을 정의합니다.
 `start`, `center`, `end`, 또는
 `nearest` 중 하나입니다. 기본 값은 `start`입니다.

`inline` Optional

 수평 정렬을 정의합니다.
 `start`, `center`, `end`, 또는
 `nearest` 중 하나입니다. 기본 값은 `nearest`입니다.

### 반환 값

없음 (`undefined`).

예제
--

```js
const element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
```

참고
--

다른 요소의 레이아웃에 따라 위쪽 또는 아래쪽으로 완전히 스크롤되지 않을 수 있습니다.

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollintoview |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

더보기
---

* `Element.scrollIntoViewIfNeeded()` (en-US)
비표준


Element: insertAdjacentHTML() 메서드 - Web API

Element: insertAdjacentHTML() 메서드
=================================

`Element` (en-US) 인터페이스의 **`insertAdjacentHTML()`** 메서드는 지정된 텍스트를 HTML 혹은 XML로 파싱하고 결과 노드들을 지정된 위치의 DOM 트리에 삽입합니다.

구문
--

```js
insertAdjacentHTML(position, text)
```

### 매개변수

`position`

요소와 상대적인 위치를 나타내는 문자열입니다. 다음 문자열 중 하나여야 합니다.

`"beforebegin"`

요소 이전에 위치합니다. 오직 요소가 DOM 트리에 있고 부모 요소를 가지고 있을 때만 유효합니다.

`"afterbegin"`

요소 바로 안에서 처음 자식 이전에 위치합니다.

`"beforeend"`

요소 바로 안에서 마지막 자식 이후에 위치합니다.

`"afterend"`

요소 이후에 위치합니다. 오직 요소가 DOM 트리에 있고 부모 요소를 가지고 있을 때만 유효합니다.

`text`

HTML 혹은 XML로 파싱되고 트리에 삽입되는 문자열입니다.

### 반환 값

없음 (`undefined`).

### 예외

이 메서드는 다음 타입 중 하나의 `DOMException` (en-US)를 발생시킬 수 있습니다.

`NoModificationAllowedError` `DOMException` (en-US)

`position`이 `"beforebegin"` 혹은 `"afterend"`이고 요소가 부모를 가지고 있지 않거나 부모가 `Document` 객체인 경우 에러를 던집니다.

`SyntaxError` `DOMException` (en-US)

`position`이 나열된 네 개의 값 중 하나가 아닌 경우 에러를 던집니다.

설명
--

`insertAdjacentHTML()` 메서드는 사용되고 있는 요소를 다시 파싱하지 않아서 해당 요소 내의 기존 요소들을 손상시키지 않습니다. 이는 추가적인 직렬화 단계를 피하므로 직접적인 `innerHTML` 조작보다 훨씬 빠릅니다.

다음과 같이 삽입된 콘텐츠의 가능한 위치를 시각화할 수 있습니다.

```html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
```

### 보안 고려 사항

`insertAdjacentHTML()`을 사용하여 페이지에 HTML을 삽입할 때, 이스케이프 문자열이 아닌 사용자 입력을 사용하지 않도록 조심해야 합니다.

일반 텍스트를 삽입할 때 `insertAdjacentHTML()`을 사용해서는 안됩니다. 대신, `Node.textContent` 속성 혹은 `Element.insertAdjacentText()` (en-US) 메서드를 사용합니다. 이는 전달된 콘텐츠를 HTML로 해석하지 않습니다. 대신 원시 텍스트로 삽입합니다.

예시
--

### HTML 삽입

#### HTML

```html
<select id="position">
  <option>beforebegin</option>
  <option>afterbegin</option>
  <option>beforeend</option>
  <option>afterend</option>
</select>

<button id="insert">Insert HTML</button>
<button id="reset">Reset</button>

<p>
  Some text, with a <code id="subject">code-formatted element</code> inside it.
</p>
```

#### CSS

```css
code {
  color: red;
}
```

#### JavaScript

```js
const insert = document.querySelector("#insert");
insert.addEventListener("click", () => {
  const subject = document.querySelector("#subject");
  const positionSelect = document.querySelector("#position");
  subject.insertAdjacentHTML(
    positionSelect.value,
    "<strong>inserted text</strong>",
  );
});
const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
  document.location.reload();
});
```

#### 결과

명세
--

| Specification |
| --- |
| DOM Parsing and Serialization # dom-element-insertadjacenthtml |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Element.insertAdjacentElement()` (en-US)
* `Element.insertAdjacentText()` (en-US)
* `XMLSerializer` (en-US): DOM 트리를 XML 문자열로 직렬화
* hacks.mozilla.org guest post 경우에 따라 insertAdjacentHTML가 더 빠를 수 있다는 것을 벤치마크를 포함해 보여주는 Henri Sivonen 게시물.


ParentNode.childElementCount - Web API

ParentNode.childElementCount
============================

**`ParentNode.childElementCount`** 읽기 전용 속성은 주어진 요소의 자식 요소 개수를 `unsigned long` 타입으로 반환합니다.

**참고:** 이 속성은 처음에 `ElementTraversal` 인터페이스에 정의되었습니다. 이 인터페이스는 자식이 있는 `Node` (en-US)와 자식 `Node` (en-US)를 위한 두 가지 고유한 속성 집합을 포함하고 있었는데, 각각 `ParentNode`와 `ChildNode` 개별 인터페이스로 이동되었습니다. `childElementCount`의 경우 `ParentNode`로 이동했습니다. 이것은 기술적인 변화로 호환성에는 영향을 미치지 않습니다.

문법
--

```js
var count = node.childElementCount;
```

`count`

`unsigned long`(정수) 타입의 반환값.

`node`

`Document`, `DocumentFragment` 또는 `Element` (en-US) 객체.

예제
--

```js
var foo = document.getElementById("foo");
if (foo.childElementCount > 0) {
  // Do something
}
```

폴리필 (IE8 & IE9 & Safari)
------------------------

이 속성은 IE9 이전 버전에서는 지원하지 않습니다. IE9과 Safari는 `Document`와 `DocumentFragment` 객체에서 이 속성을 지원하지 않습니다.

```js
(function (constructor) {
  if (
    constructor &&
    constructor.prototype &&
    constructor.prototype.childElementCount == null
  ) {
    Object.defineProperty(constructor.prototype, "childElementCount", {
      get: function () {
        var i = 0,
          count = 0,
          node,
          nodes = this.childNodes;
        while ((node = nodes[i++])) {
          if (node.nodeType === 1) count++;
        }
        return count;
      },
    });
  }
})(window.Node || window.Element);
```

명세
--

| Specification |
| --- |
| DOM Standard # dom-parentnode-childelementcount |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

참조
--

* `ParentNode`와 `ChildNode` 인터페이스.
* 이 인터페이스를 구현한 객체 타입: `Document`, `Element` (en-US), `DocumentFragment`.


Element.innerHTML - Web API

Element.innerHTML
=================

`Element` (en-US) 속성(property) **`innerHTML`** 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정합니다.

**참고:** **주의:** `<div>` (en-US), `<span>`, `<noembed>` (en-US) 노드가 (&), (<), (>) 문자를 포함하는 텍스트 노드를 자식으로 가지고 있다면, `innerHTML`은 이러한 문자들을 각각 `"&"`, `"<"` ,`">"`로 반환합니다. `Node.textContent`를 사용하여 이러한 텍스트 노드 내용의 원본을 복사할 수 있습니다.

요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입하려면, `insertAdjacentHTML()` 메서드를 사용하십시오.

Syntax
------

```js
const content = element.innerHTML;

element.innerHTML = htmlString;
```

### Value

요소(element)의 자손의 HTML 직렬화를 포함하는 `DOMString` 입니다. Setting the value of `innerHTML` 의 값을 설정(대입)하면 요소의 모든 자손이 제거되고, 문자열 htmlString에 지정된 HTML을 파싱하고, 생성된 노드로 대체합니다.

### Exceptions

`SyntaxError`

HTML의 양식에 맞지 않는 문자열을 사용하여, `innerHTML` 의 값을 설정하려는 시도가 있었습니다.

`NoModificationAllowedError`

부모가 `Document`인 노드에 HTML을 삽입하려고 했습니다.

Usage notes
-----------

`innerHTML` 속성(property)은 페이지가 처음 로드 된 이후의 모든 변경 사항을 포함하여, 페이지의 현재 HTML 소스를 검사하는데 사용할 수 있습니다.

### Reading the HTML contents of an element

`innerHTML` 를 읽으면 유저 에이전트(user agent)가 요소의 자손으로 구성된 HTML 또는 XML조각을 직렬화 합니다. 그 결과는 문자열로 반환합니다.

```js
let contents = myElement.innerHTML;
```

이를 통해 요소의 컨텐트 노드에 대한 HTML 마크업을 볼 수 있습니다.

**참고:** **주의:** 반환 된 HTML, XML 파편은 요소의 현재 내용일 기반으로 생성됩니다. 따라서 반환 된 마크업과 양식이 본래의 페이지 마크업과 일치하지 않을 수 있습니다.

### Replacing the contents of an element

`innerHTML` 값을 설정하면 요소의 기존 내용(content)을 새 내용으로 쉽게 변경할 수 있습니다.

예를 들어, 문서(document)의 `body` 속성(attribute)을 지우면, 문서의 전체 내용을 지울 수 있습니다.

```js
document.body.innerHTML = "";
```

이 예제는 문서의 현재 HTML 마크업을 가져오고, `"<"` 문자를 HTML 엔터티 `"<"` 로 대체하합니다. 그러면 HTML을 원시 텍스트(raw text - 파싱 이전의 모습)로 반환합니다. 이것을 `<pre>` 요소로 래핑합니다. 그러면 `innerHTML` 값은 새 문자열로 변경됩니다. 그 결과, 문서의 내용은 페이지의 전체 소스 코드의 출력으로 대체됩니다.

```js
document.documentElement.innerHTML =
  "<pre>" + document.documentElement.innerHTML.replace(/</g, "<") + "</pre>";
```

#### Operational details

`innerHTML` 값을 설정할 때, 정확히 어떤 일이 발생하나요? 값을 설정하면, 유저 에이전트는 다음 단계를 따르게 됩니다.

1. 지정한 값은 HTML 또는 XML(문서 타입에 따라)로 파싱되어, `DocumentFragment` 객체가 새 요소에 대한 새로운 노드 DOM 노드 집합을 나타냅니다.
2. 내용이 대체되는 요소가 `<template>` 요소 인 경우, `<template>` 요소의 `content` (en-US) 속성(attribute)은 1단계에서 작성한 새 `DocumentFragment` 로 대체됩니다.
3. 다른 모든 요소의 경우, 요소의 내용은 새 `DocumentFragment` 의 노드로 대체됩니다.
### Security considerations

`innerHTML` 이 웹 페이지에 텍스트를 삽입하는데 사용되는 것은 종종 볼 수 있습니다. 이것은 사이트의 공격 경로가 되어 잠재적인 보안 위험이 발생할 수 있습니다.

```js
const name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
```

이것은 cross-site scripting 공격처럼 보일 수 있지만, 결과는 무해합니다. HTML5 는 `innerHTML` 과 함께 삽입된 `<script>` 태그가 실행되지 않도록 지정합니다.

그러나 `<script>` 요소를 사용하지 않고, JavaScript를 실행하는 방법이 있으므로, `innerHTML` 을 사용하여 제어할 수 없는 문자열을 설정할 때 마다 여전히 보안위험이 있습니다. 예를들어:

```js
const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert
```

따라서 일반 텍스트를 삽입 할 때는 `innerHTML` 을 사용하지 않는 것이 좋습니다. 대신 `Node.textContent`를 사용하십시오. 이것은 전달 된 내용을 HTML로 파싱하지 않고 원시 텍스트(raw text)로 삽입합니다.

**경고:** 프로젝트가 보안 점검을 거치게 되는 프로젝트인 경우, `innerHTML` 을 사용하면 코드가 거부 될 가능성이 높습니다. 예를 들어, 브라우저 확장에서 `innerHTML`을 사용하고 addons.mozilla.org에 확장을 제출하면 자동 검토 프로세스를 통과하지 못합니다.

Example
-------

이 예제에서는 `innerHTML` 을 사용하여 메시지를 웹 페이지의 상자에 기록하는 매커니즘을 만듭니다.

### JavaScript

```js
function log(msg) {
  var logElem = document.querySelector(".log");

  var time = new Date();
  var timeStr = time.toLocaleTimeString();
  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
}

log("Logging mouse events inside this container...");
```

`log()` 함수는 `toLocaleTimeString()` (en-US)을 사용하여 `Date` 객체에서 현재 시간을 가져 오고, 타임 스탬프와 메시지 텍스트가 있는 문자열을 작성하여 로그 출력을 만듭니다. 그런 다음 메시지는 클래스 `"log"`가 있는 상자에 추가됩니다.

`MouseEvent` 기반 이벤트 (`mousedown` (en-US), `click`, `mouseenter` (en-US)와 같은) 정보를 기록하는 두 번째 메서드를 추가합니다:

```js
function logEvent(event) {
  var msg =
    "Event <strong>" +
    event.type +
    "</strong> at <em>" +
    event.clientX +
    ", " +
    event.clientY +
    "</em>";
  log(msg);
}
```

그리고나서, 우리의 로그가 들어있는 상자에 여러 마우스 이벤트에 대한 이벤트 핸들러로 사용합니다.

```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);
```

### HTML

HTML은 우리의 예제에서 아주 간단합니다.

```html
<div class="box">
  <div><strong>Log:</strong></div>
  <div class="log"></div>
</div>
```

클래스 `"box"`를 갖는 `<div>` (en-US) 는 레이아웃을 위한 컨테이너 입니다. class가 `"log"` 인 `<div>` 는 로그 텍스트 자체의 컨테이너 입니다.

### CSS

다음 CSS는 우리의 예제 내용을 꾸밉니다.

```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;
}
```

### Result

결과 컨텐츠는 다음과 같습니다. 마우스를 상자 안팎으로 움직이거나 클릭하고 로그에서 출력을 볼 수 있습니다.

명세서
---

| Specification |
| --- |
| DOM Parsing and Serialization # dom-innerhtml-innerhtml |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Node.textContent` 과 `Node.innerText`
* `Element.insertAdjacentHTML()`
* DOM 트리에 HTML 파싱하기: `DOMParser`
* XML 또는 HTML을 DOM 트리로 직렬화 하기: `XMLSerializer` (en-US)


Element.getBoundingClientRect() - Web API

Element.getBoundingClientRect()
===============================

**`Element.getBoundingClientRect()`** 메서드는 엘리먼트의 크기와
 뷰포트에 상대적인 위치 정보를 제공하는
 `DOMRect` 객체를 반환합니다.

구문
--

```js
domRect = element.getBoundingClientRect();
```

### 값

 반환 값은 padding과 border-width를 포함해 전체 엘리먼트가 들어 있는 가장 작은 사각형인
 `DOMRect` 객체입니다. `left`, `top`,
 `right`, `bottom`, `x`, `y`,
 `width`, `height` 프로퍼티는 전반적인 사각형의 위치와 크기를
 픽셀 단위로 나타냅니다. `width`와 `height`가 아닌 다른 프로퍼티는
 뷰포트의 top-left에 상대적입니다.

![](/ko/docs/Web/API/Element/getBoundingClientRect/element-box-diagram.png)

 메서드가 반환하는 `DOMRect` 객체의 `width`와 `height`
 프로퍼티는 콘텐츠의 width/height뿐만 아니라 `padding`과 `border-width`도
 포함합니다. 표준 박스 모델에서, 이는 엘리먼트 + `padding` + `border-width`의
 `width` 또는 `height` 프로퍼티와 동일합니다. 하지만
 `box-sizing: border-box`가
 해당 엘리먼트에 설정되어 있으면 이는 `width` 또는 `height`와 직접적으로 동일합니다.

 반환 값은 해당 엘리먼트의 `getClientRects()`가 반환한
 사각형들의 결합으로 생각해볼 수 있습니다. 해당 엘리먼트에 관계된 CSS border-box들을 예로 들어볼 수 있습니다.

 빈 border-box들은 완전히 무시합니다. 모든 엘리먼트의 border-box가 비어있다면 `width`와
 `height`가 0인 사각형을 반환하며 `top`과 `left`는 해당 엘리먼트의
 (콘텐츠 순서에서) 첫 번째 CSS 박스에 대한 border-box의 top-left입니다.

 뷰포트 영역(또는 스크롤 가능한 엘리먼트)에서 수행된 스크롤의 정도는 경계 사각형을 계산할 때 고려됩니다.
 이는 사각형의 경계 모서리(`top`, `right`,
 `bottom`, `left`)는 스크롤링 위치가 변경될 때마다 그 값이 변경됨을 의미합니다(이
 값들은 절대적인 것이 아니라 뷰포트에 상대적이기 때문입니다).

 문서의 top-left 코너에 상대적인 경계 사각형이 필요하다면, 현재 스크롤링 위치를 `top`과 `left`
 프로퍼티에 추가하여(이 값들은 `window.scrollX`와 `window.scrollY`를 사용하여
 얻을 수 있습니다) 현재 스크롤링 위치로부터 독립적인 경계 사각형을 얻습니다.

### 크로스 브라우저 폴백

 높은 크로스 브라우저 호환성이 필요한 스크립트는 `window.scrollX`와 `window.scrollY`
 대신에 `window.pageXOffset` (en-US)와 `window.pageYOffset` (en-US)를 사용하면 됩니다.
 이러한 프로퍼티에 접근할 수 없는 스크립트는 다음과 같은 코드를 사용하면 됩니다.

```js
// scrollX의 경우
(((t = document.documentElement) || (t = document.body.parentNode)) &&
typeof t.scrollLeft == "number"
  ? t
  : document.body
).scrollLeft(
  // scrollY의 경우
  ((t = document.documentElement) || (t = document.body.parentNode)) &&
    typeof t.scrollTop == "number"
    ? t
    : document.body,
).scrollTop;
```

예제
--

### 기본

 다음 간단한 예제는 간단한 `<div>` 엘리먼트의 경계 클라이언트 사각형을 나타내는 `DOMRect`
 객체를 찾고, 해당 객체의 프로퍼티를 그 아래에 출력합니다.

```html
<div></div>
```

```css
div {
  width: 400px;
  height: 200px;
  padding: 20px;
  margin: 50px auto;
  background: purple;
}
```

```js
let elem = document.querySelector("div");
let rect = elem.getBoundingClientRect();
for (var key in rect) {
  if (typeof rect[key] !== "function") {
    let para = document.createElement("p");
    para.textContent = `${key} : ${rect[key]}`;
    document.body.appendChild(para);
  }
}
```

`width`/`height`가
 `width`/`height` + `padding`과 어떻게 같은지 확인하세요.

 또한 각각의 경우에서 `x`/`left`,
 `y`/`top`, `right`, `bottom`의 값이
 뷰포트의 관련 모서리부터 엘리먼트의 측면까지의 절대 거리와 어떻게 동일한지 확인하세요.

#### 스크롤링

이 예제는 문서를 스크롤 할 때 바운딩 클라이언트 사각형이 어떻게 변경되는지를 보여줍니다.

```html
<div></div>
<div id="example"></div>
<div id="controls"></div>
```

```css
div#example {
  width: 400px;
  height: 200px;
  padding: 20px;
  margin: 50px auto;
  background: purple;
}

body {
  padding-bottom: 1000px;
}
p {
  margin: 0;
}
```

```js
function update() {
  const container = document.getElementById("controls");
  const elem = document.querySelector("div");
  const rect = elem.getBoundingClientRect();

  container.innerHTML = "";
  for (let key in rect) {
    if (typeof rect[key] !== "function") {
      let para = document.createElement("p");
      para.textContent = `${key} : ${rect[key]}`;
      container.appendChild(para);
    }
  }
}

document.addEventListener("scroll", update);
update();
```

명세
--

| Specification |
| --- |
| CSSOM View Module # dom-element-getboundingclientrect |

### 참고

 반환된 `DOMRect` 객체는 최신 브라우저에서 수정될 수 있습니다.
 `DOMRectReadOnly`를 효과적으로 반환하는 이전 버전의 브라우저에서는 그렇지 않습니다.
 IE와 Edge는 그들이 반환하는 `ClientRect`
 에 누락된 프로퍼티를 추가할 수 없으며, 객체는 `x`와 `y`를 다시 채우는 것을 방지합니다.

 호환성 문제로 인해(아래 참고), `left`, `top`, `right`, `bottom`
 프로퍼티에만 의존하는 것이 안전합니다.

 반환된 `DOMRect` 객체의 프로퍼티는 자신의 프로퍼티가 아닙니다. `in` 연산자와
 `for...in`은 반환된 프로퍼티를 찾을 수 있지만 `Object.keys()`와 같은 다른 API들은
 그렇지 못합니다. 또한, 예기치 않게 ES2015 및 `Object.assign()`과 객체 레스트/스프레드와 같은
 새로운 기능들은 반환된 프로퍼티를 복사하지 못합니다.

```js
rect = elt.getBoundingClientRect()
// emptyObj의 결과는 {}
emptyObj = Object.assign({}, rect)
emptyObj = { ...rect }
{width, ...emptyObj} = rect
```

`DOMRect`의 프로퍼티인 `top`, `left`,
 `right`, `bottom`은 객체의 다른 프로퍼티의 값을 사용해 계산됩니다.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `getClientRects()`
* MSDN:
`getBoundingClientRect`
* MSDN:
`ClientRect`, an earlier version of `DOMRect`


Element: paste 이벤트 - Web API

Element: paste 이벤트
==================

**`paste`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 붙여넣기를 했을 때 발생합니다.

|  |  |
| --- | --- |
| 버블링 | 예 |
| 취소 가능 | 예 |
| 인터페이스 | `ClipboardEvent` |
| 이벤트 처리기 속성 | `onpaste` (en-US) |

현재 커서가 편집 가능한 맥락 (`<textarea>` (en-US) 등, 또는 `contenteditable` 특성이 `true`인 요소) 내에 위치한 경우, 이벤트의 기본 동작은 커서 위치에 클립보드의 내용을 삽입하는 것입니다.

`paste` 이벤트 처리기는 이벤트의 `ClipboardEvent.clipboardData` 속성에 대해 `getData()` 메서드를 호출해 클립보드 콘텐츠를 읽을 수 있습니다.

데이터 가공 등을 위해 기본 동작을 재정의해야 할 필요가 있는 경우 `event.preventDefault()`을 호출해 취소하고, 직접 데이터를 삽입하면 됩니다.

합성 `paste` 이벤트를 생성해서 발송할 수는 있지만, 이 방법으로는 문서 내용에 영향을 줄 수 없습니다.

예제
--

### HTML

```html
<div class="source" contenteditable="true">
  이 상자에서 텍스트를 복사해보세요...
</div>
<div class="target" contenteditable="true">...여기에 붙여 넣어 보세요.</div>
```

```
div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}
```

### JS

```js
const target = document.querySelector("div.target");

target.addEventListener("paste", (event) => {
  const paste = (event.clipboardData || window.clipboardData).getData("text");
  const reversed = Array.from(paste).reverse().join("");

  const selection = window.getSelection();
  if (!selection.rangeCount) return false;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(reversed));

  event.preventDefault();
});
```

### 결과

명세
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-paste |
| HTML Standard # handler-onpaste |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 관련 이벤트: `copy`, `cut`
* `Document`를 대상으로 한 같은 이벤트: `paste`
* `Window`를 대상으로 한 같은 이벤트: `paste`


GlobalEventHandlers.ondblclick - Web API

GlobalEventHandlers.ondblclick
==============================

**`ondblclick`** property는 현재 요소(element)의 onDblClick 이벤트 핸들러 코드를 돌려줍니다.

구문
--

```js
element.ondblclick = function;
```

* `function` 은 사용자 정의 함수이며, () 나 변수를 제외하고 생성할 수 있고 또는 아래와 같이 함수명을 선언하지 않고 생성할 수 있습니다.

```js
element.ondblclick = function () {
  console.log("ondblclick event detected!");
};
```

예제
--

다음 예제는 더블클릭의 위치를 기록합니다.

### HTML

```html
<p>Double click anywhere in this example.</p>
<p id="log"></p>
```

### JavaScript

```js
let log = document.getElementById("log");

document.ondblclick = logDoubleClick;

function logDoubleClick(e) {
  log.textContent = `Position: (${e.clientX}, ${e.clientY})`;
}
```

### 결과

명세
--

| Specification |
| --- |
| UI Events # event-type-dblclick |
| HTML Standard # handler-ondblclick |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


UIEvent: UIEvent() 생성자 - Web API

UIEvent: UIEvent() 생성자
======================

**`UIEvent()`** 생성자는 새로운 `UIEvent` 객체를 생성합니다.

**참고:** 이 생성자로 생성한 인공 이벤트는 보안상의 이유로 신뢰되지 않습니다. 브라우저가 생성한 `UIEvent` 객체들만 신뢰되며 기본 동작을 유발할 수 있습니다.

구문
--

```js
new UIEvent(type)
new UIEvent(type, options)
```

### 매개변수

`type`

이벤트 이름 문자열입니다. 대소문자를 구분하며 브라우저는 `load`, `unload`, `abort`, `error`, `select`를 사용합니다.

`options` Optional

`Event()`에서 사용할 수 있는 속성에 더해 다음 속성들도 포함하는 객체입니다.

`detail` Optional

이벤트 유형에 따라 의미가 다른 숫자 값입니다. 기본 값은 `0`으로, 이 값이 표준 이벤트들에서 갖는 뜻은 `UIEvent.detail` 문서에서 확인할 수 있습니다.

`view` Optional

이벤트에 연관된 `Window`입니다. 기본 값은 `null`입니다.

`sourceCapabilities` Optional
비표준

터치 이벤트를 생성하는 물리적 장치에 대한 정보를 담고 있는 `InputDeviceCapabilities` (en-US) 객체입니다.

### 반환 값

새로운 `UIEvent` 객체.

명세서
---

| Specification |
| --- |
| UI Events # dom-uievent-uievent |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 생성자가 생성하는 객체의 인터페이스인 `UIEvent`


UIEvent: detail 속성 - Web API

UIEvent: detail 속성
==================

**`UIEvent.detail`** 읽기 전용 속성은, 0이 아니라면, 현재 (또는 이벤트에 따라 다음) 클릭 수를 나타냅니다.

`click`과 `dblclick` 이벤트에서의 `UIEvent.detail`은 현재 클릭 수입니다.

`mousedown` (en-US)과 `mouseup` (en-US) 이벤트에서의 `UIEvent.detail`은 현재 클릭 수에 1을 더한 값입니다.

다른 모든 `UIEvent` 객체의 `UIEvent.detail`은 항상 0입니다.

명세서
---

| Specification |
| --- |
| UI Events # dom-uievent-detail |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


UIEvent: view 속성 - Web API

UIEvent: view 속성
================

**`UIEvent.view`** 읽기 전용 속성은 이벤트가 생성된 WindowProxy 객체를 반환합니다. 브라우저에서는 이벤트가 발생한 `Window` 객체입니다.

값
-

`AbstractView` 객체 참조입니다.

명세서
---

| Specification |
| --- |
| UI Events # dom-uievent-view |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


IntersectionObserver.disconnect() - Web API

IntersectionObserver.disconnect()
=================================

`IntersectionObserver`의 **`disconnect()`** 메서드는 감지기의 모든 가시성 변화 주시 대상을 해제합니다.

구문
--

```js
intersectionObserver.disconnect();
```

### 반환 값

`undefined`.

명세
--

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-disconnect |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `observe()`
* `unobserve()`


IntersectionObserver.takeRecords() - Web API

IntersectionObserver.takeRecords()
==================================

`IntersectionObserver`의 **`takeRecords()`** 메서드는 주시 대상 중에서 마지막 교차 변화 알림 이후, 즉 명시적인 `takeRecords()` 호출 또는 감지기의 콜백 자동 호출 이후 교차 영역에 변화가 생긴 요소를 나타내는 `IntersectionObserverEntry` (en-US) 객체의 배열을 반환합니다.

**참고:** 콜백으로 교차 영역의 변화를 관측하고 있으면 굳이 이 메서드를 호출하지 않아도 됩니다. `takeRecords()`를 호출하면 대기 중인 교차 변화 감지 목록을 초기화하므로 감지기가 콜백을 호출하지 않을 것입니다.

구문
--

```js
intersectionObserverEntries = intersectionObserver.takeRecords();
```

### 반환 값

마지막 교차 변화 알림 이후 교차 영역의 변화를 감지한 대상 요소를 나타내는 `IntersectionObserverEntry` (en-US)의 배열.

명세
--

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-takerecords |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Intersection Observer API


IntersectionObserver.root - Web API

IntersectionObserver.root
=========================

`IntersectionObserver` 인터페이스의 **`root`** 읽기 전용 속성은 바운딩 박스를 주시 대상의 뷰포트로 취급하는 `Element` (en-US) 또는 `Document`를 나타냅니다.

`root`가 `null`이면 문서의 실제 뷰포트 바운딩 박스를 사용합니다.

값
-

대상 요소가 얼마나 보이는지 판별할 때, 그 뷰포트 경계로서 바운딩 박스를 가져오는 `Element` (en-US) 또는 `Document` 객체입니다.

이 뷰포트 경계에 `IntersectionObserver()` 생성자로 제공한 여백 설정을 적용한 직사각형 영역과, 대상 요소의 경계에서 그 위에 겹치는 다른 요소의 경계를 뺐을 때의 직사각형 영역을 대상 요소에서 볼 수 있는 영역으로 취급합니다.

`root`가 `null`이면 현재 문서를 루트로, 그 뷰포트(문서에서 지금 보이는 영역)를 루트 경계로 사용합니다.

예제
--

CSS `border` 속성을 사용해서 교차 감지기의 루트 요소에 2픽셀 초록색 테두리를 추가하는 예제입니다.

```js
observer.root.style.border = "2px solid #44aa44";
```

명세
--

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-root |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Intersection Observer API로 요소가 보여진 시간 측정하기 (en-US)


IntersectionObserver.observe() - Web API

IntersectionObserver.observe()
==============================

`IntersectionObserver`의 **`observe()`** 메서드는 `IntersectionObserver`의 주시 대상 목록에 요소를 추가합니다. 하나의 감지기는 하나의 루트와 하나의 역치 목록만 가질 수 있지만, 동시에 여러 요소를 주시할 수 있습니다.

요소의 주시를 중단하려면 `IntersectionObserver.unobserve()`를 호출하세요.

지정한 주시 대상 요소의 가시성 비율이 감지기의 역치(`IntersectionObserver.thresholds` (en-US))를 통과하는 순간 감지기 콜백이 호출됩니다. 이때 역치를 통과한 요소를 나타내는 `IntersectionObserverEntry` (en-US)의 배열을 콜백 매개변수로 제공합니다. 이런 구조 덕분에 한 번의 콜백 호출만으로 많은 요소의 가시성 변화를 한 번에 처리할 수 있습니다.

구문
--

```js
IntersectionObserver.observe(targetElement);
```

### 매개변수

`targetElement`

루트 내에서의 가시성 변화를 감지할 `element` (en-US)입니다. 루트 요소의 자손이어야 합니다. 루트가 현재 문서의 뷰포트일 경우 이 요소도 문서 내에 위치해야 합니다.

### 반환 값

`undefined`.

예제
--

```js
// IntersectionObserver 등록
const io = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    // 주시 대상이 뷰포트 안으로 들어오면 active 클래스 추가
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add("active");
    }
    // 아니면 active 클래스 제거
    else {
      entry.target.classList.remove("active");
    }
  });
});

// 주시 대상 선언, 주시 시작
const boxElList = document.querySelectorAll(".box");
boxElList.forEach((el) => {
  io.observe(el);
});
```

명세
--

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-observe |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `IntersectionObserver.unobserve()`


IntersectionObserver.unobserve() - Web API

IntersectionObserver.unobserve()
================================

`IntersectionObserver`의 **`unobserve()`** 메서드는 특정 요소에 대한 가시성 변화 주시를 중단합니다.

구문
--

```js
IntersectionObserver.unobserve(target);
```

### 매개변수

`target`

주시를 중단할 `Element` (en-US)입니다. 지정한 요소를 이미 주시하고 있지 않을 때는 아무것도 수행하지 않으며 예외도 발생하지 않습니다.

### 반환 값

`undefined`.

예제
--

아래 코드는 감지기를 생성한 후 요소를 주시하고, 다시 주시를 해제하는 예제입니다.

```js
var observer = new IntersectionObserver(callback);
observer.observe(document.getElementById("elementToObserve"));

/\* ... \*/

observer.unobserve(document.getElementById("elementToObserve"));
```

명세
--

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-unobserve |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Intersection Observer API
* `IntersectionObserver.observe()`


IntersectionObserver() - Web API

IntersectionObserver()
======================

**`IntersectionObserver()`** 생성자는 새로운 `IntersectionObserver` 객체를 생성하고 반환합니다.

`rootMargin` 옵션을 지정했다면 값의 구문이 맞는지, 범위가 0.0 이상 1.0 이하인지, 그리고 역치가 오름차순으로 정렬됐는지 검사합니다. 역치 목록이 없다면 배열 `[0.0]`을 사용합니다.

구문
--

```js
new IntersectionObserver(callback[, options]);
```

### 매개변수

`callback`

대상 요소의 보이는 영역 비율이 역치를 위아래로 넘을 때 (더 커졌거나 작아졌을 때 모두) 호출할 함수입니다. 두 개의 매개변수를 받습니다.

`entries`

더 드러나거나 가려져서 지정한 역치를 넘어가게 된 요소를 나타내는 `IntersectionObserverEntry` (en-US) 객체의 배열.

`observer`

콜백을 호출한 `IntersectionObserver`.

`options` Optional

감지기를 조절할 수 있는 객체입니다. 지정하지 않으면 문서 뷰포트를 루트로, 여백 없이, 0% 역치(하나의 픽셀이라도 보이면 콜백 호출)로 설정합니다.

`root`

대상 요소의 조상 `Element` (en-US) 또는 `Document`. 여기에 지정한 요소 또는 문서의 바운딩 박스를 이 감지기의 뷰포트로 사용합니다.

`rootMargin`

교차 계산에 대해 루트의 바운딩 박스에 적용할 오프셋을 나타내는 문자열. 즉 교차 계산 시 루트 영역의 크기를 키우거나 줄이고자 할 때 사용합니다. CSS `margin` 속성과 유사한 값을 받을 수 있습니다. Intersection Observer API 문서의 교차 루트와 루트 여백에서 여백의 동작 방식과 여백 구문에 대해 알아보세요. 기본 값은 `"0px 0px 0px 0px"`입니다.

`threshold`

0.0 이상, 1.0 이하의 숫자 단일 값 또는 숫자 배열. 대상의 보이는 영역과 전체 바운딩 박스의 비율에 대한 역치를 나타냅니다. `0.0`을 지정하면 대상의 픽셀 하나라도 보일 때 대상을 볼 수 있는 것으로 취급하고, `1.0`을 지정하면 대상을 온전히 볼 수 있어야 합니다. Intersection Observer API 문서의 역치에서 자세한 동작 방식을 알아보세요. 기본 값은 `0.0`입니다.

### 반환 값

지정한 `root` 내에서 주시 중인 요소의 가시성이 `threshold`를 위아래로 넘어가는 경우를 감지할 수 있는 새로운 `IntersectionObserver`. `observe()` 메서드를 호출해서 새로운 요소를 주시하세요.

### 예외

`SyntaxError`

지정한 `rootMargin`이 유효하지 않은 경우.

`RangeError`

한 개 이상의 `threshold` 값이 0.0 미만 또는 1.0을 초과할 경우.

예제
--

요소의 볼 수 있는 영역 비율이 10% 위아래로 넘어갈 때 `myObserverCallback` 함수를 호출하는 새로운 교차 탐지기를 생성하는 예제입니다.

```js
let observer = new IntersectionObserver(myObserverCallback, { threshold: 0.1 });
```

명세
--

| Specification |
| --- |
| Intersection Observer # dom-intersectionobserver-intersectionobserver |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLFormElement.elements - Web API

HTMLFormElement.elements
========================

`HTMLFormElement` (en-US) 의 **`HTMLFormElement.elements`** 속성은 `<form>` 요소에 포함된 모든 컨트롤 폼을 나열하는 `HTMLFormControlsCollection` (en-US)을 반환합니다.

`HTMLFormElement.length` (en-US) 속성을 독립적으로 사용하면 컨트롤 폼의 수만 얻을 수 있습니다.

인덱스나 요소의 `name` 또는 `id` 속성을 사용하여 반환된 컬렉션의 특정 컨트롤 폼에 액세스할 수 있습니다.

HTML 5 이전에는 `HTMLFormControlsCollection`을 기반으로 하는 `HTMLCollection`을 반환하였습니다.

**참고:** 문서의 `<form>` 속성을 사용해도 마찬가지로 주어진 문서에 포함된 모든 컨트롤 폼의 목록을 얻을 수 있습니다.

값
-

이미지가 아닌 모든 컨트롤을 포함한 `HTMLFormControlsCollection` (en-US)를 가집니다. 이것은 라이브 컬렉션입니다. 컨트롤 폼이 컬렉션에 추가되거나 제거되면 이 컬렉션은 변경 사항을 반영하도록 업데이트됩니다.

반환된 컬렉션의 컨트롤 폼은 사전 순서, 깊이 우선 트리 순회를 따라 양식에 나타나는 순서와 동일합니다. 이것을 **트리 오더**라고 합니다.

다음 요소들만 반환합니다:

* `<button>`
* `<fieldset>`
* `<input>` (en-US) (단, `type` (en-US)이 `"image"`인 경우는 역사적으로 다른 기능을 위해 작동했기 때문에 생략됩니다.)
* `<object>`
* `<output>`
* `<select>` (en-US)
* `<textarea>` (en-US)
예제
--

### 빠른 구문 예제

이 예제에서는 컨트롤 폼 목록을 얻는 방법과 인덱스 및 이름 또는 ID별로 해당 요소에 액세스하는 방법을 알아봅니다.

```html
<form id="my-form">
  <input type="text" name="username" />
  <input type="text" name="full-name" />
  <input type="password" name="password" />
</form>
```

```js
var inputs = document.getElementById("my-form").elements;
var inputByIndex = inputs[0];
var inputByName = inputs["username"];
```

### 컨트롤 폼에 액세스하기

이 예제에서는 폼의 요소 목록을 가져온 다음 목록을 반복하면서 text (en-US) 유형의 `<input>` (en-US) 요소를 찾아 일부 형식의 처리를 수행할 수 있도록 합니다.

```js
var inputs = document.getElementById("my-form").elements;

// Iterate over the form controls
for (i = 0; i < inputs.length; i++) {
  if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
    // Update text input
    inputs[i].value.toLocaleUpperCase();
  }
}
```

### 폼 컨트롤 비활성화

```js
var inputs = document.getElementById("my-form").elements;

// Iterate over the form controls
for (i = 0; i < inputs.length; i++) {
  // Disable all form controls
  inputs[i].setAttribute("disabled", "");
}
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-form-elements-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* The HTML element implementing this interface: `<form>`.


GlobalEventHandlers.onsubmit - Web API

GlobalEventHandlers.onsubmit
============================

현재 창에서 폼을 제출하는 이벤트를 다루는 이벤트 핸들러

문법
--

```js
window.onsubmit = funcRef;
```

### 매개 변수

* `funcRef` 는 함수를 참조하는 변수이다.
예제
--

```html
<html>
  <script>
 function reg() {
 window.captureEvents(Event.SUBMIT);
 window.onsubmit = hit;
 }

 function hit() {
 console.log("hit");
 }
 </script>

  <body onload="reg();">
    <form>
      <input type="submit" value="submit" />
    </form>
    <div id="d"></div>
  </body>
</html>
```

알아두기
----

제출 이벤트는 사용자가 폼 내부에 있는 제출 버튼(`<input type="submit"/>`)을 눌렀을 때 발생한다.

명세
--

| Specification |
| --- |
| HTML Standard # event-submit |
| HTML Standard # handler-onsubmit |


RTCDataChannelEvent.channel - Web API

RTCDataChannelEvent.channel
===========================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

읽기 속성인 **`RTCDataChannelEvent.channel`** 는 `RTCDataChannel` (en-US)와 관련이 있는 이벤트를 반환합니다.

Syntax
------

```js
var channel = RTCDataChannelEvent.channel;
```

### 값

`RTCDataChannel` (en-US) 객체는 `RTCPeerConnection` (en-US)을 원격 피어와 연결해주는 데이터 채널을 알려줍니다.

예시
--

`datachannel` 이벤트 핸들러 안 코드의 첫 줄에서 이벤트 객체의 채널을 가져오고, 이를 데이터 트래픽을 관리하는 코드에 사용 될 수 있도록 지역 변수로 저장합니다.

```js
pc.ondatachannel = function (event) {
  inboundDataChannel = event.channel;
  inboundDataChannel.onmessage = handleIncomingMessage;
  inboundDataChannel.onopen = handleChannelOpen;
  inboundDataChannel.onclose = handleChannelClose;
};
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-datachannelevent-channel |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `datachannel`
* `RTCDataChannel` (en-US)
* `RTCPeerConnection.ondatachannel`
* A simple RTCDataChannel sample (en-US)
* `RTCPeerConnection` (en-US)


RTCDataChannelEvent() - Web API

RTCDataChannelEvent()
=====================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`RTCDataChannelEvent()`** 생성자는 새로운 `RTCDataChannelEvent`를 생성합니다.

**참고:** 이 이벤트는 알아서 WebRTC 레이어에 생성되고 전달되기 때문에, `RTCDataChannelEvent`를 수동으로 생성하는 일은 거의 없습니다.

Syntax
------

```js
var event = new RTCDataChannelEvent(type, RtcDataChannelEventInit);
```

### 패러미터

`type`

이벤트의 이름을 알려주는 `DOMString`입니다. 이름은 `RTCDataChannelEvent` 타입의 한 종류인 "datachannel" 딱 한 가지만 존재합니다.

`RtcDataChannelEventInit`

아래의 필드를 가지는 `RTCDataChannelEventInit` 딕셔너리 입니다:\* `"channel"`은 {domxref("RTCDataChannel")}}의 한 종류로, 이벤트에 의해 데이터 채널이 확인되었다는 것을 알려줍니다.

* `"bubbles"`은 옵션으로 설정이 가능하며, `EventInit`에서 상속됩니다. 이는 해당 이벤트가 무조건 `bubble`이 되어야하는지의 여부를 알려줍니다. 기본 값은 `false`입니다
* `"cancelable"`은 옵션으로 설정이 가능하며, `EventInit`에서 상속됩니다. 이는 해당 이벤트가 취소 될 수 있는지의 여부를 알려줍니다. 기본 값은 `false`입니다.

### 값

명시한대로 설정된 신규 `RTCDataChannelEvent` 입니다.

예시
--

아래 예제는 신규 `datachannel`를 생성합니다. `dc`는 이미 존재하는 데이터 채널을 뜻합니다.

```js
var event = new RTCDataChannelEvent("datachannel", { channel: dc });
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcdatachannelevent-constructor |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

참조
--

* WebRTC (en-US)
* `RTCDataChannel` (en-US)
* `RTCPeerConnection` (en-US)
* A simple RTCDataChannel sample (en-US)


JavaScript의 queueMicrotask()와 함께 마이크로태스크 사용하기 - Web API

JavaScript의 queueMicrotask()와 함께 마이크로태스크 사용하기
=============================================

**마이크로태스크**는 자신을 생성한 함수 또는 프로그램이 종료됐고 JavaScript 실행 스택이 빈 후에, 그러나 사용자 에이전트가 스크립트 실행 환경을 운용하기 위해 사용하는 이벤트 루프로 통제권을 넘기기는 전에 실행되는 짧은 함수입니다.

이때의 이벤트 루프는 브라우저의 주 이벤트 루프 또는 웹 워커를 구동하는 이벤트 루프입니다. 따라서 마이크로태스크를 이용하면 다른 스크립트의 실행을 방해할 위험을 감수하지 않으면서도, 사용자 에이전트가 반응하기 전에 주어진 함수를 실행할 수 있습니다.

JavaScript 프로미스와 Mutation Observer API 둘 다 마이크로태스크 큐를 사용해 콜백을 호출하지만, 때로는 현재 이벤트 루프가 정리될 때까지 작업을 미루는 기능이 직접 필요할 때가 있습니다. 그래서 서드파티 라이브러리, 프레임워크, 폴리필에서 마이크로태스크를 사용할 수 있도록, `Window`와 `Worker` 인터페이스는 `queueMicrotask()` 메서드를 노출하고 있습니다.

태스크 vs 마이크로태스크
--------------

마이크로태스크를 올바르게 논하려면, 우선 JavaScript에서의 태스크란 무엇인지, 그리고 마이크로태스크가 태스크와 어떻게 다른지 아는 것이 유용합니다. 다음은 짧고 간략한 설명이지만, 보다 자세히 알아보려면 심층 탐구: 마이크로태스크와 JavaScript 런타임 환경 (en-US) 글을 확인해보세요.

### 태스크

**태스크**는 프로그램 초기 시작, 이벤트 콜백 실행, 인터벌과 타임아웃 실행처럼 표준 방식에 의해 예약된 아무 JavaScript 코드입니다. 태스크는 모두 **태스크 큐**에서 실행까지 대기합니다.

태스크가 태스크 큐에 추가되는 상황은 다음과 같습니다.

* 새로운 JavaScript 프로그램 또는 하위 프로그램이 직접 실행(콘솔 사용, 혹은 `<script>` 요소에서 코드 실행)되는 경우.
* 이벤트 발생. 이벤트의 처리기 함수가 태스크 큐에 추가됩니다.
* `setTimeout()`과 `setInterval()`로 추가한 타임아웃/인터벌이 도래하는 경우. 해당 콜백이 태스크 큐에 추가됩니다.

우리 코드의 구동을 맡은 이벤트 루프는 태스크를 큐에 추가된 순서대로 차례차례 처리합니다. 이벤트 루프 패스가 시작했을 때 이미 큐에 들어있던 태스크만 현재 주기에 실행되며, 나머지는 다음 주기까지 대기해야 합니다.

### 마이크로태스크

첫인상만 보면 마이크로태스크와 태스크의 차이점은 사소해보입니다. 실제로 둘은 비슷합니다. 둘 다 큐에 추가되는 JavaScript 코드로, 적절한 시점에 실행됩니다. 그러나 이벤트 루프의 현재 주기가 시작됐을 때 큐에 존재하는 태스크만 순차적으로 처리되는 태스크와 달리, 마이크로태스크는 상당히 다른 방법으로 처리됩니다.

두 개의 큰 차이가 있습니다.

우선, 매번 태스크가 종료될 때마다 이벤트 루프는 이 태스크가 다른 JavaScript 코드로 통제권을 넘기는지 확인합니다. 그렇지 않은 경우 마이크로태스크 큐의 모든 마이크로태스크를 처리합니다. 곧 마이크로태스크 큐는, 이벤트 처리와 기타 콜백 실행 이후마다, 즉 이벤트 루프의 한 주기에 여러 번 처리됩니다.

두 번째로, 마이크로태스크가 `queueMicrotask()`를 통해 더 많은 마이크로태스크를 큐에 추가하는 경우, 이렇게 새롭게 추가된 마이크로태스크 또한 다음 태스크 실행 전에 모두 실행됩니다. 이벤트 루프는 대기열이 텅 빌 때까지 마이크로태스크를 계속 호출하기 때문입니다.

**경고:** 마이크로태스크 스스로 더 많은 마이크로태스크를 큐에 넣을 수 있으며 큐가 빌 때까지 마이크로태스크 처리는 멈추지 않기 때문에, 이벤트 루프가 끝없는 마이크로태스크 처리 루프에 빠질 현실적인 위험이 있습니다. 재귀적으로 마이크로태스크를 추가할 때 주의하세요.

마이크로태스크 사용하기
------------

여기서 더 나아가기 전에, 대부분의 개발자는 마이크로태스크를 거의, 아마도 전혀, 사용하지 않을 것임을 상기하는 것이 좋습니다. 마이크로태스크는 현대 브라우저 기반 JavaScript 개발에서 고도로 특화된 기능으로서, 사용자 컴퓨터에서 발생할 수많은 것들의 앞에서 다른 것보다 우선해서 실행할 코드를 예약할 수 있는 기능입니다. 이 능력을 남용하면 성능 문제에 빠질 것입니다.

### 마이크로태스크 큐에 넣기

따라서, 마이크로태스크의 사용은 다른 해결책이 전혀 없거나, 프레임워크 또는 라이브러리에서 구현하고자 하는 기능에 필요한 경우에만 사용해야 합니다. 과거에도 마이크로태스크를 큐에 추가하는 우회 방법이 (즉시 이행하는 프로미스 생성처럼) 없지는 않았으나, `queueMicrotask()` 메서드의 추가 덕분에 마이크로태스크를 안전하고 우회 없이 추가할 수 있는 표준 방법이 생겼습니다.

`queueMicrotask()`를 사용하면 프로미스를 사용해 마이크로태스크를 생성할 때 마주치는 문제에서 벗어날 수 있습니다. 예컨대 프로미스 방법에서는 콜백에서 예외가 발생할 경우 표준 예외가 아니라 거부된 프로미스로 나타나곤 했습니다. 또한 프로미스의 생성과 파괴는 시간과 메모리 양쪽에 추가 부하를 줬습니다.

현재 맥락이 마이크로태스크를 처리하는 시점에 호출할 JavaScript `Function`을 `queueMicrotask()` 메서드의 매개변수로 제공하세요. `queueMicrotask()`는 현재 실행 맥락에 따라 `Window` 또는 `Worker` 전역 맥락에 노출되어 있습니다.

```js
queueMicrotask(() => {
  /\* 마이크로태스크에서 실행할 코드 \*/
});
```

마이크로태스크 함수 자체는 매개변수를 받지 않으며 아무것도 반환하지 않습니다.

### 마이크로태스크를 사용해야 할 때

이 구획에서는 마이크로태스크가 특히 유용한 상황을 살펴보겠습니다. 보통 JavaScript 실행 맥락의 주 본문이 종료됐으나 다른 모든 이벤트 처리기, 타임아웃과 인터벌, 기타 콜백이 호출되기 전에 결과를 포착 또는 검증하거나 정리 작업 등을 수행하는 상황입니다.

이게 어떤 때에 유용한 것일까요?

마이크로태스크를 사용하는 주요 이유는 바로 결과나 데이터가 동기적으로 사용 가능하더라도 태스크 순서의 일관성을 유지하고, 동시에 사용자가 인지할 수 있는 수준의 연산 지연을 줄이는 것에 있습니다.

#### 조건적 프로미스 사용에 있어 실행 순서 유지

마이크로태스크를 사용해 실행 순서를 항상 일정하게 유지할 수 있는 상황은 `if...else` 선언문 (또는 다른 조건 선언문) 중 한 절에서만 프로미스를 사용하고, 다른 절에서는 사용하지 않는 것입니다. 다음과 같은 코드를 고려해보겠습니다.

```js
customElement.prototype.getData = (url) => {
  if (this.cache[url]) {
    this.data = this.cache[url];
    this.dispatchEvent(new Event("load"));
  } else {
    fetch(url)
      .then((result) => result.arrayBuffer())
      .then((data) => {
        this.cache[url] = data;
        this.data = data;
        this.dispatchEvent(new Event("load"));
      });
  }
};
```

위 코드에서 발생하는 문제는 `if...else` 선언문의 한 분기(위에서는 이미지가 캐시에 들어있을 때)에서는 태스크를 사용하고, `else` 절에서는 프로미스를 사용하기 때문에 실행 순서가 달라질 수 있다는 점입니다.

```js
element.addEventListener("load", () => console.log("Loaded data"));
console.log("Fetching data...");
element.getData();
console.log("Data fetched");
```

위 코드를 두 번 연속해서 실행하면 다음과 같은 결과가 나타납니다.

데이터가 아직 캐시에 없을 땐,
```

Fetching data...
Data fetched
Loaded data
```

데이터가 캐시에 저장된 후에는,
```

Fetching data...
Loaded data
Data fetched
```

더 나쁜 점은, 이 코드의 실행이 끝난 후 어떤 때에는 요소의 `data` 속성이 설정된 상태고, 다른 때에는 아닐 것이라는 점입니다.

`if` 절에서 마이크로태스크를 사용해 두 절의 균형을 맞춰주는 방법으로 항상 같은 실행 순서를 유지할 수 있습니다.

```js
customElement.prototype.getData = (url) => {
  if (this.cache[url]) {
    queueMicrotask(() => {
      this.data = this.cache[url];
      this.dispatchEvent(new Event("load"));
    });
  } else {
    fetch(url)
      .then((result) => result.arrayBuffer())
      .then((data) => {
        this.cache[url] = data;
        this.data = data;
        this.dispatchEvent(new Event("load"));
      });
  }
};
```

위의 수정된 코드에서는 두 분기 모두 `data` 속성 설정과 `load` 이벤트 발생을 마이크로태스크 안에서 처리하여 서로의 균형을 맞췄습니다. (`if`에서는 `queueMicrotask()`로, `else`에서는 `fetch`의 프로미스로)

#### 계산 배칭

마이크로태스크를 사용하면 다양한 출처로부터의 다수의 요청을 하나의 배치로 묶어서, 같은 유형의 작업을 위한 반복적인 호출로 인해 발생할 수 있는 부하를 피할 수 있습니다.

다음 코드 조각은 다수의 메시지를 배열에 넣고, 마이크로태스크를 사용해서 실행 컨텍스트 종료 시 넣어놨던 모든 메시지를 한 번에 하나의 객체로 전송하는 모습을 보입니다.

```js
const messageQueue = [];

let sendMessage = (message) => {
  messageQueue.push(message);

  if (messageQueue.length === 1) {
    queueMicrotask(() => {
      const json = JSON.stringify(messageQueue);
      messageQueue.length = 0;
      fetch("url-of-receiver", json);
    });
  }
};
```

`sendMessage()`를 호출하면 주어진 메시지는 우선 메시지 큐 배열에 들어갑니다. 그 후에 재밌는 일이 생깁니다.

방금 배열에 추가한 메시지가 첫 메시지라면 `sendMessage()`는 메시지 전송 배치를 예약합니다. 마이크로태스크는 언제나 그렇듯 JavaScript 실행 경로가 콜백을 호출하기 바로 직전인, 최상위 단계에 도달하면 실행됩니다. 따라서 `sendMessage()`의 후속 호출은 메시지들을 메시지 대기열에는 넣겠지만, 마이크로태스크 추가 전에 수행하는 배열 길이 검사로 인해 새로운 마이크로태스크가 큐에 추가되지는 않습니다.

마침내 마이크로태스크 실행 시점이 오면 아마 전송을 기다리는 많은 수의 메시지가 대기 중일 것입니다. 마이크로태스크는 우선 `JSON.stringify()`를 사용해 메시지를 JSON으로 인코딩합니다. 그 후 배열의 콘텐츠는 필요하지 않으므로 `messageQueue` 배열을 비웁니다. 마지막으로 `fetch()` 메서드를 사용해 서버로 JSON 문자열을 전송합니다.

이를 통해 이벤트 루프의 같은 주기 내에서 수행한 `sendMessage()` 다수의 호출은 하나의 `fetch()` 연산에 모이게 되고, 타임아웃과 같은 다른 태스크나, 혹은 통신을 지연시키는 일을 피할 수 있었습니다.

서버는 JSON 문자열을 받은 후 아마 문자열을 디코딩한 결과 배열을 사용해 안의 메시지를 처리할 것입니다.

예제
--

### 간단한 마이크로태스크 예제

다음의 간단한 예제에서는, 큐에 추가한 마이크로태스크의 콜백은 최상위 스크립트의 동작이 끝난 후 실행된다는 것을 보입니다.
```

<pre id="log"></pre>
```

#### JavaScript
```

let logElem = document.getElementById("log");
let log = (s) => (logElem.innerHTML += s + "<br>");
```

이어지는 코드에서 `queueMicrotask()`를 사용해 실행할 마이크로태스크를 예약하는 것을 볼 수 있습니다. 앞뒤로는 `log()` 호출을 배치했는데, 화면에 텍스트를 출력하는 함수입니다.

```js
log("마이크로태스크 추가 전");
queueMicrotask(() => {
  log("마이크로태스크를 실행했습니다.");
});
log("마이크로태스크 추가 후");
```

#### 결과

### 타임아웃과 마이크로태스크 예제

이 예제에서는 0밀리초의 타임아웃("최대한 빠르게")을 예약합니다. 여기서 확인할 수 있는 것은 (`setTimeout()` 등을 사용해) 태스크를 생성할 때의 "최대한 빠르게"와, 마이크로태스크에서의 "최대한 빠르게"는 다르다는 점입니다.
```

<pre id="log"></pre>
```

#### JavaScript
```

let logElem = document.getElementById("log");
let log = (s) => (logElem.innerHTML += s + "<br>");
```

이어지는 코드에서 `queueMicrotask()`를 사용해 실행할 마이크로태스크를 예약하는 것을 볼 수 있습니다. 그 위에서는 타임아웃을 0ms 후 발동하도록 예약합니다. 앞뒤로는 `log()` 호출을 배치했는데, 화면에 텍스트를 출력하는 함수입니다.

```js
let callback = () => log("일반 타임아웃 콜백을 실행했습니다.");

let urgentCallback = () => log("\*\*\* 앗! 긴급 콜백을 실행했습니다!");

log("주 프로그램 시작");
setTimeout(callback, 0);
queueMicrotask(urgentCallback);
log("주 프로그램 종료");
```

#### 결과

결과에 프로그램 본문 코드의 출력이 먼저 나타나고, 그 뒤를 이어 마이크로태스크, 마지막으로 타임아웃 콜백이 출력하는 것에 주목하세요. 주 프로그램의 실행을 맡은 태스크가 종료된 후, 태스크 큐에 올라간 타임아웃 콜백 태스크를 처리하기 전에 마이크로태스크 큐를 우선 처리하기 때문입니다. 태스크와 마이크로태스크 큐가 별도로 관리된다는 것, 그리고 마이크로태스크가 태스크보다 먼저 실행된다는 것을 기억하면 좋습니다.

### 함수에서 추가한 마이크로태스크

이 예제는 이전 예제를 약간 확장해, `queueMicrotask()`로 마이크로태스크를 예약한 후 모종의 계산 작업을 수행하는 함수를 사용합니다. 여기서 확인해야 할 것은 마이크로태스크의 실행 시점이 함수의 종료 순간이 아니고 주 프로그램의 종료 시점이라는 점입니다.
```

<pre id="log"></pre>
```

#### JavaScript
```

let logElem = document.getElementById("log");
let log = (s) => (logElem.innerHTML += s + "<br>");
```

주 프로그램 코드는 다음과 같습니다. `doWork()` 함수가 `queueMicrotask()`를 호출하지만, 태스크가 종료되어 실행 스택에 아무것도 남지 않은 상태가 되는, 즉 전체 프로그램 실행이 종료되기 전까지 이 마이크로태스크는 처리되지 않는 것을 결과에서 볼 수 있습니다.

```js
let callback = () => log("일반 타임아웃 콜백을 실행했습니다.");

let urgentCallback = () => log("\*\*\* 앗! 긴급 콜백을 실행했습니다!");

let doWork = () => {
  let result = 1;

  queueMicrotask(urgentCallback);

  for (let i = 2; i <= 10; i++) {
    result \*= i;
  }
  return result;
};

log("주 프로그램 시작");
setTimeout(callback, 0);
log(`10!은 ${doWork()}과 같습니다.`);
log("주 프로그램 종료");
```

#### 결과

같이 보기
-----

* 심층 탐구: 마이크로태스크와 JavaScript 런타임 환경 (en-US)
* `queueMicrotask()`
* 비동기 JavaScript
    + 일반적인 비동기 프로그래밍 개념
    + 비동기 JavaScript 소개
    + 협조적인 비동기 JavaScript: 타임아웃과 인터벌
    + 프로미스와 함께하는 우아한 비동기 프로그래밍
    + 올바른 접근법 선택하기 (en-US)


DOMTokenList: add() 메서드 - Web API

DOMTokenList: add() 메서드
=======================

`DOMTokenList` (en-US) 인터페이스의 **`add()`** 메서드는 이미 있는 토큰은 생략하면서 목록에 지정된 토큰을 추가합니다.

구문
--

```js
add(token0)
add(token0, token1)
add(token0, token1, /\* … ,\*/ tokenN)
```

### 매개변수

`tokenN`

`DOMTokenList`에 추가할 토큰을 나타내는 문자열입니다.

### 반환 값

없음.

### 예외

`SyntaxError` `DOMException` (en-US)

전달인자 중 하나가 빈 문자열이면 에러를 발생시킵니다.

`InvalidCharacterError` `DOMException` (en-US)

토큰이 ASCII 공백을 포함하면 에러를 발생시킵니다.

예제
--

다음 예제에서 `Element.classList`를 사용하여 `<span>` 요소에 설정된 클래스 목록을 `DOMTokenList`로 찾아냅니다. 그 다음으로 목록에 새로운 토큰을 추가하고 `<span>`의 `Node.textContent`을 활용하여 목록을 작성합니다.

HTML 관련 코드입니다.

```html
<span class="a b c"></span>
```

JavaScript 관련 코드입니다.

```js
const span = document.querySelector("span");
const classes = span.classList;
classes.add("d");
span.textContent = classes;
```

결과는 다음과 같습니다.

여러 토큰을 추가할 수도 있습니다.

```js
span.classList.add("d", "e", "f");
```

명세서
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-add① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


PeriodicWave() - Web API

PeriodicWave()
==============

Web Audio API의 **`PeriodicWave()`** 생성자는 새로운 `PeriodicWave` 객체 인스턴스를 생성합니다.

구문
--

```js
var myWave = new PeriodicWave(context, options);
```

### 매개변수

*`AudioNodeOptions` (en-US) dictionary로부터 매개변수를 상속받습니다*.

`context`

여러분이 노드가 관련되기를 바라는 오디오 컨텍스트를 나타내는 `BaseAudioContext`

`options` Optional

 여러분이 `PeriodicWave`가 가지기를 바라는 속성들을 정의하는 `PeriodicWaveOptions` dictionary 객체 (이것은 또한 PeriodicWaveConstraints
 dictionary에 정의된 옵션들도 상속받습니다.):\* `real`: 여러분이 파동을 형성하기 위해 사용하기를 원하는 코사인 항을 포함하는 `Float32Array` (en-US) (`BaseAudioContext.createPeriodicWave`의 `real` 매개변수와 동일)

* `imag`: 여러분이 파동을 형성하기 위해 사용하기를 원하는 사인 항을 포함하는 `Float32Array` (en-US) (`BaseAudioContext.createPeriodicWave`의 `imag` 매개변수와 동일)

### 반환 값

새로운 `PeriodicWave` 객체 인스턴스.

예제
--

```js
var real = new Float32Array(2);
var imag = new Float32Array(2);
var ac = new AudioContext();

real[0] = 0;
imag[0] = 0;
real[1] = 1;
imag[1] = 0;

var options = {
  real: real,
  imag: imag,
  disableNormalization: false,
};

var wave = new PeriodicWave(ac, options);
```

명세
--

| Specification |
| --- |
| Web Audio API # dom-periodicwave-periodicwave |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


MouseEvent.clientX - Web API

MouseEvent.clientX
==================

`MouseEvent` 인터페이스의 clientX 읽기 전용 속성은 이벤트가 발생한 애플리케이션 viewport 내에 수평 좌표를 제공한다(페이지 내의 좌표와는 반대).

예를 들어 뷰포트의 왼쪽 가장자리를 클릭하면 페이지가 수평으로 스크롤되는지 여부에 관계없이 항상 clientX 값이 0인 마우스 이벤트가 발생한다.

Syntax
------

```js
var x = instanceOfMouseEvent.clientX;
```

### Return value

CSSOM 뷰 모듈에 의해 재정의된 이중 부동 소수점 값. 원래 이 속성은 긴 정수로 정의되었다. 자세한 내용은 "브라우저 호환성" 섹션을 참조하십시오.

Example
-------

이 예에서는 `mousemove (en-US)` 이벤트를 트리거할 때마다 마우스 좌표를 표시한다.

### HTML

```html
<p>위치를 보려면 마우스를 이동하십시오..</p>
<p id="screen-log"></p>
```

### JavaScript

```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### Result

명세서
---

| Specification |
| --- |
| UI Events # dom-mouseevent-clientx |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

참고 항목
-----

* `MouseEvent`
* `clientY` (en-US)
* `screenX` (en-US) / `screenY` (en-US)


RTCIceCandidate.candidate - Web API

RTCIceCandidate.candidate
=========================

`RTCIceCandidate` 인터페이스에 대한 읽기 속성인 **`candidate`** 는 candidate에 대해 자세히 설명해주는 `DOMString`를 반환합니다.

`RTCIceCandidate`의 거의 모든 다른 속성들은 사실 이 문자열에서 가져와진 것입니다.

이 속성은 `RTCIceCandidate()` (en-US)를 사용해서 신규 candidate 객체를 구성 할 때, `candidate` (en-US) 속성의 값을 지정해서 설정 할 수 있습니다.

Syntax
------

```js
var candidate = RTCIceCandidate.candidate;
```

### 값

반환되는 `DOMString` 값은 SDP의 속성인 `"candidate"`에서 직접 가져와진 candidate의 속성에 대해 알려줍니다. candidate 문자열은 해당 candidate에 대한 네트워크 연결 정보를 명시합니다. `candidate`가 빈 문자열 (`""`)이라면, 더 이상 남아있는 candidate가 없다는 뜻입니다. 빈 문자열은 "candidate 종료" 표시자로도 알려져있습니다.

candidate 문자열에 대한 구문은 RFC 5245, 섹션 15.1에 설명되어있습니다.
```

a=candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host
```

위와 같은 a-line (속성 line)에서 해당하는 `candidate` 문자열의 값은 `"candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host"`가 됩니다.

user agent는 항상 가장 높거나 같은 `priority` (en-US)를 가진 candidate를 선호합니다. 위의 예시에서, 우선 순위는 `2043278322` 입니다. 속성은 단일 스페이스로 특정한 순서가 있습니다. 위의 candidate에 대한 전체 속성 리스트는 다음과 같습니다:

* `foundation` (en-US) = 4234997325
* `component` (en-US) = `"rtp"` (`"rtp"`는 1이 문자열에 있고, `"rtcp"`는 2가 문자열에 있습니다.)
* `protocol` (en-US) = `"udp"`
* `priority` (en-US) = 2043278322
* `ip` (en-US) = `"192.168.0.56"`
* `port` (en-US) = 44323
* `type` (en-US) = `"host"`
예시
--

아래 예제에서는 시그널링 과정에서 원격 유저에게서 수신 받은 ICE candidate 정보를 가진 SDP 문자열을 입력으로 받는 함수입니다.

```js
function handleNewIceCandidate(candidateSDP) {
  var candidateObj = new RTCIceCandidate(candidateSDP);

  myPeerConnection.addIceCandidate(candidateObj).catch({
    /\* handle the error thrown by addIceCandidate() \*/
  });
}
```

`handleNewIceCandidate()` 함수는 수신 받은 candidate의 SDP 문자를 `RTCIceCandidate()` (en-US)에 보내고, candidate를 알려주는 `RTCIceCanddiate` 객체를 반환 받습니다.

그 후, 신규 candidatesms `RTCPeerConnection.addIceCandidate()`에 전달되서 candidate의 리스트에 추가해서 WebRTC가 연결 설정으로 사용 하도록 고려합니다.

위 예제는 더 간단하게 표현 될 수 있습니다. ECMAScript 2016의 고급 기능들을 사용해서 아래와 같이 나타낼 수 있습니다:

```js
let handleNewIceCandidate = (candidateSDP) =>
  myPeerConnection.addIceCandidate(new RTCIceCandidate(candidateSDP));
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicecandidate-candidate |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


RTCIceCandidate. toJSON() - Web API

RTCIceCandidate. toJSON()
=========================

`RTCIceCandidate` 메소드인 \*\*`toJSON()`\*\*은 JSON 형식으로 호출된 RTCIceCandidate를 `RTCIceCandidateInit` (en-US) 객체 형식으로 변환합니다. .

Syntax
------

```js
json = RTCIceCandidate.toJSON();
```

### 반환 값

`RTCIceCandidateInit` (en-US) 딕셔너리에 상응하는 객체로, `RTCIceCandidate` 객체의 해당하는 값으로 설정됩니다.

반환된 객체에 대한 문자열화된 버전의 객체는 `stringify()`를 호출해서 가져올 수 있습니다. 아래의 예시를 참조하십시오.

예시
--

아래의 샘플 코드는 `candidate` 변수의 `RTCIceCandidate`를 나타내는 JSON 문자열을 가져옵니다.

```js
var jsonString = candidate.toJSON().stringify();
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicecandidate-tojson |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Crypto.getRandomValues() - Web API

Crypto.getRandomValues()
========================

**`Crypto.getRandomValues()`** 메서드는 암호학적으로 강력한 난수를 생성할 수 있습니다. 매개변수로 제공한 배열을 무작위 (암호학에서의 '무작위') 숫자로 채웁니다.

충분한 성능을 확보하기 위해, API 구현체들은 진정한 난수 생성기 대신 충분한 엔트로피를 지닌 값을 시드로 적용한 의사 난수 생성기(pseudo-random number generator, PRNG)를 사용합니다. 정확한 의사 난수 생성 알고리즘은 사용자 에이전트마다 다를 수 있지만, 암호학적 용도로는 모두 적합할 것입니다.

`getRandomValues()`는 안전하지 않은 연결에서 사용할 수 있는 유일한 `Crypto` 인터페이스 멤버입니다.

구문
--

```js
getRandomValues(typedArray);
```

### 매개변수

`typedArray`

정수형 `TypedArray`입니다. 즉 `Float32Array`와 `Float64Array`를 **제외**한 `Int8Array`, `Uint8Array`, `Uint8ClampedArray`, `Int16Array`, `Uint16Array`, `Int32Array`, `Uint32Array`, `BigInt64Array`, `BigUint64Array` 중 하나여야 합니다. 제공한 배열의 모든 원소는 난수로 덮어쓰입니다.

### 반환 값

`typedArray`로 제공한 배열. 단, 배열의 요소들을 모두 새로 생성한 난수로 덮어쓴 후 반환합니다. `typedArray` 자체를 변경하며, 복사본을 생성하지 않습니다.

### 예외

`QuotaExceededError` `DOMException` (en-US)

`typedArray`의 `byteLength`가 65,536을 초과하면 발생합니다.

사용 일람
-----

`getRandomValues()`를 암호화 키의 생성에 사용하지 마세요. 암호화 키 생성에는 `generateKey()` (en-US) 메서드를 사용해야 합니다. 몇 가지 이유가 있는데, 그중 하나는 안전하지 않은 연결에서도 `getRandomValues()`를 실행할 수 있기 때문입니다.

Web Cryptography 명세는 엔트로피의 하한선을 명시하지는 않고, 사용자 에이전트가 실용적인 선 내에서 최선의 엔트로피를 제공하도록 강하게 권고하고 있습니다. 이를 위해, 명세는 사용자 에이전트가 플랫폼별 난수 생성 기능(Unix `/dev/urandom` 등)을 포함한 고 엔트로피 무작위/의사 무작위 데이터 출처에서 가져온 값을 시드로 사용, 잘 정립되고 효율적인 의사 난수 생성기를 사용해 난수를 생성하도록 추천합니다.

예제
--

```js
const array = new Uint32Array(10);
self.crypto.getRandomValues(array);

console.log("오늘자 행운의 수:");
for (const num of array) {
  console.log(num);
}
```

명세
--

| Specification |
| --- |
| Web Cryptography API # Crypto-method-getRandomValues |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Web Crypto API (en-US)
* `Crypto` 객체를 가져올 수 있는 `crypto` 전역 속성
* 비암호학적 난수 출처인 `Math.random`


Crypto.subtle - Web API

Crypto.subtle
=============

**`Crypto.subtle`** 은 읽기전용 속성이며 암호화 기법을 수행할 수 있는 `SubtleCrypto` (en-US) 객체를 반환합니다.

명세
--

| Specification |
| --- |
| Web Cryptography API # Crypto-attribute-subtle |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Crypto`.
* `SubtleCrypto` (en-US).


요소의 차원 정하기 - Web API

요소의 차원 정하기
==========

엘리먼트의 너비와 높이를 알기 위해 살펴볼 수 있는 여러 속성이 있습니다. 또한, 요구하는 사항에 딱 맞는 것을 고르기 다소 까다로울 수도 있습니다. 이 글은 여러분이 필요에 맞는 속성을 고르는데 도움을 주기 위해 작성했습니다.

### 공간을 얼마나 차지하나요?

표시된 컨텐트의 너비, 스크롤바, 패딩까지 포함해서 엘리먼트가 차지하는 전체 공간을 알고 싶다면, `offsetWidth` (en-US)와 `offsetHeight 속성을 사용하세요:`

![offsetWidth와 offsetHeight는 패딩, 테두리 및 여백 크기를 고려하여 결정됩니다.](/ko/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements/dimensions-offset.png)

### 보이는 컨텐트의 크기는요?

패딩은 포함하되 경계선, 여백, 스크롤바는 포함시키지 않고 보이는 컨텐트가 실제로 차지하는 공간이 알고 싶다면, `clientWidth`와 `clientHeight` 속성을 사용하세요:

![clientWidth와 clientHeight는 패딩, 테두리 및 여백 크기를 고려하여 결정됩니다.](/ko/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements/dimensions-client.png)

### 컨텐트는 얼마나 크나요?

컨텐트의 실제 크기를 알고 싶다면(보여지는 부분만이 아닌 전체 컨텐트 크기), `scrollWidth` (en-US)와 `scrollHeight` 속성을 사용하세요. 이 속성들은 엘리먼트 컨텐트의 전체 크기에 해당하는 너비와 높이를 반환합니다. 보여지는 영역이 작아서 스크롤바를 사용하고 있다해도 관계없습니다.

예를 들어, 600x400 픽셀 크기의 엘리먼트가 300x300 픽셀의 스크롤박스에서 보여진다면 `scrollWidth`는 600을, `scrollHeight`는 400을 각각 반환합니다.

### 참고자료

MSDN: Measuring Element Dimension and Location


Managing screen orientation - Web API

Managing screen orientation
===========================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

Summary
-------

Screen orientation 은 device orientation (en-US) 과는 조금 다르다. 비록 장치가 방향을 감지 못하더라도 화면은 언제나 방향을 가지고 있다. 그리고 만약 장치가 방향을 알 수 있더라도 웹 어플리케이션의 인터페이스를 유지하거나 적응하기 위해 화면의 방향을 조정하는 능력을 갖는게 좋다.

화면의 방향을 다루기 위한 여러 방법이 있는데, CSS 와 JavaScript 이다. 첫 번째는 orientation media query (en-US) 이다. 이것은 내용이 CSS를 사용해서 레이아웃을 조정하게 하는데, 브라우저 창이 가로 모드 (너비가 높이보다 큼) 또는 세로모드 (높이가 너비보다 큼) 여부에 달려 있다.

두번째 방법은 JavaScript Screen orientation API 인데 이것은 화면의 현재 방향을 구하고 잠그는데 사용할 수 있다.

Adjusting layout based on the orientation
-----------------------------------------

방향 변환에서 가장 흔한 케이스 중 하나는 장치의 방향에 따라 내용의 레이아웃을 조정 하는 것이다. 예를 들자면, 당신은 버튼바를 장치 화면의 가장 긴 크기로 펼치고 싶어 할 수 있는데, media query를 이용해서 쉽고 자동으로 할 수 있다.

다음의 HTML code 예제를 보자

```html
<ul id="toolbar">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec
  sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt
  leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut
  interdum tristique dapibus. Nullam quis malesuada est.
</p>
```

CSS 는 화면 방향에 따라 특정 스타일을 을 다루기 위해 orientation media query 에 의존한다

```css
/\* First let's define some common styles \*/

html,
body {
  width: 100%;
  height: 100%;
}

body {
  border: 1px solid black;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

p {
  font: 1em sans-serif;
  margin: 0;
  padding: 0.5em;
}

ul {
  list-style: none;

  font: 1em monospace;
  margin: 0;
  padding: 0.5em;

  -moz-box-sizing: border-box;
  box-sizing: border-box;

  background: black;
}

li {
  display: inline-block;
  margin: 0;
  padding: 0.5em;
  background: white;
}
```

Once we have some common styles we can start defining a special case for the orientation

```css
/\* For portrait, we want the tool bar on top \*/

@media screen and (orientation: portrait) {
  #toolbar {
    width: 100%;
  }
}

/\* For landscape, we want the tool bar stick on the left \*/

@media screen and (orientation: landscape) {
  #toolbar {
    position: fixed;
    width: 2.65em;
    height: 100%;
  }

  p {
    margin-left: 2em;
  }

  li + li {
    margin-top: 0.5em;
  }
}
```

실행 결과를 보자

| Portrait | Landscape |
| --- | --- |
|  |  |

**참고:** orientation media query 는 실제로 브라우저 창 (또는 iframe) 의 방향에 따라 적용한다. 장치의 방향이 아니다.

Locking the screen orientation
------------------------------

**경고:** 이 API 는 실험적이며 현재 Firefox OS 와 Firefox for Android 에서 `moz` 접두사를 이용하여 사용할 수 있다.

몇몇 장치들은 (주로 모바일 장치) 사용자가 언제나 화면을 읽을 수 있게 장치의 방향에 따라 동적으로 화면의 방향을 변화시킬 수 있다. 만약 이러한 행위가 텍스트 컨텐츠에 적합하다면, 이러한 변화 때문에 고통 받을 수 있는 켄텐츠도 있다. 예를 들어, 장치의 방향에 따른 게임들은 이러한 방향전환 때문에 혼란스러울 수 있다.

Screen Orientation API 는 정확히 그러한 변화를 방지하기 위해 만들어졌다.

### Listening orientation change

`orientationchange` 이벤트는 장치가 화면의 방향을 변환할 때와 방향이 `screen.orientation` 속성과 함께 읽혀질 때 마다 불려 진다.

```js
screen.addEventListener("orientationchange", function () {
  console.log("The orientation of the screen is: " + screen.orientation);
});
```

### Preventing orientation change

모든 웹 어플리케이션은 필요에 따라 스크린을 잠굴 수 있다. 화면은 `screen.lockOrientation()` 함수를 사용하여 잠그고 `screen.unlockOrientation()`. 함수로 잠금 해제 한다.

`screen.lockOrientation()` 는 적용 할 잠금의 종류를 정의하는 문자열 (또는 일련의 문자열) 을 수용한다. 수용하는 값들: `portrait-primary`, `portrait-secondary`, `landscape-primary`, `landscape-secondary`, `portrait`, `landscape` (각각의 값들에 대해 좀 더 알려면 `lockOrientation` 를 보라).

```js
screen.lockOrientation("landscape");
```

**참고:** 화면 잠금은 웹 어플리케이션에 따라 다르다. 어플레케이션 A이 가로모드로 잠겨 있고 어플레케이션 B가 세로모드로 잠겨 있을 때, 어플리케이션을 A 에서 B 로 또는 B 에서 A 로 전환하면 `orientationchange` 를 호출하지 않는다. 왜냐하면 각 어플리케이션은 각자의 방향을 유지 하기 때문이다.그러나, 만약 잠금요구를 만족하기 위해 방향이 바뀌어야한다면 화면잠금은 `orientationchange` 이벤트를 호출 할 수 있다.

같이 보기
-----

* `screen.orientation`
* `screen.lockOrientation()`
* `screen.unlockOrientation()`
* `screen.onorientationchange`
* The orientation media query (en-US)
* A short introduction to media queries in Firefox 3.5


Worker.terminate() - Web API

Worker.terminate()
==================

`Worker` 인터페이스의 **`terminate()`** 메서드는 `Worker`를 즉시 종료시킬 때 사용합니다. 이것은 worker가 자신의 작업들을 끝마칠 수 있도록 하는 게 아니라, 바로 종료시키는 것입니다.

구문
--

```js
terminate()
```

### 매개변수

없음.

### 반환 값

없음 (`undefined`).

예시
--

아래의 코드 스니펫은 `Worker()` (en-US) 생성자를 이용하여 `Worker` 객체를 생성하고, 즉시 종료하는 예를 보여줍니다.

```js
const myWorker = new Worker("worker.js");

myWorker.terminate();
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-worker-terminate-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

`Worker` 인터페이스