ko: Format /web/html using Prettier

mdn · Jul 30, 2023 · db94547 · db94547
1 parent cf1257c
commit db94547
Show file tree

Hide file tree

Showing 113 changed files with 1,484 additions and 1,200 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -68,7 +68,6 @@ build/
 /files/ko/web/**/*.md
 /files/ko/web/api/**/*.md
 /files/ko/web/css/**/*.md
-/files/ko/web/html/**/*.md
 /files/ko/web/javascript/**/*.md
 /files/ko/web/svg/**/*.md
 

diff --git a/files/ko/web/html/attributes/autocomplete/index.md b/files/ko/web/html/attributes/autocomplete/index.md
@@ -143,7 +143,7 @@ slug: Web/HTML/Attributes/autocomplete
 ```html
 <div>
   <label for="cc-number">Enter your credit card number</label>
-  <input type="number" name="cc-number" id="cc-number" autocomplete="off">
+  <input type="number" name="cc-number" id="cc-number" autocomplete="off" />
 </div>
 ```
 

diff --git a/files/ko/web/html/attributes/crossorigin/index.md b/files/ko/web/html/attributes/crossorigin/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'HTML attribute: crossorigin'
+title: "HTML attribute: crossorigin"
 slug: Web/HTML/Attributes/crossorigin
 ---
 
@@ -24,15 +24,17 @@ Media element의 `crossorigin` 속성은 CORS 세팅입니다.
 아래의 {{HTMLElement("script")}} element를 통해 브라우저로 하여금 `https://example.com/example-framework.js` 스크립트를 user-credential 없이 요청하도록 명시할 수 있습니다.
 
 ```html
-<script src="https://example.com/example-framework.js" crossorigin="anonymous"></script>
+<script
+  src="https://example.com/example-framework.js"
+  crossorigin="anonymous"></script>
 ```
 
 ### 예시: credential 포함한 Webmanifest
 
 [Manifest](/ko/docs/Web/Manifest) 요청 시 credential이 필요하다면 same-origin의 리소스라 하여도 `use-credentials` 값을 사용해야 합니다.
 
 ```html
-<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials">
+<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />
 ```
 
 ## 명세서

diff --git a/files/ko/web/html/attributes/rel/preload/index.md b/files/ko/web/html/attributes/rel/preload/index.md
@@ -1,5 +1,5 @@
 ---
-title: '링크 유형: preload'
+title: "링크 유형: preload"
 slug: Web/HTML/Attributes/rel/preload
 original_slug: Web/HTML/Link_types/preload
 ---
@@ -13,7 +13,7 @@ original_slug: Web/HTML/Link_types/preload
 페이지를 스타일링하기 위해 주로 다음과 같이 `<link>`를 이용해 CSS 파일을 로드할 것입니다.
 
 ```html
-<link rel="stylesheet" href="styles/main.css">
+<link rel="stylesheet" href="styles/main.css" />
 ```
 
 하지만 여기서는 `<link>`를 원하는 어떤 리소스에도 사용 가능한 프리로더로 바꿔주는 `preload`의 `rel` 값을 사용하겠습니다. 동시에 다음 사항도 명시해야 합니다.
@@ -25,13 +25,13 @@ original_slug: Web/HTML/Link_types/preload
 
 ```html
 <head>
-  <meta charset="utf-8">
+  <meta charset="utf-8" />
   <title>JavaScript 및 CSS 예제 소스</title>
 
-  <link rel="preload" href="style.css" as="style">
-  <link rel="preload" href="main.js" as="script">
+  <link rel="preload" href="style.css" as="style" />
+  <link rel="preload" href="main.js" as="script" />
 
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="style.css" />
 </head>
 
 <body>
@@ -84,16 +84,19 @@ original_slug: Web/HTML/Link_types/preload
 
 ```html
 <head>
-  <meta charset="utf-8">
+  <meta charset="utf-8" />
   <title>비디오 프리로드 예제</title>
 
-  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
+  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4" />
 </head>
 <body>
   <video controls>
-    <source src="sintel-short.mp4" type="video/mp4">
-    <source src="sintel-short.webm" type="video/webm">
-    <p>현재 브라우저는 HTML5를 지원하지 않습니다. 대신 <a href="sintel-short.mp4">이 비디오 링크</a>를 사용하세요.</p>
+    <source src="sintel-short.mp4" type="video/mp4" />
+    <source src="sintel-short.webm" type="video/webm" />
+    <p>
+      현재 브라우저는 HTML5를 지원하지 않습니다. 대신
+      <a href="sintel-short.mp4">이 비디오 링크</a>를 사용하세요.
+    </p>
   </video>
 </body>
 ```
@@ -116,13 +119,23 @@ original_slug: Web/HTML/Link_types/preload
 
 ```html
 <head>
