recursal/MDN huggingface dataset:
HTMLElement: offsetLeft 속성
==========================

**`HTMLElement.offsetLeft`** 읽기 전용 속성은 현재 요소의 왼쪽 상단 모서리가 `HTMLElement.offsetParent` 노드 내에서 왼쪽으로 얼마나 떨어져 있는지를 픽셀 수로 반환합니다.

블록 레벨 요소의 경우 `offsetTop`, `offsetLeft`, `offsetWidth`, `offsetHeight`는 `offsetParent`를 기준으로 요소의 테두리 상자를 설명합니다.

하지만 **span** 같이 한 줄에서 다음 줄로 감싸질 수 있는 인라인 레벨 요소의 경우 `offsetTop`과 `offsetLeft`는 첫 번째 테두리 상자의 위치를 설명하고 (너비와 높이를 가져오기 위해 `Element.getClientRects()` 사용), `offsetWidth`와 `offsetHeight`는 경계 테두리 상자의 치수를 설명합니다 (위치를 가져오기 위해 `Element.getBoundingClientRect()` 사용). 따라서 왼쪽, 위쪽, 너비, 높이가 `offsetLeft`, `offsetTop`, `offsetWidth`, `offsetHeight`인 상자는 텍스트로 감싸진 span의 경계 상자가 되지 않습니다.

값
-

정수입니다.

예제
--


```js
const colorTable = document.getElementById("t1");
const tOLeft = colorTable.offsetLeft;

if (tOLeft > 5) {
  // 큰 왼쪽 오프셋: 여기서 무언가를 하세요.
}
```


이 예제는 파란색 테두리가 있는 div 안에 둘러싸인 'long' 문장과 span의 경계를 설명해야 할 것으로 생각하는 빨간색 상자를 보여줍니다.

![Short span이라고 읽는 문장입니다. 이 텍스트는 완전히 파란색 테두리가 있는 div 안에 있습니다. 이 div 내에서 감싸는 Long span이라고 읽는 문장입니다. "long span that wraps"라는 단어가 빨간색 테두리가 있는 상자 안에 있습니다. "within this div"라는 단어가 파란색 테두리가 있는 div 안에 있습니다.](/ko/docs/Web/API/HTMLElement/offsetLeft/offsetleft.jpg)


```html
<div
 style="width: 300px; border-color:blue; border-style:solid; border-width:1;">
  <span>Short span. </span>
  <span id="longspan">Long span that wraps within this div.</span>
</div>

<div
 id="box"
 style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"></div>

<script>
 const box = document.getElementById("box");
 const longspan = document.getElementById("longspan");
 box.style.left = longspan.offsetLeft + document.body.scrollLeft + "px";
 box.style.top = longspan.offsetTop + document.body.scrollTop + "px";
 box.style.width = longspan.offsetWidth + "px";
 box.style.height = longspan.offsetHeight + "px";
</script>
```

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetleft |

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

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

같이 보기
-----

* `HTMLElement.offsetParent`, `HTMLElement.offsetTop` (en-US), `HTMLElement.offsetWidth` (en-US), `HTMLElement.offsetHeight`
HTMLElement.offsetParent
========================

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

문법
--


```js
parentObj = element.offsetParent;
```


* \_parentObj는 현재 엘리먼트가 그 안에서 offset된 엘리먼트의 객체 참조이다. \_is an object reference to the element in which the current element is offset.
명세
--

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetparent |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLElement: change 이벤트
=======================

`change` 이벤트는 사용자가 `<input>` (en-US), `<select>` (en-US), `<textarea>` (en-US) 요소의 값을 변경할 때 발생합니다. `input` 이벤트와 달리 `change`는 요소의 `value`값이 변경될 때마다 매번 발생하지는 않을 수 있습니다.

값이 바뀐 요소와 사용자가 값을 바꾼 방법에 따라 `change` 이벤트가 발생하는 시점은 달라집니다.

