충돌 감지 - 게임 개발

충돌 감지
=====

* « 이전
* 다음 »

이 학습은 Gamedev Canvas tutorial의 일곱 번째 단계입니다. Gamedev-Canvas-workshop/lesson7.html에서 이번 학습에서 완성된 코드를 확인할 수 있습니다.

지난 학습에서 우린 화면에 벽돌을 표현했습니다. 그러나 공은 벽돌을 그냥 지나쳐버리니 게임은 아직 그렇게 흥미롭지 않습니다. 우린 공이 벽돌을 파괴하고 튕겨져 나올 수 있도록 충돌 감지 기능을 고려해봐야 합니다.

물론 어떻게 적용할지는 우리가 결정할 문제입니다. 그러나 공이 벽돌에 닿았는지 계산하는 일은 꽤나 까다로울 수 있습니다. 왜냐하면 캔버스엔 이를 위한 기능이 없기 때문입니다. 이번 학습은 가능한 쉬운 방법으로 진행될 것입니다. 우린 공의 중앙이 어느 벽돌과 충돌하는지 확인할 것입니다. 이는 항상 완벽한 결과를 주진 않지만, 충돌 감지를 위한 정교한 방법은 무궁무진합니다. 그러나 이 방법 역시 기본적인 개념을 학습하기에 꽤 괜찮습니다.

충돌 감지 함수
--------

이 모든 것을 시작하기 위해 우리는 모든 벽돌들을 순회하고 각 벽돌의 좌표를 공의 위치와 비교하는 충돌 감지 함수를 만들어야 합니다. 코드의 가독성을 향상시키기 위해 충돌 감지의 반복에서 사용할 벽돌 객체를 저장하는 `b`변수를 정의할 것입니다.

```js
function collisionDetection() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      const b = bricks[c][r];
      // calculations
    }
  }
}
```

만약 공의 중앙이 어떤 벽돌의 범위 내에 있을 경우, 공의 방향을 바꾸게 됩니다. 공이 벽돌 안에 존재하려면, 아래 4가지 조건이 참이어야 합니다.

* 공의 x 좌표는 벽돌의 x 좌표보다 커야 한다.
* 공의 x 좌표는 벽돌의 x 좌표 + 가로 길이보다 작아야 한다.
* 공의 y 좌표는 벽돌의 y 좌표보다 커야 한다.
* 공의 y 좌표는 벽돌의 y 좌표 + 높이보다 작아야 한다.

이 조건을 코드로 작성해봅시다.

```js
function collisionDetection() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      const b = bricks[c][r];
      if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
        dy = -dy;
      }
    }
  }
}
```

위 코드를 `keyUpHandler()` 함수 아래에 추가해봅시다.

충돌 후에 벽돌을 사라지게 만들기
------------------

위의 코드는 우리가 의도한대로 작동할 것이고 공은 방향을 바꿀 것입니다. 문제는 벽돌이 그대로 있다는 것입니다. 우린 이미 공이 부딪힌 벽돌을 제거하기 위한 방법을 고민해봐야 합니다. 우리는 화면에 있는 벽돌을 그릴지 결정하는 변수를 추가해서 이 문제를 해결할 수 있습니다, 벽돌을 초기화하는 코드에, `status` 속성을 각 벽돌 객체에 추가해봅시다. 아래와 같이 말입니다.

```js
const bricks = [];
for (let c = 0; c < brickColumnCount; c++) {
  bricks[c] = [];
  for (let r = 0; r < brickRowCount; r++) {
    bricks[c][r] = { x: 0, y: 0, status: 1 };
  }
}
```

다음으로 `drawBricks` 함수에서 벽돌들을 그리기 전에 `status` 속성을 확인해야 합니다. 만약 `status`가 1이라면 벽돌을 그리고, 만약 0이라면 이미 공이 치고 간 벽돌이므로 우린 더 이상 화면에 그릴 필요가 없습니다. 아래와 같이 `drawBricks` 함수를 수정해 봅시다.

```js
function drawBricks() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      if (bricks[c][r].status === 1) {
        const brickX = c \* (brickWidth + brickPadding) + brickOffsetLeft;
        const brickY = r \* (brickHeight + brickPadding) + brickOffsetTop;
        bricks[c][r].x = brickX;
        bricks[c][r].y = brickY;
        ctx.beginPath();
        ctx.rect(brickX, brickY, brickWidth, brickHeight);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }
    }
  }
}
```

충돌 감지 함수에서 상태 추적 및 업데이트
-----------------------

이제 `collisonDectection` 함수에 벽돌 `status` 속성을 포함시켜야 합니다. 만약 벽돌이 활성 상태(`status` 1)이라면 충돌이 일어났는지 확인해야 합니다. 만약 충돌이 발생했다면 다시 그리지 않게 벽돌의 속성을 0으로 변경해야 합니다. `collisionDetection` 함수를 아래와 같이 수정합시다.

```js
function collisionDetection() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      const b = bricks[c][r];
      if (b.status === 1) {
        if (
          x > b.x &&
          x < b.x + brickWidth &&
          y > b.y &&
          y < b.y + brickHeight
        ) {
          dy = -dy;
          b.status = 0;
        }
      }
    }
  }
}
```

충돌 감지 활성화하기
-----------

마지막으로 할일은 `draw`함수에서 `collisionDetection` 함수를 호출하는 것입니다. 아래 코드를 `draw` 함수에, `drawPaddle()` 아래에 추가해봅시다.

```js
collisionDetection();
```

코드 비교하기
-------

이제 매 프레임마다 충돌 감지를 확인할 것입니다. 이제 우린 벽돌을 파괴할 수 있습니다!

**참고:** **연습하기: 벽돌이 부딪힐 때마다 색깔을 바꿔보세요.**

다음 단계
-----

우리는 충분히 여기까지 왔습니다! 이제 여덟 번째 장에서는 점수 추가와 승패 판정 방법을 알아 볼 것입니다.

* « 이전
* 다음 »


마우스로 패들 조종하기 - 게임 개발

마우스로 패들 조종하기
============

* « 이전
* 다음 »

이 레슨은 Gamedev Canvas tutorial의 10개 중 **9번째** 단계입니다. 당신은 Gamedev-Canvas-workshop/lesson9.html에서 완성된 소스코드를 찾을 수 있습니다.

게임 자체는 사실상 완성되었으므로, 이를 다듬는 작업을 해봅시다. 우리는 이미 키보드로 조종하는 코드를 추가했지만 마우스 조종하는 코드를 쉽게 추가할 수 있습니다.

마우스 이동 감지하기
-----------

마우스 움직임을 감지하는 것은 키 누름을 감지하는 것보다 더욱 쉽습니다. 우리에게 필요한 모든 것은 `mousemove` (en-US) 이벤트에 대한 리스너입니다. 이 `keyup event` 바로 아래에 이 행을 추가해보세요.

```js
document.addEventListener("mousemove", mouseMoveHandler, false);
```

마우스 움직임에 따라 패들 이동하기
-------------------

포인터 좌표에 따라 패들 위치를 업데이트할 수 있습니다. 다음의 핸들러 함수가 정확히 이것을 할 것입니다. 추가한 이전 줄 아래에 다음 함수를 추가해보세요.

```js
function mouseMoveHandler(e) {
  const relativeX = e.clientX - canvas.offsetLeft;
  if (relativeX > 0 && relativeX < canvas.width) {
    paddleX = relativeX - paddleWidth / 2;
  }
}
```

이 함수에서 우리는 첫번째로 `relativeX` 값을 계산하는데, 이는 뷰포트 (`e.clientX`) 안에 있는 가로 마우스 위치에 캔버스의 좌측 끝과 뷰포트 (`canvas.offsetLeft`) 의 좌측 끝 사이의 거리를 뺀 값과 같습니다. 이는 캔버스의 좌측 끝과 마우스 포인터 사이의 거리와 같습니다. 상대적인 X 포인터 위치가 0보다 크고 캔버스 폭보다 적으면 포인터가 경계 내에 있게 되고, `paddleX`의 위치(패들 왼쪽 가장자리에 배치되어 있습니다)는 패들 폭의 반을 뺀 `relativeX`의 값으로 설정되므로 이동은 패들의 중앙과 관련될 것입니다.

이제 패들은 마우스 커서의 움직임을 따르겠지만, 움직임을 캔버스 크기로 제한하고 있기 때문에 어느 쪽에서도 완전히 사라지지 않을 것입니다.

코드 비교하기
-------

지금까지 해왔던 코드를 한번 비교해보세요.

**참고:** 패들이 캔버스 양쪽 가장자리에서 반만 잘려나가 보일 것입니다. 패들 이동 제한 경계를 조정해 보세요.

다음 단계
-----

이제 우리는 완전한 게임을 할 수 있게 되었습니다. 우리는 몇 가지 작은 코드만으로 이 레슨을 마치게 될 것 입니다! — 마지막.

* « 이전
* 다음 »


게임 오버 - 게임 개발

게임 오버
=====

* « 이전
* 다음 »

이것은 Gamedev Canvas tutorial (en-US) 의 다섯 번째 학습입니다. 이 학습을 통해 완성된 코드는 Gamedev-Canvas-workshop/lesson5.html 에서 확인할 수 있습니다.

공이 벽에서 튕겨져 나오는 것과 패들을 움직이는 것을 보는건 재밌지만, 더 진전이 필요합니다. 게임에서 질 수 있다면 좋겠습니다. 벽돌 깨기 게임에서 패배하는 구조는 꽤 단순합니다. 만약 패들이 공을 놓친다면, 공은 캔버스의 아래 면에 닿을 것이고, 그대로 게임은 끝납니다.

게임 오버 기능 적용하기
-------------

'게임 오버' 기능을 만들어봅시다. 아래에 세 번째 학습에서 작성한, 벽에서 공을 반사시키는 코드의 일부가 있습니다.

```js
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
  dx = -dx;
}

if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
  dy = -dy;
}
```

사면 모두에서 공을 튕겨내지 말고 왼쪽, 위쪽, 오른쪽, 세 면에만 적용해봅시다. 아래쪽 면에 닿는 순간 게임은 끝납니다. 우리는 공이 밑면에 충돌하는 순간 "게임 오버" 상태로 바뀌게 하기 위해 두 번째 `if` 블록을 수정할 것입니다. 우선 경고 메시지를 보여주고 페이지를 리로딩해서 게임을 다시 시작하게 할 것입니다. 두번째 `if` 블록을 아래와 같이 수정해봅시다.

```js
if (y + dy < ballRadius) {
  dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
  alert("GAME OVER");
  document.location.reload();
}
```

Paddle은 공을 튕겨내야지
----------------

이번 학습에서 할 마지막 일은 공과 패들 사이의 충돌 감지같은, 공을 게임 화면으로 되돌아가게 튕겨내는 기능을 만드는 것입니다. 가장 쉬운 방법은 공의 중심이 패들의 내부에 있는지 확인하는 것이다. 위에서 수정한 코드를 약간 고쳐봅시다.

```js
if (y + dy < ballRadius) {
  dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
  if (x > paddleX && x < paddleX + paddleWidth) {
    dy = -dy;
  } else {
    alert("GAME OVER");
    document.location.reload();
  }
}
```

공이 캔버스의 밑면에 닿는 순간, 공이 패들의 안쪽에 있는지 확인해야 합니다. 만약 그렇다면, 우리가 기대하는대로 공은 튕겨져야 합니다. 그게 아니라면, 게임의 전과 같이 끝나야 합니다.

코드 비교하기
-------

여기 완성된 코드가 있으니 작성한 코드와 비교해봅시다.

**참고:** **연습**: 공이 패들에 닿았을 때 공의 속도를 빠르게 만들어봅시다.

다음 단계
-----

지금까지 아주 잘 하고 있습니다. 게임은 플레이 할 가치가 생겼고 이젠 게임이 끝날 수도 있습니다. 하지만 뭔가가 빠졌습니다. 여섯 번째 학습 — 벽돌 영역을 만들어보기 (en-US) — 로 이동해서 몇 개의 벽돌을 만들어 봅시다.

* « 이전
* 다음 »


공을 벽에 튕기기 - 게임 개발

공을 벽에 튕기기
=========

* « 이전
* 다음 »

이 글은 Gamedev Canvas 튜토리얼 (en-US)에 포함된 10단계 중 3단계 글입니다. 이 글을 다 읽고 난 뒤 완성된 소스코드는 Gamedev-Canvas-workshop/lesson3.html에서 확인해볼 수 있습니다.

공이 움직이는 걸 보니 기쁩니다! 하지만 기쁨을 즐길 틈도 없이 공이 스크린 밖으로 사라져버리네요. 이 문제를 해결하기 위해 공이 캔버스의 4군데 모서리에 다달았을 때 튕겨나올 수 있도록 간단한 충돌 감지 기능(더 자세한 내용은 다음 글 (en-US)에서 다시 설명할 예정입니다)을 구현해야 합니다.

간단한 충돌 감지
---------

충돌을 감지하기 위해서는 공이 벽에 닿았는지를 확인하고 그에 따라 움직이는 방향을 수정해야 합니다.

보다 계산을 쉽게 하기 위하여 `ballRadius` 변수를 만든 뒤 원의 반지름 값을 대입하여 계산하는데 사용합니다. 아래의 코드를 기존의 변수들 아래에 삽입하세요:

```js
const ballRadius = 10;
```

이제`drawBall()` func기능 안에 볼을 그리는 코드를 아래와 같이 수정하세요:

```js
ctx.arc(x, y, ballRadius, 0, Math.PI \* 2);
```

### 위 아래 방향으로 튕기기

캔버스에는 총 4개의 모서리 즉, 4개의 벽이 있습니다. 일단 상단의 벽에 집중해 보겠습니다. 공을 그리는 매 프레임마다 우리는 볼이 상단 모서리에 닿았는지 확인해야합니다 — 닿았다면 볼이 움직이는 방향을 반대로 바꾸어 캔버스 안에 여전히 공이 보이도록 만들어주어야 합니다. 캔버스 내 위치 구조는 좌상단으로 부터 시작하는 것을 잊지마세요:

```js
if (y + dy < 0) {
  dy = -dy;
}
```

만약 공의 위치에서 `y`값이 0보다 작은 경우 음/양수를 반대로 바꾸어주어 y 축의 방향을 바꾸어 줍니다. 공이 매 프레임마다 2픽셀만큼 움직이고 있었다면, 이제는 매 프레임마다 2픽셀만큼 "아래 방향으로" 이동할 것입니다.

위 코드는 상단 모서리를 튕기도록 해주기 때문에 이번엔 하단 모서리를 튕기도록 해보겠습니다:

```js
if (y + dy > canvas.height) {
  dy = -dy;
}
```

공의 위치에서 y값이 캔버스의 높이보다 큰 경우(좌상단으로부터 y값을 측정하기 때문에 상단모서리에서의 y값은 0, 하단모서리에서의 y값은 480, 즉 캔버서의 높이값임을 잊지마세요) y축 움직임의 반대 방향으로 튕겨냅니다.

위의 두가지 코드를 하나로 합칠 수 있습니다:

```js
if (y + dy > canvas.height || y + dy < 0) {
  dy = -dy;
}
```

둘 중 하나의 조건이라도 `true`를 만족한다면, 공의 방향은 반대로 바뀝니다.

### 좌우로 튕겨내기

우리는 방금 상, 하단 모서리를 인식했으므로 이번엔 좌우 모서리를 생각해봅시다. 거의 같은 문제이므로 우리는 `y` 대신 `x`값을 대입하여 그대로 반복해주기만 하면 됩니다:

```js
if (x + dx > canvas.width || x + dx < 0) {
  dx = -dx;
}

if (y + dy > canvas.height || y + dy < 0) {
  dy = -dy;
}
```

이 후 위 코드를 draw() 함수블럭이 끝나는 중괄호 바로 전에 삽입합니다.

### 공이 여전히 벽 밖으로 사라져요!

코드를 테스트해보세요. — 아마 캔버스 모서리에서 튕겨나오는 볼이 인상적이지 않나요? 하지만 또 다른 문제가 생겼습니다. — 공이 벽을 튕겨나와 방향이 바뀌기 전에 살짝 벽 안으로 숨어버리네요:

![skyblue ball disappearing into the top of the white wall.](/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls/ball-in-wall.png)

이 문제는 우리가 충돌을 감지할 때 그 기준을 공의 원점에 두고 계산했지만, 원의 둘레를 기준으로 계산을 해야 하기 때문입니다. 벽에 공이 절반쯤 지난 뒤가 아니라 닿자마자 튕겨나와야 합니다. 이에 맞게 코드를 조금 수정해봅시다. 여러분이 삽입한 코드를 아래와 같이 수정해보세요:

```js
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
  dx = -dx;
}
if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
  dy = -dy;
}
```

공의 원점과 벽 사이의 거리가 공의 반지름과 같아졌을 때 공의 움직임이 바뀌도록 만들었습니다. 이제야 볼이 정확히 튕겨나오고 있네요.

여러분의 코드를 비교해보세요
---------------

자, 다시 여러분이 작성한 코드를 완성된 코드와 비교해보고 게임을 실행해보세요:

**참고:** 공이 벽에 부딪힐 때마다 공의 색을 무작위로 변화시켜보세요.

다음 단계
-----

이제 우리는 공이 게임판 안에서 어디서 어떻게 움직이고 있는지 파악했습니다. 네번째 챕터에서는 조작 가능한 배드를 구현해볼 것입니다. — 패드와 키보드 조작 (en-US).

* « 이전
* 다음 »


캔버스 생성과 그리기 - 게임 개발

캔버스 생성과 그리기
===========

* « 이전
* 다음 »

이 강의는 게임 개발 캔버스 튜토리얼의 10단계 중 첫 번째 과정입니다. Gamedev-Canvas-workshop/lesson1.html에서 이 강의의 완성된 코드를 볼 수 있습니다.

게임의 기능들을 작성하기 전에, 게임 내부에 렌더링 하기 위한 기본 구조들을 HTML과 `<canvas>` 엘리먼트를 사용하여 만들어야 합니다.

게임의 HTML
--------

HTML문서 구조는 꽤 간단합니다. 게임은 `<canvas>` 엘리먼트에 렌더링됩니다. 여러분이 좋아하는 텍스트 에디터로 새로운 HTML 문서를 생성하여 index.html로 저장하고, 아래 코드를 추가하세요.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
 \* {
 padding: 0;
 margin: 0;
 }
 canvas {
 background: #eee;
 display: block;
 margin: 0 auto;
 }
 </style>
  </head>
  <body>
    <canvas id="myCanvas" width="480" height="320"></canvas>

    <script>
 // JavaScript 코드가 여기에 들어갈 것입니다.
 </script>
  </body>