-  <meta charset="utf-8">
+  <meta charset="utf-8" />
   <title>웹 폰트 예제</title>
 
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
-  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin>
-
-  <link href="style.css" rel="stylesheet">
+  <link
+    rel="preload"
+    href="fonts/cicle_fina-webfont.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin />
+  <link
+    rel="preload"
+    href="fonts/zantroke-webfont.woff2"
+    as="font"
+    type="font/woff2"
+    crossorigin />
+
+  <link href="style.css" rel="stylesheet" />
 </head>
 <body>
   …
@@ -139,13 +152,21 @@ original_slug: Web/HTML/Link_types/preload
 
 ```html
 <head>
-  <meta charset="utf-8">
+  <meta charset="utf-8" />
   <title>반응형 프리로드 예제</title>
 
-  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
-  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
-
-  <link rel="stylesheet" href="main.css">
+  <link
+    rel="preload"
+    href="bg-image-narrow.png"
+    as="image"
+    media="(max-width: 600px)" />
+  <link
+    rel="preload"
+    href="bg-image-wide.png"
+    as="image"
+    media="(min-width: 601px)" />
+
+  <link rel="stylesheet" href="main.css" />
 </head>
 <body>
   <header>
@@ -154,12 +175,12 @@ original_slug: Web/HTML/Link_types/preload
 
   <script>
     var mediaQueryList = window.matchMedia("(max-width: 600px)");
-    var header = document.querySelector('header');
+    var header = document.querySelector("header");
 
     if (mediaQueryList.matches) {
-      header.style.backgroundImage = 'url(bg-image-narrow.png)';
+      header.style.backgroundImage = "url(bg-image-narrow.png)";
     } else {
-      header.style.backgroundImage = 'url(bg-image-wide.png)';
+      header.style.backgroundImage = "url(bg-image-wide.png)";
     }
   </script>
 </body>

diff --git a/files/ko/web/html/content_categories/index.md b/files/ko/web/html/content_categories/index.md
@@ -144,7 +144,10 @@ slug: Web/HTML/Content_categories
 예를 들어, {{HTMLElement("del")}} 과 {{HTMLELement("ins")}} 요소는 투명합니다:
 
 ```html