* `<input type="checkbox">` 요소를 클릭하거나 키보드를 사용해서 체크하거나 해제할 때
* `<input type="radio"> (en-US)` 요소가 체크될 때 (해제될 때는 발생하지 않음)
* 사용자가 변경사항을 직접 반영할 때 (`<select>` (en-US)의 드롭다운에서 값을 클릭, `<input type="date">`의 달력에서 날짜 선택, `<input type="file">`의 파일 선택 창에서 파일을 선택할 때 등)
* `<textarea>` (en-US)와 `<input>` (en-US)의 `text (en-US)`, `search (en-US)`, `url (en-US)`, `tel (en-US)`, `email (en-US)`, `password (en-US)` 유형처럼, 사용자 상호작용이 값 선택이 아니라 타이핑인 요소의 값이 바뀐 뒤 포커스를 상실했을 때

HTML 명세서에 `change` 이벤트가 발생해야 하는 `<input>` 유형들이 나열되어 있습니다.

구문
--

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


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

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

이벤트 유형
------

일반 `Event`.

예제
--

### <select> 요소

#### HTML


```html
<label>
  아이스크림 맛을 선택하세요.
  <select class="ice-cream" name="ice-cream">
    <option value="">선택…</option>
    <option value="초콜릿">초콜릿</option>
    <option value="정어리">정어리</option>
    <option value="바닐라">바닐라</option>
  </select>
</label>

<div class="result"></div>
```


```
body {
  display: grid;
  grid-template-areas: "select result";
}

select {
  grid-area: select;
}

.result {
  grid-area: result;
}
```


#### JavaScript


```js
const selectElement = document.querySelector(".ice-cream");

selectElement.addEventListener("change", (event) => {
  const result = document.querySelector(".result");
  result.textContent = `${event.target.value} 맛을 좋아하시는군요`;
});
```


#### 결과

### 텍스트 입력 요소

`<input type="text">`를 포함한 일부 요소들에서는 컨트롤이 포커스를 잃을 때까지 `change` 이벤트가 발생하지 않습니다. 아래 입력 필드에 텍스트를 입력하고, 다른 아무 곳이나 클릭해서 이벤트를 발생시켜보세요.

#### HTML


```html
<input placeholder="아무 텍스트나 입력" name="name" />
<p id="log"></p>
```


#### JavaScript


```js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("change", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}
```


#### 결과

명세서
---

| Specification |
| --- |
| HTML Standard # event-change |
| HTML Standard # handler-onchange |

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

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

어떤 상호작용들은 브라우저마다 `change` 이벤트의 발생 여부가 다를 수도 있습니다. 예를 들어, Gecko에서는 `<select>` (en-US) 요소의 키보드 탐색으로 `change` 이벤트가 발생하지 않았습니다(Firefox 버그 126379). 하지만 Firefox 63 (Quantum) 이후로 이 동작은 모든 주요 브라우저에서 동일합니다.
HTMLElement: lang 속성
====================

**`HTMLElement.lang`** 속성은 요소의 특성 값과 텍스트 내용의 기본 언어를 가져오거나 설정합니다.

이 속성에 의해 반환되는 언어 코드는 RFC 5646: BCP 47로도 알려진 언어 식별용 태그에 정의되어 있습니다. 일반적인 예로 영어의 "en", 일본어의 "ja", 스페인어의 "es" 등을 포함합니다. 이 특성의 기본값은 `unknown`입니다. 이 특성은 여기에 설명된 개별 요소 수준에서 유효하지만 문서의 루트 요소에 지정되는 경우가 가장 많습니다.

또한 `lang` 특성에서만 작동하고 `xml:lang`에서는 작동하지 않습니다.

값
-

문자열입니다.

예제
--


