edit: `/ko/web/api/console/index.md`

1 files changed, 192 insertions, 214 deletions

diff --git a/files/ko/web/api/console/index.md b/files/ko/web/api/console/index.md
index cd815b0979..b6faee82e3 100644
--- a/files/ko/web/api/console/index.md
+++ b/files/ko/web/api/console/index.md
@@ -9,201 +9,190 @@ tags:
   - 콘솔
 translation_of: Web/API/Console
 ---
-<div>{{APIRef("Console API")}}</div>
-
-<p><span class="seoSummary"><strong><code>console</code></strong> 객체는 브라우저의 디버깅 콘솔(Firefox <a href="/ko/docs/Tools/Web_Console">웹 콘솔</a> 등)에 접근할 수 있는 메서드를 제공합니다.</span> 동작 방식은 브라우저마다 다르지만, 사실상 표준으로 여겨지는 기능도 여럿 있습니다.</p>
-
-<p><code>console</code> 객체는 아무 전역 객체에서나 접근할 수 있습니다. 브라우징 문맥에선 {{domxref("Window")}}, 워커에서는 {{domxref("WorkerGlobalScope")}}이 속성으로 포함하고 있습니다. {{domxref("Window.console")}}의 형태로 노출되어 있으므로 간단하게 <code>console</code>로 참조할 수 있습니다.</p>
-
-<pre class="brush: js">console.log("링크를 열 수 없습니다")</pre>
-
-<p>이 문서는 콘솔 객체에서 사용할 수 있는 {{anch("메서드")}}와 몇 가지 {{anch("예제")}}를 다룹니다.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<div class="blockIndicator note">
-<p><strong>참고</strong>: 실제 <code>console</code> 인터페이스는 역사적 이유로 인해 모두 소문자(즉 <code>Console</code>이 아니고 <code>console</code>)입니다.</p>
-</div>
-
-<h2 id="메서드">메서드</h2>
-
-<dl>
- <dt>{{domxref("console.assert()")}}</dt>
- <dd>첫 번째 매개변수가 <code>false</code>인 경우 메시지와 {{anch("스택 추적")}}을 출력합니다.</dd>
- <dt>{{domxref("console.clear()")}}</dt>
- <dd>콘솔의 내용을 지웁니다.</dd>
- <dt>{{domxref("console.count()")}}</dt>
- <dd>주어진 레이블로 메서드를 호출한 횟수를 출력합니다.</dd>
- <dt>{{domxref("console.countReset()")}}</dt>
- <dd>주어진 라벨의 횟수를 초기화합니다.</dd>
- <dt>{{domxref("console.debug()")}}</dt>
- <dd><code>"debug"</code> 중요도로 메시지를 출력합니다.</dd>
- <dt>{{domxref("console.dir()")}}</dt>
- <dd>주어진 JavaScript 객체의 속성 목록을 상호작용 가능한 형태로 표시합니다. 속성 값이 다른 객체라면 펼쳐서 살펴볼 수 있습니다.</dd>
- <dt>{{domxref("console.dirxml()")}}</dt>
- <dd>
- <p>객체를 XML/HTML 요소 형태로 나타낼 수 있으면 그렇게 표시하고, 아닐 경우 JavaScript 객체 형태로 표시합니다.</p>
- </dd>
- <dt>{{domxref("console.error()")}}</dt>
- <dd>오류 메시지를 출력합니다. 추가 매개변수와 함께 {{anch("문자열 치환")}}을 사용할 수 있습니다.</dd>
- <dt>{{domxref("console.exception()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
- <dd><code>error()</code>의 별칭입니다.</dd>
- <dt>{{domxref("console.group()")}}</dt>
- <dd>새로운 인라인 {{anch("그룹")}}을 생성해, 이후 모든 출력을 한 단계 들여씁니다. 그룹을 나오려면 <code>groupEnd()</code>를 호출하세요.</dd>
- <dt>{{domxref("console.groupCollapsed()")}}</dt>
- <dd>새로운 인라인 {{anch("그룹")}}을 생성해, 이후 모든 출력을 한 단계 들여씁니다. 그러나 <code>group()</code>과 달리, <code>groupCollapsed()</code>로 생성한 그룹은 처음에 접혀 있습니다. 그룹을 나오려면 groupEnd()를 호출하세요.</dd>
- <dt>{{domxref("console.groupEnd()")}}</dt>
- <dd>현재 인라인 {{anch("그룹")}}을 나옵니다.</dd>
- <dt>{{domxref("console.info()")}}</dt>
- <dd>정보 메시지를 출력합니다. 추가 매개변수와 함께 {{anch("문자열 치환")}}을 사용할 수 있습니다.</dd>
- <dt>{{domxref("console.log()")}}</dt>
- <dd>일반 메시지를 출력합니다. 추가 매개변수와 함께 {{anch("문자열 치환")}}을 사용할 수 있습니다.</dd>
- <dt>{{domxref("console.profile()")}}</dt>
- <dd>브라우저의 내장 프로파일러(<a href="/ko/docs/Tools/Performance">Firefox 성능 측정 도구</a> 등)를 실행합니다. 선택 사항으로 프로파일에 이름을 붙일 수 있습니다.</dd>
- <dt>{{domxref("console.profileEnd()")}}</dt>
- <dd>프로파일러를 멈춥니다. 프로파일 결과는 브라우저의 성능 측정 도구(<a href="/ko/docs/Tools/Performance">Firefox 성능 측정 도구</a> 등)에서 확인할 수 있습니다.</dd>
- <dt>{{domxref("console.table()")}}</dt>
- <dd>표 형태의 데이터를 표에 그립니다.</dd>
- <dt>{{domxref("console.time()")}}</dt>
- <dd>주어진 이름의 {{anch("타이머")}}를 실행합니다. 하나의 페이지에서는 최대 10,000개의 타이머를 동시에 실행할 수 있습니다.</dd>
- <dt>{{domxref("console.timeEnd()")}}</dt>
- <dd>지정한 {{anch("타이머")}}를 멈추고, 소요시간을 출력합니다.</dd>
- <dt>{{domxref("console.timeStamp()")}} {{non-standard_inline}}</dt>
- <dd>브라우저의 <a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool">타임라인</a>이나 <a href="/ko/docs/Tools/Performance/Waterfall">워터폴</a>에 마커를 추가합니다.</dd>
- <dt>{{domxref("console.trace()")}}</dt>
- <dd>{{anch("스택 추적")}}을 출력합니다.</dd>
- <dt>{{domxref("console.warn()")}}</dt>
- <dd>경고 메시지를 출력합니다. 추가 매개변수와 함께 {{anch("문자열 치환")}}을 사용할 수 있습니다.</dd>
-</dl>
-
-<h2 id="Usage" name="Usage">예제</h2>
-
-<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">콘솔에 텍스트 출력하기</h3>
-
-<p>콘솔에서 가장 많이 사용하는 기능은 데이터와 텍스트를 출력하는 것입니다. 콘솔 메시지의 중요도는 네 가지로, 각각 {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, {{domxref("console.error()")}} 메서드를 사용해 출력할 수 있습니다. 중요도 별로 출력 스타일이 조금씩 다르며, 중요도 필터를 사용해 원하는 메시지만 골라 볼 수도 있습니다.</p>
-
-<p>각각의 출력 메서드는 두 가지 방법으로 사용할 수 있습니다. 첫 번째는 단순히 객체 목록을 제공하는 것으로, 각자의 문자열 표현이 하나로 합쳐져서 출력됩니다. 두 번째는 치환 문자열을 포함한 문자열 뒤에, 그 자리에 배치할 객체 목록을 제공하는 것입니다.</p>
-
-<h4 id="단일_객체_출력하기">단일 객체 출력하기</h4>
-
-<p>로그를 남기는 가장 간단한 방법은 하나의 객체를 출력하는 것입니다.</p>
-
-<pre class="brush: js">var someObject = { str: "Some text", id: 5 };
+{{APIRef("Console API")}}
+
+**`console`** 객체는 브라우저의 디버깅 콘솔(Firefox [웹 콘솔](/ko/docs/Tools/Web_Console) 등)에 접근할 수 있는 메서드를 제공합니다. 동작 방식은 브라우저마다 다르지만, 사실상 표준으로 여겨지는 기능도 여럿 있습니다.
+
+`console` 객체는 아무 전역 객체에서나 접근할 수 있습니다. 브라우징 문맥에선 {{domxref("Window")}}, 워커에서는 {{domxref("WorkerGlobalScope")}}이 속성으로 포함하고 있습니다. {{domxref("Window.console")}}의 형태로 노출되어 있으므로 간단하게 `console`로 참조할 수 있습니다.
+
+```js
+console.log("링크를 열 수 없습니다")
+```
+
+이 문서는 콘솔 객체에서 사용할 수 있는 {{anch("메서드")}}와 몇 가지 {{anch("예제")}}를 다룹니다.
+
+{{AvailableInWorkers}}
+
+> **참고:** 실제 `console` 인터페이스는 역사적 이유로 인해 모두 소문자(즉 `Console`이 아니고 `console`)입니다.
+
+## 메서드
+
+- {{domxref("console.assert()")}}
+  - : 첫 번째 매개변수가 `false`인 경우 메시지와 {{anch("스택 추적")}}을 출력합니다.
+- {{domxref("console.clear()")}}
+  - : 콘솔의 내용을 지웁니다.
+- {{domxref("console.count()")}}
+  - : 주어진 레이블로 메서드를 호출한 횟수를 출력합니다.
+- {{domxref("console.countReset()")}}
+  - : 주어진 라벨의 횟수를 초기화합니다.
+- {{domxref("console.debug()")}}
+  - : `debug` 중요도로 메시지를 출력합니다.
+- {{domxref("console.dir()")}}
+  - : 주어진 JavaScript 객체의 속성 목록을 상호작용 가능한 형태로 표시합니다. 속성 값이 다른 객체라면 펼쳐서 살펴볼 수 있습니다.
+- {{domxref("console.dirxml()")}}
+  - : 객체를 XML/HTML 요소 형태로 나타낼 수 있으면 그렇게 표시하고, 아닐 경우 JavaScript 객체 형태로 표시합니다.
+- {{domxref("console.error()")}}
+  - : 오류 메시지를 출력합니다. 추가 매개변수와 함께 [문자열 치환](#문자열_치환_사용하기)을 사용할 수 있습니다.
+- {{domxref("console.exception()")}} {{non-standard_inline}} {{deprecated_inline}}
+  - : `error()`의 별칭입니다.
+- {{domxref("console.group()")}}
+  - : 새로운 인라인 [그룹](#콘솔_그룹_사용하기)을 생성해, 이후 모든 출력을 한 단계 들여씁니다. 그룹을 나오려면 `groupEnd()`를 호출하세요.
+- {{domxref("console.groupCollapsed()")}}
+  - : 새로운 인라인 [그룹](#콘솔_그룹_사용하기)을 생성해, 이후 모든 출력을 한 단계 들여씁니다. 그러나 `group()`과 달리, `groupCollapsed()`로 생성한 그룹은 처음에 접혀 있습니다. 그룹을 나오려면 `groupEnd()`를 호출하세요.
+- {{domxref("console.groupEnd()")}}
+  - : 현재 인라인 [그룹](#콘솔_그룹_사용하기)을 나옵니다.
+- {{domxref("console.info()")}}
+  - : 정보 메시지를 출력합니다. 추가 매개변수와 함께 [문자열 치환](#문자열_치환_사용하기)을 사용할 수 있습니다.
+- {{domxref("console.log()")}}
+  - : 일반 메시지를 출력합니다. 추가 매개변수와 함께 [문자열 치환](#문자열_치환_사용하기)을 사용할 수 있습니다.
+- {{domxref("console.profile()")}}
+  - : 브라우저의 내장 프로파일러([Firefox 성능 측정 도구](/ko/docs/Tools/Performance) 등)를 실행합니다. 선택 사항으로 프로파일에 이름을 붙일 수 있습니다.
+- {{domxref("console.profileEnd()")}}
+  - : 프로파일러를 멈춥니다. 프로파일 결과는 브라우저의 성능 측정 도구([Firefox 성능 측정 도구](/ko/docs/Tools/Performance) 등)에서 확인할 수 있습니다.
+- {{domxref("console.table()")}}
+  - : 표 형태의 데이터를 표에 그립니다.
+- {{domxref("console.time()")}}
+  - : 주어진 이름의 {{anch("타이머")}}를 실행합니다. 하나의 페이지에서는 최대 10,000개의 타이머를 동시에 실행할 수 있습니다.
+- {{domxref("console.timeEnd()")}}
+  - : 지정한 {{anch("타이머")}}를 멈추고, 소요시간을 출력합니다.
+- {{domxref("console.timeStamp()")}} {{non-standard_inline}}
+  - : 브라우저의 [타임라인](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)이나 [워터폴](/ko/docs/Tools/Performance/Waterfall)에 마커를 추가합니다.
+- {{domxref("console.trace()")}}
+  - : {{anch("스택 추적")}}을 출력합니다.
+- {{domxref("console.warn()")}}
+  - : 경고 메시지를 출력합니다. 추가 매개변수와 함께 [문자열 치환](#문자열_치환_사용하기)을 사용할 수 있습니다.
+
+## 예제
+
+### 콘솔에 텍스트 출력하기
+
+콘솔에서 가장 많이 사용하는 기능은 데이터와 텍스트를 출력하는 것입니다. 콘솔 메시지의 중요도는 네 가지로, 각각 {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, {{domxref("console.error()")}} 메서드를 사용해 출력할 수 있습니다. 중요도 별로 출력 스타일이 조금씩 다르며, 중요도 필터를 사용해 원하는 메시지만 골라 볼 수도 있습니다.
+
+각각의 출력 메서드는 두 가지 방법으로 사용할 수 있습니다. 첫 번째는 단순히 객체 목록을 제공하는 것으로, 각자의 문자열 표현이 하나로 합쳐져서 출력됩니다. 두 번째는 치환 문자열을 포함한 문자열 뒤에, 그 자리에 배치할 객체 목록을 제공하는 것입니다.
+
+#### 단일 객체 출력하기
+
+로그를 남기는 가장 간단한 방법은 하나의 객체를 출력하는 것입니다.
+
+```js
+var someObject = { str: "Some text", id: 5 };
 console.log(someObject);
-</pre>
+```
 
-<p>출력은 다음과 같습니다.</p>
+출력은 다음과 같습니다.
 
-<pre>[09:27:13.475] ({str:"Some text", id:5})</pre>
+```bash
+[09:27:13.475] ({str:"Some text", id:5})
+```
 
-<h4 id="여러_객체_출력하기">여러 객체 출력하기</h4>
+#### 여러 객체 출력하기
 
-<p>여러 객체를 출력하는 방법은 메서드를 호출할 때 모두 나열하면 됩니다.</p>
+여러 객체를 출력하는 방법은 메서드를 호출할 때 모두 나열하면 됩니다.
 
-<pre class="brush: js">var car = "Dodge Charger";
+```js
+var car = "Dodge Charger";
 var someObject = {str:"Some text", id:5};
-console.info("My first car was a", car, ". The object is: ", someObject);</pre>
-
-<p>출력은 다음과 같습니다.</p>
-
-<pre>[09:28:22.711] My first car was a Dodge Charger. The object is: ({str:"Some text", id:5})
-</pre>
-
-<h4 id="문자열_치환">문자열 치환</h4>
-
-<p><code>log()</code>처럼 문자열을 받는 콘솔 메서드에는 아래의 치환 문자열을 제공할 수 있습니다.</p>
-
-<table class="standard-table" style="width: auto;">
- <tbody>
-  <tr>
-   <td class="header">치환 문자열</td>
-   <td class="header">설명</td>
-  </tr>
-  <tr>
-   <td><code>%o</code> 또는 <code>%O</code></td>
-   <td>JavaScript 객체를 출력합니다. 객체 이름을 클릭하면 검사기에 더 자세한 정보를 보여줍니다.</td>
-  </tr>
-  <tr>
-   <td><code>%d</code> 또는 <code>%i</code></td>
-   <td>정수를 출력합니다. 서식도 지원합니다. 예를 들어 <code>console.log("Foo %.2d", "1.1")</code>은 정수부를 0이 앞서는 두 자리로 표현하므로 <code>Foo 01</code>을 출력합니다.</td>
-  </tr>
-  <tr>
-   <td><code>%s</code></td>
-   <td>문자열을 출력합니다.</td>
-  </tr>
-  <tr>
-   <td><code>%f</code></td>
-   <td>부동소수점 수를 출력합니다. 서식도 지원합니다. 예를 들어 <code>console.log("Foo %.2f", "1.1")</code>은 소수부를 두 자리로 표현하므로 <code>Foo 1.10</code>을 출력합니다.</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="blockIndicator note">
-<p><strong>참고</strong>: Chrome은 숫자 서식을 지원하지 않습니다.</p>
-</div>
-
-<p>각각의 치환 문자열은 이후 매개변수에서 값을 가져옵니다. 예를 들어...</p>
-
-<pre>for (var i=0; i&lt;5; i++) {
+console.info("My first car was a", car, ". The object is: ", someObject);
+```
+
+출력은 다음과 같습니다.
+
+```bash
+[09:28:22.711] My first car was a Dodge Charger. The object is: ({str:"Some text", id:5})
+```
+
+#### 문자열 치환 사용하기
+
+`log()`처럼 문자열을 받는 콘솔 메서드에는 아래의 치환 문자열을 제공할 수 있습니다.
+
+- `%o` 또는 `%O`
+  - : JavaScript 객체를 출력합니다. 객체 이름을 클릭하면 검사기에 더 자세한 정보를 보여줍니다.
+- `%d` 또는 `%i`
+  - : 정수를 출력합니다. 서식도 지원합니다. 예를 들어 `console.log("Foo %.2d", "1.1")`은 정수부를 0이 앞서는 두 자리로 표현하므로 `Foo 01`을 출력합니다.
+- `%s`
+  - : 문자열을 출력합니다.
+- `%f`
+  - : 부동소수점 수를 출력합니다. 서식도 지원합니다. 예를 들어 `console.log("Foo %.2f", "1.1")`은 소수부를 두 자리로 표현하므로 `Foo 1.10`을 출력합니다.
+
+> **참고:** Chrome은 숫자 서식을 지원하지 않습니다
+
+각각의 치환 문자열은 이후 매개변수에서 값을 가져옵니다. 예를 들어...
+
+```js
+for (var i=0; i<5; i++) {
   console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
 }
-</pre>
+```
 
-<p>위의 출력은 다음과 같습니다.</p>
+위의 출력은 다음과 같습니다.
 
-<pre>[13:14:13.481] Hello, Bob. You've called me 1 times.
+```bash
+[13:14:13.481] Hello, Bob. You've called me 1 times.
 [13:14:13.483] Hello, Bob. You've called me 2 times.
 [13:14:13.485] Hello, Bob. You've called me 3 times.
 [13:14:13.487] Hello, Bob. You've called me 4 times.
 [13:14:13.488] Hello, Bob. You've called me 5 times.
-</pre>
+```
+
+#### `console` 출력 꾸미기
 
-<h4 id="console_출력_꾸미기"><code>console</code> 출력 꾸미기</h4>
+`"%c"` 명령을 사용해 콘솔 출력에 CSS 스타일을 적용할 수 있습니다.
 
-<p><code>"%c"</code> 명령을 사용해 콘솔 출력에 CSS 스타일을 적용할 수 있습니다.</p>
+```js
+console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
+```
 
-<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre>
+명령 이전의 텍스트는 영향을 받지 않고, 이후의 텍스트는 매개변수로 제공한 CSS 선언을 적용합니다.
 
-<div>명령 이전의 텍스트는 영향을 받지 않고, 이후의 텍스트는 매개변수로 제공한 CSS 선언을 적용합니다.</div>
+![](css-styling.png)
 
-<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div>
+`"%c"` 명령을 여러 번 사용할 수도 있습니다.
 
-<div></div>
+```js
+console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");
+```
 
-<p><code>%c</code> 구문과 함께 사용할 수 있는 CSS 속성은 다음과 같습니다. (Firefox 기준, 브라우저마다 다를 수 있음)</p>
+`%c` 구문과 함께 사용할 수 있는 CSS 속성은 다음과 같습니다. (Firefox 기준, 브라우저마다 다를 수 있음)
 
-<ul>
- <li>{{cssxref("background")}}와 그 본디 속성.</li>
- <li>{{cssxref("border")}}와 그 본디 속성.</li>
- <li>{{cssxref("border-radius")}}</li>
- <li>{{cssxref("box-decoration-break")}}</li>
- <li>{{cssxref("box-shadow")}}</li>
- <li>{{cssxref("clear")}}, {{cssxref("float")}}</li>
- <li>{{cssxref("color")}}</li>
- <li>{{cssxref("cursor")}}</li>
- <li>{{cssxref("display")}}</li>
- <li>{{cssxref("font")}}와 그 본디 속성.</li>
- <li>{{cssxref("line-height")}}</li>
- <li>{{cssxref("margin")}}</li>
- <li>{{cssxref("outline")}}과 그 본디 속성.</li>
- <li>{{cssxref("padding")}}</li>
- <li>{{cssxref("text-transform")}} 등 <code>text-*</code> 속성.</li>
- <li>{{cssxref("white-space")}}</li>
- <li>{{cssxref("word-spacing")}}, {{cssxref("word-break")}}</li>
- <li>{{cssxref("writing-mode")}}</li>
-</ul>
+- {{cssxref("background")}}와 그 본디 속성.
+- {{cssxref("border")}}와 그 본디 속성.
+- {{cssxref("border-radius")}}
+- {{cssxref("box-decoration-break")}}
+- {{cssxref("box-shadow")}}
+- {{cssxref("clear")}}, {{cssxref("float")}}
+- {{cssxref("color")}}
+- {{cssxref("cursor")}}
+- {{cssxref("display")}}
+- {{cssxref("font")}}와 그 본디 속성.
+- {{cssxref("line-height")}}
+- {{cssxref("margin")}}
+- {{cssxref("outline")}}과 그 본디 속성.
+- {{cssxref("padding")}}
+- {{cssxref("text-transform")}} 등 `text-*` 속성.
+- {{cssxref("white-space")}}
+- {{cssxref("word-spacing")}}, {{cssxref("word-break")}}
+- {{cssxref("writing-mode")}}
 
-<div class="note">
-<p><strong>참고</strong>: 콘솔 메시지는 인라인 요소처럼 행동합니다. <code>padding</code>, <code>margin</code>등의 효과를 보려면 <code>display: inline-block</code> 등을 지정해야 합니다.</p>
-</div>
+> **참고:** 콘솔 메시지는 인라인 요소처럼 행동합니다. `padding`, `margin`등의 효과를 보려면 `display: inline-block` 등을 지정해야 합니다.
 
-<h3 id="콘솔_그룹_사용하기"><a id="그룹" name="그룹">콘솔 그룹 사용하기</a></h3>
+### 콘솔 그룹 사용하기
 
-<p>중첩 그룹을 사용하면 서로 관련된 출력 결과를 시각적으로 묶어 정돈할 수 있습니다. 새로운 중첩 블록을 생성하려면 <code>console.group()</code>을 호출하세요. <code>console.groupCollapsed()</code> 메서드도 유사하지만, 대신 새로운 블록을 접힌 채로 생성하므로 내부를 보려면 열어야 합니다.</p>
+중첩 그룹을 사용하면 서로 관련된 출력 결과를 시각적으로 묶어 정돈할 수 있습니다. 새로운 중첩 블록을 생성하려면 `console.group()`을 호출하세요. `console.groupCollapsed()` 메서드도 유사하지만, 대신 새로운 블록을 접힌 채로 생성하므로 내부를 보려면 열어야 합니다.
 
-<p>현재 그룹에서 나가려면 <code>console.groupEnd()</code>를 호출하세요. 예를 들어...</p>
+현재 그룹에서 나가려면 `console.groupEnd()`를 호출하세요. 예를 들어...
 
-<pre class="brush: js">console.log("This is the outer level");
+```js
+console.log("This is the outer level");
 console.group("First group");
 console.log("In the first group");
 console.group("Second group");
@@ -212,37 +201,41 @@ console.warn("Still in the second group");
 console.groupEnd();
 console.log("Back to the first group");
 console.groupEnd();
-console.debug("Back to the outer level");</pre>
+console.debug("Back to the outer level");
+```
 
-<p>위의 출력은 다음과 같습니다.</p>
+위의 출력은 다음과 같습니다.
 
-<p><img alt="Demo of nested groups in Firefox console" src="https://mdn.mozillademos.org/files/16911/console_groups_demo.png" style="height: 169px; width: 236px;"></p>
+![Demo of nested groups in Firefox console](console_groups_demo.png)
 
-<h3 id="타이머">타이머</h3>
+### 타이머
 
-<p>특정 작업의 소요시간을 측정할 땐 타이머를 사용할 수 있습니다. 타이머를 시작하려면 <code>console.time()</code> 메서드를 호출하세요. 유일한 매개변수로 타이머의 이름을 제공할 수 있습니다. 타이머를 멈추고, 시작한 후 지난 시간을 알아내려면 <code>console.timeEnd()</code> 메서드를 호출하세요. 역시, 유일한 매개변수로 이전에 사용한 타이머 이름을 제공하면 됩니다.</p>
+특정 작업의 소요시간을 측정할 땐 타이머를 사용할 수 있습니다. 타이머를 시작하려면 `console.time()` 메서드를 호출하세요. 유일한 매개변수로 타이머의 이름을 제공할 수 있습니다. 타이머를 멈추고, 시작한 후 지난 시간을 알아내려면 `console.timeEnd()` 메서드를 호출하세요. 역시, 유일한 매개변수로 이전에 사용한 타이머 이름을 제공하면 됩니다.
 
-<p>예를 들어...</p>
+예를 들어...
 
-<pre class="brush: js">console.time("answer time");
+```js
+console.time("answer time");
 alert("Click to continue");
 console.timeLog("answer time");
 alert("Do a bunch of other stuff...");
-console.timeEnd("answer time");</pre>
+console.timeEnd("answer time");
+```
 
-<p>위의 코드는 사용자가 경고 상자를 닫는데 걸린 시간을 기록한 후 출력하고, 두 번째 경고를 닫을 때까지 기다린 후, 총 걸린 시간을 출력합니다.</p>
+위의 코드는 사용자가 경고 상자를 닫는데 걸린 시간을 기록한 후 출력하고, 두 번째 경고를 닫을 때까지 기다린 후, 총 걸린 시간을 출력합니다.
 
-<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p>
+![](console-timelog.png)
 
-<p>시작할 때와 끝낼 때 모두 타이머의 이름이 표시됨을 알 수 있습니다.</p>
+시작할 때와 끝낼 때 모두 타이머의 이름이 표시됨을 알 수 있습니다.
 
-<div class="note"><strong>참고:</strong> 타이머를 네트워크 트래픽 소요시간 측정에 사용하는 경우, 타이머는 총 소요시간을 보여주지만 네트워크 패널에 표시되는 시간은 헤더에 소모한 시간만 나타낸다는 것을 알아야 합니다. 응답 본문 로깅을 활성화한 경우, 응답 헤더와 본문의 시간을 합한 값이 타이머의 콘솔 출력과 비슷해야 합니다.</div>
+> **참고:** 타이머를 네트워크 트래픽 소요시간 측정에 사용하는 경우, 타이머는 총 소요시간을 보여주지만 네트워크 패널에 표시되는 시간은 헤더에 소모한 시간만 나타낸다는 것을 알아야 합니다. 응답 본문 로깅을 활성화한 경우, 응답 헤더와 본문의 시간을 합한 값이 타이머의 콘솔 출력과 비슷해야 합니다.
 
-<h3 id="스택_추적">스택 추적</h3>
+### 스택 추적
 
-<p>콘솔 객체는 스택 추적도 지원합니다. 스택 추적은 {{domxref("console.trace()")}}를 호출하게 된 경로를 보입니다. 예를 들어...</p>
+콘솔 객체는 스택 추적도 지원합니다. 스택 추적은 {{domxref("console.trace()")}}를 호출하게 된 경로를 보입니다. 예를 들어...
 
-<pre class="brush: js">function foo() {
+```js
+function foo() {
   function bar() {
     console.trace();
   }
@@ -250,47 +243,32 @@ console.timeEnd("answer time");</pre>
 }
 
 foo();
-</pre>
+```
 
-<p>위 코드의 출력 결과는 다음과 같습니다.</p>
+위 코드의 출력 결과는 다음과 같습니다.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+![](api-trace2.png)
 
-<h2 id="Specification" name="Specification">명세</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('Console API')}}</td>
-   <td>{{Spec2('Console API')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="브라우저_호환성">브라우저 호환성</h2>
+## 브라우저 호환성
 
+{{Compat}}
 
+## 참고
 
-<p>{{Compat("api.Console")}}</p>
+- 적어도 Firefox에서는 페이지가 `console` 객체를 정의하면 해당 객체가 Firefox에 내장된 객체를 재정의합니다.
 
-<h2 id="같이_보기">같이 보기</h2>
+## 같이 보기
 
-<ul>
- <li><a href="/ko/docs/Tools" title="Tools">Firefox Developer Tools</a></li>
- <li><a href="/ko/docs/Tools/Web_Console" title="Web Console">Web Console</a> — how the Web Console in Firefox handles console API calls</li>
- <li><a href="/ko/docs/Tools/Remote_Debugging">Remote Debugging</a> — how to see console output when the debugging target is a mobile device</li>
-</ul>
+- [Firefox 개발자 도구](/ko/docs/Tools)
+- [웹 콘솔](/ko/docs/Tools/Web_Console): Firefox의 웹 콘솔이 콘솔 API 호출을 처리하는 방법
+- [원격 디버깅](/ko/docs/Tools/Remote_Debugging): 디버깅 대상이 모바일 장치일 때 콘솔 출력을 보는 방법
 
-<h3 id="다른_구현체">다른 구현체</h3>
+### 다른 구현체
 
-<ul>
- <li><a href="https://developers.google.com/web/tools/chrome-devtools/console/api">Google Chrome DevTools</a></li>
- <li><a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console/console-api">Microsoft Edge DevTools</a></li>
- <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari Web Inspector</a></li>
-</ul>
+- [Google Chrome 개발자 도구](https://developers.google.com/chrome-developer-tools/docs/console-api)
+- [Microsoft Edge 개발자 도구](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console/console-api)
+- [Safari Web Inspector](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html)