-<p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p>
+<p>
+  We hold these truths to be <del><em>sacred &amp; undeniable</em></del>
+  <ins>self-evident</ins>.
+</p>
 ```
 
 올바른 영어는 아니지만, 두 요소를 제거하더라도 HTML은 유효합니다.

diff --git a/files/ko/web/html/cors_enabled_image/index.md b/files/ko/web/html/cors_enabled_image/index.md
@@ -60,9 +60,10 @@ The code that starts the download (say, when the user clicks a "Download" button
 
 ```js
 function startDownload() {
-  let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
+  let imageURL =
+    "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
 
-  downloadedImg = new Image;
+  downloadedImg = new Image();
   downloadedImg.crossOrigin = "Anonymous";
   downloadedImg.addEventListener("load", imageReceived, false);
   downloadedImg.src = imageURL;
@@ -90,8 +91,7 @@ function imageReceived() {
 
   try {
     localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
-  }
-  catch(err) {
+  } catch (err) {
     console.log("Error: " + err);
   }
 }

diff --git a/files/ko/web/html/element/a/index.md b/files/ko/web/html/element/a/index.md
@@ -166,9 +166,7 @@ slug: Web/HTML/Element/a
 #### HTML
 
 ```html
-<a href="https://www.mozilla.com">
-  Mozilla
-</a>
+<a href="https://www.mozilla.com">Mozilla</a>
 ```
 
 #### 결과
@@ -186,7 +184,10 @@ slug: Web/HTML/Element/a
 ```
 
 ```css hidden
-a { display: block; margin-bottom: 0.5em }
+a {
+  display: block;
+  margin-bottom: 0.5em;
+}
 ```
 
 #### 결과
@@ -197,9 +198,7 @@ a { display: block; margin-bottom: 0.5em }
 
 ```html
 <!-- <a> 요소로 아래의 구획에 연결 -->
-<p><a href="#Section_further_down">
-  아래 제목으로 건너뛰기
-</a></p>
+<p><a href="#Section_further_down">아래 제목으로 건너뛰기</a></p>
 
 <!-- 링크가 향할 제목 -->
 <h2 id="Section_further_down">아래의 제목</h2>
@@ -242,7 +241,8 @@ a { display: block; margin-bottom: 0.5em }
 ##### HTML
 
 ```html
-<p>마우스 드래그로 그림을 그려보세요.
+<p>
+  마우스 드래그로 그림을 그려보세요.
   <a href="" download="my_painting.png">다운로드</a>
 </p>
 
@@ -270,28 +270,31 @@ a {
 ##### JavaScript
 
 ```js
-var canvas = document.querySelector('canvas'),
-    c = canvas.getContext('2d');
-c.fillStyle = 'hotpink';
+var canvas = document.querySelector("canvas"),
+  c = canvas.getContext("2d");
+c.fillStyle = "hotpink";
 
 function draw(x, y) {
   if (isDrawing) {
     c.beginPath();
-    c.arc(x, y, 10, 0, Math.PI*2);
+    c.arc(x, y, 10, 0, Math.PI * 2);
     c.closePath();
     c.fill();
   }
 }
 
-canvas.addEventListener('mousemove', event =>
-  draw(event.offsetX, event.offsetY)
-);
-canvas.addEventListener('mousedown', () => isDrawing = true);
-canvas.addEventListener('mouseup', () => isDrawing = false);
-
-document.querySelector('a').addEventListener('click', event =>
-  event.target.href = canvas.toDataURL()
+canvas.addEventListener("mousemove", (event) =>
+  draw(event.offsetX, event.offsetY),
 );
+canvas.addEventListener("mousedown", () => (isDrawing = true));
+canvas.addEventListener("mouseup", () => (isDrawing = false));
+
+document
+  .querySelector("a")
+  .addEventListener(
+    "click",
+    (event) => (event.target.href = canvas.toDataURL()),
+  );
 ```
 
 ##### 결과
@@ -315,19 +318,15 @@ document.querySelector('a').addEventListener('click', event =>
 심각하게 흔한 실수는 "여기를 클릭"이나 "여기"라는 단어에 링크를 한다는 것입니다.
 
 ```html example-bad
-<p>
-  저희의 제품을 더 알아보시려면 <a href="/products">여기</a>를 클릭하세요.
-</p>
+<p>저희의 제품을 더 알아보시려면 <a href="/products">여기</a>를 클릭하세요.</p>
 ```
 
 #### 강한 링크 텍스트
 
 다행히도 쉽게 수정할 수 있는 데다가, 접근성이 떨어지는 버전보다 더 짧습니다!
 
 ```html example-good
-<p>
-  저희의 <a href="/products">제품을 더 알아보세요</a>.
-</p>
+<p>저희의 <a href="/products">제품을 더 알아보세요</a>.</p>
 ```
 
 접근성 보조 기술은 페이지 안의 모든 링크를 나열하는 단축키가 있습니다. 그러나 강한 링크 텍스트가 보조 기술 사용자에게만 도움을 주는 것은 아닙니다. 모든 링크 나열 단축키는 시각적 사용자가 페이지를 빠르게 훑는 것을 흉내 내는 것이기 때문입니다.
@@ -357,22 +356,20 @@ document.querySelector('a').addEventListener('click', event =>
 #### 비 HTML 리소스 링크
 
 ```html
-<a href="2017-annual-report.ppt">
-  2017 연간 보고서 (PowerPoint)
-</a>
+<a href="2017-annual-report.ppt">2017 연간 보고서 (PowerPoint)</a>
 ```
 
 아이콘을 사용해 링크의 행동을 강조할 땐 {{HTMLAttrxRef("alt", "img", "대체 텍스트", 1)}}를 꼭 지정하세요.
 
 ```html
 <a target="_blank" href="https://ko.wikipedia.org">
   위키백과
-  <img alt="(새 탭에서 열림)" src="newtab.svg">
+  <img alt="(새 탭에서 열림)" src="newtab.svg" />
 </a>
 
 <a href="2017-annual-report.ppt">
   2017 연간 보고서
-  <img alt="(PowerPoint 파일)" src="ppt-icon.svg">
+  <img alt="(PowerPoint 파일)" src="ppt-icon.svg" />
 </a>
 ```
 
@@ -389,11 +386,10 @@ document.querySelector('a').addEventListener('click', event =>
 <body>
   <a href="#content">내용으로 건너뛰기</a>
 
-  <header>
-    …
-  </header>
+  <header>…</header>
 
-  <main id="content"> <!-- 여기로 건너뜀 -->
+  <main id="content"><!-- 여기로 건너뜀 --></main>
+</body>
 ```
 
 ```css