Update Intl.DateTimeFormat

2 files changed, 348 insertions, 226 deletions

diff --git a/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md
new file mode 100644
index 0000000000..a27f5aa944
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md
@@ -0,0 +1,273 @@
+---
+title: Intl.DateTimeFormat() 생성자
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+tags:
+  - Constructor
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Localization
+  - Reference
+browser-compat: javascript.builtins.Intl.DateTimeFormat.DateTimeFormat
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+---
+{{JSRef}}
+
+**`Intl.DateTimeFormat`** 생성자는 언어에 맞는 날짜 및 시간 서식을 적용하기 위한 {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} 객체를 생성합니다.
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html", "taller")}}
+
+## 구문
+
+```js
+new Intl.DateTimeFormat()
+new Intl.DateTimeFormat(locales)
+new Intl.DateTimeFormat(locales, options)
+```
+
+### 매개변수
+
+- `locales` {{optional_inline}}
+
+  - : [BCP 47](https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8) 언어 태그를 포함하는 문자열이나 문자열의 배열입니다. 브라우저 기본 로케일을 사용하려면 빈 배열을 지정하세요. `en-US-u-ca-buddhist`처럼 유니코드 확장 형태도 지원합니다. 로케일 매개변수의 일반적인 형식 및 해석은 {{jsxref("Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} 문서를 참고하세요. 다음의 유니코드 확장 키를 사용할 수 있습니다.
+
+    - `nu`
+      - : 사용할 기수법. "`arab`",
+        "`arabext`", "`bali`", "`beng`",
+        "`deva`", "`fullwide`", "`gujr`",
+        "`guru`", "`hanidec`", "`khmr`",
+        "`knda`", "`laoo`", "`latn`",
+        "`limb`", "`mlym`", "`mong`",
+        "`mymr`", "`orya`", "`tamldec`",
+        "`telu`", "`thai`", "`tibt`" 등을 사용할 수 있습니다.
+    - `ca`
+      - : 역법. "`buddhist`",
+        "`chinese`", "`coptic`", "`ethiopia`",
+        "`ethiopic`", "`gregory`", "`hebrew`",
+        "`indian`", "`islamic`", "`iso8601`",
+        "`japanese`", "`persian`", "`roc`" 등을 사용할 수 있습니다.
+    - `hc`
+      - : 시간제. "`h11`",
+        "`h12`", "`h23`", "`h24`" 등을 사용할 수 있습니다.
+
+- `options` {{optional_inline}}
+
+  - : 다음 속성 일부 또는 전부를 포함하는 객체입니다.
+
+    - `dateStyle`
+      - : `format()`을 호출했을 때 사용할 날짜 서식입니다. 가능한 값은 다음을 포함합니다.
+        - "`full`"
+        - "`long`"
+        - "`medium`"
+        - "`short`"
+
+        > **참고:** `dateStyle`은 `timeStyle`과 함께 사용할 수 있지만, 다른 옵션인 `weekday`, `hour`, `month` 등과는 함께 사용할 수 없습니다.
+
+    - `timeStyle`
+      - : `format()`을 호출했을 때 사용할 시간 서식입니다. 가능한 값은 다음을 포함합니다.
+        - "`full`"
+        - "`long`"
+        - "`medium`"
+        - "`short`"
+
+        > **참고:** `timeStyle`은 `dateStyle`과 함께 사용할 수 있지만, 다른 옵션인 `weekday`, `hour`, `month` 등과는 함께 사용할 수 없습니다.
+
+    - `calendar`
+      - : 역법입니다. "`buddhist`",
+        "`chinese`", " `coptic`", "`ethiopia`",
+        "`ethiopic`", "`gregory`", " `hebrew`",
+        "`indian`", "`islamic`", "`iso8601`", "
+        `japanese`", "`persian`", "`roc`" 등을 사용할 수 있습니다.
+
+    - `dayPeriod`
+      - : (영어의 경우) "in the morning", "am", "noon", "n"처럼 시간의 위치를 나타낼 때 사용할 시간 서식입니다. "`narrow`", "`short`", " `long`" 등을 사용할 수 있습니다.
+
+      > **참고:**
+      >
+      > - 12시간제 형식을 사용할 때만 결과의 차이가 있습니다.
+      > - 한국어를 포함해, 많은 로케일에서는 지정한 너비에 상관하지 않고 같은 문자열을 반환합니다. ("새벽", "밤" 등)
+
+    - `numberingSystem`
+      - : 기수법입니다. "`arab`",
+        "`arabext`", " `bali`", "`beng`",
+        "`deva`", "`fullwide`", " `gujr`",
+        "`guru`", "`hanidec`", "`khmr`", "
+        `knda`", "`laoo`", "`latn`",
+        "`limb`", "`mlym`", " `mong`",
+        "`mymr`", "`orya`", "`tamldec`", "
+        `telu`", "`thai`", "`tibt`" 등을 사용할 수 있습니다.
+
+    - `localeMatcher`
+      - : 로케일 매칭 알고리즘입니다. 가능한 값은 "`lookup`", "`best fit`"이며 기본 값은 "`best fit`"입니다. 자세한 정보는 {{jsxref("Intl", "Intl", "#로케일_조정", 1)}} 문서를 참고하세요.
+
+    - `timeZone`
+      - : 시간대입니다. 구현체가 반드시 인식해야 하는 유일한 값은 "`UTC`"입니다. 기본 값은 런타임의 기본 시간대입니다. 구현체에 따라 "`Asia/Seoul`", "`Asia/Kolkata`",
+        "`America/New_York`"처럼 [IANA 시간대 데이터베이스](https://www.iana.org/time-zones)의 시간대 이름을 인식할 수도 있습니다.
+
+    - `hour12`
+      - : 24시간제 대신 12시간제를 사용할지에 대한 여부입니다. 가능한 값은 `true` 또는 `false`입니다. 기본 값은 로케일에 따라 다릅니다. 이 값은 언어 태그의 `hc`, 옵션 중 `hourCycle`보다 우선합니다.
+
+    - `hourCycle`
+      - : 시간제입니다. "`h11`",
+        "`h12`", "`h23`", "`h24`" 등을 사용할 수 있습니다. 이 값은 언어 태그의 `hc`보다 우선하며, `hour12`가 이 값보다 우선합니다.
+
+    - `formatMatcher`
+      - : 서식 매칭 알고리즘입니다. 가능한 값은 "`basic`", "`best fit`"이며 기본 값은 "`best fit`"입니다. 자세한 설명은 아래 내용을 참고하세요.
+
+    이하 속성은 서식 출력 결과가 사용할 날짜 및 시간 구성요소를 나타냅니다. 구현체는 적어도 아래의 구성요소 조합을 지원해야 합니다.
+
+    - `weekday`, `year`, `month`, `day`, `hour`, `minute`, `second`
+    - `weekday`, `year`, `month`, `day`
+    - `year`, `month`, `day`
+    - `year`, `month`
+    - `month`, `day`
+    - `hour`, `minute`, `second`
+    - `hour`, `minute`
+
+    구현체에 따라 다른 구성요소 조합을 지원할 수도 있습니다. 시간 서식을 요청하면, 현재 구현체가 지원하는 모든 구성요소 조합 중 최적 조합을 탐색해 사용합니다. 탐색 알고리즘은 `formatMatcher` 옵션 속성을 사용해 지정할 수 있고, [명세에 완벽히 정의된 "`basic`" 알고리즘](https://402.ecma-international.org/1.0/#BasicFormatMatcher)과 구현체에 따라 다른 "`best-fit`" 알고리즘의 두 종류가 있습니다.
+
+    - `weekday`
+
+      - : 요일. 가능한 값은 다음과 같습니다.
+
+        - "`long`" (`금요일`, `Thursday` 등)
+        - "`short`" (`(금)`, `Thu` 등)
+        - "`narrow`" (`(금)`, `T` 등). 일부 로케일에서는 두 개의 요일이 같은 값을 스타일을 가질 수 있습니다. (예: `Thursday`와 `Tuesday` 둘 다 `T`)
+
+    - `era`
+
+      - : 시대. 가능한 값은 다음과 같습니다.
+
+        - "`long`" (`서기`, `Anno Domini` 등)
+        - "`short`" (`AD` 등)
+        - "`narrow`" (`A`, `AD` 등)
+
+    - `year`
+
+      - : 연도. 가능한 값은 다음과 같습니다.
+
+        - "`numeric`" (`2019년`, `2019` 등)
+        - "`2-digit`" (`19년`, `19` 등)
+
+    - `month`
+
+      - : 월. 가능한 값은 다음과 같습니다.
+
+        - "`numeric`" (`3` 등)
+        - "`2-digit`" (`03` 등)
+        - "`long`" (`3월`, `March` 등)
+        - "`short`" (`Mar` 등)
+        - "`narrow`" (`M` 등). 일부 로케일에서는 두 개의 요일이 같은 값을 스타일을 가질 수 있습니다. (예: `March`와 `May` 둘 다 `M`)
+
+    - `day`
+
+      - : 일. 가능한 값은 다음과 같습니다.
+
+        - "`numeric`" (`1` 등)
+        - "`2-digit`" (`01` 등)
+
+    - `hour`
+      - : 시. 가능한 값은 `"numeric"`, `"2-digit"`입니다.
+    - `minute`
+      - : 분. 가능한 값은 `"numeric"`, `"2-digit"`입니다.
+    - `second`
+      - : 초. 가능한 값은 `"numeric"`, `"2-digit"`입니다.
+    - `fractionalSecondDigits`
+    
+      - : 밀리초를 나타낼 소숫점 이하 자릿수. 가능한 값은 다음과 같습니다.
+
+        - `0` (밀리초를 표시하지 않음.)
+        - `1` (밀리초를 한 자리까지 표시함. 예를 들어, 0.736초는 7까지 보입니다.)
+        - `2` (밀리초를 두 자리까지 표시함. 예를 들어, 0.736초는 73로 보입니다.)
+        - `3` (밀리초를 세 자리까지 표시함. 예를 들어, 0.736초는 736으로 보입니다.)
+
+    - `timeZoneName`
+
+      - : 시간대 이름. 가능한 값은 다음과 같습니다.
+
+        - "`long`" 지역화된 긴 시간대 이름 (`한국 표준시`, `British Summer Time`)
+        - "`short`" 지역화된 짧은 시간대 이름 (`PST`, `GMT+9`)
+        - "`shortOffset`" 지역화된 GMT 형식 (`GMT-8`, `GMT+9`)
+        - "`longOffset`" 지역화된 긴 GMT 형식 (`GMT+0900`)
+        - "`shortGeneric`" 지역을 특정하지 않는 일반적인 형식 (`PT`)
+        - "`longGeneric`" 지역을 특정하지 않는 긴 일반적인 형식 (`Pacific Time`)
+
+        > **참고:** 요구한 형식을 사용할 수 없을 경우 시간대 서식이 다른 형태로 대체될 수 있습니다. 예를 들어 지역을 특정하지 않는 서식의 경우 특정 국가나 도시 이름을 포함하지 않아야 하지만, "Los Angeles Time"처럼 필요할 경우 이름을 포함할 수 있습니다.
+
+    각 구성요소 속성의 기본값은 {{jsxref("undefined")}}입니다. 그러나 모든 속성이 `undefined`일 경우, `year`, `month`, `day`는 "`numeric`"으로 취급합니다.
+
+## 예제
+
+### DateTimeFormat 사용하기
+
+로케일을 지정하지 않고 사용하면 기본 로케일 및 기본 옵션 서식을 적용한 문자열을 반환합니다.
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// 매개변수 없이 toLocaleString() 호출한 결과는
+// 구현체, 기본 로케일, 기본 시간대에 다라 달라짐
+console.log(new Intl.DateTimeFormat().format(date));
+// → ko-KR 로케일(언어)와 Asia/Seoul 시간대(UTC+0900)에서 "2012. 12. 20."
+```
+
+### timeStyle과 dateStyle 사용하기
+
+다음 예제는 지역화된 숫자 서식의 예시를 보입니다. 어플리케이션의 사용자 인터페이스 언어에 맞는 서식을 적용하려면 `locales` 매개변수로 적절한 언어(와, 필요한 경우 대체 언어)를 제공하는걸 잊지 마세요.
+
+```js
+let o = new Intl.DateTimeFormat("en" , {
+  timeStyle: "short"
+});
+console.log(o.format(Date.now())); // "13:31 AM"
+
+let o = new Intl.DateTimeFormat("en" , {
+  dateStyle: "short"
+});
+console.log(o.format(Date.now())); // "07/07/20"
+
+let o = new Intl.DateTimeFormat("en" , {
+  timeStyle: "medium",
+  dateStyle: "short"
+});
+console.log(o.format(Date.now())); // "07/07/20, 13:31:55 AM"
+```
+
+### timeZoneName 사용하기
+
+`timeZoneName`을 사용하면 시간대도 결과에 포함할 수 있습니다.
+
+```js
+var date = Date.UTC(2021, 11, 17, 3, 0, 42);
+const timezoneNames = ['short', 'long', 'shortOffset', 'longOffset', 'shortGeneric', 'longGeneric']
+	
+for (const zoneName of timezoneNames) {
+  var formatter = new Intl.DateTimeFormat('en-US', {
+    timeZone: 'America/Los_Angeles',
+    timeZoneName: zoneName,
+  });
+  console.log(zoneName + ": " + formatter.format(date) );
+}
+	
+// 예상 출력 결과:
+// > "short: 12/16/2021, PST"
+// > "long: 12/16/2021, Pacific Standard Time"
+// > "shortOffset: 12/16/2021, GMT-8"
+// > "longOffset: 12/16/2021, GMT-08:00"
+// > "shortGeneric: 12/16/2021, PT"
+// > "longGeneric: 12/16/2021, Pacific Time"
+```
+
+## 명세
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Intl.DateTimeFormat")}}
+- {{jsxref("Global_Objects/Intl", "Intl")}}
diff --git a/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.md b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.md
index deb61cb636..6dcaaa0200 100644
--- a/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.md
+++ b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.md
@@ -2,200 +2,66 @@
 title: Intl.DateTimeFormat
 slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
 tags:
+  - Class
   - DateTimeFormat
   - Internationalization
   - Intl
   - JavaScript
+  - Localization
   - Reference
+browser-compat: javascript.builtins.Intl.DateTimeFormat
 translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
 ---
-<div>{{JSRef}}</div>
-
-<p><span class="seoSummary"><strong><code>Intl.DateTimeFormat</code></strong>은 언어에 맞는 날짜 및 시간 서식을 지원하는 객체의 생성자입니다.</span> <code>dateStyle</code>과 <code>timeStyle</code> 옵션을 통해 날짜와 시간 형식을 빠르게 맞출 수 있고, 더 자세한 조정을 위한 다른 옵션도 존재합니다.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}</div>
-
-
-
-<h2 id="구문">구문</h2>
-
-<pre class="syntaxbox">new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]])
-Intl.DateTimeFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])</pre>
-
-<h3 id="매개변수">매개변수</h3>
-
-<dl>
- <dt><code>locales</code> {{optional_inline}}</dt>
- <dd>
- <p><a href="https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8">BCP 47</a> 언어 태그를 포함하는 문자열이나 문자열의 배열. 로케일 매개변수의 일반적인 형식 및 해석은 {{jsxref("Intl", "<code>Intl</code> 문서", "#Locale_identification_and_negotiation", 1)}}를 참고하세요. 다음의 유니코드 확장 키를 사용할 수 있습니다.</p>
-
- <dl>
-  <dt><code>nu</code></dt>
-  <dd>사용할 기수법. <code>"arab"</code>, <code>"arabext"</code>, <code>"bali"</code>, <code>"beng"</code>, <code>"deva"</code>, <code>"fullwide"</code>, <code>"gujr"</code>, <code>"guru"</code>, <code>"hanidec"</code>, <code>"khmr"</code>, <code>"knda"</code>, <code>"laoo"</code>, <code>"latn"</code>, <code>"limb"</code>, <code>"mlym"</code>, <code>"mong"</code>, <code>"mymr"</code>, <code>"orya"</code>, <code>"tamldec"</code>, <code>"telu"</code>, <code>"thai"</code>, <code>"tibt"</code> 등을 사용할 수 있습니다.</dd>
-  <dt><code>ca</code></dt>
-  <dd>역법. <code>"buddhist"</code>, <code>"chinese"</code>, <code>"coptic"</code>, <code>"ethioaa"</code>, <code>"ethiopic"</code>, <code>"gregory"</code>, <code>"hebrew"</code>, <code>"indian"</code>, <code>"islamic"</code>, <code>"islamicc"</code>, <code>"iso8601"</code>, <code>"japanese"</code>, <code>"persian"</code>, <code>"roc"</code> 등을 사용할 수 있습니다.</dd>
-  <dt><code>hc</code></dt>
-  <dd>시간 사이클. <code>"h11"</code>, <code>"h12"</code>, <code>"h23"</code>, <code>"h24"</code> 등을 사용할 수 있습니다.</dd>
- </dl>
- </dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>
- <p>다음 속성을 포함하는 객체.</p>
-
- <dl>
-  <dt><code>dateStyle</code></dt>
-  <dd><code>format()</code>을 호출했을 때 사용할 날짜 서식. 가능한 값은 다음을 포함합니다.
-  <ul>
-   <li><code>"full"</code></li>
-   <li><code>"long"</code></li>
-   <li><code>"medium"</code></li>
-   <li><code>"short"</code></li>
-  </ul>
-  </dd>
-  <dt><code>timeStyle</code></dt>
-  <dd><code>format()</code>을 호출했을 때 사용할 시간 서식. 가능한 값은 다음을 포함합니다.
-  <ul>
-   <li><code>"full"</code></li>
-   <li><code>"long"</code></li>
-   <li><code>"medium"</code></li>
-   <li><code>"short"</code></li>
-  </ul>
-  </dd>
-  <dt><code>localeMatcher</code></dt>
-  <dd>사용할 로케일 매칭 알고리즘. 가능한 값은 <code>"lookup"</code>과 <code>"best fit"</code>이고, 기본값은 <code>"best fit"</code>입니다. 자세한 정보는 {{jsxref("Intl", "<code>Intl</code> 문서", "#로케일_조정", 1)}}를 참고하세요.</dd>
-  <dt><code>timeZone</code></dt>
-  <dd>사용할 시간대. 구현체가 반드시 인식해야 하는 유일한 값은 <code>"UTC"</code>입니다. 기본값은 런타임의 기본 시간대입니다. 구현체에 따라 "<code>Asia/Shanghai</code>", "<code>Asia/Kolkata</code>", "<code>America/New_York</code>" 등 <a href="https://www.iana.org/time-zones">IANA 시간대 데이터베이스</a>의 시간대 이름을 인식할 수도 있습니다.</dd>
-  <dt><code>hour12</code></dt>
-  <dd>24시간제 대신 12시간제를 사용할지 여부. 가능한 값은 <code>true</code> 와 <code>false</code>이고, 기본값은 로케일에 따라 다릅니다. 이 옵션을 지정하면 <code>hc</code> 언어 태그와 <code>hourCycle</code> 옵션을 모두 무시합니다.</dd>
-  <dt><code>hourCycle</code></dt>
-  <dd>사용할 시간제. 가능한 값은 <code>"h11"</code>, <code>"h12"</code>, <code>"h23"</code>, <code>"h24"</code>입니다. 이 옵션을 지정하면 <code>hc</code> 언어 태그를 무시합니다. <code>hour12</code> 옵션을 지정한 경우 그 값이 우선순위를 가집니다.</dd>
-  <dt><code>formatMatcher</code></dt>
-  <dd>사용할 서식 매칭 알고리즘. 가능한 값은 <code>"basic"</code>과 <code>"best fit"</code>이고, 기본값은 <code>"best fit"</code>입니다. 아래의 단락에서 이 속성의 자세한 정보를 확인하세요.</dd>
- </dl>
-
- <p>이후의 속성은 서식을 적용한 출력 결과가 사용할 날짜 및 시간 구성요소를 나타냅니다. 구현체는 적어도 아래의 부분집합을 지원해야 합니다.</p>
-
- <ul>
-  <li><code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>, <code>second</code></li>
-  <li><code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code></li>
-  <li><code>year</code>, <code>month</code>, <code>day</code></li>
-  <li><code>year</code>, <code>month</code></li>
-  <li><code>month</code>, <code>day</code></li>
-  <li><code>hour</code>, <code>minute</code>, <code>second</code></li>
-  <li><code>hour</code>, <code>minute</code></li>
- </ul>
-
- <p>구현체에 따라 다른 집합을 지원할 수도 있습니다. 서식 요청은 가능한 모든 부분집합 조합 중 최적으로 일치하는 집합으로 조정됩니다. 조정 알고리즘에는 <a href="http://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher">명세에 완벽히 정의된 <code>basic</code> 알고리즘</a>과, 구현체에 따라 다른 <code>best-fit</code> 알고리즘 두 종류가 있으며 <code>formatMatcher</code> 속성의 값이 어느 쪽을 사용할지 결정합니다.</p>
-
- <dl>
-  <dt><code>weekday</code></dt>
-  <dd>요일. 가능한 값은 다음과 같습니다.
-  <ul>
-   <li>"<code>long</code>" (<code>금요일</code>, <code>Thursday</code> 등)</li>
-   <li>"<code>short</code>" (<code>(금)</code>, <code>Thu</code> 등)</li>
-   <li>"<code>narrow</code>" (<code>(금)</code>, <code>T</code> 등). 일부 로케일에서는 두 개의 요일이 같은 값을 스타일을 가질 수 있습니다. (예: <code>Thursday</code>와 <code>Tuesday</code> 둘 다 <code>T</code>)</li>
-  </ul>
-  </dd>
-  <dt><code>era</code></dt>
-  <dd>시대. 가능한 값은 다음과 같습니다.
-  <ul>
-   <li>"<code>long</code>" (<code>서기</code>, <code>Anno Domini</code> 등)</li>
-   <li>"<code>short</code>" (<code>AD</code> 등)</li>
-   <li>"<code>narrow</code>" (<code>A</code>, <code>AD</code> 등)</li>
-  </ul>
-  </dd>
-  <dt><code>year</code></dt>
-  <dd>연도. 가능한 값은 다음과 같습니다.
-  <ul>
-   <li>"<code>numeric</code>" (<code>2019년</code>, <code>2019</code> 등)</li>
-   <li>"<code>2-digit</code>" (<code>19년</code>, <code>19</code> 등)</li>
-  </ul>
-  </dd>
-  <dt><code>month</code></dt>
-  <dd>월. 가능한 값은 다음과 같습니다.
-  <ul>
-   <li>"<code>numeric</code>" (<code>3</code> 등)</li>
-   <li>"<code>2-digit</code>" (<code>03</code> 등)</li>
-   <li>"<code>long</code>" (<code>3월</code>, <code>March</code> 등)</li>
-   <li>"<code>short</code>" (<code>Mar</code> 등)</li>
-   <li>"<code>narrow</code>" (<code>M</code> 등). 일부 로케일에서는 두 개의 요일이 같은 값을 스타일을 가질 수 있습니다. (예: <code>March</code>와 <code>May</code> 둘 다 <code>M</code>)</li>
-  </ul>
-  </dd>
-  <dt><code>day</code></dt>
-  <dd>일. 가능한 값은 다음과 같습니다.
-  <ul>
-   <li>"<code>numeric</code>" (<code>1</code> 등)</li>
-   <li>"<code>2-digit</code>" (<code>01</code> 등)</li>
-  </ul>
-  </dd>
-  <dt><code>hour</code></dt>
-  <dd>시. 가능한 값은 <code>"numeric"</code>, <code>"2-digit"</code>입니다.</dd>
-  <dt><code>minute</code></dt>
-  <dd>분. 가능한 값은 <code>"numeric"</code>, <code>"2-digit"</code>입니다.</dd>
-  <dt><code>second</code></dt>
-  <dd>초. 가능한 값은 <code>"numeric"</code>, <code>"2-digit"</code>입니다.</dd>
-  <dt><code>timeZoneName</code></dt>
-  <dd>시간대 이름. 가능한 값은 다음과 같습니다.
-  <ul>
-   <li>"<code>long</code>" (<code>한국 표준시</code>, <code>British Summer Time</code>등)</li>
-   <li>"<code>short</code>" (<code>GMT+9</code> 등)</li>
-  </ul>
-  </dd>
- </dl>
-
- <p>각 구성요소 속성의 기본값은 {{jsxref("undefined")}}입니다. 그러나 모든 속성이 {{jsxref("undefined")}}일 경우, <code>year</code>, <code>month</code>, <code>day</code>는 <code>"numeric"</code>으로 취급합니다.</p>
- </dd>
-</dl>
-
-<h2 id="설명">설명</h2>
-
-<h3 id="속성">속성</h3>
-
-<dl>
- <dt>{{jsxref("DateTimeFormat.prototype", "Intl.DateTimeFormat.prototype")}}</dt>
- <dd>모든 인스턴스에 속성을 추가할 수 있습니다.</dd>
-</dl>
-
-<h3 id="메서드">메서드</h3>
-
-<dl>
- <dt>{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</dt>
- <dd>주어진 로케일 목록 중, 런타임이 지원하는 항목을 배열로 반환합니다.</dd>
-</dl>
-
-<h2 id="DateTimeFormat_인스턴스"><code>DateTimeFormat</code> 인스턴스</h2>
-
-<h3 id="속성_2">속성</h3>
-
-<p><code>DateTimeFormat</code> 인스턴스는 프로토타입의 다음 속성을 상속합니다.</p>
-
-<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype', '속성')}}</div>
-
-<h3 id="메서드_2">메서드</h3>
-
-<p><code>DateTimeFormat</code> 인스턴스는 프로토타입의 다음 메서드를 상속합니다.</p>
-
-<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype', '메서드')}}</div>
-
-<h2 id="예제">예제</h2>
-
-<h3 id="DateTimeFormat_사용하기"><code>DateTimeFormat</code> 사용하기</h3>
-
-<p>로케일을 지정하지 않고 사용하면 기본 로케일 및 기본 옵션 서식을 적용한 문자열을 반환합니다.</p>
-
-<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// 매개변수 없이 toLocaleString() 호출한 결과는
+{{JSRef}}
+
+**`Intl.DateTimeFormat`**은 언어에 맞는 날짜 및 시간 서식을 적용하기 위한 객체입니다.
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}
+
+## 생성자
+
+- {{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}}
+  - : 새로운 `Intl.DateTimeFormat` 객체를 생성합니다.
+
+## 정적 메서드
+
+- {{jsxref("Intl/DateTimeFormat/supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}
+  - : 매개변수로 제공한 로케일 목록 중, 런타임이 현재 지원하는 로케일 항목을 배열로 반환합니다.
+
+## 인스턴스 메서드
+
+- {{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}}
+  - : `DateTimeFormat` 객체의 로케일과 서식 옵션에 맞춰 날짜를 서식화해 반환합니다.
+- {{jsxref("Intl/DateTimeFormat/formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}
+  - : 날짜 서식 문자열의 각 부분을 분해하여 토큰 객체로 만들고 {{jsxref("Array")}}로 반환합니다. 로케일에 따라 다른 사용자 지정 서식을 적용할 때 사용할 수 있습니다.
+- {{jsxref("Intl/DateTimeFormat/resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}
+  - : `DateTimeFormat` 객체를 초기화할 때 할당된 로케일 및 서식 옵션의 계산 값을 나타내는 객체를 반환합니다.
+- {{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}
+  - : 두 개의 [Dates](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)를 받은 후, 현재 할당된 로케일과 옵션 내에서 가장 간결한 형태로 두 날짜의 범위를 나타내는 문자열을 반환합니다.
+- {{jsxref("Intl/DateTimeFormat/formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}}
+  - : 두 개의 [Dates](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)를 받은 후, 현재 할당된 로케일과 옵션 내에서 가장 간결한 형태로 두 날짜의 범위를 나타내는 문자열을 생성합니다. 문자열의 각 부분을 분해하여 토큰 객체로 만들고 {{jsxref("Array")}}로 반환합니다.
+
+## 예제
+
+### `DateTimeFormat` 사용하기
+
+로케일을 지정하지 않고 사용하면 기본 로케일과 기본 옵션의 서식을 적용한 문자열을 반환합니다.
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// 매개변수 없이 toLocaleString()을 호출한 결과는
 // 구현체, 기본 로케일, 기본 시간대에 다라 달라짐
 console.log(new Intl.DateTimeFormat().format(date));
-// → ko-KR 로케일(언어)와 Asia/Seoul 시간대(UTC+0900)에서 "2012. 12. 20."
-</pre>
+// → ko-KR 로케일(언어)과 Asia/Seoul 시간대(UTC+0900)에서 "2012. 12. 20."
+```
 
-<h3 id="locales_사용하기"><code>locales</code> 사용하기</h3>
+### 로케일 지정하기
 
-<p>다음 예제는 지역화된 숫자 서식의 예시를 보입니다. 어플리케이션의 사용자 인터페이스 언어에 맞는 서식을 적용하려면 <code>locales</code> 매개변수로 적절한 언어(와, 필요한 경우 대체 언어)를 제공하는걸 잊지 마세요.</p>
+다음 예제는 지역화된 숫자 서식 방법을 보여줍니다. 사용자의 언어에 적합한 서식을 적용하려면 `locales` 매개변수로 해당 언어(필요한 경우 대체 언어까지)를 제공하는 걸 잊지 마세요.
 
-<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
 
 // 아래 결과는 모두 Asia/Seoul 시간대를 사용한 결과 (UTC+0900, 한국 표준시)
 
@@ -224,13 +90,14 @@ console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date));
 // 다음과 같이 대체 언어를 지정할 수 있음. 아래의 경우 대체 언어는 인도어
 console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
 // → "20/12/2012"
-</pre>
+```
 
-<h3 id="options_사용하기"><code>options</code> 사용하기</h3>
+### 옵션 지정하기
 
-<p><code>options</code> 매개변수를 지정해 날짜와 시간 서식 결과를 원하는 형태로 바꿀 수 있습니다.</p>
+`options` 매개변수를 지정하면 날짜와 시간 서식 결과를 원하는 형태로 바꿀 수 있습니다.
 
-<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
 
 // 긴 날짜 서식에 더해 요일 요청
 var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
@@ -261,43 +128,25 @@ options = {
 };
 console.log(new Intl.DateTimeFormat('en-US', options).format(date));
 // → "12/19/2012, 19:00:00"
-</pre>
-
-<h2 id="명세">명세</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Initial definition.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#datetimeformat-objects', 'Intl.DateTimeFormat')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
-
-<div>
-
-
-<p>{{Compat("javascript.builtins.Intl.DateTimeFormat")}}</p>
-</div>
-
-<h2 id="같이_보기">같이 보기</h2>
-
-<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl', '같이_보기')}}</div>
+
+// 옵션을 지정하면서 로케일은 브라우저 기본값을 사용하고 싶을 땐 'default' 지정
+console.log(new Intl.DateTimeFormat('default', options).format(date));
+// → "2012. 12. 19. 19시 0분 0초"
+
+// 오전/오후 시간 표시가 필요할 때
+options = {hour: "numeric", dayPeriod: "short"};
+console.log(new Intl.DateTimeFormat('en-US', options).format(date));
+// → 10 at night
+```
+
+## 명세
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("Intl")}}