웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 - 웹 성능

웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가
==============================

사용자는 로드가 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹 경험을 원합니다. 따라서 개발자는 이 두 가지 목표를 달성하기 위해서 부단히 노력해야합니다.

실제 성능 및 체감되는 성능을 향상시키는 방법을 이해하기 위해서 브라우저가 어떻게 동작하는지 이해하는 것이 도움이 됩니다.

개요
--

빠른 사이트는 더 좋은 사용자 경험을 제공합니다. 사용자는 로드가 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹 경험을 원합니다.

웹 성능에 있어서 두 가지 주요한 문제는 지연시간과 브라우저가 대부분 싱글 쓰레드로 동작한다는 점입니다.

빠른 로딩을 하는데 있어서 지연시간은 이겨내야할 중요한 문제입니다. 빠른 로딩을 위해 신경써야할 것에는 최대한 빠르게 요청하는 것(적어도 체감 상 매우 빠른 수준으로 보내기)도 포함됩니다. 네트워크 지연시간은 네트워크를 통해 컴퓨터로 바이트를 전송하는데 걸리는 시간을 의미합니다. 웹 최적화는 페이지 로드가 최대한 빠르게 이루어 질 수 있도록 하는 것입니다.

대부분 브라우저는 싱글 쓰레드입니다. 원활한 상호작용을 위한 개발자의 목표는 부드러운 스크롤부터 매우 기민하게 반응하는 터치에 이르기까지 성능이 뛰어난 상호 작용을 보장하는 것입니다. 메인 쓰레드가 요청된 모든 작업을 수행하면서도 유저와의 상호작용에 반응 할 수 있도록 보장하기 위해서는 렌더링 시간이 가장 중요합니다. 브라우저가 싱글 쓰레드로 동작한다는 점을 이해하고 가능한 메인 쓰레드의 책임을 줄여주는 방식으로 웹 성능 향상을 이룰 수 있습니다. 이렇게 하면 렌더링은 부드럽고 상호작용에 대한 응답은 즉각적일 것입니다.

탐색(Navigation)
--------------

*탐색(Navigation)* 은 웹페이지를 로딩하는 첫 단계입니다. 사용자가 주소창에 URL을 입력하거나, 링크를 클릭하고, 폼(form)을 제출하는 등의 동작을 통해 요청을 보낼 때마다 발생합니다.

웹 최적화의 목표 중 하나는 탐색이 완료될 때까지의 시간을 최소화 하는 것입니다. 이상적인 조건에서 그다지 오래 걸리는 작업이 아니지만 지연시간과 대역폭은 지연을 일으키는 적입니다.

### DNS 조회(DNS Lookup)

웹 페이지를 탐색하는 첫 단계는 해당 페이지의 자원이 어디에 위치하는지 찾는 것입니다. 만약 `https://example.com`를 탐색한다면 HTML 페이지는 IP 주소가 `93.184.216.34`인 서버에 위치하고 있습니다. 만약 이 사이트를 한 번도 방문한 적이 없다면 DNS 조회가 필요합니다.

브라우저는 DNS 조회를 요청합니다. 이는 최종적으로 이름 서버에 의해서 처리되고, IP 주소로 응답합니다. 최초의 요청 이후에, IP는 일정 기간 동안 캐시됩니다. 이름 서버에 다시 연락하는 대신 캐시에서 IP 주소를 검색하여 후속 요청 속도를 높입니다.

DNS 조회는 보통 호스트 이름 하나당 한 번만 수행됩니다. 하지만 DNS 조회는 요청된 페이지에서 참조하는 다른 호스트 이름에 대해서는 각각 수행해야합니다. 만약 글꼴, 이미지, 스크립트, 광고 그리고 다른 자원들이 서로 다른 호스트 이름을 가지고 있다면, DNS 조회는 각각에 대해서 모두 수행되어야 합니다.

![Mobile requests go first to the cell tower, then to a central phone company computer before being sent to the internet](/ko/docs/Web/Performance/How_browsers_work/latency.jpg)

이는 특히 모바일 네트워크 환경에서 성능에 문제가 될 수 있습니다. 사용자가 모바일 환경에 있을 때, 각각의 DNS 조회는 휴대폰에서 셀 타워에 가야하고, 셀 타워에서 권위 있는 DNS 서버에 도달해야합니다. 휴대폰과 셀 타워, 그리고 이름 서버의 거리에 따라서 상당한 지연시간이 생길 수도 있습니다.

### TCP 핸드셰이크(TCP Handshake)

IP 주소를 알고난 후에는, 브라우저는 서버와 TCP 3방향 핸드셰이크를 통해 연결을 설정합니다. 이 방식은 데이터를 전송하기 전에 (주로 HTTPS를 통해서) 통신하려는 두 주체(이 경우에는 브라우저와 웹 서버)가 TCP 소켓 연결을 위한 매개변수를 주고 받을 수 있도록 만들어졌습니다.

TCP의 3방향 핸드셰이크 기술은 "SYN-SYN-ACK" (더 정확히는 SYN, SYN-ACK, ACK)로 불리기도 합니다. 두 컴퓨터 간 TCP 세션을 협상하고 시작하기 위해서 TCP가 3개의 메세지를 전달하기 때문입니다. 이는 요청이 보내지기 전에 3개의 추가적인 메세지가 컴퓨터 사이에 주고받아진다는 의미입니다.

### TLS 협상(TLS Negotiation)

HTTPS를 이용한 보안성있는 연결을 위해서는 또 다른 "핸드셰이크"가 필요합니다. (TLS 협상이라고 할 수 있는) 이 핸드셰이크는 통신 암호화에 쓰일 암호를 결정하고, 서버를 확인하고, 실제 데이터 전송 전에 안전한 연결이 이루어지도록 합니다. 이를 위해서 자원에 대한 실제 요청 전에 클라이언트에서 서버로 3번 더 왕복해야합니다.

![The DNS lookup, the TCP handshake, and 5 steps of the TLS handshake including clienthello, serverhello and certificate, clientkey and finished for both server and client.](/ko/docs/Web/Performance/How_browsers_work/ssl.jpg)

연결에 보안성을 더하는 것은 페이지 로딩을 더디게 합니다. 하지만 보안성있는 연결은 지연시간이라는 비용을 낼만큼 충분히 가치가 있습니다. 브라우저와 웹서버 사이에 전송되는 데이터가 제 3자에 의해서 해독될 수 없게 되기 때문입니다.

8번의 왕복이 있은 후에, 브라우저는 마침내 요청을 할 수 있습니다.

응답(Response)
------------

웹서버로 한 번 연결이 성립되고 나면, 브라우저는 유저 대신에 초기 HTTP `GET` request를 보냅니다. 웹사이트는 대게 HTML 파일을 요청합니다. 서버가 요청을 받으면, 관련 응답 해더와 함께 HTML의 내용을 응답하게 됩니다.

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My simple page</title>
    <link rel="stylesheet" src="styles.css" />
    <script src="myscript.js"></script>
  </head>
  <body>
    <h1 class="heading">My Page</h1>
    <p>A paragraph with a <a href="https://example.com/about">link</a></p>
    <div>
      <img src="myimage.jpg" alt="image description" />
    </div>
    <script src="anotherscript.js"></script>
  </body>
