edit files

13 files changed, 402 insertions, 602 deletions

diff --git a/files/ko/web/api/console/assert/index.md b/files/ko/web/api/console/assert/index.md
index 3ad2aafa8e..42ddad30d0 100644
--- a/files/ko/web/api/console/assert/index.md
+++ b/files/ko/web/api/console/assert/index.md
@@ -1,48 +1,51 @@
 ---
 title: console.assert()
-slug: Web/API/Console/assert
+slug: Web/API/console/assert
 tags:
   - API
   - DOM
+  - Debugging
   - Method
-  - Reference
+  - Web Development
   - console
+  - web console
+browser-compat: api.console.assert
 translation_of: Web/API/console/assert
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p><code><strong>console.assert()</strong></code> 메서드는 주어진 가정이 거짓인 경우 콘솔에 오류 메시지를 출력합니다. 참인 경우, 아무것도 하지 않습니다.</p>
+**`console.assert()`** 메서드는 주어진 가정이 거짓인 경우 콘솔에 오류 메시지를 출력합니다. 참인 경우, 아무것도 하지 않습니다.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="구문">구문</h2>
+## 구문
 
-<pre class="syntaxbox">console.assert(<em>assertion</em>, <em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
-console.assert(<em>assertion</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); // c-like message formatting
-</pre>
+```js
+console.assert(assertion, obj1 [, obj2, ..., objN]);
+console.assert(assertion, msg [, subst1, ..., substN]); // C-like message formatting
+```
 
-<h3 id="Parameters">Parameters</h3>
+### 매개변수
 
-<dl>
- <dt><code>assertion</code></dt>
- <dd>아무 불리언 표현식. 거짓인 경우, 메시지를 콘솔에 출력합니다.</dd>
- <dt><code>obj1</code> ... <code>objN</code></dt>
- <dd>출력에 사용할 JavaScript 객체. 각각의 문자열 표현을 순서대로 출력합니다.</dd>
- <dt><code>msg</code></dt>
- <dd>0개 이상의 치환 문자열을 포함하는 JavaScript 문자열.</dd>
- <dt><code>subst1</code> ... <code>substN</code></dt>
- <dd><code>msg</code> 매개변수의 치환 문자열에 대입할 JavaScript 객체.</dd>
-</dl>
+- `assertion`
+  - : 아무 불리언 표현식. 거짓인 경우, 메시지를 콘솔에 출력합니다.
+- `obj1` ... `objN`
+  - : 출력에 사용할 JavaScript 객체. 각각의 문자열 표현은 입력한 순서대로 함께 출력됩니다.
+- `msg`
+  - : 0개 이상의 치환 문자열을 포함하는 JavaScript 문자열.
+- `subst1` ... `substN`
+  - : `msg` 매개변수의 치환 문자열에 대입할 JavaScript 객체. 이 매개변수를 사용하면 출력 형식을 추가로 제어할 수 있습니다.
 
-<h2 id="예제">예제</h2>
+## 예제
 
-<p>다음 예제는 객체와 가정을 함께 사용하는 법을 보입니다.</p>
+다음 예제는 객체와 가정을 함께 사용하는 법을 보입니다.
 
-<pre class="brush: js">const errorMsg = 'the # is not even';
-for (let number = 2; number &lt;= 5; number += 1) {
+```js
+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 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">ES2015 object property shorthand</a>:
+    // or, using ES2015 object property shorthand:
     // console.assert(number % 2 === 0, {number, errorMsg});
 }
 // output:
@@ -52,48 +55,14 @@ for (let number = 2; number &lt;= 5; number += 1) {
 // the # is 4
 // the # is 5
 // Assertion failed: {number: 5, errorMsg: "the # is not even"}
-</pre>
+```
 
-<p>참고로, {{domxref("console.log()")}}의 치환 문자열을 거의 모든 브라우저에서 정상 동작하지만...</p>
+자세한 내용은 {{domxref("console")}} 문서의 [콘솔에 텍스트 출력하기](/ko/docs/Web/API/console#콘솔에_텍스트_출력하기)를 참고하세요.
 
-<pre class="brush: js">console.log('the word is %s', 'foo');
-// output: the word is foo
-</pre>
+## 명세
 
-<p><code>console.assert()</code>의 치환 문자열은 일부 브라우저에서 동작하지 않습니다.</p>
+{{Specifications}}
 
-<pre class="brush: js">console.assert(false, 'the word is %s', 'foo');
-// correct output in Node.js and some browsers
-//     (e.g. Firefox v60.0.2):
-// Assertion failed: the word is foo
-// incorrect output in some browsers
-//     (e.g. Chrome v67.0.3396.87):
-// Assertion failed: the word is %s foo
-</pre>
+## 브라우저 호환성
 
-<p>{{domxref("console")}} 문서의 <a href="/ko/docs/Web/API/Console#Outputting_text_to_the_console">콘솔에 텍스트 출력하기</a> 항목도 참고하세요.</p>
-
-<h2 id="명세">명세</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#assert", "console.assert()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
-
-
-
-<p>{{Compat("api.Console.assert")}}</p>
+{{Compat}}
diff --git a/files/ko/web/api/console/clear/index.md b/files/ko/web/api/console/clear/index.md
index 540ce73ee5..096fcab41b 100644
--- a/files/ko/web/api/console/clear/index.md
+++ b/files/ko/web/api/console/clear/index.md
@@ -1,43 +1,30 @@
 ---
 title: console.clear()
-slug: Web/API/Console/clear
+slug: Web/API/console/clear
 tags:
   - API
+  - Debugging
   - Method
   - Reference
   - console
+  - web console
+browser-compat: api.console.clear
 translation_of: Web/API/Console/clear
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p><strong><code>console.clear()</code></strong> 메서드는 현재 환경에서 가능한 경우, 콘솔에 기록된 메시지를 모두 지웁니다.</p>
+**`console.clear()`** 메서드는 현재 환경에서 가능한 경우, 콘솔에 기록된 메시지를 모두 지웁니다.
 
-<h2 id="구문">구문</h2>
+## 구문
 
-<pre class="syntaxbox">console.clear();
-</pre>
+```js
+console.clear();
+```
 
-<h2 id="명세">명세</h2>
+## 명세
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#clear", "console.clear()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
+## 브라우저 호환성
 
-
-
-<p>{{Compat("api.Console.clear")}}</p>
+{{Compat}}
diff --git a/files/ko/web/api/console/count/index.md b/files/ko/web/api/console/count/index.md
index 0040da4c11..5f0322d3ae 100644
--- a/files/ko/web/api/console/count/index.md
+++ b/files/ko/web/api/console/count/index.md
@@ -1,33 +1,39 @@
 ---
 title: console.count()
-slug: Web/API/Console/count
+slug: Web/API/console/count
 tags:
   - API
   - DOM
+  - Debugging
   - Method
   - Reference
+  - Web Development
+  - web console
+browser-compat: api.console.count
 translation_of: Web/API/Console/count
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p><strong><code>console.count()</code></strong> 메서드는 특정 <code>count()</code> 호출의 횟수를 세어 출력합니다.</p>
+**`console.count()`** 메서드는 특정 `count()` 호출의 횟수를 세어 출력합니다.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="구문">구문</h2>
+## 구문
 
-<pre class="syntaxbox">console.count(<var>[label]</var>);</pre>
+```js
+console.count([label]);
+```
 
-<h3 id="매개변수">매개변수</h3>
+### 매개변수
 
-<dl>
- <dt><code>label</code> {{Optional_Inline}}</dt>
- <dd>{{jsxref("String")}}. 지정한 경우, 이 레이블을 지정한 count() 호출의 수를 출력합니다. 누락한 경우 <code>"default"</code>를 지정한 것처럼 동작합니다.</dd>
-</dl>
+- `label` {{Optional_Inline}}
+  - : {{jsxref("String")}}. 지정한 경우, 이 레이블을 지정한 count() 호출의 수를 출력합니다. 누락한 경우 "default"를 지정한 것처럼 동작합니다.
 
-<h2 id="예제">예제</h2>
 
-<pre class="brush: js; highlight[4, 13]">let user = "";
+## 예제
+
+```js
+let user = "";
 
 function greet() {
   console.count();
@@ -39,20 +45,24 @@ greet();
 user = "alice";
 greet();
 greet();
-console.count();</pre>
+console.count();
+```
 
-<p>위 코드의 출력 결과는 다음과 같은 형태입니다.</p>
+위 코드의 출력 결과는 다음과 같습니다.
 
-<pre class="brush: none;">"default: 1"
+```
+"default: 1"
 "default: 2"
 "default: 3"
-"default: 4"</pre>
+"default: 4"
+```
 
-<p>레이블을 명시하지 않았기 때문에 <code>default</code>로 나타납니다.</p>
+레이블을 명시하지 않았기 때문에 `default`로 나타납니다.
 
-<p>첫 번째 <code>count()</code>의 매개변수에는 <code>user</code> 변수를 제공하고, 두 번째에는 문자열 <code>"alice"</code>를 제공할 경우...</p>
+첫 번째 `count()`의 매개변수에는 문자열 "bob"을 제공하고, 두 번째에는 문자열 "alice"를 제공할 경우...
 
-<pre class="brush: js; highlight[4, 13]">let user = "";
+```js
+let user = "";
 
 function greet() {
   console.count(user);
@@ -64,39 +74,24 @@ greet();
 user = "alice";
 greet();
 greet();
-console.count("alice");</pre>
+console.count("alice");
+```
 
-<p>다음과 같이 출력합니다.</p>
+다음과 같이 출력합니다.
 
-<pre class="brush: none;">"bob: 1"
+```
+"bob: 1"
 "alice: 1"
 "alice: 2"
-"alice: 3"</pre>
-
-<dl>
-</dl>
-
-<h2 id="명세">명세</h2>
+"alice: 3"
+```
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#count", "console.count()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+이제 `label` 값만으로 별도의 카운트를 유지 관리하고 있습니다.
 
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
+## 명세
 
+{{Specifications}}
 
+## 브라우저 호환성
 
-<p>{{Compat("api.Console.count")}}</p>
+{{Compat}}
diff --git a/files/ko/web/api/console/countreset/index.md b/files/ko/web/api/console/countreset/index.md
index 30e6d3ee95..fc2edc043b 100644
--- a/files/ko/web/api/console/countreset/index.md
+++ b/files/ko/web/api/console/countreset/index.md
@@ -1,35 +1,39 @@
 ---
-title: Console.countReset()
-slug: Web/API/Console/countReset
+title: console.countReset()
+slug: Web/API/console/countReset
 tags:
   - API
   - DOM
+  - Debugging
   - Method
   - Reference
+  - Web Development
   - console
+  - web console
+browser-compat: api.console.countReset
 translation_of: Web/API/Console/countReset
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p><strong><code>console.countReset()</code></strong> 메서드는 {{domxref("console.count()")}}의 카운터를 초기화합니다.</p>
+**`console.countReset()`** 메서드는 {{domxref("console.count()")}}의 카운터를 초기화합니다.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="구문">구문</h2>
+## 구문
 
-<pre class="syntaxbox">console.countReset(<var>[label]</var>);
-</pre>
+```js
+console.countReset([label]);
+```
 
-<h3 id="매개변수">매개변수</h3>
+### 매개변수
 
-<dl>
- <dt><code>label</code> {{optional_inline}}</dt>
- <dd>{{jsxref("String")}}. 지정한 경우, 이 레이블을 지정한 <code>count()</code>를 초기화합니다. 누락한 경우 <code>"default"</code> 카운터를 초기화합니다.</dd>
-</dl>
+- `label` {{optional_inline}}
+  - : {{jsxref("String")}}. 지정한 경우, 이 레이블을 지정한 `count()`를 0으로 초기화합니다. 누락한 경우 default 카운터를 0으로 초기화합니다.
 
-<h2 id="예제">예제</h2>
+## 예제
 
-<pre class="brush: js">let user = "";
+```js
+let user = "";
 
 function greet() {
   console.count();
@@ -42,22 +46,25 @@ user = "alice";
 greet();
 greet();
 console.count();
-console.countReset();</pre>
+console.countReset();
+```
 
-<p>위 코드의 출력 결과는 다음과 같은 형태입니다.</p>
+위 코드의 출력 결과는 다음과 같습니다.
 
-<pre class="eval">"default: 1"
+```
+"default: 1"
 "default: 2"
 "default: 3"
 "default: 4"
 "default: 0"
-</pre>
+```
 
-<p><code>countReset()</code>이 기본 카운터를 초기화했음을 알 수 있습니다.</p>
+`console.countReset()`이 기본 카운터를 0으로 초기화했음을 알 수 있습니다.
 
-<p>레이블을 지정한 경우...</p>
+첫 번째 `count()`의 매개변수에는 문자열 "bob"을 제공하고, 두 번째에는 문자열 "alice"를 제공할 경우...
 
-<pre class="brush: js">let user = "";
+```js
+let user = "";
 
 function greet() {
   console.count(user);
@@ -70,39 +77,25 @@ user = "alice";
 greet();
 greet();
 console.countReset("bob");
-console.count("alice");</pre>
+console.count("alice");
+```
 
-<p>다음과 같이 출력합니다.</p>
+다음과 같이 출력합니다.
 
-<pre class="eval">"bob: 1"
+```
+"bob: 1"
 "alice: 1"
 "alice: 2"
 "bob: 0"
-"alice: 3"</pre>
+"alice: 3"
+```
 
-<p>카운터 <code>bob</code>을 초기화해도 <code>alice</code>의 값에는 영향이 없습니다.</p>
+카운터 "bob"을 초기화해도 "alice"의 값에는 영향이 없습니다.
 
-<h2 id="명세">명세</h2>
+## 명세
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#count", "console.countReset()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
+## 브라우저 호환성
 
-
-
-<p>{{Compat("api.Console.countReset")}}</p>
+{{Compat}}
diff --git a/files/ko/web/api/console/debug/index.md b/files/ko/web/api/console/debug/index.md
index 86a3abbc0d..2f3e0daa1c 100644
--- a/files/ko/web/api/console/debug/index.md
+++ b/files/ko/web/api/console/debug/index.md
@@ -1,59 +1,47 @@
 ---
 title: console.debug()
-slug: Web/API/Console/debug
+slug: Web/API/console/debug
 tags:
   - API
+  - Debug
+  - Debugging
+  - Developer Tools
+  - Logging
   - Method
   - Reference
   - console
+  - log
+  - output
+  - print
+browser-compat: api.console.debug
 translation_of: Web/API/Console/debug
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p><strong><code>console.debug()</code></strong> 메서드는 메시지를 "디버그" 중요도로 콘솔에 출력합니다. 디버그 중요도 메시지는 별도 설정 없이는 보이지 않습니다.</p>
+**`console.debug()`** 메서드는 메시지를 "디버그" 중요도로 콘솔에 출력합니다. 디버그 중요도 메시지는 별도 설정 없이는 보이지 않습니다. 대부분의 경우 로그 수준은 콘솔 UI 내에서 구성됩니다. 이 로그 수준은 \`Debug\` 또는 \`Verbose\` 로그 수준에 해당할 수 있습니다.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="구문">구문</h2>
+## 구문
 
-<pre class="syntaxbox">console.debug(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
-console.debug(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
-</pre>
+```js
+console.debug(obj1 [, obj2, ..., objN]);
+console.debug(msg [, subst1, ..., substN]);
+```
 
-<h3 id="매개변수">매개변수</h3>
+### 매개변수
 
-<dl>
- <dt><code>obj1</code> ... <code>objN</code></dt>
- <dd>출력에 사용할 JavaScript 객체. 각각의 문자열 표현을 순서대로 출력합니다.</dd>
- <dt><code>msg</code></dt>
- <dd>0개 이상의 치환 문자열을 포함하는 JavaScript 문자열.</dd>
- <dt><code>subst1</code> ... <code>substN</code></dt>
- <dd><code>msg</code> 매개변수의 치환 문자열에 대입할 JavaScript 객체.</dd>
-</dl>
+- `obj1` ... `objN`
+  - : 출력에 사용할 JavaScript 객체. 각각의 문자열 표현은 입력한 순서대로 함께 출력됩니다.
+- `msg`
+  - : 0개 이상의 치환 문자열을 포함하는 JavaScript 문자열. `subst1`부터 `substN`까지 순서대로 치환됩니다.
+- `subst1` ... `substN`
+  - : `msg` 매개변수의 치환 문자열에 대체할 JavaScript 객체. 출력 형식에 추가 제어를 할 수 있게 해줍니다. 치환 작동 방식에 대한 설명은 [문자열 치환 사용하기](/ko/docs/Web/API/console#문자열_치환_사용하기)를 참조하세요.
 
-<h2 id="명세">명세</h2>
+## 명세
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#debug", "console.debug()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
+## 브라우저 호환성
 
-<div>
-
-
-<p>{{Compat("api.Console.debug")}}</p>
-</div>
+{{Compat}}
diff --git a/files/ko/web/api/console/error/index.md b/files/ko/web/api/console/error/index.md
index 529632b39e..7b4995a6d8 100644
--- a/files/ko/web/api/console/error/index.md
+++ b/files/ko/web/api/console/error/index.md
@@ -1,77 +1,44 @@
 ---
-title: Console.error()
-slug: Web/API/Console/error
+title: console.error()
+slug: Web/API/console/error
 tags:
   - API
   - DOM
-  - 디버깅
-  - 메소드
-  - 웹 개발
-  - 웹 콘솔
+  - Debugging
+  - Method
+  - Web Development
+  - web console
+browser-compat: api.console.error
 translation_of: Web/API/Console/error
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>웹 콘솔에 에러 메시지를 출력합니다.</p>
+**`console.error()`** 메서드는 웹 콘솔에 에러 메시지를 출력합니다.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="문법">문법</h2>
+## 구문
 
-<pre class="syntaxbox">console.error(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
-console.error(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
-console.exception(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
-console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
-</pre>
+```js
+console.error(obj1 [, obj2, ..., objN]);
+console.error(msg [, subst1, ..., substN]);
+```
 
-<div class="note">
-<p><strong>노트:</strong> <code>console.exception()</code>은 <code>console.error()</code>의 별칭입니다. 둘은 기능적으로 동일합니다.</p>
-</div>
+### 매개변수
 
-<h3 id="파라미터">파라미터</h3>
+- `obj1` ... `objN`
+  - : 출력할 JavaScript 객체의 리스트. 각 객체의 문자열 표현은 나열된 순서로 함께 출력됩니다.
+- `msg`
+  - : 0개 이상의 하위 문자열을 포함하는 JavaScript 문자열.
+- `subst1` ... `substN`
+  - : `msg` 안의 대체할 하위 문자열을 포함하는 JavaScript 객체. 출력 형식에 추가 제어를 할 수 있게 해줍니다.
 
-<dl>
- <dt><code>obj1</code> ... <code>objN</code></dt>
- <dd>출력할 JavaScript 객체의 리스트. 각 객체의 문자열 표현은 나열된 순서로 함께 출력됩니다.</dd>
- <dt><code>msg</code></dt>
- <dd>0개 이상의 하위 문자열을 포함하는 JavaScript 문자열.</dd>
- <dt><code>subst1</code> ... <code>substN</code></dt>
- <dd><code>msg</code> 안의 대체할 하위 문자열을 포함하는 JavaScript 객체. 출력 형식에 추가 제어를 할 수 있게 해줍니다.</dd>
-</dl>
+자세한 내용은 [콘솔에 텍스트 출력하기](/ko/docs/Web/API/Console#콘솔에_텍스트_출력하기)를 확인하세요.
 
-<p>자세한 내용은 {{domxref("console")}} 문서의 <a href="/ko/docs/Web/API/console#Outputting_text_to_the_console">콘솔에 텍스트를 출력하기</a>를 확인하세요.</p>
+## 명세
 
-<h2 id="명세">명세</h2>
+{{Specifications}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#error", "console.error()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>초기 정의</td>
-  </tr>
- </tbody>
-</table>
+## 브라우저 호환성
 
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
-
-<div>
-
-
-<p>{{Compat("api.Console.error")}}</p>
-</div>
-
-<h2 id="함께_보기">함께 보기</h2>
-
-<ul>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
- <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
- <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li>
-</ul>
+{{Compat}}
diff --git a/files/ko/web/api/console/group/index.md b/files/ko/web/api/console/group/index.md
index a4c4033612..ba245a502a 100644
--- a/files/ko/web/api/console/group/index.md
+++ b/files/ko/web/api/console/group/index.md
@@ -1,36 +1,44 @@
 ---
-title: Console.group()
-slug: Web/API/Console/group
+title: console.group()
+slug: Web/API/console/group
+tags:
+  - API
+  - DOM
+  - Debugging
+  - Method
+  - Web Development
+  - web console
+browser-compat: api.console.group
 translation_of: Web/API/Console/group
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p><a href="/en-US/docs/Tools/Web_Console">Web Console</a> log 에 새로운 인라인 그룹을 만듭니다. This indents all following output by an additional level, until {{domxref("console.groupEnd()")}} is called.</p>
+**`console.group()`** 메서드는 [웹 콘솔](/ko/docs/Tools/Web_Console) 로그에 새로운 인라인 그룹을 만듭니다. 이는 {{domxref("console.groupEnd()")}}가 호출될 때까지 모든 다음 출력을 추가 수준으로 들여씁니다.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="구문">구문</h2>
+## 구문
 
-<pre>console.group([label]);</pre>
+```js
+console.group([label]);
+```
 
-<h2 id="매개변수">매개변수</h2>
+## 매개변수
 
-<p> </p>
+- `label`
+  - : 그룹의 레이블입니다. 이 매개변수는 선택사항입니다. (Chrome 59에서 테스트됨) `console.groupEnd()`와 함께 작동하지 않습니다.
 
-<dl>
- <dt><code>label</code></dt>
- <dd>Label for the group. Optional. (Chrome 59 tested) Does not work with <code>console.groupEnd()</code>.</dd>
-</dl>
+### 콘솔에서 그룹 사용하기
 
-<p>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</p>
+중첩 그룹을 사용하여 관련 메시지를 시각적으로 연결하여 출력을 구성할 수 있습니다. 새 중첩 블록을 만들려면 `console.group()`을 호출하세요. `console.groupCollapsed()` 메서드와 비슷하지만 새 블록이 접혀 있고 이를 읽으려면 공개 버튼을 클릭해야 합니다.
 
-<p>You can use nested groups to help organize your output by visually associating related messages. To create a new nested block, call <code>console.group()</code>. The <code>console.groupCollapsed()</code> method is similar, but the new block is collapsed and requires clicking a disclosure button to read it.</p>
+> **참고:** Gecko 9부터 Gecko 51까지 `groupCollapsed()` 메소드는 `group()`과 동일했습니다.
+> 축소된 그룹은 Gecko 52부터 완전히 지원됩니다. {{bug("1088360")}}를 참조하세요.
 
-<p><strong>Note:</strong> From Gecko 9 until Gecko 51, the <code>groupCollapsed()</code> method was the same as <code>group()</code>. Collapsed groups are fully supported starting in Gecko 52. See {{bug("1088360")}}.</p>
+현재 그룹을 종료하려면 `console.groupEnd()`를 호출하세요. 예를 들어...
 
-<p>To exit the current group, call <code>console.groupEnd()</code>. For example, given this code:</p>
-
-<pre><code>console.log("This is the outer level");
+```js
+console.log("This is the outer level");
 console.group();
 console.log("Level 2");
 console.group();
@@ -39,45 +47,19 @@ console.warn("More of level 3");
 console.groupEnd();
 console.log("Back to level 2");
 console.groupEnd();
-console.log("Back to the outer level");</code></pre>
-
-<p>The output looks like this:</p>
-
-<p><img alt="A screenshot of messages nested in the console output." src="https://developer.mozilla.org/@api/deki/files/6082/=nesting.png"></p>
-
-<p>See <a href="https://developer.mozilla.org/en-US/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> in the documentation of {{domxref("console")}} for more details.</p>
-
-<p> </p>
-
-<h2 id="설명">설명</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#group", "console.group()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+console.log("Back to the outer level");
+```
 
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
+실행 결과는 다음과 같습니다.
 
-<p> </p>
+![A screenshot of messages nested in the console output.](nesting.png)
 
-<p>{{Compat("api.Console.group")}}</p>
+자세한 내용은 {{domxref("console")}} 문서의 [콘솔 그룹 사용하기](/ko/docs/Web/API/console#콘솔_그룹_사용하기)를 참조하세요.
+ 
+## 명세
 
-<p> </p>
+{{Specifications}}
 
-<h2 id="더_보기">더 보기</h2>
+## 브라우저 호환성
 
-<ul>
- <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
-</ul>
+{{Compat}}
diff --git a/files/ko/web/api/console/index.md b/files/ko/web/api/console/index.md
index b6faee82e3..8e0469161a 100644
--- a/files/ko/web/api/console/index.md
+++ b/files/ko/web/api/console/index.md
@@ -1,12 +1,13 @@
 ---
 title: console
-slug: Web/API/Console
+slug: Web/API/console
 tags:
   - API
+  - Debugging
   - Interface
   - Reference
-  - console
-  - 콘솔
+  - web console
+browser-compat: api.console
 translation_of: Web/API/Console
 ---
 {{APIRef("Console API")}}
@@ -23,8 +24,6 @@ console.log("링크를 열 수 없습니다")
 
 {{AvailableInWorkers}}
 
-> **참고:** 실제 `console` 인터페이스는 역사적 이유로 인해 모두 소문자(즉 `Console`이 아니고 `console`)입니다.
-
 ## 메서드
 
 - {{domxref("console.assert()")}}
@@ -144,7 +143,7 @@ for (var i=0; i<5; i++) {
 [13:14:13.488] Hello, Bob. You've called me 5 times.
 ```
 
-#### `console` 출력 꾸미기
+#### 콘솔 출력 꾸미기
 
 `"%c"` 명령을 사용해 콘솔 출력에 CSS 스타일을 적용할 수 있습니다.
 
@@ -228,7 +227,8 @@ console.timeEnd("answer time");
 
 시작할 때와 끝낼 때 모두 타이머의 이름이 표시됨을 알 수 있습니다.
 
-> **참고:** 타이머를 네트워크 트래픽 소요시간 측정에 사용하는 경우, 타이머는 총 소요시간을 보여주지만 네트워크 패널에 표시되는 시간은 헤더에 소모한 시간만 나타낸다는 것을 알아야 합니다. 응답 본문 로깅을 활성화한 경우, 응답 헤더와 본문의 시간을 합한 값이 타이머의 콘솔 출력과 비슷해야 합니다.
+> **참고:** 타이머를 네트워크 트래픽 소요시간 측정에 사용하는 경우, 타이머는 총 소요시간을 보여주지만 네트워크 패널에 표시되는 시간은 헤더에 소모한 시간만 나타낸다는 것을 알아야 합니다.
+> 응답 본문 로깅을 활성화한 경우, 응답 헤더와 본문의 시간을 합한 값이 타이머의 콘솔 출력과 비슷해야 합니다.
 
 ### 스택 추적
 
diff --git a/files/ko/web/api/console/log/index.md b/files/ko/web/api/console/log/index.md
index 0b67dd2293..fa3a453cc9 100644
--- a/files/ko/web/api/console/log/index.md
+++ b/files/ko/web/api/console/log/index.md
@@ -1,94 +1,76 @@
 ---
-title: Console.log()
-slug: Web/API/Console/log
+title: console.log()
+slug: Web/API/console/log
 tags:
   - API
-  - console
+  - DOM
+  - Debugging
+  - HTML-tree
+  - Method
+  - Reference
+  - Web Development
   - console.log()
-  - 메소드
+  - difference
+  - web console
+browser-compat: api.console.log
 translation_of: Web/API/Console/log
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>Web Console에 메시지를 출력합니다.</p>
+**`console.log()`** 메서드는 웹 콘솔에 메시지를 출력합니다. 메시지는 단일 문자열(선택적 대체 값 포함)이거나 더 많은 JavaScript 객체중 하나일 수 있습니다.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="구문">구문</h2>
+## 구문
 
-<pre class="syntaxbox">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
-console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
-</pre>
+```js
+console.log(obj1 [, obj2, ..., objN]);
+console.log(msg [, subst1, ..., substN]);
+```
 
-<h2 id="매개_변수">매개 변수</h2>
+### 매개변수
 
-<dl>
- <dt><code>obj1</code> ... <code>objN</code></dt>
- <dd>출력할 자바스크립트 객체의 모음입니다. 각각의 자바스크립트 객체들의 문자열 표현은 순서가 있는 목록에 추가되며, 출력됩니다. </dd>
- <dt><code>msg</code></dt>
- <dd>0개 이상의 치환 문자열(ex:%d, %s)들을 포함하는 자바스크립트 문자열입니다.</dd>
- <dt><code>subst1</code> ... <code>substN</code></dt>
- <dd><code>msg</code> 내의 치환 문자열들을 치환할 자바스크립트 객체들입니다. 이것은 추가적인 출력 형식 제어권을 제공합니다.</dd>
-</dl>
+- `obj1` ... `objN`
+  - : 출력할 JavaScript 객체 목록입니다. 이러한 각 객체의 문자열 표현은 입력한 순서대로 함께 출력됩니다. 최신 버전의 Chrome 및 Firefox에서, 콘솔에 기록되는 것은 객체에 대한 참조이며, `console.log()`를 호출하는 순간에 객체의 '값'이 반드시 필요한 것은 아닙니다.
+- `msg`
+  - : 0개 이상의 치환 문자열들을 포함하는 자바스크립트 문자열입니다.
+- `subst1` ... `substN`
+  - : `msg` 내의 치환 문자열들을 치환할 자바스크립트 객체들입니다. 출력 형식에 추가 제어를 할 수 있게 해줍니다.
 
-<p>자세한 내용은 {{domxref("console")}} 기록 문서에서 <a href="/en-US/docs/DOM/console#Outputting_text_to_the_console">Outputting text to the console</a>을 참조하십시오.</p>
+자세한 내용은 {{domxref("console")}} 문서의 [콘솔에 텍스트 출력](/ko/docs/Web/API/Console#콘솔에_텍스트_출력하기)을 참고하세요.
 
-<h2 id="명세">명세</h2>
+## log()와 dir()의 차이
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#consolelogobject--object-", "console.log()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+당신은 {{domxref("console.dir()")}}과 `console.log()`가 무엇이 다른지 궁금할 수 있습니다.
 
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
+DOM 요소들을 콘솔로 보낼 때 Chrome에서 다른 유용한 차이점이 있습니다.
 
+![](dozdcyr.png)
 
+안내:
 
-<p>{{Compat("api.Console.log")}}</p>
+- `console.log`는 요소를 HTML과 같은 트리 구조로 출력합니다.
+- `console.dir`은 요소를 JSON과 같은 트리 구조로 출력합니다.
 
-<h2 id="console.dir()_과의_차이">console.dir() 과의 차이</h2>
+구체적으로, `console.log`는 DOM 요소에 대해 특별한 처리를 제공하지만 `console.dir`은 그렇지 않습니다. 이것은 종종 DOM JS 객체의 전체 표현을 보려고 할 때 유용합니다.
 
-<p>당신은 console.dir() 과 console.log() 가 무엇이 다른지 궁금할 수 있습니다.</p>
+이것과 다른 함수들에 대한 더 많은 정보는 [Chrome Console API reference](https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject)에서 확인할 수 있습니다.
 
-<p>DOM 요소들을 콘솔로 보낼 때 Chrome에서 다른 유용한 차이점이 있습니다.</p>
+## 객체 로깅하기
 
-<p><img src="http://i.imgur.com/DozDcYR.png"></p>
+`console.log(obj)`를 사용하지 말고 `console.log(JSON.parse(JSON.stringify(obj)))`를 사용하시기 바랍니다.
 
-<p>안내:</p>
+이 방법은 여러분이 로그를 남길 당시의 `obj` 값을 보려고 사용했을 것입니다. 그러나 많은 브라우저가 값이 갱신 될때마다 끊임없이 바뀐 값을 보여줍니다. 이는 여러분이 원하는 방법이 아닐 것입니다.
 
-<ul>
- <li><code>console.log는 요소를 HTML과 같은 트리 구조로 출력합니다.</code></li>
- <li><code>console.dir은 요소를 JSON과 같은 트리 구조로 출력합니다.</code></li>
-</ul>
+## 명세
 
-<p>구체적으로, console.log는 DOM 요소에 대해 특별한 처리를 제공하지만 console.dir은 그렇지 않습니다. 이것은 종종 DOM JS 객체의 전체 표현을 보려고 할 때 유용합니다.</p>
+{{Specifications}}
 
-<p>이것과 다른 함수들에 대한 더 많은 정보가  <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a>에 있습니다.</p>
+## 브라우저 호환성
 
-<h2 id="객체_로깅하기">객체 로깅하기</h2>
+{{Compat}}
 
-<p><code>console.log(obj);</code>를 사용하지 말고 <br>
- <code>console.log(JSON.parse(JSON.stringify(obj)));</code>를 사용하시기 바랍니다.</p>
+## 같이 보기
 
-<p>이 방법은 여러분이 로그를 남길 당시의 <code>obj</code> 값을 보려고 사용했을겁니다. 그러나 많은 브라우저가 값이 갱신 될때마다 끊임없이 바뀐 값을 보여줍니다. 이는 여러분이 원하는 방법이 아닐겁니다.</p>
-
-<h2 id="참조">참조</h2>
-
-<ul>
- <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
- <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
- <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug supports additional features in its console.log() implementation, such as <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</a>.</li>
- <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li>
-</ul>
+- [MSDN: F12 도구 콘솔을 사용하여 오류 및 상태 보기](https://msdn.microsoft.com/library/gg589530)
+- [NodeJS: Console API](https://nodejs.org/docs/latest/api/console.html#console_console_log_data)
diff --git a/files/ko/web/api/console/time/index.md b/files/ko/web/api/console/time/index.md
index bcb3777ccb..9382db9c3f 100644
--- a/files/ko/web/api/console/time/index.md
+++ b/files/ko/web/api/console/time/index.md
@@ -1,56 +1,37 @@
 ---
-title: Console.time()
-slug: Web/API/Console/time
+title: console.time()
+slug: Web/API/console/time
+tags:
+  - API
+  - DOM
+  - Debugging
+  - Method
+  - Web Development
+  - web console
+browser-compat: api.console.time
 translation_of: Web/API/Console/time
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>타이머를 시작해 작업이 얼마나 걸리는지 추적할 수 있습니다. 각 타이머에게 고유한 이름을 줄 수 있고, 한 페이지에 최대 10,000개의 타이머를 설정할 수 있습니다. 같은 이름으로 {{domxref("console.timeEnd()")}}를 호출할 때, 브라우저가 밀리초 단위로 경과한 시간을 출력합니다.</p>
+**`console.time()`** 메서드는 타이머를 시작해 작업이 얼마나 걸리는지 추적할 수 있습니다. 각 타이머에게 고유한 이름을 줄 수 있고, 한 페이지에 최대 10,000개의 타이머를 설정할 수 있습니다. 같은 이름으로 {{domxref("console.timeEnd()")}}를 호출할 때, 브라우저가 밀리초 단위로 경과한 시간을 출력합니다.
 
-<p>자세한 내용과 예제는 {{domxref("console")}} 내의 <a href="/ko/docs/Web/API/console#Timers">타이머</a>를 확인하세요.</p>
+자세한 내용과 예제는 {{domxref("console")}} 문서의 [타이머](/ko/docs/Web/API/console#타이머)를 참고하세요.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="문법">문법</h2>
+## 구문
 
-<pre class="syntaxbox">console.time(<em>label</em>);
-</pre>
+```js
+console.time(label);
+```
 
-<h2 id="파라미터">파라미터</h2>
+## 매개변수
 
-<dl>
- <dt><code>label</code></dt>
- <dd>새 타이머에게 설정할 이름. 타이머를 식별합니다. 같은 이름으로 {{domxref("console.timeEnd()")}}를 호출하면 타이머가 중단되고 콘솔에 시간을 출력합니다.</dd>
-</dl>
+- `label`
+  - : 새 타이머에게 설정할 이름. 타이머를 식별합니다. 같은 이름으로 {{domxref("console.timeEnd()")}}를 호출하면 타이머가 중단되고 콘솔에 시간을 출력합니다.
 
-<h2 id="명세">명세</h2>
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#time", "console.time()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>초기 정의</td>
-  </tr>
- </tbody>
-</table>
+## 같이 보기
 
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
-
-
-
-<p>{{Compat("api.Console.time")}}</p>
-
-<h2 id="함께_보기">함께 보기</h2>
-
-<ul>
- <li>{{domxref("Console.timeEnd()")}}</li>
- <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
-</ul>
+- {{domxref("console.timeEnd()")}}
+- {{domxref("console.timeLog()")}}
diff --git a/files/ko/web/api/console/timeend/index.md b/files/ko/web/api/console/timeend/index.md
index d9bc7674e5..de8af681f6 100644
--- a/files/ko/web/api/console/timeend/index.md
+++ b/files/ko/web/api/console/timeend/index.md
@@ -1,68 +1,56 @@
 ---
-title: Console.timeEnd()
-slug: Web/API/Console/timeEnd
+title: console.timeEnd()
+slug: Web/API/console/timeEnd
 tags:
-  - 디버깅
-  - 웹 개발
-  - 웹 콘솔
-  - 콘솔
-  - 타이머
+  - API
+  - DOM
+  - Debugging
+  - Method
+  - Web Development
+  - console
+  - web console
+browser-compat: api.console.timeEnd
 translation_of: Web/API/Console/timeEnd
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<div>이전에 {{domxref("console.time()")}}를 호출하여 시작된 타이머를 중지하고 <a href="/ko/docs/도구들/Web_Console">웹 콘솔</a>에 경과 시간을 밀리초 단위로 표시합니다.</div>
+**`console.timeEnd()`** 는 이전에 {{domxref("console.time()")}}를 호출하여 시작된 타이머를 중지합니다.
 
-<div> </div>
+자세한 내용과 예제는 [타이머](/ko/docs/Web/API/console#타이머)를 참조하세요.
 
-<div>자세한 내용과 예제는 <strong>콘솔</strong> 문서의 <a href="/ko/docs/Web/API/console#Timers">Timers</a>를 참조하세요.</div>
+{{AvailableInWorkers}}
 
-<div> </div>
+## 구문
 
-<p>{{AvailableInWorkers}}</p>
+```js
+console.timeEnd(label);
+```
 
-<h2 id="구문(Syntax)">구문(Syntax)</h2>
+### 매개변수
 
-<pre class="syntaxbox">console.timeEnd(<em>label</em>);
-</pre>
+- `label`
+  - : 중지할 타이머의 이름입니다. 중지되면 경과 시간이 [웹 콘솔](/ko/docs/Tools/Web_Console)에 자동으로 시간이 종료되었음을 알리는 표시와 함께 표시됩니다.
 
-<h3 id="매개_변수(Parameters)">매개 변수(Parameters)</h3>
+## 예제
 
-<dl>
- <dt><code>label</code></dt>
- <dd>중지할 타이머의 이름입니다. console.time()를 호출할 때의 이름을 사용하여 해당 타이머를 중지할 수 있는 식별자 역할을 합니다.</dd>
-</dl>
+```js
+console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");
+```
 
-<h2 id="명세서(Specifications)">명세서(Specifications)</h2>
+위 예제의 출력은 사용자가 첫 번째 경고 상자를 닫는 데 걸린 시간과 사용자가 두 번째 경고를 닫는 데 걸린 시간을 보여줍니다.
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#timeend", "console.timeEnd()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+![](timer_output.png)
 
-<h2 id="브라우저_호환성(Browser_compatibility)">브라우저 호환성(Browser compatibility)</h2>
+타이머 이름은 `timeLog()`를 사용하여 타이머 값을 기록할 때 표시되고 중지될 때 다시 표시됩니다. 또한 timeEnd()에 대한 호출에는 타이머가 더 이상 시간을 추적하지 않는다는 것을 분명히 하기 위해 "타이머 종료됨"이라는 추가 정보가 있습니다.
 
-<div>
+## 명세
 
+{{Specifications}}
 
-<p>{{Compat("api.Console.timeEnd")}}</p>
-</div>
+## 브라우저 호환성
 
-<h2 id="함께_보기(See_also)">함께 보기(See also)</h2>
-
-<ul>
- <li>{{domxref("console.time()")}}</li>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
-</ul>
+{{Compat}}
diff --git a/files/ko/web/api/console/trace/index.md b/files/ko/web/api/console/trace/index.md
index 2726eca0d4..2fefaf5fb0 100644
--- a/files/ko/web/api/console/trace/index.md
+++ b/files/ko/web/api/console/trace/index.md
@@ -1,35 +1,44 @@
 ---
 title: console.trace()
-slug: Web/API/Console/trace
+slug: Web/API/console/trace
 tags:
   - API
+  - Chrome
   - DOM
+  - Debugging
   - Firefox
-  - 디버깅
-  - 메소드
-  - 웹 개발
-  - 웹 콘솔
-  - 추적
-  - 콘솔
-  - 크롬
+  - Method
+  - String
+  - Web Development
+  - console.trace()
+  - trace
+  - web console
+browser-compat: api.console.trace
 translation_of: Web/API/Console/trace
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p><a href="/en-US/docs/Tools/Web_Console">웹 콘솔</a>에 스택 추적을 출력합니다.</p>
+**`console.trace()`** 메서드는 [웹 콘솔](/ko/docs/Tools/Web_Console)에 스택 추적을 출력합니다.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<p>자세한 내용과 예제는 {{domxref("console")}} 내의 <a href="/ko/docs/Web/API/console#Stack_traces">스택 추적</a>을 확인하세요.</p>
+자세한 내용과 예제는 {{domxref("console")}} 문서의 [스택 추적](/ko/docs/Web/API/console#스택_추적)을 참고하세요.
 
-<h2 id="문법">문법</h2>
+## 구문
 
-<pre class="syntaxbox">console.trace();
-</pre>
+```js
+console.trace( [...any, ...data ]);
+```
 
-<h2 id="예제">예제</h2>
+### 매개변수
 
-<pre class="brush: js">function foo() {
+- `...any, ...data` {{optional_inline}}
+  - : 스택 추적과 함께 콘솔에 출력할 0개 이상의 객체. {{domxref("console.log()")}} 메서드에 전달되는 것과 동일한 방식으로 조합되고 형식이 지정됩니다.
+
+## 예제
+
+```js
+function foo() {
   function bar() {
     console.trace();
   }
@@ -37,41 +46,20 @@ translation_of: Web/API/Console/trace
 }
 
 foo();
-</pre>
+```
 
-<p>콘솔에 다음과 같은 추적이 표시됩니다.</p>
+콘솔에 다음과 같은 추적이 표시됩니다.
 
-<pre>bar
+```
+bar
 foo
-&lt;anonymous&gt;</pre>
-
-<h2 id="명세">명세</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#trace", "console.trace()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>초기 정의</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
-
+<anonymous>
+```
 
+## 명세
 
-<p>{{Compat("api.Console.trace")}}</p>
+{{Specifications}}
 
-<h2 id="함께_보기">함께 보기</h2>
+## 브라우저 호환성
 
-<ul>
- <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
-</ul>
+{{Compat}}
diff --git a/files/ko/web/api/console/warn/index.md b/files/ko/web/api/console/warn/index.md
index b63bb925db..7598ed8a12 100644
--- a/files/ko/web/api/console/warn/index.md
+++ b/files/ko/web/api/console/warn/index.md
@@ -1,70 +1,50 @@
 ---
-title: Console.warn()
-slug: Web/API/Console/warn
+title: console.warn()
+slug: Web/API/console/warn
 tags:
   - API
   - DOM
-  - 디버깅
-  - 메소드
-  - 웹 개발
-  - 웹 콘솔
+  - Debugging
+  - Method
+  - Web Development
+  - web console
+browser-compat: api.console.warn
 translation_of: Web/API/Console/warn
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>웹 콘솔에 경고 메시지를 출력합니다.</p>
+**`console.warn()`** 메서드는 웹 콘솔에 경고 메시지를 출력합니다.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<p>{{Note("Firefox에서는 웹 콘솔의 경고 옆에 작은 느낌표 아이콘이 나타납니다.")}}</p>
+> **참고:** Firefox에서는 웹 콘솔의 경고 옆에 작은 느낌표 아이콘이 나타납니다.
 
-<h2 id="문법">문법</h2>
+## 구문
 
-<pre class="syntaxbox">console.warn(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
-console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
-</pre>
+```js
+console.warn(obj1 [, obj2, ..., objN]);
+console.warn(msg [, subst1, ..., substN]);
+```
 
-<h2 id="파라미터">파라미터</h2>
+## 매개변수
 
-<dl>
- <dt><code>obj1</code> ... <code>objN</code></dt>
- <dd>출력할 JavaScript 객체의 리스트. 각 객체의 문자열 표현은 입력한 순서대로 함께 출력됩니다.</dd>
- <dt><code>msg</code></dt>
- <dd>0개 이상의 문자열을 포함하는 JavaScript 문자열.</dd>
- <dt><code>subst1</code> ... <code>substN</code></dt>
- <dd><code>msg</code> 안의 문자열을 대체하기 위한 JavaScript 객체. 출력의 형식을 추가로 제어할 수 있게해줍니다.</dd>
-</dl>
+- `obj1` ... `objN`
+  - : 출력할 JavaScript 객체의 리스트. 각 객체의 문자열 표현은 입력한 순서대로 함께 출력됩니다.
+- `msg`
+  - : 0개 이상의 치환 문자열을 포함하는 JavaScript 문자열.
+- `subst1` ... `substN`
+  - : `msg` 안의 문자열을 치환하기 위한 JavaScript 객체. 출력 형식에 추가 제어를 할 수 있게 해줍니다.
 
-<p>자세한 내용은 {{domxref("console")}} 문서 내 <a href="/ko/docs/Web/API/console#Outputting_text_to_the_console">콘솔에 텍스트를 출력하기</a>를 확인하세요.</p>
+자세한 내용은 {{domxref("console")}} 문서의 [콘솔에 텍스트 출력하기](/ko/docs/Web/API/console#콘솔에_텍스트_출력하기)를 참고하세요.
 
-<h2 id="명세">명세</h2>
+## 명세
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#warn", "console.warn()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>초기 정의</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
+## 브라우저 호환성
 
+{{Compat}}
 
+## 같이 보기
 
-<p>{{Compat("api.Console.warn")}}</p>
-
-<h2 id="함께_보기">함께 보기</h2>
-
-<ul>
- <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
- <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
-</ul>
+- [MSDN: F12 도구 콘솔을 사용하여 오류 및 상태 보기](https://msdn.microsoft.com/library/gg589530)