Update Blob docs, add Blob.type (#3929)

* Update Blob docs
* Add Blob.type
* Update syntax section
* Proofread Blob index
* Apply Blob() review
* Clarify that `array` can contain mixed types

7 files changed, 353 insertions, 241 deletions

diff --git a/files/ko/web/api/blob/blob/index.html b/files/ko/web/api/blob/blob/index.html
deleted file mode 100644
index 9a82b69399..0000000000
--- a/files/ko/web/api/blob/blob/index.html
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: Blob()
-slug: Web/API/Blob/Blob
-tags:
-  - API
-  - Blob
-  - Constructor
-  - File API
-  - Reference
-translation_of: Web/API/Blob/Blob
----
-<div>{{APIRef("File API")}}</div>
-
-<p><code><strong>Blob()</strong></code> 생성자는 새로운 {{domxref("Blob")}} 객체를 반환합니다. 해당 블롭의 콘텐츠는 매개변수로 제공한 배열을 이어붙인 값입니다.</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox">var aBlob = new Blob(<em> array[</em>, <em>options]</em>);
-</pre>
-
-<h3 id="매개변수">매개변수</h3>
-
-<ul>
- <li><em>array</em>는 {{jsxref ( "ArrayBuffer")}}, {{domxref ( "ArrayBufferView")}}, {{domxref ( "Blob")}}, {{domxref ( "DOMString")}} 객체 또는 {{domxref ( "Blob")}} 안에 들어갈 이러한 객체가 혼합되어 있다. DOMString은 UTF-8로 인코딩 된다.</li>
- <li><em>options</em>는 다음 두 속성을 선택적으로 사용할 수 있는 <code>BlobPropertyBag</code> dictionary이다.
-  <ul>
-   <li><code>type</code>, (기본값 <code>""</code>) blob에 넣을 배열 내용의 MIME 형식을 나타낸다.</li>
-   <li><code>endings</code>, (기본값 <code>"transparent"</code>) 줄 끝 문자 \ n을 포함하는 문자열을 어떻게 써야 하는지를 지정.  다음 두 값을 사용 : <code>"native"</code>는 호스트 OS 파일 시스템 규칙과 일치하도록 줄 끝 문자가 변경된다는 것을 의미합니다. 즉, <code>"transparent"</code>는 끝이 변경없이 blob에 저장됨을 의미합니다. {{non-standard_inline}}</li>
-  </ul>
- </li>
-</ul>
-
-<h2 id="예제">예제</h2>
-
-<pre class="brush: js  language-js">var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;']; // an array consisting of a single DOMString
-var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob</pre>
-
-<h2 id="Specification" name="Specification">명세서</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">명세서</th>
-   <th scope="col">상태</th>
-   <th scope="col">비고</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('File API', '#constructorBlob', 'Blob()')}}</td>
-   <td>{{Spec2('File API')}}</td>
-   <td>기초정의(Initial definition)</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
-
-
-
-<p>{{Compat("api.Blob.Blob")}}</p>
diff --git a/files/ko/web/api/blob/blob/index.md b/files/ko/web/api/blob/blob/index.md
new file mode 100644
index 0000000000..a8b7cd8de5
--- /dev/null
+++ b/files/ko/web/api/blob/blob/index.md
@@ -0,0 +1,52 @@
+---
+title: Blob()
+slug: Web/API/Blob/Blob
+tags:
+  - API
+  - Blob
+  - Constructor
+  - File API
+  - Reference
+browser-compat: api.Blob.Blob
+translation_of: Web/API/Blob/Blob
+---
+{{APIRef("File API")}}
+
+**`Blob()`** 생성자는 새로운 {{domxref("Blob")}} 객체를 반환합니다. 반환하는 블롭의 데이터는 `array` 매개변수에 제공한 배열을 이어붙인 값입니다.
+
+## 구문
+
+```js
+new Blob(array);
+new Blob(array, options);
+```
+
+### 매개변수
+
+- `array`
+  - : {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("USVString")}} 또는 이 값들을 혼합해 구성한 {{jsxref("Array")}}입니다. {{domxref("Blob")}}의 데이터를 구성하게 됩니다. `USVString`은 UTF-8로 인코딩됩니다.
+- `options` {{optional_inline}}
+  - : 다음 속성을 지정할 수 있는 {{domxref("BlobPropertyBag")}} 객체입니다.
+    - `type` {{optional_inline}}
+      - : 블롭에 저장할 데이터의 {{Glossary("MIME type", "MIME 유형")}}입니다. 기본 값은 빈 문자열(`''`)입니다.
+    - `endings` {{optional_inline}} {{non-standard_inline}}
+      - : 데이터가 텍스트일 때, 개행 문자(`\n`)를 어떻게 해석할지 지정합니다. 기본 값인 `transparent`는 개행 문자를 바꾸지 않고 블롭 데이터로 복사합니다. `native`를 지정하면 호스트 시스템 컨벤션에 맞춰서 변환합니다.
+
+### 반환 값
+
+지정한 데이터를 담은 새로운 {{domxref("Blob")}} 객체.
+
+## 예제
+
+```js
+const array = ['<a id="a"><b id="b">hey!</b></a>']; // 하나의 DOMString을 포함한 배열
+const blob = new Blob(array, {type : 'text/html'}); // 생성한 블롭
+```
+
+## 명세
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
\ No newline at end of file
diff --git a/files/ko/web/api/blob/index.html b/files/ko/web/api/blob/index.html
deleted file mode 100644
index 09afa4aa31..0000000000
--- a/files/ko/web/api/blob/index.html
+++ /dev/null
@@ -1,151 +0,0 @@
----
-title: Blob
-slug: Web/API/Blob
-tags:
-  - API
-  - Blob
-  - File
-  - File API
-  - Interface
-  - Reference
-  - 파일
-translation_of: Web/API/Blob
----
-<div>{{APIRef("File API")}}</div>
-
-<p><span class="seoSummary"><code>Blob</code> 객체는 파일류의 불변하는 미가공 데이터를 나타냅니다.</span> 텍스트와 이진 데이터의 형태로 읽을 수 있으며, {{domxref("ReadableStream")}}으로 변환한 후 그 메서드를 사용해 데이터를 처리할 수도 있습니다.</p>
-
-<p><code>Blob</code>은 JavaScript 네이티브 형태가 아닌 데이터도 표현할 수 있습니다. {{domxref("File")}} 인터페이스는 사용자 시스템의 파일을 지원하기 위해 <code>Blob</code> 인터페이스를 확장한 것이므로, 모든 블롭 기능을 상속합니다.</p>
-
-<h2 id="Blob_사용하기"><code>Blob</code> 사용하기</h2>
-
-<p>블롭이 아닌 객체와 데이터에서 <code>Blob</code>을 생성하려면 {{domxref("Blob.Blob", "Blob()")}} 생성자를 사용하세요. 다른 블롭의 일부에서 새로운 블롭을 생성할 땐 {{domxref("Blob.slice", "slice()")}} 메서드를 사용할 수 있습니다. 사용자의 파일 시스템 내 파일을 <code>Blob</code>으로 얻는 방법은 {{domxref("File")}} 문서를 참고하세요.</p>
-
-<p><code>Blob</code> 객체를 허용하는 API의 목록은 <code>File</code> 문서에도 있습니다.</p>
-
-<dl>
-</dl>
-
-<h2 id="생성자">생성자</h2>
-
-<dl>
- <dt>{{domxref("Blob.Blob", "Blob()")}}</dt>
- <dd>매개변수로 제공한 배열의 모든 데이터를 합친 데이터를 담은 새로운 <code>Blob</code> 객체를 반환합니다.</dd>
-</dl>
-
-<h2 id="속성">속성</h2>
-
-<dl>
- <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
- <dd><code>Blob</code> 객체가 담은 데이터의 바이트 단위의 사이즈입니다.</dd>
- <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
- <dd><code>Blob</code> 객체가 담은 데이터의 MIME 유형을 나타내는 문자열입니다. 유형을 알 수 없는 경우 빈 문자열을 반환합니다.</dd>
-</dl>
-
-<h2 id="메서드">메서드</h2>
-
-<dl>
- <dt>{{DOMxRef("Blob.arrayBuffer()")}}</dt>
- <dd><code>Blob</code>의 전체 내용을 이진 데이터로 담은 {{domxref("ArrayBuffer")}}로 이행하는 {{jsxref("Promise")}}를 반환합니다</dd>
- <dt>{{domxref("Blob.slice()")}}</dt>
- <dd>메서드를 호출한 블롭의 바이트를 주어진 시작 바이트와 끝 바이트 범위에서 복제해 새로운 <code>Blob</code> 객체를 생성하고 반환합니다.</dd>
- <dt>{{domxref("Blob.stream()")}}</dt>
- <dd><code>Blob</code>의 콘텐츠를 읽을 수 있는 {{domxref("ReadableStream")}}을 반환합니다.</dd>
- <dt>{{domxref("Blob.text()")}}</dt>
- <dd><code>Blob</code>의 전체 내용을 UTF-8 텍스트로 담은 {{domxref("USVString")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd>
-</dl>
-
-<h2 id="예제">예제 </h2>
-
-<h3 id="블롭_생성하기">블롭 생성하기</h3>
-
-<p>{{DOMxRef("Blob.Blob", "Blob()")}} 생성자를 사용해 다른 객체에서 블롭을 생성하세요. 예를 들어, 아래 코드는 문자열에서 블롭을 생성합니다.</p>
-
-<pre class="brush: js">const obj = {hello: 'world'};
-const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});</pre>
-
-<h3 id="형식_배열의_콘텐츠를_나타내는_URL_생성하기">형식 배열의 콘텐츠를 나타내는 URL 생성하기</h3>
-
-<p>다음 코드는 JavaScript {{jsxref("TypedArray")}}를 생성한 후, 그 데이터를 담은 <code>Blob</code> 객체도 만듭니다. 그 후, {{domxref("URL.createObjectURL()")}}을 호출해 블롭을 {{glossary("URL")}}로 변환합니다.</p>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;p&gt;This example creates a typed array containing the ASCII codes
-   for the space character through the letter Z, then converts it
-   to an object URL. A link to open that object URL is created.
-   Click the link to see the decoded object URL.&lt;/p&gt;</pre>
-
-<h4 id="JavaScript">JavaScript</h4>
-
-<p>이 코드의 주제는 <code>typedArrayToURL()</code> 함수로, 주어진 <code>TypedArray</code>에서 <code>Blob</code>을 생성하고, 블롭의 객체 URL을 반환합니다. 데이터를 객체 URL로 변환한 후에는 {{HTMLElement("img")}} 요소의 {{htmlattrxref("src", "img")}} 특성에 지정하는 등 다양하게 사용할 수 있습니다. (물론 해당 객체가 이미지여야 합니다)</p>
-
-<pre class="brush: js">function typedArrayToURL(typedArray, mimeType) {
-  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
-}
-
-const bytes = new Uint8Array(59);
-
-for(let i = 0; i &lt; 59; i++) {
-  bytes[i] = 32 + i;
-}
-
-const url = typedArrayToURL(bytes, 'text/plain');
-
-const link = document.createElement('a');
-link.href = url;
-link.innerText = 'Open the array URL';
-
-document.body.appendChild(link);</pre>
-
-<h4 id="결과">결과</h4>
-
-<p>{{EmbedLiveSample("형식_배열의_콘텐츠를_나타내는_URL_생성하기", 600, 200)}}</p>
-
-<h3 id="블롭에서_데이터_추출하기">블롭에서 데이터 추출하기</h3>
-
-<p>블롭에서 데이터를 읽는 방법 하나는 {{domxref("FileReader")}}를 사용하는 것입니다. 다음 코드는 <code>Blob</code>의 콘텐츠를 형식 배열로서 읽어 들입니다.</p>
-
-<pre class="brush: js">const reader = new FileReader();
-reader.addEventListener('loadend', () =&gt; {
-   // reader.result contains the contents of blob as a typed array
-});
-reader.readAsArrayBuffer(blob);</pre>
-
-<p>또 다른 방법은 블롭을 {{domxref("Response")}}로 사용하는 것입니다. 다음 코드는 <code>Blob</code>의 내용을 텍스트로 읽어옵니다.</p>
-
-<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> text <span class="operator token">=</span> <span class="keyword token">await</span> <span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">Response</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">text</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
-
-<p><code>FileReader</code>의 다른 메서드를 사용하면 블롭의 데이터를 문자열이나 데이터 URL로도 읽어올 수 있습니다.</p>
-
-<h2 id="명세">명세</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">명세</th>
-   <th scope="col">상태</th>
-   <th scope="col">비고</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('File API', '#blob-section', 'The <code>Blob</code> interface')}}</td>
-   <td>{{Spec2('File API')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
-
-
-
-<p>{{Compat("api.Blob")}}</p>
-
-<h2 id="같이_보기">같이 보기</h2>
-
-<ul>
- <li>{{domxref("BlobBuilder")}}</li>
- <li>{{domxref("FileReader")}}</li>
- <li>{{domxref("File")}}</li>
- <li>{{domxref("URL.createObjectURL")}}</li>
- <li><a href="/ko/docs/Web/API/File/Using_files_from_web_applications">웹 애플리케이션에서 파일 사용하기</a></li>
-</ul>
diff --git a/files/ko/web/api/blob/index.md b/files/ko/web/api/blob/index.md
new file mode 100644
index 0000000000..7e64586ef7
--- /dev/null
+++ b/files/ko/web/api/blob/index.md
@@ -0,0 +1,143 @@
+---
+title: Blob
+slug: Web/API/Blob
+tags:
+  - API
+  - Blob
+  - File API
+  - Interface
+  - Reference
+  - 파일
+browser-compat: api.Blob
+translation_of: Web/API/Blob
+---
+{{APIRef("File API")}}
+
+**`Blob`** 객체는 파일류의 불변하는 미가공 데이터를 나타냅니다. 텍스트와 이진 데이터의 형태로 읽을 수 있으며, {{domxref("ReadableStream")}}으로 변환한 후 스트림 메서드를 사용해 데이터를 처리할 수도 있습니다.
+
+`Blob`은 JavaScript 네이티브 형태가 아닌 데이터도 표현할 수 있습니다. {{domxref("File")}}이 `Blob`에 기반한 인터페이스로, 사용자 시스템의 파일을 지원하기 위해 `Blob` 인터페이스를 상속해 기능을 확장한 것입니다.
+
+## 블롭 사용하기
+
+블롭이 아닌 객체와 데이터로 `Blob`을 생성하려면 {{domxref("Blob.Blob", "Blob()")}} 생성자를 사용하세요. 다른 블롭의 일부에서 새로운 블롭을 생성할 땐 {{domxref("Blob.slice", "slice()")}} 메서드를 사용할 수 있습니다. 사용자의 파일 시스템 내 파일을 `Blob`으로 얻는 방법은 {{domxref("File")}} 문서를 참고하세요.
+
+`Blob` 객체를 받을 수 있는 API의 목록도 {{domxref("File")}} 문서에 있습니다.
+
+## 생성자
+
+- {{domxref("Blob.Blob", "Blob()")}}
+  - : 매개변수로 제공한 배열의 모든 데이터를 합친 데이터를 담은 새로운 `Blob` 객체를 반환합니다.
+
+## 속성
+
+- {{domxref("Blob.prototype.size")}} {{readonlyinline}}
+  - : `Blob` 객체가 담은 데이터의 바이트 단위의 사이즈입니다.
+- {{domxref("Blob.prototype.type")}} {{readonlyinline}}
+  - : `Blob` 객체가 담은 데이터의 MIME 유형을 나타내는 문자열입니다. 유형을 알 수 없는 경우 빈 문자열을 반환합니다.
+
+## 인스턴스 메서드
+
+- {{DOMxRef("Blob.prototype.arrayBuffer()")}}
+  - : `Blob`의 전체 내용을 이진 데이터로 담은 {{domxref("ArrayBuffer")}}로 이행하는 프로미스를 반환합니다
+- {{domxref("Blob.prototype.slice()")}}
+  - : 메서드를 호출한 블롭의 바이트를 주어진 시작 바이트와 끝 바이트 범위에서 복제해 새로운 `Blob` 객체를 생성하고 반환합니다.
+- {{domxref("Blob.prototype.stream()")}}
+  - : `Blob`의 콘텐츠를 읽을 수 있는 {{domxref("ReadableStream")}}을 반환합니다.
+- {{domxref("Blob.prototype.text()")}}
+  - : `Blob`의 전체 내용을 UTF-8 텍스트로 담은 {{domxref("USVString")}}으로 이행하는 프로미스를 반환합니다.
+
+## 예제
+
+### 블롭 생성하기
+
+{{DOMxRef("Blob.Blob", "Blob()")}} 생성자를 사용해 다른 객체에서 블롭을 생성할 수 있습니다. 예를 들어, 아래 코드는 문자열에서 블롭을 생성합니다.
+
+```js
+const obj = {hello: 'world'};
+const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});
+```
+
+### 형식화 배열의 콘텐츠를 나타내는 URL 생성하기
+
+다음 코드는 JavaScript [형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays)을 생성하고, 배열의 데이터를 담은 `Blob` 객체도 만듭니다. 그 후, {{domxref("URL.createObjectURL()")}}을 호출해 블롭을 {{glossary("URL")}}로 변환합니다.
+
+#### HTML
+
+```html
+<p>이 예제는 스페이스 문자부터 대문자 Z까지의 ASCII
+   코드를 담은 형식화 배열을 생성한 후 객체 URL로
+   변환합니다. 아래에 링크를 추가했으니, 클릭해서
+   디코딩한 객체 URL을 확인하세요.</p>
+```
+
+#### JavaScript
+
+아래 코드의 주제는 `typedArrayToURL()` 함수로, 주어진 형식화 배열에서 `Blob`을 생성한 후 블롭의 객체 URL을 반환합니다. 데이터를 객체 URL로 변환한 후에는 (데이터가 이미지 정보라면) {{HTMLElement("img")}} 요소의 {{htmlattrxref("src", "img")}} 특성에 지정하는 등 다양하게 사용할 수 있습니다. 
+
+```js
+function typedArrayToURL(typedArray, mimeType) {
+  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
+}
+
+const bytes = new Uint8Array(59);
+
+for(let i = 0; i < 59; i++) {
+  bytes[i] = 32 + i;
+}
+
+const url = typedArrayToURL(bytes, 'text/plain');
+
+const link = document.createElement('a');
+link.href = url;
+link.innerText = '배열 URL 열기';
+
+document.body.appendChild(link);
+```
+
+#### 결과
+
+예제의 링크를 클릭해서 브라우저가 객체 URL을 디코딩한 결과를 확인하세요.
+
+{{EmbedLiveSample("형식화_배열의_콘텐츠를_나타내는_URL_생성하기", 600, 200)}}
+
+### 블롭에서 데이터 추출하기
+
+블롭에서 데이터를 읽는 방법 중 하나는 {{domxref("FileReader")}}를 사용하는 것입니다. 다음 코드는 `Blob`의 콘텐츠를 형식화 배열로 가져옵니다.
+
+```js
+const reader = new FileReader();
+reader.addEventListener('loadend', () => {
+   // reader.result에 블롭의 내용이 형식화 배열로 들어있음
+});
+reader.readAsArrayBuffer(blob);
+```
+
+{{domxref("Response")}}를 사용하는 방법도 있습니다. 다음 코드는 `Blob`의 내용을 텍스트로 가져옵니다.
+
+```js
+const text = await (new Response(blob)).text();
+```
+
+텍스트로 가져올 땐 {{DOMxRef("Blob.prototype.text()")}}를 사용할 수도 있습니다.
+
+```js
+const text = await blob.text();
+```
+
+`FileReader`의 다른 메서드를 사용하면 블롭의 데이터를 문자열이나 데이터 URL로도 읽어올 수 있습니다.
+
+## 명세
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{domxref("BlobBuilder")}}
+- {{domxref("FileReader")}}
+- {{domxref("File")}}
+- {{domxref("URL.createObjectURL")}}
+- [웹 애플리케이션에서 파일 사용하기](/ko/docs/Web/API/File/Using_files_from_web_applications)
diff --git a/files/ko/web/api/blob/size/index.html b/files/ko/web/api/blob/size/index.html
deleted file mode 100644
index df9a7bfa60..0000000000
--- a/files/ko/web/api/blob/size/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: File.size
-slug: Web/API/Blob/size
-translation_of: Web/API/File/size
-original_slug: Web/API/File/size
----
-<p>{{APIRef("File API") }}</p>
-
-<h2 id="Summary">Summary</h2>
-
-<p>파일의 크기를 바이트 단위로 반환합니다.</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre>var size = <em>instanceOfFile</em>.size</pre>
-
-<h2 id="Value">Value</h2>
-
-<p>숫자</p>
-
-<h2 id="Specification">Specification</h2>
-
-<p>사양에 포함되지 않았습니다.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{domxref("Blob.size")}}</li>
-</ul>
-
-<p> </p>
diff --git a/files/ko/web/api/blob/size/index.md b/files/ko/web/api/blob/size/index.md
new file mode 100644
index 0000000000..622bc7ca9b
--- /dev/null
+++ b/files/ko/web/api/blob/size/index.md
@@ -0,0 +1,73 @@
+---
+title: Blob.size
+slug: Web/API/Blob/size
+tags:
+  - API
+  - Blob
+  - Bytes
+  - File API
+  - Files
+  - Property
+  - Reference
+  - length
+  - size
+browser-compat: api.Blob.size
+translation_of: Web/API/Blob/size
+---
+{{APIRef("File API") }}
+
+{{domxref("Blob")}} 인터페이스의 **`size`** 속성은 {{domxref("Blob")}} 또는 {{domxref("File")}}의 크기를 바이트 단위로 반환합니다.
+
+## 값
+
+`Blob` 또는 {{domxref("File")}}과 같은 `Blob` 기반 객체의 데이터 크기를 바이트 단위로 나타낸 숫자입니다.
+
+## 예제
+
+이 예제는 `file` 유형의 {{htmlelement("input")}} 요소를 통해 사용자가 선택한 여러 파일을 순회하면서, 각각의 파일 이름과 바이트 크기를 출력합니다.
+
+### HTML
+
+```html
+<input type="file" id="input" multiple>
+<output id="output">파일 선택...</output>
+```
+
+```css hidden
+output {
+  display: block;
+  margin-top: 16px;
+}
+```
+
+### JavaScript
+
+```js
+const input = document.getElementById('input');
+const output = document.getElementById('output');
+
+input.addEventListener('change', (event) => {
+  output.innerText = '';
+
+  for (const file of event.target.files) {
+    output.innerText += `${file.name}의 크기는 ${file.size} 바이트입니다.\n`;
+  }
+});
+```
+
+### 결과
+
+{{EmbedLiveSample("예제")}}
+
+## 명세
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{domxref("Blob")}}
+- [웹 애플리케이션에서 파일 사용하기](/ko/docs/Web/API/File/Using_files_from_web_applications)
diff --git a/files/ko/web/api/blob/type/index.md b/files/ko/web/api/blob/type/index.md
new file mode 100644
index 0000000000..7fe4e3f099
--- /dev/null
+++ b/files/ko/web/api/blob/type/index.md
@@ -0,0 +1,85 @@
+---
+title: Blob.type
+slug: Web/API/Blob/type
+tags:
+  - API
+  - Blob
+  - DOM
+  - File
+  - File API
+  - Format
+  - MIME
+  - MIME Type
+  - Property
+  - Reference
+  - Type
+browser-compat: api.Blob.type
+translation_of: Web/API/Blob/type
+---
+{{APIRef("File API")}}
+
+{{domxref("Blob")}} 객체의 **`type`** 속성은 데이터의 {{Glossary("MIME type", "MIME 유형")}}을 반환합니다.
+
+## 값
+
+파일의 MIME 유형을 나타내는 {{domxref("DOMString")}}. 유형을 알아낼 수 없는 경우 빈 문자열입니다.
+
+## 예제
+
+이 예제는 사용자가 선택한 모든 파일 각각에 대해, 허용된 이미지 파일 유형 중 하나인지 검사합니다.
+
+### HTML
+
+```html
+<input type="file" id="input" multiple>
+<output id="output">이미지 파일 선택...</output>
+```
+
+```css hidden
+output {
+  display: block;
+  margin-top: 16px;
+}
+```
+
+### JavaScript
+
+```js
+// 우리 애플리케이션에서는 GIF, PNG, JPEG 이미지만 허용
+const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+const input = document.getElementById('input');
+const output = document.getElementById('output');
+
+input.addEventListener('change', (event) => {
+  const files = event.target.files;
+
+  if (files.length === 0) {
+    output.innerText = '이미지 파일 선택...';
+    return;
+  }
+
+  if (Array.from(files).every((file) => allowedFileTypes.includes(file.type))) {
+    output.innerText = '모든 파일 사용 가능!';
+  } else {
+    output.innerText = '이미지 파일만 선택하세요.';
+  }
+});
+```
+
+### 결과
+
+{{EmbedLiveSample("예제")}}
+
+## 명세
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{domxref("Blob")}}
+- [웹 애플리케이션에서 파일 사용하기](/ko/docs/Web/API/File/Using_files_from_web_applications)