</html>
```

이 초기 요청에 대한 응답은 수신된 첫 바이트 데이터를 포함하고 있습니다. Time to First Byte (TTFB)는 사용자가 (링크를 클릭하는 등의 방식으로) 요청을 보내고 HTML의 첫 패킷을 받는데 걸린 시간입니다. 첫 번째 컨텐츠 청크는 일반적으로 14kb 크기의 데이터입니다.

위 예제에서, 요청은 확실히 14kb보다 작습니다. 하지만 아래에서 설명하는 것처럼 구문 분석되는 중에 브라우저가 링크를 만날 때까지 링크가 걸린 자원들은 요청되지 않습니다.

### TCP 슬로우 스타트 (TCP Slow Start) / 14kb rule

첫 응답 패킷은 14kb입니다. 이는 네트워크 통신의 속도를 조절하는 알고리즘인 TCP 슬로우 스타트에 의해 정해진 것입니다. 슬로우 스타트는 네트워크의 최대 대역폭을 파악할 수 있을 때까지 점진적으로 데이터의 전송량을 증가시킵니다.

TCP 슬로우 스타트 방식에 따라, 첫 패킷을 받고난 이후에 서버는 다음 패킷의 사이즈를 두 배인 28kb로 늘립니다. 뒤 이은 패킷의 크기도 미리 정의한 임계치에 다다르거나, 혼잡의 징후가 나타나기 전까지 2배씩 커집니다.

![TCP slow start](/ko/docs/Web/Performance/How_browsers_work/congestioncontrol.jpg)

첫 페이지의 로딩에 관련해서 14kb 법칙을 들어본적이 있나요? 초기 응답의 크기가 14kb인 이유는 TCP 슬로우 스타트 때문입니다. 그리고 웹 최적화를 할 때 초기 14kb 응답을 염두해야하는 것도 이 때문입니다. TCP 슬로우 스타트는 혼잡을 피하기 위해서 네트워크의 용량에 적당한 전송 속도를 찾고자 점진적으로 속도를 높여나갑니다.

### 혼잡 제어(Congestion control)

서버가 TCP 패킷으로 데이터를 보내면서, 사용자의 클라이언트는 확인 응답(acknowledgements, ACKs)을 보내면서 데이터의 수신을 확인해줍니다. 연결은 하드웨어나 네트워크 상태에 따라서 제한된 용량만을 가지고 있습니다. 만약 서버가 패킷을 너무 빠르게 보내게 되면, 그 패킷들은 무시될 것입니다. 즉 확인 응답이 없을 것입니다. 서버는 이를 누락된 확인 응답으로 파악합니다. 혼잡 제어 알고리즘은 보내진 패킷의 흐름과 확인 응답을 바탕으로 전송 속도를 결정합니다.

구문 분석(Parsing)
--------------

브라우저가 첫 번째 데이터의 청크를 받으면, 수신된 정보를 구문 분석하기 시작합니다. 구문 분석은 브라우저가 네트워크를 통해 받은 데이터를 DOM이나 CSSOM으로 바꾸는 단계입니다. 이는 렌더러가 화면에 페이지를 그리는데 사용됩니다.

브라우저는 마크업을 내부적으로 DOM으로 표현합니다. DOM은 공개되어있고 Javascript의 다양한 API를 통해 조작할 수 있습니다.

요청된 HTML 페이지의 크기가 초기 패킷의 크기인 14kb 보다 크더라도, 브라우저는 구문 분석을 시작하고 가지고 있는 데이터 수준에서 렌더링을 시도합니다. 이것이 웹 성능 최적화에서 브라우저가 페이지를 렌더링 하는데 필요한 모든 것, 아니면 적어도 페이지의 템플릿(첫 렌더링에 필요한 HTML이나 CSS)만이라도 첫 14kb에 포함해야하는 이유입니다. 하지만 화면에 렌더링하기 전에 HTML, CSS, Javascript를 구문 분석해야 합니다.

### DOM 트리 구축(Building the DOM tree)

중요한 렌더링 경로를 다섯 가지 단계로 설명합니다.

첫 단계는 HTML을 처리하여 DOM 트리를 만드는 것입니다. HTML 구문 분석은 토큰화 (en-US)와 트리 생성을 포함합니다. HTML 토큰은 시작 및 종료 태그 그리고 속성 이름 및 값을 포함합니다. 만약 문서가 잘 구성되어 있다면 구문 분석은 명확하고 빠르게 이루어집니다. 구문 분석기는 토큰화된 입력을 분석하여 DOM 트리를 만듭니다.

DOM 트리는 문서의 내용을 설명합니다. html 요소는 시작하는 태그이고 DOM 트리의 루트 노드입니다. 트리는 다른 태그간의 관계와 계층을 반영합니다. 다른 태그에 감싸져 있는 태그는 자식 노드입니다. DOM 노드의 개수가 많아질수록, DOM 트리를 만드는데 더 오랜 시간이 걸립니다.

![The DOM tree for our sample code, showing all the nodes, including text nodes.](/ko/docs/Web/Performance/How_browsers_work/dom.gif)

구문 분석기가 이미지와 같은 논 블로킹 자원을 발견하면, 브라우저는 해당 자원을 요청하고 분석을 계속합니다. 구문 분석은 CSS 파일을 만났을 때도 지속될 수 있습니다. 하지만 `async`나 `defer` 같은 설정이 되어있지 않은 `<script>` 태그는 렌더링을 막고, HTML의 분석을 중지시킵니다. 브라우저의 프리로드 스캐너가 이 작업을 가속화하지만, 과도한 스크립트는 여전히 주요한 병목구간이 될 수 있습니다.

### 프리로드 스캐너(Preload scanner)

브라우저가 DOM 트리를 만드는 프로세스는 메인 쓰레드를 차지합니다. 그렇기 때문에, *프리로드 스캐너* 는 사용 가능한 컨텐츠를 분석하고 CSS나 Javscript, 웹 폰트 같이 우선순위가 높은 자원을 요청합니다. 프리로드 스캐너 덕에 구문 분석기가 외부 자원에 대한 참조를 찾아 요청하기까지 기다리지 않아도 됩니다. 프리로드 스캐너가 자원을 뒤에서 미리 요청합니다. 그래서 구문 분석기가 요청되는 자원에 다다를 때 쯤이면 이미 그 자원들을 전송받고 있거나 이미 전송받은 후일 것입니다. 프리로드 스캐너가 제공하는 최적화는 블록킹을 줄여줍니다.

```html
<link rel="stylesheet" src="styles.css" />
<script src="myscript.js" async></script>
<img src="myimage.jpg" alt="image description" />
<script src="anotherscript.js" async></script>
```

이 예제에서 메인 쓰레드가 HTML과 CSS를 분석하고 있을 때, 프리로드 스캐너는 스크립트와 이미지를 찾아 다운로드하기 시작할 것입니다. Javascript의 분석과 실행 순서가 중요하지 않고 스크립트가 프로세스를 막지 않도록 하려면 `async` 속성이나 `defer` 속성을 추가하세요.

CSS를 다운로드하는 것은 HTML 분석이나 다운로드를 막지 않습니다. 하지만 Javascript의 실행은 막습니다. Javascript는 종종 요소에 영향을 주는 CSS 속성들을 조작하기 떄문입니다.

### CSSOM 구축(Building the CSSOM)

중요한 렌더링 경로에서 두 번째 단계는 CSS를 처리하고 CSSOM 트리를 만드는 것입니다. CSS 객체 모델은 DOM과 비슷합니다. DOM과 CSSOM은 둘 다 트리구조입니다. 둘은 각각의 독립적인 자료구조 입니다. 브라우저는 CSS 규칙을 이해할 수 있고 작업을 진행할 수 있도록 스타일 맵으로 변환합니다. 브라우저는 CSS에 있는 각각의 규칙을 읽고, 트리 노드를 만듭니다. CSS 선택기에 기반해서 부모 노드, 자식 노드, 형제 관계의 노드를 만들어집니다.

HTML이 그러한 것처럼, 브라우저는 전송받은 CSS 규칙을 작업 가능한 상태로 변환해야합니다. 따라서 브라우저는 HTML을 객체로 바꾼 프로세스를 CSS에 대해서 다시 한 번 합니다.

CSSOM 트리는 사용자 에이전트의 스타일 시트를 포함합니다. 브라우저는 노드에 적용 가능한 가장 일반적인 규칙부터 적용합니다. 그리고 재귀적으로 더 구체적으로 적용된 규칙에 따라 계산된 스타일을 수정해갑니다. 다른 말로, 속성 값을 캐스케이드합니다.

CSSOM을 만드는 것은 매우 매우 빠르고 현재 개발자 도구에서 고유한 색으로 표시되지 않습니다. 개발자 도구에서 "스타일 재계산"에는 CSS를 구문 분석하고, CSSOM 트리를 만들고, 계산된 스타일을 재귀적으로 계산하는데 드는 총 시간이 표시됩니다. CSSOM을 만드는데 드는 시간은 일반적으로 한 번의 DNS 조회를 하는 시간보다 짧기 때문에 웹 성능 최적화의 관점에서 CSSOM는 성능 향상에 큰 기여를 할 수 있는 영역은 아닙니다.

### 다른 작업들(Other Processes)

#### Javascript 컴파일(JavaScript Compilation)

CSS가 분석되고 CSSOM이 생성되는 동안, 프리 스캐너 덕에 Javascript 파일 같은 다른 자원도 다운로드 됩니다. Javascript는 해석, 컴파일, 구문 분석 및 실행됩니다. 스크립트는 추상 구문 트리로 구문 분석됩니다. 일부 브라우저 엔진은 추상 구문 트리를 인터프리터에게 넘깁니다. 그 결과 메인 쓰레드에서 실행되는 바이트코드가 생성됩니다. 이것이 Javascript 컴파일 과정입니다.

#### 접근성 트리 구축(Building the Accessibility Tree)

브라우저는 접근성 트리를 만듭니다. 보조 장치는 이 트리를 이용해 내용을 분석하고 해석합니다. 접근성 객체 모델(AOM)은 DOM의 의미 버전입니다. 브라우저는 DOM이 업데이트 될 때 접근성 트리도 업데이트 합니다. 접근성 트리는 보조 기술 자체적으로 수정될 수는 없습니다.

AOM이 만들어지기 전까지, 화면 리더기 (en-US)는 컨텐츠에 접근할 수 없습니다.

렌더(Render)
----------

렌더링 과정에는 스타일, 레이아웃, 페인트 그리고 때때로 합성이 포함됩니다. CSSOM과 DOM 트리는 구문 분석되는 과정에서 생성되고 렌더 트리로 합성됩니다. 렌더 트리는 보이는 요소의 레이아웃을 계산을 합니다. 그러고 나서 요소가 화면에 페인트됩니다. 어떤 경우에는 컨텐츠가 자신만의 레이어를 가지도록 조작되고, 나중에 합성됩니다. 화면의 일부분을 CPU 대신 GPU가 그리면서 메인 쓰레드의 부담이 줄고 성능이 향상됩니다.

### 스타일(Style)

중요한 렌더링 경로에서 세 번째 단계는 DOM과 CSSOM을 합쳐 렌더 트리를 만드는 것입니다. 계산된 스타일 트리(다른 말로 렌더 트리)는 DOM 트리의 루트부터 시작하여 눈에 보이는 노드를 순회하며 만들어집니다.

`<head>`와 그 자식 요소 혹은 사용자 정의 스타일 시트에 정의된 `script { display: none; }` 처럼 `display: none` 스타일 속성을 가진 요소와 같이, 화면에 나타나지 않는 태그의 경우 렌더링 결과에 나타나지 않을 것이기 때문에 렌터 트리에 포함되지 않습니다. `visibility: hidden` 속성을 가진 요소는 자리를 차지하기 때문에 렌더 트리에 포함됩니다. 코드 예시에서 사용자 에이전트가 기본으로 설정한 값을 오버라이드하는 정의를 하지 않았기 때문에, `script` 노드는 렌더 트리에 포함되지 않을 것입니다.

각각의 보이는 노드는 그 노드에 적용된 CSSOM 규칙이 있습니다. 렌더 트리가 보이는 모든 노드의 내용과 계산된 스타일을 가지고 있습니다. DOM 트리에서 보이는 모든 노드에 관련된 스타일을 모두 맞춰보고, CSS 캐스케이드 (en-US) 방식에 따라서 각 노드의 계산된 스타일이 무엇일지 결정합니다.

### 레이아웃(Layout)

중요한 렌더링 과정에서 네 번째 단계는 렌더 트리를 기반으로 각 노드의 도형 값을 계산하기 위해 레이아웃을 실행하는 것입니다. *레이아웃* 은 렌더 트리에 있는 모든 노드의 너비, 높이, 위치를 결정하는 프로세스입니다. 추가로 페이지에서 각 객체의 크기와 위치를 계산합니다. *리플로우* 는 레이아웃 이후에 있는 페이지의 일부분이나 전체 문서에 대한 크기나 위치에 대한 결정입니다.

렌더 트리가 한 번 만들어지고 나면, 레이아웃이 시작됩니다. 렌더 트리는 (보이지 않더라도) 계산된 스타일과 함께 어떤 노드가 화면에 표시될지 식별합니다. 하지만 각 노드의 위치나 좌표를 알지는 못합니다. 각 객체의 정확한 크기와 위치를 결정하기 위해서, 브라우저는 렌더 트리의 루트부터 시작하여 순회합니다.

웹 페이지에서 대부분은 박스 형태입니다. 다른 기기, 다른 데스크탑 설정은 제한 없이 매우 다양한 뷰 포트 크기를 가집니다. 레이아웃 단계에서 뷰 포트의 크기를 고려합니다. 브라우저는 화면에 표시될 모든 다른 상자의 크기를 결정합니다. 뷰 포트의 크기를 기본으로하며, 레이아웃은 일반적으로 본문에서 시작해 모든 후손의 크기를 각 요소의 박스 모델 속성을 통해 계산합니다. 이미지와 같이 크기를 모르는 요소를 위해서 위치 표시 공간을 남겨둡니다.

처음 노드의 사이즈와 위치가 결정되는 것을 *레이아웃* 이라고 부릅니다. 이후에 노드의 크기와 위치를 다시 계산하는 것은 *리플로우* 라고 부릅니다. 예제에서, 첫 레이아웃이 이미지가 오기 전에 일어난다고 가정을 해봅시다. 이미지의 크기를 선언하지 않았기 때문에, 이미지 크기를 알게 된 이후 리플로우가 한 번 있을 것입니다.

### 페인트(Paint)

중요한 렌더링 경로에서 마지막 단계는 각 노드를 화면에 페인팅하는 것입니다. 페인팅이 처음 일어나는 것을 첫 번째 의미있는 페인트라고 부릅니다. 페인팅 혹은 레지스터화 단계에서, 브라우저는 레이아웃 단계에서 계산된 각 박스를 실제 화면의 픽셀로 변환합니다. 페인팅에서 텍스트, 색깔, 경계, 그림자 및 버튼이나 이미지 같은 대체 요소를 포함하여 모든 요소의 시각적인 부분을 화면에 그리는 작업이 포함됩니다. 브라우저는 이 작업을 매우 빠르게 해야합니다.

부드러운 스크롤이나 애니메이션을 위해서, 스타일 계산, 리플로우, 페인팅과 같이 메인 쓰레드를 점유하는 모든 작업은 브라우저를 16.67ms 미만만 차지해야만 합니다. 2048 X 1536 화면에서 iPad는 화면에 페인트해야 할 3,145,000 픽셀을 가지고 있습니다. 이는 매우 많은 픽셀이며, 이 픽셀은 매우 빠르게 페인팅되어야 합니다. 첫 페인팅보다 다시 페인팅하는 것이 더 빠르게 마무리되기 위해서, 화면에 그리는 작업은 일반적으로 몇 개의 레이어로 구분됩니다. 이것이 일어나면 합성이 필요합니다.

페인팅은 레이아웃 트리의 요소를 레이어로 분리할 수 있습니다. 컨텐츠를 CPU의 메인 쓰레드에서 GPU 레이어로 격상하는 것은 페인트 및 리페인트 성능을 높입니다. 레이어를 가동시키는 구체적인 속성과 요소가 있습니다. 요소에는 `<video>` 그리고 `<canvas>`가 포함되어 있습니다. 구체적인 속성에는 `opacity`, 3D `transform`, `will-change` 등이 있습니다. 자손 노드가 위의 이유 중 하나(혹은 여러 개)로 자신만의 레이어를 필요로 하는 것이 아니라면, 이 노드는 그들의 레이어에서 그들의 자손과 함께 그려집니다.

레이어는 성능을 향상시킵니다. 하지만 메모리 관리 측면에서 봤을 때는 비싼 작업입니다. 따라서 웹 성능 최적화 전략으로 과도하게 쓰이지는 않아야 합니다.

### 합성(Compositing)

문서의 각 섹션이 다른 레이어에서 그려질 때, 섹션을 겹쳐놓으면서 그것들이 올바른 순서로 화면에 그려지는 것과 정확한 렌더링을 보장하기 위해 합성이 필요합니다.

페이지가 계속해서 자원을 로드하면, 리플로우가 일어날 수 있습니다(예제에서 이미지가 늦게 도착하는 것을 떠올려보세요). 리플로우는 리페인트와 재합성을 일으킬 수 있습니다. 이미지의 사이즈를 미리 정해놨다면 리플로우는 필요하지 않을 것입니다. 그리고 리페인트 되야할 레이어만 다시 리페인트 하고 필요하다면 합성할 것입니다. 하지만 예제에서는 이미지의 사이즈를 정하지 않았습니다! 이미지가 서버로부터 받아진 후, 렌더링 과정은 레이아웃 단계로 돌아가서 다시 시작됩니다.

상호작용(Interactivity)
-------------------

메인 쓰레드가 페이지를 그리는 것을 완료하면, 모든 것이 준비되었다고 생각할 수도 있습니다. 하지만 꼭 그렇지는 않습니다. 만약 지연된 Javascript를 다운했다면, 그리고 `onload` 이벤트가 발생할 때 코드가 실행된다면, 메인 쓰레드는 여전히 바쁠 것입니다. 그래서 스크롤링, 터치 등 다른 상호작용이 불가능 할 것입니다.

Time to Interactive (TTI) 는 DNS 조회와 SSL 연결이 이루어지는 첫 요청부터 페이지가 상호작용할 준비가 될 때까지 얼마나 걸리는지를 측정하는 단위입니다. 첫 번째 콘텐츠가 포함된 페인트 이후 페이지가 사용자와의 상호작용에 50ms 이내로 응답할 때를 상호작용 가능한 시점으로 봅니다. 만약 메인 쓰레드가 구문 분석, 컴파일, Javascript 실행에 사용되고 있다면, 메인 쓰레드를 사용할 수 없고 따라서 사용자 상호작용에 50ms 이내로 적절하게 반응하지 못합니다.

예제에서, 이미지는 매우 빠르게 로드됩니다. 하지만 만약 `anotherscript.js` 파일이 2MB였고 사용자의 네트워크 연결이 느렸다면 어땠을까요? 이 경우에는 사용자는 페이지는 매우 빠르게 볼 수 있지만 스크립트가 다운로드되고, 분석되고 실행되기 전까지는 버벅이는 스크롤을 할 수 밖에 없을 것입니다. 이는 좋은 사용자 경험이 아닙니다. WebPageTest 예시에서 볼 수 있듯이, 메인 쓰레드를 점유하는 것을 피하세요.

![The main thread is occupied by the downloading, parsing and execution of a javascript file - over a fast connection](/ko/docs/Web/Performance/How_browsers_work/visa_network.png)

이 예시에서, DOM 컨텐츠를 로드하는 프로세스는 1.5초 이상 걸렸습니다. 그리고 클릭이나 화면 탭에 응답하지 못하는 상태로 메인 쓰레드는 그 전체 시간동안 점유되었습니다.

같이 보기
-----

* 웹 성능


중요 렌더링 경로 - 웹 성능

중요 렌더링 경로
=========

중요 렌더링 경로 (*Critical Rendering Path*)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킵니다. 중요 렌더링 경로는 Document Object Model (DOM), CSS Object Model (CSSOM), 렌더 트리 그리고 레이아웃을 포함합니다.

도큐먼트 오브젝트 모델은 HTML을 분석함으로써 만들어집니다. HTML은 Javascript를 요청할 수 있으며, 이 경우 DOM 이 변경될 수 있습니다. HTML은 차례대로 CSS 오브젝트 모델을 만들기 위한 스타일에 대한 요청을 만들거나 포함합니다. 브라우저 엔진은 이 두가지를 결합하여 렌더 트리를 생성하며 레이아웃은 페이지의 모든 것에 대한 크기와 위치를 결정합니다. 일단 레이아웃이 결정되면 화면에 픽셀을 그립니다.

중요 렌더링 경로 최적화는 첫번째 렌더링의 시간을 개선시킵니다. 중요 렌더링 경로를 이해하고, 최적화 하는 것은 뛰어난 사용자 상호작용을 보장하며 버벅거림을 피할 수 있도록 하고, 1초당 60 프레임에 리플로우와 리페인트가 발생할 수 있도록 하는데 중요합니다.

CRP 이해하기
--------

웹 성능은 서버의 요청과 응답, 로딩, 스크립팅, 렌더링, 레이아웃 그리고 화면에 픽셀 그리기를 포함합니다.

웹 페이지 또는 어플리케이션에 대한 요청은 HTML 요청으로 시작됩니다. 서버는 응답 헤더 또는 데이터로 HTML을 반환합니다. 그리고 나서 브라우저는 HTML을 분석하고 수신된 바이츠를 DOM 트리로 변환하기 시작합니다. 브라우저는 스타일시트, 스크립트 또는 포함된 이미지 참조인 외부 자원에 대한 링크를 찾을때마다 요청을 시작합니다. 불러온 에셋을 다룰 때까지 나머지 HTML을 분석하는 작업하는 일부 요청은 중단되며 차단됩니다. 브라우저는 CSS 오브젝트 모델을 구축하는 작업이 끝날때까지 요청을 만들고 DOM을 생성하는 HTML을 계속해서 분석합니다. DOM과 CSSOM이 완료되면 브라우저는 렌더 트리를 생성하고 보여지는 컨텐츠를 위해 스타일을 계산합니다. 렌더트리가 완료된 후 모든 렌더 트리 요소들에 대한 위치와 크기가 정의된 레이아웃이 만들어집니다. 일단 완료되면 페이지는 렌더링되거나 또는 화면에 '그려집니다(*painted*)'.

### Document Object Model

DOM 구성은 점진적으로 증가합니다. HTML 응답은 토큰으로, 토큰은 노드로, 노드는 DOM 트리로 변환됩니다.1개의 DOM 노드는 시작태그 토큰으로 시작해서 끝태그 토큰으로 끝납니다. 노드들은 HTML 요소에 대한 모두 연관성 있는 정보를 포함하고 있습니다. 그 정보는 토큰을 통해 설명됩니다. 노드들은 토큰의 위계서열을 기반으로 DOM 트리안에 연결됩니다. 만약 또 다른 시작태그와 끝태그의 묶음이 한 세트의 시작태그와 끝태그 사이에 있다면, 여러분은 DOM 트리의 위계서열을 정의하는 방법으로 노드 안에 노드를 가지게 됩니다.

많은 수의 노드는 중요 렌더링 경로에서 다음의 이벤트를 더 오래 발생시킬 것입니다. 측정하세요! 몇 개의 추가 노드는 차이를 만들지 않지만 전염은 버벅거림을 유발할 수 있습니다.

### CSS Object Model

DOM은 페이지의 모든 컨텐츠를 포함하고, CSSOM은 DOM을 스타일링 하기 위한 페이지의 모든 스타일 정보를 포함합니다. CSSOM은 DOM과 유사하지만 다릅니다. DOM의 구조는 점진적으로 증가하는 반면에 CSSOM은 그렇지 않습니다. CSS는 렌더링을 막습니다: 브라우저는 모든 CSS를 처리하고 수신할때까지 페이지 렌더링을 막습니다. CSS는 규칙을 덮어쓸수 있기 때문에 렌더링을 막습니다. 그러므로 CSSOM이 완료될때까지 콘텐츠를 렌더링 할 수 없습니다.

CSS는 유효한 토크들은 인식하기 위해 스스로 규칙 세트를 가지고 있습니다. CSS의 C가 'Cascade(종속 또는 폭포)'라는 의미를 기억해두세요. CSS 규칙은 아래로 종속됩니다. 분석기는 토큰을 노드로 변환할때, 하위 노드가 스타일을 상속합니다. 연속적인 규칙들이 이전의 규칙들에 덮어쓰여질 수 있기 때문에, 증감 처리 기술은 HTML 처럼 CSS에 적용되지는 않습니다. CSS 개체 모델은 CSS를 분석할 때 빌드되지만 나중에 분석되 덮어쓸 스타일들은 화면에 렌더링 할 수 없기 때문에 완전히 분석될 때까지 렌더 트리를 생성하는데 사용할 수 없습니다.

선택자 성능 측면에서, 덜 구체적인 선택자는 더 구체적인 선택자보다 더 빠릅니다. 예를 들어, 브라우저가 `.foo` 찾을때, `.foo {}` 는 `.bar .foo {}` 보다 빠릅니다. 왜냐하면 두번째 시나리오에서, `.foo` 가 부모 객체인 `.bar` 를 가지고 있는지 확인하기 위해 DOM을 거슬러 올라가기 때문입니다. 더 구체적인 태그는 브라우저에게 더 많은 작업을 요구하지만 이러한 패널티는 최적화 할 가치가 없습니다.

만약 CSS 분석 시간을 측정한다면, 브라우저들이 정말 빠르다는 것에 놀랄 것입니다. 규칙이 구체적일수록 DOM 트리 안에서 더 많은 노드들은 지나야 하기 때문에 더 높은 비용이 듭니다. 그러나 추가적인 비용은 일반적으로 최소입니다. 첫번째는 측정입니다. 필요할때 최적화하세요. 특정 짓는 것은 쉬운 일이 아닙니다. CSS 측면에서, 선택자 성능 최적화와 개선은 오직 microsecond 밖에 되지 않될 것입니다. 축소화와 미디어 쿼리를 사용함으로써 지연된 CSS를 논-블로킹 요청으로 분리하는 것과 같은 CSS 최적화 (en-US)를 위한 다른 방법이 있습니다.

### Render Tree

렌터 트리는 콘텐츠와 스타일 둘다 캡쳐합니다. DOM과 CSSOM 트리는 렌더 트리에 결합됩니다. 렌더 트리를 구성하기 위해 브라우저는 DOM 트리의 root에서 시작해 모든 노드는 확인하면서 어떤 CSS 규칙들을 첨부할지 결정합니다.

렌더 트리는 오직 보여지는 콘텐츠만 캡쳐합니다. (일반적으로) 헤드 섹션은 보여지는 정보를 포함하고 있지 않으므로 렌더트리 안에 포함되지 않습니다. 만약 요소에 `display: none` 이 적용되어 있다면, 해당 요소 또는 하위 요소는 포함되지 않습니다.

### Layout

일단 렌더 트리가 생성되고 나면, 레이아웃은 가능해지며 화면의 크기에 의존합니다. 레이아웃 단계는 요소들이 페이지에서 배치되는 위치와 방법, 각 요소의 너비와 높이 그리고 서로 관련된 위치를 결정합니다.

요소의 너비는 무엇일까요? 정의에 따르면, 블럭 수준의 요소들은 그 부모 너비의 기본 너비값의 100% 입니다. 50%의 너비를 갖는 요소는 부모 요소의 절반일 것입니다. 비록 그렇게 정의되어 있지 않더라도, `body` 는 뷰포트 너비의 100%를 의미하는 너비 입니다. 디바이스의 너비는 레이아웃에 영향을 미칩니다.

뷰포트 메타 태그는 레이아웃에 영향을 미치는 뷰포트 레이아웃의 너비로 정의합니다. 이 태그 없다면, 브라우저는 뷰포트 기본값을 사용합니다. 브라우저의 full screen 기본값은 일반적으로 960px 입니다. 기본적으로 브라우저의 full screen에서, 스마트폰의 브라우저와 같은 너비는 `<meta name="Viewport" content="width=device-witdh">` 로 세팅함으로써 기본 뷰포트 너비 대신에 디바이스의 너비를 사용합니다. 디바이스 너비는 사용자가 디바이스를 가로(landscape) 또는 세로(portrait) 모드 사이로 돌릴때마다 바뀝니다. 레이아웃은 디바이스가 회전하거나 브라우저의 사이즈가 조정될 때마다 발생합니다.

레이아웃 성능은 DOM의 영향을 받습니다. 노드의 수가 많을수록 레이아웃은 더 길어지며 스크롤링 또는 다른 애니메이션들이 필요하다면 레이아웃에 쟁크(jank)를 일으키는 병목현상이 발생할 수 있습니다. 로딩 또는 방향 전환에 20ms 정도 밀릴 수 있지만 애니메이션 또는 스크롤에 쟁크(jank) 유발할 수 있습니다. 노드에 박스 모델 업데이트, 콘텐츠 대체 그리고 노드 추가와 같은 수정은 언제든지 렌더 트리를 수정할 수 있으며 레이아웃을 형성합니다.

레이아웃 이벤트의 반복과 형성시간을 줄이기 위해서 일괄 업데이트 해야하고, 박스 모델 속성을 애니메이션화 하지 말아야 합니다.

### Paint

마지막 단계는 화면에 픽셀을 그리는 것입니다. 일단 렌더 트리가 생성되고 레이아웃이 나타나기 시작하면, 화면에 픽셀을 그릴수 있습니다. 로드시, 전체 화면을 그립니다. 그 후에는 브라우저가 필요한 최소 영역만을 다시 그리도록 최적화되어 있기 때문에 영향을 받는 영역만을 화면에 다시 그립니다. 그리는 시간은 렌더 트리에 적용되는 업데이트의 종류가 무엇있냐에 따라 달라집니다. 페인팅은 매우 빠르게 진행되는 과정이기 때문에 성능 향상에 집중해야 하는 가장 큰 영향있는 부분이 아닐 수 있지만, 애니메이션 프레임 소요시간을 측정할때, 레이아웃과 리페인트 시간을 모두 고려하는 것이 중요합니다. 각 노드에 적용된 스타일은 페인트 시간을 증가시키지만 페인트 시간을 0.001ms 증가시키는 스타일을 제거하는 것은 여러분의 최적화 비용이 매우 커지는 것을 막지 못할 수 있습니다. 첫째는 측정하는 것을 기억하고, 최적화 우선순위를 정해야할지 말지를 결정해야 합니다.

Optimizing for CRP
------------------

자원 로드 순서를 관리하고, 파일 사이즈를 줄이며 어떤 자원을 먼저 로드할지 정함으로써 페이지 로드 속도를 개선하세요. 성능 팁으로는 1) 자원 다운로드를 연기함으로써 중요 자원들의 수를 최소화하기 , 2) 각 요청에 대한 파일 사이즈에 따라 필수적인 요청 횟수 최적하하기, 3) 다운받을 중요 에셋의 우선순위를 정함으로써 중요 자원 불러오는 순서 최적화하고, 중요 경로 길이 최소화하기


대기 시간(Latency) 이해하기 - 웹 성능

대기 시간(Latency) 이해하기
===================

**대기 시간(Latency)** 이란 하나의 데이터 패킷이 출발지에서 도착지까지 가는 데 걸리는 시간을 뜻합니다. 성능 최적화에 있어서 대기 시간의 원인을 줄이는 것과 연결 상태가 좋지 않은 사용자를 고려하여 대기 시간이 긴 환경에서 사이트 성능을 테스트하는 것은 중요합니다. 이 글에서 대기 시간이 무엇인지, 대기 시간이 성능에 어떤 영향을 주는지, 이를 어떻게 측정하고 어떤 방법으로 줄일 수 있을지에 관해 설명합니다.

대기 시간이란?
--------

대기 시간이란 일반적으로 사용자가 요청을 한 시점부터 해당 사용자에게 요청에 대한 응답을 받기까지 걸리는 시간을 말합니다. 첫 번째 요청에서 14KB 만큼의 DNS 조회, TCP handshake, 보안 TLS 협상 등의 과정을 거치기 때문에 대기 시간이 깁니다. 이후의 후속 요청은 서버에 대한 연결이 이미 설정되어 있으므로 대기 시간이 줄어듭니다.

대기 시간은 네트워크나 인터넷 연결의 지연 시간을 나타냅니다. 대기 시간이 짧다는 것은 지연이 없거나 거의 없음을 의미합니다. 대기 시간이 길다는 것은 지연이 많다는 것을 의미합니다. 성능 향상의 주요 목표 중 하나는 대기 시간을 줄이는 것입니다.

기본적인 HTML 페이지와 같이 한 개의 자원에 대한 대기 시간은 사소해 보일 수 있습니다. 하지만 웹사이트는 일반적으로 여러 개의 요청을 포함합니다. HTML은 여러 개의 CSS, 스크립트, 미디어 파일에 대한 요청으로 이루어져 있기 때문입니다. 이런 요청의 개수와 크기가 커질수록 높은 대기 시간이 사용자 경험에 미치는 영향 또한 커집니다.

대기 시간이 짧은 연결에서는 요청된 자원이 거의 즉시 보입니다. 대기 시간이 긴 연결에서는 요청을 보낸 시점과 자원을 받은 시점 사이에 눈에 띄는 지연이 있습니다. 대기 시간은 데이터가 네트워크의 한 지점에서 다른 지점으로 이동하는 속도를 측정하여 얻을 수 있습니다.

대기 시간은 한 가지 방법으로 측정할 수 있는데, 예를 들면 자원에 대한 요청을 보내는 데 걸리는 시간 혹은 자원에 대한 브라우저의 요청이 다시 브라우저로 돌아오기까지 왕복 시간을 측정합니다.

네트워크 스로틀링
---------

개발자 도구를 사용하여 저대역폭 네트워크 연결로 전환하면 저대역폭 네트워크의 대기 시간을 모방할 수 있습니다.

![스로틀링을 모방하여 대기 시간을 모방하기](/ko/docs/Web/Performance/Understanding_latency/emulate_latency.png)

개발자 도구에서 network 테이블의 스로틀링 옵션을 통해 2G, 3G 혹은 다른 대역폭으로 전환할 수 있습니다. 다양한 브라우저의 개발자 도구에는 서로 다른 사전 설정 옵션이 있으며, 모방되는 특성에는 다운로드 속도, 업로드 속도, 최소 대기 시간 또는 데이터 패킷을 보내는 데 필요한 최소 타입이 포함됩니다. 일부 사전 설정의 대략적인 값은 다음과 같습니다.

| 선택 | 다운로드 속도 | 업로드 속도 | 최소 대기 시간 (ms) |
| --- | --- | --- | --- |
| GPRS | 50 Kbps | 20 Kbps | 500 |
| 일반적인 2G | 250 Kbps | 50 Kbps | 300 |
| 좋은 2G | 450 Kbps | 150 Kbps | 150 |
| 일반적인 3G | 750 Kbps | 250 Kbps | 100 |
| 좋은 3G | 1.5 Mbps | 750 Kbps | 40 |
| 일반적인 4G/LTE | 4 Mbps | 3 Mbps | 20 |
| DSL | 2 Mbps | 1 Mbps | 5 |
| Wi-Fi | 30 Mbps | 15 Mbps | 2 |

네트워크 시간 측정
----------

네트워크 탭에서 각 요청이 완료되는데 소요된 시간도 확인할 수 있습니다. 아래 사진처럼 크기가 267.5Kb인 SVG 이미지를 다운로드 받는 데 얼마나 걸렸는지 볼 수 있습니다.

![크기가 큰 SVG 이미지를 로드하는데 걸린 시간](/ko/docs/Web/Performance/Understanding_latency/latencymlw.png)

요청이 대기열에 있으면 네트워크 연결을 기다리는 동안 **blocked(차단)** 된 것으로 간주합니다. 차단은 하나의 서버에 동시에 너무 많은 HTTP 연결을 맺으려 할 때 발생합니다. 모든 연결이 사용 중이면 브라우저는 다른 연결이 해제될 때까지 자원을 다운로드하지 못하는데 이를 두고 요청과 자원이 차단되었다고 말합니다.

**DNS resolution** 항목은 DNS lookup 을 수행하는 데 걸린 시간을 뜻합니다. hostname 의 개수가 많을수록 DNS lookup 의 수행 횟수 또한 늘어납니다.

**Connecting** 항목은 TCP handshake 을 완료하는 데 걸린 시간을 뜻합니다. 위의 DNS처럼 필요로 하는 서버 연결의 개수가 많을수록 서버와의 연결을 생성하는데 걸리는 시간 또한 늘어납니다.

**TLS handshake** 항목은 보안 연결을 수립하는 데 걸린 시간을 뜻합니다. 물론 TLS handshake 는 안전하지 않은 연결보다 연결하는데 오래 걸리지만 그만큼의 시간은 안전한 연결을 위해 투자할 가치가 있습니다.

**Sending** 항목은 HTTP 요청을 서버로 전송하는데 걸린 시간을 뜻합니다.

**Waiting** 항목은 디스크 대기 시간으로, 서버가 응답을 완료하는데 걸린 시간을 뜻합니다. 디스크 대기 시간은 성능 문제의 주요 원인이었지만 컴퓨터 메모리와 CPU의 발전에 따라 서버의 성능 또한 개선되었습니다. 서버가 수행해야 하는 일의 복잡도에 따라 이 항목은 여전히 문제가 될 수도 있습니다.

**Receiving** 항목은 자원을 다운로드 받는 데 걸린 시간을 뜻합니다. Receiving 시간은 네트워크 용량과 자원 파일의 크기에 따라 결정됩니다. 이미지가 캐싱되었다면 즉각적으로 완료되었을 수 있고, 스로틀링이 걸렸다면 43초가 걸렸을 수도 있습니다!

대기 시간 측정
--------

**Network latency** 란 데이터 요청이 요청을 작성하는 컴퓨터에서 응답하는 컴퓨터에 도달하는 데 걸리는 시간을 말합니다. 이는 데이터가 응답하는 컴퓨터에서 요청한 컴퓨터로 다시 돌아오는 시간을 포함합니다. 일반적으로 왕복 지연으로 측정됩니다.

**Disk latency** 란 컴퓨터(일반적으로 서버)가 요청을 수신한 시점부터 응답을 반환하기까지 걸린 시간을 말합니다.


Axes - XPath

Axes
====

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축
 XPath 명세에는 축이 13가지가 있습니다. 축은 문맥 노드와의 관계를 나타내고 트리 위에 문맥 노드에 대응하여 노드를 위치시킬 때 씁니다. 다음은 이용가능한 축 13가지와 Gecko에서 가능한 지원 정도에 대한 매우 짧은 설명입니다.
XPath 식 사용에 관한 추가 정보는, Transforming XML with XSLT 문서 끝 For Further Reading 절을 보세요.

ancestor

부모 노드부터 시작하여 루트 노드까지 항해하는 문맥 노드의 모든 조상을 나타냅니다.

ancestor-or-self

문맥 노드와 루트 노드를 포함하는 문맥 노드의 조상 모두를 나타냅니다.

attribute

문맥 노드의 속성을 나타냅니다. 오직 요소만 속성이 있습니다. 이 축은 at sign(`@`)으로 줄여 쓸 수 있습니다.

child

문맥 노드의 자식을 나타냅니다. XPath 식이 축을 지정하지 않으면 기본값으로 이해합니다. 오직 루트 노드나 요소 노드만 자식이 있기 때문에, 다른 경우에는 아무것도 선택하지 않습니다.

descendant

문맥 노드의 모든 자식과 자식의 자식 따위를 나타냅니다. 속성과 이름공간 노드는 포함하지 **않습니다**. `속성` 노드의 `parent` 축이 요소 노드이지만 `속성` 노드는 그 부모의 자식이 아닙니다.

descendant-or-self

문맥 노드와 문맥 노드의 모든 자손을 나타냅니다. 속성과 이름공간 노드는 포함하지 **않습니다**. `속성` 노드의 `parent` 축이 요소 노드이지만 `속성` 노드는 그 부모의 자식이 아닙니다.

following

`자손`, `속성`, `이름공간` 노드를 제외한 문맥 노드 다음에 나오는 모든 노드를 나타냅니다.

following-sibling

문맥 노드와 부모가 같고 소스 문서에서 문맥 노드 다음에 보이는 모든 노드를 나타냅니다.

namespace
*(지원 안 함)*

문맥 노드 범위(scope) 안에 있는 모든 노드를 나타냅니다. 이 경우에, 문맥 노드는 요소 노드이어야 합니다.

parent

문맥 노드의 부모 노드만을 나타냅니다. 마침표 둘(`..`)로 줄여 쓸 수 있습니다.

preceding

`조상`, `속성`, `이름공간` 노드를 제외한 문서 안에서 문맥 노드를 앞선 모든 노드를 나타냅니다.

preceding-sibling

문맥 노드와 부모가 같고 소스 문서에서 문맥 노드 앞에 나오는 모든 노드를 나타냅니다.

self

문맥 노드 자신를 나타냅니다. 마침표 하나(`.`)로 줄여 쓸 수 있습니다.


Introduction to using XPath in JavaScript - XPath

Introduction to using XPath in JavaScript
=========================================

이 문서는 JavaScript 안, 확장기능, 웹사이트에서 XPath를 사용하기 위한 인터페이스를 설명합니다. Mozilla는 DOM 3 XPath를 상당량 구현합니다. 이것은 XPath 식이 HTML과 XML 문서 모두에서 잘 돌아간다는 것을 뜻합니다.

XPath를 사용하는 주 인터페이스는 document 개체의 evaluate 함수입니다.

document.evaluate
-----------------

이 메소드는 XML에 기반을 둔 문서(HTML 문서 포함)에 대해 XPath 식을 평가하고 단일 노드나 노드 집합일 수 있는 `XPathResult` 개체를 반환합니다. 이 메소드를 다루는 기존 문서는 여기에 있지만 당장 우리 필요에 좀 부족하여, 더 이해가 빠른 설명을 아래에 제공합니다.
```

