diff --git a/files/ko/web/api/abortcontroller/index.md b/files/ko/web/api/abortcontroller/index.md
index 47bbf62c3d58d1..e3d65420526ef5 100644
--- a/files/ko/web/api/abortcontroller/index.md
+++ b/files/ko/web/api/abortcontroller/index.md
@@ -2,6 +2,7 @@
 title: AbortController
 slug: Web/API/AbortController
 ---
+
 {{APIRef("DOM")}}{{SeeCompatTable}}
 
 **`AbortController`** 인터페이스는 하나 이상의 웹 요청을 취소할 수 있게 해준다.
diff --git a/files/ko/web/api/abortcontroller/signal/index.md b/files/ko/web/api/abortcontroller/signal/index.md
index 040d686819762e..98a070ea57049b 100644
--- a/files/ko/web/api/abortcontroller/signal/index.md
+++ b/files/ko/web/api/abortcontroller/signal/index.md
@@ -2,6 +2,7 @@
 title: AbortController.signal
 slug: Web/API/AbortController/signal
 ---
+
 {{APIRef("DOM")}}{{SeeCompatTable}}
 
 {{domxref("AbortController")}} 인터페이스의 **`signal`** 읽기 전용 프로퍼티는 DOM 요청과 통신하거나 취소하는데 사용하는 {{domxref("AbortSignal")}} 객체 인터페이스를 반환한다.
diff --git a/files/ko/web/api/abortsignal/aborted/index.md b/files/ko/web/api/abortsignal/aborted/index.md
index 3611d16309aac9..9e142087ad55ee 100644
--- a/files/ko/web/api/abortsignal/aborted/index.md
+++ b/files/ko/web/api/abortsignal/aborted/index.md
@@ -2,6 +2,7 @@
 title: AbortSignal.aborted
 slug: Web/API/AbortSignal/aborted
 ---
+
 {{APIRef("DOM")}}{{SeeCompatTable}}
 
 **`aborted`** 읽기 전용 프로퍼티는 신호가 통신하는 DOM 요청이 취소되었는지(`true`) 그렇지 않은지(`false`)를 나타내는 {{domxref("Boolean")}}을 반환한다.
@@ -26,7 +27,9 @@ var signal = controller.signal;
 
 // ...
 
-signal.aborted ? console.log('Request has been aborted') : console.log('Request not aborted');
+signal.aborted
+  ? console.log("Request has been aborted")
+  : console.log("Request not aborted");
 ```
 
 ## 명세
diff --git a/files/ko/web/api/abstractrange/collapsed/index.md b/files/ko/web/api/abstractrange/collapsed/index.md
index da06857832c257..1432fe65a34b9b 100644
--- a/files/ko/web/api/abstractrange/collapsed/index.md
+++ b/files/ko/web/api/abstractrange/collapsed/index.md
@@ -10,7 +10,7 @@ slug: Web/API/AbstractRange/collapsed
 ## 문법
 
 ```js
-    var isCollpased = range.collapsed
+var isCollpased = range.collapsed;
 ```
 
 ### Value
diff --git a/files/ko/web/api/abstractrange/index.md b/files/ko/web/api/abstractrange/index.md
index 5f4ec17fbe0f02..ed9e1595e3c95b 100644
--- a/files/ko/web/api/abstractrange/index.md
+++ b/files/ko/web/api/abstractrange/index.md
@@ -49,7 +49,7 @@ let endElem = startElem.querySelector("span");
 let range = document.createRange();
 
 range.setStart(startElem, 0);
-range.setEnd(endElem, endElem.childNodes[0].length/2);
+range.setEnd(endElem, endElem.childNodes[0].length / 2);
 let contents = range.cloneContents();
 
 document.body.appendChild(contents);
@@ -72,13 +72,15 @@ To illustrate this, consider the HTML below:
 ```html
 <div class="container">
   <div class="header">
-    <img src="" class="sitelogo">
+    <img src="" class="sitelogo" />
     <h1>The Ultimate Website</h1>
   </div>
   <article>
     <section class="entry" id="entry1">
       <h2>Section 1: An interesting thing...</h2>
-      <p>A <em>very</em> interesting thing happened on the way to the forum...</p>
+      <p>
+        A <em>very</em> interesting thing happened on the way to the forum...
+      </p>
       <aside class="callout">
         <h2>Aside</h2>
         <p>An interesting aside to share with you...</p>
@@ -149,7 +151,7 @@ let paraTextNode = paraNode.childNodes[1];
 
 let range = document.createRange();
 range.setStart(paraTextNode, 6);
-range.setEnd(paraTextNode, paraTextNode.length-1);
+range.setEnd(paraTextNode, paraTextNode.length - 1);
 
 let fragment = range.cloneContents();
 document.body.appendChild(fragment);
diff --git a/files/ko/web/api/analysernode/fftsize/index.md b/files/ko/web/api/analysernode/fftsize/index.md
index bd6f2d01b0c1b1..bf1e17dfe365ba 100644
--- a/files/ko/web/api/analysernode/fftsize/index.md
+++ b/files/ko/web/api/analysernode/fftsize/index.md
@@ -2,6 +2,7 @@
 title: AnalyserNode.fftSize
 slug: Web/API/AnalyserNode/fftSize
 ---
+
 {{APIRef("Web Audio API")}}
 
 {{domxref("AnalyserNode")}} 인터페이스의 **`fftSize`** 속성은 unsigned long 값이고 주파수 영역 데이터를 얻기 위해 [고속 푸리에 변환](https://en.wikipedia.org/wiki/Fast_Fourier_transform)(FFT)을 수행할 때 사용될 샘플에서의 window 사이즈를 나타냅니다.
diff --git a/files/ko/web/api/analysernode/getfloatfrequencydata/index.md b/files/ko/web/api/analysernode/getfloatfrequencydata/index.md
index 3d9c9a5b59e203..e17832567144ff 100644
--- a/files/ko/web/api/analysernode/getfloatfrequencydata/index.md
+++ b/files/ko/web/api/analysernode/getfloatfrequencydata/index.md
@@ -47,7 +47,7 @@ analyser.getFloatFrequencyData(myDataArray);
 보다 완전한 응용 예제/정보를 보려면 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) 데모를 확인하세요. ([app.js의 108-193번째 줄](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)에서 관련 코드 확인)
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <body>
   <script>
     const audioCtx = new AudioContext();
@@ -103,7 +103,7 @@ analyser.getFloatFrequencyData(myDataArray);
           posX,
           canvas.height - barHeight / 2,
           barWidth,
-          barHeight / 2
+          barHeight / 2,
         );
         posX += barWidth + 1;
       }
diff --git a/files/ko/web/api/analysernode/getfloattimedomaindata/index.md b/files/ko/web/api/analysernode/getfloattimedomaindata/index.md
index 0a8efd180646ce..23fb57932fe8ee 100644
--- a/files/ko/web/api/analysernode/getfloattimedomaindata/index.md
+++ b/files/ko/web/api/analysernode/getfloattimedomaindata/index.md
@@ -2,6 +2,7 @@
 title: AnalyserNode.getFloatTimeDomainData()
 slug: Web/API/AnalyserNode/getFloatTimeDomainData
 ---
+
 {{ APIRef("Web Audio API") }}
 
 {{ domxref("AnalyserNode") }} 인터페이스의 **`getFloatTimeDomainData()`** 메서드는 전달된 {{domxref("Float32Array")}} 배열 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.
diff --git a/files/ko/web/api/analysernode/index.md b/files/ko/web/api/analysernode/index.md
index 0b5363b2c9118e..9224493682865e 100644
--- a/files/ko/web/api/analysernode/index.md
+++ b/files/ko/web/api/analysernode/index.md
@@ -66,7 +66,7 @@ _부모인 {{domxref("AudioNode")}}로부터 메서드를 상속받습니다_.
 다음의 예제는 `AnalyserNode`를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역의 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) 데모를 확인하세요 (관련된 코드를 보려면 [app.js 라인 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)를 참고하세요).
 
 ```js
-var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 
 // ...
 
@@ -87,7 +87,6 @@ var canvasCtx = canvas.getContext("2d");
 // 현재 오디오 소스의 오실로스코프를 그립니다
 
 function draw() {
-
   requestAnimationFrame(draw);
 
   analyser.getByteTimeDomainData(dataArray);
@@ -100,13 +99,12 @@ function draw() {
 
   canvasCtx.beginPath();
 
-  var sliceWidth = canvas.width * 1.0 / bufferLength;
+  var sliceWidth = (canvas.width * 1.0) / bufferLength;
   var x = 0;
 
   for (var i = 0; i < bufferLength; i++) {
-
     var v = dataArray[i] / 128.0;
-    var y = v * canvas.height / 2;
+    var y = (v * canvas.height) / 2;
 
     if (i === 0) {
       canvasCtx.moveTo(x, y);
diff --git a/files/ko/web/api/analysernode/maxdecibels/index.md b/files/ko/web/api/analysernode/maxdecibels/index.md
index 698e1e128003b9..d83b33f640d3bd 100644
--- a/files/ko/web/api/analysernode/maxdecibels/index.md
+++ b/files/ko/web/api/analysernode/maxdecibels/index.md
@@ -2,6 +2,7 @@
 title: AnalyserNode.maxDecibels
 slug: Web/API/AnalyserNode/maxDecibels
 ---
+
 {{APIRef("Web Audio API")}}
 
 {{domxref("AnalyserNode")}} 인터페이스의 **`maxDecibels`** 속성은 unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최대 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 `getByteFrequencyData()`를 사용할 때 결과의 범위에 대한 최대 값을 명시합니다.
diff --git a/files/ko/web/api/angle_instanced_arrays/index.md b/files/ko/web/api/angle_instanced_arrays/index.md
index fe6582ff6eaf10..d759b62222ed3b 100644
--- a/files/ko/web/api/angle_instanced_arrays/index.md
+++ b/files/ko/web/api/angle_instanced_arrays/index.md
@@ -2,6 +2,7 @@
 title: ANGLE_instanced_arrays
 slug: Web/API/ANGLE_instanced_arrays
 ---
+
 {{APIRef ( "WebGL")}}
 
 이 **`ANGLE_instanced_arrays`**확장은 [WebGL API의](/ko/docs/Web/API/WebGL_API) 일부이며 동일한 객체 또는 동일한 객체 그룹을 같은 정점 데이터, 기본 개수 및 유형을 공유하는 경우 여러 번 그릴 수 있습니다.
@@ -33,7 +34,7 @@ WebGL 확장은 {{domxref ( "WebGLRenderingContext.getExtension()")}} 메서드
 확장 기능 사용 :
 
 ```js
-var ext = gl.getExtension ( 'ANGLE_instanced_arrays');
+var ext = gl.getExtension("ANGLE_instanced_arrays");
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/animationtimeline/currenttime/index.md b/files/ko/web/api/animationtimeline/currenttime/index.md
index 5da3d57ec4aa8f..a215144a85141d 100644
--- a/files/ko/web/api/animationtimeline/currenttime/index.md
+++ b/files/ko/web/api/animationtimeline/currenttime/index.md
@@ -8,7 +8,7 @@ slug: Web/API/AnimationTimeline/currentTime
 Web Animations API의 AnimationTimeline 인터페이스의 currentTime 읽기 전용 속성은 타임 라인의 현재 시간을 밀리 초 단위로 반환하거나 타임 라인이 비활성 상태이면 null을 반환합니다.출력 값이 생성되는 시간 세그먼트를 정의합니다. 이러한 값은 대상 속성에 애니메이션 효과를 적용하는 데 사용됩니다.
 
 ```js
-    var currentTime = AnimationTimeline.currentTime;
+var currentTime = AnimationTimeline.currentTime;
 ```
 
 ### Value
diff --git a/files/ko/web/api/atob/index.md b/files/ko/web/api/atob/index.md
index 0c8ac30e683f53..d76442429ca8f2 100644
--- a/files/ko/web/api/atob/index.md
+++ b/files/ko/web/api/atob/index.md
@@ -12,7 +12,7 @@ slug: Web/API/atob
 ## 구문
 
 ```js
-atob(encodedData)
+atob(encodedData);
 ```
 
 ### 매개변수
@@ -32,7 +32,7 @@ atob(encodedData)
 ## 예제
 
 ```js
-const encodedData = btoa('Hello, world'); // 문자열 인코딩
+const encodedData = btoa("Hello, world"); // 문자열 인코딩
 const decodedData = atob(encodedData); // 문자열 디코딩
 ```
 
diff --git a/files/ko/web/api/attr/index.md b/files/ko/web/api/attr/index.md
index b93fb88ee545af..d9fc1fab7b1806 100644
--- a/files/ko/web/api/attr/index.md
+++ b/files/ko/web/api/attr/index.md
@@ -13,11 +13,11 @@ slug: Web/API/Attr
 
 이름은 네임스페이스 접두사를 무시하면 로컬로, 네임스페이스 내의 속성을 포함하면(콜론(`:`)으로 로컬 이름과 구분된 경우도) 한정(_qualified_)된 것으로 간주됩니다. 네임스페이스 외부의 속성, 접두사가 정의되지 않은 네임스페이스 내부의 속성, 접두사가 있는 네임스페이스 내부의 속성과 같은 다음 세 가지 경우로 나눌 수 있습니다.
 
-|    속성    | 네임스페이스 이름   | 네임스페이스 접두사   | 속성 로컬 이름          | 한정된 속성 이름             |
-| --------- | -------------- | ---------------- | -------------------- | ------------------------ |
-| `myAttr`  | _none_         | _none_           | `myAttr`             | `myAttr`                 |
-| `myAttr`  | `mynamespace`  | _none_           | `myAttr`             | `myAttr`                 |
-| `myAttr`  | `mynamespace`  | `myns`           | `myAttr`             | `myns:myAttr`            |
+| 속성     | 네임스페이스 이름 | 네임스페이스 접두사 | 속성 로컬 이름 | 한정된 속성 이름 |
+| -------- | ----------------- | ------------------- | -------------- | ---------------- |
+| `myAttr` | _none_            | _none_              | `myAttr`       | `myAttr`         |
+| `myAttr` | `mynamespace`     | _none_              | `myAttr`       | `myAttr`         |
+| `myAttr` | `mynamespace`     | `myns`              | `myAttr`       | `myns:myAttr`    |
 
 > **참고:** 이 인터페이스는 SVG, HTML 그리고 MathML 요소의 트리 표현에 존재하는 속성만 나타냅니다.
 >
diff --git a/files/ko/web/api/audiobuffer/index.md b/files/ko/web/api/audiobuffer/index.md
index f3eca84b0c36b9..621af43fc9a825 100644
--- a/files/ko/web/api/audiobuffer/index.md
+++ b/files/ko/web/api/audiobuffer/index.md
@@ -42,7 +42,11 @@ slug: Web/API/AudioBuffer
 var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 
 // AudioContext의 샘플 레이트를 가지는 빈 3초짜리 스테레오 버퍼를 생성합니다.
-var myArrayBuffer = audioCtx.createBuffer(2, audioCtx.sampleRate * 3, audioCtx.sampleRate);
+var myArrayBuffer = audioCtx.createBuffer(
+  2,
+  audioCtx.sampleRate * 3,
+  audioCtx.sampleRate,
+);
 
 // 버퍼를 백색소음으로 채웁니다
 // 단순히 -1.0과 1.0사이의 무작위 값
diff --git a/files/ko/web/api/audiobuffersourcenode/index.md b/files/ko/web/api/audiobuffersourcenode/index.md
index 0ffd64db213bfe..e7febd9e1169fb 100644
--- a/files/ko/web/api/audiobuffersourcenode/index.md
+++ b/files/ko/web/api/audiobuffersourcenode/index.md
@@ -2,6 +2,7 @@
 title: AudioBufferSourceNode
 slug: Web/API/AudioBufferSourceNode
 ---
+
 {{APIRef("Web Audio API")}}
 
 **`AudioBufferSourceNode`** 의 오디오 소스는 in-memory 의 {{domxref("AudioNode")}} 상에 저장된 데이터로 구성되어있다. 이는 오디오 소스 그 자체처럼 동작을 한다.
@@ -12,9 +13,9 @@ slug: Web/API/AudioBufferSourceNode
 
 ![The AudioBufferSourceNode takes the content of an AudioBuffer and m](webaudioaudiobuffersourcenode.png)
 
-| Number of inputs  | `0`                                                            |
-| ----------------- | -------------------------------------------------------------- |
-| Number of outputs | `1`                                                            |
+| Number of inputs  | `0`                                                  |
+| ----------------- | ---------------------------------------------------- |
+| Number of outputs | `1`                                                  |
 | Channel count     | defined by the associated {{domxref("AudioBuffer")}} |
 
 ## Properties
@@ -54,9 +55,9 @@ _{{domxref("AudioNode")}}_ 를 부모로 가지는 매서드.
 
 ```js
 var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-var button = document.querySelector('button');
-var pre = document.querySelector('pre');
-var myScript = document.querySelector('script');
+var button = document.querySelector("button");
+var pre = document.querySelector("pre");
+var myScript = document.querySelector("script");
 
 pre.innerHTML = myScript.innerHTML;
 
@@ -68,17 +69,17 @@ var frameCount = audioCtx.sampleRate * 2.0;
 
 var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
 
-button.onclick = function() {
+button.onclick = function () {
   // Fill the buffer with white noise;
   //just random values between -1.0 and 1.0
   for (var channel = 0; channel < channels; channel++) {
-   // This gives us the actual ArrayBuffer that contains the data
-   var nowBuffering = myArrayBuffer.getChannelData(channel);
-   for (var i = 0; i < frameCount; i++) {
-     // Math.random() is in [0; 1.0]
-     // audio needs to be in [-1.0; 1.0]
-     nowBuffering[i] = Math.random() * 2 - 1;
-   }
+    // This gives us the actual ArrayBuffer that contains the data
+    var nowBuffering = myArrayBuffer.getChannelData(channel);
+    for (var i = 0; i < frameCount; i++) {
+      // Math.random() is in [0; 1.0]
+      // audio needs to be in [-1.0; 1.0]
+      nowBuffering[i] = Math.random() * 2 - 1;
+    }
   }
 
   // Get an AudioBufferSourceNode.
@@ -91,7 +92,7 @@ button.onclick = function() {
   source.connect(audioCtx.destination);
   // start the source playing
   source.start();
-}
+};
 ```
 
 > **참고:** For a `decodeAudioData` example, see the {{domxref("AudioContext.decodeAudioData")}} page.
diff --git a/files/ko/web/api/audiocontext/index.md b/files/ko/web/api/audiocontext/index.md
index 641ba9d9a6d2b4..4f8c9c04e8f691 100644
--- a/files/ko/web/api/audiocontext/index.md
+++ b/files/ko/web/api/audiocontext/index.md
@@ -2,6 +2,7 @@
 title: AudioContext
 slug: Web/API/AudioContext
 ---
+
 {{APIRef("Web Audio API")}}
 
 `AudioContext` 인터페이스는 {{domxref("AudioNode")}}에 의해 각각 표현되는, 함께 연결된 오디오 모듈로부터 만들어진 오디오 프로세싱 그래프를 표현합니다. 오디오 컨텍스트는 이것이 포함하는 노드의 생성과 오디오 프로세싱 혹은 디코딩의 실행 둘 다를 제어합니다. 여러분은 다른 무언가를 하기 전에 `AudioContext`를 생성할 필요가 있습니다. 왜냐하면 모든 것은 컨텍스트 내에서 발생하기 때문입니다. 매번 새로운 컨텍스트를 초기화하는 대신 하나의 AudioContext를 생성하고 재사용하는 것이 추천되며, 몇 개의 다른 오디오 소스에 대해 하나의 `AudioContext`를 사용하고 동시에 연결하는 것은 문제없습니다.
diff --git a/files/ko/web/api/audiodestinationnode/index.md b/files/ko/web/api/audiodestinationnode/index.md
index f489145b8415f0..847635146d3765 100644
--- a/files/ko/web/api/audiodestinationnode/index.md
+++ b/files/ko/web/api/audiodestinationnode/index.md
@@ -2,6 +2,7 @@
 title: AudioDestinationNode
 slug: Web/API/AudioDestinationNode
 ---
+
 {{APIRef()}}
 
 `AudioDestinationNode` 은 주어진 컨택스트의 음원의 종착점을 나타냅니다. 보통 스피커를 가리킵니다. 이는 또한 `OfflineAudioContext` 를 사용해 데이터가 녹음되는 노드가 되기도 합니다.
diff --git a/files/ko/web/api/audionode/channelcount/index.md b/files/ko/web/api/audionode/channelcount/index.md
index 9a90204dde3fd1..d2cdc08467ee27 100644
--- a/files/ko/web/api/audionode/channelcount/index.md
+++ b/files/ko/web/api/audionode/channelcount/index.md
@@ -2,6 +2,7 @@
 title: AudioNode.channelCount
 slug: Web/API/AudioNode/channelCount
 ---
+
 {{ APIRef("Web Audio API") }}
 
 {{ domxref("AudioNode") }} 인터페이스의 **`channelCount`** 속성은 노드의 모든 입력에 대해 연결을 [업믹싱하거나 다운믹싱](/ko/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#up-mixing_and_down-mixing)할 때 얼마나 많은 채널이 사용될 지를 결정하기 위해 사용되는 integer를 나타냅니다.
diff --git a/files/ko/web/api/audionode/channelcountmode/index.md b/files/ko/web/api/audionode/channelcountmode/index.md
index 17e57924d5b5fa..f1de97c4b3bc1d 100644
--- a/files/ko/web/api/audionode/channelcountmode/index.md
+++ b/files/ko/web/api/audionode/channelcountmode/index.md
@@ -63,7 +63,7 @@ slug: Web/API/AudioNode/channelCountMode
 
 ```js
 var oscillator = audioCtx.createOscillator();
-oscillator.channelCountMode = 'explicit';
+oscillator.channelCountMode = "explicit";
 ```
 
 ### 값
@@ -83,7 +83,7 @@ var gainNode = audioCtx.createGain();
 oscillator.connect(gainNode);
 gainNode.connect(audioCtx.destination);
 
-oscillator.channelCountMode = 'explicit';
+oscillator.channelCountMode = "explicit";
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/audionode/channelinterpretation/index.md b/files/ko/web/api/audionode/channelinterpretation/index.md
index 8c1f2739f946d1..4f127e20b26bec 100644
--- a/files/ko/web/api/audionode/channelinterpretation/index.md
+++ b/files/ko/web/api/audionode/channelinterpretation/index.md
@@ -2,6 +2,7 @@
 title: AudioNode.channelInterpretation
 slug: Web/API/AudioNode/channelInterpretation
 ---
+
 {{ APIRef("Web Audio API") }}
 
 {{domxref("AudioNode")}} 인터페이스의 **`channelInterpretation`** 프로퍼티는 입력/출력 채널의 수가 다를 때 입력 채널이 출력 채널에 매핑되는 방법을 기술하는 열거형 값을 나타냅니다. 예를 들어, 이 설정은 모노 입력이 어떻게 스테레오 또는 5.1 채널 출력으로 업믹스될 것인지를 정의하거나, 어떻게 쿼드 채널 입력이 스테레오 또는 모노 출력으로 다운믹스될 것인지를 정의합니다.
@@ -12,7 +13,7 @@ slug: Web/API/AudioNode/channelInterpretation
 
 ```js
 var oscillator = audioCtx.createOscillator();
-oscillator.channelInterpretation = 'discrete';
+oscillator.channelInterpretation = "discrete";
 ```
 
 ### 값
@@ -39,7 +40,7 @@ var gainNode = audioCtx.createGain();
 oscillator.connect(gainNode);
 gainNode.connect(audioCtx.destination);
 
-oscillator.channelInterpretation = 'discrete';
+oscillator.channelInterpretation = "discrete";
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/audionode/connect/index.md b/files/ko/web/api/audionode/connect/index.md
index 197a4b57bd798c..e02b1da8f59978 100644
--- a/files/ko/web/api/audionode/connect/index.md
+++ b/files/ko/web/api/audionode/connect/index.md
@@ -2,6 +2,7 @@
 title: AudioNode.connect()
 slug: Web/API/AudioNode/connect
 ---
+
 {{ APIRef("Web Audio API") }}
 
 {{ domxref("AudioNode") }} 인터페이스의 `connect()` 메서드는 노드의 출력 중 하나를 목표에 연결할 수 있게 하는데, 이 목표는 다른 `AudioNode` 일 수도 있고 (이렇게 함으로써 사운드 데이터를 명시된 노드로 향하게 합니다) {{domxref("AudioParam")}} 일 수도 있습니다 (이 경우 노드의 출력 데이터가 자동적으로 시간에 따라 그 파라미터의 값을 변화시키기 위해 사용됩니다).
diff --git a/files/ko/web/api/audionode/disconnect/index.md b/files/ko/web/api/audionode/disconnect/index.md
index 9d32cff889e926..4c3f4f009d9cba 100644
--- a/files/ko/web/api/audionode/disconnect/index.md
+++ b/files/ko/web/api/audionode/disconnect/index.md
@@ -2,6 +2,7 @@
 title: AudioNode.disconnect()
 slug: Web/API/AudioNode/disconnect
 ---
+
 {{ APIRef("Web Audio API") }}
 
 {{ domxref("AudioNode") }} 인터페이스의 **`disconnect()`** 메서드는 하나 이상의 노드를 메서드가 호출된 노드로부터 연결 해제할 수 있게 합니다.
diff --git a/files/ko/web/api/audionode/index.md b/files/ko/web/api/audionode/index.md
index 817fde01e32d10..29b19fa7a8ca92 100644
--- a/files/ko/web/api/audionode/index.md
+++ b/files/ko/web/api/audionode/index.md
@@ -2,6 +2,7 @@
 title: AudioNode
 slug: Web/API/AudioNode
 ---
+
 {{APIRef("Web Audio API")}}
 
 **`AudioNode`** 인터페이스는 오디오 프로세싱 모듈을 나타내기 위한 포괄적인 인터페이스입니다.
diff --git a/files/ko/web/api/audionode/numberofinputs/index.md b/files/ko/web/api/audionode/numberofinputs/index.md
index 32a98d6959d274..c1f499e3822f5d 100644
--- a/files/ko/web/api/audionode/numberofinputs/index.md
+++ b/files/ko/web/api/audionode/numberofinputs/index.md
@@ -2,6 +2,7 @@
 title: AudioNode.numberOfInputs
 slug: Web/API/AudioNode/numberOfInputs
 ---
+
 {{APIRef("Web Audio API")}}
 
 {{domxref("AudioNode")}} 인터페이스의 `numberOfInputs` 속성은 해당 노드에 공급되는 입력의 수를 반환합니다. 소스 노드는 `numberOfInputs` 속성의 값이 0인 노드로 정의됩니다.
diff --git a/files/ko/web/api/audionode/numberofoutputs/index.md b/files/ko/web/api/audionode/numberofoutputs/index.md
index b211663190b48a..334d4b2065ee3c 100644
--- a/files/ko/web/api/audionode/numberofoutputs/index.md
+++ b/files/ko/web/api/audionode/numberofoutputs/index.md
@@ -2,6 +2,7 @@
 title: AudioNode.numberOfOutputs
 slug: Web/API/AudioNode/numberOfOutputs
 ---
+
 {{APIRef("Web Audio API")}}
 
 {{ domxref("AudioNode") }} 인터페이스의 `numberOfOutputs` 속성은 노드에서 나오는 출력의 수를 반환합니다. 목적지 노드 (예: {{domxref("AudioDestinationNode") }}) 는 이 특성에 대해 0의 값을 가집니다.
diff --git a/files/ko/web/api/audioparam/cancelandholdattime/index.md b/files/ko/web/api/audioparam/cancelandholdattime/index.md
index d67a2d59830689..56c4a8e08e7978 100644
--- a/files/ko/web/api/audioparam/cancelandholdattime/index.md
+++ b/files/ko/web/api/audioparam/cancelandholdattime/index.md
@@ -10,7 +10,7 @@ slug: Web/API/AudioParam/cancelAndHoldAtTime
 ## 구문
 
 ```js
-var audioParam = AudioParam.cancelAndHoldAtTime(cancelTime)
+var audioParam = AudioParam.cancelAndHoldAtTime(cancelTime);
 ```
 
 ### 매개변수
diff --git a/files/ko/web/api/audioparam/cancelscheduledvalues/index.md b/files/ko/web/api/audioparam/cancelscheduledvalues/index.md
index d6365f5ee91e72..e3818c4ad50a5d 100644
--- a/files/ko/web/api/audioparam/cancelscheduledvalues/index.md
+++ b/files/ko/web/api/audioparam/cancelscheduledvalues/index.md
@@ -10,7 +10,7 @@ slug: Web/API/AudioParam/cancelScheduledValues
 ## 구문
 
 ```js
-var AudioParam = AudioParam.cancelScheduledValues(startTime)
+var AudioParam = AudioParam.cancelScheduledValues(startTime);
 ```
 
 ### 매개변수
diff --git a/files/ko/web/api/audioparam/exponentialramptovalueattime/index.md b/files/ko/web/api/audioparam/exponentialramptovalueattime/index.md
index 848493483d94c0..fa366068afa28d 100644
--- a/files/ko/web/api/audioparam/exponentialramptovalueattime/index.md
+++ b/files/ko/web/api/audioparam/exponentialramptovalueattime/index.md
@@ -14,7 +14,7 @@ slug: Web/API/AudioParam/exponentialRampToValueAtTime
 ## 구문
 
 ```js
-var AudioParam = AudioParam.exponentialRampToValueAtTime(value, endTime)
+var AudioParam = AudioParam.exponentialRampToValueAtTime(value, endTime);
 ```
 
 ### 매개변수
@@ -39,14 +39,14 @@ var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 // 예제를 위한 기본 변수를 설정합니다
-var myAudio = document.querySelector('audio');
-var pre = document.querySelector('pre');
-var myScript = document.querySelector('script');
+var myAudio = document.querySelector("audio");
+var pre = document.querySelector("pre");
+var myScript = document.querySelector("script");
 
 pre.innerHTML = myScript.innerHTML;
 
-var expRampPlus = document.querySelector('.exp-ramp-plus');
-var expRampMinus = document.querySelector('.exp-ramp-minus');
+var expRampPlus = document.querySelector(".exp-ramp-plus");
+var expRampMinus = document.querySelector(".exp-ramp-minus");
 
 // MediaElementAudioSourceNode를 생성합니다
 // HTMLMediaElement를 노드 내로 전달합니다
@@ -62,13 +62,13 @@ source.connect(gainNode);
 gainNode.connect(audioCtx.destination);
 
 // onclick이 발생했을 때 무언가를 하기 위해 버튼을 설정합니다
-expRampPlus.onclick = function() {
+expRampPlus.onclick = function () {
   gainNode.gain.exponentialRampToValueAtTime(1.0, audioCtx.currentTime + 2);
-}
+};
 
-expRampMinus.onclick = function() {
+expRampMinus.onclick = function () {
   gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 2);
-}
+};
 ```
 
 > **참고:** 마지막 함수에서 변화시킬 값으로 0이 아니라 0.01의 값이 사용되었는데,
diff --git a/files/ko/web/api/audioparam/index.md b/files/ko/web/api/audioparam/index.md
index bee96f05a31360..64f53bf132bf94 100644
--- a/files/ko/web/api/audioparam/index.md
+++ b/files/ko/web/api/audioparam/index.md
@@ -2,6 +2,7 @@
 title: AudioParam
 slug: Web/API/AudioParam
 ---
+
 {{APIRef("Web Audio API")}}
 
 Web Audio API의 `AudioParam` 인터페이스는 오디오에 관련된 파라미터를 나타내는데, 보통 ({{ domxref("GainNode.gain") }}과 같은) {{domxref("AudioNode")}}의 파라미터입니다.
diff --git a/files/ko/web/api/audioparam/linearramptovalueattime/index.md b/files/ko/web/api/audioparam/linearramptovalueattime/index.md
index 4cb8ff7c7d9380..9d6fe163d33cc2 100644
--- a/files/ko/web/api/audioparam/linearramptovalueattime/index.md
+++ b/files/ko/web/api/audioparam/linearramptovalueattime/index.md
@@ -10,7 +10,7 @@ slug: Web/API/AudioParam/linearRampToValueAtTime
 ## 구문
 
 ```js