```js
// 이 스니펫은 기본 언어를 비교하고 언어에 기반하여 다른 URL로 리다이렉션합니다.
if (document.documentElement.lang === "en") {
  window.location.href = "Some\_document.html.en";
} else if (document.documentElement.lang === "ru") {
  window.location.href = "Some\_document.html.ru";
}
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-lang |

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

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

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

* `'true'`는 요소가 `contenteditable`임을 의미합니다.
* `'false'`는 요소를 편집할 수 없음을 의미합니다.
* `'inherit'`은 요소가 부모의 편집 가능 여부를 상속함을 의미합니다.

`HTMLElement.isContentEditable` (en-US) 속성으로 이 속성의 `Boolean` 계산값을 얻을 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # contenteditable |

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

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

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

같이 보기
-----

* 콘텐츠를 편집 가능하게 만들기
* `HTMLElement.isContentEditable` (en-US)
* `contenteditable` 전역 속성
Document: drag 이벤트
==================

`drag` 이벤트는 사용자가 요소 또는 텍스트를 드래그하는 동안 매 수백 밀리초마다 발생합니다.

|  |  |
| --- | --- |
| 버블링 | 예 |
| 취소 가능 | 예 |
| 기본 동작 | 드래그 앤 드롭 작업을 지속합니다. |
| 인터페이스 | `DragEvent` (en-US) |
| 이벤트 처리기 속성 | `ondrag` (en-US) |

예제
--

### 드래그 앤 드롭 예제

#### HTML


```html
<div class="dropzone">
  <div id="draggable" draggable="true">드래그 가능</div>
</div>
<div class="dropzone"></div>
```


#### CSS


```css
body {
  /\* 사용자가 예제의 텍스트를 선택하지 못하도록 \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}

.dragging {
  opacity: 0.5;
}
```


#### JavaScript


```js
let dragged;

/\* 드래그 가능한 대상에서 발생하는 이벤트 \*/
document.addEventListener("drag", (event) => {
  console.log("dragging");
});

document.addEventListener("dragstart", (event) => {
  // 드래그한 요소에 대한 참조 저장
  dragged = event.target;
  // 반투명하게 만들기
  event.target.classList.add("dragging");
});

document.addEventListener("dragend", (event) => {
  // 투명도 초기화
  event.target.classList.remove("dragging");
});

/\* 드롭 대상에서 발생하는 이벤트 \*/
document.addEventListener(
  "dragover",
  (event) => {
    // 드롭을 허용하기 위해 기본 동작 취소
    event.preventDefault();
  },
  false,
);

document.addEventListener("dragenter", (event) => {
  // 드래그 가능한 요소가 대상 위로 오면 강조
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

document.addEventListener("dragleave", (event) => {
  // 드래그 가능한 요소가 대상 밖으로 나가면 강조 제거
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});

document.addEventListener("drop", (event) => {
  // 일부 요소의 링크 열기와 같은 기본 동작 취소
  event.preventDefault();
  // 드래그한 요소를 선택한 드롭 대상으로 이동
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }
});
```


#### 결과

명세
--

| Specification |
| --- |
| HTML Standard # ix-handler-ondrag |
| HTML Standard # event-dnd-drag |

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

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

같이 보기
-----

* 다른 드래그 앤 드롭 이벤트:
    + `dragstart`
    + `dragend`
    + `dragover` (en-US)
    + `dragenter` (en-US)
    + `dragleave` (en-US)
    + `drop` (en-US)
* 이 이벤트의 다른 대상:
    + `Window`: `drag` 이벤트
    + `HTMLElement`: `drag` 이벤트
    + `SVGElement` (en-US): `drag` 이벤트
HTMLElement.innerText
=====================

`HTMLElement` 인터페이스의 **`innerText`** 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다. `innerText`는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공합니다.

**참고:** `innerText`는 `Node.textContent`와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 기본적으로, `innerText`는 텍스트의 렌더링 후 모습을 인식할 수 있지만 `textContent`는 그렇지 않습니다.

구문
--


```js
const renderedText = htmlElement.innerText;
htmlElement.innerText = string;
```

### 값

요소의 렌더링 된 텍스트 콘텐츠를 나타내는 `DOMString`. 요소 자체가 렌더링 중이 아니라면 `Node.textContent` 속성의 값과 동일합니다.

예제
--

다음 예제는 `innerText`와 `Node.textContent`를 비교합니다. `innerText`가 `<br>` 태그를 인식하고, 숨겨진 요소를 무시하는 점에 주목하세요.

### HTML


```html
<h3>원본 요소:</h3>
<p id="source">
  <style>
 #source {
 color: red;
 }
 </style>
  아래에서<br />이 글을<br />어떻게 인식하는지 살펴보세요.
  <span style="display:none">숨겨진 글</span>
