diff --git a/.prettierignore b/.prettierignore index 47f06cd5f476ac..38813df427f09a 100644 --- 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 index d6a2e3fab0ead5..29bf98776e9a2f 100644 --- 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
- +
``` diff --git a/files/ko/web/html/attributes/crossorigin/index.md b/files/ko/web/html/attributes/crossorigin/index.md index cf98f0121c0dfc..c005f0de92c627 100644 --- 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,7 +24,9 @@ Media element의 `crossorigin` 속성은 CORS 세팅입니다. 아래의 {{HTMLElement("script")}} element를 통해 브라우저로 하여금 `https://example.com/example-framework.js` 스크립트를 user-credential 없이 요청하도록 명시할 수 있습니다. ```html - + ``` ### 예시: credential 포함한 Webmanifest @@ -32,7 +34,7 @@ Media element의 `crossorigin` 속성은 CORS 세팅입니다. [Manifest](/ko/docs/Web/Manifest) 요청 시 credential이 필요하다면 same-origin의 리소스라 하여도 `use-credentials` 값을 사용해야 합니다. ```html - + ``` ## 명세서 diff --git a/files/ko/web/html/attributes/rel/preload/index.md b/files/ko/web/html/attributes/rel/preload/index.md index 147346c239e9a1..d6a7e7a438388b 100644 --- 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 페이지를 스타일링하기 위해 주로 다음과 같이 ``를 이용해 CSS 파일을 로드할 것입니다. ```html - + ``` 하지만 여기서는 ``를 원하는 어떤 리소스에도 사용 가능한 프리로더로 바꿔주는 `preload`의 `rel` 값을 사용하겠습니다. 동시에 다음 사항도 명시해야 합니다. @@ -25,13 +25,13 @@ original_slug: Web/HTML/Link_types/preload ```html - + JavaScript 및 CSS 예제 소스 - - + + - + @@ -84,16 +84,19 @@ original_slug: Web/HTML/Link_types/preload ```html - + 비디오 프리로드 예제 - + ``` @@ -116,13 +119,23 @@ original_slug: Web/HTML/Link_types/preload ```html - + 웹 폰트 예제 - - - - + + + + … @@ -139,13 +152,21 @@ original_slug: Web/HTML/Link_types/preload ```html - + 반응형 프리로드 예제 - - - - + + + +
@@ -154,12 +175,12 @@ original_slug: Web/HTML/Link_types/preload diff --git a/files/ko/web/html/content_categories/index.md b/files/ko/web/html/content_categories/index.md index 3ccd227fd16f97..c8b24ee9ff2980 100644 --- 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 -

We hold these truths to be sacred & undeniable self-evident.

+

+ We hold these truths to be sacred & undeniable + self-evident. +

``` 올바른 영어는 아니지만, 두 요소를 제거하더라도 HTML은 유효합니다. diff --git a/files/ko/web/html/cors_enabled_image/index.md b/files/ko/web/html/cors_enabled_image/index.md index 23589f2c40c8f7..3275827155b9d2 100644 --- 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 index 0191013b8a11fb..2e58f6155c6ba3 100644 --- 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 - - Mozilla - +Mozilla ``` #### 결과 @@ -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 -

- 아래 제목으로 건너뛰기 -

+

아래 제목으로 건너뛰기

아래의 제목

@@ -242,7 +241,8 @@ a { display: block; margin-bottom: 0.5em } ##### HTML ```html -

마우스 드래그로 그림을 그려보세요. +

+ 마우스 드래그로 그림을 그려보세요. 다운로드