var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
```

### 매개변수

evaluate 함수는 매개변수를 총 5개 취합니다.

* `xpathExpression`: 평가할 XPath 식을 포함하는 문자열

* `contextNode`: `xpathExpression`이 평가될 모든 자식 노드를 포함하는 문서의 노드. document 노드가 가장 흔히 쓰입니다.

* `namespaceResolver`: 그 접두사와 관련된 namespace URI를 나타내는 문자열을 반환하는 `xpathExpression` 내에 포함되는 모든 namespace 접두사를 넘겨주는 함수. 이는 XPath 식에 쓰(이)는 접두사와 문서에 쓰(이)는 아마도 다른 접두사 사이에 변환을 가능하게 합니다. 함수는 어느 한쪽일 수 있습니다.
    + `XPathEvaluator` 개체의 `createNSResolver` 메소드를 써서 만듭니다. 항상 가상으로 이를 쓰면 좋습니다.
    + HTML 문서를 위해서나 namespace 접두사가 없을 때 쓸 수 있는 `null`. 만약 `xpathExpression`가 namespace 접두사를 포함하면 이는 `NAMESPACE_ERR` 코드를 내는 `DOMException`을 가져옴을 유의하세요.
    + 사용자 정의 맞춤(custom) 함수. 세부 내용은 부록의 사용자 정의 Namespace Resolver 쓰기 절을 보세요.
* `resultType`: 평가 결과로 반환되기 바랐던 결과 형을 지정하는 상수. 가장 흔히 넘겨주는 상수는 가장 자연스러운 형으로 XPath 식의 결과를 반환하는 `XPathResult.ANY_TYPE`입니다. 부록에 쓸 수 있는 상수 목록 전체를 포함하는 절이 있습니다. 아래 반환형 지정 절에서 설명합니다.
* `result`: 결과를 반환하는 데 재사용하는 기존 `XPathResult` 개체나 새 `XPathResult` 개체를 만드는 데 쓸 수 있는 `null` 가운데 하나.
### 반환값

`resultType` 매개변수에서 지정한 형의 `XPathResult` 개체인 `xpathResult`를 반환합니다. `XPathResult` 인터페이스는 여기에서 정의됩니다.

### Default Namespace Resolver 구현

우리는 document 개체의 `createNSResolver` 메소드를 써서 namespace resolver를 만듭니다.
```