</p>
<h3>textContent 결과:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
<h3>innerText 결과:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>
```

### JavaScript


```js
const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");

textContentOutput.innerHTML = source.textContent;
innerTextOutput.innerHTML = source.innerText;
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-innertext-idl-attribute |

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

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

같이 보기
-----

* `HTMLElement.outerText`
* `Element.innerHTML`
HTMLElement: offsetHeight 속성
============================

**`HTMLElement.offsetHeight`** 읽기 전용 속성은 수직의 패딩과 테두리를 포함하여 요소의 높이를 정수로 반환합니다.

일반적으로 `offsetHeight`은 테두리, 패딩, 가로 스크롤바(렌더링된 경우)을 포함한 요소의 CSS 높이를 픽셀 단위로 측정한 값입니다. `::before` 혹은 `::after`와 같은 의사 요소의 높이는 포함하지 않습니다. 문서 바디 객체에 대해서는 요소의 CSS 높이 대신 전체 선형 콘텐츠 높이를 측정에 포함합니다. 다른 선형 콘텐츠 아래로 확장하여 부동된 요소는 무시됩니다.

요소가 숨겨져 있다면 (요소 또는 상위 요소 중 하나에서 `style.display`를 `"none"`으로 설정하는 경우), `0`이 반환됩니다.

**참고:** 이 속성은 값을 정수로 반올림합니다. 분수값이 필요하면 `element.getBoundingClientRect()`를 사용합니다.

값
-

숫자입니다.

예제
--

![패딩, 테두리, 바깥 여백이 큰 요소의 예제입니다. offsetHeight은 패딩과 테두리를 포함하고 바깥 여백을 제외한 요소의 레이아웃 높이입니다.](/ko/docs/Web/API/HTMLElement/offsetHeight/dimensions-offset.png)

위의 예제 이미지는 윈도우에 맞는 스크롤바와 `offsetHeight` 보여줍니다. 하지만 스크롤할 수 없는 요소는 보이는 콘텐츠보다 훨씬 큰 `offsetHeight` 값을 가질 수 있습니다. 이러한 요소는 일반적으로 스크롤할 수 있는 요소 안에 포함됩니다. 따라서 스크롤할 수 있는 컨테이너의 `scrollTop` 설정에 따라 이러한 스크롤할 수 없는 요소가 완전히 혹은 부분적으로 보이지 않을 수 있습니다.

명세서
---

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetheight |

### 참고

`offsetHeight`은 MSIE에 의해 처음 소개된 DHTML 객체 모델의 속성입니다. 때로 요소의 물리적/그래픽적 차원 혹은 요소의 테두리 박스 높이라고도 합니다.

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

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

같이 보기
-----

* `Element.clientHeight`
* `Element.scrollHeight`
* `HTMLElement.offsetWidth` (en-US)
* Determining the dimensions of elements
* MSDN Measuring Element Dimension and Location
WebGLRenderingContext: drawArrays() 메서드
=======================================

WebGL API 의 **`WebGLRenderingContext.drawArrays()`** 메서드는 배열 데이터로부터 기본 그래픽 형상을 렌더링합니다.

구문
--


```js
drawArrays(mode, first, count)
```

### 매개변수

`mode`

렌더링할 기본 그래픽 형상의 타입을 지정하는 `GLenum` (en-US) 입니다. 가능한 값은 다음과 같습니다.

* `gl.POINTS`: 한 점을 그립니다.
* `gl.LINE_STRIP`: 다음 정점까지 직선을 그립니다.
* `gl.LINE_LOOP`: 다음 정점까지 직선을 그리고, 마지막 정점을 처음 정점에 연결합니다.
* `gl.LINES`: 정점 쌍 사이에 선을 그립니다.
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: 세 개의 정점 그룹에 대한 삼각형을 그립니다.

`first`

벡터 포인트 배열에서의 시작 인덱스를 지정하는 `GLint` (en-US) 입니다.

`count`