-var AudioParam = AudioParam.linearRampToValueAtTime(value, endTime)
+var AudioParam = AudioParam.linearRampToValueAtTime(value, endTime);
 ```
 
 ### 매개변수
@@ -36,14 +36,14 @@ var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 // 예제를 위한 기본 변수를 설정합니다
-var myAudio = document.querySelector('audio');
-var pre = document.querySelector('pre');
-var myScript = document.querySelector('script');
+var myAudio = document.querySelector("audio");
+var pre = document.querySelector("pre");
+var myScript = document.querySelector("script");
 
 pre.innerHTML = myScript.innerHTML;
 
-var linearRampPlus = document.querySelector('.linear-ramp-plus');
-var linearRampMinus = document.querySelector('.linear-ramp-minus');
+var linearRampPlus = document.querySelector(".linear-ramp-plus");
+var linearRampMinus = document.querySelector(".linear-ramp-minus");
 
 // MediaElementAudioSourceNode를 생성합니다
 // HTMLMediaElement를 노드 내로 전달합니다
@@ -59,13 +59,13 @@ source.connect(gainNode);
 gainNode.connect(audioCtx.destination);
 
 // onclick이 발생했을 때 무언가를 하기 위해 버튼을 설정합니다
-linearRampPlus.onclick = function() {
+linearRampPlus.onclick = function () {
   gainNode.gain.linearRampToValueAtTime(1.0, audioCtx.currentTime + 2);
-}
+};
 
-linearRampMinus.onclick = function() {
+linearRampMinus.onclick = function () {
   gainNode.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 2);
-}
+};
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/audioparam/settargetattime/index.md b/files/ko/web/api/audioparam/settargetattime/index.md
index 1210ca317de5e3..7149647e0f2913 100644
--- a/files/ko/web/api/audioparam/settargetattime/index.md
+++ b/files/ko/web/api/audioparam/settargetattime/index.md
@@ -28,25 +28,7 @@ var paramRef = param.setTargetAtTime(target, startTime, timeConstant);
 
 ## 설명
 
-변화는 `startTime` 에 명시된 시간에 시작해 `target` 매개변수에 의해 주어진 값을 향해 지수적으로 움직입니다. `timeConstant` 매개변수에 의해 정의된 감소율은 지수적입니다. 그러므로 값은 절대 `target` 에 완벽히 도달하지 못할 것이지만, `timeConstant` 길이의 각 시간 단계 이후에, 값은 또 다른 <math>
-  <semantics>
-    <mrow>
-      <mn>1</mn>
-      <mo>-</mo>
-      <msup>
-        <mi>e</mi>
-        <mrow>
-          <mo>-</mo>
-          <mn>1</mn>
-        </mrow>
-      </msup>
-      <mo>≈</mo>
-      <mn>63.2</mn>
-      <mtext>%</mtext>
-    </mrow>
-    <annotation encoding="TeX">1 - e^{-1} \대략 63.2%</annotation>
-  </semantics>
-</math> 에 의해 `target` 에 다가가게 될 것입니다. (일차 선형 연속 시불변 시스템을 사용하는) 완전한 공식은 [Web
+변화는 `startTime` 에 명시된 시간에 시작해 `target` 매개변수에 의해 주어진 값을 향해 지수적으로 움직입니다. `timeConstant` 매개변수에 의해 정의된 감소율은 지수적입니다. 그러므로 값은 절대 `target` 에 완벽히 도달하지 못할 것이지만, `timeConstant` 길이의 각 시간 단계 이후에, 값은 또 다른 <math><semantics><mrow><mn>1</mn><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mn>1</mn></mrow></msup><mo>≈</mo><mn>63.2</mn><mtext>%</mtext></mrow><annotation encoding="TeX">1 - e^{-1} \대략 63.2%</annotation></semantics></math> 에 의해 `target` 에 다가가게 될 것입니다. (일차 선형 연속 시불변 시스템을 사용하는) 완전한 공식은 [Web
 Audio 명세서](https://webaudio.github.io/web-audio-api/#dom-audioparam-settargetattime)에서 확인할 수 있습니다.
 
 만약 특정한 시간까지 target 값에 절대적으로 도달할 필요가 있다면, {{domxref("AudioParam.exponentialRampToValueAtTime()")}}를 사용할 수 있습니다. 그러나, 수학적인 이유로, 이 메서드는 현재 값이나 target 값이 `0` 이면 작동하지 않습니다.
@@ -59,16 +41,16 @@ Audio 명세서](https://webaudio.github.io/web-audio-api/#dom-audioparam-settar
 
 시간이 진행함에 따라 어떻게 값이 0%에서 100%로 변화하는지에 대해서는 아래의 표를 참고해 보세요.
 
-| `startTime` 이후로의 시간 | 값                             |
-| ---------------------- | --------------------------------- |
-| `0 * timeConstant`     | 0%                                |
-| `0.5 * timeConstant`   | 39.3%                             |
-| `1 * timeConstant`     | 63.2%                             |
-| `2 * timeConstant`     | 86.5%                             |
-| `3 * timeConstant`     | 95.0%                             |
-| `4 * timeConstant`     | 98.2%                             |
-| `5 * timeConstant`     | 99.3%                             |
-| `n * timeConstant`     | <math><semantics><mrow><mn>1</mn> |
+| `startTime` 이후로의 시간 | 값                                |
+| ------------------------- | --------------------------------- |
+| `0 * timeConstant`        | 0%                                |
+| `0.5 * timeConstant`      | 39.3%                             |
+| `1 * timeConstant`        | 63.2%                             |
+| `2 * timeConstant`        | 86.5%                             |
+| `3 * timeConstant`        | 95.0%                             |
+| `4 * timeConstant`        | 98.2%                             |
+| `5 * timeConstant`        | 99.3%                             |
+| `n * timeConstant`        | <math><semantics><mrow><mn>1</mn> |
 
 <math>
   <semantics>
@@ -98,14 +80,14 @@ var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 // 예제를 위한 기본 변수를 설정합니다
-var myAudio = document.querySelector('audio');
-var pre = document.querySelector('pre');
-var myScript = document.querySelector('script');
+var myAudio = document.querySelector("audio");
+var pre = document.querySelector("pre");
+var myScript = document.querySelector("script");
 
 pre.innerHTML = myScript.innerHTML;
 
-var atTimePlus = document.querySelector('.at-time-plus');
-var atTimeMinus = document.querySelector('.at-time-minus');
+var atTimePlus = document.querySelector(".at-time-plus");
+var atTimeMinus = document.querySelector(".at-time-minus");
 
 // MediaElementAudioSourceNode를 생성합니다
 // HTMLMediaElement를 노드 내로 전달합니다
@@ -122,15 +104,15 @@ source.connect(gainNode);
 gainNode.connect(audioCtx.destination);
 
 // onclick이 발생했을 때 무언가를 하기 위해 버튼을 설정합니다
-atTimePlus.onclick = function() {
+atTimePlus.onclick = function () {
   currGain = 1.0;
   gainNode.gain.setTargetAtTime(1.0, audioCtx.currentTime + 1, 0.5);
-}
+};
 
-atTimeMinus.onclick = function() {
+atTimeMinus.onclick = function () {
   currGain = 0;
   gainNode.gain.setTargetAtTime(0, audioCtx.currentTime + 1, 0.5);
-}
+};
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/audioparam/setvalueattime/index.md b/files/ko/web/api/audioparam/setvalueattime/index.md
index bf4ba4fe05718c..fedd69600fd70f 100644
--- a/files/ko/web/api/audioparam/setvalueattime/index.md
+++ b/files/ko/web/api/audioparam/setvalueattime/index.md
@@ -10,7 +10,7 @@ slug: Web/API/AudioParam/setValueAtTime
 ## 구문
 
 ```js