var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
```

Or alternatively by using the `createNSResolver` method of a `XPathEvaluator` object.

```js
var xpEvaluator = new XPathEvaluator();
var nsResolver = xpEvaluator.createNSResolver(
  contextNode.ownerDocument == null
    ? contextNode.documentElement
    : contextNode.ownerDocument.documentElement,
);
```

그리고 나서 `document.evaluate` 함수에 `namespaceResolver` 매개변수로 `nsResolver` 변수를 넘겨줍니다.

XPath는 null namespace의 단 하나 뿐인 요소와 일치하는 접두사 없는 `QNames`을 정의함을 유의하세요. XPath에는 기본 namespace를 얻는 방법이 없습니다. null이 아닌 namespace의 요소나 속성을 일치시키려면, 접두사 붙은 이름 검사를 쓰고 접두사를 namespace에 매핑하는 namespace resolver를 만들어야 합니다. 아래 사용자 정의 namespace resolver 만드는 법을 더 읽으세요.

### 반환형 지정

`document.evaluate`로부터 반환하는 변수 `xpathResult`는 개별 노드 (단순 형)나 노드 모음(collection) (node-set 형) 가운데 하나로 구성할 수 있습니다.

#### 단순 형

`resultType`으로 바랐던 결과형을 어느 한쪽으로 지정할 때,

* `NUMBER_TYPE` - a double
* `STRING_TYPE` - a string
* `BOOLEAN_TYPE` - a boolean

우리는 `XPathResult` 개체의 다음 속성에 각각 접근하여 식의 반환값을 얻습니다.

* `numberValue`
* `stringValue`
* `booleanValue`

##### 예

다음은 HTML 문서의 `<p>` 요소수를 얻기 위해 XPath 식 `count(//p)`을 씁니다.
```

var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );

alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' );
```

비록 Javascript가 표시를 위해 숫자를 문자열로 변환하는 것을 허용하더라도, `stringValue` 속성(property)을 요청하면 XPath 인터페이스는 자동으로 숫자 결과로 변환하지 않습니다. 그래서 다음 코드는 작동하지 않습니다.
```

var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );

alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' );
```

대신 `NS_DOM_TYPE_ERROR` 코드를 갖는 예외(exception)를 반환합니다.

#### Node-Set 형

`XPathResult` 개체는 주요한 3가지 서로 다른 형으로 반환될 node-set을 허용합니다.

* Iterators
* Snapshots
* First Nodes

##### 반복자(훑개)

`resultType` 매개변수로 지정한 결과형이 어느 한쪽일 때,

* `UNORDERED_NODE_ITERATOR_TYPE`
* `ORDERED_NODE_ITERATOR_TYPE`

반환되는 `XPathResult` 개체는 일치하는 노드(`XPathResult`의 `iterateNext()` 메소드를 써서 포함될 개별 노드에 접근함을 허용하는 반복자로 행동할)의 노드 집합입니다.

우리가 모든 일치하는 개별 노드에 반복하고 나면, `iterateNext()`는 `null`을 반환합니다.

그러나 주의하세요, 만약 반복 도중에 문서가 바뀌면 (문서 tree가 변경됨) 그것은 반복을 무효로 만들고(invalidate) `XPathResult`의 `invalidIteratorState` 속성을 `true`로 지정하고 `NS_ERROR_DOM_INVALID_STATE_ERR` 예외를 냅니다.

###### 반복자 예

```js
var iterator = document.evaluate(
  "//phoneNumber",
  documentNode,
  null,
  XPathResult.UNORDERED\_NODE\_ITERATOR\_TYPE,
  null,
);

try {
  var thisNode = iterator.iterateNext();

  while (thisNode) {
    alert(thisNode.textContent);
    thisNode = iterator.iterateNext();
  }
} catch (e) {
  dump("Error: Document tree modified during iteraton " + e);
}
```

##### Snapshots

`resultType` 매개변수로 지정한 결과형이 어느 한쪽일 때,

* `UNORDERED_NODE_SNAPSHOT_TYPE`
* `ORDERED_NODE_SNAPSHOT_TYPE`

반환되는 `XPathResult` 개체는 일치하는 노드의 static node-set이고, 그것은 `itemNumber`가 검색(retrieve)되는 노드의 index인 `XPathResult` 개체의 `snapshotItem(itemNumber)` 메소드를 통해 각 노드에 접근을 허용합니다. 포함되는 노드의 총수는 `snapshotLength` 속성을 통해 입수할 수 있습니다.

Snapshot은 변환 문서로 바꾸지 않습니다. 그래서 반복자와는 달리 snapshot은 무효로 만들지는 않지만 현재 문서와 들어맞지 않을지도 모릅니다, 예를 들어 노드가 이동됐을지도 모르고, 더 이상 존재하지 않는 노드나 추가될 수 있는 새 노드를 포함할지도 모릅니다.

###### Snapshot 예

```js
var nodesSnapshot = document.evaluate(
  "//phoneNumber",
  documentNode,
  null,
  XPathResult.ORDERED\_NODE\_SNAPSHOT\_TYPE,
  null,
);

for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
  dump(nodesSnapshot.snapshotItem(i).textContent);
}
```

##### First Node

`resultType` 매개변수로 지정한 결과형이 어느 한쪽일 때,

* `ANY_UNORDERED_NODE_TYPE`
* `FIRST_ORDERED_NODE_TYPE`

반환되는 `XPathResult` 개체는 XPath 식과 일치하는 오직 처음 발견한 노드입니다. 이는 `XPathResult` 개체의 `singleNodeValue` 속성을 통해 접근할 수 있습니다. 이는 노드 집합이 비면 `null`입니다.

순서 없는 subtype인 경우 반환되는 단일 노드가 문서 순으로 처음이 아닐지도 모르지만 순서 있는 subtype인 경우 문서 순으로 처음 일치하는 노드임을 보장함을 유의하세요.

###### First Node 예

```js
var firstPhoneNumber = document.evaluate(
  "//phoneNumber",
  documentNode,
  null,
  XPathResult.FIRST\_ORDERED\_NODE\_TYPE,
  null,
);

dump(
  "The first phone number found is " +
    firstPhoneNumber.singleNodeValue.textContent,
);
```

#### ANY\_TYPE 상수

`resultType` 매개변수에 결과형을 `ANY_TYPE`으로 지정할 때, 반환되는 `XPathResult` 개체는, 식 평가에서 자연스럽게 생긴 어떤 형입니다.

단순 형( `NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE` ) 가운데 하나일 수도 있습니다, 하지만, 만약 반환되는 결과형이 node-set이면 오직 `UNORDERED_NODE_ITERATOR_TYPE`입니다.

평가 뒤 형을 결정하기 위해서, 우리는 `XPathResult` 개체의 `resultType` 속성을 씁니다. 이 속성의 상수값은 부록에서 정의합니다.

None Yet =====Any\_Type 예=====

예
-

### HTML 문서 안에서

다음 코드는 XPath 식이 평가될 HTML 문서 안에서나 문서에 연결(link)된 어떤 JavaScript 조각(fragment)에 놓을 셈입니다.

XPath를 써서 HTML의 모든 `<h2>` heading 요소를 뽑아내면(extract), `xpathExpression` 문자열은 간단히 '`//h2`'입니다. 어떤 점에서, `//`는 요소 트리 어디에서나 노드명 `h2`와 요소를 일치시키는 재귀 내림 연산자(Recursive Descent Operator)입니다. 이를 위한 자세한 코드입니다. link to introductory xpath doc
```

var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
```

HTML이 namespace가 없기 때문에, 우리는 `namespaceResolver` 매개변수에 `null`을 넘겨줌을 유의하세요.

우리가 문서 전체에서 heading을 찾기를 바라기 때문에, 우리는 `contextNode`로 document 개체 자신을 씁니다.

이 식의 결과는 `XPathResult` 개체입니다. 우리가 반환되는 결과형을 알고 싶다면, 우리는 반환되는 개체의 `resultType` 속성을 평가할지도 모릅니다. 이 경우에는 그것은 값이 `4`인 `UNORDERED_NODE_ITERATOR_TYPE`로 평가합니다. 이는 XPath 식의 결과가 node-set일 때 기본 반환형입니다. 동시에 단일 노드로 접근을 제공하고 특정 순서로 노드를 반환할지도 모릅니다. 반환되는 개체에 접근하기 위해, 우리는 반환되는 개체의 `iterateNext()` 메소드를 씁니다.

```js
var thisHeading = headings.iterateNext();

var alertText = "Level 2 headings in this document are:\n";

while (thisHeading) {
  alertText += thisHeading.textContent + "\n";
  thisHeading = headings.iterateNext();
}
```

우리가 한 노드를 반복하기만 하면, 우리는 그 노드의 모든 표준 DOM interfaces에 접근할 수 있습니다. 우리 식에서 반환된 모든 `h2` 요소를 반복한 뒤에, 더 이상의 `iterateNext()` 호출은 `null`을 반환합니다.

### 확장기능 안에서 XML 문서 평가

다음은 예로 chrome://yourextension/content/peopleDB.xml에 자리한 XML 문서를 씁니다.

```js
<?xml version="1.0"?>
<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
  <person>
    <name first="george" last="bush" />
    <address street="1600 pennsylvania avenue" city="washington" country="usa"/>
    <phoneNumber>202-456-1111</phoneNumber>
  </person>
  <person>
    <name first="tony" last="blair" />
    <address street="10 downing street" city="london" country="uk"/>
    <phoneNumber>020 7925 0918</phoneNumber>
  </person>
</people>
```

확장기능 안에서 XML 문서의 컨텐트를 쓸 수 있게, 우리는 문서를 로드하는 동시에 변수 `xmlDoc`를 우리가 `evaluate` 메소드를 쓸 수 있는 `XMLDocument` 개체로 문서에 포함하는 `XMLHttpRequest` 개체를 만듭니다,

JavaScript는 확장기능 xul/js 문서에 씁니다.

```js
var req = new XMLHttpRequest();

req.open("GET", "chrome://yourextension/content/peopleDB.xml", false);
req.send(null);

var xmlDoc = req.responseXML;

var nsResolver = xmlDoc.createNSResolver(
  xmlDoc.ownerDocument == null
    ? xmlDoc.documentElement
    : xmlDoc.ownerDocument.documentElement,
);

var personIterator = xmlDoc.evaluate(
  "//person",
  xmlDoc,
  nsResolver,
  XPathResult.ANY\_TYPE,
  null,
);
```

부록
--

#### 사용자 정의 Namespace Resolver 구현

이는 단지 설명을 위한 예입니다. 이 함수는 `xpathExpression`에서 namespace 접두사를 취할 필요가 있고 그 접두사와 들어맞는 URI를 반환합니다. 예를 들어, 다음 식은
```

'//xhtml:td/mathml:math'
```

(X)HTML 표 데이터 셀 요소의 자식인 모든 MathML 식을 선택합니다.

`mathml:` 접두사를 namespace URI '`http://www.w3.org/1998/Math/MathML`'와 `html:`을 URI `http://www.w3.org/1999/xhtml`와 관련시키기 위해 우리는 함수 하나를 제공합니다.

```js
function nsResolver(prefix) {
  var ns = {
    xhtml: "http://www.w3.org/1999/xhtml",
    mathml: "http://www.w3.org/1998/Math/MathML",
  };
  return ns[prefix] || null;
}
```

그러면 `document.evaluate` 호출은 다음과 같습니다.

```js
document.evaluate(
  "//xhtml:td/mathml:math",
  document,
  nsResolver,
  XPathResult.ANY\_TYPE,
  null,
);
```

#### XPathResult 정의 상수

| 결과형 정의 상수 | 값 | 설명 |
| --- | --- | --- |
| ANY\_TYPE | 0 | 식 평가에서 자연스럽게 생긴 어떤 형을 포함하는 결과 집합. 만약 결과가 node-set이면 UNORDERED\_NODE\_ITERATOR\_TYPE이 항상 결과형임을 주의하세요. |
| NUMBER\_TYPE | 1 | single 숫자를 포함하는 결과. 이는 예를 들어, `count()` 함수를 쓰는 XPath 식에 쓸모가 있습니다. |
| STRING\_TYPE | 2 | single 문자열을 포함하는 결과. |
| BOOLEAN\_TYPE | 3 | single boolean 값을 포함하는 결과. 이는 예를 들어, `not()` 함수를 쓰는 XPath 식에 쓸모가 있습니다. |
| UNORDERED\_NODE\_ITERATOR\_TYPE | 4 | 식과 일치하는 모든 노드를 포함하는 결과 node-set. 노드는 반드시 문서에 나타나는 순서대로가 아닐지도 모릅니다. |
| ORDERED\_NODE\_ITERATOR\_TYPE | 5 | 식과 일치하는 모든 노드를 포함하는 결과 node-set. 결과 집합의 노드는 문서에 나타나는 순서대로입니다. |
| UNORDERED\_NODE\_SNAPSHOT\_TYPE | 6 | 식과 일치하는 모든 노드의 snapshot을 포함하는 결과 node-set. 노드는 반드시 문서에 나타나는 순서대로가 아닐지도 모릅니다. |
| ORDERED\_NODE\_SNAPSHOT\_TYPE | 7 | 식과 일치하는 모든 노드의 snapshot을 포함하는 결과 node-set. 결과 집합의 노드는 문서에 나타나는 순서대로입니다. |
| ANY\_UNORDERED\_NODE\_TYPE | 8 | 식과 일치하는 어떤 단일 노드를 포함하는 결과 node-set. 노드는 식과 일치하는 문서의 첫 노드일 필요는 없습니다. |
| FIRST\_ORDERED\_NODE\_TYPE | 9 | 식과 일치하는 문서의 첫 노드를 포함하는 결과 node-set. |

원본 문서 정보
--------

* 원본 문서 Mozilla XPath 입문서를 기반으로 함
* 원본 소스 저자: James Graham.
* 다른 기여자: James Thompson.
* 맨 나중 업데이트: 2006-3-25.


Functions - XPath

Functions
=========

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축
 다음은 설명, 문법, 인수 목록, 결과형, 해당 W3C 권고안 소스, 현 Gecko 지원 정도를 포함하는 기본 XPath 함수와 XPath에 더해진 XSLT 고유의 추가분에 주석을 단 목록입니다. XPath/XSLT 함수 사용에 관한 추가 정보는, For Further Reading 페이지를 봐 주세요.
* boolean()
* ceiling()
* concat()
* contains()
* count()
* current()
*XSLT 고유*
* document()
*XSLT 고유*
* element-available()
* false()
* floor()
* format-number()
*XSLT 고유*
* function-available()
* generate-id()
*XSLT 고유*
* id()
*(부분 지원함)*
* key()
*XSLT 고유*
* lang()
* last()
* local-name()
* name()
* namespace-uri()
* normalize-space()
* not()
* number()
* position()
* round()
* starts-with()
* string()
* string-length()
* substring()
* substring-after()
* substring-before()
* sum()
* system-property()
*XSLT 고유*
* translate()
* true()
* unparsed-entity-url()
*XSLT 고유*
*(지원 안 함)*


element-available - XPath

element-available
=================

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`element-available` 함수는 요소가 이용 가능한 지를 결정하고 true나 false를 반환합니다.

### 구문
```

element-available(QName )
```

### 인수

`QName`

유효한 QName으로 평가해야 합니다. QName은 식 범위(scope)에서 이름공간 선언을 써서 확장 이름으로 확장됩니다.

### 반환

만약 확장 이름이 명령 이름이면 true를 반환합니다. 만약 확장 이름에 XSLT 이름공간 URI와 같은 이름공간 URI이 있으면, XSLT로 정의된 요소를 참조합니다. 그렇지 않으면, extension 요소를 참조합니다. 만약 확장 이름에 null 이름공간 URI가 있으면, element-available 함수는 false를 반환합니다.

### 정의

XSLT 1.0 15

### Gecko 지원

지원함.


true - XPath

true
====

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`true` 함수는 불린값 true를 반환합니다.

### 구문
```

true()
```

### 반환

불린 `true`.

### 정의

XPath 1.0 4.3

### Gecko 지원

지원함.


starts-with - XPath

starts-with
===========

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`starts-with` 함수는 첫 번째 문자열이 두 번째 문자열로 시작하는 지를 확인한 뒤 true나 false를 반환합니다.

### 구문
```

starts-with(haystack ,needle)
```

### 인수

`haystack`

들여다볼(look in) 문자열.

`needle`

찾을(look for) 문자열.

### 반환

 만약
 `haystack`
 이
 `needle`
 로 시작하면 `true`. 그렇지 않으면, `false`.

### 정의

XPath 1.0 4.2

### Gecko 지원

지원함.


unparsed-entity-url - XPath

unparsed-entity-url
===================

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`unparsed-entity-url()` 함수는 구문해석되지 않은 엔티티의 URI를 반환합니다. 이는 소스 문서의 DTD에서 참조하는 비 XML 데이터입니다.

### 문법
```

string unparsed-entity-url(string)
```

### 인수

구문해석되지 않은 엔티티의 이름. 인수가 문자열이 아니면, string() 함수의 규칙을 써서 변환합니다. 이름은 XML 이름입니다.

### 반환

엔티티가 있으면, DTD에서 찾은 구문해석되지 않은 엔티티의 URI. 그렇지 않으면 빈 문자열.

### 정의

XSLT 1.0 12.4

### Gecko 지원

지원 안 함.


local-name - XPath

local-name
==========

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`local-name` 함수는 인수로 준 노드 집합 안 첫 노드의 지역 이름을 나타내는 문자열을 반환합니다.

### 구문
```

local-name( [node-set] )
```

### 인수

`node-set`(선택사항)

이 노드 집합 안 첫 노드의 지역 이름이 반환됩니다. 이 인수를 빼면, 현재 문맥 노드를 씁니다.

### 반환

문자열.

### 주의

* 지역 이름은 expanded-name의 지역 부분입니다.
### 정의

XPath 1.0 4.1

### Gecko 지원

지원함.


number - XPath

number
======

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`number` 함수는 개체를 숫자로 변환하고 그 숫자를 반환합니다.

### 구문
```

number( [object] )
```

### 인수

`object`
 (optional)

숫자로 변환할 개체.

### 반환

개체를 변환한 뒤 결과 숫자.

### 주의

* 문자열은 숫자 앞 문자열의 앞 공백 문자를 떼고(strip) 숫자 뒤의 것을 무시하여 숫자로 변환됩니다. 문자열이 패턴과 일치하지 않으면, 그 문자열은 NaN으로 변환됩니다.
* Boolean true는 1로 false는 0으로 변환됩니다.
* 노드 집합은 먼저 as if by a call to the string function 문자열로 변환되고 나서 같은 식으로 문자열 인수로 변환됩니다.
* 네 가지 기본 타입 말고 다른 타입의 개체는 그 타입에 의존하는 방법으로 숫자로 변환됩니다.
### 정의

XPath 1.0 4.4

### Gecko 지원

지원함.


round - XPath

round
=====

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`round` 함수는 인수로 준 수에 가장 가까운 정수를 반환합니다.

### 구문
```

round(decimal )
```

### 인수

`decimal`

정수 처리(round)될 10진수.

### 반환

 인수
 *`decimal`*
 보다 작거나 크거나 같은 가장 가까운 정수.

### 주의

* -0.5는 음수 0으로 0.4는 양수 0으로 정수 처리됩니다.
### 정의

XPath 1.0 4.4

### Gecko 지원

지원함.


sum - XPath

sum
===

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`sum` 함수는 인수로 준 노드 집합의 각 노드의 숫자값의 합을 반환합니다.

### 구문
```

sum(node-set )
```

### 인수

`node-set`

평가될 노드 집합. 이 노드 집합의 각 노드는 마치 `number` 함수에 넘겨준 것처럼 평가되고 결과 수의 합이 반환됩니다.

### 반환

숫자.

### 주의

*없음.*

### 정의

XPath 1.0 4.3

### Gecko 지원

지원함.


position - XPath

position
========

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`position` 함수는 식 평가 문맥(expression evaluation context)와 위치가 같은 숫자를 반환합니다.

### 구문
```

position()
```

### 반환

식 평가 문맥과 위치가 같은 정수.

### 주의

* 문맥 안 노드의 위치는 0 기반이 아님을 주의하세요. 첫 노드는 위치가 1입니다.
* 문맥은 경로의 나머지로 결정됩니다.
```

<xsl:template match="//a[position() = 5">
 <!-- 이 템플릿은 문서 안 다섯 번째 a 요소와 일치합니다. -->
</xsl:template>
```

```
<xsl:template match="//div[@class='foo']/bar[position() = 1]">
 <!-- 이 템플릿은 class 속성이 "foo"이고 div 요소의 자식인 첫 번째 bar 요소와 일치합니다 -->
</xsl:template>
```

### 정의

XPath 1.0 4.1

### Gecko 지원

지원함.


id - XPath

id
==

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`id` 함수는 인수로 준 id와 일치하는 노드를 찾아 그 식별된 노드를 포함하는 노드 집합을 반환합니다.

### 구문
```

id(expression )
```

### 인수

`expression`

만약 `expression`이 노드 집합이면, 노드 집합 안 각 노드의 문자열 값은 개별 id로 다룹니다. 반환하는 노드 집합은 그 id와 대응하는 노드입니다.

만약 `expression`

이 문자열이나, 노드 집합이 아닌 어떤 거라면, `expression` 은 공백으로 구분된 id 목록으로 다룹니다. 반환하는 노드 집합은 그 id와 대응하는 노드입니다.

### 반환

그 노드를 포함하는 노드 집합이나 인수로 준 id로 식별된 노드.

### 주의

* XML 문서의 DTD가 어떤 속성이 ID인지를 결정합니다. XPath 1.0 5.2.1를 보세요.
### 정의

XPath 1.0 4.1

### Gecko 지원

부분 지원함.


false - XPath

false
=====

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`false` 함수는 boolean false를 반환합니다.

### 구문
```

false()
```

### 반환

Boolean `false`.

### 주의

이 함수는 비교(comparison)하는 부분에 쓸모가 있습니다.
```

<xsl:if test="boolean((1 > 2) = false())">
 The expression evaluates as true
</xsl:if>
```

### 정의

XPath 1.0 4.3

### Gecko 지원

지원함.


substring-before - XPath

substring-before
================

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`substring-before` 함수는 첫 번째 인수에서 두 번째 인수가 나타난 앞의 나머지를 반환합니다.

### 구문
```

substring-before(haystack ,needle )
```

### 인수

`haystack`

평가할 문자열. 이 문자열의 부분이 반환됩니다.

`needle`

 찾을 부분 문자열.
 `haystack`
 에서
 `needle`
 의 첫 출현 앞의 문자열이 반환됩니다.

### 반환

문자열.

### 주의

XSL 예:
```

<xsl:value-of select="substring-before('1999/04/01','/')" />
```

출력
```

1999
```

### 정의

XPath 1.0 4.2

### Gecko 지원

지원함.


string-length - XPath

string-length
=============

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`string-length` 함수는 인수로 준 문자열의 문자수를 반환합니다.

### 구문
```

string-length( [string] )
```

### 인수

`string`
 (선택사항)

평가할 문자열. 빼면, 쓰는 문자열은 문자열로 변환된 문맥 노드와 같습니다.

### 반환

문자열의 문자수와 같은 정수.

### 정의

XPath 1.0 4.2

### Gecko 지원

지원함.


contains - XPath

contains
========

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`contains` 함수는 첫 번째 인수 문자열이 두 번째 인수 문자열을 포함하는지 결정하고 부울값 true 또는 false를 반환합니다.

### 문법
```

contains(haystack ,needle )
```

### 인수

`haystack`

찾을 문자열

`needle`

첫 번째 인수(`haystack`)에서 찾을 부분 문자열

### 반환

첫 번째 인수(`haystack`)가 두 번째 인수(`needle`)를 포함하면 `true`. 그렇지 않으면, `false`.

### 정의

XPath 1.0 4.2

### Gecko 지원

지원함.


count - XPath

count
=====

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`count` 함수는 노드 집합의 노드 수를 세고 나서 정수로 반환합니다.

### 문법
```

count(node-set )
```

### 인수

`node-set`

셀 노드 집합.

### 반환

노드 집합의 노드 수를 나타내는 정수.

### 정의

1.0 4.1

### Gecko 지원

지원함.


namespace-uri - XPath

namespace-uri
=============

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`namespace-uri` 함수는 인수로 준 노드 집합 안 첫 노드의 이름공간 URI를 나타내는 문자열을 반환합니다.

### 구문
```

namespace-uri( [node-set] )
```

### 인수

`node-set`(선택사항)

이 노드 집합 안 첫 노드의 이름공간 URI가 반환됩니다. 이 인수를 빼면, 현재 문맥 노드를 씁니다.

### 반환

제공한 노드가 있는 이름공간 URI를 나타내는 문자열.

### 주의

* 만약 제공한 노드가 지정된 이름공간이 없으면, 반환되는 문자열은 빈 문자열입니다.
* 요소와 속성 노드 말고 다른 노드는, 반환되는 문자열이 항상 빈 문자열입니다.
### 정의

XPath 1.0 4.1

### Gecko 지원

지원함.


system-property - XPath

system-property
===============

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`system-property` 함수는 인수로 준 시스템 속성을 나타내는 개체를 반환합니다.

### 문법
```

system-property(name )
```

### 인수

*`name`*
 (선택사항)

시스템 속성의 이름. 인수는 QName인 문자열로 평가해야 합니다. QName은 식의 범위에서 이름공간 선언을 써 이름으로 확장합니다. system-property 함수는 이름으로 식별하는 시스템 속성값을 나타내는 개체를 반환합니다. 그러한 시스템 속성이 없으면, 빈 문자열을 반환합니다.

### 반환

인수 system-property를 나타내는 개체

### 주의

* xsl:version, 처리기가 구현한 XSLT 버전을 제공하는 숫자. 이 문서에서 지정한 XSLT 버전을 구현하는 XSLT 처리기에는, 이 숫자가 1.0입니다.
* xsl:vendor, XSLT 처리기의 공급자(vendor)를 식별하는 문자열
* xsl:vendor-url, XSLT 처리기의 공급자를 식별하는 URL을 포함하는 문자열. 보통 이는 공급자 웹 사이트의 홈 페이지입니다.
### 정의

XSLT 1.0 12.4

### Gecko 지원

지원함.


generate-id - XPath

generate-id
===========

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`generate-id` 함수는 제공한 노드 집합의 첫 노드를 위한 유일한 id를 만들고 그 id를 포함하는 문자열을 반환합니다.

### 문법
```

generate-id( [node-set] )
```

### 인수

`node-set`(선택사항)

id는 이 노드 집합의 첫 노드를 위해 만듭니다. 빼면, 현재 문맥 노드를 씁니다.

### 반환

만든 id를 포함하는 문자열.

### 주의

* 현재 변환에서 현재 문서의 같은 노드에는 매번 같은 id를 만들어야 합니다.
* 만든 id는 그 뒤 변환에서는 같지 않을 지도 모릅니다.

이 함수는 XPath에 더한 XSLT 고유 추가분입니다. 기본 XPath 함수 라이브러리의 일부가 아닙니다.

### 정의

XSLT 1.0 12.4

### Gecko 지원

지원함.


last - XPath

last
====

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`last` 함수는 식 평가 문맥(expression evaluation context)과 크기가 같은 숫자를 반환합니다.

### 구문
```

last()
```

### 반환

식 평가 문맥과 크기가 같은 정수.

### 주의

* 이 함수는 특정 노드가 노드 집합의 마지막 노드인지를 결정하기 위해 position() 함수와 함께 자주 씁니다.
### 정의

XPath 1.0 4.1

### Gecko 지원

지원함.


translate - XPath

translate
=========

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`translate` 함수는 문자열과 번역할 문자 집합을 평가하고 번역된 문자열을 반환합니다.

### 구문
```

translate(string ,abc ,XYZ )
```

### 인수

`string`

평가할 문자열.

`abc`

바꿀 문자열.

`XYZ`

 교체에 쓰는 문자열.
 `XYZ`
 에서 첫 문자는
 `string`
 에서 나타나는
 `abc`
 의 첫 문자가 나타날 때마다 교체합니다.

### 반환

번역된 문자열.

### 주의

XPath는 translate 함수가 모든 언어에서 대/소문자 변환에 sufficient solution이 아니다라고 기록합니다. XPath의 future 버전은 대/소문자 변환을 위해 추가 함수를 제공할 지도 모릅니다.

그러나, 이 함수는 현재 문자열을 대/소문자로 변환할 수 있는 함수에 가장 가깝습니다.

예
```

<xsl:value-of select="translate('The quick brown fox.', 'abcdefghijklmnopqrstuvwxyz', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'" />
```

출력
```

THE QUICK BROWN FOX.
```

* 만약
 `abc`
 가
 `XYZ`
 보다 길면,
 `XYZ`
 에서 대응하는 문자가 없는
 `abc`
 의 문자는 출현 때마다 제거됩니다.

예
```

<xsl:value-of select="translate('The quick brown fox.', 'brown', 'red'" />
```

출력
```

The quick red fdx.
```

* 만약
 `XYZ`
 가
 `abc`
 보다 더 많은 문자를 포함하면, 여분 문자는 무시됩니다.
### 정의

XPath 1.0 4.2

### Gecko 지원

지원함.


boolean - XPath

boolean
=======

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`boolean` 함수는 식을 평가하고 참이나 거짓을 반환합니다.

### 문법
```

boolean(expression )
```

### 인수

`expression`

평가하는 식. 식은 부울 뿐만 아니라 수와 노드 집합도 참조할 수 있습니다.

### 반환

`expression`을 평가한 뒤 부울값 `true`나 `false`.

### 주의

* 수가 (+/-) 0이나 `NaN`이면 false로 평가합니다. 그렇지 않으면, true로 평가합니다.
* 노드 집합이 비어 있으면 true로 평가합니다.
* 문자열이 비어 있으면 false로 평가합니다. 그렇지 않으면, true로 평가합니다.
* 네 가지 기본 타입 이외의 타입 개체는 그 타입 나름의 방법으로 부울로 변환합니다.
### 정의

XPath 1.0 4.3

### Gecko 지원

지원함.


string - XPath

string
======

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`string` 함수는 인수를 문자열로 변환합니다.

### 구문
```

string( [object] )
```

### 인수

`object`
 (선택사항)

문자열로 변환할 개체. 빼면, 문맥 노드를 씁니다.

### 반환

문자열

### 주의

* 만약 개체가 노드 집합이면, 집합의 첫 노드의 문자열값을 반환됩니다.
* 숫자는 다음으로 반환됩니다.
    + NaN은 문자열 NaN으로 변환됩니다.
    + 양수 0은 문자열 0으로 변환됩니다.
    + 음수 0은 문자열 0으로 변환됩니다.
    + 양의 무한대(infinity)는 문자열 Infinity로 변환됩니다.
    + 음의 무한대는 문자열 -Infinity로 변환됩니다.
    + -1과 1 사이의 10진수는 소수점 앞에 0이 하나 있는 문자열로 변환됩니다.
### 정의

XPath 1.0 4.2

### Gecko 지원

지원함.


substring-after - XPath

substring-after
===============

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`substring-after` 함수는 첫 번째 인수에서 두 번째 인수가 나타난 다음의 나머지를 반환합니다.

### 구문
```

substring-after(haystack ,needle )
```

### 인수

`haystack`

평가할 문자열. 이 문자열의 부분이 반환됩니다.

`needle`

 찾을 부분 문자열.
 `haystack`
 에서
 `needle`
 의 첫 출현 뒤의 문자열이 반환됩니다.

### 반환

문자열.

### 주의

XSL 예:
```

<xsl:value-of select="substring-after('1999/04/01','/')" />
```

출력
```

04/01
```

### 정의

XPath 1.0 4.2

### Gecko 지원

지원함.


ceiling - XPath

ceiling
=======

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`ceiling` 함수는 10진수를 평가하고 10진수보다 작지 않은 가장 작은 정수를 반환합니다.

### 문법
```

ceiling(number )
```

### 인수

`number`

평가할 수.

### 반환

`number`보다 작지 않은 가장 작은 정수.

예를 들어,

`ceiling (5.2)` = *6*

`ceiling (-5.2)` = *-5*

### 정의

XPath 1.0 4.4

### Gecko 지원

지원함.


concat - XPath

concat
======

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`concat` 함수는 둘 또는 둘 이상의 문자열을 연결하고 연결한 문자열을 반환합니다.

### 문법
```

concat(string1 ,string2 [,stringn]* )
```

### 인수

`stringn`

이 함수는 둘 또는 둘 이상의 인수를 받습니다. 각각은 문자열입니다.

### 반환

함수에 인수로 건넨 모든 문자열을 연결한 단일 문자열.

### 정의

XPath 1.0 4.2

### Gecko 지원

지원함.


floor - XPath

floor
=====

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`floor` 함수는 10진수를 평가하고 10진수보다 크지 않는(작거나 같은) 가장 큰 정수를 반환합니다.

### 구문
```

floor(number )
```

### 인수

`number`

평가할 10진수.

### 반환

`number`보다 크지 않는 가장 큰 정수.

### 정의

XPath 1.0 4.4

### Gecko 지원

지원함.


name - XPath

name
====

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`name` 함수는 인수로 준 노드 집합 안 첫 노드의 QName을 나타내는 문자열을 반환합니다.

### 구문
```

name( [node-set] )
```

### 인수

`node-set`(선택사항)

이 노드 집합 안 첫 노드의 QName이 반환됩니다. 이 인수를 빼면, 현재 문맥 노드를 씁니다.

### 반환

노드의 QName을 나타내는 문자열

### 주의

* QName은 이름공간 접두사와 지역 이름을 포함하는 노드의 한정된(qualified) 이름입니다.
### 정의

XPath 1.0 4.1

### Gecko 지원

지원함.


document - XPath

document
========

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`document` 함수는 하나 또는 여러 외부 문서에서 노드 집합을 찾고 결과 노드 집합을 반환합니다.

### 문법
```

document(URI [,node-set] )
```

### 인수

`URI`

검색하는 문서의 절대 또는 상대 URI. URI는 또한 조각 인식자(fragment identifier)를 포함할지도 모릅니다.

`node-set`(선택사항)

반환하게 될 외부 문서의 노드 집합을 가리키는 식.

### 반환

노드 집합.

### 주의

* URI가 조각 인식자를 포함하고 그 조각이 외부 문서에서 인식될 수 있으면, 그 조각은 `node-set`인수식에서 루트로 다룹니다. `node-set`인수를 빼면, 전체 조각을 반환합니다.
* `URI`인수가 노드 집합이고 두 번째 인수가 있으면, 노드 집합의 각 노드를 개별 URI로 평가하고 반환한 노드 집합은 마치 `document` 함수가 여러 번 호출되어 결과 노드 집합이 단일 노드 집합으로 합쳐진 것 같이 됩니다.
* 다른 특정 조건은 지정한 behavior와 함께 있습니다. 자세한 사항은 XSLT 1.0 문서를 보세요.
* URI가 XSL 문서와 호응하기 때문에, `document("")`는 현재 노드의 루트 노드를 반환할 겁니다.

이 함수는 XPath에 더한 XSLT 고유 추가분입니다. 기본 XPath 함수 라이브러리의 일부가 아닙니다.

### 정의

XSLT 1.0 12.1

### Gecko 지원

지원함.


substring - XPath

substring
=========

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`substring` 함수는 인수로 준 문자열의 부분을 반환합니다.

### 구문
```

substring(string ,start [,length] )
```

### 인수

`string`

평가할 문자열.

`start`

 부분 문자열이 시작하는
 `string`
 안 위치.

`length`
 (선택사항)

 부분 문자열의 길이. 빼면, 반환되는 문자열은
 `start`
 위치부터
 `string`
 의 끝까지 모든 문자를 포함합니다.

### 반환

문자열.

### 주의

다른 XPath 함수와 마찬가지로, 위치는 0에 기반을 두지 않습니다. 문자열의 첫 문자는 위치가 0이 아니라 1입니다.

### 정의

XPath 1.0 4.2

### Gecko 지원

지원함.


format-number - XPath

format-number
=============

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`format-number` 함수는 수를 평가하고 제공한 형식으로 그 수를 나타내는 문자열을 반환합니다.

### 문법
```

format-number(number ,pattern [,decimal-format] )
```

### 인수

`number`

형식을 지정할 수

`pattern`

JDK 1.1 Decimal Format 클래스 형식의 문자열.

`decimal-format`(선택사항)

쓸 수 형식을 정의하는 `xsl:decimal-format` 요소의 이름. 빼면, 기본 decimal-format을 씁니다.

### 반환

새 형식으로 수를 나타내는 문자열.

### 주의

이 함수는 XPath에 더한 XSLT 고유 추가분입니다. 기본 XPath 함수 라이브러리의 일부가 아닙니다.

### 정의

XSLT 1.0 12.3

### Gecko 지원

지원함.


lang - XPath

lang
====

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`lang` 함수는 문맥 노드가 인수로 준 언어와 일치하는 지를 결정하고 true나 false를 반환합니다.

### 구문
```

lang(string )
```

### 인수

`string`

일치 여부에 사용하는 언어 코드나 지역화 (언어와 나라) 코드.

### 반환

문맥 노드가 인수로 준 언어와 일치하면 `true`. 그렇지 않으면, `false`.

### 주의

* 노드의 언어는 노드의 `xml:lang` 속성으로 결정됩니다. 만약 현재 노드에 `xml:lang` 속성이 없으면, `xml:lang` 속성이 있는 가장 가까운 조상(ancestor) 노드의 `xml:lang` 속성값을 현재 노드의 언어로 결정합니다. 만약 언어가 결정될 수 없으면 (`xml:lang` 속성이 있는 조상이 없는 경우), 이 함수는 false를 반환합니다.
* If 인수로 준 `string`이 나라 코드를 지정하지 않으면, 이 함수는 아무 나라 코드를 갖는 그 언어의 노드와 일치합니다. 반대는 true가 아닙니다.

이 XML 코드 조각을 주고
```

<p xml:lang="en">I went up a floor.</p>
<p xml:lang="en-GB">I took the lift.</p>
<p xsl:lang="en-US">I rode the elevator.</p>
```

XSL 템플릿이 이렇다면
```

<xsl:value-of select="count(//p[lang('en')])" />
<xsl:value-of select="count(//p[lang('en-GB')])" />
<xsl:value-of select="count(//p[lang('en-US')])" />
<xsl:value-of select="count(//p[lang('de')])" />
```

출력은 다음과 같을 지도 모릅니다.
```

3
1
1
0
```

### 정의

XPath 1.0 4.3

### Gecko 지원

지원함.


key - XPath

key
===

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`key` 함수는 인수로 준 키와 값을 갖는 노드 집합을 반환합니다.

### 문법
```

key(keyname ,value )
```

### 인수

`keyname`

사용할 `xsl:key` 요소의 이름을 포함하는 문자열

`value`

반환되는 노드 집합은 제공한 키와 이 값을 갖는 각 노드를 포함합니다.

### 반환

노드 집합.

### 주의

* `xsl:key` 요소는 키와 일치하는데 쓰는 제공한 요소의 속성을 정의합니다.

이 함수는 XPath에 더한 XSLT 고유 추가분입니다. 기본 XPath 함수 라이브러리의 일부가 아닙니다.

### 정의

XSLT 1.0 12.2

### Gecko 지원

지원함.


not - XPath

not
===

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`not` 함수는 불린식을 평가하고 반대값을 반환합니다.

### 구문
```

not(expression )
```

### 인수

`expression`(선택사항)

식은 마치 boolean() 함수에 인수로 넘겨진 것처럼 정확히 평가됩니다.

### 반환

false로 평가한 식은 true; true로 평가한 식은 false.

### 주의

* 이 함수는 반대값을 반환하는 것을 빼고는 boolean() 함수와 비슷하게 동작합니다.
### 정의

XPath 1.0 4.3

### Gecko 지원

지원함.


function-available - XPath

function-available
==================

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`function-available` 함수는 인수로 준 함수가 이용 가능한 지를 결정하고 boolean true나 false를 반환합니다.

### 구문
```

function-available(name )
```

### 인수

`name`

검사할 함수 이름.

### 반환

Boolean `true`나 `false`.

### 정의

XPath 1.0 15

### Gecko 지원

지원함.


normalize-space - XPath

normalize-space
===============

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축

`normalize-space` 함수는 문자열에서 앞뒤 공백을 빼고(strip) 결과 문자열을 반환합니다.

### 구문
```

normalize-space(string )
```

### 인수

`string`

nomalize되는 문자열

### 반환

nomalize된 문자열.

### 정의

XPath 1.0 4.2

### Gecko 지원

지원함.


HTMLElement - Web API

HTMLElement
===========

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

EventTarget

Node

(en-US)

Element

(en-US)

HTMLElement속성
--

*부모인 `Element` (en-US)의 속성을 상속합니다. `GlobalEventHandlers`, `TouchEventHandlers`의 속성을 구현합니다.*

`HTMLElement.accessKey`

요소에 할당된 접근 키를 나타내는 `DOMString`입니다.

`HTMLElement.accessKeyLabel` 읽기 전용

요소에 할당된 접근 키를 포함하는 `DOMString`을 반환합니다.

`HTMLElement.contentEditable`

요소가 수정 가능하면 `"true"`, 그렇지 않으면 `"false"` 값을 갖는 `DOMString`입니다.

`HTMLElement.isContentEditable` (en-US) 읽기 전용

요소의 콘텐츠가 수정 가능한지 여부를 나타내는 `Boolean`을 반환합니다.

`HTMLElement.contextMenu`
지원이 중단되었습니다

요소와 관련된 콘텍스트 메뉴를 나타내는 `HTMLMenuElement` (en-US)입니다. `null`일 수 있습니다.

`HTMLElement.dataset` (en-US) 읽기 전용

요소의 사용자 지정 데이터 속성(`data-*`)을 스크립트에서 읽고 쓸 수 있는 `DOMStringMap` (en-US)을 반환합니다.

`HTMLElement.dir` (en-US)

요소의 방향성을 표현하는 전역 속성 `dir` 을 나타내는 `DOMString` 을 반환합니다. 가능한 값은 `"ltr"`, `"rtl"`, `"auto"` 입니다.

`HTMLElement.draggable` (en-US)

요소가 드래그 가능한지 여부를 나타내는 `Boolean` 을 반환합니다.

`HTMLElement.dropzone` 읽기 전용

`dropzone` 전역 속성을 나타내고 drop 작업에 대한 동작을 설명하는 `DOMSettableTokenList` 를 반환합니다.

`HTMLElement.hidden` (en-US)

요소가 숨김상태인지 여부를 나타내는 `Boolean` 을 반환합니다.

`HTMLElement.inert` (en-US)

유저 에이전트가 사용자 인터렉션 이벤트, 페이지 내 텍스트 검색("페이지에서 찾기"), 텍스트 선택의 목적으로 주어진 노드가 없는 것처럼 동작해야하는지 여부를 나타내는 `Boolean` 을 반환합니다.

`HTMLElement.innerText`

노드와 그 자손의 "렌더링된" 텍스트 컨텐츠를 나타냅니다. getter 로써, 이는 사용자가 커서로 요소의 컨텐츠를 하이라이팅한 후 클립보드로 복사하면 얻을 수 있는 텍스트와 유사합니다.

`HTMLElement.itemScope`
Experimental

항목 스코프를 나타내는 `Boolean` 입니다.

`HTMLElement.itemType` 읽기 전용
Experimental

`DOMSettableTokenList`… 를 반환합니다.

`HTMLElement.itemId`
Experimental

항목 ID 를 나타내는 `DOMString` 입니다.

`HTMLElement.itemRef` 읽기 전용
Experimental

`DOMSettableTokenList`… 를 반환합니다.

`HTMLElement.itemProp` 읽기 전용
Experimental

`DOMSettableTokenList`… 를 반환합니다.

`HTMLElement.itemValue`
Experimental

항목 값을 나타내는 `Object` 를 반환합니다.

`HTMLElement.lang`

요소의 속성, 텍스트, 컨텐츠의 언어를 나타내는 `DOMString` 입니다.

`HTMLElement.noModule`

임포트한 스크립트가 모듈 스크립트를 지원하는 유저 에이전트에서 실행될 수 있는지를 나타내는 `Boolean` 입니다.

`HTMLElement.nonce` (en-US)

주어진 페치(fetch)의 진행을 허용할지를 결정하기 위한 컨텐츠 보안 정책(Content Security Policy)에서 한 번 사용된 암호회된 숫자를 반환합니다.

`HTMLElement.offsetHeight` 읽기 전용
Experimental

레이아웃에 상대적인 요소의 높이를 갖는 `double` 을 반환합니다.

`HTMLElement.offsetLeft`읽기 전용
Experimental

요소의 left border 부터 `offsetParent` 의 left border 까지의 거리를 `double` 로 반환합니다.

`HTMLElement.offsetParent`읽기 전용
Experimental

모든 오프셋 계산이 현재 연산된 요소인 `Element` (en-US) 를 반환합니다.

`HTMLElement.offsetTop` (en-US)읽기 전용
Experimental

요소의 top border 부터 `offsetParent` 의 top border 까지의 거리를 `double` 로 반환합니다.

`HTMLElement.offsetWidth` (en-US)읽기 전용
Experimental

레이아웃에 상대적인 요소의 너비를 갖는 `double` 을 반환합니다.

`HTMLElement.properties` 읽기 전용
Experimental

`HTMLPropertiesCollection`… 을 반환합니다.

`HTMLElement.spellcheck` (en-US)

철자 검사를 제어하는 `Boolean` 입니다. 모든 HTML 요소에 존재하지만, 모두에 대해 적용되지는 않습니다.

`HTMLElement.style` (en-US)

요소의 스타일 속성의 정의를 나타내는 `CSSStyleDeclaration` (en-US) 객체입니다.

`HTMLElement.tabIndex` (en-US)

탭 순서에서 요소의 위치를 나타내는 `long` 입니다.

`HTMLElement.title` (en-US)

요소에 마우스를 오버할 때 팝업 상자에 표시되는 텍스트를 갖는 `DOMString` 입니다.

`HTMLElement.translate` (en-US)
Experimental

번역을 나타내는 `Boolean` 입니다.

### 이벤트 핸들러

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

`HTMLElement.oncopy` (en-US)
비표준

`copy` 이벤트를 위한 이벤트 핸들링 코드를 반환합니다(Firefox bug 280959).

`HTMLElement.oncut` (en-US)
비표준

`cut` 이벤트를 위한 이벤트 핸들링 코드를 반환합니다(Firefox bug 280959).

`HTMLElement.onpaste` (en-US)
비표준

`paste` 이벤트를 위한 이벤트 핸들링 코드를 반환합니다(Firefox bug 280959).

`TouchEventHandlers.ontouchstart`
비표준

`touchstart (en-US)` 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.

`TouchEventHandlers.ontouchend`
비표준

`touchend (en-US)` 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.

`TouchEventHandlers.ontouchmove`
비표준

`touchmove (en-US)` 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.

`TouchEventHandlers.ontouchenter`
비표준

`touchenter` 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.

`TouchEventHandlers.ontouchleave`
비표준

`touchleave` 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.

`TouchEventHandlers.ontouchcancel`
비표준

`touchcancel (en-US)` 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.

메서드
---

*부모인 `Element` (en-US)의 메서드를 상속합니다.*

`HTMLElement.blur()` (en-US)

현재 포커스된 요소로부터 키보드 포커스를 제거합니다.

`HTMLElement.click()`

요소로 마우스 클릭 이벤트를 전달합니다.

`HTMLElement.focus()` (en-US)

요소에 현재 키보드 포커스를 생성합니다.

`HTMLElement.forceSpellCheck()` (en-US)
Experimental

요소에 철자 확인자를 생성합니다.

이벤트
---

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

`invalid` (en-US)

 Fired when an element does not satisfy its constraints during constraint validation.
 Also available via the `oninvalid` (en-US) property.

### Animation events

`animationcancel` (en-US)

 Fired when an animation unexpectedly aborts.
 Also available via the `onanimationcancel` (en-US) property.

`animationend` (en-US)

 Fired when an animation has completed normally.
 Also available via the `onanimationend` (en-US) property.

`animationiteration` (en-US)

 Fired when an animation iteration has completed.
 Also available via the `onanimationiteration` (en-US) property.

`animationstart` (en-US)

 Fired when an animation starts.
 Also available via the `onanimationstart` (en-US) property.

### Input events

`beforeinput` (en-US)

Fired when the value of an `<input>` (en-US), `<select>` (en-US), or `<textarea>` (en-US) element is about to be modified.

`input`

 Fired when the `value` of an `<input>` (en-US), `<select>` (en-US), or `<textarea>` (en-US) element has been changed.
 Also available via the `oninput` (en-US) property.

### Pointer events

`gotpointercapture` (en-US)

 Fired when an element captures a pointer using `setPointerCapture()` (en-US).
 Also available via the `ongotpointercapture` (en-US) property.

`lostpointercapture` (en-US)

 Fired when a captured pointer (en-US) is released.
 Also available via the `onlostpointercapture` (en-US) property.

`pointercancel` (en-US)

 Fired when a pointer event is canceled.
 Also available via the `onpointercancel` (en-US) property.

`pointerdown` (en-US)

 Fired when a pointer becomes active.
 Also available via the `onpointerdown` (en-US) property.

`pointerenter` (en-US)

 Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants.
 Also available via the `onpointerenter` (en-US) property.

`pointerleave` (en-US)

 Fired when a pointer is moved out of the hit test boundaries of an element.
 Also available via the `onpointerleave` (en-US) property.

`pointermove` (en-US)

 Fired when a pointer changes coordinates.
 Also available via the `onpointermove` (en-US) property.

`pointerout` (en-US)

 Fired when a pointer is moved out of the *hit test* boundaries of an element (among other reasons).
 Also available via the `onpointerout` (en-US) property.

`pointerover` (en-US)

 Fired when a pointer is moved into an element's hit test boundaries.
 Also available via the `onpointerover` (en-US) property.

`pointerup` (en-US)

 Fired when a pointer is no longer active.
 Also available via the `onpointerup` (en-US) property.

### Transition events

`transitioncancel` (en-US)

 Fired when a CSS transition (en-US) is canceled.
 Also available via the `ontransitioncancel` (en-US) property.

`transitionend` (en-US)

 Fired when a CSS transition (en-US) has completed.
 Also available via the `ontransitionend` (en-US) property.

`transitionrun` (en-US)

 Fired when a CSS transition (en-US) is first created.
 Also available via the `ontransitionrun` property.

`transitionstart` (en-US)

 Fired when a CSS transition (en-US) has actually started.
 Also available via the `ontransitionstart` property.

명세
--

| Specification |
| --- |
| HTML Standard # htmlelement |

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

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

같이 보기
-----

* `Element` (en-US)


Geometry interfaces - Web API

Geometry interfaces
===================

**Geometry interfaces**는 3D 및 2D 그래픽 작업, 특히 점, 사각형, 사변형 및 변환 행렬(transformation matrices) (en-US)(그래픽 이동/이동, 크기 조정, 회전, 기울이기/가르기/비틀기 및 뒤집기 작업과 이러한 작업의 곱하기/연결 및 반전/실행 취소 작업)을 위한 인터페이스를 제공하는 CSS 모듈입니다.

웹 개발자는 항상 geometry interfaces를 직접 사용하지 않고 뒤에서 이를 사용하는 다른 기능, 즉 CSS Transforms (en-US)의 일부, Canvas API 및 WebXR Device API (en-US), (더 직접적으로는) `VideoFrame.visibleRect` (en-US)와 `Element.getClientRects()`, `Element.getBoundingClientRect()`를 사용합니다.

인터페이스
-----

`DOMMatrix` (en-US)

그래픽 이동/이동, 크기 조정, 회전, 기울이기/가르기/비틀기 및 뒤집기 작업과 이러한 작업의 곱하기/연결 및 반전/실행 취소 작업을 위한 변환 행렬 (en-US)을 나타냅니다.

`DOMMatrixReadOnly` (en-US)

`DOMMatrix` (en-US)의 읽기 전용 버전.

`DOMPoint` (en-US)

좌표계의 2D 또는 3D 점을 나타내며, 최대 3차원의 좌표 값과 선택적 원근값을 포함합니다.

`DOMPointReadOnly` (en-US)

`DOMPoint` (en-US)의 읽기 전용 버전.

`DOMQuad` (en-US)

사변형(quadrilateral)의 모서리를 정의하는 네 개의 `DOMPoint` (en-US) 객체 모음을 나타냅니다.

`DOMRect`

직사각형의 크기와 위치를 나타냅니다.

`DOMRectReadOnly` (en-US)

`DOMRect`의 읽기 전용 버전.

예제
--

`Path2D.addPath()` (en-US) 및 `CanvasPattern.setTransform()` (en-US) 문서에는 일부 Geometry interfaces를 사용하는 예제가 있습니다.

명세서
---

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMMatrix |
| Geometry Interfaces Module Level 1 # DOMPoint |
| Geometry Interfaces Module Level 1 # DOMQuad |
| Geometry Interfaces Module Level 1 # DOMRect |

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

### api.DOMMatrix

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

### api.DOMMatrixReadOnly

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

### api.DOMPoint

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

### api.DOMPointReadOnly

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

### api.DOMQuad

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

### api.DOMRect

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

### api.DOMRectReadOnly

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

같이 보기
-----

* `Path2D.addPath()` (en-US)
* `CanvasPattern.setTransform()` (en-US)
* `CanvasRenderingContext2D.getTransform()` (en-US)
* `CanvasRenderingContext2D.setTransform()` (en-US)
* `CSSTransformValue.toMatrix()` (en-US)
* `CSSTransformComponent.toMatrix()` (en-US)
* `Element.getBoundingClientRect()`
* `Element.getClientRects()`
* `VideoFrame.visibleRect` (en-US)
* `XRLightEstimate` (en-US)
* `XRRigidTransform` (en-US)


Screen Orientation API - Web API

Screen Orientation API
======================

**Screen Orientation API**는 화면 방향에 대한 정보를 제공합니다.

인터페이스
-----

* `ScreenOrientation` (en-US)
명세서
---

| Specification |
| --- |
| Screen Orientation # screenorientation-interface |

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

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


AudioWorkletNode - Web API

AudioWorkletNode
================

**참고:** 이 인터페이스는 secure contexts 바깥에서 이용 가능하지만, `BaseAudioContext.audioWorklet` (en-US) 속성은 그렇지 않습니다. 따라서 사용자 정의 `AudioWorkletProcessor`는 secure contexts 바깥에서 정의될 수 없습니다.

Web Audio API의 **`AudioWorkletNode`** 인터페이스는 사용자에 의해 정의된, 다른 노드들과 마찬가지로 오디오 라우팅 그래프에 연결될 수 있는, `AudioNode`에 대한 base 클래스를 나타냅니다. **`AudioWorkletNode`** 는 연관된 `AudioWorkletProcessor`를 가지고 있는데, 이는 Web Audio 렌더링 스레드에서 실제적인 오디오 프로세싱을 합니다.

생성자
---

`AudioWorkletNode()`

`AudioWorkletNode` 객체의 새로운 인스턴스를 생성합니다.

속성
--

*또한 부모인 `AudioNode`로부터 속성을 상속받습니다*.

`AudioWorkletNode.port` 읽기 전용

노드와 노드에 연관된 `AudioWorkletProcessor` 사이에서 양방향 소통을 위해 사용되는 `MessagePort` (en-US)를 반환합니다. 다른 쪽 끝은 프로세서의 `port` 속성 아래에서 사용 가능합니다.

`AudioWorkletNode.parameters` 읽기 전용

`AudioParam` 객체들의 모임인 `AudioParamMap`을 반환합니다. 이것들은 근본적인 `AudioWorkletProcessor` 의 생성 중에 초기화됩니다. 만약 `AudioWorkletProcessor` 가 정적 `parameterDescriptors` getter를 가지고 있다면, 이것으로부터 반환되는 `AudioParamDescriptor` 배열이 `AudioWorkletNode` 위에서 `AudioParam` 객체들을 생성하기 위해 사용됩니다. 이 메커니즘을 이용하여 여러분의 `AudioWorkletNode` 에서 접근 가능한 여러분만의 `AudioParam` 객체들을 만드는 것이 가능합니다. 그리고 나서 여러분은 연관된 `AudioWorkletProcessor`에서 그것들의 값을 사용할 수 있습니다.

### 이벤트 처리기

`AudioWorkletNode.onprocessorerror`

연관된 `AudioWorkletProcessor`에서 오류가 나왔을 때 발생됩니다. 한 번 발생되고 나면, 프로세서와 그 결과로서 노드도 생애 주기동안 쭉 무음을 출력할 것입니다.

메서드
---

*부모인 `AudioNode`로부터 메서드를 상속받습니다*.

*`AudioWorkletNode` 인터페이스는 자신만의 어떠한 메서드도 정의하지 않습니다.*

예제
--

이 예제에서 우리는 백색소음을 출력하는 사용자 정의 `AudioWorkletNode` 를 생성합니다.

우선, 우리는 백색소음을 출력하는 사용자 정의 `AudioWorkletProcessor`를 정의하고 등록할 필요가 있습니다. 이 작업은 별도의 파일에서 이루어져야 함에 주의하세요.

```js
// white-noise-processor.js
class WhiteNoiseProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    const output = outputs[0];
    output.forEach((channel) => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] = Math.random() \* 2 - 1;
      }
    });
    return true;
  }
}

registerProcessor("white-noise-processor", WhiteNoiseProcessor);
```

다음으로, 메인 스크립트 파일에서 우리는 프로세서를 로드하고, 프로세서의 이름을 `AudioWorkletNode` 에 전달하며 `AudioWorkletNode` 의 인스턴스를 생성하고, 이 노드를 오디오 그래프에 연결할 것입니다.

```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("white-noise-processor.js");
const whiteNoiseNode = new AudioWorkletNode(
  audioContext,
  "white-noise-processor",
);
whiteNoiseNode.connect(audioContext.destination);
```

명세
--

| Specification |
| --- |
| Web Audio API # AudioWorkletNode |

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

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

같이 보기
-----

* Web Audio API
* Web Audio API 사용하기


OffscreenCanvas - Web API

OffscreenCanvas
===============

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

**`OffscreenCanvas`** 는 화면 밖에서 렌더링되는 캔버스 인터페이스입니다. window 객체와 worker 객체 모두 지원합니다.

생성자
---

`OffscreenCanvas()`

`OffscreenCanvas` 생성자. 새 `OffscreenCanvas` 객체를 생성합니다.

프로퍼티
----

`OffscreenCanvas.height`

캔버스의 높이

`OffscreenCanvas.width`

캔버스의 너비

메소드
---

`OffscreenCanvas.getContext()` (en-US)

렌더링된 캔버스 컨텍스트 객체를 반환합니다.

`OffscreenCanvas.convertToBlob()` (en-US)

캔버스에 들어있는 이미지에 대한 `Blob` 객체를 생성합니다.

`OffscreenCanvas.transferToImageBitmap()` (en-US)

`OffscreenCanvas`에 렌더링된 이미지중에서 가장 최근에 렌더링된 이미지를 `ImageBitmap` (en-US) 객체로 생성합니다.

예시
--

### `OffscreenCanvas` 에서 만들어진 프레임을 동기적으로 화면에 보여주는 방법

`OffscreenCanvas` API를 사용하는 방법은 `OffscreenCanvas`에 속한 `RenderingContext`를 이용해 새로운 프레임 객체를 생성하는 것입니다. 새 프레임이 컨텍스트에 렌더링이 되고나면, 가장 최근에 렌더링 된 이미지를 저장하는 `transferToImageBitmap()` (en-US) 메소드를 호출할 수 있습니다. 이 메소드는 다른 수 많은 Web API에서 사용되고 있는 `ImageBitmap` (en-US) 객체를 리턴합니다.

`ImageBitmap`을 화면에 표시하려면, 현재 (화면에 보여지고 있는) 캔버스 요소의 `canvas.getContext("bitmaprenderer")` 메소드를 호출했을 때 생성되는 `ImageBitmapRenderingContext` (en-US) 객체를 사용하면 됩니다. 이 컨텍스트는 캔버스의 내용을 주어진 `ImageBitmap`으로 전환하는 기능을 제공합니다. `OffscreenCanvas`에서 이전에 렌더링이 되어서 등록된 `ImageBitmap`을 이용한 `ImageBitmapRenderingContext.transferFromImageBitmap()` (en-US)을 호출하면 `ImageBitmap`이 캔버스에 표시되고 소유권 역시 캔버스로 넘어갑니다. 단일 `OffscreenCanvas`는 프레임들을 임의의 다른 `ImageBitmapRenderingContext` 객체로 전달합니다.

아래에 두 개의 `<canvas>` 요소가 있습니다.

```html
<canvas id="one"></canvas> <canvas id="two"></canvas>
```

다음의 코드는 위에서 설명한 것처럼 `OffscreenCanvas`를 이용해 렌더링합니다.

```js
var one = document.getElementById("one").getContext("bitmaprenderer");
var two = document.getElementById("two").getContext("bitmaprenderer");

var offscreen = new OffscreenCanvas(256, 256);
var gl = offscreen.getContext("webgl");

// ... gl 컨텍스트를 이용해 첫 번째 캔버스에 무언가를 그립니다 ...

// 첫 번째 캔버스에 렌더링을 수행합니다.
var bitmapOne = offscreen.transferToImageBitmap();
one.transferFromImageBitmap(bitmapOne);

// ... gl 컨텍스트를 이용해 두 번째 캔버스에 무언가를 그립니다 ...

// 두 번째 캔버스에 렌더링을 수행합니다.
var bitmapTwo = offscreen.transferToImageBitmap();
two.transferFromImageBitmap(bitmapTwo);
```

### `OffscreenCanvas` 에서 만들어진 프레임을 비동기적으로 화면에 보여주는 방법

`OffscreenCanvas` API를 이용하는 또 다른 방법은 worker 또는 메인 스레드위에서 `<canvas>` 요소의 `transferControlToOffscreen()` (en-US)를 호출하는 것입니다. 여기서 메인 스레드는 `OffscreenCanvas` 객체를 반환하는 `HTMLCanvasElement` 객체를 가지고 있습니다. `getContext()` (en-US)를 호출하면 `OffscreenCanvas`에서 `RenderingContext`를 얻을 수 있습니다.

main.js (메인 스레드 코드):

```js
var htmlCanvas = document.getElementById("canvas");
var offscreen = htmlCanvas.transferControlToOffscreen();

var worker = new Worker("offscreencanvas.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);
```

offscreencanvas.js (worker 코드):

```js
onmessage = function (evt) {
  var canvas = evt.data.canvas;
  var gl = canvas.getContext("webgl");

  // ... gl 컨텍스트를 이용해 무언가를 그립니다 ...
};
```

worker 내에서 requestAnimationFrame 또한 사용할 수 있습니다.

```js
onmessage = function (evt) {
  const canvas = evt.data.canvas;
  const gl = canvas.getContext("webgl");

  function render(time) {
    // ... gl 컨텍스트를 이용해 무언가를 그립니다 ...
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
};
```

상세
--

| Specification |
| --- |
| HTML Standard # the-offscreencanvas-interface |

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

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

더 보기
----

* WebGL Off the Main Thread – Mozilla Hacks
* `CanvasRenderingContext2D` (en-US)
* `ImageBitmap` (en-US)
* `ImageBitmapRenderingContext` (en-US)
* `HTMLCanvasElement.transferControlToOffscreen()` (en-US)
* `WebGLRenderingContext.commit()`


Text - Web API

Text
====

**`Text`** 인터페이스는 `Element` (en-US) 또는 `Attr`의 문자형 콘텐츠를 표현합니다.

요소의 콘텐츠에 마크업이 없을 경우 해당 요소는 요소의 텍스트를 담은 `Text` 를 구현한 단일 자식을 갖습니다. 반면에 요소에 마크업이 있을 경우 자식을 구성하는 정보 항목과 `Text` 노드로 파싱됩니다.

새로운 문서는 각각의 텍스트 블록마다 하나의 `Text` 노드를 갖습니다. 문서의 콘텐츠가 변경됨에 따라 새로운 `Text` 노드가 생성될 수 있습니다. `Node.normalize()` 메서드는 인접한 `Text` 객체에 대한 각각의 텍스트 블록을 다시 단일 노드로 병합합니다.

EventTarget

Node

(en-US)

CharacterData

Text생성자
---

`Text()`
Experimental

제공한 매개변수를 텍스트 콘텐츠로 하는 `Text` 노드를 반환합니다.

속성
--

부모인 `CharacterData`로부터 속성을 상속합니다.

`Text.isElementContentWhitespace` 읽기 전용
지원이 중단되었습니다

텍스트 노드가 공백만 포함하는지 여부를 나타내는 `Boolean` 플래그를 반환합니다.

`Text.wholeText` (en-US) 읽기 전용

이 `Node` (en-US)와 논리적으로 인접한 모든 `Text` 노드의 텍스트를 문서 내의 순서대로 이어붙인 `DOMString`을 반환합니다.

`Text.assignedSlot` (en-US) 읽기 전용

이 요소와 연관된 `HTMLSlotElement` (en-US) 객체를 반환합니다.

### `Slotable`로부터 포함된 속성

`Text` 인터페이스는 `Slotable` (en-US) 믹스인이 정의하는 다음의 속성을 포함합니다.

`Slotable.assignedSlot` (en-US) 읽기 전용

노드가 삽입된 `<slot>`을 나타내는 `HTMLSlotElement` (en-US)를 반환합니다.

메서드
---

부모인 `CharacterData`로부터 메서드를 상속합니다.

`Text.replaceWholeText` (en-US)
지원이 중단되었습니다

현재 노드와 논리적으로 인접한 모든 노드의 텍스트를 지정한 텍스트로 대체합니다.

`Text.splitText`

노드를 지정한 오프셋에서 두 노드로 분리합니다.

명세
--

| Specification |
| --- |
| DOM Standard # interface-text |

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

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

같이 보기
-----

* DOM 인터페이스 목차.


Background Fetch API - Web API

Background Fetch API
====================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**Background Fetch API**는 영화, 오디오 파일, 소프트웨어 등 상당한 시간이 소요될 수 있는 다운로드를 관리하는 방법을 제공합니다.

개념 및 사용법
--------

웹 애플리케이션에서 사용자가 대용량 파일을 다운로드해야 하는 경우, 다운로드가 완료되려면 사용자가 페이지에 계속 연결되어 있어야 한다는 문제가 종종 발생합니다. 연결이 끊어지면 탭을 닫거나 다운로드가 중지되는 페이지에서 다른 곳으로 이동합니다.

`Background Synchronization API` (en-US)는 서비스 워커가 사용자가 연결될 때까지 처리를 연기하는 방법을 제공하지만, 대용량 파일 다운로드와 같이 오래 실행되는 작업에는 사용할 수 없습니다. 백그라운드 동기화를 사용하려면 가져오기(fetch)가 완료될 때까지 서비스 워커가 활성 상태를 유지해야 하며, 배터리 수명을 절약하고 백그라운드에서 원치 않는 작업이 발생하는 것을 방지하기 위해 브라우저는 어느 시점에서 작업을 종료합니다.

Background Fetch API는 이 문제를 해결합니다. 웹 개발자가 사용자가 비디오 파일을 다운로드하기 위해 버튼을 클릭할 때와 같이 백그라운드에서 일부 가져오기(fetch)를 수행하도록 브라우저에 지시하는 방법을 만듭니다. 그러면 브라우저는 사용자가 볼 수 있는 방식으로 가져오기(fetch)를 수행하여 사용자에게 진행 상황을 표시하고 다운로드를 취소하는 방법을 제공합니다. 다운로드가 완료되면 브라우저는 서비스 워커를 열고, 이 시점에서 애플리케이션은 필요한 경우 응답을 통해 무언가를 수행할 수 있습니다.

Background Fetch API는 사용자가 오프라인 상태에서 프로세스를 시작하면 가져오기(fetch)를 수행할 수 있도록 합니다. 연결되면 프로세스가 시작됩니다. 사용자가 오프라인 상태가 되면 사용자가 다시 켜질 때까지 프로세스가 일시 중지됩니다.

인터페이스
-----

`BackgroundFetchManager` (en-US)

키는 백그라운드 가져오기(fetch)의 ID이며, 값은 `BackgroundFetchRegistration` (en-US) 객체인 맵입니다.

`BackgroundFetchRegistration` (en-US)

백그라운드 가져오기를 나타냅니다.

`BackgroundFetchRecord` (en-US)

개별 가져오기 요청 및 응답을 나타냅니다.

`BackgroundFetchEvent` (en-US)

`onbackgroundfetchabort` 및 `onbackgroundfetchclick`에 전달된 이벤트 유형입니다.

`BackgroundFetchUpdateUIEvent` (en-US)

`onbackgroundfetchsuccess` 및 `onbackgroundfetchfail`에 전달된 이벤트 유형입니다.

예제
--

백그라운드 가져오기를 사용하기 전에 브라우저 지원 여부를 확인하세요

```js
if (!("BackgroundFetchManager" in self)) {
  // 대체 다운로드 제공
}
```

백그라운드 불러오기를 사용하려면 등록된 서비스 워커가 필요합니다. 그런 다음 `backgroundFetch.fetch()`를 호출하여 불러오기를 수행합니다. 그러면 `BackgroundFetchRegistration` (en-US)으로 해결되는 프로미스가 반환됩니다.

백그라운드 가져오기는 여러 파일을 가져올 수 있습니다. 이 예제에서는 MP3와 JPEG를 요청합니다. 이렇게 하면 사용자가 하나의 항목으로 간주하는 파일 패키지(예: 팟캐스트와 아트웍)를 한 번에 다운로드할 수 있습니다.

```js
navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 \* 1024 \* 1024,
    },
  );
});
```

백그라운드 가져오기를 구현하는 데모 애플리케이션은 여기에서 찾을 수 있습니다.

명세서
---

| Specification |
| --- |
| Background Fetch  |

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

### api.BackgroundFetchManager

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

### api.BackgroundFetchRegistration

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

### api.BackgroundFetchRecord

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

같이 보기
-----

* Background Fetch 소개
* Background Fetch - HTTP 203


AudioScheduledSourceNode - Web API

AudioScheduledSourceNode
========================

Web Audio API의 일부인 `AudioScheduledSourceNode` 인터페이스는 (선택적으로는 명시된 시간에) 시작되고 정지되는 능력을 공유하는 몇몇 유형의 오디오 소스 노드 인터페이스에 대한 부모 인터페이스입니다. 구체적으로 말하면, 이 인터페이스는 `start()` (en-US)와 `stop()` (en-US) 메서드 뿐만 아니라, `onended` (en-US) 이벤트 처리기 또한 정의합니다.

**참고:** `AudioScheduledSourceNode` 객체는 직접적으로 생성될 수 없습니다. 대신, `AudioBufferSourceNode`, `OscillatorNode` (en-US), `ConstantSourceNode` (en-US)와 같이 이 인터페이스를 확장하는 인터페이스를 대신 사용하십시오.

다르게 서술되지 않는 한, `AudioScheduledSourceNode` 에 기반한 노드는 재생되고 있지 않을 때 무음을 출력합니다 (즉, `start()` 가 호출되기 전 그리고 `stop()` 이 호출된 후). 항상 그렇듯이, 무음은 0의 값을 가진 샘플들의 스트림으로 표현됩니다.

속성
--

부모 인터페이스인 `AudioNode`로부터 속성을 상속받습니다.

메서드
---

부모 인터페이스인 `AudioNode`로부터 메서드를 상속받고, 다음의 메서드를 추가합니다.

`start()` (en-US)

노드가 명시된 시간에 일정한 소리 재생을 시작하도록 예정합니다. 만약 시간이 명시되지 않으면, 노드는 즉시 재생을 시작합니다.

`stop()` (en-US)

노드가 명시된 시간에 재생을 멈추도록 예정합니다. 만약 시간이 명시되지 않으면, 노드는 즉시 재생을 정지합니다.

이벤트
---

`addEventListener()`를 사용하거나 이 인터페이스의 `oneventname` 속성에 이벤트 수신기를 할당하여 아래의 이벤트를 수신하십시오.

`ended` (en-US)

 소스 노드가 재생을 정지했을 때 발생되는데, 그 이유는 노드가 예정된 정지 시간에 도달했기 때문이거나, 오디오의 전체 재생이 수행되었거나, 혹은 전체 버퍼가 재생되었기 때문입니다.
 또한 `onended` (en-US) 이벤트 처리기 속성으로도 사용 가능합니다.

명세서
---

| Specification |
| --- |
| Web Audio API # AudioScheduledSourceNode |

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

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

같이 보기
-----

* Web Audio API 사용하기
* `AudioNode`


Window.crypto - Web API

Window.crypto
=============

\*\*`Window.crypto`\*\*속성은 전역 객체인 `Crypto` 객체를 반환합니다. `Crypto` 객체는 웹 페이지가 특정 암호학적 서비스에 접근할 수 있는 경로입니다. `crypto` 속성 자체는 읽기 전용이지만, 모든 메서드(와 자식 객체 `SubtleCrypto` (en-US))의 메서드)는 읽기 전용이 아니므로 폴리필을 통한 공격에 취약합니다.