렌더링 될 인덱스의 개수를 지정하는 `GLsizei` (en-US) 입니다.

### 반환 값

없음 (`undefined`).

### 예외

* `mode` 가 허용된 값 중 하나가 아닌 경우,
 `gl.INVALID_ENUM` 오류가 발생합니다.
* `first` 또는 `count` 가 음수인 경우,
 `gl.INVALID_VALUE` 오류가 발생합니다.
* `gl.CURRENT_PROGRAM` 이 `null`인 경우,
 `gl.INVALID_OPERATION` 오류가 발생합니다.
예제
--


```js
gl.drawArrays(gl.POINTS, 0, 8);
```

명세서
---

| Specification |
| --- |
| WebGL Specification # 5.14.11 |

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

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

같이 보기
-----

* `WebGLRenderingContext.drawElements()` (en-US)
* `ext.drawArraysInstancedANGLE()` (en-US)
* `ext.drawElementsInstancedANGLE()` (en-US)
* `ext.vertexAttribDivisorANGLE()` (en-US)
* `WebGL2RenderingContext.drawArraysInstanced()` (en-US)
* `WebGL2RenderingContext.drawElementsInstanced()` (en-US)
* `WebGL2RenderingContext.vertexAttribDivisor()` (en-US)
* `WEBGL_multi_draw.multiDrawArraysWEBGL()` (en-US)
WebGLRenderingContext: bindBuffer() 메서드
=======================================

WebGL API의 **`WebGLRenderingContext.bindBuffer()`** 메서드는 주어진 `WebGLBuffer` (en-US) target에 바인딩합니다.

구문
--


```js
bindBuffer(target, buffer)
```

### 매개변수

`target`

바인딩 포인트(target)을 지정하는 `GLenum` (en-US) 입니다. 가능한 값들은 다음과 같습니다.

`gl.ARRAY_BUFFER`

정점 좌표, 텍스처 좌표 데이터 또는 정점 색상 데이터 등의 정점 속성을 포함하는 버퍼입니다.

`gl.ELEMENT_ARRAY_BUFFER`

요소 인덱스를 위한 버퍼입니다.

WebGL 2 context (en-US) 를 사용하면 추가로 다음의 값들이 가능합니다.

`gl.COPY_READ_BUFFER`

한 버퍼 객체에서 다른 버퍼 객체로 복사하기 위한 버퍼입니다.

`gl.COPY_WRITE_BUFFER`

한 버퍼 객체에서 다른 버퍼 객체로 복사하기 위한 버퍼입니다.

`gl.TRANSFORM_FEEDBACK_BUFFER`

변환 피드백 작업을 위한 버퍼입니다.

`gl.UNIFORM_BUFFER`

유니폼 블록을 저장하기 위한 버퍼입니다.

`gl.PIXEL_PACK_BUFFER`

픽셀 전송 작업을 위한 버퍼입니다.

`gl.PIXEL_UNPACK_BUFFER`

픽셀 전송 작업을 위한 버퍼입니다.


`buffer`

바인딩할 `WebGLBuffer` (en-US) 입니다.

### 반환 값

없음 (`undefined`).

### 예외

주어진 `WebGLBuffer` (en-US)에는 한 target만 바인딩할 수 있습니다. 버퍼를 다른 타겟에 바인딩하려는 시도는 `INVALID_OPERATION` 오류를 던지고 현재 버퍼 바인딩은 유지됩니다.

`deleteBuffer` (en-US)로 삭제로 표시된 `WebGLBuffer` (en-US)는 (재)바인딩할 수 없습니다. 시도할 경우 `INVALID_OPERATION` 오류를 발생시키고, 현재 바인딩은 그대로 유지됩니다.

예제
--

### 버퍼를 타겟에 바인딩하기


```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const buffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY\_BUFFER, buffer);
```

### 현재 바인딩 확인하기

 현재 버퍼 바인딩을 확인하려면,`ARRAY_BUFFER_BINDING`
 과 `ELEMENT_ARRAY_BUFFER_BINDING` 상수를 조회하십시오.