-var AudioParam = AudioParam.setValueAtTime(value, startTime)
+var AudioParam = AudioParam.setValueAtTime(value, startTime);
 ```
 
 ### 매개변수
@@ -35,14 +35,14 @@ var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 // 예제를 위한 기본 변수를 설정합니다
-var myAudio = document.querySelector('audio');
-var pre = document.querySelector('pre');
-var myScript = document.querySelector('script');
+var myAudio = document.querySelector("audio");
+var pre = document.querySelector("pre");
+var myScript = document.querySelector("script");
 
 pre.innerHTML = myScript.innerHTML;
 
-var targetAtTimePlus = document.querySelector('.set-target-at-time-plus');
-var targetAtTimeMinus = document.querySelector('.set-target-at-time-minus');
+var targetAtTimePlus = document.querySelector(".set-target-at-time-plus");
+var targetAtTimeMinus = document.querySelector(".set-target-at-time-minus");
 
 // MediaElementAudioSourceNode를 생성합니다
 // HTMLMediaElement를 노드 내로 전달합니다
@@ -59,15 +59,15 @@ source.connect(gainNode);
 gainNode.connect(audioCtx.destination);
 
 // onclick이 발생했을 때 무언가를 하기 위해 버튼을 설정합니다
-targetAtTimePlus.onclick = function() {
+targetAtTimePlus.onclick = function () {
   currGain += 0.25;
   gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
-}
+};
 
-targetAtTimeMinus.onclick = function() {
+targetAtTimeMinus.onclick = function () {
   currGain -= 0.25;
   gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
-}
+};
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/audioparam/setvaluecurveattime/index.md b/files/ko/web/api/audioparam/setvaluecurveattime/index.md
index 03153081ceb040..be6c62dd00fb39 100644
--- a/files/ko/web/api/audioparam/setvaluecurveattime/index.md
+++ b/files/ko/web/api/audioparam/setvaluecurveattime/index.md
@@ -2,6 +2,7 @@
 title: AudioParam.setValueCurveAtTime()
 slug: Web/API/AudioParam/setValueCurveAtTime
 ---
+
 {{APIRef("Web Audio API")}}
 
 {{domxref("AudioParam")}} 인터페이스의 **`setValueCurveAtTime()`** 메서드는 파라미터의 값이 값들의 리스트에 의해 정의되는 커브를 따라 변화하도록 예정합니다.
@@ -54,13 +55,13 @@ var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 // 예제를 위한 기본 변수를 설정합니다
-var myAudio = document.querySelector('audio');
-var pre = document.querySelector('pre');
-var myScript = document.querySelector('script');
+var myAudio = document.querySelector("audio");
+var pre = document.querySelector("pre");
+var myScript = document.querySelector("script");
 
 pre.innerHTML = myScript.innerHTML;
 
-var valueCurve = document.querySelector('.value-curve');
+var valueCurve = document.querySelector(".value-curve");
 
 // MediaElementAudioSourceNode를 생성합니다
 // HTMLMediaElement를 노드 내로 전달합니다
@@ -89,9 +90,9 @@ waveArray[6] = 0.5;
 waveArray[7] = 0;
 waveArray[8] = 0.5;
 
-valueCurve.onclick = function() {
+valueCurve.onclick = function () {
   gainNode.gain.setValueCurveAtTime(waveArray, audioCtx.currentTime, 2);
-}
+};
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/audioparammap/index.md b/files/ko/web/api/audioparammap/index.md
index 49545834acac03..af37d86cb8c638 100644
--- a/files/ko/web/api/audioparammap/index.md
+++ b/files/ko/web/api/audioparammap/index.md
@@ -2,6 +2,7 @@
 title: AudioParamMap
 slug: Web/API/AudioParamMap
 ---
+
 {{APIRef("Web Audio API")}}
 
 Web Audio API의 **`AudioParamMap`** 인터페이스는 다수의 오디오 파라미터의 집합을 나타내는데, 각 파라미터는 {{domxref("DOMString")}}의 매핑으로 기술되고, DOMString은 {{domxref("AudioParam")}} 객체에 대한 파라미터를 명시하며, AudioParam 객체는 자신의 값을 나타냅니다.
diff --git a/files/ko/web/api/audioworklet/index.md b/files/ko/web/api/audioworklet/index.md
index 80dc3f58171ec1..a8ab8f58d24cce 100644
--- a/files/ko/web/api/audioworklet/index.md
+++ b/files/ko/web/api/audioworklet/index.md
@@ -2,6 +2,7 @@
 title: AudioWorklet
 slug: Web/API/AudioWorklet
 ---
+
 {{APIRef("Web Audio API")}}{{securecontext_header}}
 
 [Web Audio API](/ko/docs/Web/API/Web_Audio_API)의 **`AudioWorklet`** 인터페이스는 아주 낮은 레이턴시의 오디오 프로세싱을 제공하기 위해 별도의 스레드에서 실행되는 사용자 정의 오디오 프로세싱 스크립트를 제공하려는 목적으로 사용됩니다.
diff --git a/files/ko/web/api/audioworkletglobalscope/index.md b/files/ko/web/api/audioworkletglobalscope/index.md
index 57f5ae3abddfff..b480bd0c0f5b72 100644
--- a/files/ko/web/api/audioworkletglobalscope/index.md
+++ b/files/ko/web/api/audioworkletglobalscope/index.md
@@ -34,40 +34,40 @@ slug: Web/API/AudioWorkletGlobalScope
 ```js
 // test-processor.js
 class TestProcessor extends AudioWorkletProcessor {
-  constructor () {
-    super()
+  constructor() {
+    super();
     // 초기화 순간의 현재 샘플 프레임과 시간
     // 값이 변하는 것을 보기 위해서, 여러분은 이 두 줄을 process 메서드에 넣을 수 있습니다
-    console.log(currentFrame)
-    console.log(currentTime)
+    console.log(currentFrame);
+    console.log(currentTime);
   }
   // process 메서드는 필수적입니다 - 아무 소리도 나지 않는데,
   // outputs에 값을 넣지 않았기 때문입니다
-  process (inputs, outputs, parameters) {
-    return true
+  process(inputs, outputs, parameters) {
+    return true;
   }
 }
 
 // 샘플 레이트는 절대 변하지 않을 것인데,
 // 왜냐하면 이것은 BaseAudioContext의 읽기 전용 속성이고
 // 오직 이것의 초기화 동안에만 설정되기 때문입니다
-console.log(sampleRate)
+console.log(sampleRate);
 
 // 여러분은 어떠한 변수든 선언하고 프로세서에서 사용할 수 있습니다
 // 예를 들어 변수는 웨이브 테이블을 가진 ArrayBuffer일 수 있습니다
-const usefulVariable = 42
-console.log(usefulVariable)
+const usefulVariable = 42;
+console.log(usefulVariable);
 
-registerProcessor('test-processor', TestProcessor)
+registerProcessor("test-processor", TestProcessor);
 ```
 
 다음으로, 메인 스크립트 파일에서 우리는 프로세서를 로드하고, `AudioWorkletNode`에 프로세서의 이름을 전달하며 `AudioWorkletNode`의 인스턴스를 생성하고, 노드를 오디오 그래프에 연결할 것입니다. 우리는 콘솔에서 `console.log` 호출의 출력을 볼 수 있을 것입니다.
 
 ```js
-const audioContext = new AudioContext()
-await audioContext.audioWorklet.addModule('test-processor.js')
-const testNode = new AudioWorkletNode(audioContext, 'test-processor')
-testNode.connect(audioContext.destination)
+const audioContext = new AudioContext();
+await audioContext.audioWorklet.addModule("test-processor.js");
+const testNode = new AudioWorkletNode(audioContext, "test-processor");
+testNode.connect(audioContext.destination);
 ```
 
 ## 명세
diff --git a/files/ko/web/api/audioworkletglobalscope/registerprocessor/index.md b/files/ko/web/api/audioworkletglobalscope/registerprocessor/index.md
index 6d49d2d362d1f2..09900ceb7c7888 100644
--- a/files/ko/web/api/audioworkletglobalscope/registerprocessor/index.md
+++ b/files/ko/web/api/audioworkletglobalscope/registerprocessor/index.md
@@ -2,6 +2,7 @@
 title: AudioWorkletGlobalScope.registerProcessor
 slug: Web/API/AudioWorkletGlobalScope/registerProcessor
 ---
+
 {{ APIRef("Web Audio API") }}
 
 {{domxref("AudioWorkletGlobalScope")}} 인터페이스의 **`registerProcessor`** 메서드는 명시된 _name_ 아래에서 {{domxref("AudioWorkletProcessor")}} 인터페이스로부터 파생된 클래스 생성자를 등록합니다.
@@ -55,21 +56,21 @@ AudioWorkletGlobalScope.registerProcessor(name, processorCtor);
 ```js
 // test-processor.js
 class TestProcessor extends AudioWorkletProcessor {
-  process (inputs, outputs, parameters) {
-    return true
+  process(inputs, outputs, parameters) {
+    return true;
   }
 }
 
-registerProcessor('test-processor', TestProcessor)
+registerProcessor("test-processor", TestProcessor);
 ```
 
 다음으로, 메인 스크립트 파일에서 우리는 프로세서를 로드하고, `AudioWorkletNode` 에 우리가 `registerProcessor` 를 호출할 때 사용했던 프로세서 이름을 전달하며 `AudioWorkletNode` 의 인스턴스를 생성하고, 이것을 오디오 그래프에 연결할 것입니다.
 
 ```js
-const audioContext = new AudioContext()
-await audioContext.audioWorklet.addModule('test-processor.js')
-const node = new AudioWorkletNode(audioContext, 'test-processor')
-node.connect(audioContext.destination)
+const audioContext = new AudioContext();
+await audioContext.audioWorklet.addModule("test-processor.js");
+const node = new AudioWorkletNode(audioContext, "test-processor");
+node.connect(audioContext.destination);
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/audioworkletnode/audioworkletnode/index.md b/files/ko/web/api/audioworkletnode/audioworkletnode/index.md
index 20fa05e40efc1e..a51c9f46670051 100644
--- a/files/ko/web/api/audioworkletnode/audioworkletnode/index.md
+++ b/files/ko/web/api/audioworkletnode/audioworkletnode/index.md
@@ -48,9 +48,11 @@ var node = new AudioWorkletNode(context, name, options);
 ### 예외
 
 - `NotSupportedError` {{domxref("DOMException")}}
+
   - : 명시된 `options.outputChannelCount` 이 `0` 또는 현재 구현 지원보다 더 큽니다.
 
     `options.numberOfInputs`와 `options.numberOfOutputs`가 둘 다 0입니다.
+
 - `IndexSizeError` {{domxref("DOMException")}}
   - : `options.outputChannelCount` 배열의 길이가 `options.numberOfOutputs`와 일치하지 않습니다.
 
diff --git a/files/ko/web/api/audioworkletnode/index.md b/files/ko/web/api/audioworkletnode/index.md
index c6d559dcc0e387..575c93a8063ed2 100644
--- a/files/ko/web/api/audioworkletnode/index.md
+++ b/files/ko/web/api/audioworkletnode/index.md
@@ -2,6 +2,7 @@
 title: AudioWorkletNode
 slug: Web/API/AudioWorkletNode
 ---
+
 {{APIRef("Web Audio API")}}
 
 > **참고:** 이 인터페이스는 [secure contexts](/ko/docs/Web/Security/Secure_Contexts) 바깥에서 이용 가능하지만, {{domxref("BaseAudioContext.audioWorklet")}} 속성은 그렇지 않습니다. 따라서 사용자 정의 {{domxref("AudioWorkletProcessor")}}는 [secure contexts](/ko/docs/Web/Security/Secure_Contexts) 바깥에서 정의될 수 없습니다.
@@ -42,27 +43,30 @@ _`AudioWorkletNode` 인터페이스는 자신만의 어떠한 메서드도 정
 ```js
 // white-noise-processor.js
 class WhiteNoiseProcessor extends AudioWorkletProcessor {
-  process (inputs, outputs, parameters) {
-    const output = outputs[0]
-    output.forEach(channel => {
+  process(inputs, outputs, parameters) {
+    const output = outputs[0];
+    output.forEach((channel) => {
       for (let i = 0; i < channel.length; i++) {
-        channel[i] = Math.random() * 2 - 1
+        channel[i] = Math.random() * 2 - 1;
       }
-    })
-    return true
+    });
+    return true;
   }
 }
 
-registerProcessor('white-noise-processor', WhiteNoiseProcessor)
+registerProcessor("white-noise-processor", WhiteNoiseProcessor);
 ```
 
 다음으로, 메인 스크립트 파일에서 우리는 프로세서를 로드하고, 프로세서의 이름을 `AudioWorkletNode` 에 전달하며 `AudioWorkletNode` 의 인스턴스를 생성하고, 이 노드를 오디오 그래프에 연결할 것입니다.
 
 ```js
-const audioContext = new AudioContext()
-await audioContext.audioWorklet.addModule('white-noise-processor.js')
-const whiteNoiseNode = new AudioWorkletNode(audioContext, 'white-noise-processor')
-whiteNoiseNode.connect(audioContext.destination)
+const audioContext = new AudioContext();
+await audioContext.audioWorklet.addModule("white-noise-processor.js");
+const whiteNoiseNode = new AudioWorkletNode(
+  audioContext,
+  "white-noise-processor",
+);
+whiteNoiseNode.connect(audioContext.destination);
 ```
 
 ## 명세
diff --git a/files/ko/web/api/audioworkletnode/parameters/index.md b/files/ko/web/api/audioworkletnode/parameters/index.md
index e7b20a8f6d08d8..3bb7e64e22d9f2 100644
--- a/files/ko/web/api/audioworkletnode/parameters/index.md
+++ b/files/ko/web/api/audioworkletnode/parameters/index.md
@@ -2,6 +2,7 @@
 title: AudioWorkletNode.parameters
 slug: Web/API/AudioWorkletNode/parameters
 ---
+
 {{APIRef("Web Audio API")}}
 
 {{domxref("AudioWorkletNode")}} 인터페이스의 읽기 전용 **`parameters`** 속성은 연관된 {{domxref("AudioParamMap")}}을 반환합니다 — 즉, {{domxref("AudioParam")}} 객체들의 유사 `Map` 컬렉션입니다. 이것들은 {{domxref("AudioWorkletProcessor")}}의 static {{domxref("AudioWorkletProcessor.parameterDescriptors", "parameterDescriptors")}} getter에 따라 근본적인 {{domxref("AudioWorkletProcessor")}}의 생성 중에 초기화됩니다.
@@ -9,7 +10,7 @@ slug: Web/API/AudioWorkletNode/parameters
 ## 구문
 
 ```js
-audioWorkletNodeInstance.parameters
+audioWorkletNodeInstance.parameters;
 ```
 
 ### 값
@@ -28,49 +29,57 @@ audioWorkletNodeInstance.parameters
 ```js
 // white-noise-processor.js
 class WhiteNoiseProcessor extends AudioWorkletProcessor {
-  static get parameterDescriptors () {
-    return [{
-      name: 'customGain',
-      defaultValue: 1,
-      minValue: 0,
-      maxValue: 1,
-      automationRate: 'a-rate'
-    }]
+  static get parameterDescriptors() {
+    return [
+      {
+        name: "customGain",
+        defaultValue: 1,
+        minValue: 0,
+        maxValue: 1,
+        automationRate: "a-rate",
+      },
+    ];
   }
 
-  process (inputs, outputs, parameters) {
-    const output = outputs[0]
-    output.forEach(channel => {
+  process(inputs, outputs, parameters) {
+    const output = outputs[0];
+    output.forEach((channel) => {
       for (let i = 0; i < channel.length; i++) {
-        channel[i] = (Math.random() * 2 - 1) *
-          (parameters['customGain'].length > 1 ? parameters['customGain'][i] : parameters['customGain'][0])
+        channel[i] =
+          (Math.random() * 2 - 1) *
+          (parameters["customGain"].length > 1
+            ? parameters["customGain"][i]
+            : parameters["customGain"][0]);
         // 참고: 파라미터는 128개의 값 (각 128 샘플에 대한 하나의 값) 을 가진 배열을 포함하지만,
         // 만약 그 순간에 자동화가 스케쥴되어 있지 않다면
         // 모든 128개의 샘플에 대해 사용될 하나의 값을 포함할 수도 있습니다.
       }
-    })
-    return true
+    });
+    return true;
   }
 }
 
-registerProcessor('white-noise-processor', WhiteNoiseProcessor)
+registerProcessor("white-noise-processor", WhiteNoiseProcessor);
 ```
 
 다음으로, 메인 스크립트 파일에서 우리는 프로세서를 로드하고, 프로세서의 이름을 전달하며 `AudioWorkletNode` 의 인스턴스를 생성하고, 노드를 오디오 그래프에 연결합니다.
 
 ```js
-const audioContext = new AudioContext()
-await audioContext.audioWorklet.addModule('white-noise-processor.js')
-const whiteNoiseNode = new AudioWorkletNode(audioContext, 'white-noise-processor')
-whiteNoiseNode.connect(audioContext.destination)
+const audioContext = new AudioContext();
+await audioContext.audioWorklet.addModule("white-noise-processor.js");
+const whiteNoiseNode = new AudioWorkletNode(
+  audioContext,
+  "white-noise-processor",
+);
+whiteNoiseNode.connect(audioContext.destination);
 ```
 
 이제 우리는 노드의 gain을 다음과 같이 변경할 수 있습니다:
 
 ```js
-const gainParam = whiteNoiseNode.parameters.get('customGain')
-gainParam.setValueAtTime(0, audioContext.currentTime)
-gainParam.linearRampToValueAtTime(0.5, audioContext.currentTime + 0.5)
+const gainParam = whiteNoiseNode.parameters.get("customGain");
+gainParam.setValueAtTime(0, audioContext.currentTime);
+gainParam.linearRampToValueAtTime(0.5, audioContext.currentTime + 0.5);
 ```
 
 ## 명세
diff --git a/files/ko/web/api/audioworkletnode/port/index.md b/files/ko/web/api/audioworkletnode/port/index.md
index 75a85af56083e1..e22b1d9b688cd8 100644
--- a/files/ko/web/api/audioworkletnode/port/index.md
+++ b/files/ko/web/api/audioworkletnode/port/index.md
@@ -2,6 +2,7 @@
 title: AudioWorkletNode.port
 slug: Web/API/AudioWorkletNode/port
 ---
+
 {{APIRef("Web Audio API")}}{{SeeCompatTable}}
 
 {{domxref("AudioWorkletNode")}} 인터페이스의 읽기 전용 **`port`** 속성은 연관된 {{domxref("MessagePort")}}를 반환합니다. 이것은 노드와 노드에 연관된 {{domxref("AudioWorkletProcessor")}} 사이에서 소통하기 위해 사용될 수 있습니다.
@@ -29,32 +30,32 @@ audioWorkletNodeInstance.port;
 ```js
 // ping-pong-processor.js
 class PingPongProcessor extends AudioWorkletProcessor {
-  constructor (...args) {
-    super(...args)
+  constructor(...args) {
+    super(...args);
     this.port.onmessage = (e) => {
-      console.log(e.data)
-      this.port.postMessage('pong')
-    }
+      console.log(e.data);
+      this.port.postMessage("pong");
+    };
   }
-  process (inputs, outputs, parameters) {
-    return true
+  process(inputs, outputs, parameters) {
+    return true;
   }
 }
 
-registerProcessor('ping-pong-processor', PingPongProcessor)
+registerProcessor("ping-pong-processor", PingPongProcessor);
 ```
 
 이제 메인 스크립트 파일에서 우리는 프로세서를 로드하고, 프로세서의 이름을 전달하며 `AudioWorkletNode` 의 인스턴스를 생성하고, 노드를 오디오 그래프에 연결할 것입니다.
 
 ```js
-const audioContext = new AudioContext()
-await audioContext.audioWorklet.addModule('ping-pong-processor.js')
-const pingPongNode = new AudioWorkletNode(audioContext, 'ping-pong-processor')
+const audioContext = new AudioContext();
+await audioContext.audioWorklet.addModule("ping-pong-processor.js");
+const pingPongNode = new AudioWorkletNode(audioContext, "ping-pong-processor");
 // 매 초 AudioWorkletNode로부터
 // AudioWorkletProcessor에 'ping' 문자열을 포함하는 메시지를 보냅니다
-setInterval(() => pingPongNode.port.postMessage('ping'), 1000)
-pingPongNode.port.onmessage = (e) => console.log(e.data)
-pingPongNode.connect(audioContext.destination)
+setInterval(() => pingPongNode.port.postMessage("ping"), 1000);
+pingPongNode.port.onmessage = (e) => console.log(e.data);
+pingPongNode.connect(audioContext.destination);
 ```
 
 이것은 `"ping"` 과 `"pong"` 문자열을 콘솔에 매 초 출력할 것입니다.
diff --git a/files/ko/web/api/audioworkletprocessor/audioworkletprocessor/index.md b/files/ko/web/api/audioworkletprocessor/audioworkletprocessor/index.md
index 5b573e19964d81..c3266d0cf1d850 100644
--- a/files/ko/web/api/audioworkletprocessor/audioworkletprocessor/index.md
+++ b/files/ko/web/api/audioworkletprocessor/audioworkletprocessor/index.md
@@ -2,6 +2,7 @@
 title: AudioWorkletProcessor()
 slug: Web/API/AudioWorkletProcessor/AudioWorkletProcessor
 ---
+
 {{APIRef("Web Audio API")}}
 
 **`AudioWorkletProcessor()`** 생성자는 {{domxref("AudioWorkletNode")}}의 근본적인 오디오 프로세싱 메커니즘을 나타내는 새로운 {{domxref("AudioWorkletProcessor")}} 객체를 생성합니다.
@@ -52,17 +53,17 @@ clone](/ko/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)이 우리의
 ```js
 // test-processor.js
 class TestProcessor extends AudioWorkletProcessor {
-  constructor (options) {
-    super()
-    console.log(options.numberOfInputs)
-    console.log(options.processorOptions.someUsefulVariable)
+  constructor(options) {
+    super();
+    console.log(options.numberOfInputs);
+    console.log(options.processorOptions.someUsefulVariable);
   }
-  process (inputs, outputs, parameters) {
-    return true
+  process(inputs, outputs, parameters) {
+    return true;
   }
 }
 
-registerProcessor('test-processor', TestProcessor)
+registerProcessor("test-processor", TestProcessor);
 ```
 
 다음으로, 메인 스크립트 파일에서 우리는 프로세서를 로드하고, `AudioWorkletNode` 에 프로세서의 이름과 _options_ 객체를 전달하며 `AudioWorkletNode` 의 인스턴스를 생성합니다.
@@ -70,13 +71,16 @@ registerProcessor('test-processor', TestProcessor)
 _options_ 객체에서 우리는 `someUsefulVariable` 키 아래에서 {{jsxref("Map")}} 인스턴스와 함께 `processorOptions` 를 전달합니다. 우리는 `numberOfInputs` 을 전달하지 않았고 어떻게 이것이 기본 값을 얻게 되는지 관찰해 봅시다.
 
 ```js
-const audioContext = new AudioContext()
-await audioContext.audioWorklet.addModule('test-processor.js')
-const testNode = new AudioWorkletNode(audioContext, 'test-processor', {
+const audioContext = new AudioContext();
+await audioContext.audioWorklet.addModule("test-processor.js");
+const testNode = new AudioWorkletNode(audioContext, "test-processor", {
   processorOptions: {
-    someUsefulVariable: new Map([[1, 'one'], [2, 'two']])
-  }
-})
+    someUsefulVariable: new Map([
+      [1, "one"],
+      [2, "two"],
+    ]),
+  },
+});
 ```
 
 콘솔 출력은 다음과 같을 것입니다:
diff --git a/files/ko/web/api/audioworkletprocessor/index.md b/files/ko/web/api/audioworkletprocessor/index.md
index 8b420e0522e280..96812f97dd9b81 100644
--- a/files/ko/web/api/audioworkletprocessor/index.md
+++ b/files/ko/web/api/audioworkletprocessor/index.md
@@ -2,6 +2,7 @@
 title: AudioWorkletProcessor
 slug: Web/API/AudioWorkletProcessor
 ---
+
 {{APIRef("Web Audio API")}}
 
 [Web Audio API](/ko/docs/Web/API/Web_Audio_API)의 **`AudioWorkletProcessor`** 인터페이스는 사용자 정의 {{domxref("AudioWorkletNode")}} 뒤의 오디오 프로세싱 코드를 나타냅니다. 이것은 {{domxref("AudioWorkletGlobalScope")}} 안에 있으며 Web Audio 렌더링 스레드에서 실행됩니다. 결과적으로, 이것에 기반한 {{domxref("AudioWorkletNode")}}가 메인 스레드에서 실행됩니다.
@@ -43,8 +44,8 @@ _`AudioWorkletProcessor` 인터페이스는 어떠한 이벤트에도 응답하
 1. 별도의 파일을 생성합니다.
 2. 그 파일에서
 
-    1. `AudioWorkletProcessor` 클래스를 확장하고 (["클래스 파생" 섹션](#클래스_파생)을 참고하세요) 여러분만의 {{domxref("AudioWorkletProcessor.process", "process()")}} 메서드를 그 안에 제공하세요.
-    2. {{domxref("AudioWorkletGlobalScope.registerProcessor()")}} 메서드를 사용해 프로세서를 등록하세요.
+   1. `AudioWorkletProcessor` 클래스를 확장하고 (["클래스 파생" 섹션](#클래스_파생)을 참고하세요) 여러분만의 {{domxref("AudioWorkletProcessor.process", "process()")}} 메서드를 그 안에 제공하세요.
+   2. {{domxref("AudioWorkletGlobalScope.registerProcessor()")}} 메서드를 사용해 프로세서를 등록하세요.
 
 3. 오디오 컨텍스트의 {{domxref("BaseAudioContext.audioWorklet", "audioWorklet")}} 속성에서 {{domxref("Worklet.addModule", "addModule()")}} 메서드를 사용하여 파일을 로드하세요.
 4. 이 프로세서에 기반하는 {{domxref("AudioWorkletNode")}}를 생성하세요. 이 프로세서는 `AudioWorkletNode` 생성자에 의해 내부적으로 초기화될 것입니다.
@@ -59,27 +60,30 @@ _`AudioWorkletProcessor` 인터페이스는 어떠한 이벤트에도 응답하
 ```js
 // white-noise-processor.js
 class WhiteNoiseProcessor extends AudioWorkletProcessor {
-  process (inputs, outputs, parameters) {
-    const output = outputs[0]
-    output.forEach(channel => {
+  process(inputs, outputs, parameters) {
+    const output = outputs[0];
+    output.forEach((channel) => {
       for (let i = 0; i < channel.length; i++) {
-        channel[i] = Math.random() * 2 - 1
+        channel[i] = Math.random() * 2 - 1;
       }
-    })
-    return true
+    });
+    return true;
   }
 }
 
-registerProcessor('white-noise-processor', WhiteNoiseProcessor)
+registerProcessor("white-noise-processor", WhiteNoiseProcessor);
 ```
 
 다음으로, 메인 스크립트 파일에서 우리는 프로세서를 로드하고, 프로세서의 이름을 {{domxref("AudioWorkletNode")}}에 전달하며 {{domxref("AudioWorkletNode")}}의 인스턴스를 생성하고, 그리고 나서 이 노드를 오디오 그래프에 연결합니다.
 
 ```js
-const audioContext = new AudioContext()
-await audioContext.audioWorklet.addModule('white-noise-processor.js')
-const whiteNoiseNode = new AudioWorkletNode(audioContext, 'white-noise-processor')
-whiteNoiseNode.connect(audioContext.destination)
+const audioContext = new AudioContext();
+await audioContext.audioWorklet.addModule("white-noise-processor.js");
+const whiteNoiseNode = new AudioWorkletNode(
+  audioContext,
+  "white-noise-processor",
+);
+whiteNoiseNode.connect(audioContext.destination);
 ```
 
 ## 명세서
diff --git a/files/ko/web/api/audioworkletprocessor/process/index.md b/files/ko/web/api/audioworkletprocessor/process/index.md
index 9604fba005f0f0..552e9a6d7bc3da 100644
--- a/files/ko/web/api/audioworkletprocessor/process/index.md
+++ b/files/ko/web/api/audioworkletprocessor/process/index.md
@@ -2,6 +2,7 @@
 title: AudioWorkletProcessor.process
 slug: Web/API/AudioWorkletProcessor/process
 ---
+
 {{APIRef("Web Audio API")}}
 
 {{domxref("AudioWorkletProcessor")}}에서 파생된 클래스의 **`process()`** 메서드는 오디오 프로세서 worklet에 대한 오디오 프로세싱 알고리즘을 구현합니다.
@@ -26,7 +27,11 @@ slug: Web/API/AudioWorkletProcessor/process
 ## 구문
 
 ```js
-var isActivelyProcessing = audioWorkletProcessor.process(inputs, outputs, parameters);
+var isActivelyProcessing = audioWorkletProcessor.process(
+  inputs,
+  outputs,
+  parameters,
+);
 ```
 
 ### 매개변수
@@ -80,38 +85,41 @@ var isActivelyProcessing = audioWorkletProcessor.process(inputs, outputs, parame
 
 ```js
 class WhiteNoiseProcessor extends AudioWorkletProcessor {
-  process (inputs, outputs, parameters) {
+  process(inputs, outputs, parameters) {
     // 첫번째 출력을 취합니다
-    const output = outputs[0]
+    const output = outputs[0];
     // 각 채널을 gain에 의해 곱해진 무작위 값으로 채웁니다
-    output.forEach(channel => {
+    output.forEach((channel) => {
       for (let i = 0; i < channel.length; i++) {
         // 각 샘플에 대해 무작위 값을 생성합니다
         // Math.random의 범위는 [0; 1)입니다; 우리는 [-1; 1]이 필요합니다
         // 이것은 정확한 1을 포함하지 않을 것이지만 단순성을 위해 지금으로선 괜찮습니다
-        channel[i] = (Math.random() * 2 - 1) *
+        channel[i] =
+          (Math.random() * 2 - 1) *
           // 배열은 자동화가 존재하는지와
           // 자동화가 k-rate인지 a-rate인지에 따라
           // 1개 또는 128개의 값을 포함할 수 있습니다
-          (parameters['customGain'].length > 1
-            ? parameters['customGain'][i]
-            : parameters['customGain'][0])
+          (parameters["customGain"].length > 1
+            ? parameters["customGain"][i]
+            : parameters["customGain"][0]);
       }
-    })
+    });
     // 이것은 자신만의 출력을 생성하는 소스 노드이므로, 만약 우리가
     // 메인 스레드에서 이것에 대해 어떠한 참조도 가지고 있지 않는다면
     // 이것이 뜻하지 않게 garbage-collected되지 않도록 우리는 true를 반환할 것입니다
-    return true
+    return true;
   }
   // process 메서드에서 사용되는 customGain 파라미터를 정의합니다
-  static get parameterDescriptors () {
-    return [{
-      name: 'customGain',
-      defaultValue: 1,
-      minValue: 0,
-      maxValue: 1,
-      automationRate: 'a-rate'
-    }]
+  static get parameterDescriptors() {
+    return [
+      {
+        name: "customGain",
+        defaultValue: 1,
+        minValue: 0,
+        maxValue: 1,
+        automationRate: "a-rate",
+      },
+    ];
   }
 }
 ```
diff --git a/files/ko/web/api/background_tasks_api/index.md b/files/ko/web/api/background_tasks_api/index.md
index 09d56cac74e1bd..31fa90e17a9bb7 100644
--- a/files/ko/web/api/background_tasks_api/index.md
+++ b/files/ko/web/api/background_tasks_api/index.md
@@ -2,6 +2,7 @@
 title: Cooperative Scheduling of Background Tasks API
 slug: Web/API/Background_Tasks_API
 ---
+
 {{DefaultAPISidebar("Background Tasks")}}
 
 **Cooperative Scheduling of Background Tasks API** (Background Tasks API 또는 간단하게 `requestIdleCallback()` API 라고도 부릅니다.) 는 user agnet가 자유 시간이 있다고 판단되면, 자동으로 실행될 작업을 대기열(queue tasks)에 넣을 수 있는 기능을 제공합니다.
@@ -27,18 +28,20 @@ slug: Web/API/Background_Tasks_API
 Background Tasks API는 매우 새롭기 때문에, 우리의 코드가 아직 이 API를 지원하지 않는 브라우저에서 작동해야 하는 경우가 있을 수 있습니다. 우리는 {{domxref("WindowTimers.setTimeout()", "setTimeout()")}}을 fallback 옵션으로 사용하는 간단한 shim으로 그렇게 할 수 있습니다. 이것은 기능적으로 동일하지 않기 때문에 {{Glossary("polyfill")}}이 아닙니다. `setTimeout()`을 사용하면 유휴 기간(idle periods)을 사용할 수 없습니다. 하지만 대신에 가능한 경우 코드를 실행하여, 사용자가 성능 지연을 경험하지 못하도록 최대한 방지합니다.
 
 ```js
-window.requestIdleCallback = window.requestIdleCallback || function(handler) {
-  let startTime = Date.now();
-
-  return setTimeout(function() {
-    handler({
-      didTimeout: false,
-      timeRemaining: function() {
-        return Math.max(0, 50.0 - (Date.now() - startTime));
-      }
-    });
-  }, 1);
-}
+window.requestIdleCallback =
+  window.requestIdleCallback ||
+  function (handler) {
+    let startTime = Date.now();
+
+    return setTimeout(function () {
+      handler({
+        didTimeout: false,
+        timeRemaining: function () {
+          return Math.max(0, 50.0 - (Date.now() - startTime));
+        },
+      });
+    }, 1);
+  };
 ```
 
 {{domxref("Window.requestIdleCallback", "window.requestIdleCallback")}}이 선언되지 않았다면, 위와같이 만들어 줍니다. 함수는 우리의 코드가 호출 된 시간을 기록하는 것으로 시작합니다. 우리는 이것을 사용하여 {{domxref("IdleDeadline.timeRemaining()", "timeRemaining()")}}에 대해 shim에서 반환 한 값을 계산합니다.
@@ -50,9 +53,11 @@ window.requestIdleCallback = window.requestIdleCallback || function(handler) {
 {{domxref("Window.cancelIdleCallback", "cancelIdleCallback()")}}에 대한 shim 구현은 훨씬 간단합니다:
 
 ```js
-window.cancelIdleCallback = window.cancelIdleCallback || function(id) {
-  clearTimeout(id);
-}
+window.cancelIdleCallback =
+  window.cancelIdleCallback ||
+  function (id) {
+    clearTimeout(id);
+  };
 ```
 
 `cancelIdleCallback()`이 선언되지 않은 경우, 이는 단순히 지정된 콜백 ID를 {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}에 전달하는 메서드를 생성합니다.
@@ -80,28 +85,28 @@ Background Tasks API 는 단 하나의 새 인터페이스를 추가합니다:
 
 ```html
 <p>
-  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>
+  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>
 
 <div class="container">
   <div class="label">Decoding quantum filament tachyon emissions...</div>
   <progress id="progress" value="0"></progress>
-  <div class="button" id="startButton">
-    Start
-  </div>
+  <div class="button" id="startButton">Start</div>
   <div class="label counter">
-    Task <span id="currentTaskNumber">0</span> of <span id="totalTaskCount">0</span>
+    Task <span id="currentTaskNumber">0</span> of
+    <span id="totalTaskCount">0</span>
   </div>
 </div>
 
 <div class="logBox">
-  <div class="logHeader">
-    Log
-  </div>
-  <div id="log">
-  </div>
+  <div class="logHeader">Log</div>
+  <div id="log"></div>
 </div>
 ```
 
@@ -116,7 +121,7 @@ body {
 .logBox {
   margin-top: 16px;
   width: 400px;
-  height:500px;
+  height: 500px;
   border-radius: 6px;
   border: 1px solid black;
   box-shadow: 4px 4px 2px black;
@@ -132,7 +137,9 @@ body {
 }
 
 #log {
-  font: 12px "Courier", monospace;
+  font:
+    12px "Courier",
+    monospace;
   padding: 6px;
   overflow: auto;
   overflow-y: scroll;
@@ -230,22 +237,26 @@ let statusRefreshScheduled = false;
 The shim to function even if idle callbacks aren't supported. Already discussed above, so it's hidden here to save space in the article.
 
 ```js
-window.requestIdleCallback = window.requestIdleCallback || function(handler) {
-  let startTime = Date.now();
-
-return setTimeout(function() {
-handler({
-didTimeout: false,
-timeRemaining: function() {
-return Math.max(0, 50.0 - (Date.now() - startTime));
-}
-});
-}, 1);
-};
-
-window.cancelIdleCallback = window.cancelIdleCallback || function(id) {
-clearTimeout(id);
-};
+window.requestIdleCallback =
+  window.requestIdleCallback ||
+  function (handler) {
+    let startTime = Date.now();
+
+    return setTimeout(function () {
+      handler({
+        didTimeout: false,
+        timeRemaining: function () {
+          return Math.max(0, 50.0 - (Date.now() - startTime));
+        },
+      });
+    }, 1);
+  };
+
+window.cancelIdleCallback =
+  window.cancelIdleCallback ||
+  function (id) {
+    clearTimeout(id);
+  };
 ```
 
 #### Managing the task queue
@@ -260,7 +271,7 @@ clearTimeout(id);
 function enqueueTask(taskHandler, taskData) {
   taskList.push({
     handler: taskHandler,
-    data: taskData
+    data: taskData,
   });
 
   totalTaskCount++;
@@ -288,7 +299,10 @@ function enqueueTask(taskHandler, taskData) {
 
 ```js
 function runTaskQueue(deadline) {
-  while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && taskList.length) {
+  while (
+    (deadline.timeRemaining() > 0 || deadline.didTimeout) &&
+    taskList.length
+  ) {
     let task = taskList.shift();
     currentTaskNumber++;
 
@@ -297,7 +311,7 @@ function runTaskQueue(deadline) {
   }
 
   if (taskList.length) {
-    taskHandle = requestIdleCallback(runTaskQueue, { timeout: 1000} );
+    taskHandle = requestIdleCallback(runTaskQueue, { timeout: 1000 });
   } else {
     taskHandle = 0;
   }
@@ -326,9 +340,9 @@ DOM 변경은 `scheduleStatusRefresh()`함수를 호출하여 예약합니다.
 
 ```js
 function scheduleStatusRefresh() {
-    if (!statusRefreshScheduled) {
-      requestAnimationFrame(updateDisplay);
-      statusRefreshScheduled = true;
+  if (!statusRefreshScheduled) {
+    requestAnimationFrame(updateDisplay);
+    statusRefreshScheduled = true;
   }
 }
 ```
@@ -341,7 +355,8 @@ function scheduleStatusRefresh() {
 
 ```js
 function updateDisplay() {
-  let scrolledToEnd = logElem.scrollHeight - logElem.clientHeight <= logElem.scrollTop + 1;
+  let scrolledToEnd =
+    logElem.scrollHeight - logElem.clientHeight <= logElem.scrollTop + 1;
 
   if (totalTaskCount) {
     if (progressBarElem.max != totalTaskCount) {
@@ -361,7 +376,7 @@ function updateDisplay() {
   }
 
   if (scrolledToEnd) {
-      logElem.scrollTop = logElem.scrollHeight - logElem.clientHeight;
+    logElem.scrollTop = logElem.scrollHeight - logElem.clientHeight;
   }
 
   statusRefreshScheduled = false;
@@ -386,7 +401,7 @@ function updateDisplay() {
 ```js
 function log(text) {
   if (!logFragment) {
-      logFragment = document.createDocumentFragment();
+    logFragment = document.createDocumentFragment();
   }
 
   let el = document.createElement("div");
@@ -411,8 +426,8 @@ function log(text) {
 function logTaskHandler(data) {
   log("<strong>Running task #" + currentTaskNumber + "</strong>");
 
-  for (i=0; i<data.count; i+=1) {
-    log((i+1).toString() + ". " + data.text);
+  for (i = 0; i < data.count; i += 1) {
+    log((i + 1).toString() + ". " + data.text);
   }
 }
 ```
@@ -439,17 +454,19 @@ function decodeTechnoStuff() {
 
   let n = getRandomIntInclusive(100, 200);
 
-  for (i=0; i<n; i++) {
+  for (i = 0; i < n; i++) {
     let taskData = {
       count: getRandomIntInclusive(75, 150),
-      text: "This text is from task number " + (i+1).toString() + " of " + n
+      text: "This text is from task number " + (i + 1).toString() + " of " + n,
     };
 
     enqueueTask(logTaskHandler, taskData);
   }
 }
 
-document.getElementById("startButton").addEventListener("click", decodeTechnoStuff, false);
+document
+  .getElementById("startButton")
+  .addEventListener("click", decodeTechnoStuff, false);
 ```
 
 `decodeTechnoStuff()`가 시작하면 `totalTaskCount`(현재까지 큐에 추가된 태스크의 수)의 값과 `currentTaskNumber`(현재 실행중인 태스크의 수) 값을 0으로 설정합니다. 그리고 `updateDisplay()`를 호출하여 "아직 아무일도 일어나지 않았습니다(nothing's happened yet)" 상태로 재설정합니다.
diff --git a/files/ko/web/api/baseaudiocontext/createperiodicwave/index.md b/files/ko/web/api/baseaudiocontext/createperiodicwave/index.md
index 25dcf9d97476ef..3b6b7f21086048 100644
--- a/files/ko/web/api/baseaudiocontext/createperiodicwave/index.md
+++ b/files/ko/web/api/baseaudiocontext/createperiodicwave/index.md
@@ -46,7 +46,7 @@ imag[0] = 0;
 real[1] = 1;
 imag[1] = 0;
 
-var wave = ac.createPeriodicWave(real, imag, {disableNormalization: true});
+var wave = ac.createPeriodicWave(real, imag, { disableNormalization: true });
 
 osc.setPeriodicWave(wave);
 
diff --git a/files/ko/web/api/battery_status_api/index.md b/files/ko/web/api/battery_status_api/index.md
index 5406aa43dbdea9..402ebf2c8613db 100644
--- a/files/ko/web/api/battery_status_api/index.md
+++ b/files/ko/web/api/battery_status_api/index.md
@@ -3,6 +3,7 @@ title: Battery Status API
 slug: Web/API/Battery_Status_API
 original_slug: WebAPI/Battery_Status
 ---
+
 {{DefaultAPISidebar("Battery API")}}
 
 **Battery API** 만큼이나 자주 언급되는 **Battery Status API**는 시스템의 배터리 충전 상태에 대한 정보를 제공하고, 배터리 상태에 따라 발생하는 이벤트를 다룰 수 있도록 해 줍니다. 배터리가 얼마남지 않은 상황에서, 앱에서 배터리의 소모를 줄인다거나 배터리가 방전되기 전에 데이터를 저장하거나 하는 것들이 가능합니다.
@@ -14,7 +15,8 @@ Battery Status API 는 {{domxref("window.navigator.battery")}} 를 제공 합니
 아래 예제에서는 배터리가 충전중인 상태 (전원 케이블을 연결하여 충전 중인지) 와 배터리 수준의 변화를 감시합니다. 각각 {{domxref("BatteryManager.chargingchange_event", "chargingchange")}} 와 {{domxref("BatteryManager.levelchange_event", "levelchange")}} 이벤트가 발생하면 완료 됩니다.
 
 ```js
-var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+var battery =
+  navigator.battery || navigator.mozBattery || navigator.webkitBattery;
 
 function updateBatteryStatus() {
   console.log("Battery status: " + battery.level * 100 + " %");
diff --git a/files/ko/web/api/batterymanager/charging/index.md b/files/ko/web/api/batterymanager/charging/index.md
index 5a5e0b7fcd03aa..e1706be15c8b91 100644
--- a/files/ko/web/api/batterymanager/charging/index.md
+++ b/files/ko/web/api/batterymanager/charging/index.md
@@ -10,7 +10,7 @@ slug: Web/API/BatteryManager/charging
 ## 문법
 
 ```js
-    var charging = battery.charging
+var charging = battery.charging;
 ```
 
 `charging` 변수는 배터리가 충전 중인지의 여부를 가져옵니다. 충전중일경우 `true`. 이외에는 `false` 를 가리킵니다.
@@ -26,11 +26,10 @@ slug: Web/API/BatteryManager/charging
 ### JavaScript Content
 
 ```js
-navigator.getBattery().then(function(battery) {
+navigator.getBattery().then(function (battery) {
+  var charging = battery.charging;
 
-    var charging = battery.charging;
-
-    document.querySelector('#charging').textContent = charging ;
+  document.querySelector("#charging").textContent = charging;
 });
 ```
 
diff --git a/files/ko/web/api/batterymanager/chargingtime/index.md b/files/ko/web/api/batterymanager/chargingtime/index.md
index 182f9ce8658ffb..545969221ac283 100644
--- a/files/ko/web/api/batterymanager/chargingtime/index.md
+++ b/files/ko/web/api/batterymanager/chargingtime/index.md
@@ -10,7 +10,7 @@ slug: Web/API/BatteryManager/chargingTime
 > **참고:** 반환되는 시간이 정확하더라도, 개인정보보호 정책 사유로 브라우저들이 더 큰 간격(대개 15분)으로 시간량을 반올림합니다.
 
 ```js
-    var time = battery.chargingTime
+var time = battery.chargingTime;
 ```
 
 반환되는 중에, 건전지가 완전히 충전될 때까지 또는 이미 완전히 충전되어 있다면 0이 될 때까지 `time` 은 몇 초 뒤에 남게 되는 시간입니다. 이는 {{domxref("BatteryManager")}} object (객체),입니다. 배터리의 전류가 방전되어 있다면, 이 값은 [`Infinity`](/ko/docs/JavaScript/Reference/Global_Objects/Infinity), 즉 무한 값이 됩니다.
@@ -26,11 +26,10 @@ slug: Web/API/BatteryManager/chargingTime
 ### 자바언어 콘텐츠
 
 ```js
-navigator.getBattery().then(function(battery) {
+navigator.getBattery().then(function (battery) {
+  var time = battery.chargingTime;
 
-   var time = battery.chargingTime;
-
-   document.querySelector('#chargingTime').textContent = battery.chargingTime;
+  document.querySelector("#chargingTime").textContent = battery.chargingTime;
 });
 ```
 
diff --git a/files/ko/web/api/batterymanager/dischargingtime/index.md b/files/ko/web/api/batterymanager/dischargingtime/index.md
index 2fc73281bc7d82..93c7c9bd28830c 100644
--- a/files/ko/web/api/batterymanager/dischargingtime/index.md
+++ b/files/ko/web/api/batterymanager/dischargingtime/index.md
@@ -12,7 +12,7 @@ slug: Web/API/BatteryManager/dischargingTime
 ## Syntax
 
 ```js
-    var time = battery.dischargingTime
+var time = battery.dischargingTime;
 ```
 
 반환되는 중에, `time` 은 {{domxref("BatteryManager")}} object(객체)인 `battery` 가 완전히 방전되고 시스템이 중단되는 몇 초 뒤에 남게 되는 시간입니다. 배터리가 현재 방전되기보다 충전되거나 시스템이 남은 방전 시간을 보고할 수 없다면, 이 값은 무한 값입니다.
@@ -28,11 +28,11 @@ slug: Web/API/BatteryManager/dischargingTime
 ### 자바언어 콘텐츠
 
 ```js
-navigator.getBattery().then(function(battery) {
+navigator.getBattery().then(function (battery) {
+  var time = battery.dischargingTime;
 
-    var time = battery.dischargingTime;
-
-    document.querySelector('#dischargingTime').textContent = battery.dischargingTime;
+  document.querySelector("#dischargingTime").textContent =
+    battery.dischargingTime;
 });
 ```
 
diff --git a/files/ko/web/api/batterymanager/index.md b/files/ko/web/api/batterymanager/index.md
index 34a7f4aec57b3b..e2998edfb18e44 100644
--- a/files/ko/web/api/batterymanager/index.md
+++ b/files/ko/web/api/batterymanager/index.md
@@ -2,6 +2,7 @@
 title: BatteryManager
 slug: Web/API/BatteryManager
 ---
+
 {{APIRef}}{{deprecated_header}}
 
 **`BatteryManager`** 인터페이스는 시스템의 배터리 충전 상태에 대한 정보를 확인 하는 방법을 제공합니다.
diff --git a/files/ko/web/api/blob/blob/index.md b/files/ko/web/api/blob/blob/index.md
index 2fe9082b999bed..bb5aa286e25dd0 100644
--- a/files/ko/web/api/blob/blob/index.md
+++ b/files/ko/web/api/blob/blob/index.md
@@ -2,6 +2,7 @@
 title: Blob()
 slug: Web/API/Blob/Blob
 ---
+
 {{APIRef("File API")}}
 
 **`Blob()`** 생성자는 새로운 {{domxref("Blob")}} 객체를 반환합니다. 반환하는 블롭의 데이터는 `array` 매개변수에 제공한 배열을 이어붙인 값입니다.
@@ -32,7 +33,7 @@ new Blob(array, options);
 
 ```js
 const array = ['<a id="a"><b id="b">hey!</b></a>']; // 하나의 DOMString을 포함한 배열
-const blob = new Blob(array, {type : 'text/html'}); // 생성한 블롭
+const blob = new Blob(array, { type: "text/html" }); // 생성한 블롭
 ```
 
 ## 명세
diff --git a/files/ko/web/api/blob/index.md b/files/ko/web/api/blob/index.md
index 6e51f5bfdbf187..19ab9858fe117f 100644
--- a/files/ko/web/api/blob/index.md
+++ b/files/ko/web/api/blob/index.md
@@ -2,6 +2,7 @@
 title: Blob
 slug: Web/API/Blob
 ---
+
 {{APIRef("File API")}}
 
 **`Blob`** 객체는 파일류의 불변하는 미가공 데이터를 나타냅니다. 텍스트와 이진 데이터의 형태로 읽을 수 있으며, {{domxref("ReadableStream")}}으로 변환한 후 스트림 메서드를 사용해 데이터를 처리할 수도 있습니다.
@@ -44,8 +45,10 @@ slug: Web/API/Blob
 {{DOMxRef("Blob.Blob", "Blob()")}} 생성자를 사용해 다른 객체에서 블롭을 생성할 수 있습니다. 예를 들어, 아래 코드는 문자열에서 블롭을 생성합니다.
 
 ```js
-const obj = {hello: 'world'};
-const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});
+const obj = { hello: "world" };
+const blob = new Blob([JSON.stringify(obj, null, 2)], {
+  type: "application/json",
+});
 ```
 
 ### 형식화 배열의 콘텐츠를 나타내는 URL 생성하기
@@ -55,10 +58,11 @@ const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'
 #### HTML
 
 ```html
-<p>이 예제는 스페이스 문자부터 대문자 Z까지의 ASCII
-   코드를 담은 형식화 배열을 생성한 후 객체 URL로
-   변환합니다. 아래에 링크를 추가했으니, 클릭해서
-   디코딩한 객체 URL을 확인하세요.</p>
+<p>
+  이 예제는 스페이스 문자부터 대문자 Z까지의 ASCII 코드를 담은 형식화 배열을
+  생성한 후 객체 URL로 변환합니다. 아래에 링크를 추가했으니, 클릭해서 디코딩한
+  객체 URL을 확인하세요.
+</p>
 ```
 
 #### JavaScript
@@ -67,20 +71,20 @@ const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'
 
 ```js
 function typedArrayToURL(typedArray, mimeType) {
-  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
+  return URL.createObjectURL(new Blob([typedArray.buffer], { type: mimeType }));
 }
 
 const bytes = new Uint8Array(59);
 
-for(let i = 0; i < 59; i++) {
+for (let i = 0; i < 59; i++) {
   bytes[i] = 32 + i;
 }
 
-const url = typedArrayToURL(bytes, 'text/plain');
+const url = typedArrayToURL(bytes, "text/plain");
 
-const link = document.createElement('a');
+const link = document.createElement("a");
 link.href = url;
-link.innerText = '배열 URL 열기';
+link.innerText = "배열 URL 열기";
 
 document.body.appendChild(link);
 ```
@@ -97,8 +101,8 @@ document.body.appendChild(link);
 
 ```js
 const reader = new FileReader();
-reader.addEventListener('loadend', () => {
-   // reader.result에 블롭의 내용이 형식화 배열로 들어있음
+reader.addEventListener("loadend", () => {
+  // reader.result에 블롭의 내용이 형식화 배열로 들어있음
 });
 reader.readAsArrayBuffer(blob);
 ```
@@ -106,7 +110,7 @@ reader.readAsArrayBuffer(blob);
 {{domxref("Response")}}를 사용하는 방법도 있습니다. 다음 코드는 `Blob`의 내용을 텍스트로 가져옵니다.
 
 ```js
-const text = await (new Response(blob)).text();
+const text = await new Response(blob).text();
 ```
 
 텍스트로 가져올 땐 {{DOMxRef("Blob.prototype.text()")}}를 사용할 수도 있습니다.
diff --git a/files/ko/web/api/blob/size/index.md b/files/ko/web/api/blob/size/index.md
index b8691803144eb9..aedbb0fdc72035 100644
--- a/files/ko/web/api/blob/size/index.md
+++ b/files/ko/web/api/blob/size/index.md
@@ -18,7 +18,7 @@ slug: Web/API/Blob/size
 ### HTML
 
 ```html
-<input type="file" id="input" multiple>
+<input type="file" id="input" multiple />
 <output id="output">파일 선택...</output>
 ```
 
@@ -32,11 +32,11 @@ output {
 ### JavaScript
 
 ```js
-const input = document.getElementById('input');
-const output = document.getElementById('output');
+const input = document.getElementById("input");
+const output = document.getElementById("output");
 
-input.addEventListener('change', (event) => {
-  output.innerText = '';
+input.addEventListener("change", (event) => {
+  output.innerText = "";
 
   for (const file of event.target.files) {
     output.innerText += `${file.name}의 크기는 ${file.size} 바이트입니다.\n`;
diff --git a/files/ko/web/api/blob/type/index.md b/files/ko/web/api/blob/type/index.md
index 20675febb807da..5d556010fbd95b 100644
--- a/files/ko/web/api/blob/type/index.md
+++ b/files/ko/web/api/blob/type/index.md
@@ -18,7 +18,7 @@ slug: Web/API/Blob/type
 ### HTML
 
 ```html
-<input type="file" id="input" multiple>
+<input type="file" id="input" multiple />
 <output id="output">이미지 파일 선택...</output>
 ```
 
@@ -35,21 +35,21 @@ output {
 // 우리 애플리케이션에서는 GIF, PNG, JPEG 이미지만 허용
 const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
 
-const input = document.getElementById('input');
-const output = document.getElementById('output');
+const input = document.getElementById("input");
+const output = document.getElementById("output");
 
-input.addEventListener('change', (event) => {
+input.addEventListener("change", (event) => {
   const files = event.target.files;
 
   if (files.length === 0) {
-    output.innerText = '이미지 파일 선택...';
+    output.innerText = "이미지 파일 선택...";
     return;
   }
 
   if (Array.from(files).every((file) => allowedFileTypes.includes(file.type))) {
-    output.innerText = '모든 파일 사용 가능!';
+    output.innerText = "모든 파일 사용 가능!";
   } else {
-    output.innerText = '이미지 파일만 선택하세요.';
+    output.innerText = "이미지 파일만 선택하세요.";
   }
 });
 ```
diff --git a/files/ko/web/api/btoa/index.md b/files/ko/web/api/btoa/index.md
index 61366896397227..8a741b4ef95c53 100644
--- a/files/ko/web/api/btoa/index.md
+++ b/files/ko/web/api/btoa/index.md
@@ -12,7 +12,7 @@ ASCII 값 0부터 31까지의 제어 문자처럼 통신에 사용하면 문제
 ## 구문
 
 ```js
-btoa(stringToEncode)
+btoa(stringToEncode);
 ```
 
 ### 매개변수
@@ -32,7 +32,7 @@ btoa(stringToEncode)
 ## 예제
 
 ```js
-const encodedData = btoa('Hello, world'); // 문자열 인코딩
+const encodedData = btoa("Hello, world"); // 문자열 인코딩
 const decodedData = atob(encodedData); // 문자열 디코딩
 ```
 
@@ -46,10 +46,10 @@ Base64는 이진 데이터를 입력으로 받도록 설계됐습니다. JavaScr
 const ok = "a";
 console.log(ok.codePointAt(0).toString(16)); // 61: 1바이트 미만
 
-const notOK = "✓"
+const notOK = "✓";
 console.log(notOK.codePointAt(0).toString(16)); // 2713: 1바이트 초과
 
-console.log(btoa(ok));    // YQ==
+console.log(btoa(ok)); // YQ==
 console.log(btoa(notOK)); // 오류
 ```
 
@@ -63,7 +63,7 @@ function toBinary(string) {
     codeUnits[i] = string.charCodeAt(i);
   }
   const charCodes = new Uint8Array(codeUnits.buffer);
-  let result = '';
+  let result = "";
   for (let i = 0; i < charCodes.byteLength; i++) {
     result += String.fromCharCode(charCodes[i]);
   }
@@ -75,7 +75,7 @@ const myString = "☸☹☺☻☼☾☿";
 
 const converted = toBinary(myString);
 const encoded = btoa(converted);
-console.log(encoded);                 // OCY5JjomOyY8Jj4mPyY=
+console.log(encoded); // OCY5JjomOyY8Jj4mPyY=
 ```
 
 물론 이렇게 되면 디코딩한 문자열에 역변환까지 해야 원래의 문자열을 구할 수 있습니다.
@@ -87,7 +87,7 @@ function fromBinary(binary) {
     bytes[i] = binary.charCodeAt(i);
   }
   const charCodes = new Uint16Array(bytes.buffer);
-  let result = '';
+  let result = "";
   for (let i = 0; i < charCodes.length; i++) {
     result += String.fromCharCode(charCodes[i]);
   }
@@ -96,7 +96,7 @@ function fromBinary(binary) {
 
 const decoded = atob(encoded);
 const original = fromBinary(decoded);
-console.log(original);                // ☸☹☺☻☼☾☿
+console.log(original); // ☸☹☺☻☼☾☿
 ```
 
 용어집 {{glossary("Base64")}} 항목, [해결책 #1 – 인코딩 전에 문자열 이스케이핑](/ko/docs/Glossary/Base64#solution_1_%E2%80%93_escaping_the_string_before_encoding_it)의 예제 코드 `utf8_to_b64`와 `b64_to_utf8` 함수도 참고하세요.
diff --git a/files/ko/web/api/cache/index.md b/files/ko/web/api/cache/index.md
index 0ae2d10c5d137f..93ef50bd5f1d22 100644
--- a/files/ko/web/api/cache/index.md
+++ b/files/ko/web/api/cache/index.md
@@ -51,51 +51,52 @@ var CACHE_VERSION = 1;
 
 // Shorthand identifier mapped to specific versioned cache.
 var CURRENT_CACHES = {
-  font: 'font-cache-v' + CACHE_VERSION
+  font: "font-cache-v" + CACHE_VERSION,
 };
 
-self.addEventListener('activate', function(event) {
-  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+self.addEventListener("activate", function (event) {
+  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function (key) {
     return CURRENT_CACHES[key];
   });
 
   // Active worker won't be treated as activated until promise resolves successfully.
   event.waitUntil(
-    caches.keys().then(function(cacheNames) {
+    caches.keys().then(function (cacheNames) {
       return Promise.all(
-        cacheNames.map(function(cacheName) {
+        cacheNames.map(function (cacheName) {
           if (expectedCacheNames.indexOf(cacheName) == -1) {
-            console.log('Deleting out of date cache:', cacheName);
+            console.log("Deleting out of date cache:", cacheName);
 
             return caches.delete(cacheName);
           }
-        })
+        }),
       );
-    })
+    }),
   );
 });
 
-self.addEventListener('fetch', function(event) {
-  console.log('Handling fetch event for', event.request.url);
+self.addEventListener("fetch", function (event) {
+  console.log("Handling fetch event for", event.request.url);
 
   event.respondWith(
-
     // Opens Cache objects that start with 'font'.
-    caches.open(CURRENT_CACHES['font']).then(function(cache) {
-      return cache.match(event.request).then(function(response) {
-        if (response) {
-          console.log(' Found response in cache:', response);
-
-          return response;
-        }
-      }).catch(function(error) {
-
-        // Handles exceptions that arise from match() or fetch().
-        console.error('  Error in fetch handler:', error);
+    caches.open(CURRENT_CACHES["font"]).then(function (cache) {
+      return cache
+        .match(event.request)
+        .then(function (response) {
+          if (response) {
+            console.log(" Found response in cache:", response);
+
+            return response;
+          }
+        })
+        .catch(function (error) {
+          // Handles exceptions that arise from match() or fetch().
+          console.error("  Error in fetch handler:", error);
 
-        throw error;
-      });
-    })
+          throw error;
+        });
+    }),
   );
 });
 ```
diff --git a/files/ko/web/api/canvas_api/index.md b/files/ko/web/api/canvas_api/index.md
index 6507dc8340d6b9..18745eedbc24df 100644
--- a/files/ko/web/api/canvas_api/index.md
+++ b/files/ko/web/api/canvas_api/index.md
@@ -27,10 +27,10 @@ canvas에 초록색 사각형을 그리는 간단한 예시입니다.
 실제 그리기는 {{domxref("CanvasRenderingContext2D")}} 인터페이스를 사용해 수행됩니다. {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 프로퍼티는 사각형을 초록색으로 만듭니다. {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} 메소드는 좌측 상단 코너를 (10, 10) 위치에 놓으며, 너비를 150, 높이를 100으로 지정합니다.
 
 ```js
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
-ctx.fillStyle = 'green';
+ctx.fillStyle = "green";
 ctx.fillRect(10, 10, 150, 100);
 ```
 
diff --git a/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.md b/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.md
index 85e90d3875aad9..08a91b2c4ebe1b 100644
--- a/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.md
+++ b/files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.md
@@ -14,13 +14,13 @@ slug: Web/API/Canvas_API/Manipulating_video_using_canvas
 이 내용을 보여주기 위한 XHTML 문서는 아래와 같습니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <style>
       body {
         background: black;
-        color:#CCCCCC;
+        color: #cccccc;
       }
       #c2 {
         background-image: url(foo.png);
@@ -28,10 +28,10 @@ slug: Web/API/Canvas_API/Manipulating_video_using_canvas
       }
       div {
         float: left;
-        border :1px solid #444444;
-        padding:10px;
+        border: 1px solid #444444;
+        padding: 10px;
         margin: 10px;
-        background:#3B3B3B;
+        background: #3b3b3b;
       }
     </style>
     <script type="text/javascript" src="main.js"></script>
@@ -39,7 +39,7 @@ slug: Web/API/Canvas_API/Manipulating_video_using_canvas
 
   <body onload="processor.doLoad()">
     <div>
-      <video id="video" src="video.ogv" controls="true"/>
+      <video id="video" src="video.ogv" controls="true" />
     </div>
     <div>
       <canvas id="c1" width="160" height="96"></canvas>
@@ -113,21 +113,20 @@ main.js에 있는 자바스크립트 코드는 3개의 메서드로 구성됩니
 아래의 `computeFrame()` 메서드는 프레임 데이터를 가져와서 크로마 키잉 효과를 수행하는 역할을 합니다.
 
 ```js
-  processor.computeFrame = function computeFrame() {
-    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
-    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
-    let l = frame.data.length / 4;
-
-    for (let i = 0; i < l; i++) {
-      let r = frame.data[i * 4 + 0];
-      let g = frame.data[i * 4 + 1];
-      let b = frame.data[i * 4 + 2];
-      if (g > 100 && r > 100 && b < 43)
-        frame.data[i * 4 + 3] = 0;
-    }
-    this.ctx2.putImageData(frame, 0, 0);
-    return;
+processor.computeFrame = function computeFrame() {
+  this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+  let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+  let l = frame.data.length / 4;
+
+  for (let i = 0; i < l; i++) {
+    let r = frame.data[i * 4 + 0];
+    let g = frame.data[i * 4 + 1];
+    let b = frame.data[i * 4 + 2];
+    if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0;
   }
+  this.ctx2.putImageData(frame, 0, 0);
+  return;
+};
 ```
 
 위 과정이 계속 호출 되면, 아래와 같이 비디오 요소에 가장 최근 프레임의 비디오 데이터가 표출됩니다.
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 7800582cdc32b9..ec1b3c1936020b 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
@@ -19,21 +19,21 @@ original_slug: Web/HTML/Canvas/Tutorial/Advanced_animations
 언제나처럼, 우리는 context를 먼저 그려야 한다. 공을 그리기 위해 우리는 캔버스에 그림을 그리기 위한 프로퍼티와 `draw()` 메소드를 가진 `ball` 오브젝트를 생성할 것이다.
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
 
 var ball = {
   x: 100,
   y: 100,
   radius: 25,
-  color: 'blue',
-  draw: function() {
+  color: "blue",
+  draw: function () {
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
     ctx.closePath();
     ctx.fillStyle = this.color;
     ctx.fill();
-  }
+  },
 };
 
 ball.draw();
@@ -46,8 +46,8 @@ ball.draw();
 우리한테는 이제 공이 있다. 이제 이 튜토리얼 [마지막 챕터](/ko/docs/Web/API/Canvas_API/Tutorial/Basic_animations)에서 배웠던 것과 같은 기본 애니메이션을 추가할 준비가 되었다. 다시 한 번, 애니메이션 컨트롤은 {{domxref("window.requestAnimationFrame()")}}가 도와주 것이다. 공은 위치에 속도 벡터를 추가하여 움직일 수 있게 된다. 각각의 프레임에, 우리는{{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}를 캔버스에 주어 오래된 원을 이전 프래임에서 지운다.
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
 var raf;
 
 var ball = {
@@ -56,29 +56,29 @@ var ball = {
   vx: 5,
   vy: 2,
   radius: 25,
-  color: 'blue',
-  draw: function() {
+  color: "blue",
+  draw: function () {
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
     ctx.closePath();
     ctx.fillStyle = this.color;
     ctx.fill();
-  }
+  },
 };
 
 function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
   ball.draw();
   ball.x += ball.vx;
   ball.y += ball.vy;
   raf = window.requestAnimationFrame(draw);
 }
 
-canvas.addEventListener('mouseover', function(e) {
+canvas.addEventListener("mouseover", function (e) {
   raf = window.requestAnimationFrame(draw);
 });
 
-canvas.addEventListener('mouseout', function(e) {
+canvas.addEventListener("mouseout", function (e) {
   window.cancelAnimationFrame(raf);
 });
 
@@ -107,8 +107,8 @@ if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
 ```
 
 ```js hidden
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
 var raf;
 
 var ball = {
@@ -117,39 +117,37 @@ var ball = {
   vx: 5,
   vy: 2,
   radius: 25,
-  color: 'blue',
-  draw: function() {
+  color: "blue",
+  draw: function () {
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
     ctx.closePath();
     ctx.fillStyle = this.color;
     ctx.fill();
-  }
+  },
 };
 
 function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
   ball.draw();
   ball.x += ball.vx;
   ball.y += ball.vy;
 
-  if (ball.y + ball.vy > canvas.height ||
-      ball.y + ball.vy < 0) {
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width ||
-      ball.x + ball.vx < 0) {
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
     ball.vx = -ball.vx;
   }
 
   raf = window.requestAnimationFrame(draw);
 }
 
-canvas.addEventListener('mouseover', function(e) {
+canvas.addEventListener("mouseover", function (e) {
   raf = window.requestAnimationFrame(draw);
 });
 
-canvas.addEventListener('mouseout', function(e) {
+canvas.addEventListener("mouseout", function (e) {
   window.cancelAnimationFrame(raf);
 });
 
@@ -163,8 +161,8 @@ ball.draw();
 움직임을 좀 더 리얼하게 만들기 위해, 우리는 속도를 다음과 같이 줄 겁니다. 예를 들어:
 
 ```js
-ball.vy *= .99;
-ball.vy += .25;
+ball.vy *= 0.99;
+ball.vy += 0.25;
 ```
 
 이것은 각 프레임의 세로 속도를 줄여주어, 공이 결국 바닥에서 튀게 만듭니다.
@@ -174,8 +172,8 @@ ball.vy += .25;
 ```
 
 ```js hidden
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
 var raf;
 
 var ball = {
@@ -184,41 +182,39 @@ var ball = {
   vx: 5,
   vy: 2,
   radius: 25,
-  color: 'blue',
-  draw: function() {
+  color: "blue",
+  draw: function () {
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
     ctx.closePath();
     ctx.fillStyle = this.color;
     ctx.fill();
-  }
+  },
 };
 
 function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
   ball.draw();
   ball.x += ball.vx;
   ball.y += ball.vy;
-  ball.vy *= .99;
-  ball.vy += .25;
+  ball.vy *= 0.99;
+  ball.vy += 0.25;
 
-  if (ball.y + ball.vy > canvas.height ||
-      ball.y + ball.vy < 0) {
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width ||
-      ball.x + ball.vx < 0) {
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
     ball.vx = -ball.vx;
   }
 
   raf = window.requestAnimationFrame(draw);
 }
 
-canvas.addEventListener('mouseover', function(e) {
+canvas.addEventListener("mouseover", function (e) {
   raf = window.requestAnimationFrame(draw);
 });
 
-canvas.addEventListener('mouseout', function(e) {
+canvas.addEventListener("mouseout", function (e) {
   window.cancelAnimationFrame(raf);
 });
 
@@ -232,7 +228,7 @@ ball.draw();
 지금까지 우리는 {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}메소드를 사용해서 이전 프레임을 지웠다. 만약 당신이 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}르 사용하여 약간 투명도를 준다면, 쉽게 후행 효과(Trailing effect)를 만들 수 있을 것이다.
 
 ```js
-ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 ```
 
@@ -241,8 +237,8 @@ ctx.fillRect(0, 0, canvas.width, canvas.height);
 ```
 
 ```js hidden
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
 var raf;
 
 var ball = {
@@ -251,42 +247,40 @@ var ball = {
   vx: 5,
   vy: 2,
   radius: 25,
-  color: 'blue',
-  draw: function() {
+  color: "blue",
+  draw: function () {
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
     ctx.closePath();
     ctx.fillStyle = this.color;
     ctx.fill();
-  }
+  },
 };
 
 function draw() {
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
   ctx.fillRect(0, 0, canvas.width, canvas.height);
   ball.draw();
   ball.x += ball.vx;
   ball.y += ball.vy;
-  ball.vy *= .99;
-  ball.vy += .25;
+  ball.vy *= 0.99;
+  ball.vy += 0.25;
 
-  if (ball.y + ball.vy > canvas.height ||
-      ball.y + ball.vy < 0) {
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width ||
-      ball.x + ball.vx < 0) {
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
     ball.vx = -ball.vx;
   }
 
   raf = window.requestAnimationFrame(draw);
 }
 
-canvas.addEventListener('mouseover', function(e) {
+canvas.addEventListener("mouseover", function (e) {
   raf = window.requestAnimationFrame(draw);
 });
 
-canvas.addEventListener('mouseout', function(e) {
+canvas.addEventListener("mouseout", function (e) {
   window.cancelAnimationFrame(raf);
 });
 
@@ -304,8 +298,8 @@ ball.draw();
 ```
 
 ```js
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
 var raf;
 var running = false;
 
@@ -315,19 +309,19 @@ var ball = {
   vx: 5,
   vy: 1,
   radius: 25,
-  color: 'blue',
-  draw: function() {
+  color: "blue",
+  draw: function () {
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
     ctx.closePath();
     ctx.fillStyle = this.color;
     ctx.fill();
-  }
+  },
 };
 
 function clear() {
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-  ctx.fillRect(0,0,canvas.width,canvas.height);
+  ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
 }
 
 function draw() {
@@ -346,7 +340,7 @@ function draw() {
   raf = window.requestAnimationFrame(draw);
 }
 
-canvas.addEventListener('mousemove', function(e) {
+canvas.addEventListener("mousemove", function (e) {
   if (!running) {
     clear();
     ball.x = e.clientX;
@@ -355,14 +349,14 @@ canvas.addEventListener('mousemove', function(e) {
   }
 });
 
-canvas.addEventListener('click', function(e) {
+canvas.addEventListener("click", function (e) {
   if (!running) {
     raf = window.requestAnimationFrame(draw);
     running = true;
   }
 });
 
-canvas.addEventListener('mouseout', function(e) {
+canvas.addEventListener("mouseout", function (e) {
   window.cancelAnimationFrame(raf);
   running = false;
 });
diff --git a/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
index 85242df1859274..45dbb1e2a9275d 100644
--- a/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
+++ b/files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
@@ -102,8 +102,8 @@ draw();
 ```js
 // 외곽선과 채움 스타일에 투명 적용
 
-ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
-ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
+ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
 ```
 
 `rgba()` 함수는 `rgb()` 함수와 비슷하지만, 인자가 하나 더 있습니다. 마지막 인자는 투명도 값을 설정하는 인자입니다. 올바른 범위는 0.0(완전히 투명)에서 1.0(완전히 불투명)입니다.
@@ -408,11 +408,13 @@ function draw() {
 <table>
   <tr>
     <td><canvas id="canvas" width="150" height="150"></canvas></td>
-    <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br>
+    <td>
+      Change the <code>miterLimit</code> by entering a new value below and
+      clicking the redraw button.<br /><br />
       <form onsubmit="return draw();">
         <label>Miter limit</label>
-        <input type="text" size="3" id="miterLimit"/>
-        <input type="submit" value="Redraw"/>
+        <input type="text" size="3" id="miterLimit" />
+        <input type="submit" value="Redraw" />
       </form>
     </td>
   </tr>
@@ -420,7 +422,9 @@ function draw() {
 ```
 
 ```js hidden
-document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
+document.getElementById("miterLimit").value = document
+  .getElementById("canvas")
+  .getContext("2d").miterLimit;
 draw();
 ```
 
@@ -437,7 +441,7 @@ draw();
 ```
 
 ```js
-var ctx = document.getElementById('canvas').getContext('2d');
+var ctx = document.getElementById("canvas").getContext("2d");
 var offset = 0;
 
 function draw() {
@@ -486,8 +490,8 @@ var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
 
 ```js
 var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-lineargradient.addColorStop(0, 'white');
-lineargradient.addColorStop(1, 'black');
+lineargradient.addColorStop(0, "white");
+lineargradient.addColorStop(1, "black");
 ```
 
 ### `createLinearGradient` 예제
@@ -496,18 +500,18 @@ lineargradient.addColorStop(1, 'black');
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+  var ctx = document.getElementById("canvas").getContext("2d");
 
   // 그레이디언트를 생성한다
   var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
-  lingrad.addColorStop(0, '#00ABEB');
-  lingrad.addColorStop(0.5, '#fff');
-  lingrad.addColorStop(0.5, '#26C000');
-  lingrad.addColorStop(1, '#fff');
+  lingrad.addColorStop(0, "#00ABEB");
+  lingrad.addColorStop(0.5, "#fff");
+  lingrad.addColorStop(0.5, "#26C000");
+  lingrad.addColorStop(1, "#fff");
 
   var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
-  lingrad2.addColorStop(0.5, '#000');
-  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
+  lingrad2.addColorStop(0.5, "#000");
+  lingrad2.addColorStop(1, "rgba(0, 0, 0, 0)");
 
   // 외곽선과 채움 스타일에 그레이디언트를 적용한다
   ctx.fillStyle = lingrad;
@@ -516,7 +520,6 @@ function draw() {
   // 도형을 그린다
   ctx.fillRect(10, 10, 130, 130);
   ctx.strokeRect(50, 50, 50, 50);
-
 }
 ```
 
@@ -540,38 +543,38 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+  var ctx = document.getElementById("canvas").getContext("2d");
 
   // 그라디언트를 생성한다
-  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
-  radgrad.addColorStop(0, '#A7D30C');
-  radgrad.addColorStop(0.9, '#019F62');
-  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
-
-  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
-  radgrad2.addColorStop(0, '#FF5F98');
-  radgrad2.addColorStop(0.75, '#FF0188');
-  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
-
-  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
-  radgrad3.addColorStop(0, '#00C9FF');
-  radgrad3.addColorStop(0.8, '#00B5E2');
-  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
-
-  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
-  radgrad4.addColorStop(0, '#F4F201');
-  radgrad4.addColorStop(0.8, '#E4C700');
-  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
+  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
+  radgrad.addColorStop(0, "#A7D30C");
+  radgrad.addColorStop(0.9, "#019F62");
+  radgrad.addColorStop(1, "rgba(1,159,98,0)");
+
+  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
+  radgrad2.addColorStop(0, "#FF5F98");
+  radgrad2.addColorStop(0.75, "#FF0188");
+  radgrad2.addColorStop(1, "rgba(255,1,136,0)");
+
+  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
+  radgrad3.addColorStop(0, "#00C9FF");
+  radgrad3.addColorStop(0.8, "#00B5E2");
+  radgrad3.addColorStop(1, "rgba(0,201,255,0)");
+
+  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
+  radgrad4.addColorStop(0, "#F4F201");
+  radgrad4.addColorStop(0.8, "#E4C700");
+  radgrad4.addColorStop(1, "rgba(228,199,0,0)");
 
   // 도형을 그린다
   ctx.fillStyle = radgrad4;
-  ctx.fillRect(0,0,150,150);
+  ctx.fillRect(0, 0, 150, 150);
   ctx.fillStyle = radgrad3;
-  ctx.fillRect(0,0,150,150);
+  ctx.fillRect(0, 0, 150, 150);
   ctx.fillStyle = radgrad2;
-  ctx.fillRect(0,0,150,150);
+  ctx.fillRect(0, 0, 150, 150);
   ctx.fillStyle = radgrad;
-  ctx.fillRect(0,0,150,150);
+  ctx.fillRect(0, 0, 150, 150);
 }
 ```
 
@@ -611,8 +614,8 @@ draw();
 
 ```js
 var img = new Image();
-img.src = 'someimage.png';
-var ptrn = ctx.createPattern(img, 'repeat');
+img.src = "someimage.png";
+var ptrn = ctx.createPattern(img, "repeat");
 ```
 
 > **참고:** `drawImage ()` 메서드와 마찬가지로 이 메소드를 호출하기 전에 이미지가 로드되었는지 확인해야합니다. 그렇지 않으면 패턴이 잘못 그려 질 수 있습니다.
@@ -623,19 +626,17 @@ var ptrn = ctx.createPattern(img, 'repeat');
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+  var ctx = document.getElementById("canvas").getContext("2d");
 
   // 패턴으로 사용할 이미지 오브젝트를 생성한다
   var img = new Image();
-  img.src = 'canvas_createpattern.png';
-  img.onload = function() {
-
+  img.src = "canvas_createpattern.png";
+  img.onload = function () {
     // 패턴을 생성한다
-    var ptrn = ctx.createPattern(img,'repeat');
+    var ptrn = ctx.createPattern(img, "repeat");
     ctx.fillStyle = ptrn;
-    ctx.fillRect(0,0,150,150);
-
-  }
+    ctx.fillRect(0, 0, 150, 150);
+  };
 }
 ```
 
@@ -678,7 +679,7 @@ The result looks like this:
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+  var ctx = document.getElementById("canvas").getContext("2d");
 
   ctx.shadowOffsetX = 2;
   ctx.shadowOffsetY = 2;
@@ -718,11 +719,11 @@ In this example we are using the `evenodd` rule.
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+  var ctx = document.getElementById("canvas").getContext("2d");
   ctx.beginPath();
   ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
   ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
-  ctx.fill('evenodd');
+  ctx.fill("evenodd");
 }
 ```
 
diff --git a/files/ko/web/api/canvas_api/tutorial/basic_animations/index.md b/files/ko/web/api/canvas_api/tutorial/basic_animations/index.md
index a1075b658aa437..a156960f28ee30 100644
--- a/files/ko/web/api/canvas_api/tutorial/basic_animations/index.md
+++ b/files/ko/web/api/canvas_api/tutorial/basic_animations/index.md
@@ -13,13 +13,13 @@ original_slug: Web/HTML/Canvas/Tutorial/Basic_animations
 한 장면을 그리려면 아래와 같은 단계를 밟습니다.
 
 1. **캔버스를 비웁니다.**
-    그리려는 도형이 (배경 이미지를 만들 때처럼) 캔버스를 가득 채우는 것이 아니라면, 이전에 그려진 모든 도형을 지울 필요가 있습니다. 가장 쉬운 방법은 `clearRect()` 메소드를 사용하는 것입니다.
+   그리려는 도형이 (배경 이미지를 만들 때처럼) 캔버스를 가득 채우는 것이 아니라면, 이전에 그려진 모든 도형을 지울 필요가 있습니다. 가장 쉬운 방법은 `clearRect()` 메소드를 사용하는 것입니다.
 2. **캔버스 상태를 저장합니다.**
-    캔버스 상태에 영향을 주는 (스타일 변경, 모양 변형 등의) 설정값을 바꾸려고 하고, 바뀐 값을 각 장면마다 사용하려고 한다면, 원래 상태를 저장할 필요가 있습니다.
+   캔버스 상태에 영향을 주는 (스타일 변경, 모양 변형 등의) 설정값을 바꾸려고 하고, 바뀐 값을 각 장면마다 사용하려고 한다면, 원래 상태를 저장할 필요가 있습니다.
 3. **애니메이션할 도형을 그립니다.**
-    실제 장면을 그리는 단계입니다.
+   실제 장면을 그리는 단계입니다.
 4. **캔버스 상태를 복원합니다.**
-    새로운 장면을 그리기 전에 저장된 상태를 복원합니다.
+   새로운 장면을 그리기 전에 저장된 상태를 복원합니다.
 
 ## 애니메이션 제어하기
 
@@ -66,45 +66,51 @@ var myAnimation = new Daemon(null, animateShape, 500, Infinity);
 var sun = new Image();
 var moon = new Image();
 var earth = new Image();
-function init(){
-  sun.src = 'canvas_sun.png';
-  moon.src = 'canvas_moon.png';
-  earth.src = 'canvas_earth.png';
-  setInterval(draw,100);
+function init() {
+  sun.src = "canvas_sun.png";
+  moon.src = "canvas_moon.png";
+  earth.src = "canvas_earth.png";
+  setInterval(draw, 100);
 }
 
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+  var ctx = document.getElementById("canvas").getContext("2d");
 
-  ctx.globalCompositeOperation = 'destination-over';
-  ctx.clearRect(0,0,300,300); // 캔버스를 비운다
+  ctx.globalCompositeOperation = "destination-over";
+  ctx.clearRect(0, 0, 300, 300); // 캔버스를 비운다
 
-  ctx.fillStyle = 'rgba(0,0,0,0.4)';
-  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.fillStyle = "rgba(0,0,0,0.4)";
+  ctx.strokeStyle = "rgba(0,153,255,0.4)";
   ctx.save();
-  ctx.translate(150,150);
+  ctx.translate(150, 150);
 
   // 지구
   var time = new Date();
-  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
-  ctx.translate(105,0);
-  ctx.fillRect(0,-12,50,24); // Shadow
-  ctx.drawImage(earth,-12,-12);
+  ctx.rotate(
+    ((2 * Math.PI) / 60) * time.getSeconds() +
+      ((2 * Math.PI) / 60000) * time.getMilliseconds(),
+  );
+  ctx.translate(105, 0);
+  ctx.fillRect(0, -12, 50, 24); // Shadow
+  ctx.drawImage(earth, -12, -12);
 
   // 달
   ctx.save();
-  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
-  ctx.translate(0,28.5);
-  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.rotate(
+    ((2 * Math.PI) / 6) * time.getSeconds() +
+      ((2 * Math.PI) / 6000) * time.getMilliseconds(),
+  );
+  ctx.translate(0, 28.5);
+  ctx.drawImage(moon, -3.5, -3.5);
   ctx.restore();
 
   ctx.restore();
 
   ctx.beginPath();
-  ctx.arc(150,150,105,0,Math.PI*2,false); // 지구 궤도
+  ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // 지구 궤도
   ctx.stroke();
 
-  ctx.drawImage(sun,0,0,300,300);
+  ctx.drawImage(sun, 0, 0, 300, 300);
 }
 ```
 
@@ -123,19 +129,19 @@ init();
 이 예제에서는, 현재 시각을 보여주는 움직이는 시계를 만듭니다.
 
 ```js
-function init(){
+function init() {
   clock();
-  setInterval(clock,1000);
+  setInterval(clock, 1000);
 }
 
-function clock(){
+function clock() {
   var now = new Date();
-  var ctx = document.getElementById('canvas').getContext('2d');
+  var ctx = document.getElementById("canvas").getContext("2d");
   ctx.save();
-  ctx.clearRect(0,0,150,150);
-  ctx.translate(75,75);
-  ctx.scale(0.4,0.4);
-  ctx.rotate(-Math.PI/2);
+  ctx.clearRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+  ctx.scale(0.4, 0.4);
+  ctx.rotate(-Math.PI / 2);
   ctx.strokeStyle = "black";
   ctx.fillStyle = "white";
   ctx.lineWidth = 8;
@@ -143,11 +149,11 @@ function clock(){
 
   // 시계판 - 시
   ctx.save();
-  for (var i=0;i<12;i++){
+  for (var i = 0; i < 12; i++) {
     ctx.beginPath();
-    ctx.rotate(Math.PI/6);
-    ctx.moveTo(100,0);
-    ctx.lineTo(120,0);
+    ctx.rotate(Math.PI / 6);
+    ctx.moveTo(100, 0);
+    ctx.lineTo(120, 0);
     ctx.stroke();
   }
   ctx.restore();
@@ -155,69 +161,71 @@ function clock(){
   // 시계판 - 분
   ctx.save();
   ctx.lineWidth = 5;
-  for (i=0;i<60;i++){
-    if (i%5!=0) {
+  for (i = 0; i < 60; i++) {
+    if (i % 5 != 0) {
       ctx.beginPath();
-      ctx.moveTo(117,0);
-      ctx.lineTo(120,0);
+      ctx.moveTo(117, 0);
+      ctx.lineTo(120, 0);
       ctx.stroke();
     }
-    ctx.rotate(Math.PI/30);
+    ctx.rotate(Math.PI / 30);
   }
   ctx.restore();
 
   var sec = now.getSeconds();
   var min = now.getMinutes();
-  var hr  = now.getHours();
-  hr = hr>=12 ? hr-12 : hr;
+  var hr = now.getHours();
+  hr = hr >= 12 ? hr - 12 : hr;
 
   ctx.fillStyle = "black";
 
   // 시간 표시 - 시
   ctx.save();
-  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.rotate(
+    hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec,
+  );
   ctx.lineWidth = 14;
   ctx.beginPath();
-  ctx.moveTo(-20,0);
-  ctx.lineTo(80,0);
+  ctx.moveTo(-20, 0);
+  ctx.lineTo(80, 0);
   ctx.stroke();
   ctx.restore();
 
   // 시간 표시 - 분
   ctx.save();
-  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
   ctx.lineWidth = 10;
   ctx.beginPath();
-  ctx.moveTo(-28,0);
-  ctx.lineTo(112,0);
+  ctx.moveTo(-28, 0);
+  ctx.lineTo(112, 0);
   ctx.stroke();
   ctx.restore();
 
   // 시간 표시 - 초
   ctx.save();
-  ctx.rotate(sec * Math.PI/30);
+  ctx.rotate((sec * Math.PI) / 30);
   ctx.strokeStyle = "#D40000";
   ctx.fillStyle = "#D40000";
   ctx.lineWidth = 6;
   ctx.beginPath();
-  ctx.moveTo(-30,0);
-  ctx.lineTo(83,0);
+  ctx.moveTo(-30, 0);
+  ctx.lineTo(83, 0);
   ctx.stroke();
   ctx.beginPath();
-  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
   ctx.fill();
   ctx.beginPath();
-  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
   ctx.stroke();
   ctx.fillStyle = "rgba(0,0,0,0)";
-  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
   ctx.fill();
   ctx.restore();
 
   ctx.beginPath();
   ctx.lineWidth = 14;
-  ctx.strokeStyle = '#325FA2';
-  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.strokeStyle = "#325FA2";
+  ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
   ctx.stroke();
 
   ctx.restore();
@@ -244,7 +252,7 @@ var img = new Image();
 // 변수
 // 스크롤될 이미지, 방향, 속도를 바꾸려면 변수값을 바꾼다.
 
-img.src = 'capitan_meadows,_yosemite_national_park.jpg';
+img.src = "capitan_meadows,_yosemite_national_park.jpg";
 var CanvasXSize = 800;
 var CanvasYSize = 200;
 var speed = 30; // 값이 작을 수록 빨라진다
@@ -261,41 +269,59 @@ var clearX;
 var clearY;
 var ctx;
 
-img.onload = function() {
-    imgW = img.width*scale;
-    imgH = img.height*scale;
-    if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // 캔버스보다 큰 이미지
-    if (imgW > CanvasXSize) { clearX = imgW; } // 캔버스보다 큰 이미지
-    else { clearX = CanvasXSize; }
-    if (imgH > CanvasYSize) { clearY = imgH; } // 캔버스보다 큰 이미지
-    else { clearY = CanvasYSize; }
-    // 캔버스 요소 얻기
-    ctx = document.getElementById('canvas').getContext('2d');
-    // 새로 그리기 속도 설정
-    return setInterval(draw, speed);
-}
+img.onload = function () {
+  imgW = img.width * scale;
+  imgH = img.height * scale;
+  if (imgW > CanvasXSize) {
+    x = CanvasXSize - imgW;
+  } // 캔버스보다 큰 이미지
+  if (imgW > CanvasXSize) {
+    clearX = imgW;
+  } // 캔버스보다 큰 이미지
+  else {
+    clearX = CanvasXSize;
+  }
+  if (imgH > CanvasYSize) {
+    clearY = imgH;
+  } // 캔버스보다 큰 이미지
+  else {
+    clearY = CanvasYSize;
+  }
+  // 캔버스 요소 얻기
+  ctx = document.getElementById("canvas").getContext("2d");
+  // 새로 그리기 속도 설정
+  return setInterval(draw, speed);
+};
 
 function draw() {
-    // 캔버스를 비운다
-    ctx.clearRect(0,0,clearX,clearY);
-    // 이미지가 캔버스보다 작거나 같다면 (If image is <= Canvas Size)
-    if (imgW <= CanvasXSize) {
-        // 재설정, 처음부터 시작
-        if (x > (CanvasXSize)) { x = 0; }
-        // 추가 이미지 그리기
-        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
+  // 캔버스를 비운다
+  ctx.clearRect(0, 0, clearX, clearY);
+  // 이미지가 캔버스보다 작거나 같다면 (If image is <= Canvas Size)
+  if (imgW <= CanvasXSize) {
+    // 재설정, 처음부터 시작
+    if (x > CanvasXSize) {
+      x = 0;
     }
-    // 이미지가 캔버스보다 크다면 (If image is > Canvas Size)
-    else {
-        // 재설정, 처음부터 시작
-        if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
-        // 추가 이미지 그리기
-        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
+    // 추가 이미지 그리기
+    if (x > CanvasXSize - imgW) {
+      ctx.drawImage(img, x - CanvasXSize + 1, y, imgW, imgH);
     }
-    // 이미지 그리기
-    ctx.drawImage(img,x,y,imgW,imgH);
-    // 움직임 정도
-    x += dx;
+  }
+  // 이미지가 캔버스보다 크다면 (If image is > Canvas Size)
+  else {
+    // 재설정, 처음부터 시작
+    if (x > CanvasXSize) {
+      x = CanvasXSize - imgW;
+    }
+    // 추가 이미지 그리기
+    if (x > CanvasXSize - imgW) {
+      ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
+    }
+  }
+  // 이미지 그리기
+  ctx.drawImage(img, x, y, imgW, imgH);
+  // 움직임 정도
+  x += dx;
 }
 ```
 
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 da7f44116a0dbd..9413d70c72007f 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
@@ -36,7 +36,7 @@ original_slug: Web/HTML/Canvas/Tutorial/Basic_usage
 </canvas>
 
 <canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt=""/>
+  <img src="images/clock.png" width="150" height="150" alt="" />
 </canvas>
 ```
 
@@ -55,8 +55,8 @@ original_slug: Web/HTML/Canvas/Tutorial/Basic_usage
 캔버스는 처음에 비어있습니다. 무언가를 표시하기 위해서, 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록 할 필요가 있습니다. {{HTMLElement("canvas")}} 요소는 {{domxref("HTMLCanvasElement.getContext", "getContext()")}} 메서드를 이용해서, 랜더링 컨텍스트와 (렌더링 컨텍스트의) 그리기 함수들을 사용할 수 있습니다. getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라메터를 가집니다. 본 튜토리얼에서 다루고 있는 2D 그래픽의 경우, {{domxref("CanvasRenderingContext2D")}}을 얻기위해 `"2d"`로 지정합니다.
 
 ```js
-var canvas = document.getElementById('tutorial');
-var ctx = canvas.getContext('2d');
+var canvas = document.getElementById("tutorial");
+var ctx = canvas.getContext("2d");
 ```
 
 첫 번째 줄의 스크립트는 {{domxref ( "document.getElementById()")}} 메서드를 호출하여 {{HTMLElement ( "canvas")}} 요소를 표시할 DOM을 검색합니다. 요소가 있으면 `getContext()` 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있습니다.
@@ -66,10 +66,10 @@ var ctx = canvas.getContext('2d');
 대체 콘텐츠는 {{HTMLElement ( "canvas")}}를 지원하지 않는 브라우저에 표시됩니다. 스크립트 역시 간단하게 `getContext()` 메소드의 존재 여부를 테스트함으로써 프로그래밍 방식으로 지원하는지를 확인할 수 있습니다. 위의 코드 예제는 다음과 같이 될 수 있습니다:
 
 ```js
-var canvas = document.getElementById('tutorial');
+var canvas = document.getElementById("tutorial");
 
-if (canvas.getContext){
-  var ctx = canvas.getContext('2d');
+if (canvas.getContext) {
+  var ctx = canvas.getContext("2d");
   // drawing code here
 } else {
   // canvas-unsupported code here
@@ -83,21 +83,23 @@ if (canvas.getContext){
 > **참고:** **알아두기:** HTML 내에 스크립트(script)를 사용하는것은 좋은 연습 방법이 아닙니다. 다음의 예시에서는 간결하게 나타내기 위해 사용 한 것입니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8"/>
+    <meta charset="utf-8" />
     <title>Canvas tutorial</title>
     <script type="text/javascript">
-      function draw(){
-        var canvas = document.getElementById('tutorial');
-        if (canvas.getContext){
-          var ctx = canvas.getContext('2d');
+      function draw() {
+        var canvas = document.getElementById("tutorial");
+        if (canvas.getContext) {
+          var ctx = canvas.getContext("2d");
         }
       }
     </script>
     <style type="text/css">
-      canvas { border: 1px solid black; }
+      canvas {
+        border: 1px solid black;
+      }
     </style>
   </head>
   <body onload="draw();">
@@ -117,28 +119,28 @@ if (canvas.getContext){
 먼저 두 개의 직사각형을 그린 간단한 예제를 보도록하겠습니다. 그 중 하나는 투명도(alpha transparency)를가집니다. 나중에 이 예제가 어떻게 작동하는지 자세히 살펴 보겠습니다.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
- <head>
-  <meta charset="utf-8"/>
-  <script type="application/javascript">
-    function draw() {
-      var canvas = document.getElementById("canvas");
-      if (canvas.getContext) {
-        var ctx = canvas.getContext("2d");
-
-        ctx.fillStyle = "rgb(200,0,0)";
-        ctx.fillRect (10, 10, 50, 50);
-
-        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
-        ctx.fillRect (30, 30, 50, 50);
+  <head>
+    <meta charset="utf-8" />
+    <script type="application/javascript">
+      function draw() {
+        var canvas = document.getElementById("canvas");
+        if (canvas.getContext) {
+          var ctx = canvas.getContext("2d");
+
+          ctx.fillStyle = "rgb(200,0,0)";
+          ctx.fillRect(10, 10, 50, 50);
+
+          ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+          ctx.fillRect(30, 30, 50, 50);
+        }
       }
-    }
-  </script>
- </head>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
+    </script>
+  </head>
+  <body onload="draw();">
+    <canvas id="canvas" width="150" height="150"></canvas>
+  </body>
 </html>
 ```
 
diff --git a/files/ko/web/api/canvas_api/tutorial/compositing/example/index.md b/files/ko/web/api/canvas_api/tutorial/compositing/example/index.md
index 21ce1976929d13..cd25b1439d5b8b 100644
--- a/files/ko/web/api/canvas_api/tutorial/compositing/example/index.md
+++ b/files/ko/web/api/canvas_api/tutorial/compositing/example/index.md
@@ -17,40 +17,62 @@ original_slug: Web/HTML/Canvas/Tutorial/Compositing/Example
 ```js
 var canvas1 = document.createElement("canvas");
 var canvas2 = document.createElement("canvas");
-var gco = [ 'source-over','source-in','source-out','source-atop',
-            'destination-over','destination-in','destination-out','destination-atop',
-            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
-            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
-            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
-          ].reverse();
+var gco = [
+  "source-over",
+  "source-in",
+  "source-out",
+  "source-atop",
+  "destination-over",
+  "destination-in",
+  "destination-out",
+  "destination-atop",
+  "lighter",
+  "copy",
+  "xor",
+  "multiply",
+  "screen",
+  "overlay",
+  "darken",
+  "lighten",
+  "color-dodge",
+  "color-burn",
+  "hard-light",
+  "soft-light",
+  "difference",
+  "exclusion",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity",
+].reverse();
 var gcoText = [
-'기본 설정으로, 새로운 도형이 원래 도형 위에 그려집니다.',
-'새로운 도형이 원래 도형과 겹치는 부분에만 그려지며, 나머지는 투명하게 설정됩니다.',
-'새로운 도형이 원래 도형과 겹치지 않는 부분에만 그려집니다.',
-'새로운 도형이 원래 도형과 겹치는 부분에만 그려집니다.',
-'새로운 도형이 원래 도형 아래에 그려집니다.',
-'원래 도형 중 새로운 도형과 겹치는 부분이 유지되며, 나머지는 투명하게 설정됩니다.',
-'원래 도형 중 새로운 도형과 겹치지 않는 부분이 유지됩니다.',
-'원래 도형 중 새로운 도형과 겹치는 부분만 유지됩니다. 새로운 도형은 원래 도형 아래에 그려집니다.',
-'두 도형이 겹치는 곳의 색상이 두 색상값을 합한 값으로 결정됩니다.',
-'새로운 도형만 그려집니다.',
-'두 도형이 겹치는 곳이 투명하게 변하며, 나머지는 평범하게 그려집니다.',
-'위쪽 레이어의 픽셀값이 아래쪽 레이어의 해당하는 픽셀값과 곱해지며, 결과적으로 어두운 이미지가 생성됩니다.',
-'픽셀값을 뒤집고 곱한 다음 도로 뒤집습니다. 결과적으로 밝은 이미지가 생성됩니다(multiply의 반대).',
-'multiply와 screen의 조합입니다. 아래쪽 레이어의 어두운 부분은 더 어두워지고, 밝은 부분은 더 밝아집니다.',
-'두 레이어 중 어두운 픽셀값을 취합니다.',
-'두 레이어 중 밝은 픽셀값을 취합니다.',
-'아래쪽 레이어의 픽셀값을 위쪽 레이어의 뒤집힌 픽셀값으로 나눕니다.',
-'아래쪽 레이어의 뒤집힌 픽셀값을 위쪽 레이어의 픽셀값으로 나누고, 그 값을 도로 뒤집습니다.',
-'overlay와 같이 multiply와 screen의 조합이지만, 위아래 레이어의 순서가 바뀐 상태입니다.',
-'조금 더 부드러운 hard-light입니다. 완전한 검은색/흰색에서 무조건 완전한 검은색/흰색이 나오지 않습니다.',
-'한쪽 레이어의 픽셀값에서 다른 쪽 레이어의 픽셀값을 뺍니다. 빼는 순서는 결과값이 양수가 나오는 순서입니다.',
-'difference와 비슷하지만 대비가 덜합니다.',
-'아래쪽 레이어의 채도(chroma)와 명도(luma)를 보존하고 위쪽 레이어의 색상(hue)을 적용합니다.',
-'아래쪽 레이어의 색상과 명도를 보존하고 위쪽 레이어의 채도를 적용합니다.',
-'아래쪽 레이어의 명도를 보존하고 위쪽 레이어의 색상과 채도를 적용합니다.',
-'아래쪽 레이어의 색상과 채도를 보존하고 위쪽 레이어의 명도를 적용합니다.'
-          ].reverse();
+  "기본 설정으로, 새로운 도형이 원래 도형 위에 그려집니다.",
+  "새로운 도형이 원래 도형과 겹치는 부분에만 그려지며, 나머지는 투명하게 설정됩니다.",
+  "새로운 도형이 원래 도형과 겹치지 않는 부분에만 그려집니다.",
+  "새로운 도형이 원래 도형과 겹치는 부분에만 그려집니다.",
+  "새로운 도형이 원래 도형 아래에 그려집니다.",
+  "원래 도형 중 새로운 도형과 겹치는 부분이 유지되며, 나머지는 투명하게 설정됩니다.",
+  "원래 도형 중 새로운 도형과 겹치지 않는 부분이 유지됩니다.",
+  "원래 도형 중 새로운 도형과 겹치는 부분만 유지됩니다. 새로운 도형은 원래 도형 아래에 그려집니다.",
+  "두 도형이 겹치는 곳의 색상이 두 색상값을 합한 값으로 결정됩니다.",
+  "새로운 도형만 그려집니다.",
+  "두 도형이 겹치는 곳이 투명하게 변하며, 나머지는 평범하게 그려집니다.",
+  "위쪽 레이어의 픽셀값이 아래쪽 레이어의 해당하는 픽셀값과 곱해지며, 결과적으로 어두운 이미지가 생성됩니다.",
+  "픽셀값을 뒤집고 곱한 다음 도로 뒤집습니다. 결과적으로 밝은 이미지가 생성됩니다(multiply의 반대).",
+  "multiply와 screen의 조합입니다. 아래쪽 레이어의 어두운 부분은 더 어두워지고, 밝은 부분은 더 밝아집니다.",
+  "두 레이어 중 어두운 픽셀값을 취합니다.",
+  "두 레이어 중 밝은 픽셀값을 취합니다.",
+  "아래쪽 레이어의 픽셀값을 위쪽 레이어의 뒤집힌 픽셀값으로 나눕니다.",
+  "아래쪽 레이어의 뒤집힌 픽셀값을 위쪽 레이어의 픽셀값으로 나누고, 그 값을 도로 뒤집습니다.",
+  "overlay와 같이 multiply와 screen의 조합이지만, 위아래 레이어의 순서가 바뀐 상태입니다.",
+  "조금 더 부드러운 hard-light입니다. 완전한 검은색/흰색에서 무조건 완전한 검은색/흰색이 나오지 않습니다.",
+  "한쪽 레이어의 픽셀값에서 다른 쪽 레이어의 픽셀값을 뺍니다. 빼는 순서는 결과값이 양수가 나오는 순서입니다.",
+  "difference와 비슷하지만 대비가 덜합니다.",
+  "아래쪽 레이어의 채도(chroma)와 명도(luma)를 보존하고 위쪽 레이어의 색상(hue)을 적용합니다.",
+  "아래쪽 레이어의 색상과 명도를 보존하고 위쪽 레이어의 채도를 적용합니다.",
+  "아래쪽 레이어의 명도를 보존하고 위쪽 레이어의 색상과 채도를 적용합니다.",
+  "아래쪽 레이어의 색상과 채도를 보존하고 위쪽 레이어의 명도를 적용합니다.",
+].reverse();
 var width = 320;
 var height = 340;
 ```
@@ -60,22 +82,22 @@ var height = 340;
 페이지를 불러오고 나면 다음 코드에서 예제를 준비하고 실행합니다:
 
 ```js
-window.onload = function() {
-    // lum in sRGB
-    var lum = {
-        r: 0.33,
-        g: 0.33,
-        b: 0.33
-    };
-    // 캔버스 크기 변경
-    canvas1.width = width;
-    canvas1.height = height;
-    canvas2.width = width;
-    canvas2.height = height;
-    lightMix()
-    colorSphere();
-    runComposite();
-    return;
+window.onload = function () {
+  // lum in sRGB
+  var lum = {
+    r: 0.33,
+    g: 0.33,
+    b: 0.33,
+  };
+  // 캔버스 크기 변경
+  canvas1.width = width;
+  canvas1.height = height;
+  canvas2.width = width;
+  canvas2.height = height;
+  lightMix();
+  colorSphere();
+  runComposite();
+  return;
 };
 ```
 
@@ -83,75 +105,75 @@ window.onload = function() {
 
 ```js
 function createCanvas() {
-    var canvas = document.createElement("canvas");
-    canvas.style.background = "url("+op_8x8.data+")";
-    canvas.style.border = "1px solid #000";
-    canvas.style.margin = "5px";
-    canvas.width = width/2;
-    canvas.height = height/2;
-    return canvas;
+  var canvas = document.createElement("canvas");
+  canvas.style.background = "url(" + op_8x8.data + ")";
+  canvas.style.border = "1px solid #000";
+  canvas.style.margin = "5px";
+  canvas.width = width / 2;
+  canvas.height = height / 2;
+  return canvas;
 }
 
 function runComposite() {
-    var dl = document.createElement("dl");
-    document.body.appendChild(dl);
-    while(gco.length) {
-        var pop = gco.pop();
-        var dt = document.createElement("dt");
-        dt.textContent = pop;
-        dl.appendChild(dt);
-        var dd = document.createElement("dd");
-        var p = document.createElement("p");
-        p.textContent = gcoText.pop();
-        dd.appendChild(p);
+  var dl = document.createElement("dl");
+  document.body.appendChild(dl);
+  while (gco.length) {
+    var pop = gco.pop();
+    var dt = document.createElement("dt");
+    dt.textContent = pop;
+    dl.appendChild(dt);
+    var dd = document.createElement("dd");
+    var p = document.createElement("p");
+    p.textContent = gcoText.pop();
+    dd.appendChild(p);
 
-        var canvasToDrawOn = createCanvas();
-        var canvasToDrawFrom = createCanvas();
-        var canvasToDrawResult = createCanvas();
+    var canvasToDrawOn = createCanvas();
+    var canvasToDrawFrom = createCanvas();
+    var canvasToDrawResult = createCanvas();
 
-        var ctx = canvasToDrawResult.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
-        ctx.globalCompositeOperation = pop;
-        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
-        ctx.globalCompositeOperation = "source-over";
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText(pop, 5, height/2 - 5);
-        ctx.restore();
+    var ctx = canvasToDrawResult.getContext("2d");
+    ctx.clearRect(0, 0, width, height);
+    ctx.save();
+    ctx.drawImage(canvas1, 0, 0, width / 2, height / 2);
+    ctx.globalCompositeOperation = pop;
+    ctx.drawImage(canvas2, 0, 0, width / 2, height / 2);
+    ctx.globalCompositeOperation = "source-over";
+    ctx.fillStyle = "rgba(0,0,0,0.8)";
+    ctx.fillRect(0, height / 2 - 20, width / 2, 20);
+    ctx.fillStyle = "#FFF";
+    ctx.font = "14px arial";
+    ctx.fillText(pop, 5, height / 2 - 5);
+    ctx.restore();
 
-        var ctx = canvasToDrawOn.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText('기존 도형', 5, height/2 - 5);
-        ctx.restore();
+    var ctx = canvasToDrawOn.getContext("2d");
+    ctx.clearRect(0, 0, width, height);
+    ctx.save();
+    ctx.drawImage(canvas1, 0, 0, width / 2, height / 2);
+    ctx.fillStyle = "rgba(0,0,0,0.8)";
+    ctx.fillRect(0, height / 2 - 20, width / 2, 20);
+    ctx.fillStyle = "#FFF";
+    ctx.font = "14px arial";
+    ctx.fillText("기존 도형", 5, height / 2 - 5);
+    ctx.restore();
 
-        var ctx = canvasToDrawFrom.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText('새로운 도형', 5, height/2 - 5);
-        ctx.restore();
+    var ctx = canvasToDrawFrom.getContext("2d");
+    ctx.clearRect(0, 0, width, height);
+    ctx.save();
+    ctx.drawImage(canvas2, 0, 0, width / 2, height / 2);
+    ctx.fillStyle = "rgba(0,0,0,0.8)";
+    ctx.fillRect(0, height / 2 - 20, width / 2, 20);
+    ctx.fillStyle = "#FFF";
+    ctx.font = "14px arial";
+    ctx.fillText("새로운 도형", 5, height / 2 - 5);
+    ctx.restore();
 
-        dd.appendChild(canvasToDrawOn);
-        dd.appendChild(canvasToDrawFrom);
-        dd.appendChild(canvasToDrawResult);
+    dd.appendChild(canvasToDrawOn);
+    dd.appendChild(canvasToDrawFrom);
+    dd.appendChild(canvasToDrawResult);
 
-        dl.appendChild(dd);
-    }
-};
+    dl.appendChild(dd);
+  }
+}
 ```
 
 ### 보조 함수
@@ -159,60 +181,68 @@ function runComposite() {
 이 프로그램에서는 몇몇 보조 함수를 사용합니다.
 
 ```js
-var lightMix = function() {
-    var ctx = canvas2.getContext("2d");
-    ctx.save();
-    ctx.globalCompositeOperation = "lighter";
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(255,0,0,1)";
-    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
-    ctx.fill()
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(0,0,255,1)";
-    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
-    ctx.fill()
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(0,255,0,1)";
-    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
-    ctx.fill();
-    ctx.restore();
-    ctx.beginPath();
-    ctx.fillStyle = "#f00";
-    ctx.fillRect(0,0,30,30)
-    ctx.fill();
+var lightMix = function () {
+  var ctx = canvas2.getContext("2d");
+  ctx.save();
+  ctx.globalCompositeOperation = "lighter";
+  ctx.beginPath();
+  ctx.fillStyle = "rgba(255,0,0,1)";
+  ctx.arc(100, 200, 100, Math.PI * 2, 0, false);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.fillStyle = "rgba(0,0,255,1)";
+  ctx.arc(220, 200, 100, Math.PI * 2, 0, false);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.fillStyle = "rgba(0,255,0,1)";
+  ctx.arc(160, 100, 100, Math.PI * 2, 0, false);
+  ctx.fill();
+  ctx.restore();
+  ctx.beginPath();
+  ctx.fillStyle = "#f00";
+  ctx.fillRect(0, 0, 30, 30);
+  ctx.fill();
 };
 ```
 
 ```js
-var colorSphere = function(element) {
-    var ctx = canvas1.getContext("2d");
-    var width = 360;
-    var halfWidth = width / 2;
-    var rotate = (1 / 360) * Math.PI * 2; // per degree
-    var offset = 0; // scrollbar offset
-    var oleft = -20;
-    var otop = -20;
-    for (var n = 0; n <= 359; n ++) {
-        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
-        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
-        gradient.addColorStop(0, "rgba(0,0,0,0)");
-        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
-        gradient.addColorStop(1, "rgba(255,255,255,1)");
-        ctx.beginPath();
-        ctx.moveTo(oleft + halfWidth, otop);
-        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
-        ctx.lineTo(oleft + halfWidth + 6, otop);
-        ctx.fillStyle = gradient;
-        ctx.fill();
-        ctx.translate(oleft + halfWidth, otop + halfWidth);
-        ctx.rotate(rotate);
-        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
-    }
+var colorSphere = function (element) {
+  var ctx = canvas1.getContext("2d");
+  var width = 360;
+  var halfWidth = width / 2;
+  var rotate = (1 / 360) * Math.PI * 2; // per degree
+  var offset = 0; // scrollbar offset
+  var oleft = -20;
+  var otop = -20;
+  for (var n = 0; n <= 359; n++) {
+    var gradient = ctx.createLinearGradient(
+      oleft + halfWidth,
+      otop,
+      oleft + halfWidth,
+      otop + halfWidth,
+    );
+    var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+    gradient.addColorStop(0, "rgba(0,0,0,0)");
+    gradient.addColorStop(
+      0.7,
+      "rgba(" + color.R + "," + color.G + "," + color.B + ",1)",
+    );
+    gradient.addColorStop(1, "rgba(255,255,255,1)");
     ctx.beginPath();
-    ctx.fillStyle = "#00f";
-    ctx.fillRect(15,15,30,30)
+    ctx.moveTo(oleft + halfWidth, otop);
+    ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+    ctx.lineTo(oleft + halfWidth + 6, otop);
+    ctx.fillStyle = gradient;
     ctx.fill();
-    return ctx.canvas;
+    ctx.translate(oleft + halfWidth, otop + halfWidth);
+    ctx.rotate(rotate);
+    ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+  }
+  ctx.beginPath();
+  ctx.fillStyle = "#00f";
+  ctx.fillRect(15, 15, 30, 30);
+  ctx.fill();
+  return ctx.canvas;
 };
 ```
 
@@ -220,76 +250,78 @@ var colorSphere = function(element) {
 // HSV (1978) = H: Hue / S: Saturation / V: Value
 Color = {};
 Color.HSV_RGB = function (o) {
-    var H = o.H / 360,
-        S = o.S / 100,
-        V = o.V / 100,
-        R, G, B;
-    var A, B, C, D;
-    if (S == 0) {
-        R = G = B = Math.round(V * 255);
-    } else {
-        if (H >= 1) H = 0;
-        H = 6 * H;
-        D = H - Math.floor(H);
-        A = Math.round(255 * V * (1 - S));
-        B = Math.round(255 * V * (1 - (S * D)));
-        C = Math.round(255 * V * (1 - (S * (1 - D))));
-        V = Math.round(255 * V);
-        switch (Math.floor(H)) {
-            case 0:
-                R = V;
-                G = C;
-                B = A;
-                break;
-            case 1:
-                R = B;
-                G = V;
-                B = A;
-                break;
-            case 2:
-                R = A;
-                G = V;
-                B = C;
-                break;
-            case 3:
-                R = A;
-                G = B;
-                B = V;
-                break;
-            case 4:
-                R = C;
-                G = A;
-                B = V;
-                break;
-            case 5:
-                R = V;
-                G = A;
-                B = B;
-                break;
-        }
+  var H = o.H / 360,
+    S = o.S / 100,
+    V = o.V / 100,
+    R,
+    G,
+    B;
+  var A, B, C, D;
+  if (S == 0) {
+    R = G = B = Math.round(V * 255);
+  } else {
+    if (H >= 1) H = 0;
+    H = 6 * H;
+    D = H - Math.floor(H);
+    A = Math.round(255 * V * (1 - S));
+    B = Math.round(255 * V * (1 - S * D));
+    C = Math.round(255 * V * (1 - S * (1 - D)));
+    V = Math.round(255 * V);
+    switch (Math.floor(H)) {
+      case 0:
+        R = V;
+        G = C;
+        B = A;
+        break;
+      case 1:
+        R = B;
+        G = V;
+        B = A;
+        break;
+      case 2:
+        R = A;
+        G = V;
+        B = C;
+        break;
+      case 3:
+        R = A;
+        G = B;
+        B = V;
+        break;
+      case 4:
+        R = C;
+        G = A;
+        B = V;
+        break;
+      case 5:
+        R = V;
+        G = A;
+        B = B;
+        break;
     }
-    return {
-        R: R,
-        G: G,
-        B: B
-    };
+  }
+  return {
+    R: R,
+    G: G,
+    B: B,
+  };
 };
 
 var createInterlace = function (size, color1, color2) {
-    var proto = document.createElement("canvas").getContext("2d");
-    proto.canvas.width = size * 2;
-    proto.canvas.height = size * 2;
-    proto.fillStyle = color1; // top-left
-    proto.fillRect(0, 0, size, size);
-    proto.fillStyle = color2; // top-right
-    proto.fillRect(size, 0, size, size);
-    proto.fillStyle = color2; // bottom-left
-    proto.fillRect(0, size, size, size);
-    proto.fillStyle = color1; // bottom-right
-    proto.fillRect(size, size, size, size);
-    var pattern = proto.createPattern(proto.canvas, "repeat");
-    pattern.data = proto.canvas.toDataURL();
-    return pattern;
+  var proto = document.createElement("canvas").getContext("2d");
+  proto.canvas.width = size * 2;
+  proto.canvas.height = size * 2;
+  proto.fillStyle = color1; // top-left
+  proto.fillRect(0, 0, size, size);
+  proto.fillStyle = color2; // top-right
+  proto.fillRect(size, 0, size, size);
+  proto.fillStyle = color2; // bottom-left
+  proto.fillRect(0, size, size, size);
+  proto.fillStyle = color1; // bottom-right
+  proto.fillRect(size, size, size, size);
+  var pattern = proto.createPattern(proto.canvas, "repeat");
+  pattern.data = proto.canvas.toDataURL();
+  return pattern;
 };
 
 var op_8x8 = createInterlace(8, "#FFF", "#eee");
diff --git a/files/ko/web/api/canvas_api/tutorial/compositing/index.md b/files/ko/web/api/canvas_api/tutorial/compositing/index.md
index b6db685bf8414d..b28c65e6bd1274 100644
--- a/files/ko/web/api/canvas_api/tutorial/compositing/index.md
+++ b/files/ko/web/api/canvas_api/tutorial/compositing/index.md
@@ -38,45 +38,46 @@ original_slug: Web/HTML/Canvas/Tutorial/Compositing
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.fillRect(0,0,150,150);
-  ctx.translate(75,75);
+  var ctx = document.getElementById("canvas").getContext("2d");
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
 
   // 동그란 모양의 잘라내기 경로를 생성한다
   ctx.beginPath();
-  ctx.arc(0,0,60,0,Math.PI*2,true);
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
   ctx.clip();
 
   // 배경을 그린다
-  var lingrad = ctx.createLinearGradient(0,-75,0,75);
-  lingrad.addColorStop(0, '#232256');
-  lingrad.addColorStop(1, '#143778');
+  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  lingrad.addColorStop(0, "#232256");
+  lingrad.addColorStop(1, "#143778");
 
   ctx.fillStyle = lingrad;
-  ctx.fillRect(-75,-75,150,150);
+  ctx.fillRect(-75, -75, 150, 150);
 
   // 별을 그린다
-  for (var j=1;j<50;j++){
+  for (var j = 1; j < 50; j++) {
     ctx.save();
-    ctx.fillStyle = '#fff';
-    ctx.translate(75-Math.floor(Math.random()*150),
-                  75-Math.floor(Math.random()*150));
-    drawStar(ctx,Math.floor(Math.random()*4)+2);
+    ctx.fillStyle = "#fff";
+    ctx.translate(
+      75 - Math.floor(Math.random() * 150),
+      75 - Math.floor(Math.random() * 150),
+    );
+    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
     ctx.restore();
   }
-
 }
 
-function drawStar(ctx,r){
+function drawStar(ctx, r) {
   ctx.save();
-  ctx.beginPath()
-  ctx.moveTo(r,0);
-  for (var i=0;i<9;i++){
-    ctx.rotate(Math.PI/5);
-    if(i%2 == 0) {
-      ctx.lineTo((r/0.525731)*0.200811,0);
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (var i = 0; i < 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 == 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
     } else {
-      ctx.lineTo(r,0);
+      ctx.lineTo(r, 0);
     }
   }
   ctx.closePath();
diff --git a/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.md b/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.md
index 5b9a1ea552332a..d52e23026c9ac2 100644
--- a/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.md
+++ b/files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.md
@@ -33,17 +33,17 @@ original_slug: Web/HTML/Canvas/Tutorial/Drawing_shapes
 
 ```html hidden
 <html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
+  <body onload="draw();">
+    <canvas id="canvas" width="150" height="150"></canvas>
+  </body>
 </html>
 ```
 
 ```js
 function draw() {
-  var canvas = document.getElementById('canvas');
+  var canvas = document.getElementById("canvas");
   if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
+    var ctx = canvas.getContext("2d");
 
     ctx.fillRect(25, 25, 100, 100);
     ctx.clearRect(45, 45, 60, 60);
@@ -99,17 +99,17 @@ function draw() {
 
 ```html hidden
 <html>
- <body onload="draw();">
-   <canvas id="canvas" width="100" height="100"></canvas>
- </body>
+  <body onload="draw();">
+    <canvas id="canvas" width="100" height="100"></canvas>
+  </body>
 </html>
 ```
 
 ```js
 function draw() {
-  var canvas = document.getElementById('canvas');
+  var canvas = document.getElementById("canvas");
   if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
+    var ctx = canvas.getContext("2d");
 
     ctx.beginPath();
     ctx.moveTo(75, 50);
@@ -137,26 +137,26 @@ function draw() {
 
 ```html hidden
 <html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
+  <body onload="draw();">
+    <canvas id="canvas" width="150" height="150"></canvas>
+  </body>
 </html>
 ```
 
 ```js
 function draw() {
-  var canvas = document.getElementById('canvas');
+  var canvas = document.getElementById("canvas");
   if (canvas.getContext) {
-     var ctx = canvas.getContext('2d');
+    var ctx = canvas.getContext("2d");
 
     ctx.beginPath();
     ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
     ctx.moveTo(110, 75);
-    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
+    ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
     ctx.moveTo(65, 65);
-    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
+    ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
     ctx.moveTo(95, 65);
-    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
+    ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
     ctx.stroke();
   }
 }
@@ -183,17 +183,17 @@ function draw() {
 
 ```html hidden
 <html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
+  <body onload="draw();">
+    <canvas id="canvas" width="150" height="150"></canvas>
+  </body>
 </html>
 ```
 
 ```js
 function draw() {
-  var canvas = document.getElementById('canvas');
+  var canvas = document.getElementById("canvas");
   if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
+    var ctx = canvas.getContext("2d");
 
     // Filled triangle
     ctx.beginPath();
@@ -244,9 +244,9 @@ function draw() {
 
 ```html hidden
 <html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="200"></canvas>
- </body>
+  <body onload="draw();">
+    <canvas id="canvas" width="150" height="200"></canvas>
+  </body>
 </html>
 ```
 
@@ -304,17 +304,17 @@ function draw() {
 
 ```html hidden
 <html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
+  <body onload="draw();">
+    <canvas id="canvas" width="150" height="150"></canvas>
+  </body>
 </html>
 ```
 
 ```js
 function draw() {
-  var canvas = document.getElementById('canvas');
+  var canvas = document.getElementById("canvas");
   if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
+    var ctx = canvas.getContext("2d");
 
     // Quadratric curves example
     ctx.beginPath();
@@ -338,17 +338,17 @@ function draw() {
 
 ```html hidden
 <html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
+  <body onload="draw();">
+    <canvas id="canvas" width="150" height="150"></canvas>
+  </body>
 </html>
 ```
 
 ```js
 function draw() {
-  var canvas = document.getElementById('canvas');
+  var canvas = document.getElementById("canvas");
   if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
+    var ctx = canvas.getContext("2d");
 
     // Cubic curves example
     ctx.beginPath();
@@ -381,17 +381,17 @@ function draw() {
 
 ```html hidden
 <html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
+  <body onload="draw();">
+    <canvas id="canvas" width="150" height="150"></canvas>
+  </body>
 </html>
 ```
 
 ```js
 function draw() {
-  var canvas = document.getElementById('canvas');
+  var canvas = document.getElementById("canvas");
   if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
+    var ctx = canvas.getContext("2d");
 
     roundedRect(ctx, 12, 12, 150, 150, 15);
     roundedRect(ctx, 19, 19, 150, 150, 9);
@@ -431,7 +431,7 @@ function draw() {
     ctx.lineTo(83, 116);
     ctx.fill();
 
-    ctx.fillStyle = 'white';
+    ctx.fillStyle = "white";
     ctx.beginPath();
     ctx.moveTo(91, 96);
     ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
@@ -445,7 +445,7 @@ function draw() {
     ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
     ctx.fill();
 
-    ctx.fillStyle = 'black';
+    ctx.fillStyle = "black";
     ctx.beginPath();
     ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
     ctx.fill();
@@ -464,7 +464,7 @@ function roundedRect(ctx, x, y, width, height, radius) {
   ctx.lineTo(x, y + height - radius);
   ctx.arcTo(x, y + height, x + radius, y + height, radius);
   ctx.lineTo(x + width - radius, y + height);
-  ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
+  ctx.arcTo(x + width, y + height, x + width, y + height - radius, radius);
   ctx.lineTo(x + width, y + radius);
   ctx.arcTo(x + width, y, x + width - radius, y, radius);
   ctx.lineTo(x + radius, y);
@@ -491,9 +491,9 @@ function roundedRect(ctx, x, y, width, height, radius) {
   - : **`Path2D()`** 생성자는 새로운 `Path2D` 객체를 반환합니다. 선택적으로 다른 경로를 인수로 받거나(복사본을 생성), SVG 경로 데이터로 구성된 문자열을 받아서 객체로 반환합니다.
 
 ```js
-new Path2D();     // empty path object
+new Path2D(); // empty path object
 new Path2D(path); // copy from another Path2D object
-new Path2D(d);    // path from SVG path data
+new Path2D(d); // path from SVG path data
 ```
 
 `moveTo`, `rect`, `arc` 혹은 `quadraticCurveTo` 등과 같은 모든 경로 메소드 ([path methods](/ko/docs/Web/API/CanvasRenderingContext2D#Paths))들은 `Path2D` 객체에서 사용 가능합니다.
@@ -509,17 +509,17 @@ new Path2D(d);    // path from SVG path data
 
 ```html hidden
 <html>
- <body onload="draw();">
-   <canvas id="canvas" width="130" height="100"></canvas>
- </body>
+  <body onload="draw();">
+    <canvas id="canvas" width="130" height="100"></canvas>
+  </body>
 </html>
 ```
 
 ```js
 function draw() {
-  var canvas = document.getElementById('canvas');
+  var canvas = document.getElementById("canvas");
   if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
+    var ctx = canvas.getContext("2d");
 
     var rectangle = new Path2D();
     rectangle.rect(10, 10, 50, 50);
@@ -543,7 +543,7 @@ function draw() {
 path는 (`M10 10`) 점으로 이동한 다음, 수평하게 오른쪽으로 으로 80 포인트 (`h 80`) 만큼 이동합니다. 이후 수직으로 80포인트 (v 80) 내려간 다음, 80 포인트 왼쪽으로 (`h -80`) 수평하게 이동하고 다시 시작점 (`z`)으로 돌아갑니다. 예시는 [이곳](/ko/docs/Web/API/Path2D.Path2D#Using_SVG_paths)( `Path2D` constructor )에서 확인하실 수 있습니다.
 
 ```js
-var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
+var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
 ```
 
 {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
diff --git a/files/ko/web/api/canvas_api/tutorial/drawing_text/index.md b/files/ko/web/api/canvas_api/tutorial/drawing_text/index.md
index e33a36b66fbdce..24af74d5f6fe97 100644
--- a/files/ko/web/api/canvas_api/tutorial/drawing_text/index.md
+++ b/files/ko/web/api/canvas_api/tutorial/drawing_text/index.md
@@ -23,9 +23,9 @@ original_slug: Drawing_text_using_a_canvas
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.fillText('Hello world', 10, 50);
+  var ctx = document.getElementById("canvas").getContext("2d");
+  ctx.font = "48px serif";
+  ctx.fillText("Hello world", 10, 50);
 }
 ```
 
@@ -45,9 +45,9 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.strokeText('Hello world', 10, 50);
+  var ctx = document.getElementById("canvas").getContext("2d");
+  ctx.font = "48px serif";
+  ctx.strokeText("Hello world", 10, 50);
 }
 ```
 
@@ -92,9 +92,9 @@ baselines, due to glyphs extending far outside the em square.](http://www.whatwg
 아래의 코드를 수정하여 캔버스에서 어떻게 바뀌는지 실시간으로 확인해 보세요.
 
 ```js
-ctx.font = '48px serif';
-ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);
+ctx.font = "48px serif";
+ctx.textBaseline = "hanging";
+ctx.strokeText("Hello world", 0, 100);
 ```
 
 ```html hidden
@@ -106,15 +106,16 @@ ctx.strokeText('Hello world', 0, 100);
 <textarea id="code" class="playable-code">
 ctx.font = "48px serif";
 ctx.textBaseline = "hanging";
-ctx.strokeText("Hello world", 0, 100);</textarea>
+ctx.strokeText("Hello world", 0, 100);</textarea
+>
 ```
 
 ```js hidden
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var textarea = document.getElementById('code');
-var reset = document.getElementById('reset');
-var edit = document.getElementById('edit');
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
 var code = textarea.value;
 
 function drawCanvas() {
@@ -122,17 +123,17 @@ function drawCanvas() {
   eval(textarea.value);
 }
 
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
   textarea.value = code;
   drawCanvas();
 });
 
-edit.addEventListener('click', function() {
+edit.addEventListener("click", function () {
   textarea.focus();
-})
+});
 
-textarea.addEventListener('input', drawCanvas);
-window.addEventListener('load', drawCanvas);
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
 ```
 
 {{ EmbedLiveSample('Playable_code', 700, 360) }}
@@ -148,8 +149,8 @@ window.addEventListener('load', drawCanvas);
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var text = ctx.measureText('foo'); // TextMetrics object
+  var ctx = document.getElementById("canvas").getContext("2d");
+  var text = ctx.measureText("foo"); // TextMetrics object
   text.width; // 16;
 }
 ```
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..28f547e6e32577 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
@@ -17,11 +17,11 @@ original_slug: Web/HTML/Canvas/Tutorial/Optimizing_canvas
 만약 당신이 캔버스에 애니메이션 프레임을 그리면서 반복적인 작업이 발견된다면, 눈에 보이지 않는 숨겨진 캔버스 요소를 새로 만들고 그 캔버스에 미리 그려 넣는 방법을 고려하세요. 그렇게 하면 필요한 순간에 숨긴 캔버스에 그려진 이미지를 다시 주 캔버스 이미지에 그려넣어, 불필요한 렌더링 반복 작업을 줄여 성능 향상을 꾀할 수 있습니다.
 
 ```js
-myCanvas.offscreenCanvas = document.createElement('canvas');
+myCanvas.offscreenCanvas = document.createElement("canvas");
 myCanvas.offscreenCanvas.width = myCanvas.width;
 myCanvas.offscreenCanvas.height = myCanvas.height;
 
-myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);
+myCanvas.getContext("2d").drawImage(myCanvas.offScreenCanvas, 0, 0);
 ```
 
 ### 부동 소수점 좌표를 피하고 대신 정수를 사용하라.
@@ -59,10 +59,18 @@ ctx.drawImage(myImage, 0.3, 0.5);
     border: 2px solid black;
   }
 
-  canvas { position: absolute; }
-  #ui-layer { z-index: 3; }
-  #game-layer { z-index: 2; }
-  #background-layer { z-index: 1; }
+  canvas {
+    position: absolute;
+  }
+  #ui-layer {
+    z-index: 3;
+  }
+  #game-layer {
+    z-index: 2;
+  }
+  #background-layer {
+    z-index: 1;
+  }
 </style>
 ```
 
@@ -81,8 +89,8 @@ var scaleY = window.innerHeight / canvas.height;
 var scaleToFit = Math.min(scaleX, scaleY);
 var scaleToCover = Math.max(scaleX, scaleY);
 
-stage.style.transformOrigin = '0 0'; //scale from top left
-stage.style.transform = 'scale(' + scaleToFit + ')';
+stage.style.transformOrigin = "0 0"; //scale from top left
+stage.style.transform = "scale(" + scaleToFit + ")";
 ```
 
 ### 투명도를 사용하지 마라.
@@ -90,7 +98,7 @@ stage.style.transform = 'scale(' + scaleToFit + ')';
 응용 프로그램이 캔버스를 사용하고 투명 배경을 필요로하지 않는 경우 [`HTMLCanvasElement.getContext()`](/ko/docs/Web/API/HTMLCanvasElement/getContext)를 사용하여 드로잉 컨텍스트를 만들 때 alpha 옵션을 false로 설정합니다. 이 정보는 렌더링을 최적화하기 위해 브라우저에서 내부적으로 사용할 수 있습니다.
 
 ```js
-var ctx = canvas.getContext('2d', { alpha: false });
+var ctx = canvas.getContext("2d", { 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 30584779052534..9266d995f0dfcd 100644
--- a/files/ko/web/api/canvas_api/tutorial/transformations/index.md
+++ b/files/ko/web/api/canvas_api/tutorial/transformations/index.md
@@ -32,24 +32,24 @@ Canvas 상태는 스택(stack)에 쌓입니다. `save()` 메소드가 호출될
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+  var ctx = document.getElementById("canvas").getContext("2d");
 
-  ctx.fillRect(0, 0, 150, 150);   // 기본 설정으로 사각형을 그리기
-  ctx.save();                  // 기본 상태를 저장하기
+  ctx.fillRect(0, 0, 150, 150); // 기본 설정으로 사각형을 그리기
+  ctx.save(); // 기본 상태를 저장하기
 
-  ctx.fillStyle = '#09F';      // 설정 변경하기
+  ctx.fillStyle = "#09F"; // 설정 변경하기
   ctx.fillRect(15, 15, 120, 120); // 새로운 설정으로 사각형 그리기
 
-  ctx.save();                  // 현재 상태 저장하기
-  ctx.fillStyle = '#FFF';      // 설정 변경하기
+  ctx.save(); // 현재 상태 저장하기
+  ctx.fillStyle = "#FFF"; // 설정 변경하기
   ctx.globalAlpha = 0.5;
-  ctx.fillRect(30, 30, 90, 90);   // 새로운 설정으로 사각형 그리기
+  ctx.fillRect(30, 30, 90, 90); // 새로운 설정으로 사각형 그리기
 
-  ctx.restore();               // 이전 상태 복원하기
-  ctx.fillRect(45, 45, 60, 60);   // 복원된 설정으로 사각형 그리기
+  ctx.restore(); // 이전 상태 복원하기
+  ctx.fillRect(45, 45, 60, 60); // 복원된 설정으로 사각형 그리기
 
-  ctx.restore();               // 초기 상태를 복원하기
-  ctx.fillRect(60, 60, 30, 30);   // 복원된 설정으로 사각형 그리기
+  ctx.restore(); // 초기 상태를 복원하기
+  ctx.fillRect(60, 60, 30, 30); // 복원된 설정으로 사각형 그리기
 }
 ```
 
@@ -86,11 +86,11 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+  var ctx = document.getElementById("canvas").getContext("2d");
   for (var i = 0; i < 3; i++) {
     for (var j = 0; j < 3; j++) {
       ctx.save();
-      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
+      ctx.fillStyle = "rgb(" + 51 * i + ", " + (255 - 51 * i) + ", 255)";
       ctx.translate(10 + j * 50, 10 + i * 50);
       ctx.fillRect(0, 0, 25, 25);
       ctx.restore();
@@ -126,32 +126,32 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+  var ctx = document.getElementById("canvas").getContext("2d");
 
   // 좌측 사각형, canvas 원점에서 회전하기
   ctx.save();
   // 파란 사각형
-  ctx.fillStyle = '#0095DD';
+  ctx.fillStyle = "#0095DD";
   ctx.fillRect(30, 30, 100, 100);
   ctx.rotate((Math.PI / 180) * 25);
   // 회색 사각형
-  ctx.fillStyle = '#4D4E53';
+  ctx.fillStyle = "#4D4E53";
   ctx.fillRect(30, 30, 100, 100);
   ctx.restore();
 
   // 우측 사각형, 사각형 중심에서 회전하기
   // 파란 사각형 그리기
-  ctx.fillStyle = '#0095DD';
+  ctx.fillStyle = "#0095DD";
   ctx.fillRect(150, 30, 100, 100);
 
   ctx.translate(200, 80); // 사각형 중심으로 이동하기
-                          // x = x + 0.5 * width
-                          // y = y + 0.5 * height
+  // x = x + 0.5 * width
+  // y = y + 0.5 * height
   ctx.rotate((Math.PI / 180) * 25); // 회전
   ctx.translate(-200, -80); // 예전 위치로 이동하기
 
   // 회색 사각형 그리기
-  ctx.fillStyle = '#4D4E53';
+  ctx.fillStyle = "#4D4E53";
   ctx.fillRect(150, 30, 100, 100);
 }
 ```
@@ -185,7 +185,7 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+  var ctx = document.getElementById("canvas").getContext("2d");
 
   // 간단하지만 확대·축소 비율을 적용한 사각형 그리기
   ctx.save();
@@ -195,8 +195,8 @@ function draw() {
 
   // 수평으로 대칭하기
   ctx.scale(-1, 1);
-  ctx.font = '48px serif';
-  ctx.fillText('MDN', -135, 120);
+  ctx.font = "48px serif";
+  ctx.fillText("MDN", -135, 120);
 }
 ```
 
@@ -242,21 +242,21 @@ draw();
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+  var ctx = document.getElementById("canvas").getContext("2d");
 
   var sin = Math.sin(Math.PI / 6);
   var cos = Math.cos(Math.PI / 6);
   ctx.translate(100, 100);
   var c = 0;
   for (var i = 0; i <= 12; i++) {
-    c = Math.floor(255 / 12 * i);
-    ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
+    c = Math.floor((255 / 12) * i);
+    ctx.fillStyle = "rgb(" + c + ", " + c + ", " + c + ")";
     ctx.fillRect(0, 0, 100, 10);
     ctx.transform(cos, sin, -sin, cos, 0, 0);
   }
 
   ctx.setTransform(-1, 0, 0, 1, 100, 100);
-  ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
+  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
   ctx.fillRect(0, 50, 100, 100);
 }
 ```
diff --git a/files/ko/web/api/canvas_api/tutorial/using_images/index.md b/files/ko/web/api/canvas_api/tutorial/using_images/index.md
index f2c6f81a89cac2..fea28b6ccbb655 100644
--- a/files/ko/web/api/canvas_api/tutorial/using_images/index.md
+++ b/files/ko/web/api/canvas_api/tutorial/using_images/index.md
@@ -55,8 +55,8 @@ One of the more practical uses of this would be to use a second canvas element a
 Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient `Image()` constructor:
 
 ```js
-var img = new Image();   // Create new img element
-img.src = 'myImage.png'; // Set source path
+var img = new Image(); // Create new img element
+img.src = "myImage.png"; // Set source path
 ```
 
 When this script gets executed, the image starts loading.
@@ -64,11 +64,15 @@ When this script gets executed, the image starts loading.
 If you try to call `drawImage()` before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:
 
 ```js
-var img = new Image();   // Create new img element
-img.addEventListener('load', function() {
-  // execute drawImage statements here
-}, false);
-img.src = 'myImage.png'; // Set source path
+var img = new Image(); // Create new img element
+img.addEventListener(
+  "load",
+  function () {
+    // execute drawImage statements here
+  },
+  false,
+);
+img.src = "myImage.png"; // Set source path
 ```
 
 If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.
@@ -78,8 +82,9 @@ If you're only using one external image this can be a good approach, but once yo
 Another possible way to include images is via the [data: url](/ko/docs/Web/HTTP/data_URIs). Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.
 
 ```js
-var img = new Image();   // Create new img element
-img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+var img = new Image(); // Create new img element
+img.src =
+  "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";
 ```
 
 One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your [CSS](/ko/docs/Web/CSS), [JavaScript](/ko/docs/Web/JavaScript), [HTML](/ko/docs/Web/HTML), and images, making it more portable to other locations.
@@ -92,11 +97,11 @@ You can also use frames from a video being presented by a {{HTMLElement("video")
 
 ```js
 function getMyVideo() {
-  var canvas = document.getElementById('canvas');
+  var canvas = document.getElementById("canvas");
   if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
+    var ctx = canvas.getContext("2d");
 
-    return document.getElementById('myvideo');
+    return document.getElementById("myvideo");
   }
 }
 ```
@@ -118,17 +123,17 @@ In the following example, we will use an external image as the backdrop for a sm
 
 ```html hidden
 <html>
- <body onload="draw();">
-   <canvas id="canvas" width="180" height="150"></canvas>
- </body>
+  <body onload="draw();">
+    <canvas id="canvas" width="180" height="150"></canvas>
+  </body>
 </html>
 ```
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+  var ctx = document.getElementById("canvas").getContext("2d");
   var img = new Image();
-  img.onload = function() {
+  img.onload = function () {
     ctx.drawImage(img, 0, 0);
     ctx.beginPath();
     ctx.moveTo(30, 96);
@@ -137,7 +142,7 @@ function draw() {
     ctx.lineTo(170, 15);
     ctx.stroke();
   };
-  img.src = 'backdrop.png';
+  img.src = "backdrop.png";
 }
 ```
 
@@ -160,24 +165,24 @@ In this example, we'll use an image as a wallpaper and repeat it several times o
 
 ```html hidden
 <html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
+  <body onload="draw();">
+    <canvas id="canvas" width="150" height="150"></canvas>
+  </body>
 </html>
 ```
 
 ```js
 function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
+  var ctx = document.getElementById("canvas").getContext("2d");
   var img = new Image();
-  img.onload = function() {
+  img.onload = function () {
     for (var i = 0; i < 4; i++) {
       for (var j = 0; j < 3; j++) {
         ctx.drawImage(img, j * 50, i * 38, 50, 38);
       }
     }
   };
-  img.src = 'rhino.jpg';
+  img.src = "rhino.jpg";
 }
 ```
 
@@ -202,27 +207,36 @@ In this example, we'll use the same rhino as in the previous example, but we'll
 
 ```html
 <html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
-   <div style="display:none;">
-     <img id="source" src="rhino.jpg" width="300" height="227">
-     <img id="frame" src="canvas_picture_frame.png" width="132" height="150">
-   </div>
- </body>
+  <body onload="draw();">
+    <canvas id="canvas" width="150" height="150"></canvas>
+    <div style="display:none;">
+      <img id="source" src="rhino.jpg" width="300" height="227" />
+      <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
+    </div>
+  </body>
 </html>
 ```
 
 ```js
 function draw() {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
+  var canvas = document.getElementById("canvas");
+  var ctx = canvas.getContext("2d");
 
   // Draw slice
-  ctx.drawImage(document.getElementById('source'),
-                33, 71, 104, 124, 21, 20, 87, 104);
+  ctx.drawImage(
+    document.getElementById("source"),
+    33,
+    71,
+    104,
+    124,
+    21,
+    20,
+    87,
+    104,
+  );
 
   // Draw frame
-  ctx.drawImage(document.getElementById('frame'), 0, 0);
+  ctx.drawImage(document.getElementById("frame"), 0, 0);
 }
 ```
 
@@ -242,23 +256,23 @@ The code below should be self-explanatory. We loop through the {{domxref("docume
 
 ```html
 <html>
- <body onload="draw();">
-     <table>
+  <body onload="draw();">
+    <table>
       <tr>
-        <td><img src="gallery_1.jpg"></td>
-        <td><img src="gallery_2.jpg"></td>
-        <td><img src="gallery_3.jpg"></td>
-        <td><img src="gallery_4.jpg"></td>
+        <td><img src="gallery_1.jpg" /></td>
+        <td><img src="gallery_2.jpg" /></td>
+        <td><img src="gallery_3.jpg" /></td>
+        <td><img src="gallery_4.jpg" /></td>
       </tr>
       <tr>
-        <td><img src="gallery_5.jpg"></td>
-        <td><img src="gallery_6.jpg"></td>
-        <td><img src="gallery_7.jpg"></td>
-        <td><img src="gallery_8.jpg"></td>
+        <td><img src="gallery_5.jpg" /></td>
+        <td><img src="gallery_6.jpg" /></td>
+        <td><img src="gallery_7.jpg" /></td>
+        <td><img src="gallery_8.jpg" /></td>
       </tr>
-     </table>
-     <img id="frame" src="canvas_picture_frame.png" width="132" height="150">
- </body>
+    </table>
+    <img id="frame" src="canvas_picture_frame.png" width="132" height="150" />
+  </body>
 </html>
 ```
 
@@ -266,7 +280,7 @@ And here's some CSS to make things look nice:
 
 ```css
 body {
-  background: 0 -100px repeat-x url(bg_gallery.png) #4F191A;
+  background: 0 -100px repeat-x url(bg_gallery.png) #4f191a;
   margin: 10px;
 }
 
@@ -287,28 +301,25 @@ Tying it all together is the JavaScript to draw our framed images:
 
 ```js
 function draw() {
-
   // Loop through all images
   for (var i = 0; i < document.images.length; i++) {
-
     // Don't add a canvas for the frame image
-    if (document.images[i].getAttribute('id') != 'frame') {
-
+    if (document.images[i].getAttribute("id") != "frame") {
       // Create canvas element
-      canvas = document.createElement('canvas');
-      canvas.setAttribute('width', 132);
-      canvas.setAttribute('height', 150);
+      canvas = document.createElement("canvas");
+      canvas.setAttribute("width", 132);
+      canvas.setAttribute("height", 150);
 
       // Insert before the image
-      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+      document.images[i].parentNode.insertBefore(canvas, document.images[i]);
 
-      ctx = canvas.getContext('2d');
+      ctx = canvas.getContext("2d");
 
       // Draw image to canvas
       ctx.drawImage(document.images[i], 15, 20);
 
       // Add frame
-      ctx.drawImage(document.getElementById('frame'), 0, 0);
+      ctx.drawImage(document.getElementById("frame"), 0, 0);
     }
   }
 }
diff --git a/files/ko/web/api/channel_messaging_api/using_channel_messaging/index.md b/files/ko/web/api/channel_messaging_api/using_channel_messaging/index.md
index dbe6efbfbc01ac..faf96a01ecdb3a 100644
--- a/files/ko/web/api/channel_messaging_api/using_channel_messaging/index.md
+++ b/files/ko/web/api/channel_messaging_api/using_channel_messaging/index.md
@@ -2,6 +2,7 @@
 title: Using channel messaging
 slug: Web/API/Channel_Messaging_API/Using_channel_messaging
 ---
+
 {{DefaultAPISidebar("Channel Messaging API")}}
 
 [Channel Messaging API](/ko/docs/Web/API/Channel_Messaging_API) 는 두 개의 독립적인 스크립트(예를 들면, 두 개의 IFrame, 또는 메인 다큐먼트와 IFrame, 또는 {{domxref("SharedWorker")}}에 의한 두 개의 다큐먼트)를 각 포트를 가진 양방향 채널(또는 파이프)을 통해 서로 직접 통신할 수 있도록 해줍니다. 이 문서에서 이 기술을 사용하는 기본내용에 대해 살펴봅시다.
@@ -29,28 +30,28 @@ We'll be focusing on the latter example in this article. It looks like so:
 In the main page of the demo, we have a paragraph and a simple form with a text input for entering messages to be sent to an {{htmlelement("iframe")}}.
 
 ```js
-var para = document.querySelector('p');
-var textInput = document.querySelector('.message-box');
-var button = document.querySelector('button');
+var para = document.querySelector("p");
+var textInput = document.querySelector(".message-box");
+var button = document.querySelector("button");
 
-var ifr = document.querySelector('iframe');
+var ifr = document.querySelector("iframe");
 var otherWindow = ifr.contentWindow;
 
 ifr.addEventListener("load", iframeLoaded, false);
 
 function iframeLoaded() {
-  button.onclick = function(e) {
+  button.onclick = function (e) {
     e.preventDefault();
 
     var channel = new MessageChannel();
-    otherWindow.postMessage(textInput.value, '*', [channel.port2]);
+    otherWindow.postMessage(textInput.value, "*", [channel.port2]);
 
     channel.port1.onmessage = handleMessage;
     function handleMessage(e) {
       para.innerHTML = e.data;
-      textInput.value = '';
+      textInput.value = "";
     }
-  }
+  };
 }
 ```
 
@@ -69,14 +70,14 @@ At the bottom of the `iframeLoaded()` function there is a {{domxref("MessagePort
 Over in the IFrame, we have the following JavaScript:
 
 ```js
-var list = document.querySelector('ul');
+var list = document.querySelector("ul");
 
-onmessage = function(e) {
-  var listItem = document.createElement('li');
+onmessage = function (e) {
+  var listItem = document.createElement("li");
   listItem.textContent = e.data;
   list.appendChild(listItem);
   e.ports[0].postMessage('Message received by IFrame: "' + e.data + '"');
-}
+};
 ```
 
 The entirety of the code is wrapped in a {{domxref("window.onmessage")}} handler, which runs when the message is received from the main page (via its `postMessage()`.) First we create a list item and insert it in the unordered list, setting the {{domxref("textContent","Node.textContent")}} of the list item equal to the event's `data` attribute (this contains the actual message).
@@ -91,7 +92,7 @@ Returning to the main page, let's now look at the onmessage handler at the botto
 channel.port1.onmessage = handleMessage;
 function handleMessage(e) {
   para.innerHTML = e.data;
-  textInput.value = '';
+  textInput.value = "";
 }
 ```
 
diff --git a/files/ko/web/api/characterdata/index.md b/files/ko/web/api/characterdata/index.md
index 31683efb7de2f3..ab26b7d7891c41 100644
--- a/files/ko/web/api/characterdata/index.md
+++ b/files/ko/web/api/characterdata/index.md
@@ -2,6 +2,7 @@
 title: CharacterData
 slug: Web/API/CharacterData
 ---
+
 {{APIRef("DOM")}}
 
 **`CharacterData`** 추상 인터페이스는 문자를 포함하는 {{domxref("Node")}} 객체를 나타냅니다. 이는 추상 인터페이스로 `CharacterData` 타입의 객체로는 존재하지 않음을 의미합니다. {{domxref("Text")}}, {{domxref("Comment")}}, {{domxref("ProcessingInstruction")}} 와 같은 추상 인터페이스가 아닌 다른 인터페이스에의해 구현되었습니다.
diff --git a/files/ko/web/api/cleartimeout/index.md b/files/ko/web/api/cleartimeout/index.md
index d145a18601bdb6..a1d17598967646 100644
--- a/files/ko/web/api/cleartimeout/index.md
+++ b/files/ko/web/api/cleartimeout/index.md
@@ -50,7 +50,7 @@ const alarm = {
         this.remind(msg);
       },
       1000,
-      "일어나세요!"
+      "일어나세요!",
     );
   },
 
diff --git a/files/ko/web/api/clients/claim/index.md b/files/ko/web/api/clients/claim/index.md
index 512cc61995d4ee..559d940331d139 100644
--- a/files/ko/web/api/clients/claim/index.md
+++ b/files/ko/web/api/clients/claim/index.md
@@ -2,6 +2,7 @@
 title: Clients.claim()
 slug: Web/API/Clients/claim
 ---
+
 {{SeeCompatTable}}{{APIRef("Service Worker Clients")}}
 
 {{domxref("Clients")}} 의 **`claim()`** 메소드는 active 서비스워커가 그것의 {{domxref("ServiceWorkerRegistration.scope", "scope")}} 를 가지는 모든 클라이언트들의 {{domxref("ServiceWorkerContainer.controller", "controller")}} 로서 자신을 등록하는 것을 허용한다. 이것은 이 서비스워커가 제어하게 될 클라이언트들에 "`controllerchange`" 이벤트를 발생시킨다.
@@ -27,7 +28,7 @@ A {{jsxref("Promise")}} for `void`.
 다음 예시는 서비스워커의 "`activate`" 이벤트 리스너에서 `claim()` 를 사용하므로, fetch 들이 이 서비스워커를 통과하기 전에 동일한 스코프에서 로드된 클라이언트들은 다시 로드될 필요가 없다. .
 
 ```js
-self.addEventListener('activate', event => {
+self.addEventListener("activate", (event) => {
   event.waitUntil(clients.claim());
 });
 ```
diff --git a/files/ko/web/api/clients/index.md b/files/ko/web/api/clients/index.md
index 18b2cd347554e9..e067eadd41dfe4 100644
--- a/files/ko/web/api/clients/index.md
+++ b/files/ko/web/api/clients/index.md
@@ -23,35 +23,37 @@ The `Clients` interface provides access to {{domxref("Client")}} objects. Access
 The following example shows an existing chat window or creates a new one when the user clicks a notification.
 
 ```js
-addEventListener('notificationclick', event => {
-  event.waitUntil(async function() {
-    const allClients = await clients.matchAll({
-      includeUncontrolled: true
-    });
-
-    let chatClient;
-
-    // Let's see if we already have a chat window open:
-    for (const client of allClients) {
-      const url = new URL(client.url);
-
-      if (url.pathname == '/chat/') {
-        // Excellent, let's use it!
-        client.focus();
-        chatClient = client;
-        break;
+addEventListener("notificationclick", (event) => {
+  event.waitUntil(
+    (async function () {
+      const allClients = await clients.matchAll({
+        includeUncontrolled: true,
+      });
+
+      let chatClient;
+
+      // Let's see if we already have a chat window open:
+      for (const client of allClients) {
+        const url = new URL(client.url);
+
+        if (url.pathname == "/chat/") {
+          // Excellent, let's use it!
+          client.focus();
+          chatClient = client;
+          break;
+        }
       }
-    }
 
-    // If we didn't find an existing chat window,
-    // open a new one:
-    if (!chatClient) {
-      chatClient = await clients.openWindow('/chat/');
-    }
+      // If we didn't find an existing chat window,
+      // open a new one:
+      if (!chatClient) {
+        chatClient = await clients.openWindow("/chat/");
+      }
 
-    // Message the client:
-    chatClient.postMessage("New chat messages!");
-  }());
+      // Message the client:
+      chatClient.postMessage("New chat messages!");
+    })(),
+  );
 });
 ```
 
diff --git a/files/ko/web/api/clipboard_api/index.md b/files/ko/web/api/clipboard_api/index.md
index c200c7372e007e..a2e54fca39e6b2 100644
--- a/files/ko/web/api/clipboard_api/index.md
+++ b/files/ko/web/api/clipboard_api/index.md
@@ -2,6 +2,7 @@
 title: Clipboard API
 slug: Web/API/Clipboard_API
 ---
+
 {{DefaultAPISidebar("Clipboard API")}}
 
 **Clipboard API**는 클립보드 명령(잘라내기, 복사, 붙여넣기)에 응답하거나 시스템 클립보드에 비동기적으로 접근하고 쓸 수 있는 기능을 제공합니다.
@@ -15,8 +16,11 @@ Clipboard API는 {{domxref("document.execCommand()")}}를 사용한 클립보드
 시스템 클립보드에 접근할 땐 `Clipboard` 객체의 인스턴스를 생성하지 않고, 전역 {{domxref("Navigator.clipboard")}}를 사용합니다.
 
 ```js
-navigator.clipboard.readText().then(
-  clipText => document.querySelector(".editor").innerText += clipText);
+navigator.clipboard
+  .readText()
+  .then(
+    (clipText) => (document.querySelector(".editor").innerText += clipText),
+  );
 ```
 
 위의 코드 조각은 클립보드에서 텍스트를 가져와서, `editor` 클래스를 가진 첫 번째 요소의 콘텐츠 뒤에 추가합니다. {{domxref("Clipboard.readText", "readText()")}}는 ({{domxref("Clipboard.read", "read()")}}도 마찬가지로) 클립보드의 내용이 텍스트가 아니면 빈 문자열을 반환하므로, 이 코드는 안전합니다.
diff --git a/files/ko/web/api/clipboardevent/clipboarddata/index.md b/files/ko/web/api/clipboardevent/clipboarddata/index.md
index 24d50390dad00d..6744be361fba14 100644
--- a/files/ko/web/api/clipboardevent/clipboarddata/index.md
+++ b/files/ko/web/api/clipboardevent/clipboarddata/index.md
@@ -2,6 +2,7 @@
 title: ClipboardEvent.clipboardData
 slug: Web/API/ClipboardEvent/clipboardData
 ---
+
 {{APIRef("Clipboard API")}} {{SeeCompatTable}}
 
 **`ClipboardEvent.clipboardData`** 속성은 다음과 같은 용도로 사용할 수 있는 {{domxref("DataTransfer")}} 객체입니다.
@@ -14,7 +15,7 @@ slug: Web/API/ClipboardEvent/clipboardData
 ## 구문
 
 ```js
-data = ClipboardEvent.clipboardData
+data = ClipboardEvent.clipboardData;
 ```
 
 ## 명세
diff --git a/files/ko/web/api/console/assert/index.md b/files/ko/web/api/console/assert/index.md
index bb9177f2a15113..59880aba92321d 100644
--- a/files/ko/web/api/console/assert/index.md
+++ b/files/ko/web/api/console/assert/index.md
@@ -2,6 +2,7 @@
 title: console.assert()
 slug: Web/API/console/assert
 ---
+
 {{APIRef("Console API")}}
 
 **`console.assert()`** 메서드는 주어진 가정이 거짓인 경우 콘솔에 오류 메시지를 출력합니다. 참인 경우, 아무것도 하지 않습니다.
@@ -31,12 +32,12 @@ console.assert(assertion, msg [, subst1, ..., substN]); // C-like message format
 다음 예제는 객체와 가정을 함께 사용하는 법을 보입니다.
 
 ```js
-const errorMsg = 'the # is not even';
+const errorMsg = "the # is not even";
 for (let number = 2; number <= 5; number += 1) {
-    console.log('the # is ' + number);
-    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
-    // or, using ES2015 object property shorthand:
-    // console.assert(number % 2 === 0, {number, errorMsg});
+  console.log("the # is " + number);
+  console.assert(number % 2 === 0, { number: number, errorMsg: errorMsg });
+  // or, using ES2015 object property shorthand:
+  // console.assert(number % 2 === 0, {number, errorMsg});
 }
 // output:
 // the # is 2
diff --git a/files/ko/web/api/console/clear/index.md b/files/ko/web/api/console/clear/index.md
index 5d1740b35f63c9..f4bae25560c4ef 100644
--- a/files/ko/web/api/console/clear/index.md
+++ b/files/ko/web/api/console/clear/index.md
@@ -2,6 +2,7 @@
 title: console.clear()
 slug: Web/API/console/clear
 ---
+
 {{APIRef("Console API")}}
 
 **`console.clear()`** 메서드는 현재 환경에서 가능한 경우, 콘솔에 기록된 메시지를 모두 지웁니다.
diff --git a/files/ko/web/api/console/countreset/index.md b/files/ko/web/api/console/countreset/index.md
index be192b6d5700f4..aad1849a6ea8a0 100644
--- a/files/ko/web/api/console/countreset/index.md
+++ b/files/ko/web/api/console/countreset/index.md
@@ -2,6 +2,7 @@
 title: console.countReset()
 slug: Web/API/console/countReset
 ---
+
 {{APIRef("Console API")}}
 
 **`console.countReset()`** 메서드는 {{domxref("console.count()")}}의 카운터를 초기화합니다.
diff --git a/files/ko/web/api/console/debug/index.md b/files/ko/web/api/console/debug/index.md
index 99c1240e93f2b0..5c3bbbe75d3add 100644
--- a/files/ko/web/api/console/debug/index.md
+++ b/files/ko/web/api/console/debug/index.md
@@ -2,6 +2,7 @@
 title: console.debug()
 slug: Web/API/console/debug
 ---
+
 {{APIRef("Console API")}}
 
 **`console.debug()`** 메서드는 메시지를 "디버그" 중요도로 콘솔에 출력합니다. 디버그 중요도 메시지는 별도 설정 없이는 보이지 않습니다. 대부분의 경우 로그 수준은 콘솔 UI 내에서 구성됩니다. 이 로그 수준은 \`Debug\` 또는 \`Verbose\` 로그 수준에 해당할 수 있습니다.
diff --git a/files/ko/web/api/console/groupcollapsed/index.md b/files/ko/web/api/console/groupcollapsed/index.md
index 41a2ba39e07f59..1c569622f4a728 100644
--- a/files/ko/web/api/console/groupcollapsed/index.md
+++ b/files/ko/web/api/console/groupcollapsed/index.md
@@ -16,8 +16,8 @@ slug: Web/API/console/groupCollapsed
 ## 구문
 
 ```js
-groupCollapsed()
-groupCollapsed(label)
+groupCollapsed();
+groupCollapsed(label);
 ```
 
 ### 매개변수
diff --git a/files/ko/web/api/console/groupend/index.md b/files/ko/web/api/console/groupend/index.md
index 5759189963fb44..cba2c417e6521c 100644
--- a/files/ko/web/api/console/groupend/index.md
+++ b/files/ko/web/api/console/groupend/index.md
@@ -12,7 +12,7 @@ slug: Web/API/console/groupEnd
 ## 구문
 
 ```js
-groupEnd()
+groupEnd();
 ```
 
 ### 매개변수
diff --git a/files/ko/web/api/console/index.md b/files/ko/web/api/console/index.md
index a5fa9fd00b9633..cb1ce6d715ddb2 100644
--- a/files/ko/web/api/console/index.md
+++ b/files/ko/web/api/console/index.md
@@ -10,7 +10,7 @@ slug: Web/API/console
 `console` 객체는 아무 전역 객체에서나 접근할 수 있습니다. 브라우징 문맥에선 {{domxref("Window")}}, 워커에서는 {{domxref("WorkerGlobalScope")}}이 속성으로 포함하고 있습니다. {{domxref("Window.console")}}의 형태로 노출되어 있으므로 간단하게 `console`로 참조할 수 있습니다.
 
 ```js
-console.log("링크를 열 수 없습니다")
+console.log("링크를 열 수 없습니다");
 ```
 
 이 문서는 콘솔 객체에서 사용할 수 있는 [메서드](#메서드)와 몇 가지 [예제](#예제)를 다룹니다.
@@ -93,7 +93,7 @@ console.log(someObject);
 
 ```js
 var car = "Dodge Charger";
-var someObject = {str:"Some text", id:5};
+var someObject = { str: "Some text", id: 5 };
 console.info("My first car was a", car, ". The object is: ", someObject);
 ```
 
@@ -121,8 +121,8 @@ console.info("My first car was a", car, ". The object is: ", someObject);
 각각의 치환 문자열은 이후 매개변수에서 값을 가져옵니다. 예를 들어...
 
 ```js
-for (var i=0; i<5; i++) {
-  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+for (var i = 0; i < 5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i + 1);
 }
 ```
 
@@ -141,7 +141,10 @@ for (var i=0; i<5; i++) {
 `"%c"` 명령을 사용해 콘솔 출력에 CSS 스타일을 적용할 수 있습니다.
 
 ```js
-console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
+console.log(
+  "This is %cMy stylish message",
+  "color: yellow; font-style: italic; background-color: blue;padding: 2px",
+);
 ```
 
 명령 이전의 텍스트는 영향을 받지 않고, 이후의 텍스트는 매개변수로 제공한 CSS 선언을 적용합니다.
@@ -151,7 +154,12 @@ console.log("This is %cMy stylish message", "color: yellow; font-style: italic;
 `"%c"` 명령을 여러 번 사용할 수도 있습니다.
 
 ```js
-console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");
+console.log(
+  "Multiple styles: %cred %corange",
+  "color: red",
+  "color: orange",
+  "Additional unformatted message",
+);
 ```
 
 `%c` 구문과 함께 사용할 수 있는 CSS 속성은 다음과 같습니다. (Firefox 기준, 브라우저마다 다를 수 있음)
diff --git a/files/ko/web/api/console/table/index.md b/files/ko/web/api/console/table/index.md
index b8d0b4056fdb16..82a8fa5d115b9c 100644
--- a/files/ko/web/api/console/table/index.md
+++ b/files/ko/web/api/console/table/index.md
@@ -15,8 +15,8 @@ slug: Web/API/console/table
 
 테이블의 첫 번째 칼럼은 `(index)`를 레이블로 사용합니다. `data`가 배열인 경우에는 배열의 인덱스가
 이 칼럼의 값으로 사용됩니다. `data`가 객체인 경우에는 속성 이름이 값으로 사용됩니다. (파이어폭스에서는)
- `console.table`이 1000줄 까지만 표현할 수 있는 제약이 있다는 점에 주의하세요
- (첫 번째 줄은 레이블 인덱스입니다).
+`console.table`이 1000줄 까지만 표현할 수 있는 제약이 있다는 점에 주의하세요
+(첫 번째 줄은 레이블 인덱스입니다).
 
 {{AvailableInWorkers}}
 
@@ -31,7 +31,7 @@ console.table(["apples", "oranges", "bananas"]);
 ```
 
 | (index) | Values    |
-|---------|-----------|
+| ------- | --------- |
 | 0       | 'apples'  |
 | 1       | 'oranges' |
 | 2       | 'bananas' |
@@ -50,7 +50,7 @@ console.table(me);
 ```
 
 | (index)   | Values   |
-|-----------|----------|
+| --------- | -------- |
 | firstName | 'Tyrone' |
 | lastName  | 'Jones'  |
 
@@ -70,7 +70,7 @@ console.table(people);
 ```
 
 | (index) | 0        | 1       |
-|---------|----------|---------|
+| ------- | -------- | ------- |
 | 0       | 'Tyrone' | 'Jones' |
 | 1       | 'Janet'  | 'Smith' |
 | 2       | 'Maria'  | 'Cruz'  |
@@ -93,7 +93,7 @@ console.table([tyrone, janet, maria]);
 배열이 객체를 포함하고 있다면 칼럼은 속성의 이름을 레이블로 사용한다는 점에 주의하세요.
 
 | (index) | firstName | lastName |
-|---------|-----------|----------|
+| ------- | --------- | -------- |
 | 0       | 'Tyrone'  | 'Jones'  |
 | 1       | 'Janet'   | 'Smith'  |
 | 2       | 'Maria'   | 'Cruz'   |
@@ -111,7 +111,7 @@ console.table(family);
 ```
 
 | (index)  | firstName | lastName |
-|----------|-----------|----------|
+| -------- | --------- | -------- |
 | daughter | 'Maria'   | 'Jones'  |
 | father   | 'Tyrone'  | 'Jones'  |
 | mother   | 'Janet'   | 'Jones'  |
@@ -137,7 +137,7 @@ console.table([tyrone, janet, maria], ["firstName"]);
 ```
 
 | (index) | firstName |
-|---------|-----------|
+| ------- | --------- |
 | 0       | 'Tyrone'  |
 | 1       | 'Janet'   |
 | 2       | 'Maria'   |
diff --git a/files/ko/web/api/console/time/index.md b/files/ko/web/api/console/time/index.md
index dd44151753f5a8..44aab683ce2eb2 100644
--- a/files/ko/web/api/console/time/index.md
+++ b/files/ko/web/api/console/time/index.md
@@ -2,6 +2,7 @@
 title: console.time()
 slug: Web/API/console/time
 ---
+
 {{APIRef("Console API")}}
 
 **`console.time()`** 메서드는 타이머를 시작해 작업이 얼마나 걸리는지 추적할 수 있습니다. 각 타이머에게 고유한 이름을 줄 수 있고, 한 페이지에 최대 10,000개의 타이머를 설정할 수 있습니다. 같은 이름으로 {{domxref("console.timeEnd()")}}를 호출할 때, 브라우저가 밀리초 단위로 경과한 시간을 출력합니다.
diff --git a/files/ko/web/api/console/timeend/index.md b/files/ko/web/api/console/timeend/index.md
index 61f94866fb26ba..4d4068a4f0512a 100644
--- a/files/ko/web/api/console/timeend/index.md
+++ b/files/ko/web/api/console/timeend/index.md
@@ -2,6 +2,7 @@
 title: console.timeEnd()
 slug: Web/API/console/timeEnd
 ---
+
 {{APIRef("Console API")}}
 
 **`console.timeEnd()`** 는 이전에 {{domxref("console.time()")}}를 호출하여 시작된 타이머를 중지합니다.
diff --git a/files/ko/web/api/console/trace/index.md b/files/ko/web/api/console/trace/index.md
index c19b3f44437474..7c756d1215d508 100644
--- a/files/ko/web/api/console/trace/index.md
+++ b/files/ko/web/api/console/trace/index.md
@@ -2,6 +2,7 @@
 title: console.trace()
 slug: Web/API/console/trace
 ---
+
 {{APIRef("Console API")}}
 
 **`console.trace()`** 메서드는 [웹 콘솔](/ko/docs/Tools/Web_Console)에 스택 추적을 출력합니다.
@@ -13,7 +14,7 @@ slug: Web/API/console/trace
 ## 구문
 
 ```js
-console.trace( [...any, ...data ]);
+console.trace([...any, ...data]);
 ```
 
 ### 매개변수
diff --git a/files/ko/web/api/console_api/index.md b/files/ko/web/api/console_api/index.md
index d73c10254601aa..219e1394ed212b 100644
--- a/files/ko/web/api/console_api/index.md
+++ b/files/ko/web/api/console_api/index.md
@@ -2,6 +2,7 @@
 title: Console API
 slug: Web/API/Console_API
 ---
+
 {{DefaultAPISidebar("Console API")}}
 
 **Console API**는 코드의 특정 지점에서 값이나 변수를 기록하고, 작업의 소요 시간을 알아내는 등 개발자가 사용할 수 있는 디버깅 기능을 제공합니다.
@@ -25,7 +26,7 @@ Console API는 사유 API로 시작하였으며, 브라우저가 각자 다른 
 ## 예제
 
 ```js
-let myString = 'Hello world';
+let myString = "Hello world";
 
 // Output "Hello world" to the console
 console.log(myString);
diff --git a/files/ko/web/api/crypto/getrandomvalues/index.md b/files/ko/web/api/crypto/getrandomvalues/index.md
index 4fd829c6f8ecf9..6e7d619d5739ab 100644
--- a/files/ko/web/api/crypto/getrandomvalues/index.md
+++ b/files/ko/web/api/crypto/getrandomvalues/index.md
@@ -2,6 +2,7 @@
 title: Crypto.getRandomValues()
 slug: Web/API/Crypto/getRandomValues
 ---
+
 {{APIRef("Web Crypto API")}}
 
 **`Crypto.getRandomValues()`** 메서드는 암호학적으로 강력한 난수를 생성할 수 있습니다. 매개변수로 제공한 배열을 무작위 (암호학에서의 '무작위') 숫자로 채웁니다.
@@ -13,7 +14,7 @@ slug: Web/API/Crypto/getRandomValues
 ## 구문
 
 ```js
-getRandomValues(typedArray)
+getRandomValues(typedArray);
 ```
 
 ### 매개변수
diff --git a/files/ko/web/api/crypto_property/index.md b/files/ko/web/api/crypto_property/index.md
index 793283f56ac400..0f76efb12cbd47 100644
--- a/files/ko/web/api/crypto_property/index.md
+++ b/files/ko/web/api/crypto_property/index.md
@@ -3,6 +3,7 @@ title: Window.crypto
 slug: Web/API/crypto_property
 original_slug: Web/API/Window/crypto
 ---
+
 {{APIRef}}
 
 **`Window.crypto`**속성은 전역 객체인 {{domxref("Crypto")}} 객체를 반환합니다. `Crypto` 객체는 웹 페이지가 특정 암호학적 서비스에 접근할 수 있는 경로입니다. `crypto` 속성 자체는 읽기 전용이지만, 모든 메서드(와 자식 객체 {{domxref("SubtleCrypto")}})의 메서드)는 읽기 전용이 아니므로 {{glossary("polyfill", "폴리필")}}을 통한 공격에 취약합니다.
@@ -25,18 +26,20 @@ genRandomNumbers = function getRandomNumbers() {
   window.crypto.getRandomValues(array);
 
   var randText = document.getElementById("myRandText");
-  randText.innerHTML = "The random numbers are: "
+  randText.innerHTML = "The random numbers are: ";
   for (var i = 0; i < array.length; i++) {
     randText.innerHTML += array[i] + " ";
   }
-}
+};
 ```
 
 ### HTML
 
 ```html
-<p id="myRandText">The random numbers are: </p>
-<button type="button" onClick='genRandomNumbers()'>Generate 10 random numbers</button>
+<p id="myRandText">The random numbers are:</p>
+<button type="button" onClick="genRandomNumbers()">
+  Generate 10 random numbers
+</button>
 ```
 
 ### 결과
diff --git a/files/ko/web/api/css/index.md b/files/ko/web/api/css/index.md
index 890534eb3b3dbf..9e6d8a951db5f0 100644
--- a/files/ko/web/api/css/index.md
+++ b/files/ko/web/api/css/index.md
@@ -2,6 +2,7 @@
 title: CSS
 slug: Web/API/CSS
 ---
+
 {{APIRef("CSSOM")}}
 
 **`CSS`** 인터페이스는 유용한 CSS 관련 메서드를 가집니다. `CSS` 인터페이스는 정적 속성과 메서드만 가지고 있으며 아무런 객체도 `CSS` 인터페이스를 구현하지 않습니다.
@@ -22,6 +23,7 @@ _CSS 인터페이스는 유틸리티 인터페이스이며, 이러한 형식의
 - {{domxref("CSS.registerProperty()")}}
   - : [사용자 지정 CSS 속성](/ko/docs/Web/CSS/--*)을 등록하고 속성 자료형 검사, 기본값, 상속 여부 등을 설정할 수 있습니다.
 - {{domxref("CSS.supports()")}}
+
   - : 매개변수로 주어진 속성-값 쌍 또는 조건의 지원 여부를 나타내는 {{jsxref("Boolean")}}을 반환합니다.
 
 - {{domxref("CSS.escape()")}} {{experimental_inline}}
diff --git a/files/ko/web/api/css_object_model/index.md b/files/ko/web/api/css_object_model/index.md
index 270a1fdbb35e32..364a9bc0cce0c1 100644
--- a/files/ko/web/api/css_object_model/index.md
+++ b/files/ko/web/api/css_object_model/index.md
@@ -2,6 +2,7 @@
 title: CSS 객체 모델 (CSSOM)
 slug: Web/API/CSS_Object_Model
 ---
+
 {{DefaultAPISidebar('CSSOM')}}
 
 **CSS Object Model**은 JavaScript에서 CSS를 조작할 수 있는 API 집합입니다. HTML 대신 CSS가 대상인 DOM이라고 생각할 수 있으며, 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법입니다.
diff --git a/files/ko/web/api/css_object_model/managing_screen_orientation/index.md b/files/ko/web/api/css_object_model/managing_screen_orientation/index.md
index 6e411e21ab2586..697de25f6d7f50 100644
--- a/files/ko/web/api/css_object_model/managing_screen_orientation/index.md
+++ b/files/ko/web/api/css_object_model/managing_screen_orientation/index.md
@@ -27,7 +27,12 @@ Screen orientation 은 [device orientation](/ko/docs/WebAPI/Detecting_device_ori
   <li>C</li>
 </ul>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec
+  sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt
+  leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut
+  interdum tristique dapibus. Nullam quis malesuada est.
+</p>
 ```
 
 CSS 는 화면 방향에 따라 특정 스타일을 을 다루기 위해 orientation media query 에 의존한다
@@ -35,8 +40,9 @@ CSS 는 화면 방향에 따라 특정 스타일을 을 다루기 위해 orienta
 ```css
 /* First let's define some common styles */
 
-html, body {
-  width : 100%;
+html,
+body {
+  width: 100%;
   height: 100%;
 }
 
@@ -48,17 +54,17 @@ body {
 }
 
 p {
-  font   : 1em sans-serif;
-  margin : 0;
-  padding: .5em;
+  font: 1em sans-serif;
+  margin: 0;
+  padding: 0.5em;
 }
 
 ul {
   list-style: none;
 
-  font   : 1em monospace;
-  margin : 0;
-  padding: .5em;
+  font: 1em monospace;
+  margin: 0;
+  padding: 0.5em;
 
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -68,7 +74,7 @@ ul {
 
 li {
   display: inline-block;
-  margin : 0;
+  margin: 0;
   padding: 0.5em;
   background: white;
 }
@@ -99,15 +105,15 @@ Once we have some common styles we can start defining a special case for the ori
   }
 
   li + li {
-    margin-top: .5em;
+    margin-top: 0.5em;
   }
 }
 ```
 
 실행 결과를 보자
 
-| Portrait                                                                                             | Landscape                                                                                            |
-| ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| Portrait                                                                     | Landscape                                                                    |
+| ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
 | {{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }} | {{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }} |
 
 > **참고:** orientation media query 는 실제로 브라우저 창 (또는 iframe) 의 방향에 따라 적용한다. 장치의 방향이 아니다.
@@ -137,7 +143,7 @@ screen.addEventListener("orientationchange", function () {
 {{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 는 적용 할 잠금의 종류를 정의하는 문자열 (또는 일련의 문자열) 을 수용한다. 수용하는 값들: `portrait-primary`, `portrait-secondary`, `landscape-primary`, `landscape-secondary`, `portrait`, `landscape` (각각의 값들에 대해 좀 더 알려면 {{domxref("window.screen.lockOrientation","lockOrientation")}} 를 보라).
 
 ```js
-screen.lockOrientation('landscape');
+screen.lockOrientation("landscape");
 ```
 
 > **참고:** **Note:** 화면 잠금은 웹 어플리케이션에 따라 다르다. 어플레케이션 A이 가로모드로 잠겨 있고 어플레케이션 B가 세로모드로 잠겨 있을 때, 어플리케이션을 A 에서 B 로 또는 B 에서 A 로 전환하면 {{domxref("Window.orientationchange_event", "orientationchange")}} 를 호출하지 않는다. 왜냐하면 각 어플리케이션은 각자의 방향을 유지 하기 때문이다.그러나, 만약 잠금요구를 만족하기 위해 방향이 바뀌어야한다면 화면잠금은 {{domxref("Window.orientationchange_event", "orientationchange")}} 이벤트를 호출 할 수 있다.
diff --git a/files/ko/web/api/cssstylesheet/index.md b/files/ko/web/api/cssstylesheet/index.md
index 71d5e9a334da8b..28aacce869c4df 100644
--- a/files/ko/web/api/cssstylesheet/index.md
+++ b/files/ko/web/api/cssstylesheet/index.md
@@ -40,13 +40,13 @@ A `CSSStyleSheet` object is created and inserted into the document's `styleSheet
 
 A (possibly incomplete) list of ways a style sheet can be associated with a document follows:
 
-| Reason for the style sheet to be associated with the document                                  | Appears in `document. styleSheets` list | Getting the owner element/rule given the style sheet object          | The interface for the owner object                                                                                              | Getting the CSSStyleSheet object from the owner                          |
-| ---------------------------------------------------------------------------------------------- | --------------------------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| {{HTMLElement("style")}} and {{HTMLElement("link")}} elements in the document | Yes                                     | {{domxref("StyleSheet.ownerNode", ".ownerNode")}}     | {{domxref("HTMLLinkElement")}}, {{domxref("HTMLStyleElement")}}, or {{domxref("SVGStyleElement")}} | {{domxref("LinkStyle.sheet", ".sheet")}}                     |
-| CSS {{cssxref("@import")}} rule in other style sheets applied to the document            | Yes                                     | {{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}} | {{domxref("CSSImportRule")}}                                                                                            | {{domxref("CSSImportRule.styleSheet", ".styleSheet")}} |
-| `<?xml-stylesheet ?>` processing instruction in the (non-HTML) document                        | Yes                                     | {{domxref("StyleSheet.ownerNode", ".ownerNode")}}     | {{domxref("ProcessingInstruction")}}                                                                                | {{domxref("LinkStyle.sheet", ".sheet")}}                     |
-| HTTP Link Header                                                                               | Yes                                     | _N/A_                                                                | N/A                                                                                                                             | N/A                                                                      |
-| User agent (default) style sheets                                                              | No                                      | N/A                                                                  | N/A                                                                                                                             | N/A                                                                      |
+| Reason for the style sheet to be associated with the document                 | Appears in `document. styleSheets` list | Getting the owner element/rule given the style sheet object | The interface for the owner object                                                                 | Getting the CSSStyleSheet object from the owner        |
+| ----------------------------------------------------------------------------- | --------------------------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| {{HTMLElement("style")}} and {{HTMLElement("link")}} elements in the document | Yes                                     | {{domxref("StyleSheet.ownerNode", ".ownerNode")}}           | {{domxref("HTMLLinkElement")}}, {{domxref("HTMLStyleElement")}}, or {{domxref("SVGStyleElement")}} | {{domxref("LinkStyle.sheet", ".sheet")}}               |
+| CSS {{cssxref("@import")}} rule in other style sheets applied to the document | Yes                                     | {{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}}        | {{domxref("CSSImportRule")}}                                                                       | {{domxref("CSSImportRule.styleSheet", ".styleSheet")}} |
+| `<?xml-stylesheet ?>` processing instruction in the (non-HTML) document       | Yes                                     | {{domxref("StyleSheet.ownerNode", ".ownerNode")}}           | {{domxref("ProcessingInstruction")}}                                                               | {{domxref("LinkStyle.sheet", ".sheet")}}               |
+| HTTP Link Header                                                              | Yes                                     | _N/A_                                                       | N/A                                                                                                | N/A                                                    |
+| User agent (default) style sheets                                             | No                                      | N/A                                                         | N/A                                                                                                | N/A                                                    |
 
 ## 명세서
 
diff --git a/files/ko/web/api/customelementregistry/index.md b/files/ko/web/api/customelementregistry/index.md
index 7892af25c95eb2..b90a0ff0b31deb 100644
--- a/files/ko/web/api/customelementregistry/index.md
+++ b/files/ko/web/api/customelementregistry/index.md
@@ -32,25 +32,28 @@ class WordCount extends HTMLParagraphElement {
     // 요소 부모의 단어 수 세기
     const wcParent = this.parentNode;
 
-    function countWords(node){
+    function countWords(node) {
       const text = node.innerText || node.textContent;
-      return text.trim().split(/\s+/g).filter(a => a.trim().length > 0).length;
+      return text
+        .trim()
+        .split(/\s+/g)
+        .filter((a) => a.trim().length > 0).length;
     }
 
     const count = `Words: ${countWords(wcParent)}`;
 
     // 섀도 루트 생성
-    const shadow = this.attachShadow({mode: 'open'});
+    const shadow = this.attachShadow({ mode: "open" });
 
     // 텍스트 노드 생성 후 단어 수로 채우기
-    const text = document.createElement('span');
+    const text = document.createElement("span");
     text.textContent = count;
 
     // 텍스트 노드를 섀도 루트에 추가
     shadow.appendChild(text);
 
     // 요소 콘텐츠가 바뀌면 단어 수 업데이트
-    setInterval(function() {
+    setInterval(function () {
       const count = `Words: ${countWords(wcParent)}`;
       text.textContent = count;
     }, 200);
@@ -58,7 +61,7 @@ class WordCount extends HTMLParagraphElement {
 }
 
 // 새로운 요소 정의
-customElements.define('word-count', WordCount, { extends: 'p' });
+customElements.define("word-count", WordCount, { extends: "p" });
 ```
 
 > **참고:** `CustomElementRegistry`는 {{domxref("Window.customElements")}} 속성으로 접근할 수 있습니다.
diff --git a/files/ko/web/api/customevent/customevent/index.md b/files/ko/web/api/customevent/customevent/index.md
index 8da6a4f9580464..fe54daf5e617cd 100644
--- a/files/ko/web/api/customevent/customevent/index.md
+++ b/files/ko/web/api/customevent/customevent/index.md
@@ -27,19 +27,19 @@ CustomEvent(typeArg, options);
 
 ```js
 // CustomEvent 생성
-const catFound = new CustomEvent('animalfound', {
+const catFound = new CustomEvent("animalfound", {
   detail: {
-    name: 'cat'
-  }
+    name: "cat",
+  },
 });
-const dogFound = new CustomEvent('animalfound', {
+const dogFound = new CustomEvent("animalfound", {
   detail: {
-    name: 'dog'
-  }
+    name: "dog",
+  },
 });
 
 // 적합한 이벤트 수신기 부착
-obj.addEventListener('animalfound', (e) => console.log(e.detail.name));
+obj.addEventListener("animalfound", (e) => console.log(e.detail.name));
 
 // 이벤트 발송
 obj.dispatchEvent(catFound);
diff --git a/files/ko/web/api/customevent/detail/index.md b/files/ko/web/api/customevent/detail/index.md
index 414e21e4a77fef..78a81d709ba1a1 100644
--- a/files/ko/web/api/customevent/detail/index.md
+++ b/files/ko/web/api/customevent/detail/index.md
@@ -15,19 +15,19 @@ slug: Web/API/CustomEvent/detail
 
 ```js
 // CustomEvent 생성
-const catFound = new CustomEvent('animalfound', {
+const catFound = new CustomEvent("animalfound", {
   detail: {
-    name: 'cat'
-  }
+    name: "cat",
+  },
 });
-const dogFound = new CustomEvent('animalfound', {
+const dogFound = new CustomEvent("animalfound", {
   detail: {
-    name: 'dog'
-  }
+    name: "dog",
+  },
 });
 
 // 적합한 이벤트 수신기 부착
-obj.addEventListener('animalfound', (e) => console.log(e.detail.name));
+obj.addEventListener("animalfound", (e) => console.log(e.detail.name));
 
 // 이벤트 발송
 obj.dispatchEvent(catFound);
diff --git a/files/ko/web/api/customevent/index.md b/files/ko/web/api/customevent/index.md
index 84f72af58cd781..b60946ca646e03 100644
--- a/files/ko/web/api/customevent/index.md
+++ b/files/ko/web/api/customevent/index.md
@@ -2,6 +2,7 @@
 title: CustomEvent
 slug: Web/API/CustomEvent
 ---
+
 {{APIRef("DOM")}}
 
 **`CustomEvent`** 인터페이스는 어떤 목적이든간에 애플리케이션이 초기화한 이벤트를 나타냅니다.