구문
--

```js
var cryptoObj = window.crypto || window.msCrypto; // for IE 11
```

예제
--

다음 예제는 `Window.crypto` 속성을 통해 `getRandomValues()` 메서드에 접근합니다.

### JavaScript

```js
genRandomNumbers = function getRandomNumbers() {
  var array = new Uint32Array(10);
  window.crypto.getRandomValues(array);

  var randText = document.getElementById("myRandText");
  randText.innerHTML = "The random numbers are: ";
  for (var i = 0; i < array.length; i++) {
    randText.innerHTML += array[i] + " ";
  }
};
```

### HTML

```html
<p id="myRandText">The random numbers are:</p>
<button type="button" onClick="genRandomNumbers()">
  Generate 10 random numbers
</button>
```

### 결과

명세
--

| Specification |
| --- |
| Web Cryptography API # dom-windoworworkerglobalscope-crypto |

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

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

같이 보기
-----

* `Window` 전역 객체
* `Crypto` 인터페이스


MouseEvent - Web API

MouseEvent
==========

**`MouseEvent`** 인터페이스는 사용자가 포인팅 장치(마우스 등)를 사용해 상호작용할 때 발생하는 이벤트를 나타냅니다. `click`, `dblclick`, `mouseup` (en-US), `mousedown` (en-US)이 `MouseEvent`를 사용하는 흔한 이벤트입니다.