```js
gl.getParameter(gl.ARRAY\_BUFFER\_BINDING);
gl.getParameter(gl.ELEMENT\_ARRAY\_BUFFER\_BINDING);
```

명세서
---

| Specification |
| --- |
| WebGL Specification # 5.14.5 |
| WebGL 2.0 Specification # 3.7.1 |

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

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

같이 보기
-----

* `WebGLRenderingContext.createBuffer()` (en-US)
* `WebGLRenderingContext.deleteBuffer()` (en-US)
* `WebGLRenderingContext.isBuffer()` (en-US)
* Other buffers: `WebGLFramebuffer` (en-US), `WebGLRenderbuffer`
History.state
=============

**`History.state`** 속성은 현 history에 해당하는 state값을 나타냅니다.

`popstate` 이벤트가 트리거될때가 아닌 상태에서 state값을 볼 수 있는 방법입니다.

구문
--


```js
const currentState = history.state;
```

### 값

현 history에 위치한 값입니다. 이 값은 `pushState()` 또는 `replaceState()`을 사용할때까지 `null` 값을 가집니다.

예제
--

`history.state` 로 초기값을 보여준 후 `pushState()`를 사용하여 State를 푸시합니다.

다음 코드 줄은 `history.state` 를 사용하여 콘솔에다 값이 푸시되었음을 보여줍니다.


```js
// Should be null because we haven't modified the history stack yet
console.log(`History.state before pushState: ${history.state}`);

// Now push something on the stack
history.pushState({ name: "Example" }, "pushState example", "page3.html");

// Now state has a value.
console.log(`History.state after pushState: ${history.state}`);
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-history-state-dev |

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

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

같이 보기
-----

* Working with the History API (en-US)
History: pushState() 메서드
========================

HTML 문서에서, **`history.pushState()`** 메서드는 브라우저의 세션 기록 스택에 항목을 추가합니다.

이 메서드는 비동기로 동작합니다. 네비게이션이 언제 완료되었는지 결정하기 위해 `popstate` 이벤트에 대한 수신기를 추가합니다. 이때 `state` 매개변수를 사용할 수 있습니다.

구문
--


```js
pushState(state, unused)
pushState(state, unused, url)
```

### 매개변수

`state`

`state` 객체는 `pushState()`에 의해 생성되어 새로운 기록 항목과 관련된 JavaScript 객체입니다. 사용자가 새로운 `state`로 이동할 때마다 `popstate` 이벤트가 발생되고 이벤트 `state` 속성은 기록 항목의 `state` 객체 복사본을 포함합니다.

`state` 객체는 직렬화될 수 있는 모든 것일 수 있습니다. Firefox는 사용자가 브라우저를 다시 시작한 후 복원될 수 있도록 사용자의 디스크에 `state` 객체를 저장하기 때문에, `state` 객체의 직렬화된 표현에 16MiB의 크기 제한을 적용합니다. 이보다 더 큰 직렬화된 표현 `state` 객체를 `pushState()`에 전달하면 메서드는 예외를 발생시킵니다. 이보다 더 많은 공간이 필요하다면 `sessionStorage` 혹은 `localStorage`를 사용하는 것이 좋습니다.

`unused`

이 매개변수는 역사적인 이유로 존재해서 생략할 수 없습니다. 빈 문자열을 전달하는 것이 나중에 메서드가 변경될 경우에도 안전합니다.

`url` Optional

새로운 기록 항목의 URL입니다. 브라우저는 `pushState()` 호출 후에는 이 URL을 로드하려고 시도하지 않습니다. 하지만, 예를 들어 사용자가 브라우저를 다시 시작한 후에는 나중에 URL을 로드하려고 시도할 수 있습니다. 새로운 URL은 절대 경로일 필요가 없습니다. 상대 경로인 경우 현재 URL을 기준으로 해결됩니다. 새로운 URL은 현재 URL과 같은 출처여야 합니다. 그렇지 않으면, `pushState()`는 예외를 발생시킵니다. 이 매개변수가 지정되지 않으면, 문서의 현재 URL로 설정됩니다.

### 반환 값

없음 (`undefined`).

설명
--

어떤 의미에서 `pushState()`를 호출하는 것은 `window.location = "#foo"`를 설정하는 것과 유사합니다. 둘 다 현재 문서와 연결된 다른 기록 항목을 생성하고 활성화합니다. 그러나 `pushState()`에는 몇 가지 이점이 있습니다.

* 새로운 URL은 현재 URL과 같은 출처에서 모든 URL이 될 수 있습니다. 반면, `window.location` (en-US)을 설정하는 것은 오직 해시를 수정하는 경우에만 동일한 문서를 유지할 수 있습니다.
* 페이지의 URL 변경은 선택 사항입니다. 반면, `window.location = "#foo";`를 설정하는 것은 현재 해시가 `#foo`가 아닌 경우에만 새로운 기록 항목을 생성합니다.
* 임의 데이터를 새로운 기록 항목과 연결할 수 있습니다. 해시 기반 접근에서는 모든 관련 데이터를 짧은 문자열로 인코딩할 필요가 있습니다.