</html>
```

`<head>` 에는 문자셋이 정의되어 있고, `<title>`과 몇가지 기본적인 CSS가 있습니다. `<body>`는 `<canvas>` 와 `<script>`를 포함하고 있습니다. `<canvas>`에는 게임이 렌더되고, `<script>`에는 JavaScript가 들어갑니다. `<canvas>`엘리먼트는 쉽게 참조하기 위해 id로 `myCanvas`를 갖고 있고, 480픽셀의 길이와 320픽셀의 높이를 갖도록 되어있습니다. 우리가 이 튜토리얼에서 작성하게될 모든 JavaScript 코드는 `<script>`와 `</script>` 태그 사이에 들어가게 됩니다.

캔버스 기본
------

실제로 `<canvas>`엘리먼트 위에 그래픽을 렌더링하기 위해서는 JavaScript로 참조할 수 있게 만들어야 합니다. 다음 코드를 여러분의 `<script>` 태그 다음에 추가하세요..

```js
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
```

`<canvas>` 엘리먼트에 대한 참조를 `canvas` 변수에 저장하였습니다. 그러고 나서는 캔버스에 그리기 위해 실질적으로 사용되는 도구인 2D rendering context를 `ctx` 변수에 저장하고 있습니다.

캔버스에 빨간색 네모를 그리는 짧은 예제 코드를 작성해봅시다. 바로 직전의 JavaScript 코드 아래에 다음 코드를 추가하고 `index.html을` 브라우저에서 열어 보세요.

```js
ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
```

`beginPath()` (en-US)와 `closePath()` (en-US)메소드 사이에 모든 명령어가 들어갑니다. 우리는 `rect()` (en-US)를 이용해서 직사각형을 정의했는데, 처음 두 값들은 캔버스의 좌상단 모서리로 부터의 좌표를 의미하고, 나머지 두 값은 직사각형의 너비와 높이를 의미합니다. 위 코드에서 직사각형은 캔버스 좌측에서 20픽셀 떨어져있고, 캔버스 상단에서 40픽셀만큼 아래로 떨어져 있습니다. 그리고 너비와 높이는 각각 50픽셀로 설정되어 완벽한 정사각형으로 그려지고 있습니다. `fillStyle` (en-US)은 `fill()` (en-US)메소드에서 칠해질 색상 값을 갖게 됩니다. 위 코드에서는 사각형을 빨간색으로 칠하고 있습니다.

직사각형만 그릴 수 있는 것은 아닙니다. 이번에는 초록색 원을 그려보겠습니다. 아래의 코드를 여러분의 JavaScript의 마지막에 추가하고, 저장한 이후에 페이지를 새로고침 해보세요.

```js
ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI \* 2, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
```

위 코드에서 볼 수 있듯이`beginPath()` (en-US)와 `closePath()` (en-US)메소드가 다시 나왔습니다. 그 사이에, 가장 중요한 부분인 `arc()` (en-US) 메소드가 있습니다. 이 메소드는 6개의 파라미터를 갖습니다.

* `원의 중심을 가리키는 x와 y좌표`
* 원의 반지름
* 시작 각도와 끝 각도(원을 그릴 때 시작과 끝이되는 각도이며, 라디안 값입니다.)
* 그리는 방향(false를 넣으면 시계방향으로 그려집니다. 기본 값이나 true를 넣으면 반 시계방향으로 그려집니다.) 이 파라미터는 옵션입니다.

`fillStyle` (en-US)속성은 이전과 조금 달라 보이는데, 이는 CSS에서 색상을 표현하는 여러가지 방법 중 하나입니다. 색상을 표현할 때, 16진수로 색상값을 표현하거나, 색상 키워드를 사용하거나, rgba() 함수를 사용하거나 그외에 다른 색상 메소드를 사용할 수 있습니다.

`fill()` (en-US)을 사용해서 원에 색상을 채울 수 있다면,`stroke()` (en-US)를 이용하면 원의 외곽선에 색상을 부여할 수 있습니다. 아래의 코드들도 여러분의 JavaScript에 추가해보세요.

```js
ctx.beginPath();
ctx.rect(160, 10, 100, 40);
ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
ctx.stroke();
ctx.closePath();
```

위 코드는 비어있는 파란색 외곽선으로 된 원을 그립니다. `rgba()` 함수의 알파 채널 값 때문에 파란색은 반투명하게 표현됩니다.

여러분의 코드와 비교해 보세요
----------------

JSFiddle에서 라이브로 실행되는 전체 코드입니다.

**참고:** **연습해보기**: 주어진 모양들의 크기와 색상을 변경해보세요.

다음 단계로
------

이제 우리는 기본적인 HTML을 설정하고, canvas에 대해 조금 배웠습니다. 두 번째 챕터로 넘어가서 게임에서 공을 움직이기위해 어떻게 해야 하는지 계속 알아봅시다.

* « 이전
* 다음 »


Web API

Web API
=======

웹 코드를 작성한다면 많은 API를 사용할 수 있습니다. 아래 목록은 웹 앱이나 웹 사이트를 만들 때 사용할 수 있는 모든 인터페이스(객체의 유형)입니다.

Web API는 보통 JavaScript와 함께 사용하지만, 항상 그렇지는 않습니다.

명세
--

사용 가능한 API의 전체 목록입니다.

### A

* Audio Output Devices API (en-US)
Experimental

### B

* Background Fetch API
Experimental
* Background Sync (en-US)
Experimental
* Background Tasks
* Badging API (en-US)
* Barcode Detection API (en-US)
Experimental
* Battery API
* Beacon
* Bluetooth API
Experimental
* Broadcast Channel API

### C

* CSS Counter Styles
* CSS Custom Highlight API (en-US)
* CSS Font Loading API (en-US)
* CSS Painting API (en-US)
Experimental
* CSS Properties and Values API (en-US)
* CSS Typed Object Model API (en-US)
* CSSOM
* Canvas API
* Channel Messaging API (en-US)
* Clipboard API
* Compression Streams API
* Console API
* Contact Picker API (en-US)
Experimental
* Content Index API (en-US)
Experimental
* Cookie Store API (en-US)
Experimental
* Credential Management API

### D

* DOM
* Device Memory API (en-US)
* Device Orientation Events
* Document Picture-in-Picture API (en-US)
Experimental

### E

* EditContext API (en-US)
Experimental
* Encoding API
* Encrypted Media Extensions (en-US)
* EyeDropper API (en-US)
Experimental

### F

* FedCM API (en-US)
Experimental
* Fetch API
* File API
* File System API (en-US)
* File and Directory Entries API
* Force Touch Events (en-US)
비표준
* Fullscreen API

### G

* Gamepad API
* Geolocation API
* Geometry Interfaces

### H

* HTML DOM
* HTML Drag and Drop API
* HTML Sanitizer API (en-US)
Experimental
* History API
* Houdini API (en-US)

### I

* Idle Detection API
Experimental
* Image Capture API
Experimental
* IndexedDB
* Ink API (en-US)
Experimental
* Input Device Capabilities API (en-US)
Experimental
* Insertable Streams for MediaStreamTrack API (en-US)
* Intersection Observer API

### K

* Keyboard API (en-US)
Experimental

### L

* Launch Handler API (en-US)
Experimental
* Local Font Access API (en-US)
Experimental

### M

* Media Capabilities API (en-US)
* Media Capture and Streams
* Media Session API (en-US)
* Media Source Extensions (en-US)
Experimental
* MediaStream Recording (en-US)

### N

* Navigation API (en-US)
Experimental
* Network Information API
Experimental

### P

* Page Visibility API
* Payment Handler API (en-US)
Experimental
* Payment Request API (en-US)
* Performance API (en-US)
* Periodic Background Sync (en-US)
Experimental
* Permissions API
* Picture-in-Picture API (en-US)
* Pointer Events (en-US)
* Pointer Lock API (en-US)
* Popover API
* Presentation API (en-US)
Experimental
* Prioritized Task Scheduling API (en-US)
* Push API

### R

* Remote Playback API (en-US)
* Reporting API (en-US)
Experimental
* Resize Observer API (en-US)

### S

* SVG (en-US)
* Screen Capture API (en-US)
* Screen Orientation API
* Screen Wake Lock API (en-US)
* Selection API (en-US)
* Sensor API (en-US)
* Server Sent Events
* Service Workers API
* Shared Storage API (en-US)
Experimental
* Speculation Rules API (en-US)
Experimental
* Storage (en-US)
* Storage Access API (en-US)
* Streams

### T

* Touch Events (en-US)
* Trusted Types API (en-US)

### U

* UI Events (en-US)
* URL API (en-US)
* URL Pattern API (en-US)
Experimental
* User-Agent Client Hints API (en-US)
Experimental

### V

* Vibration API
* View Transitions API
Experimental
* VirtualKeyboard API
Experimental
* Visual Viewport (en-US)

### W

* Web Animations
* Web Audio API
* Web Authentication API (en-US)
* Web Components
* Web Crypto API (en-US)
* Web Locks API (en-US)
* Web MIDI API (en-US)
* Web NFC API
Experimental
* Web Notifications
* Web Serial API (en-US)
Experimental
* Web Share API (en-US)
* Web Speech API
* Web Storage API
* Web Workers API
* WebCodecs API (en-US)
* WebGL
* WebGPU API (en-US)
Experimental
* WebHID API (en-US)
Experimental
* WebOTP API (en-US)
* WebRTC
* WebTransport API (en-US)
* WebUSB API (en-US)
Experimental
* WebVR API (en-US)
비표준

지원이 중단되었습니다
* WebVTT (en-US)
* WebXR Device API (en-US)
Experimental
* Websockets API
* Window Controls Overlay API (en-US)
Experimental
* Window Management API (en-US)
Experimental

### X

* XMLHttpRequest API (en-US)

인터페이스
-----

사용 가능한 인터페이스(객체의 유형) 전체 목록입니다.

### A

* `AbortController`
* `AbortSignal`
* `AbsoluteOrientationSensor` (en-US)
* `AbstractRange` (en-US)
* `Accelerometer` (en-US)
Experimental
* `AesCbcParams` (en-US)
* `AesCtrParams` (en-US)
* `AesGcmParams` (en-US)
* `AesKeyGenParams` (en-US)
* `AmbientLightSensor` (en-US)
Experimental
* `AnalyserNode`
* `ANGLE_instanced_arrays`
* `Animation` (en-US)
* `AnimationEffect` (en-US)
* `AnimationEvent`
* `AnimationPlaybackEvent` (en-US)
* `AnimationTimeline` (en-US)
* `Attr`
* `AudioBuffer`
* `AudioBufferSourceNode`
* `AudioContext`
* `AudioData` (en-US)
Experimental
* `AudioDecoder` (en-US)
Experimental
* `AudioDestinationNode`
* `AudioEncoder` (en-US)
Experimental
* `AudioListener` (en-US)
* `AudioNode`
* `AudioParam`
* `AudioParamDescriptor`
* `AudioParamMap`
* `AudioProcessingEvent` (en-US)
지원이 중단되었습니다
* `AudioScheduledSourceNode`
* `AudioSinkInfo` (en-US)
Experimental
* `AudioTrack` (en-US)
* `AudioTrackList` (en-US)
* `AudioWorklet`
* `AudioWorkletGlobalScope`
* `AudioWorkletNode`
* `AudioWorkletProcessor`
* `AuthenticatorAssertionResponse` (en-US)
* `AuthenticatorAttestationResponse` (en-US)
* `AuthenticatorResponse` (en-US)

### B

* `BackgroundFetchEvent` (en-US)
Experimental
* `BackgroundFetchManager` (en-US)
Experimental
* `BackgroundFetchRecord` (en-US)
Experimental
* `BackgroundFetchRegistration` (en-US)
Experimental
* `BackgroundFetchUpdateUIEvent` (en-US)
Experimental
* `BarcodeDetector` (en-US)
Experimental
* `BarProp` (en-US)
* `BaseAudioContext`
* `BatteryManager`
* `BeforeInstallPromptEvent` (en-US)
Experimental

비표준
* `BeforeUnloadEvent` (en-US)
* `BiquadFilterNode`
* `Blob`
* `BlobEvent` (en-US)
* `Bluetooth` (en-US)
Experimental
* `BluetoothCharacteristicProperties` (en-US)
Experimental
* `BluetoothDevice` (en-US)
Experimental
* `BluetoothRemoteGATTCharacteristic` (en-US)
Experimental
* `BluetoothRemoteGATTDescriptor` (en-US)
Experimental
* `BluetoothRemoteGATTServer` (en-US)
Experimental
* `BluetoothRemoteGATTService` (en-US)
Experimental
* `BluetoothUUID` (en-US)
* `BroadcastChannel`
* `ByteLengthQueuingStrategy` (en-US)

### C

* `Cache`
* `CacheStorage` (en-US)
* `CanMakePaymentEvent` (en-US)
Experimental
* `CanvasCaptureMediaStreamTrack` (en-US)
* `CanvasGradient` (en-US)
* `CanvasPattern` (en-US)
* `CanvasRenderingContext2D` (en-US)
* `CaptureController` (en-US)
Experimental
* `CaretPosition` (en-US)
Experimental
* `CDATASection` (en-US)
* `ChannelMergerNode` (en-US)
* `ChannelSplitterNode` (en-US)
* `CharacterBoundsUpdateEvent` (en-US)
Experimental
* `CharacterData`
* `Client` (en-US)
* `Clients` (en-US)
* `Clipboard` (en-US)
* `ClipboardEvent`
* `ClipboardItem` (en-US)
* `CloseEvent` (en-US)
* `Comment`
* `CompositionEvent` (en-US)
* `CompressionStream` (en-US)
* `console`
* `ConstantSourceNode` (en-US)
* `ContactAddress` (en-US)
Experimental
* `ContactsManager` (en-US)
Experimental
* `ContentIndex` (en-US)
Experimental
* `ContentIndexEvent` (en-US)
Experimental
* `ContentVisibilityAutoStateChangeEvent` (en-US)
Experimental
* `ConvolverNode` (en-US)
* `CookieChangeEvent` (en-US)
Experimental
* `CookieStore` (en-US)
Experimental
* `CookieStoreManager` (en-US)
Experimental
* `CountQueuingStrategy` (en-US)
* `Credential` (en-US)
* `CredentialsContainer` (en-US)
* `Crypto`
* `CryptoKey` (en-US)
* `CryptoKeyPair` (en-US)
* `CSPViolationReportBody` (en-US)
* `CSS`
* `CSSAnimation` (en-US)
* `CSSConditionRule` (en-US)
* `CSSContainerRule` (en-US)
* `CSSCounterStyleRule` (en-US)
* `CSSFontFaceRule` (en-US)
* `CSSFontFeatureValuesRule` (en-US)
* `CSSFontPaletteValuesRule` (en-US)
* `CSSGroupingRule` (en-US)
* `CSSImageValue` (en-US)
* `CSSImportRule` (en-US)
* `CSSKeyframeRule` (en-US)
* `CSSKeyframesRule` (en-US)
* `CSSKeywordValue` (en-US)
* `CSSLayerBlockRule` (en-US)
* `CSSLayerStatementRule` (en-US)
* `CSSMathInvert` (en-US)
* `CSSMathMax` (en-US)
* `CSSMathMin` (en-US)
* `CSSMathNegate` (en-US)
* `CSSMathProduct` (en-US)
* `CSSMathSum` (en-US)
* `CSSMathValue` (en-US)
* `CSSMatrixComponent` (en-US)
* `CSSMediaRule`
* `CSSNamespaceRule` (en-US)
* `CSSNumericArray` (en-US)
* `CSSNumericValue` (en-US)
* `CSSPageRule` (en-US)
* `CSSPerspective` (en-US)
* `CSSPositionValue` (en-US)
비표준

지원이 중단되었습니다
* `CSSPrimitiveValue` (en-US)
지원이 중단되었습니다
* `CSSPropertyRule` (en-US)
* `CSSPseudoElement` (en-US)
Experimental
* `CSSRotate` (en-US)
* `CSSRule` (en-US)
* `CSSRuleList` (en-US)
* `CSSScale` (en-US)
* `CSSScopeRule` (en-US)
Experimental
* `CSSSkew` (en-US)
* `CSSSkewX` (en-US)
* `CSSSkewY` (en-US)
* `CSSStartingStyleRule` (en-US)
Experimental
* `CSSStyleDeclaration` (en-US)
* `CSSStyleRule` (en-US)
* `CSSStyleSheet` (en-US)
* `CSSStyleValue` (en-US)
* `CSSSupportsRule` (en-US)
* `CSSTransformComponent` (en-US)
* `CSSTransformValue` (en-US)
* `CSSTransition` (en-US)
* `CSSTranslate` (en-US)
* `CSSUnitValue` (en-US)
* `CSSUnparsedValue` (en-US)
* `CSSValue` (en-US)
지원이 중단되었습니다
* `CSSValueList` (en-US)
지원이 중단되었습니다
* `CSSVariableReferenceValue` (en-US)
* `CustomElementRegistry`
* `CustomEvent`
* `CustomStateSet` (en-US)
Experimental

### D

* `DataTransfer`
* `DataTransferItem` (en-US)
* `DataTransferItemList` (en-US)
* `DecompressionStream` (en-US)
* `DedicatedWorkerGlobalScope` (en-US)
* `DelayNode` (en-US)
* `DeprecationReportBody` (en-US)
Experimental
* `DeviceMotionEvent` (en-US)
* `DeviceMotionEventAcceleration` (en-US)
* `DeviceMotionEventRotationRate` (en-US)
* `DeviceOrientationEvent` (en-US)
* `DirectoryEntrySync` (en-US)
비표준

지원이 중단되었습니다
* `DirectoryReaderSync` (en-US)
비표준

지원이 중단되었습니다
* `Document`
* `DocumentFragment`
* `DocumentPictureInPicture` (en-US)
Experimental
* `DocumentPictureInPictureEvent` (en-US)
Experimental
* `DocumentTimeline` (en-US)
* `DocumentType`
* `DOMError` (en-US)
지원이 중단되었습니다
* `DOMException` (en-US)
* `DOMHighResTimeStamp` (en-US)
* `DOMImplementation` (en-US)
* `DOMMatrix` (WebKitCSSMatrix) (en-US)
* `DOMMatrixReadOnly` (en-US)
* `DOMParser`
* `DOMPoint` (en-US)
* `DOMPointReadOnly` (en-US)
* `DOMQuad` (en-US)
* `DOMRect`
* `DOMRectReadOnly` (en-US)
* `DOMStringList` (en-US)
* `DOMStringMap` (en-US)
* `DOMTokenList` (en-US)
* `DragEvent` (en-US)
* `DynamicsCompressorNode` (en-US)

### E

* `EcdhKeyDeriveParams` (en-US)
* `EcdsaParams` (en-US)
* `EcKeyGenParams` (en-US)
* `EcKeyImportParams` (en-US)
* `EditContext` (en-US)
Experimental
* `Element` (en-US)
* `ElementInternals` (en-US)
* `EncodedAudioChunk` (en-US)
Experimental
* `EncodedVideoChunk` (en-US)
* `ErrorEvent` (en-US)
* `Event`
* `EventCounts` (en-US)
* `EventSource` (en-US)
* `EventTarget`
* `ExtendableCookieChangeEvent` (en-US)
* `ExtendableEvent` (en-US)
* `ExtendableMessageEvent` (en-US)
* `EyeDropper` (en-US)
Experimental

### F

* `FeaturePolicy` (en-US)
Experimental
* `FederatedCredential` (en-US)
Experimental
* `FetchEvent` (en-US)
* `File`
* `FileEntrySync` (en-US)
비표준

지원이 중단되었습니다
* `FileList`
* `FileReader`
* `FileReaderSync` (en-US)
* `FileSystem` (en-US)
* `FileSystemDirectoryEntry` (en-US)
* `FileSystemDirectoryHandle` (en-US)
* `FileSystemDirectoryReader` (en-US)
* `FileSystemEntry` (en-US)
* `FileSystemFileEntry` (en-US)
* `FileSystemFileHandle` (en-US)
* `FileSystemHandle` (en-US)
* `FileSystemSync` (en-US)
비표준

지원이 중단되었습니다
* `FileSystemSyncAccessHandle` (en-US)
* `FileSystemWritableFileStream` (en-US)
* `FocusEvent` (en-US)
* `FontData` (en-US)
Experimental
* `FontFace` (en-US)
* `FontFaceSet` (en-US)
* `FontFaceSetLoadEvent` (en-US)
* `FormData`
* `FormDataEvent` (en-US)
* `FragmentDirective` (en-US)
Experimental

### G

* `GainNode` (en-US)
* `Gamepad` (en-US)
* `GamepadButton` (en-US)
* `GamepadEvent` (en-US)
* `GamepadHapticActuator` (en-US)
* `GamepadPose` (en-US)
Experimental
* `Geolocation`
* `GeolocationCoordinates`
* `GeolocationPosition`
* `GeolocationPositionError` (en-US)
* `GestureEvent` (en-US)
비표준
* `GPU` (en-US)
Experimental
* `GPUAdapter` (en-US)
Experimental
* `GPUAdapterInfo` (en-US)
Experimental
* `GPUBindGroup` (en-US)
Experimental
* `GPUBindGroupLayout` (en-US)
Experimental
* `GPUBuffer` (en-US)
Experimental
* `GPUCanvasContext` (en-US)
Experimental
* `GPUCommandBuffer` (en-US)
Experimental
* `GPUCommandEncoder` (en-US)
Experimental
* `GPUCompilationInfo` (en-US)
Experimental
* `GPUCompilationMessage` (en-US)
Experimental
* `GPUComputePassEncoder` (en-US)
Experimental
* `GPUComputePipeline` (en-US)
Experimental
* `GPUDevice` (en-US)
Experimental
* `GPUDeviceLostInfo` (en-US)
Experimental
* `GPUError` (en-US)
Experimental
* `GPUExternalTexture` (en-US)
Experimental
* `GPUInternalError` (en-US)
Experimental
* `GPUOutOfMemoryError` (en-US)
Experimental
* `GPUPipelineError` (en-US)
Experimental
* `GPUPipelineLayout` (en-US)
Experimental
* `GPUQuerySet` (en-US)
Experimental
* `GPUQueue` (en-US)
Experimental
* `GPURenderBundle` (en-US)
Experimental
* `GPURenderBundleEncoder` (en-US)
Experimental
* `GPURenderPassEncoder` (en-US)
Experimental
* `GPURenderPipeline` (en-US)
Experimental
* `GPUSampler` (en-US)
Experimental
* `GPUShaderModule` (en-US)
Experimental
* `GPUSupportedFeatures` (en-US)
Experimental
* `GPUSupportedLimits` (en-US)
Experimental
* `GPUTexture` (en-US)
Experimental
* `GPUTextureView` (en-US)
Experimental
* `GPUUncapturedErrorEvent` (en-US)
Experimental
* `GPUValidationError` (en-US)
Experimental
* `GravitySensor` (en-US)
* `Gyroscope` (en-US)

### H

* `HashChangeEvent` (en-US)
* `Headers` (en-US)
* `HID` (en-US)
Experimental
* `HIDConnectionEvent` (en-US)
Experimental
* `HIDDevice` (en-US)
Experimental
* `HIDInputReportEvent` (en-US)
Experimental
* `Highlight` (en-US)
* `HighlightRegistry` (en-US)
* `History`
* `HkdfParams` (en-US)
* `HmacImportParams` (en-US)
* `HmacKeyGenParams` (en-US)
* `HMDVRDevice` (en-US)
비표준

지원이 중단되었습니다
* `HTMLAllCollection` (en-US)
* `HTMLAnchorElement` (en-US)
* `HTMLAreaElement` (en-US)
* `HTMLAudioElement` (en-US)
* `HTMLBaseElement` (en-US)
* `HTMLBodyElement` (en-US)
* `HTMLBRElement`
* `HTMLButtonElement` (en-US)
* `HTMLCanvasElement`
* `HTMLCollection`
* `HTMLDataElement` (en-US)
* `HTMLDataListElement` (en-US)
* `HTMLDetailsElement` (en-US)
* `HTMLDialogElement` (en-US)
* `HTMLDivElement`
* `HTMLDListElement` (en-US)
* `HTMLDocument`
* `HTMLElement`
* `HTMLEmbedElement` (en-US)
* `HTMLFieldSetElement` (en-US)
* `HTMLFontElement` (en-US)
지원이 중단되었습니다
* `HTMLFormControlsCollection` (en-US)
* `HTMLFormElement` (en-US)
* `HTMLFrameSetElement` (en-US)
지원이 중단되었습니다
* `HTMLHeadElement` (en-US)
* `HTMLHeadingElement` (en-US)
* `HTMLHRElement` (en-US)
* `HTMLHtmlElement` (en-US)
* `HTMLIFrameElement` (en-US)
* `HTMLImageElement` (en-US)
* `HTMLInputElement` (en-US)
* `HTMLLabelElement` (en-US)
* `HTMLLegendElement` (en-US)
* `HTMLLIElement`
* `HTMLLinkElement` (en-US)
* `HTMLMapElement` (en-US)
* `HTMLMarqueeElement` (en-US)
지원이 중단되었습니다
* `HTMLMediaElement`
* `HTMLMenuElement` (en-US)
* `HTMLMenuItemElement` (en-US)
비표준

지원이 중단되었습니다
* `HTMLMetaElement` (en-US)
* `HTMLMeterElement` (en-US)
* `HTMLModElement` (en-US)
* `HTMLObjectElement` (en-US)
* `HTMLOListElement` (en-US)
* `HTMLOptGroupElement` (en-US)
* `HTMLOptionElement` (en-US)
* `HTMLOptionsCollection` (en-US)
* `HTMLOutputElement` (en-US)
* `HTMLParagraphElement` (en-US)
* `HTMLParamElement` (en-US)
지원이 중단되었습니다
* `HTMLPictureElement` (en-US)
* `HTMLPreElement` (en-US)
* `HTMLProgressElement` (en-US)
* `HTMLQuoteElement` (en-US)
* `HTMLScriptElement` (en-US)
* `HTMLSelectElement` (en-US)
* `HTMLSlotElement` (en-US)
* `HTMLSourceElement` (en-US)
* `HTMLSpanElement`
* `HTMLStyleElement` (en-US)
* `HTMLTableCaptionElement` (en-US)
* `HTMLTableCellElement` (en-US)
* `HTMLTableColElement` (en-US)
* `HTMLTableElement`
* `HTMLTableRowElement` (en-US)
* `HTMLTableSectionElement` (en-US)
* `HTMLTemplateElement`
* `HTMLTextAreaElement` (en-US)
* `HTMLTimeElement` (en-US)
* `HTMLTitleElement`
* `HTMLTrackElement` (en-US)
* `HTMLUListElement` (en-US)
* `HTMLUnknownElement` (en-US)
* `HTMLVideoElement`

### I

* `IDBCursor` (en-US)
* `IDBCursorWithValue` (en-US)
* `IDBDatabase` (en-US)
* `IDBFactory` (en-US)
* `IDBIndex` (en-US)
* `IDBKeyRange` (en-US)
* `IDBLocaleAwareKeyRange` (en-US)
Experimental

비표준
* `IDBObjectStore` (en-US)
* `IDBOpenDBRequest` (en-US)
* `IDBRequest` (en-US)
* `IDBTransaction` (en-US)
* `IDBVersionChangeEvent` (en-US)
* `IdentityCredential` (en-US)
Experimental
* `IdentityProvider` (en-US)
Experimental
* `IdleDeadline`
* `IdleDetector` (en-US)
Experimental
* `IIRFilterNode` (en-US)
* `ImageBitmap` (en-US)
* `ImageBitmapRenderingContext` (en-US)
* `ImageCapture`
Experimental
* `ImageData`
* `ImageDecoder` (en-US)
Experimental
* `ImageTrack` (en-US)
Experimental
* `ImageTrackList` (en-US)
Experimental
* `Ink` (en-US)
Experimental
* `InkPresenter` (en-US)
Experimental
* `InputDeviceCapabilities` (en-US)
Experimental
* `InputDeviceInfo` (en-US)
* `InputEvent`
* `InstallEvent` (en-US)
비표준

지원이 중단되었습니다
* `IntersectionObserver`
* `IntersectionObserverEntry` (en-US)
* `InterventionReportBody` (en-US)
Experimental

### K

* `Keyboard` (en-US)
Experimental
* `KeyboardEvent`
* `KeyboardLayoutMap` (en-US)
Experimental
* `KeyframeEffect` (en-US)

### L

* `LargestContentfulPaint` (en-US)
* `LaunchParams` (en-US)
Experimental
* `LaunchQueue` (en-US)
Experimental
* `LayoutShift` (en-US)
Experimental
* `LayoutShiftAttribution` (en-US)
Experimental
* `LinearAccelerationSensor` (en-US)
* `Location`
* `Lock` (en-US)
* `LockManager` (en-US)

### M

* `Magnetometer` (en-US)
Experimental
* `MathMLElement` (en-US)
* `MediaCapabilities` (en-US)
* `MediaDeviceInfo` (en-US)
* `MediaDevices`
* `MediaElementAudioSourceNode` (en-US)
* `MediaEncryptedEvent` (en-US)
* `MediaError` (en-US)
* `MediaKeyMessageEvent` (en-US)
* `MediaKeys` (en-US)
* `MediaKeySession` (en-US)
* `MediaKeyStatusMap` (en-US)
* `MediaKeySystemAccess` (en-US)
* `MediaList` (en-US)
* `MediaMetadata` (en-US)
* `MediaQueryList` (en-US)
* `MediaQueryListEvent` (en-US)
* `MediaRecorder` (en-US)
* `MediaRecorderErrorEvent` (en-US)
비표준

지원이 중단되었습니다
* `MediaSession` (en-US)
* `MediaSource` (en-US)
* `MediaSourceHandle` (en-US)
Experimental
* `MediaStream` (en-US)
* `MediaStreamAudioDestinationNode` (en-US)
* `MediaStreamAudioSourceNode` (en-US)
* `MediaStreamEvent` (en-US)
비표준

지원이 중단되었습니다
* `MediaStreamTrack`
* `MediaStreamTrackAudioSourceNode` (en-US)
* `MediaStreamTrackEvent` (en-US)
* `MediaStreamTrackGenerator` (en-US)
Experimental

비표준
* `MediaStreamTrackProcessor` (en-US)
Experimental
* `MediaTrackConstraints` (en-US)
* `MediaTrackSettings` (en-US)
* `MediaTrackSupportedConstraints` (en-US)
* `MerchantValidationEvent` (en-US)
지원이 중단되었습니다
* `MessageChannel` (en-US)
* `MessageEvent`
* `MessagePort` (en-US)
* `Metadata` (en-US)
Experimental

비표준
* `MIDIAccess` (en-US)
* `MIDIConnectionEvent` (en-US)
* `MIDIInput` (en-US)
* `MIDIInputMap` (en-US)
* `MIDIMessageEvent` (en-US)
* `MIDIOutput` (en-US)
* `MIDIOutputMap` (en-US)
* `MIDIPort` (en-US)
* `MimeType` (en-US)
지원이 중단되었습니다
* `MimeTypeArray` (en-US)
지원이 중단되었습니다
* `MouseEvent`
* `MouseScrollEvent` (en-US)
비표준

지원이 중단되었습니다
* `MutationEvent` (en-US)
지원이 중단되었습니다
* `MutationObserver`
* `MutationRecord`

### N

* `NamedNodeMap` (en-US)
* `NavigateEvent` (en-US)
Experimental
* `Navigation` (en-US)
Experimental
* `NavigationCurrentEntryChangeEvent` (en-US)
Experimental
* `NavigationDestination` (en-US)
Experimental
* `NavigationHistoryEntry` (en-US)
Experimental
* `NavigationPreloadManager` (en-US)
* `NavigationTransition` (en-US)
Experimental
* `Navigator`
* `NavigatorUAData` (en-US)
Experimental
* `NDEFMessage` (en-US)
Experimental
* `NDEFReader` (en-US)
Experimental
* `NDEFReadingEvent` (en-US)
Experimental
* `NDEFRecord` (en-US)
Experimental
* `NetworkInformation` (en-US)
Experimental
* `Node` (en-US)
* `NodeIterator` (en-US)
* `NodeList`
* `Notification`
* `NotificationEvent` (en-US)

### O

* `OES_draw_buffers_indexed` (en-US)
* `OfflineAudioCompletionEvent` (en-US)
* `OfflineAudioContext`
* `OffscreenCanvas`
* `OffscreenCanvasRenderingContext2D` (en-US)
* `OrientationSensor` (en-US)
* `OscillatorNode` (en-US)
* `OTPCredential` (en-US)
Experimental
* `OverconstrainedError` (en-US)

### P

* `PageTransitionEvent` (en-US)
* `PaintWorkletGlobalScope` (en-US)
Experimental
* `PannerNode` (en-US)
* `PasswordCredential` (en-US)
Experimental
* `Path2D` (en-US)
* `PaymentAddress` (en-US)
비표준

지원이 중단되었습니다
* `PaymentManager` (en-US)
Experimental
* `PaymentMethodChangeEvent` (en-US)
* `PaymentRequest` (en-US)
* `PaymentRequestEvent` (en-US)
Experimental
* `PaymentRequestUpdateEvent` (en-US)
* `PaymentResponse` (en-US)
* `Pbkdf2Params` (en-US)
* `Performance` (en-US)
* `PerformanceElementTiming` (en-US)
Experimental
* `PerformanceEntry`
* `PerformanceEventTiming` (en-US)
* `PerformanceLongTaskTiming` (en-US)
Experimental
* `PerformanceMark` (en-US)
* `PerformanceMeasure` (en-US)
* `PerformanceNavigation` (en-US)
지원이 중단되었습니다
* `PerformanceNavigationTiming` (en-US)
* `PerformanceObserver` (en-US)
* `PerformanceObserverEntryList` (en-US)
* `PerformancePaintTiming` (en-US)
* `PerformanceResourceTiming` (en-US)
* `PerformanceServerTiming` (en-US)
* `PerformanceTiming` (en-US)
지원이 중단되었습니다
* `PeriodicSyncEvent` (en-US)
Experimental
* `PeriodicSyncManager` (en-US)
Experimental
* `PeriodicWave`
* `Permissions` (en-US)
* `PermissionStatus` (en-US)
* `PictureInPictureEvent` (en-US)
* `PictureInPictureWindow` (en-US)
* `Plugin`
지원이 중단되었습니다
* `PluginArray` (en-US)
지원이 중단되었습니다
* `Point` (en-US)
비표준

지원이 중단되었습니다
* `PointerEvent`
* `PopStateEvent` (en-US)
* `PositionSensorVRDevice` (en-US)
비표준

지원이 중단되었습니다
* `Presentation` (en-US)
Experimental
* `PresentationAvailability` (en-US)
Experimental
* `PresentationConnection` (en-US)
Experimental
* `PresentationConnectionAvailableEvent` (en-US)
Experimental
* `PresentationConnectionCloseEvent` (en-US)
Experimental
* `PresentationConnectionList` (en-US)
Experimental
* `PresentationReceiver` (en-US)
Experimental
* `PresentationRequest` (en-US)
Experimental
* `ProcessingInstruction` (en-US)
* `ProgressEvent` (en-US)
* `PromiseRejectionEvent` (en-US)
* `PublicKeyCredential` (en-US)
* `PushEvent` (en-US)
* `PushManager` (en-US)
* `PushMessageData` (en-US)
* `PushSubscription` (en-US)
* `PushSubscriptionOptions` (en-US)

### R

* `RadioNodeList` (en-US)
* `Range`
* `ReadableByteStreamController` (en-US)
* `ReadableStream`
* `ReadableStreamBYOBReader` (en-US)
* `ReadableStreamBYOBRequest` (en-US)
* `ReadableStreamDefaultController` (en-US)
* `ReadableStreamDefaultReader` (en-US)
* `RelativeOrientationSensor` (en-US)
* `RemotePlayback` (en-US)
* `Report` (en-US)
* `ReportBody` (en-US)
* `ReportingObserver` (en-US)
* `Request`
* `ResizeObserver` (en-US)
* `ResizeObserverEntry` (en-US)
* `ResizeObserverSize` (en-US)
* `Response`
* `RsaHashedImportParams` (en-US)
* `RsaHashedKeyGenParams` (en-US)
* `RsaOaepParams` (en-US)
* `RsaPssParams` (en-US)
* `RTCAudioSourceStats` (en-US)
* `RTCCertificate` (en-US)
* `RTCCertificateStats` (en-US)
* `RTCDataChannel` (en-US)
* `RTCDataChannelEvent`
* `RTCDtlsTransport` (en-US)
* `RTCDTMFSender` (en-US)
* `RTCDTMFToneChangeEvent` (en-US)
* `RTCEncodedAudioFrame` (en-US)
* `RTCEncodedVideoFrame` (en-US)
* `RTCError` (en-US)
* `RTCErrorEvent` (en-US)
* `RTCIceCandidate`
* `RTCIceCandidatePair` (en-US)
* `RTCIceCandidatePairStats` (en-US)
* `RTCIceCandidateStats` (en-US)
* `RTCIceParameters` (en-US)
* `RTCIceTransport` (en-US)
* `RTCIdentityAssertion` (en-US)
Experimental
* `RTCInboundRtpStreamStats` (en-US)
* `RTCOutboundRtpStreamStats` (en-US)
* `RTCPeerConnection` (en-US)
* `RTCPeerConnectionIceErrorEvent` (en-US)
* `RTCPeerConnectionIceEvent` (en-US)
* `RTCPeerConnectionStats` (en-US)
* `RTCRemoteOutboundRtpStreamStats` (en-US)
* `RTCRtpCodecParameters` (en-US)
* `RTCRtpReceiver` (en-US)
* `RTCRtpScriptTransform` (en-US)
* `RTCRtpScriptTransformer` (en-US)
* `RTCRtpSender` (en-US)
* `RTCRtpStreamStats` (en-US)
* `RTCRtpTransceiver` (en-US)
* `RTCSctpTransport` (en-US)
* `RTCSessionDescription` (en-US)
* `RTCStatsReport` (en-US)
* `RTCTrackEvent` (en-US)
* `RTCTransformEvent` (en-US)
* `RTCTransportStats` (en-US)

### S

* `Sanitizer` (en-US)
Experimental
* `Scheduler` (en-US)
* `Scheduling` (en-US)
Experimental
* `Screen` (en-US)
* `ScreenDetailed` (en-US)
Experimental
* `ScreenDetails` (en-US)
Experimental
* `ScreenOrientation` (en-US)
* `ScriptProcessorNode` (en-US)
지원이 중단되었습니다
* `ScrollTimeline` (en-US)
Experimental
* `SecurePaymentConfirmationRequest` (en-US)
* `SecurityPolicyViolationEvent` (en-US)
* `Selection` (en-US)
* `Sensor` (en-US)
* `SensorErrorEvent` (en-US)
* `Serial` (en-US)
Experimental
* `SerialPort` (en-US)
Experimental
* `ServiceWorker`
* `ServiceWorkerContainer` (en-US)
* `ServiceWorkerGlobalScope` (en-US)
* `ServiceWorkerRegistration` (en-US)
* `ShadowRoot` (en-US)
* `SharedStorage` (en-US)
Experimental
* `SharedStorageOperation` (en-US)
Experimental
* `SharedStorageRunOperation` (en-US)
Experimental
* `SharedStorageSelectURLOperation` (en-US)
Experimental
* `SharedStorageWorklet` (en-US)
Experimental
* `SharedStorageWorkletGlobalScope` (en-US)
Experimental
* `SharedWorker`
* `SharedWorkerGlobalScope` (en-US)
* `SourceBuffer` (en-US)
* `SourceBufferList` (en-US)
* `SpeechGrammar` (en-US)
Experimental
* `SpeechGrammarList` (en-US)
Experimental
* `SpeechRecognition` (en-US)
* `SpeechRecognitionAlternative` (en-US)
* `SpeechRecognitionErrorEvent` (en-US)
* `SpeechRecognitionEvent` (en-US)
* `SpeechRecognitionResult` (en-US)
* `SpeechRecognitionResultList` (en-US)
* `SpeechSynthesis` (en-US)
* `SpeechSynthesisErrorEvent` (en-US)
* `SpeechSynthesisEvent` (en-US)
* `SpeechSynthesisUtterance` (en-US)
* `SpeechSynthesisVoice` (en-US)
* `StaticRange` (en-US)
* `StereoPannerNode` (en-US)
* `Storage`
* `StorageEvent`
* `StorageManager` (en-US)
* `StylePropertyMap` (en-US)
* `StylePropertyMapReadOnly` (en-US)
* `StyleSheet`
* `StyleSheetList` (en-US)
* `SubmitEvent` (en-US)
* `SubtleCrypto` (en-US)
* `SVGAElement` (en-US)
* `SVGAngle` (en-US)
* `SVGAnimateColorElement` (en-US)
지원이 중단되었습니다
* `SVGAnimatedAngle` (en-US)
* `SVGAnimatedBoolean` (en-US)
* `SVGAnimatedEnumeration` (en-US)
* `SVGAnimatedInteger` (en-US)
* `SVGAnimatedLength` (en-US)
* `SVGAnimatedLengthList` (en-US)
* `SVGAnimatedNumber` (en-US)
* `SVGAnimatedNumberList` (en-US)
* `SVGAnimatedPreserveAspectRatio` (en-US)
* `SVGAnimatedRect` (en-US)
* `SVGAnimatedString` (en-US)
* `SVGAnimatedTransformList` (en-US)
* `SVGAnimateElement` (en-US)
* `SVGAnimateMotionElement` (en-US)
* `SVGAnimateTransformElement` (en-US)
* `SVGAnimationElement` (en-US)
* `SVGCircleElement` (en-US)
* `SVGClipPathElement` (en-US)
* `SVGComponentTransferFunctionElement` (en-US)
* `SVGCursorElement` (en-US)
지원이 중단되었습니다
* `SVGDefsElement` (en-US)
* `SVGDescElement` (en-US)
* `SVGElement` (en-US)
* `SVGEllipseElement` (en-US)
* `SVGEvent` (en-US)
* `SVGFEBlendElement` (en-US)
* `SVGFEColorMatrixElement` (en-US)
* `SVGFEComponentTransferElement` (en-US)
* `SVGFECompositeElement` (en-US)
* `SVGFEConvolveMatrixElement` (en-US)
* `SVGFEDiffuseLightingElement` (en-US)
* `SVGFEDisplacementMapElement` (en-US)
* `SVGFEDistantLightElement` (en-US)
* `SVGFEDropShadowElement` (en-US)
* `SVGFEFloodElement` (en-US)
* `SVGFEFuncAElement` (en-US)
* `SVGFEFuncBElement` (en-US)
* `SVGFEFuncGElement` (en-US)
* `SVGFEFuncRElement` (en-US)
* `SVGFEGaussianBlurElement` (en-US)
* `SVGFEImageElement` (en-US)
* `SVGFEMergeElement` (en-US)
* `SVGFEMergeNodeElement` (en-US)
* `SVGFEMorphologyElement` (en-US)
* `SVGFEOffsetElement` (en-US)
* `SVGFEPointLightElement` (en-US)
* `SVGFESpecularLightingElement` (en-US)
* `SVGFESpotLightElement` (en-US)
* `SVGFETileElement` (en-US)
* `SVGFETurbulenceElement` (en-US)
* `SVGFilterElement` (en-US)
* `SVGFontElement` (en-US)
지원이 중단되었습니다
* `SVGFontFaceElement` (en-US)
지원이 중단되었습니다
* `SVGFontFaceFormatElement` (en-US)
지원이 중단되었습니다
* `SVGFontFaceNameElement` (en-US)
지원이 중단되었습니다
* `SVGFontFaceSrcElement` (en-US)
지원이 중단되었습니다
* `SVGFontFaceUriElement` (en-US)
지원이 중단되었습니다
* `SVGForeignObjectElement` (en-US)
* `SVGGElement` (en-US)
* `SVGGeometryElement` (en-US)
* `SVGGlyphElement` (en-US)
지원이 중단되었습니다
* `SVGGlyphRefElement` (en-US)
지원이 중단되었습니다
* `SVGGradientElement` (en-US)
* `SVGGraphicsElement` (en-US)
* `SVGHKernElement` (en-US)
지원이 중단되었습니다
* `SVGImageElement` (en-US)
* `SVGLength` (en-US)
* `SVGLengthList` (en-US)
* `SVGLinearGradientElement` (en-US)
* `SVGLineElement` (en-US)
* `SVGMarkerElement` (en-US)
* `SVGMaskElement` (en-US)
* `SVGMetadataElement` (en-US)
* `SVGMissingGlyphElement` (en-US)
지원이 중단되었습니다
* `SVGMPathElement` (en-US)
* `SVGNumber` (en-US)
* `SVGNumberList` (en-US)
* `SVGPathElement` (en-US)
* `SVGPatternElement` (en-US)
* `SVGPoint` (en-US)
지원이 중단되었습니다
* `SVGPointList` (en-US)
* `SVGPolygonElement` (en-US)
* `SVGPolylineElement` (en-US)
* `SVGPreserveAspectRatio` (en-US)
* `SVGRadialGradientElement` (en-US)
* `SVGRect`
* `SVGRectElement` (en-US)
* `SVGRenderingIntent` (en-US)
지원이 중단되었습니다
* `SVGScriptElement` (en-US)
* `SVGSetElement` (en-US)
* `SVGStopElement` (en-US)
* `SVGStringList` (en-US)
* `SVGStyleElement` (en-US)
* `SVGSVGElement` (en-US)
* `SVGSwitchElement` (en-US)
* `SVGSymbolElement` (en-US)
* `SVGTextContentElement` (en-US)
* `SVGTextElement` (en-US)
* `SVGTextPathElement` (en-US)
* `SVGTextPositioningElement` (en-US)
* `SVGTitleElement` (en-US)
* `SVGTransform` (en-US)
* `SVGTransformList` (en-US)
* `SVGTRefElement` (en-US)
지원이 중단되었습니다
* `SVGTSpanElement` (en-US)
* `SVGUnitTypes` (en-US)
* `SVGUseElement` (en-US)
* `SVGViewElement` (en-US)
* `SVGVKernElement` (en-US)
지원이 중단되었습니다
* `SyncEvent` (en-US)
Experimental
* `SyncManager` (en-US)
Experimental

### T

* `TaskAttributionTiming` (en-US)
Experimental
* `TaskController` (en-US)
* `TaskPriorityChangeEvent` (en-US)
* `TaskSignal` (en-US)
* `Text`
* `TextDecoder` (en-US)
* `TextDecoderStream` (en-US)
* `TextEncoder` (en-US)
* `TextEncoderStream` (en-US)
* `TextFormat` (en-US)
Experimental
* `TextFormatUpdateEvent` (en-US)
Experimental
* `TextMetrics` (en-US)
* `TextTrack` (en-US)
* `TextTrackCue` (en-US)
* `TextTrackCueList` (en-US)
* `TextTrackList` (en-US)
* `TextUpdateEvent` (en-US)
Experimental
* `TimeEvent` (en-US)
* `TimeRanges` (en-US)
* `ToggleEvent` (en-US)
* `Touch` (en-US)
* `TouchEvent` (en-US)
* `TouchList` (en-US)
* `TrackEvent` (en-US)
* `TransformStream` (en-US)
* `TransformStreamDefaultController` (en-US)
* `TransitionEvent` (en-US)
* `TreeWalker`
* `TrustedHTML` (en-US)
* `TrustedScript` (en-US)
* `TrustedScriptURL` (en-US)
* `TrustedTypePolicy` (en-US)
* `TrustedTypePolicyFactory` (en-US)

### U

* `UIEvent`
* `URL`
* `URLPattern` (en-US)
Experimental
* `URLSearchParams`
* `USB` (en-US)
Experimental
* `USBAlternateInterface` (en-US)
Experimental
* `USBConfiguration` (en-US)
Experimental
* `USBConnectionEvent` (en-US)
Experimental
* `USBDevice` (en-US)
Experimental
* `USBEndpoint` (en-US)
Experimental
* `USBInterface` (en-US)
Experimental
* `USBInTransferResult` (en-US)
Experimental
* `USBIsochronousInTransferPacket` (en-US)
Experimental
* `USBIsochronousInTransferResult` (en-US)
Experimental
* `USBIsochronousOutTransferPacket` (en-US)
Experimental
* `USBIsochronousOutTransferResult` (en-US)
Experimental
* `USBOutTransferResult` (en-US)
Experimental
* `UserActivation` (en-US)

### V

* `ValidityState`
* `VideoColorSpace` (en-US)
* `VideoDecoder` (en-US)
* `VideoEncoder` (en-US)
* `VideoFrame` (en-US)
* `VideoPlaybackQuality` (en-US)
* `VideoTrack` (en-US)
* `VideoTrackList` (en-US)
* `ViewTimeline` (en-US)
Experimental
* `ViewTransition` (en-US)
Experimental
* `VirtualKeyboard` (en-US)
Experimental
* `VisibilityStateEntry` (en-US)
Experimental
* `VisualViewport` (en-US)
* `VRDisplay` (en-US)
비표준

지원이 중단되었습니다
* `VRDisplayCapabilities` (en-US)
비표준

지원이 중단되었습니다
* `VRDisplayEvent` (en-US)
비표준

지원이 중단되었습니다
* `VREyeParameters`
비표준

지원이 중단되었습니다
* `VRFieldOfView` (en-US)
비표준

지원이 중단되었습니다
* `VRFrameData` (en-US)
비표준

지원이 중단되었습니다
* `VRLayerInit` (en-US)
지원이 중단되었습니다
* `VRPose` (en-US)
비표준

지원이 중단되었습니다
* `VRStageParameters` (en-US)
비표준

지원이 중단되었습니다
* `VTTCue` (en-US)
* `VTTRegion` (en-US)

### W

* `WakeLock` (en-US)
* `WakeLockSentinel` (en-US)
* `WaveShaperNode` (en-US)
* `WebGL2RenderingContext` (en-US)
* `WebGLActiveInfo` (en-US)
* `WebGLBuffer` (en-US)
* `WebGLContextEvent` (en-US)
* `WebGLFramebuffer` (en-US)
* `WebGLObject` (en-US)
* `WebGLProgram` (en-US)
* `WebGLQuery` (en-US)
* `WebGLRenderbuffer`
* `WebGLRenderingContext` (en-US)
* `WebGLSampler` (en-US)
* `WebGLShader`
* `WebGLShaderPrecisionFormat` (en-US)
* `WebGLSync` (en-US)
* `WebGLTexture` (en-US)
* `WebGLTransformFeedback` (en-US)
* `WebGLUniformLocation` (en-US)
* `WebGLVertexArrayObject` (en-US)
* `WebSocket`
* `WebTransport` (en-US)
* `WebTransportBidirectionalStream` (en-US)
* `WebTransportDatagramDuplexStream` (en-US)
* `WebTransportError` (en-US)
* `WebTransportReceiveStream` (en-US)
Experimental
* `WebTransportSendStream` (en-US)
Experimental
* `WGSLLanguageFeatures` (en-US)
Experimental
* `WheelEvent` (en-US)
* `Window`
* `WindowClient` (en-US)
* `WindowControlsOverlay` (en-US)
Experimental
* `WindowControlsOverlayGeometryChangeEvent` (en-US)
Experimental
* `WindowSharedStorage` (en-US)
Experimental
* `Worker`
* `WorkerGlobalScope` (en-US)
* `WorkerLocation` (en-US)
* `WorkerNavigator` (en-US)
* `Worklet` (en-US)
* `WorkletGlobalScope` (en-US)
* `WorkletSharedStorage` (en-US)
Experimental
* `WritableStream`
* `WritableStreamDefaultController` (en-US)
* `WritableStreamDefaultWriter` (en-US)

### X

* `XMLDocument` (en-US)
* `XMLHttpRequest`
* `XMLHttpRequestEventTarget` (en-US)
* `XMLHttpRequestUpload` (en-US)
* `XMLSerializer` (en-US)
* `XPathEvaluator` (en-US)
* `XPathException` (en-US)
* `XPathExpression` (en-US)
* `XPathNSResolver` (en-US)
* `XPathResult` (en-US)
* `XRAnchor` (en-US)
Experimental
* `XRAnchorSet` (en-US)
Experimental
* `XRBoundedReferenceSpace` (en-US)
Experimental
* `XRCompositionLayer` (en-US)
Experimental
* `XRCPUDepthInformation` (en-US)
Experimental
* `XRCubeLayer` (en-US)
Experimental
* `XRCylinderLayer` (en-US)
Experimental
* `XRDepthInformation` (en-US)
Experimental
* `XREquirectLayer` (en-US)
Experimental
* `XRFrame` (en-US)
Experimental
* `XRHand` (en-US)
* `XRHitTestResult` (en-US)
Experimental
* `XRHitTestSource` (en-US)
Experimental
* `XRInputSource` (en-US)
* `XRInputSourceArray` (en-US)
Experimental
* `XRInputSourceEvent` (en-US)
* `XRInputSourcesChangeEvent` (en-US)
* `XRJointPose` (en-US)
* `XRJointSpace` (en-US)
* `XRLayer` (en-US)
Experimental
* `XRLayerEvent` (en-US)
Experimental
* `XRLightEstimate` (en-US)
Experimental
* `XRLightProbe` (en-US)
Experimental
* `XRMediaBinding` (en-US)
Experimental
* `XRPose` (en-US)
* `XRProjectionLayer` (en-US)
Experimental
* `XRQuadLayer` (en-US)
Experimental
* `XRRay` (en-US)
Experimental
* `XRReferenceSpace` (en-US)
* `XRReferenceSpaceEvent` (en-US)
* `XRRenderState` (en-US)
Experimental
* `XRRigidTransform` (en-US)
* `XRSession` (en-US)
Experimental
* `XRSessionEvent` (en-US)
* `XRSpace` (en-US)
* `XRSubImage` (en-US)
Experimental
* `XRSystem` (en-US)
Experimental
* `XRTransientInputHitTestResult` (en-US)
Experimental
* `XRTransientInputHitTestSource` (en-US)
Experimental
* `XRView` (en-US)
Experimental
* `XRViewerPose` (en-US)
* `XRViewport` (en-US)
* `XRWebGLBinding` (en-US)
Experimental
* `XRWebGLDepthInformation` (en-US)
Experimental
* `XRWebGLLayer` (en-US)
Experimental
* `XRWebGLSubImage` (en-US)
Experimental
* `XSLTProcessor`

같이 보기
-----

* 웹 API 이벤트 참고서 (en-US)


프로그레시브 웹 앱

프로그레시브 웹 앱
==========

프로그레시브 웹 앱은 최신 웹 API와 전통적인 점진적 개선 전략을 함께 사용해 크로스 플랫폼 웹 어플리케이션을 생성합니다. 이러한 앱은 어디서든 동작하며 네이티브 앱에서의 사용자 경험 이점과 동일한 몇 가지 기능들을 제공합니다. 이 문서에서는 이에 대해 여러분이 알아야 할 모든 것들에 대해 알려드립니다.

PWA 이점
------

PWA는 발견 가능, 설치 가능, 연결 가능해야 하고, 네트워크에 독립적이어야 하고, 점진적이고 재참여가 가능해야하며 반응형이고 안전해야 합니다. 이러한 것들이 무엇을 의미하는지는 프로그레시브 웹 앱 이점 (en-US) 문서를 읽어보시기 바랍니다. PWA를 구현하는 방법은 아래 섹션에 나열된 가이드를 참조하십시오.

핵심 PWA 가이드
----------

다음 가이드는 간단한 예제를 살펴보고 모든 조각이 어떻게 동작하는지 보여줌으로써 PWA 구현을 위해 해야하는 것들이 무엇인지 보여줍니다.

1. 프로그레시브 웹 앱 소개 (en-US)
2. 프로그레시브 웹 앱 구조 (en-US)
3. Service worker를 사용해 PWA를 오프라인에서 동작하게 만들기 (en-US)
4. PWA를 설치가능하게 만드는 방법 (en-US)
5. 알림과 푸시를 사용해 PWA를 재참여(re-engageable)가능하게 만드는 방법 (en-US)
기술 가이드
------

* 클라이언트 사이드 저장소 (en-US) — 웹 저장소, IndexedDB, service worker를 언제 어떻게 사용하는지 보여주는 상세 가이드
* Service worker 사용 (en-US) — Service Worker API에 대한 더 자세한 가이드.
* IndexedDB 사용 — IndexedDB의 근본에 대한 자세한 설명.
* Web Storage API 사용 (en-US) — 간단하게 만들어진 Web storage API.
* Application Shell 구조를 사용한 웹 앱 즉시 로딩 — App Shell 코딩 패턴을 사용해 빠르게 로딩되는 앱을 생성하는 가이드.
* Push API 사용 (en-US) — Web Push API의 기초에 대해 배우기.
* Notifications API 사용 — 웹 알림 요약.
* 반응형 디자인 블록 구축 (en-US) — 반응형 디자인 기초, 최신 앱 레이아웃 필수 주제 배우기.
* 모바일 우선 (en-US) — 반응형 어플리케이션 레이아웃을 생성할 때, 보통 기본적으로 모바일 레이아웃을 생성하고, 더 넓은 상단 레이아웃을 구축하는 것이 좋습니다.
* 홈 화면에 추가 가이드 (en-US) — 앱을 홈 화면에 추가하여 얻을 수 있는 이점에 대해 배우기.
도구
--

* localForage — 아주 간단하게 클라이언트 사이드 데이터 저장소를 만들 수 있는 훌륭하고 가벼운 JavaScript 라이브러리. 기본적으로 IndexedDB를 사용하고 필요한 경우 Web SQL/Web Storage를 사용합니다.
* ServiceWorkerWare — 손쉬운 Service Worker 개발을 위한 Express 같은 마이크로프레임워크.
* oghliner — 템플릿이자 GitHub 페이지에 오프라인 웹 앱을 배포하기 위한 도구.
* sw-precache — 특정 리소스를 프리캐싱(미리 캐싱;precache)하는 service worker 코드를 생성하는 노드 모듈.
* workbox — 더 나은 캐싱 전략과 쉬운 프리캐싱을 제공하는 sw-precache의 정신적 지주.
* upup — 사이트가 사용자들을 위해 항상 존재하도록 해주는 작은 스크립트.
* The service worker cookbook — 오프라인 앱 및 그 이상의 다양한 앱 구현 방법을 보여주는 훌륭한 service worker/push 가이드 시리즈.
함께 보기
-----

* Progressive Web Apps landing page and check list on web.dev
* Progressive Web Apps: Everything You Need To Know
* Progressive Web Apps: Escaping Tabs Without Losing Our Soul
* Instant Loading Web Apps with An Application Shell Architecture
* Workbox — set of libraries to power a "production-ready" service worker for your PWA
* Lighthouse — web-app auditing tool that includes PWA-auditing features
* localForage — `localStorage`-like *async* storage, to improve your PWA's offline experience


XPath

XPath
=====

XPath는 XML Path Language를 나타내고 XML 문서의 다른 부분을 주소 지정하는(가리키는) 유연한 방법을 제공하는 비XML 문법을 씁니다. 이와 동시에, 또한 패턴과 일치하는지 알아보기 위해 문서 안에 주소 지정된 노드를 검사하는데도 쓰일 수 있습니다.

XPath는 주로 XSLT에서 쓰입니다. 하지만 또한 getElementById 메소드, childNodes 특성들에 의존하는 대신 HTML과 XUL 같은 다른 XML에 기반을 둔 언어 문서를 DOM을 통해 항해하는 더 나은 강력한 방법으로도 쓰입니다. 다음은 모호합니다: 이는 확장기능 안에서 특히 쓸모 있습니다, 특히 overlays를 고려하면.

XPath는 XML 문서의 계층 구조를 항해하기 위해 경로 표기법(URL의 경우와 같이)을 씁니다. URI와 XML 속성값에 쓰일 수 있도록 비XML 문법을 씁니다.

문서
--

Introduction to using XPath in JavaScript

XPath의 비XSLT 사용을 기술합니다.

XPath:Axes

XPath 명세에 정의된 축의 정의와 목록. 축은 노드 사이의 관계를 기술하는데 씁니다.

XPath:Functions

기본 XPath 함수와 XPath에 더해진 XSLT 고유의 추가분 설명과 나열.

Transforming XML with XSLT

XSLT는 변환하고 싶은 XML 문서 내의 코드 조각(segment)을 주소지정하기 위해 XPath를 씁니다.

XPath snippets (en-US)

These are JavaScript utility functions, that can be used in your own code, based on DOM Level 3 XPath APIs.

What is XSLT?

XSLT와 XPath에 관한 이 광범위한 소개는 두 기술 사이에 우선순위가 없다 보고 읽는 이를 배경, 문맥, 구조, 개념, 입문 용어로 안내합니다.

Tools
-----

XPath tester

온라인 XPath 작성기/디버거

Related Topics
--------------

* XSLT, XML, DOM
* Comparison of CSS Selectors and XPath (en-US)


XSLT

XSLT
====

**Extensible Stylesheet Language Transformations** (**XSLT**)는 전문 처리 소프트웨어와 함께 XML 문서 변환에 쓰이는 XML에 기반을 둔 언어입니다. 비록 그 처리가 "변환"으로 되어 있더라도, 원 문서는 바뀌지 않습니다. 오히려, 새 XML 문서는 기존 문서의 컨텐트에 바탕을 두고 만듭니다. 그러므로, 새 문서를 표준 XML 문법이나 다른 형식(HTML이나 순수 텍스트 같은)으로 처리기가 결과를 직렬(출력)할 수도 있습니다. XSLT는 다른 XML 스키마 사이에 데이터를 바꾸거나 XML 데이터를 웹 페이지나 PDF 문서로 바꾸는데 가장 자주 쓰입니다.

Documentation
-------------

XSLT Element Reference

Reference.

Transforming XML with XSLT

XSLT는 스타일시트 만든 이가 그러길 바란다면 컨텐트를 모조리 다시 정리하고 다른 형식으로 변환하는 것을 포함하는 컨텐트 조작(manipulating)과 정렬이라는 중요한 두 방식으로 본래 XML 문서를 변환하게 합니다.

Using the Mozilla JavaScript interface to XSL Transformations

이 문서는 Mozilla 1.2의 JavaScript 인터페이스와 XSLT 처리 엔진까지 설명합니다.

Specifying parameters using processing instructions (en-US)

Firefox allows stylesheet parameters to be specified when using the `<?xml-stylesheet?>` processing instruction. This is done using the `<?xslt-param?>` PI described in this document.

XSLT Tutorial

이 W3Schools 입문서는 읽는 이에게 XML 문서를 XHTML같은 다른 형식으로 변환하기 위해 어떻게 XSLT를 사용하는지를 가르칩니다.

What is XSLT?

XSLT와 XPath에 대한 이 방대한 해설은 두 기술에 대한 지식이 없다고 가정하고, 배경, 문맥, 구조, 개념, 입문 용어를 통해 읽는 이를 이끕니다.

Common XSLT Errors (en-US)

This article lists some common problems using XSLT in Firefox.

Related Topics
--------------

* XML, XPath


JavaScript

JavaScript
==========

**JavaScript** (**JS**)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼 많은 비 브라우저 환경에서도 사용하고 있습니다. JavaScript는 프로토타입 기반, 다중 패러다임, 단일 스레드, 동적 언어로, 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원합니다.

JavaScript의 동적 기능에는 런타임 객체 구성, 변수 매개변수 목록, 함수 변수, (`eval`을 통한) 동적 스크립트 생성, (`for...in` 및 `Object` 유틸리티를 통한) 객체 검사 그리고 소스 코드 복구(JavaScript 함수는 소스 텍스트를 저장하고 `toString()`을 통해 다시 찾을 수 있습니다.)가 있습니다.

이 섹션은 JavaScript 언어 자체를 다루며 웹 페이지 또는 다른 사용 환경에 대해 다루지 않습니다. 웹 페이지의 특정 API에 대한 정보를 알고 싶다면, 웹 API와 DOM을 참고하시기 바랍니다.

JavaScript의 표준은 ECMAScript 언어 사양 (ECMA-262)과 ECMAScript 국제화 API 사양 (ECMA-402)입니다. 저희는 한 브라우저가 어떤 기능을 구현하는 즉시 이를 문서화하려고 노력하고 있습니다. 이는 새로운 ECMAScript 기능에 대한 일부 제안이 브라우저에서 구현된 경우, MDN의 문서와 예제가 이 새로운 기능 중 일부를 사용할 수 있음을 의미합니다. 대부분 3, 4단계 사이에서 이루어지며, 이것은 일반적으로 사양이 공식적으로 게시되기 전입니다.

JavaScript와 Java 프로그래밍 언어를 혼동해서는 안 됩니다. **JavaScript는 "인터프리트 Java"가 아닙니다.** "Java"와 "JavaScript" 는 모두 상표이자 미국 및 기타 국가에 등록된 Oracle의 상표이지만, 두 프로그래밍 언어의 구문, 의미 및 사용 방법은 매우 다릅니다.

핵심 언어 기능(대부분 순수한 ECMAScript)에 대한 JavaScript 문서는 다음과 같습니다.

* JavaScript 안내서
* JavaScript 참고서

JavaScript 사양과 관련 기술에 대한 자세한 내용은 JavaScript 기술 개요를 참조하세요.

**프론트 엔드 웹 개발자가 되고 싶으신가요?**

목표 달성에 필요한 모든 필수 정보가 포함된 과정을 마련했습니다.

**시작하기**

자습서
---

가이드 및 자습서를 통해 JavaScript로 프로그래밍하는 방법을 배워보세요.

### 입문자용

JavaScript를 배우고 싶지만 JavaScript이나 프로그래밍에 대한 이전 경험이 없는 경우 JavaScript 주제에 대한 학습 영역을 방문하세요. 전체 과정은 다음과 같습니다.

JavaScript 첫 걸음

변수, 문자열, 숫자 및 배열과 같은 주요 JavaScript 기능에 대해 논의하면서 "JavaScript 는 무엇인가요?", "어떤 모습인가요?", "무엇을 할 수 있나요?"와 같은 몇 가지 기본적인 질문에 답합니다.

JavaScript 구성 요소

JavaScript의 핵심 기본 기능에 대한 이해를 넓히기 위해 조건문, 반복문, 함수, 이벤트와 같이 흔히 찾을 수 코드 블록의 형태에 대해서 알아봅니다.

JavaScript 객체 소개

JavaScript의 객체 지향적 특성에 대한 이해는 언어의 이해도를 높이며 효율적인 코드를 작성하려는 경우 중요하므로, 이 과정이 도움이 될 것입니다.

비동기 JavaScript

비동기 JavaScript가 중요한 이유와, 비동기적 코드를 사용해 서버에서 리소스 가져오기 등 블록킹 연산을 효율적으로 처리하는 방법에 대해 알아봅니다.

클라이언트측 웹 API

API란 무엇인지 탐색해보고, 개발 작업에서 자주 접하게 될 가장 일반적인 API를 사용하는 방법을 알아봅니다.

### JavaScript 안내서

JavaScript 안내서

JavaScript 또는 다른 언어로 프로그래밍 경험이 있는 독자들을 대상으로한 JavaScript 언어에 대한 상세 가이드입니다.

### 중급

클라이언트 측 JavaScript 프레임워크 이해

JavaScript 프레임워크는 현대 프런트 엔드 웹 개발의 필수 부분으로, 개발자에게 확장 가능한 상호작용형 웹 응용 프로그램을 구축하기위한 입증된 도구를 제공합니다. 이 과정에서는 오늘날 가장 인기있는 일부 프레임워크를 다루는 자습서 시리즈로 이동하기 전에 클라이언트 측 프레임워크가 작동하는 방식과 도구 집합에 맞는 방식에 대한 기본적인 배경 지식을 제공합니다.

JavaScript 개요

다른 프로그래밍 언어에서 넘어 온 사람들이 빨리 배울 수 있는 JavaScript의 기본 구문과 의미 체계에 대한 개요입니다.

JavaScript 데이터 구조

JavaScript에서 이용 가능한 데이터 구조 개요입니다.

동등성 비교 및 동일성

JavaScript는 `===`를 사용한 완전 동등, `==`를 사용한 느슨한 동등, 그리고 `Object.is()` 메서드의 세 가지 값 비교 연산을 제공합니다.

속성의 열거 가능성과 소유권 (en-US)

객체 속성 그룹을 하나씩 방문하는 다양한 방법이 속성의 열거 가능성과 소유권을 처리하는 방법입니다.

클로저

클로저는 함수와 그 함수가 선언된 어휘 (lexical) 환경의 조합입니다.

### 고급

상속 및 프로토타입 체인

널리 오해 받고 과소 평가된 프로토타입 기반 상속을 설명합니다.

JavaScript 형식화 배열

JavaScript 형식화된 배열은 원시 이진 데이터에 접근하기 위한 메커니즘을 제공합니다.

메모리 관리

JavaScript의 메모리 생명 주기와 가비지 컬렉션을 설명합니다.

동시성 모델 및 이벤트 루프

JavaScript는 "이벤트 루프"에 기반을 둔 동시성 모델이 있습니다.

참고서
---

전체 JavaScript 참고서를 훑어보세요.

표준 객체

`Array`, `Boolean`, `Date`, `Error`, `Function`, `JSON`, `Math`, `Number`, `Object`, `RegExp`, `String`, `Map`, `Set` (en-US), `WeakMap`, `WeakSet` 등 표준 내장 객체를 배웁니다.

표현식 및 연산자

JavaScript 연산자 `instanceof`, `typeof`, `new`, `this`의 동작, 연산자 우선순위 등을 배웁니다.

명령문 및 선언문

`do-while`, `for-in`, `for-of`, `try-catch` (en-US), `let`, `var`, `const`, `if-else`, `switch` (en-US) 등의 JavaScript의 구문 및 키워드 작동법을 배웁니다.

함수

애플리케이션을을 개발하기 위해 JavaScript의 함수를 사용하는 방법을 배웁니다.

클래스

JavaScript 클래스는 객체 지향 프로그래밍을 수행하는 가장 적절한 방법입니다.


XML: 확장가능한 마크업 언어

XML: 확장가능한 마크업 언어
=================

**확장가능한 마크업 언어**는 문서 객체 모델의 엄격한 직렬화입니다.

XML 소개XML(확장 가능한 마크업 언어)은 HTML과 유사하지만, 미리 정의된 태그가 없는 마크업 언어입니다. 대신 필요에 맞게 특별히 설계된 태그를 직접 정의합니다. 이는 데이터를 저장, 검색, 공유할 수 있는 형식으로 저장할 수 있는 강력한 방법입니다. 가장 중요한 것은 XML의 기본 형식이 표준화되어 있기 때문에, 로컬 또는 인터넷을 통해 시스템이나 플랫폼 간 XML을 공유하거나 전송하는 경우에도, 표준화된 XML 구문으로 덕분에 수신자가 데이터를 파싱 할 수 있다는 점입니다.

XML 파싱 및 직렬화웹 상에서 XML을 파싱하고 직렬화할 때 사용할 수 있는 객체는 다음과 같습니다.


웹 보안

웹 보안
====

웹사이트 또는 개방형 웹 애플리케이션이 안전한지 확인하는 것은 중요합니다. 코드의 단순한 버그라도 개인 정보가 유출될 수 있으며 나쁜 사람들은 그 데이터를 훔칠 방법을 찾으려고 할겁니다. 여기에 있는 웹 보안 관련 문서는 공격 및 데이터 절도로부터 여러분의 사이트와 코드를 보호하는 데 도움이 되는 정보를 제공합니다.

콘텐츠 보안
------

콘텐츠 보안 정책 (CSP)

**콘텐츠 보안 정책** (CSP)은 교차 사이트 스크립팅 (XSS (en-US)) 및 데이터 주입 공격을 비롯한 특정 유형의 공격을 탐지하고 완화하는 데 도움이 되는 추가 보안 계층입니다. 이러한 공격은 데이터 도난에서 사이트 손상, 맬웨어 배포에 이르기까지 모든 것에 사용됩니다.

연결 보안
-----

전송 계층 보안 (TLS)

전송 계층 보안 (TLS) 프로토콜은 네트워크로 연결된 두 개의 애플리케이션 또는 장치가 비공개로 안전하게 정보를 교환할 수 있도록 하는 표준입니다. TLS를 사용하는 애플리케이션은 데이터의 보안 및 안정성에 상당한 영향을 미칠 수 있는 보안 매개변수를 선택할 수 있습니다. 이 문서에서는 TLS에 대한 개요와 여러분이 콘텐츠를 보호할 때 내려야 하는 결정의 종류를 살펴봅니다.

HTTPS

**HTTPS** (***HyperText Transfer Protocol Secure***)는 HTTP 프로토콜의 암호화된 버전입니다. SSL 또는 TLS를 사용하여 클라이언트와 서버 간의 모든 통신을 암호화합니다. 이 보안 연결을 통해 클라이언트는 의도한 서버와 연결되어 있는지 확인하고 중요한 데이터를 교환할 수 있습니다.

HTTP Strict-Transport-Security

`Strict-Transport-Security` HTTP 헤더를 사용하면 웹사이트에서 HTTPS를 통해서만 액세스할 수 있음을 지정할 수 있습니다.

인증서 투명성

**인증서 투명성**은 인증서의 오류를 방지하고 모니터링하도록 설계된 개방형 프레임워크입니다. 새로 발급된 인증서는 공개적으로 실행되도록 '로그'되며, 발급된 TLS 인증서의 추가 전용 암호화 보증 기록을 유지하는 독립적인 CT 로그인 경우가 많습니다.

혼합 콘텐츠

일반 텍스트 HTTP를 사용하여 가져온 콘텐츠가 포함된 HTTPS 페이지를 **혼합 콘텐츠** 페이지라고 합니다. 이런 페이지는 부분적으로만 암호화되어있어 스니퍼와 중간자 공격자가 암호화되지 않은 콘텐츠에 액세스할 수 있습니다.

혼합 콘텐츠가 차단된 웹사이트를 고치는 방법

웹 사이트에가 HTTPS 페이지를 제공한다면, HTTP를 통해 제공되는 모든 혼합 활성 콘텐츠는 기본적으로 차단됩니다. 결과적으로 여러분의 웹사이트는 사용자에게 깨진 것처럼 보일 수 있습니다(iframe 또는 플러그인이 로드되지 않는 경우 등). 혼합 패시브 콘텐츠는 기본적으로 표시되지만 사용자는 이러한 유형의 콘텐츠를 차단하도록 기본 설정을 지정할 수도 있습니다. 이 페이지에서는 웹 개발자로서 알아야 할 사항을 살펴봅니다.

보안 컨텍스트

**보안 컨텍스트**는 콘텐츠가 안전하게 전달되었다는 합리적인 확신이 있고 (HTTPS/TLS를 통해) 안전하지 **않은** 컨텍스트와의 통신 가능성은 제한되는 `Window` 또는 `Worker`입니다. 많은 웹 API와 기능은 보안 컨텍스트에서만 액세스할 수 있습니다. 보안 컨텍스트의 주요 목표는 중간자 공격자가 피해자를 추가로 손상시킬 수 있는 강력한 API에 액세스하지 못하도록 방지하는 것입니다.

보안 컨텍스트로 제한된 기능

이 참조는 보안 컨텍스트에서만 사용할 수 있는 웹 플랫폼 기능을 나열합니다.

Weak signature algorithms

디지털 인증서 서명 (en-US)에 사용되는 해시 알고리즘의 강도는 인증서 보안의 중요한 요소입니다. 이 문서에서는 약하다고 알려진 서명 알고리즘에 대한 몇 가지 정보를 제공하므로 적절하게 이런 경우를 피할 수 있습니다.

301 및 302 응답 코드로 리디렉션

추후 작성 예정

데이터 보안
------

HTTP 쿠키 사용

**HTTP 쿠키** (웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 보내는 작은 데이터 조각입니다. 브라우저는 이를 저장하고 나중에 동일한 서버에 대한 요청과 함께 다시 보낼 수 있습니다. 일반적으로 두 개의 요청이 동일한 브라우저에서 온 것인지 알려주는 데 사용됩니다. 예: 사용자 로그인 유지

로컬 스토리지

`Window` 객체의 `Window.localStorage` 프로퍼티은 서버가 세션 간에 지속되는 클라이언트에 데이터를 저장하는 방법입니다.

정보 유출
-----

리퍼러 헤더 정책: 개인 정보 보호 및 보안 문제

Referer HTTP 헤더와 관련된 개인 정보 및 보안 위험이 있습니다. 이 문서에서는 이에 대해 설명하고 이러한 위험을 완화하는 방법에 대한 조언을 제공합니다.

자격 증명 없는 IFrame

자격 증명 없는 IFrame애는 개발자가 새로운 임시 컨텍스트를 사용하여 `<iframe>` (en-US)에서 서드 파티 리소스를 로드할 수 있는 메커니즘을 제공합니다. 이 컨텍스트는 원본과 연결된 네트워크, 쿠키 및 스토리지 데이터에 액세스할 수 없고, 최상위 문서 수명이 로컬인 새로운 컨텍스트를 사용합니다. 그 대가로`Cross-Origin-Embedder-Policy` (COEP) 포함 규칙을 해제할 수 있으므로 COEP가 설정된 문서는 그렇지 않은 서드 파티 문서를 포함할 수 있습니다.

무결성
---

동일 출처 정책

**동일 출처 정책**은 한 출처에서 로드된 문서 또는 스크립트가 다른 출처의 리소스와의 상호작용을 제한하는 중요한 보안 메커니즘입니다. 잠재적인 악성 문서를 격리하여 가능한 공격 경로를 줄이는 데 도움이 됩니다.

하위 리소스 무결성

**하위 리소스 무결성**(SRI)은 브라우저가 CDN 등 에서 불러오는 리소스가 예기치 않은 조작 없이 전달됐는지 확인할 수 있는 보안 기능입니다. 불러온 리소스와 반드시 일치해야 하는 암호화 해시를 제공하는 방식으로 동작합니다.

HTTP Access-Control-Allow-Origin

**`Access-Control-Allow-Origin`** 응답 헤더는 주어진 출처의 요청 코드와 응답을 공유할 수 있는지 여부를 나타냅니다.

HTTP X-Content-Type-Options (en-US)

**`X-Content-Type-Options`** HTTP 응답 헤더는 `Content-Type` 헤더에 광고된 MIME 타입 유형을 변경허나 따르지 않아야 함을 나타내기 위해 서버에서 사용하는 마커입니다. 이는 MIME 스니핑을 빠져나오는 방법입니다. 즉, MIME 유형이 의도적으로 구성되었음을 나타냅니다.

클릭재킹 보호
-------

클릭재킹은 사용자가 기대하는 것과 다른 작업을 수행하는 UI 요소를 클릭하도록 속입니다.

HTTP X-Frame-Options

**`X-Frame-Options`** HTTP 응답 헤더는 브라우저가 `<frame>` (en-US), `<iframe>` (en-US), `<embed>` 또는 `<object>`에서 페이지를 렌더링하도록 허용해야 하는지 여부를 나타내는 데 사용할 수 있습니다. 사이트는 이를 사용하여 콘텐츠가 다른 사이트에 포함되지 않도록 함으로써 클릭재킹 공격을 피할 수 있습니다.

CSP: frame-ancestors (en-US)

HTTP `Content-Security-Policy` (en-US) (CSP) **`frame-ancestors`** 지시문은 `<frame>` (en-US), `<iframe>` (en-US), `<object>`, `<embed>`, 또는 `<applet>`을 사용하여 페이지를 포함할 수 있는 유효한 부모를 지정합니다.

사용자 정보 보안
---------

안전하지 않은 비밀번호

HTTP를 통해 로그인 양식을 제공하는 것은 사용자 암호를 추출하기 위해 사용할 수 있는 다양한 공격으로 인해 특히 위험합니다. 네트워크 도청자는 네트워크를 스니핑하거나 전송 중인 페이지를 수정하여 사용자의 비밀번호를 훔칠 수 있습니다.

개인 정보 및 :visited 선택자 (en-US)

2010년 이전에는 CSS `:visited` 선택자를 사용하여 웹사이트에서 사용자의 검색 기록을 발견하고 사용자가 방문한 사이트를 파악할 수 있었습니다. 이 문제를 완화하기 위해 브라우저는 방문한 링크에서 얻을 수 있는 정보의 양을 제한했습니다.

보안 관련 용어
--------

* Block cipher mode of operation
* Certificate authority
* Challenge-response authentication
* Cipher
* Cipher suite
* Ciphertext
* Clickjacking
* CORS
* CORS-safelisted request header
* CORS-safelisted response header
* Cross-site scripting
* Cryptanalysis
* Cryptographic hash function
* Cryptography
* CSP
* CSRF
* Decryption
* Digital certificate
* DTLS
* Encryption
* Forbidden header name
* Forbidden response header name
* Hash
* HMAC
* HPKP
* HSTS
* HTTPS
* Key
* MitM
* OWASP
* Preflight request
* Public-key cryptography
* Reporting directive
* Robots.txt
* Same-origin policy
* Session hijacking
* SQL injection
* Symmetric-key cryptography
* TOFU
* TLS
같이 보기
-----

* 보안 블로그
* @mozsec 트위터


웹 개발자 안내서

웹 개발자 안내서
=========

MDN 문서에는 많은 가이드가 있습니다. 이 문서는 추가 사용 예시를 추가하거나 API 또는 기능을 사용하는 방법을 가르치는 것을 목표로 합니다. 이 페이지는 가장 인기 있는 자료로 연결됩니다.

HTML
----

HTML로 웹 구조화하기

 HTML 학습 영역은 처음부터 HTML을 배우는 데 도움이 되는 자습서를
 제공합니다.

HTML 기본

 이 글은 HTML에 대한 기본적인 이해를 제공합니다. 이 가이드를 따른 후 HTML
 학습 영역에서 자료를 더 탐색할 수 있습니다.

CSS
---

CSS를 이용한 HTML 스타일링 익히기

전체 CSS 자습서는 텍스트 스타일 지정, 레이아웃 만들기 등 첫걸음을 뗄 수 있도록 도와줄 것입니다.

CSS 레이아웃 가이드 (en-US)

 MDN 전반에 걸쳐 CSS Layout에 대한 많은 가이드가 있으며, 이 페이지는
 그것들을 모두 모았습니다.

CSS 애니메이션 사용하기

 CSS 애니메이션은 사용하면 CSS 스타일 구성에서 다른 CSS 스타일 구성으로의
 전환을 애니메이션으로 만들 수 있습니다. 이 가이드는 애니메이션 속성을
 시작하는 데에 도움이 될 것입니다.

JavaScript
----------

JavaScript 학습영역

당신이 완전한 초보자이든 기술을 다시 배우고 싶든, 이 문서가 출발점이 될 수 있습니다.

AJAX (en-US)

 AJAX는 웹 애플리케이션이 전체 브라우저 페이지를 다시 로드하지 않고도
 사용자 인터페이스에 빠르고 점진적으로 업데이트할 수 있도록 하는 기술
 그룹들을 정의하는 용어입니다. 이렇게 하면 애플리케이션이 사용자 작업에 더빠르게 응답할 수 있습니다.

Media
-----

웹 상 그래픽

 모던 웹사이트와 애플리케이션들은 종종 다양하고 정교한 그래픽을
 제공해야합니다.

오디오 및 비디오 전달 (en-US)

 우리는 '정적' 미디어 파일에서 적응형 라이브 스트림에 이르기까지 다양한
 방법으로 웹에서 오디오와 비디오를 전달할 수 있습니다. 이 문서는 웹 기반
 미디어의 다양한 전달 메커니즘과 인기 있는 브라우저와의 호환성을 탐색하기
 위한 출발점으로 작성되었습니다.

오디오 및 비디오 조작 (en-US)

 웹의 장점은 기술을 결합하여 새로운 형태를 만들 수 있다는 것입니다.
 브라우저에 기본 오디오 및 비디오가 있다는 것은 이러한 데이터 스트림을
 사용하여 `<canvas>` 와,
 WebGL또는
 Web Audio API 와 같은
 기술과 함께 오디오 및 비디오를 직접 수정할 수 있음을 의미합니다. 예시로
 오디오에 reverb/compression 효과 추가 또는 grayscale/sepia 필터를 비디오에
 사용하는 것이 있습니다. 이 문서에서는 수행해야 할 작업을 설명하는 참고서를
 제공합니다.

APIs
----

FormData 객체 사용 (en-US)

 이 `FormData` 객체를 사용하면
 key/value 값을 컴파일하여 `XMLHttpRequest` 로 보낼 수 있습니다. 주로 양식
 데이터를 보내기 위한 것이지만, 양식과 독립적으로 데이터를 전송하는 데
 사용할 수 있습니다. `submit()`은 양식의 인코딩 유형이 "multipart/form-data"
 로 설정된 경우 폼의 메서드가 데이터를 전송하기 위해 사용하는 것과 동일한
 형식입니다.

프로그레시브 웹 앱

 프로그레시브 웹 앱(PWA)은 최신 웹 API와 전통적인 점진적 개선 전략을 함께
 사용해 크로스 플랫폼 웹 애플리케이션을 생성합니다. 이러한 앱은 어디서든
 동작하며 네이티브 앱에서의 사용자 경험 이점과 동일한 몇 가지 기능들을
 제공합니다. 이 문서에서는 이에 대해 여러분이 알아야 할 모든 것들에 대해
 알려드립니다.

XML 파싱 및 직렬화

 웹 플랫폼은 각각 장단점이 있는 다양한 XML 구문을 분석하고 직렬화하는
 방법을 제공합니다.

Performance
-----------

최적화 및 성능 (en-US)

최신 웹 앱과 사이트를 구축할 때, 콘텐츠를 빠르고 효율적으로 만드는 것이 중요합니다. 이를 통해 강력한 데스크탑 시스템과 약한 핸드헬드 장치 모두에서 효과적으로 수행할 수 있습니다.

Mobile web development
----------------------

모바일 웹 개발 (en-US)

이 문서에서는 모바일 장치에서 잘 작동하는 웹 사이트를 디자인하는 데 필요한 몇 가지 주요 기술에 대한 개요를 제공합니다.

Fonts
-----

Variable fonts guide (en-US)

variable fonts를 설계 시 사용하는 방법을 알아보십시오.

웹 오픈 글꼴 형식(WOFF) (en-US)

WOFF(Web Open Font Format)는 웹에서 누구나 무료로 사용할 수 있는 글꼴 파일 형식입니다.

User interface development
--------------------------

User input and controls (en-US)

모던 웹에서 사용자 입력은 단순히 마우스와 키보드로만 이뤄지는 것이 아닙니다. 예를 들어 터치스크린을 생각해 보십시오. 이 문서에서는 기본 기술에 대한 자세한 정보가 필요한 사람을 위해 FAQ, 실제 사례 및 추가 정보 링크와 함께 개방형 웹 앱에서 사용자 입력을 관리하고 제어를 구현하기 위한 권장 사항을 제공합니다.


Web app manifests

Web app manifests
=================

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

**웹 앱 매니페스트**(Web app manifest)는 프로그레시브 웹 앱(PWA)라고 칭하는 웹 기술 모음집의 일부로서, 앱 스토어를 거치지 않고 장치의 홈 화면에 설치할 수 있는 웹사이트를 구성합니다. 단순한 홈 화면 링크/북마크를 통한 일반적인 웹 앱과 달리, PWA는 사전 다운로드를 통해 오프라인에서도 동작하며 일반적인 Web API도 사용할 수 있습니다.

웹 앱 매니페스트는 웹 애플리케이션의 정보를 JSON 텍스트 파일로 제공하여, 웹 앱의 다운로드 및 네이티브 앱과 유사한 형태로 제공(홈 화면 설치를 통한 더 빠른 접근 및 풍부한 사용자 경험 제공)을 가능케 합니다. PWA 매니페스트는 자신의 이름, 저작자, 아이콘, 버전, 설명, 기타 필요한 리소스 등을 포함합니다.

구성요소
----

웹 앱 매니페스트는 다음의 키를 포함할 수 있습니다. 각각의 링크를 클릭해 더 많은 정보를 알아보세요.

예제
--

```json
{
  "name": "HackerWeb",
  "short\_name": "HackerWeb",
  "start\_url": ".",
  "display": "standalone",
  "background\_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [
    {
      "src": "images/touch/homescreen48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen168.png",
      "sizes": "168x168",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "related\_applications": [
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}
```

매니페스트 배포
--------

웹 앱 매니페스트는 HTML 페이지 `<head>` 요소 내의 `<link>` 요소를 사용해 연결합니다.

```html
<link rel="manifest" href="/manifest.webmanifest" />
```

**참고:** `.webmanifest` 확장자는 명세의 Media type registration 구획에 정의(매니페스트 파일의 응답은 `Content-Type: application/manifest+json`을 반환해야 함)되어 있습니다. 브라우저는 `.json`과 같은 기타 적절한 확장자도 지원합니다. (`Content-Type: application/json`).

**참고:** 매니페스트를 가져오려면 인증 정보가 필요한 경우, 매니페스트 파일이 현재 페이지와 동일한 출처에 위치하더라도 반드시 `crossorigin` 특성을 `use-credentials`로 지정해야 합니다.

스플래시 화면
-------

Chrome 47 이후 버전에서는, 홈 화면에서 실행한 사이트가 스플래시 화면을 사용합니다. 스플래시 화면은 웹 앱 매니페스트의 다음 속성을 사용해 자동으로 생성합니다.

* `name` (en-US)
* `background_color` (en-US)
* `icons` (en-US) 배열에서 장치 해상도 기준 128dpi에 제일 근접한 아이콘.
명세서
---

| Specification |
| --- |
| Web Application Manifest # background\_color-member |
| Web App Manifest - Application Information # categories-member |
| Web App Manifest - Application Information # description-member |
| Web Application Manifest # display-member |
| Manifest Incubations # display\_override-member |
| Manifest Incubations # file\_handlers-member |
| Web Application Manifest # icons-member |
| Web Application Manifest # id-member |
| Web App Launch Handler API # launch\_handler-member |
| Web Application Manifest # name-member |
| Manifest Incubations # note\_taking-member |
| Web Application Manifest # orientation-member |
| Web Application Manifest # prefer\_related\_applications-member |
| Manifest Incubations # protocol\_handlers-member |
| Web Application Manifest # related\_applications-member |
| Web Application Manifest # scope-member |
| Web App Manifest - Application Information # screenshots-member |
| Web Share Target API # share\_target-member |
| Web Application Manifest # short\_name-member |
| Web Application Manifest # shortcuts-member |
| Web Application Manifest # start\_url-member |
| Web Application Manifest # theme\_color-member |

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

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

같이 보기
-----

* 프로그레시브 웹 앱(PWA)


접근성

접근성
===

웹 개발에서의 **접근성**은 사람들의 능력이 어느 정도 제한되어 있더라도, 가능한 많은 사람이 웹사이트를 사용 할 수 있도록 하는 것 입니다.

많은 사람에게, 기술은 일을 더 쉽게 만들어줍니다. 장애를 가진 사람들에게, 기술은 일을 가능하게 만들어줍니다. 접근성은 개인의 신체적, 인지적 능력 및 웹에 접근하는 방법과 관계없이 가능한 한 접근할 수 있도록 콘텐츠를 개발하는 것을 의미합니다.

"웹은 사람들의 하드웨어, 소프트웨어, 언어, 문화, 장소, 혹은 신체적 물리적 능력과 관계없이 **모든 사람을 위해 작동하도록 설계되었습니다**. 웹이 이 목표를 달성할 때, 다양한 범위의 청각, 움직임, 시각, 그리고 인지 능력을 가진 사람들이 웹에 접근할 수 있습니다." (W3C - 접근성)

주요 자습서
------

MDN은(는) 접근성 학습 영역 접근성에 대한 현대적이고 최신의 자습서를 포함하고 있습니다:

접근성이란 무엇입니까?

이 글은 접근성이 실제로 무엇인지 자세히 살펴보는 것으로 모듈을 시작하며 - 여기에는 우리가 고려해야 하는 그룹의 사람들과 그 이유, 웹과 상호작용하기 위해 다른 사람들이 사용하는 도구, 그리고 접근성을 웹 개발 워크플로우의 일부로 어떻게 만들 수 있는지가 포함됩니다.

HTML: 접근성을 위한 좋은 기반

올바른 HTML 요소가 항상 올바른 목적으로 사용되는지 확인하는 것만으로도 웹 콘텐츠로 접근성을 만들 수 있습니다. 이 글에서 HTML이 최대 접근성을 보장하기 위해 어떻게 사용될 수 있는지 자세히 살펴봅니다.

CSS 그리고 JavaScript 접근성 모범 사례 (en-US)

CSS와 JavaScript 또한 적절하게 사용될 경우 접근 가능한 웹 경험을 허용할 수 있는 잠재력을 가지고 있습니다 ... 혹은 잘못 사용하면 접근성을 크게 해칠 수 있습니다. 이 글에서는 복잡한 콘텐츠도 최대한 접근 할 수 있도록 하기 위해 고려해야 하는 몇 가지 CSS 및 JavaScript 모범 사례에 대해 윤곽을 잡습니다.

WAI-ARIA 기초 (en-US)

이전 글에 따르면, 때때로 의미 없는 HTML과 동적 JavaScript 업데이트 콘텐츠를 포함하는 복잡한 UI 컨트롤을 만드는 것은 어려울 수 있습니다. WAI-ARIA은(는) 브라우저와 보조 기술이 인식하여 사용자에게 무슨 일이 일어나고 있는지 알리기 위해 사용할 수 있는 추가적인 의미를 추가함으로써 그러한 문제를 도와줄 수 있는 기술입니다. 여기서는 기본 수준에서 이 기능을 사용하여 접근성을 향상하는 방법을 보여 줍니다.

접근 가능한 멀티미디어 (en-US)

접근성 문제를 일으킬 수 있는 또 다른 콘텐츠 범주는 멀티미디어입니다 — 비디오, 오디오 및 이미지 콘텐츠는 보조 기술과 사용자에 의해 이해될 수 있도록 적절한 텍스트 대안이 제공되어야 합니다. 이 글은 어떻게 하는지 보여줍니다.

모바일 접근성 (en-US)

모바일에서의 웹 접근이 더욱더 대중적으로 되고, iOS 및 Android와 같은 인기 플랫폼이 완전한 접근성 도구를 가지게 됨에 따라, 이러한 플랫폼에서 웹 콘텐츠의 접근성을 고려하는 것은 중요합니다. 이 문서에서는 모바일에 특화된 접근 고려 사항에 대해서 살펴봅니다.

기타 문서
-----

웹 콘텐츠 접근성 지침 이해하기

이 문서는 W3C 웹 콘텐츠 접근성 가이드라인 2.0(WCAG 2.0 또는 WCAG, 이 글의 목적상)에 기입된 권장 요약 사항을 준수하기 위해 취해야 할 단계를 이해하는 데 도움이 되는 빠른 예제를 제공합니다.

색상 및 접근성 소개 (en-US)

이 글에서는 빛과 색에 대한 우리의 인식을 논하고, 접근하기 쉬운 디자인에 색을 사용하는 기초를 제공하며, 시각적이고 읽을 수 있는 콘텐츠에 대한 모범 사례를 보여줍니다.

키보드 탐색 가능한 JavaScript 위젯 (en-US)

지금까지 스타일링 된 <div> 및 <span> 기반의 접근하기 쉬운 위젯들을 만들고자 하는 웹 개발자들은 적절한 기술이 부족했습니다. **키보드 접근성**은 개발자가 인지해야 할 최소 접근성 요구사항의 일부입니다.

ARIA

ARIA를 사용하여 HTML 문서를 더 접근성 있게 만들 방법을 학습하는 글 모음입니다.

모바일 접근성 점검표

이 문서는 모바일 앱 개발자를 위한 접근성 요구 사항에 대한 간단한 체크리스트를 제공합니다.

인지 접근성 (en-US)

웹 콘텐츠를 만들 때, 인지 장애가 있는 사람이 웹 콘텐츠에 접근할 수 있도록 하는 방법을 숙지해야 합니다.

발작 장애에 대한 접근성 (en-US)

어떤 종류의 시각적 웹 콘텐츠는 특정 뇌 질환을 가진 사람들에게 발작을 일으킬 수 있습니다. 문제가 될 수 있는 콘텐츠 유형을 이해하고, 이러한 문제를 방지할 수 있는 도구와 전략을 찾습니다.

함께 보기
-----

* WAI Interest Group
* 개발자 가이드


HTTP

HTTP
====

\*\*하이퍼텍스트 전송 프로토콜 (HTTP)\*\*은 HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 계층 프로토콜입니다. 웹 브라우저와 웹 서버간의 통신을 위해 설계되었지만 다른 목적으로도 사용할 수 있습니다. HTTP는 클라이언트가 요청을 하기 위해 연결을 연 다음 응답을 받을때 까지 대기하는 전통적인 클라이언트-서버 모델을 따릅니다. HTTP는 무상태 프로토콜이며, 서버가 두 요청 간에 어떠한 데이터(상태)도 유지하지 않습니다.

자습서
---

가이드와 튜토리얼을 통해 HTTP를 사용하는 방법을 배워보세요.

HTTP 개요

클라이언트-서버 프로토콜의 기본 기능들입니다. HTTP로 할 수 있는 것과 의도된 용도를 알아보세요.

HTTP 캐시

캐싱은 빠른 웹 사이트를 위해 아주 중요합니다. 이 글은 여러 캐싱 방법과 HTTP 헤더를 사용하여 이를 제어하는 방법을 설명합니다.

HTTP 쿠키

쿠키가 동작하는 방식은 RFC 6265에서 정의합니다. HTTP 요청을 서버에 넘겨줄 때, 서버는 응답과 함께 `Set-Cookie` HTTP 헤더를 돌려줍니다. 그 다음에 클라이언트는 모든 요청과 함께 쿠키의 값을 `Cookie` 요청 헤더의 형태로 동일한 서버로 넘겨줍니다. 쿠키는 특정 날짜에 만료되도록 설정하거나, 특정 도메인 및 경로에 제한되도록 설정할수도 있습니다.

교차 출처 리소스 공유(CORS)

**교차 사이트 HTTP 요청**은 요청을 생성한 리소스의 도메인과 **다른 도메인**의 리소스에 대한 HTTP 요청입니다. 예를 들면, 도메인 A(`http://domaina.example/`)의 HTML 페이지가 `img` 요소를 통해 도메인 B(`http://domainb.foo/image.jpg`)의 이미지에 대한 요청을 생성하는 것입니다. 오늘날의 웹 페이지가 CSS 스타일시트, 이미지, 스크립트 등을 포함하는 교차-사이트 리소스을 로드하는 것을 아주 흔하게 볼 수 있습니다. CORS를 통해 웹 개발자는 그들의 사이트가 교차-사이트 요청에 대해 어떻게 반응할지 제어할 수 있습니다.

클라이언트 힌트

**클라이언트 힌트**는 서버가 클라이언트로부터 디바이스, 네트워크, 사용자 및 사용자 에이전트별 기본 설정에 대한 정보를 사전에 요청하기 위해 사용할 수 있는 응답 헤더의 집합입니다. 이에 따라 서버는 클라이언트가 제공하는 정보에 기반하여 전송할 리소스를 결정할 수 있습니다.

HTTP의 진화

초기 버전의 HTTP와 현대의 HTTP/2 및 새로 등장한 HTTP/3 이후 버전 간의 변경 사항에 대한 간략한 설명입니다.

Mozilla 웹 보안 가이드라인

안전한 웹 어플리케이션을 만들어주는 운영 팀에 도움이 될 만한 힌트 모음입니다.

HTTP 메시지

HTTP/1.x와 HTTP/2의 다양한 종류의 메시지 타입과 구조에 대해 설명합니다.

전형적인 HTTP 세션

일반적인 HTTP 세션의 흐름을 보여주고 설명합니다.

HTTP/1.x의 연결 관리

HTTP/1.x에서 사용가능한 세 가지 연결 관리 모델과 그 장단점을 설명합니다.

참고서
---

상세한 HTTP 참고서를 살펴보세요.

HTTP 헤더

HTTP 메시지 헤더는 리소스 또는 서버나 클라이언트의 동작을 설명하는데 사용됩니다. 헤더 필드는 IANA 레지스트리에서 유지 관리됩니다. IANA는 또한 제안된 새로운 HTTP 메시지 헤더의 레지스트리에서 유지 관리됩니다..

HTTP 요청 메서드

`GET`, `POST` 요청 및 덜 자주 사용되는 `OPTIONS`, `DELETE`, `TRACE` (en-US) 요청과 같이 다양한 작업을 HTTP로 수행할 수 있습니다.

HTTP 상태 응답 코드

HTTP 응답 코드는 지정한 HTTP 요청이 성공적으로 완료되었는지를 나타냅니다. 응답은 다섯 가지 클래스로 그룹핑됩니다. 정보성 응답, 성공 응답, 리다이렉트, 클라이언트 에러, 서버 에러.

CSP 지시문 (en-US)

`Content-Security-Policy` (en-US) 응답 헤더 필드는 주어진 페이지를 로드하기 위해 유저 에이전트가 허용한 리소스를 웹 사이트 관리자가 제어할 수 있도록 해줍니다. 몇 가지 예외를 제외하고, 대부분의 정책은 서버 오리진과 스크립트 엔드포인트 지정을 포함합니다.

도구 & 리소스
--------

HTTP를 이해하고 디버깅하는데 도움이 되는 도구와 리소스입니다.

Firefox 개발자 도구

네트워크 모니터

Mozilla Observatory

개발자, 시스템 관리자, 보안 전문가가 사이트를 안전하게 구성하는 것을 돕기위해 고안된 프로젝트입니다.

RedBot

캐시 관련 헤더를 확인하는 도구입니다.

브라우저가 동작하는 방식(2011)

브라우저 내부와 HTTP 프로토콜을 통한 요청 흐름에 대한 아주 이해하기 쉬운 문서입니다.


MathML

MathML
======

**MathML**(**Mathematical Markup Language**)은 수학 표기를 기술하고 그 구조와 내용을 모두 담고 있는 XML (en-US) 마크 업 언어이다. 여기에는 이 강력한 기술을 사용하게 해주는 문서와 예제, 도구에 대한 링크를 제공하고 있다.

MathML 레퍼런스
-----------

MathML 요소 레퍼런스 (en-US)

MathML 요소에 대한 상세 내용과 데스크톱 및 모바일 브라우저에 대한 호환성 정보를 담고 있다.

MathML 속성 레퍼런스 (en-US)

요소의 모양이나 동작을 변경하는 MathML 속성에 대한 정보를 제공한다.

MathML 예제 (en-US)

MathML 작동 방식에 대한 이해를 돕는 샘플과 예제를 소개한다.

MathML 작성 (en-US)

MathML 편집기와 결과를 웹에 적용하는 방법이 포함된 MathML을 작성하는데 도움이 되는 추천과 팁을 소개한다.

커뮤니티
----

* IRC 채널
* Wiki used by Mozilla 공헌자 위키
* W3C Math Home
* www-math w3.org 메일 아카이브
도구
--

* W3C Validator
* FireMath Firefox 부가기능
* Mathzilla Firefox 부가기능 모음
* LaTeXML - Convert LaTeX 문서를 HTML+MathML 웹페이지로 변경
* Web Equation - 손으로 작성한 공식을 MathML이나 LaTeX로 변환
* MathJax - 크로스 브라우징 JavaScript 수학 출력 엔진. See also the MathJax Native MathML add-on.
관련 항목
-----

* CSS
* HTML
* SVG
브라우저 호환성
--------

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


SVG: Scalable Vector Graphics

SVG: Scalable Vector Graphics
=============================

SVG 시작하기
--------

**SVG**(**Scalable Vector Graphics**)는 2차원 벡터 그래픽을 서술하는
 XML 기반의 마크업 언어입니다.
 SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하며
 CSS, DOM,
 JavaScript, SMIL (en-US) 등 다른
 웹 표준과도 잘 동작하도록 설계됐습니다. SVG는 달리 말하자면 HTML과 텍스트의 관계를
 그래픽에 적용한 것입니다.

 SVG 이미지와 그 동작 방식은 XML 텍스트 파일로 정의합니다. 따라서 검색, 색인, 스크립트
 적용, 그리고 압축이 가능하며, 그래픽 도구 외에도 아무 텍스트 편집기로 생성 및 편집이 가능합니다.

JPEG와 PNG 등 고전적인 비트맵 이미지 형식과 비교했을 때, SVG 형식의 벡터 이미지는
 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하며 현지화 역시 그래픽 편집기 없이도 파일 내의 텍스트를 수정해서
 쉽게 처리할 수 있습니다. 적절한 라이브러리를 함께 사용하면 SVG 파일을 필요에 따라 즉각 현지화하는 것도 가능합니다.

SVG는 World Wide Web Consortium(W3C)가 1999년부터 개발하고 있습니다.

SVG 자습서도 방문해보세요.

문서
--

SVG 요소 참고서

각각의 SVG 요소에 대한 세부 정보입니다.

SVG 특성 참고서 (en-US)

각각의 SVG 특성에 대한 세부 정보입니다.

SVG DOM 인터페이스 참고서

JavaScript 상호작용을 위한 SVG DOM 인터페이스의 세부 정보입니다.

HTML 콘텐츠에 SVG 효과 적용하기 (en-US)

 SVG는 HTML, CSS, JavaScript와 사용할 수 있습니다. SVG를 사용해서
 평범한 HTML 페이지나 웹 어플리케이션을 향상하세요.

도구
--

* SVG 테스트 도구모음
* 마크업 검증기
예제
--

* SVG 저작 가이드라인
* 이미지로서의 SVG (en-US)
* SMIL을 사용한 SVG 애니메이션 (en-US)
* SVG 아트 갤러리
* D3 (JavaScript를 사용해서 데이터를 HTML, SVG, CSS로 시각화하는 라이브러리)


EXSLT

EXSLT
=====

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축
 EXSLT는 XSLT의 확장입니다. 많은 모듈이 있으며, Firefox에서 지원되는 것들은 다음과 같습니다.

Common (`exsl`)

기본적인 확장 요소와 함수를 제공합니다.

Math (`math`)

노드를 비교하는 기능을 제공합니다.

Regular expressions (`regexp`)

JavaScript 구문 형식의 정규 표현식을 사용할 수 있는 기능을 제공합니다.

Sets (`set`)

집합을 처리하는 기능을 제공합니다.

Strings (`str`)

문자열을 처리하는 함수를 제공합니다.

### EXSLT 사용하기

EXSLT 확장을 사용하려면 스타일시트에 사용할 확장 기능의 이름공간(namespace)을 선언해야 합니다. 다음 예제에서는 정규 표현식 꾸러미를 사용하는 경우입니다.

```xml
<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:regexp="http://exslt.org/regular-expressions"
 extension-element-prefixes="regexp">

<xsl:import href="regexp.xsl" />

...

</xsl:stylesheet>
```

### Common

EXSLT Common 꾸러미는 XSLT의 기능을 확장하는 기본적인 함수들을 제공합니다. Common 꾸러미의 이름공간은 `http://exslt.org/common`입니다.

#### 함수

* exsl:node-set
* exsl:object-type
### Math

EXSLT Math 꾸러미는 숫자 값들에 대한 처리와 노드를 비교하는 일들을 수행하는 함수를 제공합니다. Math 꾸러미의 이름공간은 `http://exslt.org/math`입니다.

#### 함수

* math:highest
* math:lowest
* math:max
* math:min
### Regular expressions

EXSLT 정규 표현식 꾸러미는 JavaScript 스타일의 정규 표현식을 사용하여 텍스트의 검사, 일치, 치완 등을 수행하는 함수를 제공합니다.

EXSLT 정규 표현식의 이름공간은 `http://exslt.org/regular-expressions`입니다.

#### 함수

* regexp:match
* regexp:replace
* regexp:test
### Sets

EXSLT Sets 꾸러미는 집합 연산을 수행하는 함수를 제공합니다. 이 함수들의 이름공간은 `http://exslt.org/sets`입니다.

#### 함수

* set:difference
* set:distinct
* set:intersection
* set:has-same-node
* set:leading
* set:trailing
### Strings

EXSLT Strings 꾸러미는 문자열을 처리하는 함수를 제공합니다. Strings 꾸러미의 이름공간은 `http://exslt.org/sets`입니다.

#### 함수

* str:concat
* str:split
* str:tokenize
### 참고

* EXSLT web site


웹 미디어 기술

웹 미디어 기술
========

수 년에 걸쳐 오디오, 비디오 및 기타 미디어를 표시, 생성 및 관리하는 웹의 능력은 증가하는 속도로 성장했습니다. 오늘날 HTML 요소, DOM 인터페이스 및 다른 기능들이 이러한 작업을 수행할 수 있을 뿐만 아니라 미디어를 다른 기술과 함께 사용하여 정말 놀라운 일을 수행할 수 있도록 하는 수많은 API가 있습니다. 이 문서에서는 다양한 API를 마스터하는 데 도움이 될 수 있는 문서 링크가 나열되어 있습니다.

참조
--

### HTML

이 문서에서는 미디어 개발자를 위한 HTML 기능을 다룹니다.

`<audio>` (en-US)

`<audio>` 요소는 웹 환경에서 오디오를 재생하는 데 사용됩니다. 이는 보다 복잡한 미디어의 대상으로 보이지 않게 사용하거나 오디오 파일의 사용자 제어 재생을 위한 보이는 컨트롤과 함께 사용할 수 있습니다. JavaScript에서 `HTMLAudioElement` (en-US) 객체로 접근할 수 있습니다.

`<video>`

`<video>` 요소는 웹 환경에서 비디오 콘텐츠의 엔드포인트입니다. 비디오 파일을 표시하거나 스트리밍 비디오 콘텐츠의 대상으로 사용할 수 있습니다. `<video>`는 예를 들어 `<canvas>`(프레임 잡기 및 조작용)를 비롯한 다른 HTML 및 DOM 기술과 미디어 API를 연결하는 방법으로도 사용할 수 있습니다. JavaScript에서 `HTMLVideoElement` 객체로 접근할 수 있습니다.

`<track>`

HTML `<track>` 요소는 `<audio>` (en-US) 또는 `<video>` 요소 내에 배치되어 미디어를 재생할 때 사용할 WebVTT (en-US) 형식 자막 또는 캡션(caption) 트랙에 대한 참조를 제공할 수 있습니다. JavaScript에서 `HTMLTrackElement` (en-US) 객체로 접근할 수 있습니다.

`<source>` (en-US)

HTML `<source>` 요소는 `<audio>` (en-US) 또는 `<video>` 요소 내에서 표시할 소스 미디어를 지정하는 데 사용됩니다. 여러 소스를 사용하여 다양한 형식, 크기 또는 해상도로 미디어를 제공할 수 있습니다. JavaScript에서 `HTMLSourceElement` (en-US) 객체로 접근할 수 있습니다.

### API

미디어 기능 API (en-US)

미디어 기능 API를 사용하면 앱 또는 사이트가 실행 중인 기기의 인코딩 및 디코딩 기능을 결정할 수 있습니다. 이를 통해 어떤 형식을 언제 사용할지 실시간으로 결정할 수 있습니다.

미디어 캡쳐 및 스트림 API

로컬 및 네트워크에서 미디어를 스트리밍, 기록 및 조작할 수 있도록 하는 API에 대한 참조입니다. 여기에는 로컬 카메라와 마이크를 사용하여 비디오, 오디오 및 정지 이미지를 캡처하는 것이 포함됩니다.

미디어 세션 API (en-US)

미디어 세션 API는 미디어 알림을 사용자 지정하는 방법을 제공합니다. 웹 앱이 재생중인 미디어에 대해 사용자 에이전트가 표시할 메타데이터를 제공하여 이를 수행합니다. 또한 브라우저가 키보드, 헤드셋, 원격 제어에 있는 하드웨어 키, 알림 영역 및 모바일 잠금 화면에 있는 소프트웨어 키와 같은 플랫폼 미디어 키에 접근하는 데 사용할 수 있는 작업 핸들러를 제공합니다.

미디어 스트림 녹화 API (en-US)

미디어 스트림 녹화 API를 사용하면 미디어 스트림을 캡처하여 데이터를 처리 또는 필터링하거나 디스크에 기록할 수 있습니다.

웹 오디오 API

웹 오디오 API를 사용하면 실시간 및 미리 녹음된 자료에서 사운드 데이터를 생성, 필터링 및 조작한 다음 해당 `<audio>` 요소, 미디어 스트림 또는 디스크와 같은 대상으로 보낼 수 있습니다.

WebRTC

WebRTC(Web Real-Time Communication)를 사용하면 중개자 없이 인터넷을 통해 두 피어 간에 라이브 오디오 및 비디오를 스트리밍하고 임의의 데이터를 전송할 수 있습니다.

안내서
---

HTML에서 오디오 및 비디오 사용하기

`<audio>` 및 `<video>` 요소 사용에 대한 안내서입니다.

접근 가능한 멀티미디어 (en-US)

이 안내서에서는 웹 디자이너와 개발자가 서로 다른 능력을 가진 사람들이 접근할 수 있는 콘텐츠를 만드는 방법을 다룹니다. `<img>` 요소에 `alt` 속성을 사용하는 것부터 캡션, 스크린 리더용 미디어 태깅에 이르기까지 다양합니다.

웹상의 미디어 유형 및 형식 안내서 (en-US)

웹에서 이미지, 오디오 및 비디오 미디어에 사용할 수 있는 파일 형식 및 코덱에 대한 안내서입니다. 여기에는 어떤 종류의 콘텐츠에 사용할 형식에 대한 권장 사항, 대체 제공(fallback) 방법 및 미디어 유형의 우선 순위 지정 방법을 포함한 모범 사례가 포함되며 각 미디어 컨테이너 및 코덱에 대한 일부 브라우저 지원 정보도 포함됩니다.

스트리밍 오디오 및 비디오 (en-US)

오디오 및 비디오를 스트리밍하는 방법과 스트리밍의 최상의 품질 및(또는) 성능을 보장하기 위해 활용할 수 있는 기술을 다룹니다.

미디어 및 웹 오디오 API용 자동 재생 가이드

미디어 또는 오디오의 예기치 않은 자동 재생은 사용자에게 좋지않은 경험을 줄 수 있습니다. 자동 재생은 사용하는 목적이 있더라도, 신중하게 사용해야 합니다. 사용자가 이를 제어할 수 있도록 현재 많은 브라우저에서 자동 재생 차단 형식을 제공합니다. 이 문서는 자동 재생에 대한 안내서이며 자동 재생을 사용하는 시기와 방법, 자동 재생 차단을 정상적으로 처리하기 위해 브라우저에서 작업하는 방법에 대한 팁이 포함되어 있습니다.

웹 오디오 공간화 기본

화면에 렌더링된 3D 장면이거나 헤드셋을 사용하여 경험하는 가상현실 3D 환경에서는 소스 방향에서 나오는 것처럼 들리도록 오디오를 수행하는 것이 중요합니다. 이 안내서에서는 이를 수행하는 방법을 다룹니다.

다른 주제
-----

흥미로운 방식으로 미디어 API와 함께 사용할 수 있으므로 관심이 있을 수 있는 관련 항목입니다.

Canvas API

Canvas API를 사용하면 `<canvas>`에 그림을 그려 이미지 내용을 조작하고 변경할 수 있습니다. 비디오 프레임을 캡처하고 조작할 수 있도록 `<canvas>` 요소를 비디오 재생 또는 카메라 캡처의 대상으로 설정하는 등 다양한 방법으로 미디어와 함께 사용할 수 있습니다.

WebGL

WebGL은 기존 Canvas API 위에 OpenGL ES 호환 API를 제공하여 웹에서 강력한 3D 그래픽을 할 수 있도록 합니다. 캔버스를 통해 미디어 콘텐츠에 3D 이미지를 추가하는 데 사용할 수 있습니다.

WebXR (en-US)

현재 사용되지 않는 WebVR API를 대체하는 WebXR은 가상 현실(VR) 및 증강 현실(AR) 콘텐츠 제작을 지원하는 기술입니다. 혼합된 현실 콘텐츠를 장치 화면에 표시하거나 고글 또는 헤드셋을 사용하여 표시할 수 있습니다.

WebVR (en-US)
지원이 중단되었습니다

Web Virtual Reality API는 Oculus Rift 또는 HTC Vive와 같은 가상 현실(VR) 장치를 지원하므로 개발자가 사용자의 위치와 움직임을 장치에 표시하는 3D 장면 내에서 움직임으로 변환할 수 있습니다. WebVR은 WebXR로 대체되었으며 곧 브라우저에서 제거될 예정입니다.


학습서

학습서
===

이 페이지에는 다양한 학습서 및 교육 자료에 대한 링크가 있습니다. 여러분이 웹 개발을 이제 시작하는 사람이든지, 기초를 공부하는 사람이든지, 이미 개발을 해본 사람이든지 모범 사례에 대한 유용한 자료를 찾으실 수 있습니다. 이들 자료는 웹 개발의 개방형 표준 및 모범 사례를 채택한 미래 지향적 기업 및 웹 개발자가 창작한 것으로서 Creative Commons 등의 개방형 콘텐트 라이선스를 통해 번역을 제공 또는 허용합니다.

웹입문자를 위하여
---------

시작해 볼까요?

시작해 볼까요? 는 웹개발의 실제를 소개하는 간결한 안내서입니다. 간단한 코딩을 통해 자신만의 웹페이지를 구축할 수 있는 도구들을 준비할 수 있도록 돕습니다.

|  |  |
| --- | --- |
| HTML 학습서
입문

HTML의 기본
 (WebPlatform.org)

 HTML이 무엇인지, 무엇을 할 수 있는지, HTML의 브리핑 역사, HTML과
 같은 문서구조를 보여줍니다. 훨씬 깊은 HTML의 각 부분을 하나하나 살펴
 수행할 수 있습니다.

Wep Page의 기본 구조
 (SitePoint)

큰 그림을 통해 HTML 요소에 대해 알아봅니다.
기본 HTML 요소
 (SitePoint)

 HTML문서를 작성하는 데 사용할 수 있는 다양한 유형의 요소를
 설명합니다.

HTML기초 학습서
 (HTML Dog)

기본 학습서를 익히며 연습합니다.
HTML 과제
 (Wikiversity)

 의미있는 mark-up에 집중하여 HTML기술(예를 들어, "나는 <h2> 요소
 또는<strong> 요소를 이용합니까?")을 이러한 과제에 연마,
 사용합니다.

MDN HTML 요소 참조

 포괄적인 HTML요소에 대한 참조 및 Firefox와 다른 부라우저를
 지원하는 방법을 알려줍니다.

CodeAvengers
 (CodeAvengers.com)

 Code Avengers는 HTML, CSS 및 JavaScript를 사용하여 Code Wep
 에플리케이션 및 게임을 배우는 재미있고 효과적인 방법입니다.

고급

HTML 페이지를 빠르게 로드할 수 있게 만드는 팁

 사이트 방문자들에게 더 많은 응답을 제공하고, 웹 서버와 인터넷 연결
 부하를 줄여 웹 페이지를 최적화 할 수 있습니다.

Dive into HTML5
 (Mark Pilgrim)

HTML5, HTML의 최신버전 기능에 대해 자세히 알아보십시오.
HTML5 학습서
 (HTML5 Rocks)

HTML5 기능을 사용하여 코드를 통해 guided tour를 습득.
HTML5의 의미
 (A List Apart)

앞뒤로 호환되며, 확장 가능한 mark-up을 배울 수 있습니다.
Canvas 학습서

 Canvas 요소를통해 스크립트를 이용하여 크래픽을 만드는 방법을
 알아보십시오.

HTML5 Doctor
현재 HTML5를 사용하는 방법에 대한 기사.
HTML5 오디오의 기쁨
 (Elated)

 쉽게 웹 페이지에 사운드를 적용시키는 HTML 오디오 요소를 사용하는
 방법에 대해 알아봅니다. 더 많은 코드 예제는 학습서 안에 있습니다.

 | Javascript 학습서
입문

Codecademy (Codecademy)

 Codecademy는 자바 스크립트를 코딩하는 방법을 배울 수 있는 가장 쉬운
 방법입니다. 친구들과 함께 재미있게 배울 수 있습니다.

JavaScript 시작하기
JavaScript란 무엇이며, 어떻게 도움을 줄까?
Programming – 입문 (WebPlatform.org)

 프로그래밍의 기본 중의 기본. JavaScript를 사용하고 더 많은 것을 할
 수 있는 모범사례와 무엇을 할 수 있는지 소개하는 기사.

JavaScript 모범사례(WebPlatform.org)

 자바 스크립트를 작성(그렇지 않아도)한 명백하고 분명한 몇 가지
 모범사례에 대해 알아보십시오.

CodeAvengers
 (CodeAvengers.com)

 Code Avengers는 HTML, CSS 및 JavaScript를 사용하여 Code Wep
 에플리케이션 및 게임을 배우는 재미있고 효과적인 방법입니다.

중급

JavaScript 다시 소개하기

 중급 개발자들을 대상으로 자바 스크립트 프로그래밍 언어의 요점을
 되풀이합니다.

Eloquent JavaScript
중급 및 고급 자바 스크립트 방법론에 대한 포괄적인 가이드.
JavaScript 필수 디자인 패턴
 (Addy Osmani)

자바 스크립트에 필요한 디자인 패턴을 소개.
JavaScript 프로그래밍 언어
 (YUI Blog)

오늘날, Douglas Crockford가 탐구해온 언어와 방법.
객체 지향 JavaScript 소개
자바 스크립트 개체 모델에 대해 자세히 알아보십시오.

고급

고급 JavaScript 학습
 (John Resig)

John Resig의 고급 JavaScript 가이드.
JavaScript DOM을 소개합니다
 (Elated)

 이것은 어떤 문서이며, 어디가 유용합니까? 이 문서는 강력한 스크립트
 기능을 부드럽게 소개합니다.

불편한 API: DOM의 이론
 (YUI Blog)

Douglas Crockford가 문서 객체 모델을 설명합니다.
고급JavaScript
 (YUI Blog)

 Douglas Crockford가 자바 스크립트 프로그래머가 제작할 응용프로그램을
 선택할 수 있는 코드 패턴을 유사하게 보여드립니다.

JavaScript Garden
자바 스크립트의 가장 독특한 부분을 설명서에서 참조하십시오.
어떤 JavaScript Framework를?
 (StackOverflow)

자바 스크립트 프레임 워크를 선택하는 방법에 대한 조언.
Non-blocking JavaScript Downloads
 (YUI Blog)

 자바 스크립트를 포함하는 페이지의 다운로드 성능 향상을 위한 팁을
 제공합니다.

JavaScript 가이드

 초급에서 고급까지 모든 수준을 학습 할 수 있는 포괄적이고 정기적으로
 업데이트 되는 자가스크립트 설명서를 참조하십시오.

 |
| CSS 학습서 |
| 입문

CSS 시작하기

 이 학습서는 Cascading Style Sheets (CSS)를 소개합니다. 이것은 자신의
 컴퓨터에 시도할 수 있는 실용적인 예제와 CSS의 기본 기능을
 안내합니다.

CSS 기초
 (WebPlatform.org)

 CSS가 무엇인지, 어떻게 HTML에 적용하는지, 기본적인 CSS구문은 어떤
 것인지. 다음과 같이 배웁니다.

CSS Selector Classes
 (Wikiversity)

CSS의 클래스는 무엇입니까?
외부 CSS
 (Wikiversity)

외부 스타일 시트에서 CSS를 사용.
스타일에서 Touch 추가하기
 (W3C)

CSS로 웹페이지를 스타일링 하는 간단한 초보자 가이드.
일반적인 CSS 질문
초보자들을 위한 일반적인 질문 및 응답.
CodeAvengers
 (CodeAvengers.com)

 Code Avengers는 HTML, CSS 및 JavaScript를 사용하여 Code Wep
 에플리케이션 및 게임을 배우는 재미있고 효과적인 방법입니다.

중급

CSS 참조

 파이어 폭스와 다른 브라우저에서의 지원에 대한 세부사항, CSS 참조를
 작성합니다.

CSS 과제
 (Wikiversity)

CSS 기술을 이용해 더 많은 연습을 필요로 하는곳에 참여하십시오.
중급 CSS 개념
 (HTML.net)

Grouping, pseudo-classes 등등.
CSS Positioning 101
 (A List Apart)

표준을 준수하여 table-free layout을 사용.
CSS와 점진적 향상
 (A List Apart)

CSS로 웹 페이지에 점진적 개선을 통합 할 수 있습니다.
Fluid Grids
 (A List Apart)

 typographic grid를 이용하는 동안, 유동적으로 브라우저 창 크키를
 조절하는 레이아웃 디자인.

 | 고급

5분 동안의 CSS3
 (Addy Osmani)

CSS3 도입 된핵심 기능 중 일부에 대한 간단한 소개.
CSS를 사용한 변환
회전, 기울이기, 크기 조절 등의 변환을 CSS를 사용하여 적용합니다.
CSS 전환

 CSS 전환, 초안 CSS3 스펙의 일부 대신에 변경 내용이 즉시 적용하는
 것에 CSS 속성 변화를 보여주는 방법을 제공합니다.

Understanding CSS3 Transitions
 (A List Apart)

신중하게 상황을 선택하여 CSS3를 사용하여 전환을 시작합니다.
@font-face 윕 font를 구현하기 위한 빠른 안내
 (HTML5 Rocks)

 CSS3에서 @font-face 기능을 사용하면, 접근 조작 가능하거나 확장
 가능한 방식으로 웹에서 사용자 지정 글꼴을 사용할 수 있습니다.

 |


HTML: Hypertext Markup Language

HTML: Hypertext Markup Language
===============================

**HTML**(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를
 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기능/동작 (JavaScript)을 설명하는 데 사용됩니다.

"Hypertext(하이퍼텍스트)"란 웹 페이지를 다른 페이지로 연결하는 링크를 말합니다. 링크는 웹의 근본적인 속성으로, 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 연결함으로써 여러분도 월드 와이드 웹 세계의 능동적인 일원이 될 수 있습니다.

HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용합니다. HTML 마크업은 다양한 "요소"를 사용하는데, 요소에는 `<head>`, `<title>`, `<body>`, `<header>`, `<footer>`, `<article>`, `<section>`, `<p>`, `<div>` (en-US), `<span>`, `<img>`, `<aside>`, `<audio>` (en-US), `<canvas>`, `<datalist>`, `<details>` (en-US), `<embed>`, `<nav>`, `<output>`, `<progress>`, `<video>`, `<ul>`, `<ol>`, `<li>` 등 많은 종류가 존재합니다.

HTML 요소는 "태그"를 사용해서 문서의 다른 텍스트와 구분합니다. 태그는 "`<`", 태그 이름, "`>`"로 이루어집니다. 태그 안의 요소 이름은 대소문자를 구분하지 않습니다. 즉, 대문자, 소문자, 아니면 섞어서도 작성할 수 있습니다. 예를 들어 `<title>`요소는 `<Title>`, `<TITLE>`, 그 외 기타 가능한 모든 방법으로 작성할 수 있습니다.

아래 문서에서 HTML을 더 깊게 배워보세요.

중요한 자료
------

HTML 소개

웹 개발이 처음이시라면 HTML 기본 문서에서 HTML이란 무엇인지, 그리고 HTML의 사용법을 배워보세요.

HTML 자습서

HTML 학습지를 방문하시면 HTML 사용법과 자습서, 완전한 예제를 찾아보실 수 있습니다.

HTML 참고서

방대한 HTML 참고서에서는 HTML을 구성하는 모든 요소와 특성의 자세한 설명을 볼 수 있습니다.

#### 프런트엔드 웹 개발자가 되고자 하시나요?

목표를 달성하기 위한 모든 필수 정보가 들어있는 교육 과정을 준비했습니다.

**시작하기**

초보자 자습서
-------

MDN HTML 학습지는 HTML을 처음부터 알려주는 모듈로 구성되어 있습니다. 사전 지식도 필요하지 않습니다.

HTML 소개

이 모듈에서는 텍스트에 HTML을 추가하고, 하이퍼링크를 작성하고, HTML을 이용해 웹 페이지의 구조를 작성하는 등 중요한 개념과 구문에 익숙해지도록 기초를 다집니다.

멀티미디어와 임베딩

이 모듈에서는 HTML을 사용해 웹 페이지에 이미지를 추가하는 여러가지 방법과 오디오, 비디오, 혹은 다른 웹 페이지를 통째로 삽입하는 등 멀티미디어를 삽입하는 방법을 살펴봅니다.

HTML 표

표 형태의 데이터를 웹페이지에 이해하기도 쉽고 접근하기도 쉬운 방식으로 표현하는 것은 어려울 수 있습니다. 이 모듈은 기본적인 표 마크업 작성법과, 캡션과 요약 등 고급 기능 구현도 다룹니다.

HTML 양식

양식은 웹의 매우 중요한 부분으로, 회원가입과 로그인, 피드백 전송, 상품 구매 등 웹 사이트의 상호작용에 필요한 많은 기능을 제공합니다. 이 모듈은 양식의 클라이언트 사이트 개발 방법을 안내합니다.

일반적인 HTML 문제 해결하기 (en-US)

이 모듈은 HTML을 사용해서 웹 페이지 제목, 이미지와 비디오 추가, 콘텐츠 강조, 기본적인 양식 생성처럼 일반적인 문제를 해결하는 법을 설명합니다.

고급 주제
-----

CORS 활성화 이미지

`crossorigin` 속성을 적절한 CORS 헤더와 조합하면 `<img>` 요소의 이미지를 외부 출처에서 가져올 수 있으며, 마치 현재 출처의 이미지인 것처럼 `<canvas>`에서도 사용할 수 있습니다.

CORS 설정 특성

`<img>`, `<video>` 등 CORS를 지원하는 일부 HTML 요소는 `crossorigin` 특성(`crossOrigin` 속성)을 보유하며, 해당 요소가 데이터를 가져올 때의 CORS 요청을 통제할 수 있습니다.

rel="preload"로 콘텐츠 미리 불러오기

`<link>` 요소, `rel` 특성의 `preload` 값을 사용하면 페이지를 불러온 직후 빠르게 사용해야 하는 리소스에 대해 선언적인 가져오기 요청을 `<head>` 안에 추가할 수 있습니다. 이렇게 지정한 리소스는 페이지 불러오기 라이프사이클의 초기, 브라우저의 주 렌더링이 시작하기도 전에 시작하고, 페이지의 첫 렌더링이 덜 막혀 성능이 개선됩니다. 이 글에서는 `preload` 작동 방식에 대한 기본적인 지침을 제공합니다.

참고서
---

HTML 참고서

HTML은 **요소**로 이루어져있으며, 각각의 요소는 몇 가지 **특성**을 사용해 수정할 수 있습니다. HTML 문서는 서로 **링크**로 연결되어 있습니다.

HTML 요소 참고서

모든 HTML 요소의 목록을 살펴보세요.

HTML 특성 참고서

HTML 요소는 **특성**을 가집니다. 특성은 요소나 그 동작 방식을 다양하게 설정하고 수정하는 일련의 추가 값입니다.

전역 특성

전역 특성은 모든 HTML 요소에 지정할 수 있으며, 심지어 표준에 명시되지 않은 요소에도 지정할 수 있습니다. 비록 비표준 요소를 사용하는 순간 문서는 HTML 표준을 준수하지 않는 것이지만, 그렇다고 해도 모든 비표준 요소는 전역 특성을 허용해야 합니다.

인라인 요소와 블록 레벨 요소

HTML의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다. 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다.

HTML 미디어 유형과 형식 안내서 (en-US)

`<audio>` (en-US)와 `<video>` 요소를 통해 외부 프로그램 없이 오디오와 비디오 미디어를 재생할 수 있습니다.

HTML 콘텐츠 카테고리

HTML 요소는 어떤 상황에서는 사용할 수 있고, 어떤 상황에서는 사용할 수 없는지 결정하는 여러가지 분류, 콘텐츠 카테고리에 속합니다. 마찬가지로, 요소는 자신의 콘텐츠로 허용할 콘텐츠 카테고리도 정의합니다.

호환성 모드와 표준 모드

호환성 모드와 표준 모드에 대한 역사적인 정보입니다.

관련 주제
-----

CSS를 사용해 HTML 요소에 색 입히기 (en-US)

이 문서는 HTML 문서의 어떤 부분에 색을 적용할 수 있는지와, 이 때 사용할 수 있는 CSS 속성을 나열합니다. 예제와 함께 각종 도구로의 링크도 제공합니다.


웹 성능

웹 성능
====

웹 성능은 객관적인 측정치이면서 로드 시간과 런타임을 어떻게 인식하는지에 대한 주관적인 사용자 경험입니다. 사이트가 로드되는 데 걸리는 시간, 로드 후 상호작용에 반응할 수 있게 되기까지의 시간, 사용자와 콘텐츠의 상호작용이 얼마나 매끄러운지(스크롤이 부드러운지, 버튼은 클릭 가능한지, 빠르게 팝업이 로드되고 표시되는지, 애니메이션이 부드럽게 표시되는지)가 바로 웹 성능입니다. 웹 성능에는 객관적 측정치(로딩 시간, 초당 프레임 수, 상호작용에 반응할 수 있게 되기까지의 시간 등)와 주관적 경험(콘텐츠의 로딩 시간이 얼마나 길다고 느끼는지)이 모두 포함됩니다.

사이트 응답 시간이 길어질수록 이탈하는 사용자는 늘어납니다. 로딩 시간과 응답 시간을 최소화하고, 추가 기능을 활용해 대기 시간이 느껴지지 않게 하는 등 최대한 빠르게 웹사이트를 이용하고 상호작용할 수 있어야 합니다. 이와 동시에 최초 로드 시점 이후의 서비스를 비동기적으로 불러와놓는 것이 중요합니다.

글의 다음 부분에서 웹 성능을 측정하고 개선할 때 도움이 될 만한 도구와 API, 모범 사례를 소개합니다.

주요 안내서
------

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

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

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

지연 로딩**지연 로딩**은 리소스를 논 블로킹(중요하지 않음)으로 식별하여 필요할 때만 로드하는 전략입니다. 이는 중요 렌더링 경로의 길이를 단축하는 방법으로, 페이지 로드 시간을 감소시킬 수 있습니다.

초보자를 위한 튜토리얼
------------

MDN의 웹 성능 학습 안내서에는 웹 성능의 필수 개념들에 대한 최신 튜토리얼들이 있습니다. 웹 성능의 세계에 막 발을 들여놓았다면 여기에서 시작하세요.

웹 성능: 개요 (en-US)

본격적으로 웹 성능에 대해 배우기 전 내용을 전반적으로 살펴봅니다. 여기에서 여정을 시작하세요.

웹 성능이란 무엇인가? (en-US)

이 글에서는 성능이란 어떤 것인지에 대해 자세히 살펴보면서 전체 모듈을 시작합니다. 성능에 관해 생각할 때 고려해야 할 도구나 지표, API, 네트워크, 사용자 그룹, 그리고 성능을 웹 개발 과정의 일부로 포함시키는 방법에 대해 다룹니다.

사용자는 성능을 어떻게 인지하는가? (en-US)

웹사이트를 사용자가 주관적으로 얼마나 빠르다고 인식하는지가 실제 몇 ms 단위로 빠른지보다 중요합니다. 사용자의 주관적 인식은 실제 페이지 로딩 시간, 유휴 시간, 사용자의 상호작용에 대한 응답성, 스크롤 및 기타 애니메이션들이 얼마나 부드러운가에 의해 영향을 받습니다. 이 글에서는 로딩과 관련된 다양한 지표, 애니메이션, 응답성 지표에 대해 논의하고 실제 타이밍과 일치하지 않더라도 주관적 인식을 개선할 수 있는 모범 사례들을 살펴봅니다.

웹 성능 기초 (en-US)

HTML, CSS, JavaScript, 미디어 파일 등의 프론트엔드 구성 요소뿐만 아니라 어플리케이션을 느리게 만들 수 있는 기능들과 주관적, 객관적으로 빠르게 만들 수 있는 기능들이 있습니다. 웹 성능과 관련된 API, 개발자 도구, 모범 사례, 안 좋은 사례를 여럿 소개합니다. 이 글에서는 그런 기능들을 기본적인 수준으로 다루면서 각 주제별로 성능을 개선하기 위해 더 깊게 살펴볼 수 있는 링크를 제공합니다.

HTML과 웹 성능 (en-US)

마크업의 순서나 속성들이 웹사이트의 성능에 영향을 미칠 수 있습니다. DOM 노드의 개수를 최소화하고 스타일과 스크립트, 미디어와 써드파티 스크립트 등을 포함할 때의 순서와 속성을 최적화하여 사용자 경험을 크게 개선할 수 있습니다. 이 글에서는 최고의 성능을 끌어내려면 HTML을 어떻게 사용해야 하는지를 다룹니다.

멀티미디어: 이미지와 비디오

많은 경우 웹 성능을 개선하는 가장 쉬운 방법은 미디어 최적화입니다. 사용자 에이전트의 기능, 크기, 픽셀 밀도를 고려해 제각기 다른 미디어 파일을 제공할 수 있습니다. 배경의 비디오에서 오디오 트랙을 없애는 것과 같은 팁을 추가로 활용하면 더 성능을 개선할 수 있습니다. 이 글에서는 비디오, 오디오, 이미지 콘텐트가 성능에 어떻게 영향을 미치는지, 그리고 어떻게 그런 영향을 최소화할 수 있는지 살펴봅니다.

CSS와 웹 성능 (en-US)

성능 개선 시 CSS 최적화는 상대적으로 중요하지 않습니다. 하지만 다른 CSS 기능보다 성능에 많은 영향을 끼치는 기능들이 몇 가지 있습니다. 이 글에서는 성능에 영향을 미치는 CSS 속성을 살펴보고 성능에 부정적인 영향을 주지 않도록 스타일을 다루는 방법을 제안합니다.

웹 성능을 높이는 JavaScript 모범 사례 (en-US)

JavaScript는 올바르게 사용할 경우 상호작용이 가능한 몰입감 있는 웹 경험을 제공합니다. 그러나 그렇지 않을 경우 다운로드 시간과 렌더링 시간, 인앱 성능, 배터리 수명, 사용자 경험을 크게 저하시킬 수도 있습니다. 이 글은 복잡한 컨텐츠이더라도 성능을 최대한으로 발휘할 수 있도록 고려해야 하는 JavaScript 모범 사례들에 대해 소개합니다.

모바일 환경에서의 웹 성능

모바일 기기로 웹에 접속하는 것이 대중화되면서, 모든 모바일 플랫폼은 완전한 기능을 갖춘 웹 브라우저를 탑재하게 되었습니다. 그러나 여전히 대역폭과 CPU, 배터리 수명이 제한적이기 때문에 모바일 플랫폼에서의 웹 컨텐츠의 성능을 고려해야 합니다. 이 글에서는 모바일 환경에 특화된 고려 사항을 살펴봅니다.

Performance API 사용하기
--------------------

Performance API

이 안내서는 High-Resolution Time 기준에 정의된 `Performance` (en-US) 인터페이스를 어떻게 사용하는지 설명합니다.

Resource Timing API (en-US)

Resource loading and timing (en-US) 리소스를 로딩하고, 리소스 버퍼와 CORS에 대응하는 법을 다룹니다.

The performance timeline

Performance Timeline 기준은 `Performance` (en-US) 인터페이스의 확장으로, 클라이언트 차원의 대기 시간을 어플리케이션 내부에서 측정할 수 있도록 돕습니다. 두 인터페이스를 함께 사용하여 어플리케이션의 어떤 지점이 성능에 병목 현상을 일으키는지 찾을 수 있습니다.

User Timing API (en-US)

user timing API (en-US)의 "mark"와 "measure" 타입을 활용하여 어플리케이션에 특화된 타임스탬프를 만들어 보세요. 이들은 브라우저의 Performance timeline의 일부가 됩니다.

Beacon API

Beacon 인터페이스는 비동기적이고 차단되지 않는 요청을 웹 서버에 보내도록 예약합니다.

Intersection Observer API (en-US)

Intersection Observer API를 활용하여 요소가 보이는 시간을 지정하고 관심 요소가 보일 때 비동기적으로 알림을 받으세요.

다른 문서들
------

성능과 관련된 Firefox Profiler 기능

이 웹사이트는 개발자 도구의 성능 관련 기능들이 무엇인지, 그리고 어떻게 사용하는지에 대한 정보를 제공합니다. Call Tree, Flame Graph, Stack Chart, Marker Chart, Network Chart 등에 대한 정보가 있습니다.

내장 profiler 사용하기

Firefox의 내장 profiler를 사용하여 앱 성능을 측정하는 법을 배웁니다.

용어 사전
-----

* Beacon
* Brotli compression
* Client hints
* Code splitting
* CSSOM
* Domain sharding
* Effective connection type
* First contentful paint
* First CPU idle
* First input delay
* First interactive
* First meaningful paint
* First paint
* HTTP
* HTTP/2
* Jank
* Latency
* Lazy load
* Long task
* Lossless compression
* Lossy compression
* Main thread
* Minification
* Network throttling
* Packet
* Page load time
* Page prediction
* Parse
* Perceived performance
* Prefetch
* Prerender
* QUIC
* RAIL
* Real User Monitoring
* Resource Timing
* Round Trip Time (RTT) (en-US)
* Server Timing
* Speculative parsing
* Speed index
* SSL
* Synthetic monitoring
* TCP handshake
* TCP slow start
* Time to first byte
* Time to interactive
* TLS
* Transmission Control Protocol (TCP)
* Tree shaking
* Web performance
참조 항목
-----

HTML

* `<picture>` 요소 (en-US)
* `<video>` 요소
* `<source>` 요소 (en-US)
* `<img> srcset` 요소
    + 반응형 이미지
* `rel="preload"`를 사용해 콘텐츠 미리 불러오기 - https://w3c.github.io/preload/

CSS

* will-change
* GPU v CPU
* Measuring layout
* Font-loading best practices

JavaScript

* DOMContentLoaded
* Garbage collection
* requestAnimationFrame

API

* Performance API (en-US)
* Navigation Timing API
* Media Capabilities API (en-US)
* Network Information API
* PerformanceNavigationTiming (en-US)
* Battery Status API
* Navigator.deviceMemory (en-US)
* Intersection Observer
* Using the User Timing API (en-US)
* Long Tasks API (en-US)
* High Resolution Timing API (en-US) (https://w3c.github.io/hr-time/)
* Resource Timing API (en-US)
* Page Visibility
* Cooperative Scheduling of Background Tasks API
    + requestIdleCallback()
* Beacon API
* Resource Hints - dns-prefetch (en-US), preconnect, prefetch (en-US), and prerender
* FetchEvent.preloadResponse (en-US)
* Performance Server Timing API (en-US)

헤더

* Content-encoding
* HTTP/2
* gZip
* Client Hints

도구

* Performance in Firefox Developer Tools

추가 지표

* Speed Index and Perceptual Speed Index

모범 사례

* Using Service Workers (en-US)
* Using Web Workers (en-US)
    + Web Workers API
* PWA
* Caching
* Content Delivery Networks (CDN)


CSS: Cascading Style Sheets

CSS: Cascading Style Sheets
===========================

**Cascading Style Sheets**(**CSS**)는 HTML이나
 XML(XML의 방언인 SVG,
 XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한
 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에
 어떻게 렌더링되어야 하는지 지정합니다.

 CSS는 **오픈 웹**의 핵심 언어 중 하나이며, W3C 명세가 다양한
 브라우저의 표준으로 작동하고 있습니다. 과거에는 CSS 명세의 다양한 부분을 순차적으로 개발했으므로 CSS1, CSS2.1,
 CSS3처럼 버전을 붙이는 것이 가능했습니다. 그러나 공식 버전이 CSS4로 올라가지는 않을 것입니다.

 CSS3 이후, CSS 명세의 범위가 엄청나게 넓어짐에 따라 여러 CSS 모듈 사이의 차이도 너무나 커졌습니다. 그래서 이제는
 권고안을 모듈별로 개발하고 공개하는 것이 더 효과적인
 상황입니다. 이제 W3C는 CSS 명세의 버전을 올리지 않고, 대신 주기적으로
 CSS 명세 안정판의 스냅샷을 생성하고 있습니다.

중요한 자료
------

CSS 소개

 웹 개발이 처음이시라면 CSS 기본 문서에서 CSS란
 무엇인지, 그리고 CSS의 사용법을 배워보세요.

CSS 자습서

 MDN의 CSS 학습지는 기초 수준부터 숙련 레벨까지, 모든 기초를 망라하는 방대한
 자습서를 포함하고 있습니다.

CSS 참고서

 MDN의 CSS 전체 참고서는 숙련된 개발자를 위해 CSS의 모든 속성과 개념의
 설명을 제공합니다.

#### 프런트엔드 웹 개발자가 되고자 하시나요?목표를 달성하기 위한 모든 필수 정보가 들어있는 교육 과정을 준비했습니다.**시작하기**

자습서
---

 MDN CSS 학습지는 CSS를 처음부터 알려주는 모듈로 구성되어 있습니다. 사전 지식도
 필요하지 않습니다.

CSS 첫걸음

 CSS(Cascading Style Sheets)는 웹 페이지에 스타일과 레이아웃을 적용할 때 사용합니다. 예시를 몇 가지 들자면 글꼴,
 색상, 크기를 조절하고, 콘텐츠의 간격을 조정하고, 페이지를 여러개의 열로 나누고, 애니메이션 등 장식을 추가할 수도
 있습니다. 이 모듈에서는 CSS의 기본적인 작동 원리와 구문의 생김새, HTML에 실제로 적용하는 법을 배우면서 다음 과정으로
 가는 길을 닦습니다.

CSS의 구성 블록

 이 모듈은 CSS 첫걸음이 끝난 곳부터 시작합니다. 이제 언어와 구문에
 익숙해졌고, 기본적인 사용법도 익혀봤으니 약간 더 깊게 들어갈 차례입니다. 이 모듈에서는 종속과 상속, 사용할 수 있는
 모든 선택자 유형, 단위와 크기, 배경과 테두리 스타일, 디버깅 등등 많은 것을 알아봅니다.

 여기의 목표는 여러분이 훌륭한 CSS를 작성할 수 있도록 도구를 제공하고,
 텍스트 스타일링나
 CSS 레이아웃처럼 더 상세한 주제로 들어가기 전에 알고 있어야 할 필수
 이론을 익히는 것입니다.

텍스트 스타일링

 CSS 언어 기초를 다뤘으니, 다음 주제는 대표적인 CSS의 영역인 텍스트 스타일링에 집중합니다. 여기서는 글꼴 설정, 굵기,
 기울임꼴, 행간과 자간, 그림자 등 다양한 텍스트 기능을 배웁니다. 그 후 사용자 지정 글꼴을 페이지에 적용하는 법,
 그리고 리스트와 링크 스타일로 모듈을 마무리합니다.

CSS 레이아웃

 여기까지 왔으면 이미 CSS 기초, 텍스트 스타일링, 그리고 콘텐츠가 들어갈 박스를 조작하고 스타일을 적용하는 법을
 다뤘으니, 이번엔 박스를 뷰포트나 다른 박스에 상대적인 위치에 원하는 대로 배치하는 법을 알아봅니다. 필요한 사전
 지식은 모두 학습했으니 서로 다른 `display` 설정과 플렉스박스, CSS 그리드처럼 최신 레이아웃 방식, 위치
 조정처럼 CSS 레이아웃을 더 자세히 살펴보겠습니다. 마지막으로, 오래됐지만 여전히 알고 있으면 도움이 될만한 레이아웃
 방법도 몇 가지 둘러봅니다.

일반적인 CSS 문제 해결하기

이 모듈은 웹 페이지를 만들 때의 일반적인 문제를 CSS를 사용해서 해결하는 법을 설명합니다.

참고서
---

* CSS 참고서: 숙련된 웹 개발자를 위해 CSS의 모든 속성과 개념을 설명합니다.
* CSS 핵심 개념
    + 언어 구문과 형태
    + 명시도, 상속,
     종속 (en-US)
    + CSS 단위와 값,
     CSS 함수 표기법 (en-US)
    + 박스 모델과
     여백 상쇄
    + 컨테이닝 블록
    + 쌓임 맥락과
     블록 서식 맥락 (en-US)
    + 초기 값, 계산 값,
     사용 값, 실제 값 (en-US)
    + CSS 단축 속성
    + CSS 플렉스박스 레이아웃
    + CSS 그리드 레이아웃
    + CSS 선택자
    + 미디어 쿼리
    + 애니메이션
쿡북
--

CSS 레이아웃 쿡북 (en-US)은 여러분의 웹 사이트에서도 사용할 일이 생길지 모르는,
 흔히 쓰이는 레이아웃 패턴을 모아놓은 문서입니다. 프로젝트에서 사용할 기초 코드에 더해, 레이아웃 명세를 사용하는 각기
 다른 방법과 개발자로서 결정할 수 있는 선택지도 제공합니다.

CSS 개발 도구
---------

* CSS가 유효한지 검사하는
 W3C CSS Validation 서비스. 매우 유용한 디버깅 도구입니다.
* Firefox 개발자 도구를 사용하면 검사기와
 스타일 편집기 (en-US)를 통해 페이지의 CSS를 살펴보고, 실시간으로 편집할 수
 있습니다.
* Firefox의 Web Developer 확장을 사용해서
 주시하는 사이트의 CSS를 추적하고 실시간으로 편집할 수 있습니다.
* 웹 커뮤니티에서는 다른 여러 가지 CSS 도구 (en-US)도 만들었습니다.
같이 보기
-----

* CSS 데모 (en-US): 최신 CSS 기술을 사용한 데모를 탐색하며
 영감을 얻어보세요.
* CSS를 많이 적용하는 웹 언어: HTML, SVG,
 XHTML, XML
* Stack Overflow의 CSS 질문 목록