`MouseEvent`는 `UIEvent`를 상속하고, `UIEvent`는 `Event`를 상속합니다. 하위 호환을 유지하기 위해 `MouseEvent.initMouseEvent()` (en-US) 메서드가 사라지지는 않았지만, `MouseEvent` 객체의 생성은 `MouseEvent()` (en-US) 생성자로 해야 합니다.

`MouseEvent`에 기반한 세부 이벤트로 `WheelEvent` (en-US), `DragEvent` (en-US), `PointerEvent` 등이 있습니다.

Event

UIEvent

MouseEvent생성자
---

`MouseEvent()` (en-US)

`MouseEvent` 객체를 생성합니다.

정적 속성
-----

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

일반 클릭을 위해 필요한 최소 압력입니다.

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

강제 클릭을 위해 필요한 최소 압력입니다.

인스턴스 속성
-------

`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)의 별칭입니다.

인스턴스 메서드
--------

`UIEvent`와 `Event` 인터페이스의 메서드를 상속합니다.

`MouseEvent.getModifierState()` (en-US)

주어진 조합키의 현재 상태를 반환합니다. `KeyboardEvent.getModifierState()` (en-US)에서 자세히 확인하세요.

`MouseEvent.initMouseEvent()` (en-US)
지원이 중단되었습니다

생성한 `MouseEvent`의 값을 초기화합니다. 이미 발송한 이벤트에 대해서는 아무 것도 하지 않습니다.

예제
--

DOM 메서드들을 사용해 체크박스 클릭을 흉내(코드에서 클릭하기)내는 예제입니다. `EventTarget.dispatchEvent()`의 반환 값으로 이벤트 상태(취소 여부)를 알 수 있습니다.

### HTML

```html
<p>
  <label><input type="checkbox" id="checkbox" /> 체크됨</label>