새로운 URL이 오래된 URL과 오직 해시만 다를지라도 `pushState()`는 `hashchange` 이벤트를 발생시키지 않습니다.

예제
--

다음 코드는 상태와 url를 설정하는 새로운 브라우저 기록 항목을 생성합니다.

### JavaScript


```js
const state = { page\_id: 1, user\_id: 5 };
const url = "hello-world.html";

history.pushState(state, "", url);
```

### 쿼리 매개변수 변경


```js
const url = new URL(location);
url.searchParams.set("foo", "bar");
history.pushState({}, "", url);
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-history-pushstate-dev |

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

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

같이 보기
-----

* Working with the History API (en-US)
* Window: popstate event
History.go()
============

**`History.go()`** 메서드는 history 세션에서 특정한 페이지를 로딩합니다. 인자로 전달하는 파라미터 값에 따라 history를 통해서 페이지를 앞 뒤로 이동할 수 있습니다.

이 메서드는 asynchronous(비동기)로 동작합니다. 페이지 앞, 뒤 이동이 언제 이뤄지는지 알려면 `popstate` event에 대한 listener를 등록합니다.

구문
--


```js
history.go([delta]);
```

### Parameters

`delta` Optional

현재 페이지에서 상대적으로 이동하려고 하는 history의 위치 값. 음수 값은 뒤로 이동하고, 양수 값은 앞으로 이동합니다. 예를 들면 `history.go(2)` 는 현재 페이지에서 2 페이지 앞으로 이동하고, `history.go(-2)` 는 현재 페이지에서 2 페이지 뒤로 이동합니다. 만약 값을 전달하지 않거나, `delta` 값을 0으로 전달한다면, 이는 `location.reload()`를 동작시켰을 때와 동일한 결과를 보입니다. (새로고침)

예제
--

한 페이지 뒤로 가기 (`back()`를 호출한 것과 동일):


```js
history.go(-1);
```


`forward()`와 동일한 한 페이지 앞으로 가기:


```js
history.go(1);
```


두 페이지 앞으로 가기:


```js
history.go(2);
```


두 페이지 뒤로 가기:


```js
history.go(-2);
```


마지막으로, 아래 구문들은 현재 페이지를 새로고침 합니다:


```js
history.go();
history.go(0);
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-history-go-dev |

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

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

See also
--------

* `History`
* `back()`
* `forward()`
* `popstate` event
* Working with the History API (en-US)
History.replaceState()
======================

**`History.replaceState()`** 메서드는 현재 history를 수정해 메소드의 매개 변수에 전달 된 `stateObj`, `title`, `URL`로 대체합니다. 이 방법은 특히 일부 유저의 동작에 대한 응답으로 history 객체의 상태나 현재 history의 URL을 업데이트하려는 경우에 유용합니다.

이 메서드는 비동기로 동작합니다. 네비게이션이 언제 완료되었는지 결정하기 위해 `popstate` 이벤트에 대한 수신기를 추가합니다. 이때 `state` 매개변수를 사용할 수 있습니다.

구문
--


```js
history.replaceState(stateObj, title[, url])
```

### Parameters

`stateObj`