@@ -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,9 +318,7 @@ document.querySelector('a').addEventListener('click', event => 심각하게 흔한 실수는 "여기를 클릭"이나 "여기"라는 단어에 링크를 한다는 것입니다. ```html example-bad -

- 저희의 제품을 더 알아보시려면 여기를 클릭하세요. -

+

저희의 제품을 더 알아보시려면 여기를 클릭하세요.

``` #### 강한 링크 텍스트 @@ -325,9 +326,7 @@ document.querySelector('a').addEventListener('click', event => 다행히도 쉽게 수정할 수 있는 데다가, 접근성이 떨어지는 버전보다 더 짧습니다! ```html example-good -

- 저희의 제품을 더 알아보세요. -

+

저희의 제품을 더 알아보세요.

``` 접근성 보조 기술은 페이지 안의 모든 링크를 나열하는 단축키가 있습니다. 그러나 강한 링크 텍스트가 보조 기술 사용자에게만 도움을 주는 것은 아닙니다. 모든 링크 나열 단축키는 시각적 사용자가 페이지를 빠르게 훑는 것을 흉내 내는 것이기 때문입니다. @@ -357,9 +356,7 @@ document.querySelector('a').addEventListener('click', event => #### 비 HTML 리소스 링크 ```html - - 2017 연간 보고서 (PowerPoint) - +2017 연간 보고서 (PowerPoint) ``` 아이콘을 사용해 링크의 행동을 강조할 땐 {{HTMLAttrxRef("alt", "img", "대체 텍스트", 1)}}를 꼭 지정하세요. @@ -367,12 +364,12 @@ document.querySelector('a').addEventListener('click', event => ```html 위키백과 - (새 탭에서 열림) + (새 탭에서 열림) 2017 연간 보고서 - (PowerPoint 파일) + (PowerPoint 파일) ``` @@ -389,11 +386,10 @@ document.querySelector('a').addEventListener('click', event => 내용으로 건너뛰기 -
- … -
+
…
-
+
+ ``` ```css diff --git a/files/ko/web/html/element/abbr/index.md b/files/ko/web/html/element/abbr/index.md index 970d5e239aeef8..2095725b95ba18 100644 --- a/files/ko/web/html/element/abbr/index.md +++ b/files/ko/web/html/element/abbr/index.md @@ -145,8 +145,7 @@ abbr { #### HTML ```html -

Ashok's joke made me LOL big -time.

+

Ashok's joke made me LOL big time.

``` #### 결과 @@ -160,14 +159,16 @@ time.

#### HTML ```html -

HTML - is a markup language used to create the semantics and structure -of a web page.

- -

A Specification -(spec) is a document that outlines -in detail how a technology or API is intended to function and how it is -accessed.

+

+ HTML is a + markup language used to create the semantics and structure of a web page. +

+ +

+ A Specification (spec) + is a document that outlines in detail how a technology or API is intended to + function and how it is accessed. +

``` #### 결과 @@ -181,7 +182,9 @@ accessed.

#### 예제 ```html -

JavaScript Object Notation(JSON)은 경량의 데이터 교환 형식입니다.

+

+ JavaScript Object Notation(JSON)은 경량의 데이터 교환 형식입니다. +

``` 무엇보다 용어나 개념에 익숙하지 않은 사람, 언어를 새로 접한 사람, 그리고 인지력 문제를 겪고 있는 사용자에게 큰 도움이 됩니다. diff --git a/files/ko/web/html/element/address/index.md b/files/ko/web/html/element/address/index.md index 72926e67f67f41..d4c7d392ab4363 100644 --- a/files/ko/web/html/element/address/index.md +++ b/files/ko/web/html/element/address/index.md @@ -90,14 +90,14 @@ slug: Web/HTML/Element/address ```html
- You can contact author at - www.somedomain.com.
- If you see any bugs, please - contact webmaster.
- You may also want to visit us:
- Mozilla Foundation
- 331 E Evelyn Ave
- Mountain View, CA 94041
+ You can contact author at + www.somedomain.com.
+ If you see any bugs, please + contact webmaster.
+ You may also want to visit us:
+ Mozilla Foundation
+ 331 E Evelyn Ave
+ Mountain View, CA 94041
USA
``` diff --git a/files/ko/web/html/element/area/index.md b/files/ko/web/html/element/area/index.md index 2132a42b20b5be..ad3b4f9eb1609c 100644 --- a/files/ko/web/html/element/area/index.md +++ b/files/ko/web/html/element/area/index.md @@ -71,6 +71,7 @@ slug: Web/HTML/Element/area 이 요소는 [전역 특성](/ko/docs/Web/HTML/Global_attributes)을 포함합니다. - {{htmlattrdef("alt")}} + - : 이미지를 출력하지 않는 브라우저에서 대신 표시할 대안 텍스트입니다. 텍스트의 내용은 대안 텍스트 없이 이미지만 표시할 때와 동일한 수준의 선택지를 나타낼 수 있어야 합니다. {{htmlattrxref("href", "area")}} 특성이 존재할 경우 필수 사항입니다. - {{htmlattrdef("coords")}} @@ -92,6 +93,7 @@ slug: Web/HTML/Element/area - {{htmlattrdef("hreflang")}} - : 연결한 리소스의 언어를 나타냅니다. 가능한 값은 [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt)에 따릅니다. {{htmlattrxref("href", "area")}} 특성이 존재할 때만 사용하세요. - {{htmlattrdef("ping")}} + - : 하이퍼링크를 따라갈 때, 백그라운드에서 브라우저가 {{HTTPMethod("POST")}} 요청을 본문 `PING`으로 전송할 URL의 목록입니다. 공백으로 구분하며 주로 추적용으로 사용합니다. - {{htmlattrdef("referrerpolicy")}} {{experimental_inline}} @@ -107,6 +109,7 @@ slug: Web/HTML/Element/area - {{htmlattrdef("rel")}} - : For anchors containing the **href** attribute, this attribute specifies the relationship of the target object to the link object. The value is a comma-separated list of [link types values](/ko/docs/Web/HTML/Link_types). The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the **href** attribute is present. - {{htmlattrdef("shape")}} + - : 관련된 핫 스폿의 모양. The specifications for HTML 5 and HTML 4 define the values `rect`, which defines a rectangular region; `circle`, which defines a circular region; `poly`, which defines a polygon; and `default`, which indicates the entire region beyond any defined shapes. Many browsers, notably Internet Explorer 4 and higher, support `circ`, `polygon`, and `rectangle` as valid values for **shape**; these values are {{Non-standard_inline}}. - {{htmlattrdef("target")}} @@ -147,7 +150,7 @@ No effect. Browsers ignore it. (The W3C 5.3 fork of the HTML specification defin -350 x 150 pic +350 x 150 pic ``` ### 결과 diff --git a/files/ko/web/html/element/article/index.md b/files/ko/web/html/element/article/index.md index 285b8e84af85e7..bf3d9998c8313b 100644 --- a/files/ko/web/html/element/article/index.md +++ b/files/ko/web/html/element/article/index.md @@ -115,16 +115,12 @@ slug: Web/HTML/Element/article

I agree, dinos are my favorite.

-

- Posted on by Tom. -

+

Posted on by Tom.

-

- Posted on by Staff. -

+

Posted on by Staff.

``` diff --git a/files/ko/web/html/element/aside/index.md b/files/ko/web/html/element/aside/index.md index a54c54b7977272..eda2af0d3d734e 100644 --- a/files/ko/web/html/element/aside/index.md +++ b/files/ko/web/html/element/aside/index.md @@ -1,5 +1,5 @@ --- -title: '