</p>
<p>
  <button id="button">클릭해서 체크박스에 MouseEvent를 보내세요</button>
</p>
```

### JavaScript

```js
function simulateClick() {
  // 클릭 이벤트를 발송할 요소
  const cb = document.getElementById("checkbox");

  // 인공 클릭 MouseEvent 생성
  let evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  });

  // 체크박스 요소로 이벤트 발송
  cb.dispatchEvent(evt);
}
document.getElementById("button").addEventListener("click", simulateClick);
```

### 결과

명세서
---

| Specification |
| --- |
| UI Events # interface-mouseevent |
| CSSOM View Module # extensions-to-the-mouseevent-interface |
| Pointer Lock 2.0 # extensions-to-the-mouseevent-interface |

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

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

같이 보기
-----

* 부모 인터페이스 `UIEvent`
* 멀티터치 등 고급 포인터 이벤트를 위한 `PointerEvent`


ANGLE_instanced_arrays - Web API

ANGLE\_instanced\_arrays
========================

이 \*\*`ANGLE_instanced_arrays`\*\*확장은 WebGL API의 일부이며 동일한 객체 또는 동일한 객체 그룹을 같은 정점 데이터, 기본 개수 및 유형을 공유하는 경우 여러 번 그릴 수 있습니다.

WebGL 확장은 `WebGLRenderingContext.getExtension()` (en-US) 메서드를 사용하여 사용할 수 있습니다. 자세한 내용 은 WebGL 자습서의 Extensions 사용을 (en-US) 참조하십시오 .

**참고:** **가용성 :** 이 확장은 WebGL1 (en-US) 컨텍스트에서만 사용할 수 있습니다. WebGL2 (en-US)에서이 확장 기능은 기본적으로 WebGL2 컨텍스트에서 사용할 수 있으며 상수 및 메서드는 `ANGLE`접미사 없이 사용할 수 있습니다 ."ANGLE"이라는 이름에도 불구하고이 확장은 하드웨어가 ANGLE 라이브러리를 사용할 때 Windows에서만 지원하는 것이 아닌 모든 장치에서 작동합니다. "ANGLE"은이 확장이 ANGLE 라이브러리 작성자에 의해 작성되었음을 나타냅니다.

상수
--

이 확장은 `gl.getVertexAttrib()` (en-US) 메서드에서 사용할 수있는 하나의 새로운 상수를 제공합니다.

`ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE`

`gl.getVertexAttrib()` (en-US)에서 `pname`매개 변수 로 사용될 때 인스턴스 렌더링에 사용되는 빈도 제수를 설명하는 `GLint` (en-US)를 반환합니다 .

메서드
---

이 확장은 세 가지 새로운 메서드를 노출합니다.

`ext.drawArraysInstancedANGLE ()`

`gl.drawArrays ()`와 동일하게 동작하지만 요소 범위의 인스턴스가 여러 개 실행되고 각 반복마다 인스턴스가 진행됩니다.

`ext.drawElementsInstancedANGLE ()`

`gl.drawElements ()`와 동일하게 동작하지만 요소 세트의 여러 인스턴스가 실행되고 각 세트간에 인스턴스가 진행됩니다.

`ext.vertexAttribDivisorANGLE ()`

`ext.drawArraysInstancedANGLE ()` 및 `ANGLE_instanced_arrays.drawElementsInstancedANGLE ()`로 여러 프리미티브 인스턴스를 렌더링 할 때 일반 정점 속성이 증가하는 비율을 수정합니다. , "ext.drawElementsInstancedANGLE ()")}}.

예제
--

확장 기능 사용 :

```js
var ext = gl.getExtension("ANGLE\_instanced\_arrays");
```

명세서
---

| Specification |
| --- |
| WebGL ANGLE\_instanced\_arrays Khronos Ratified Extension Specification  |

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

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

같이 보기
-----

* `WebGLRenderingContext.getExtension ()`
* `WebGL2RenderingContext.drawArraysInstanced ()`
* `WebGL2RenderingContext.drawElementsInstanced ()`
* `WebGL2RenderingContext.vertexAttribDivisor ()`


DOMRect - Web API

DOMRect
=======

**`DOMRect`** 인터페이스는 직사각형의 크기와 위치를 나타냅니다.

`DOMRect`가 나타내는 사각형의 유형은 `DOMRect`를 반환한 메서드나 속성이 지정합니다. 예를 들어 WebVR API의 `VREyeParameters.renderRect` (en-US)는, 헤드 마운트 디스플레이에서 한쪽 눈의 뷰포트가 캔버스의 어디에 위치하는지 나타냅니다.

부모인 `DOMRectReadOnly` (en-US)을 상속합니다.

DOMRectReadOnly

(en-US)

DOMRect생성자
---

`DOMRect()`

새로운 `DOMRect` 객체를 생성합니다.

속성
--

부모인 `DOMRectReadOnly` (en-US)의 속성을 상속합니다. 읽기 전용 속성이 아니라는 차이점이 있습니다.

`DOMRectReadOnly.x` (en-US)

`DOMRect` 원점의 X 좌표입니다. 원점은 보통 직사각형의 왼쪽 상단 꼭지점입니다.

`DOMRectReadOnly.y` (en-US)

`DOMRect` 원점의 Y 좌표입니다. 원점은 보통 직사각형의 왼쪽 상단 꼭지점입니다.

`DOMRectReadOnly.width` (en-US)

`DOMRect`의 너비입니다.

`DOMRectReadOnly.height` (en-US)

`DOMRect`의 높이입니다.

`DOMRectReadOnly.top` (en-US)

`DOMRect` 위쪽 모서리의 Y 좌표입니다. `y` 또는, `height`가 음수인 경우, `y + height`와 같은 값입니다.

`DOMRectReadOnly.right` (en-US)

`DOMRect` 오른쪽 모서리의 X 좌표입니다. `x` 또는, `width`가 음수인 경우, `x + height`와 같은 값입니다.

`DOMRectReadOnly.bottom` (en-US)

`DOMRect` 아래쪽 모서리의 Y 좌표입니다. `y + height` 또는, `height`가 음수인 경우, `y`와 같은 값입니다.

`DOMRectReadOnly.left` (en-US)

`DOMRect` 왼쪽 모서리의 X 좌표입니다. `x + width` 또는, `width`가 음수인 경우, `x`와 같은 값입니다.

메서드
---

부모인 `DOMRectReadOnly` (en-US)의 메서드를 상속합니다.

정적 메서드
------

`DOMRectReadOnly.fromRect()` (en-US)

주어진 위치와 면적을 갖는 새로운 `DOMRect` 객체를 생성합니다.

명세
--

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMRect |

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

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

같이 보기
-----

* `DOMPoint` (en-US)


Console API - Web API

Console API
===========

**Console API**는 개발자가 코드의 설정 지점에서 메시지나 변수 값을 로깅 하거나, 작업 완료에 걸리는 시간을 측정하는 등의 디버깅 작업을 수행할 수 있는 기능을 제공합니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

개념 및 사용법
--------

Console API는 처음에는 대부분 자체 개발 API로 시작되었으며, 브라우저마다 구현 방식이 다르고 일관성이 없었습니다. 콘솔 API 명세는 일관된 동작을 정의하기 위해 만들어졌으며, 모든 최신 브라우저는 결국 일관된 동작을 구현하기로 했지만, 일부 구현에는 여전히 자체적인 추가 함수가 있습니다. 여기에서 자세히 알아보세요.

* Google Chrome 개발자도구 구현
* Safari 개발자도구 구현

사용법은 매우 간단합니다. the `console` 객체에는 일반적으로 브라우저의 웹 콘솔에 다양한 값을 로깅 하는 데 중점을 두고 있고, 기초적인 디버깅 작업을 수행하기 위해 호출할 수 있는 많은 메서드가 포함되어 있습니다.

가장 일반적으로 사용되는 메서드는 `console.log`이며, 특정 변수 안에 포함된 현재 값을 기록하는 데 사용됩니다.

인터페이스
-----

`console`

로깅, 스택 추적, 타이머, 카운터 등 기초적인 디버깅 기능을 제공합니다.

예제
--

```js
let myString = "Hello world";