state 객체는 `replaceState`에 전달된 history 항목과 연관된 JavaScript 객체입니다. state object는 `null`일 수 있습니다.

`title`

나중에는 사용할 수도 있지만, 대부분의 브라우저는 현재 이 파라미터를 무시하고 있습니다. 이 부분에 빈 String을 전달하면 나중에 메소드가 변화하더라도 안전합니다. 또는, state에 짧은 title을 전달할 수도 있습니다.

`url` Optional

history 항목의 URL 입니다. 새 URL은 현재 URL과 출처가 동일해야(same origin)합니다. 그렇지 않으면 replaceState에서 예외가 발생합니다.

예제
--

`http://www.mozilla.org/` 에서 아래 JavaScript를 실행한다고 가정합시다:


```js
const stateObj = { foo: "bar" };
history.pushState(stateObj, "", "bar.html");
```


위 두 줄에 대한 설명은 Working with the History API (en-US) 문서의 Example of `pushState()` method (en-US)에서 확인할 수 있습니다. 그 다음, `http://www.mozilla.org/bar.html` 에서 아래와 같은 JavaScript를 실행한다고 가정해보세요:


```js
history.replaceState(stateObj, "", "bar2.html");
```


이렇게하면 URL 표시줄에 `http://www.mozilla.org/bar2.html` 이라고 표시되지만, 브라우저가 `bar2.html` 을 로드하거나 `bar2.html`파일이 있는지 확인하지는 않습니다.

이제 사용자가 `http://www.microsoft.com` 으로 이동한 다음, 뒤로가기 버튼을 누른다고 가정해봅시다. 이 때, URL 표시줄에는 `http://www.mozilla.org/bar2.html` 이 표시됩니다. 사용자가 다시 뒤로가기 버튼을 누르면, URL 표시줄에는 `http://www.mozilla.org/foo.html` 이 표시되고, bar.html은 완전히 무시되어 표시되지 않습니다.

명세
--

| Specification |
| --- |
| HTML Standard # dom-history-replacestate-dev |

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

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

**`History.scrollRestoration`** 속성을 사용하면 기록 탐색 시 사용할 스크롤 위치 복원 기능의 기본값을 웹 애플리케이션이 지정할 수 있습니다.

구문
--


```js
let scrollRestore = history.scrollRestoration;
```

### 값

`"auto"`

페이지 내에서 사용자의 스크롤이 위치했던 장소로 복원합니다.

`"manual"`

스크롤을 복원하지 않습니다. 사용자가 직접 스크롤해야 합니다.

예제
--

### 현재 스크롤 복원 여부 알아내기


```js
const scrollRestoration = history.scrollRestoration;
if (scrollRestoration === "manual") {
  console.log(
    "The location on the page is not restored, user will need to scroll manually.",
  );
}
```

### 스크롤 복원 비활성화


```js
if (history.scrollRestoration) {
  window.history.scrollRestoration = "manual";
}
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-history-scroll-restoration-dev |

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

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

**`History.length`** 읽기 전용 속성은 현재 페이지를 포함해, 세션 기록의 길이를 나타내는 정수를 반환합니다. 예를 들어, 새로운 탭에 막 불러온 페이지의 세션 기록 길이는 `1`입니다.

명세
--

| Specification |
| --- |
| HTML Standard # dom-history-length-dev |

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

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

같이 보기
-----

* 속성이 속한 `History` 인터페이스
History.back()
==============

**`History.back()`** 메서드는 브라우저가 세션 기록의 바로 뒤 페이지로 이동하도록 지시합니다. `history.go(-1)`와 같습니다. 이전 페이지가 없는 경우 아무것도 하지 않습니다.

이 메서드는 비동기적입니다. `popstate` 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있습니다.

구문
--


```js
history.back();
```

예제
--

다음 예제는 클릭했을 때 뒤로 가는 버튼을 생성합니다.

### HTML


```html
<button id="go-back">뒤로 가기!</button>
```

### JavaScript


```js
document.getElementById("go-back").addEventListener("click", () => {
  window.history.back();
});
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-history-back-dev |

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

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

같이 보기
-----

* `History`