// 콘솔에 "Hello world"가 출력됩니다
console.log(myString);
```

더 많은 예제는 console 문서를 참조하세요.

명세
--

| Specification |
| --- |
| Console Standard # console-namespace |

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

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

같이 보기
-----

* Tools
* Web Console — Firefox의 웹 콘솔이 콘솔 API 호출을 처리하는 방법
* about:debugging — 디버깅 대상이 모바일 디바이스인 경우 콘솔 출력을 확인하는 방법


FormData - Web API

FormData
========

**`FormData`** 인터페이스는 form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공합니다. 또한 `XMLHttpRequest.send()` (en-US) 메서드를 사용하여 쉽게 전송할 수 있습니다. 인코딩 타입이 `"multipart/form-data"`로 설정된 경우, form에서 사용하는 것과 동일한 포맷을 사용해야 합니다.

간단한 `GET` 전송을 사용하는 경우에는 `<form>` 이 수행하는 방식으로 쿼리 매개 변수를 생성할 수 있습니다. 이 경우 `URLSearchParams` 생성자에 직접 전달할 수 있습니다.

`FormData` 를 구현하는 객체는 `entries()` 대신 `for...of` 구조를 직접 사용할 수 있습니다. `for (var p of myFormData)` 는 `for (var p of myFormData.entries())` 와 같습니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다.

생성자
---

`FormData()`

새로운 `FormData` 객체를 생성합니다.

메소드
---

`FormData.append()`

FormData 객체안에 이미 키가 존재하면 그 키에 새로운 값을 추가하고, 키가 없으면 추가합니다.

`FormData.delete()`

FormData 객체로부터 키/밸류 쌍을 삭제합니다.

`FormData.entries()`

이 객체에 담긴 모든 키/밸류 쌍을 순회할 수 있는 `iterator`를 반환합니다.

`FormData.get()`

`FormData` 객체 내의 값들 중 주어진 키와 연관된 첫번째 값을 반환합니다.

`FormData.getAll()`

`FormData` 객체 내의 값들 중 주어진 키와 연관된 모든 값이 담긴 배열을 반환합니다.

`FormData.has()`

`FormData` 객체에 특정 키가 포함되어 있는지 여부를 나타내는 boolean 을 반환합니다.

`FormData.keys()`

이 객체에 담긴 모든 키/벨류 쌍들의 모든 키들을 순회 할 수 있는 `iterator`를 반환합니다.

`FormData.set()`

`FormData` 객체 내에 있는 기존 키에 새 값을 설정하거나, 존재하지 않을 경우 키/밸류 쌍을 추가합니다.

`FormData.values()`

이 객체에 포함된 모든 밸류를 통과하는 `iterator`를 반환합니다.

명세
--

| Specification |
| --- |
| XMLHttpRequest Standard # interface-formdata |

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

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

See also
--------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Using FormData objects (en-US)
* `<form>`


HTML 드래그 앤 드롭 API - Web API

HTML 드래그 앤 드롭 API
=================

HTML 드래그 앤 드롭 인터페이스는 Firefox와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. 이 기능을 이용해 사용자는 *draggable* 요소를 마우스로 선택해 *droppable* 요소로 드래그하고, 마우스 버튼에서 손을 뗌으로써 요소를 드롭할 수 있습니다. 드래그하는 동안 draggable 요소는 반투명한 채로 마우스 포인터를 따라다닙니다.

웹 사이트나 확장 기능, XUL 어플리케이션을 위해, 다양한 요소를 draggable 요소로 만들 수 있고, 이벤트에 대한 draggable 요소의 반응들을 만들어내거나 droppable 요소를 자유자재로 만들 수 있습니다.

이 문서는 HTML 드래그 앤 드롭에 대한 전반적인 개요입니다. 인터페이스에 대한 설명과 드래그 앤 드롭 기능을 어플리케이션에서 사용하기 위한 기본적인 절차, 인터페이스의 상호 운용성에 대한 요약 등이 이 문서에 담겨있습니다.

드래그 이벤트
-------

HTML 드래그 앤 드롭은 `DOM event model` 과 *`drag events` (en-US)* 를 `mouse events` 로부터 상속받습니다. 보통 드래그는 사용자가 draggable 요소를 마우스로 선택하고, 마우스 포인터를 droppable 요소로 가져가 마우스 버튼을 때는 것으로 이루어집니다. 드래그하는 도중에 많은 이벤트가 발생하고, 몇몇 이벤트는 여러번 발생하기도 합니다. ( `drag (en-US)`와 `dragover (en-US)`).

모든 드래그 이벤트 (en-US)는 글로벌 이벤트 핸들러 (en-US)와 연결되어 있습니다. 각 드래그 이벤트와 드래그 전역 속성은 참조 문서를 가지고 있습니다. 아래 표는 각 이벤트에 대한 간략한 설명과 참조 문서로의 링크를 담고 있습니다.

| 이벤트 | 이벤트 핸들러 | 설명 |
| --- | --- | --- |
| `drag` | `ondrag` (en-US) | 요소나 텍스트 블록을 드래그 할 때 발생한다. |
| `dragend (en-US)` | `ondragend` (en-US) | 드래그를 끝냈을 때 발생한다. (마우스 버튼을 떼거나 ESC 키를 누를 때) (드래그 끝내기 (en-US)를 보시오) |
| `dragenter (en-US)` | `ondragenter` (en-US) | 드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때 발생한다. (드롭 대상 지정하기 (en-US)를 보시오.) |
| `dragexit` | `ondragexit` (en-US) | 요소가 더 이상 드래그의 직접적인 대상이 아닐 때 발생한다. |
| `dragleave (en-US)` | `ondragleave` (en-US) | 드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때 발생한다. |
| `dragover (en-US)` | `ondragover` (en-US) | 요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때 발생한다. (매 수백 밀리초마다 발생한다.) |
| `dragstart (en-US)` | `ondragstart` (en-US) | 사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생한다. (드래그 시작하기 (en-US)를 보시오.) |
| `drop (en-US)` | `ondrop` (en-US) | 요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생한다. (드롭하기 (en-US)를 보시오.) |

**참고:** `참고: dragstart`와 `dragend` 이벤트는 파일을 브라우저로 드래그할 때는 발생하지 않습니다.

인터페이스
-----

HTML 드래그와 드롭 인터페이스는 `DragEvent` (en-US), `DataTransfer`, `DataTransferItem` (en-US), `DataTransferItemList` (en-US) 입니다.

`DataTransfer` 객체는 드래그 형태나 드래그 데이터 (하나 이상의 아이템), 각 드래그 아이템의 종류 (MIME 종류) 와 같은 드래그 이벤트의 상태를 담고 있습니다. `DataTransfer` 는 또한 드래그 데이터에 아이템을 추가하거나 제거하는 메소드를 가지고 있습니다. The `DragEvent` (en-US) 와 `DataTransfer` 인터페이스만 있으면 어플리케이션에 HTML 드래그 앤 드롭 기능을 추가할 수 있습니다. 참고로 Firefox는 `DataTransfer`에 Gecko-specific extensions 와 같은 Firefox에서만 동작하는 추가적인 확장을 제공합니다.

`DataTransfer`는 `DataTransferItem` (en-US)의 `목록` (en-US) 인 `items` 프로퍼티를 가지고 있습니다. 각 `DataTransferItem` (en-US) 는 하나의 드래그 아이템을 나타내고 각 아이템은 데이터의 종류 (`string` 혹은 `file`) 를 나타내는 `kind` (en-US) 프로퍼티와 데이터 아이템의 종류 (MIME 종류) 를 나타내는 `type` (en-US) 프로퍼티를 가집니다. `DataTransferItem` (en-US)은 드래그 아이템의 데이터를 가져오는 메소드를 제공합니다.

`DataTransferItemList` (en-US) 객체는 `DataTransferItem` (en-US)의 리스트입니다. 이 리스트 객체는 세 개의 메소드 - 드래그 아이템을 리스트에 추가하거나, 리스트에서 아이템을 삭제하거나, 모든 드래그 아이템을 리스트에서 삭제하는 메소드 - 를 가집니다.

A key difference between the `DataTransfer` and `DataTransferItem` (en-US) interfaces is that the former uses the synchronous `getData()` method to access a drag item's data, whereas the later uses the asynchronous `getAsString()` (en-US) method to access a drag item's data.

`DataTransfer`와 `DataTransferItem` (en-US)의 가장 중요한 차이점은 전자는 드래그 아이템의 데이터에 접근하기 위해 동기 메소드인 `getData()`를 사용하는데 반해, 후자는 비동기 메소드인 `getAsString()` (en-US)를 사용한다는 점입니다.

**참고:** 참고: `DragEvent` (en-US) and `DataTransfer`는 여러 데스크탑 브라우저에서 폭넓게 지원하고 있습니다. 하지만 `DataTransferItem` (en-US)와 `DataTransferItemList` (en-US)는 제한적으로 사용 가능합니다. 드래그 앤 드롭의 상호 운용성에 대한 더 많은 정보를 찾아보기 위해 Interoperability를 보십시오.

### Gecko 한정 인터페이스

Mozilla와 Firefox는 표준 드래그 앤 드롭 모델에서 제공하지 않는 몇가지 기능들을 추가로 제공합니다. 여러 개의 아이템을 동시에 드래그하거나 파일과 같이 문자열이 아닌 데이터를 드래그 하기 위한 여러 편리한 기능을 제공합니다. 더 많은 정보를 찾아보기 위해, Dragging and Dropping Multiple Items을 보십시오. 덧붙여, 모든 Gecko 한정 프로퍼티나 Gecko 한정 메소드를 찾아보기 위해 `DataTransfer` 참조 페이지도 보시기 바랍니다.

기본
--

이번 절은 드래그 앤 드롭 기능을 추가하기 위한 기본적인 방법을 요약하고 있습니다. 각 절은 단계를 설명하고, 짧은 코드 예제와 추가적인 정보를 위한 링크를 포함합니다.

### 어떤 것이 *draggable*인지 확인하기

하나의 요소를 draggable로 만들기 위해서는 `draggable`와 `ondragstart` (en-US) 전역 이벤트 핸들러를 아래 예제 코드와 같이 추가해야합니다.

```js
function dragstart\_handler(ev) {
  console.log("dragStart");
  // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
  ev.dataTransfer.setData("text/plain", ev.target.id);
}
```

```html
<script>
 function dragstart\_handler(ev) {
 // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
 ev.dataTransfer.setData("text/plain", ev.target.id);
 }

 window.addEventListener("DOMContentLoaded", () => {
 // id를 통해 element를 가져옵니다.
 const element = document.getElementById("p1");
 // 'dragstart' 이벤트 리스터를 추가합니다.
 element.addEventListener("dragstart", dragstart\_handler);
 });
</script>

<p id="p1" draggable="true">This element is draggable.</p>
```

추가 정보를 위해 draggable attribute reference와 Drag operations guide (en-US)를 참고하세요.

### 드래그 데이터 정의하기

드래그할 때 자유롭게 데이터 아이템을 포함할 수 있습니다. 각 데이터 아이템은 특정 `type`의 `문자열`이며, 보통 `text/html`와 같은 MIME type입니다.

각 `drag event` (en-US) 은 이벤트 데이터를 가지고 있는 `dataTransfer` (en-US) 를 가집니다. 이 프로퍼티는 (`DataTransfer` 객체) 드래그 데이터를 관리하는 메소드를 가집니다. `setData()` (en-US) 는 아래 코드 예제와 같이 아이템을 드래그 데이터에 추가할 때 사용합니다.

```js
function dragstart\_handler(ev) {
  // 드래그 데이터를 추가합니다.
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
}
```

드래그 앤 드롭에 사용할 수 있는 공통 데이터 타입 (텍스트, HTML, 링크, 파일 등) 의 목록을 보려면, Recommended Drag Types (en-US)를 참고하십시오. 드래그 데이터에 대한 추가적인 정보를 위해서는 Drag Data (en-US)를 참고하십시오.

### 드래그 이미지 정의하기

브라우저는 드래그 하는 동안 마우스 포인터 옆에 나타나는 이미지를 기본적으로 제공합니다. 어플리케이션에서 다른 이미지를 사용하기 원한다면 아래 예제와 같이 `setDragImage()` (en-US)를 사용할 수 있습니다.

```js
function dragstart\_handler(ev) {
  // 드래그 이미지로 사용할 이미지를 만듭니다.
  // 참고: "example.gif"를 존재하는 이미지로 바꾸지 않으면 기본 드래그 이미지를 사용합니다.
  var img = new Image();
  img.src = "example.gif";
  ev.dataTransfer.setDragImage(img, 10, 10);
}
```

드래그 이미지에 대해 더 알아보려면, Setting the Drag Feedback Image (en-US)를 참고하세요.

### 드래그 효과 정의하기

`dropEffect` (en-US) 프로퍼티는 드래그 앤 드롭 도중에 사용자에게 피드백 (보통 시각적인) 을 제공하기 위해 사용합니다. 브라우저가 드래그 하는 동안 어떤 마우스 포인터를 보여줄 지 결정합니다. 사용자가 마우스 포인터를 대상 드롭 요소에 올려놓으면, 브라우저는 드래그 효과에 적합한 마우스 포인터를 보여줄 것입니다.

세 개의 효과가 정의되어 있습니다:

`copy`는 현재 위치에서 드롭하는 위치로 데이터가 복사될 것을 암시합니다.

`move`는 현재 위치에서 드롭하는 위치로 데이터가 이동할 것을 암시합니다.

`link`는 드래그하는 위치와 드롭하는 위치 간의 일종의 관계나 연결이 맺어진 다는 것을 암시합니다.

특정 위치에서는 특정 효과가 허용된다는 것을 알려주기 위해 드래그 하는 도중에 효과가 변할 수 있습니다. 허용되는 경우에만 해당 위치에 드롭할 수 있습니다.

다음 예제는 어떻게 이 프로퍼티를 사용하는지 보여줍니다.

```js
function dragstart\_handler(ev) {
  // 드래그 효과를 copy로 지정합니다.
  ev.dataTransfer.dropEffect = "copy";
}
```

더 자세한 설명은 Drag Effects (en-US)를 참고하세요.

### 드롭 지역 정의하기

기본적으로는 브라우저는 HTML 요소에 뭔가를 드롭했을 때 아무 일도 일어나지 않도록 합니다. 특정 요소가 드롭 지역 혹은 droppable로 만들기 위해서는 해당 요소가 `ondragover` (en-US)와 `ondrop` (en-US) 이벤트 핸들러 속성을 가져야합니다. 아래 예제는 두 요소를 어떻게 사용하고, 각 요소에 포함된 기본적인 이벤트 핸들러를 보여줍니다.

```html
<script>
 function dragover\_handler(ev) {
 ev.preventDefault();
 // dropEffect를 move로 설정.
 ev.dataTransfer.dropEffect = "move";
 }
 function drop\_handler(ev) {
 ev.preventDefault();
 // 대상의 id를 가져와 대상 DOM에 움직인 요소를 추가합니다.
 const data = ev.dataTransfer.getData("text/plain");
 ev.target.appendChild(document.getElementById(data));
 }
</script>

<p
 id="target"
 ondrop="drop\_handler(event)"
 ondragover="dragover\_handler(event)">
  Drop Zone
</p>
```

각 핸들러는 `preventDefault()` 를 호출해 추가적인 이벤트 (터치 이벤트나 포인터 이벤트) 가 일어나지 않도록 합니다.

추가적인 정보는, Specifying Drop Targets (en-US)를 참고하세요.

### 드롭 효과 다루기

`drop (en-US)` 이벤트 핸들러는 자유롭게 드래그 데이터를 가공할 수 있습니다. 보통, 드래그 아이템과 각 아이템을 가공하기 위해 `getData()`를 사용합니다. 추가로, `dropEffect` (en-US) 값이나 보조키 상태에 따라 어플리케이션이 어떻게 동작할지를 결정할 수 있습니다.

아래 예제는 드롭 핸들러가 드래그 데이터로부터 드래그하는 요소의 id를 가져와 드래그하는 요소를 드롭하는 요소로 옮기기위해 사용합니다.

```html
<script>
 function dragstart\_handler(ev) {
 // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
 ev.dataTransfer.setData("application/my-app", ev.target.id);
 ev.dataTransfer.dropEffect = "move";
 }
 function dragover\_handler(ev) {
 ev.preventDefault();
 ev.dataTransfer.dropEffect = "move";
 }
 function drop\_handler(ev) {
 ev.preventDefault();
 // 대상의 id를 가져와 이동한 대상 DOM 요소를 추가합니다.
 // Get the id of the target and add the moved element to the target's DOM
 const data = ev.dataTransfer.getData("application/my-app");
 ev.target.appendChild(document.getElementById(data));
 }
</script>

<p id="p1" draggable="true" ondragstart="dragstart\_handler(event)">
  This element is draggable.
</p>
<div
 id="target"
 ondrop="drop\_handler(event)"
 ondragover="dragover\_handler(event)">
  Drop Zone
</div>
```

더 많은 정보를 위해 Performing a Drop (en-US)을 보십시오.

### 드래그가 끝나면

드래그가 끝나면 드래그한 요소에 `dragend (en-US)` 이벤트가 발생합니다. 이 이벤트는 드래그가 완료되거나 중간에 취소되어도 발생합니다. `dragend (en-US)` 이벤트 핸들러는 `dropEffect` (en-US) 프로퍼티를 확인해 드래그가 성공했는지를 확인할 수 있습니다.

드래그 끝을 다루기 위한 더 많은 정보는 Finishing a Drag (en-US)를 참고하세요.

상호 운용성
------

DataTransferItem interface's Browser Compatibility table (en-US)에 나온 대로, 드래그 앤 드롭은 상대적으로 여러 데스크톱 브라우저에서 폭넓게 사용할 수 있습니다 (`DataTransferItem` (en-US)는 `DataTransferItemList` (en-US) 덜 지원하지만). 또한 모바일 브라우저에서는 매우 한정적으로 사용할 수 있습니다.

예제와 데모
------

* Copying and moving elements with the `DataTransfer` interface
* Copying and moving elements with the `DataTransferListItem` interface
* 파일 드래그 앤 드롭; Firefox 전용: http://jsfiddle.net/9C2EF/
* 파일 드래그 앤 드롭; 모든 브라우저: https://jsbin.com/hiqasek/
명세서
---

| Specification |
| --- |
| HTML Standard  |

더보기
---

* Drag Operations (en-US)
* Dragging and Dropping Multiple Items
* Recommended Drag Types (en-US)
* HTML5 Living Standard: Drag and Drop
* Drag and Drop interoperability data from CanIUse