recursal/MDN huggingface dataset:
Event.cancelBubble
==================

**지원이 중단되었습니다:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Event.cancelBubble** 속성은 `Event.stopPropagation()`의 별칭입니다. 이벤트 핸들러에서 반환되기 전에 값을 true로 설정하면 이벤트가 전파되지 않습니다.

예제
--


```js
elem.onclick = function (event) {
  // Do cool things here
  event.cancelBubble = true;
};
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-cancelbubble① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.bubbles
=============

`Event` 인터페이스의 **`bubbles`** 읽기 전용 속성은 이벤트가 DOM 트리를 타고 위쪽으로 버블링되는지 나타냅니다.

**참고:** 이벤트 버블링과 캡처에서 버블링에 대한 자세한 정보를 알아보세요.

값
-

이벤트가 DOM 트리를 타고 버블링하면 `true`인 불리언 값입니다.

예제
--


```js
function handleInput(e) {
  // 이벤트의 버블링 여부를 확인해서...
  if (!e.bubbles) {
    // ... 버블링 하지 않으면 이벤트를 넘겨주기
    passItOn(e);
  }

  // 이미 버블링
  doOutput(e);
}
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-bubbles③ |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `stopPropagation()`으로 캡처링/버블링 단계에서 이벤트의 추가 전파를 막을 수 있습니다.
* `stopImmediatePropagation()`으로 같은 DOM 레벨의 다른 이벤트 수신기들이 현재 이벤트에 발동하지 않도록 막을 수 있습니다.
* `preventDefault()`는 이벤트의 전파를 막지는 않지만, 이벤트에 대한 브라우저의 기본 동작을 비활성화합니다.
console.timeLog()
=================

**`console.timeLog()`** 메서드는 앞서 `console.time()`을 호출하여 시작한 타이머의 현재 값을 콘솔에 출력합니다.

상세한 내용과 예제는 타이머 문서를 참고하세요.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
timeLog(label)
```

### 매개변수

`label`

콘솔에 출력할 타이머의 이름

### 반환 값

레이블(`label`) 매개변수를 전달하지 않았을 때
```

default: 1042ms
```


전달된 `label`이 있을 때
```

timer name: 1242ms
```

### 예외 처리

실행 중인 타이머가 없다면 `timeLog()`는 경고를 반환합니다.
```

Timer "default" doesn't exist.
```


레이블 매개변수를 전달했지만 해당하는 타이머가 없을 때는 다음과 같은 경고를 반환합니다.
```

Timer "timer name" doesn't exist.
```

예제
--


```js
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff…");
console.timeEnd("answer time");
```


 위 예제의 출력 결과는 사용자가 첫 번째 경고창을 닫을 때까지 걸린 시간을 보여준 다음,
 두 번째 경고 창을 닫을 때까지 걸린 시간을 보여줍니다.

![Firefox 콘솔의 타이머 출력 결과](/ko/docs/Web/API/console/timelog_static/timer_output.png)

 타이머의 이름은 `timeLog()`를 사용해서 타이머의 값이 기록될 때 그리고 타이머가 중단되었을 때 표시된다는 점을 명심하세요.
 또한 `timeEnd()`를 실행하면 "timer ended(타이머가 종료됨)"이라는 추가적인 정보도 표시되는데
 이를 통해 해당 타이머가 더 이상 시간을 추적하지 않는다는 사실을 명확하게 해줍니다.

명세
--

| Specification |
| --- |
| Console Standard # timelog |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console.group()
===============

**`console.group()`** 메서드는 웹 콘솔 로그에 새로운 인라인 그룹을 만듭니다. 이는 `console.groupEnd()`가 호출될 때까지 모든 다음 출력을 추가 수준으로 들여씁니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
console.group([label]);
```

매개변수
----

`label`

그룹의 레이블입니다. 이 매개변수는 선택사항입니다. (Chrome 59에서 테스트됨) `console.groupEnd()`와 함께 작동하지 않습니다.

### 콘솔에서 그룹 사용하기

중첩 그룹을 사용하여 관련 메시지를 시각적으로 연결하여 출력을 구성할 수 있습니다. 새 중첩 블록을 만들려면 `console.group()`을 호출하세요. `console.groupCollapsed()` 메서드와 비슷하지만 새 블록이 접혀 있고 이를 읽으려면 공개 버튼을 클릭해야 합니다.

**참고:** Gecko 9부터 Gecko 51까지 `groupCollapsed()` 메소드는 `group()`과 동일했습니다.
 축소된 그룹은 Gecko 52부터 완전히 지원됩니다. Firefox bug 1088360를 참조하세요.


현재 그룹을 종료하려면 `console.groupEnd()`를 호출하세요. 예를 들어...


```js
console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the outer level");
```


실행 결과는 다음과 같습니다.

![A screenshot of messages nested in the console output.](/ko/docs/Web/API/console/group_static/nesting.png)

자세한 내용은 `console` 문서의 콘솔 그룹 사용하기를 참조하세요.

명세
--

| Specification |
| --- |
| Console Standard # group |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console.table()
===============

**`console.table()`** 메서드는 표 형식의 데이터를 테이블로 표시합니다.

 이 함수에는 배열 또는 객체여야 하는 `data`라는 인수를 반드시 전달해야 합니다.
 두 번째 인수인 `columns`는 선택적으로 전달할 수 있습니다.

 이 함수는 `data`를 테이블로 표시합니다. 배열의 각 원소(`data`가 객체인 경우에는 열거 가능한 속성)는
 테이블의 한 줄이 됩니다.

 테이블의 첫 번째 칼럼은 `(index)`를 레이블로 사용합니다. `data`가 배열인 경우에는 배열의 인덱스가
 이 칼럼의 값으로 사용됩니다. `data`가 객체인 경우에는 속성 이름이 값으로 사용됩니다. (Firefox에서는)
 `console.table`이 1000줄 까지만 표현할 수 있는 제약이 있다는 점에 주의하세요
 (첫 번째 줄은 레이블 인덱스입니다).

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

### 윈시 자료형의 컬렉션

`data` 인수는 배열 또는 객체일 것입니다.


```js
// 문자열의 배열

console.table(["apples", "oranges", "bananas"]);
```


| (index) | Values |
| --- | --- |
| 0 | 'apples' |
| 1 | 'oranges' |
| 2 | 'bananas' |


```js
// 속성이 문자열인 배열

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const me = new Person("Tyrone", "Jones");

console.table(me);
```


| (index) | Values |
| --- | --- |
| firstName | 'Tyrone' |
| lastName | 'Jones' |

### 합성 자료형의 컬렉션

배열의 원소나 객체의 속성이 배열 또는 객체라면 그 배열의 원소 혹은 그 객체의 속성이 칼럼당 하나씩 각 줄에 표시됩니다.


```js
// 배열의 배열

const people = [
  ["Tyrone", "Jones"],
  ["Janet", "Smith"],
  ["Maria", "Cruz"],
];
console.table(people);
```


| (index) | 0 | 1 |
| --- | --- | --- |
| 0 | 'Tyrone' | 'Jones' |
| 1 | 'Janet' | 'Smith' |
| 2 | 'Maria' | 'Cruz' |


```js
// 객체의 배열

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const tyrone = new Person("Tyrone", "Jones");
const janet = new Person("Janet", "Smith");
const maria = new Person("Maria", "Cruz");

console.table([tyrone, janet, maria]);
```


배열이 객체를 포함하고 있다면 칼럼은 속성의 이름을 레이블로 사용한다는 점에 주의하세요.

| (index) | firstName | lastName |
| --- | --- | --- |
| 0 | 'Tyrone' | 'Jones' |
| 1 | 'Janet' | 'Smith' |
| 2 | 'Maria' | 'Cruz' |


```js
// 다른 객체를 포함하는 객체

const family = {};

family.mother = new Person("Janet", "Jones");
family.father = new Person("Tyrone", "Jones");
family.daughter = new Person("Maria", "Jones");

console.table(family);
```


| (index) | firstName | lastName |
| --- | --- | --- |
| daughter | 'Maria' | 'Jones' |
| father | 'Tyrone' | 'Jones' |
| mother | 'Janet' | 'Jones' |

### 표시할 칼럼 제한

 기본적으로 `console.table()`는 각 줄마다 모든 원소를 다 나열합니다. 선택적으로 전달할 수 있는
 `columns` 매개변수를 사용하면 일부 칼럼만 선택하여 표시할 수 있습니다.


```js
// 객체의 배열. firstName만 표시

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const tyrone = new Person("Tyrone", "Jones");
const janet = new Person("Janet", "Smith");
const maria = new Person("Maria", "Cruz");

console.table([tyrone, janet, maria], ["firstName"]);
```


| (index) | firstName |
| --- | --- |
| 0 | 'Tyrone' |
| 1 | 'Janet' |
| 2 | 'Maria' |

### 칼럼 정렬

칼럼의 레이블을 클릭하면 특정 칼럼을 기준으로 테이블을 정렬할 수 있습니다.

구문
--


```js
table(data)
table(data, columns)
```

### 매개변수

`data`

표시할 데이터. 배열 또는 객체여야 합니다.

`columns`

출력에 포함할 칼럼 이름을 포함한 배열

### 반환 값

없음 (`undefined`).

명세
--

| Specification |
| --- |
| Console Standard # table |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console.assert()
================

**`console.assert()`** 메서드는 주어진 가정이 거짓인 경우 콘솔에 오류 메시지를 출력합니다. 참인 경우, 아무것도 하지 않습니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
console.assert(assertion, obj1 [, obj2, ..., objN]);
console.assert(assertion, msg [, subst1, ..., substN]); // C-like message formatting
```

### 매개변수

`assertion`

아무 불리언 표현식. 거짓인 경우, 메시지를 콘솔에 출력합니다.

`obj1` ... `objN`

출력에 사용할 JavaScript 객체. 각각의 문자열 표현은 입력한 순서대로 함께 출력됩니다.

`msg`

0개 이상의 치환 문자열을 포함하는 JavaScript 문자열.

`subst1` ... `substN`

`msg` 매개변수의 치환 문자열에 대입할 JavaScript 객체. 이 매개변수를 사용하면 출력 형식을 추가로 제어할 수 있습니다.

예제
--

다음 예제는 객체와 가정을 함께 사용하는 법을 보입니다.


```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 ES2015 object property shorthand:
  // console.assert(number % 2 === 0, {number, errorMsg});
}
// output:
// the # is 2
// the # is 3
// Assertion failed: {number: 3, errorMsg: "the # is not even"}
// the # is 4
// the # is 5
// Assertion failed: {number: 5, errorMsg: "the # is not even"}
```


자세한 내용은 `console` 문서의 콘솔에 텍스트 출력하기를 참고하세요.

명세
--

| Specification |
| --- |
| Console Standard # assert |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console.error()
===============

**`console.error()`** 메서드는 웹 콘솔에 에러 메시지를 출력합니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
console.error(obj1 [, obj2, ..., objN]);
console.error(msg [, subst1, ..., substN]);
```

### 매개변수

`obj1` ... `objN`

출력할 JavaScript 객체의 리스트. 각 객체의 문자열 표현은 나열된 순서로 함께 출력됩니다.

`msg`

0개 이상의 하위 문자열을 포함하는 JavaScript 문자열.

`subst1` ... `substN`

`msg` 안의 대체할 하위 문자열을 포함하는 JavaScript 객체. 출력 형식에 추가 제어를 할 수 있게 해줍니다.

자세한 내용은 콘솔에 텍스트 출력하기를 확인하세요.

명세
--

| Specification |
| --- |
| Console Standard # error |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console.groupCollapsed()
========================

**`console.groupCollapsed()`** 메서드는 웹 콘솔에 새로운 인라인 그룹을 생성합니다. `console.group()`과는 달리, `console.groupCollapsed()`의 그룹은 닫힌 상태로 생성되며, 안쪽의 내용을 보려면 그룹 옆의 펼침 버튼으로 그룹을 먼저 펼쳐야 합니다.

`console.groupEnd()`를 호출해서 부모 그룹으로 나갈 수 있습니다.

자세한 내용과 예제는 `console` 문서의 콘솔 그룹 사용하기를 참고하세요.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
groupCollapsed();
groupCollapsed(label);
```

### 매개변수

`label` Optional

그룹의 레이블입니다.

명세
--

| Specification |
| --- |
| Console Standard # groupcollapsed |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console.dirxml()
================

**`console.dirxml()`** 메서드는 주어진 XML/HTML 요소의 자손 요소를 인터랙티브한 트리로 표시합니다.
 요소를 표시하는 것이 불가능한 경우에는 JavaScript 객체 보기가 대신 보여집니다.
 출력된 결과는 자식 노드의 내용을 볼 수 있는 여닫을 수 있는 노드의 계층적인 목록으로 나타납니다.

구문
--


```js
dirxml(object)
```

### 매개변수

`object`

출력할 속성을 포함한 JavaScript 객체

### 반환 값

없음 (`undefined`).

명세
--

| Specification |
| --- |
| Console Standard # dirxml |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console.countReset()
====================

**`console.countReset()`** 메서드는 `console.count()`의 카운터를 초기화합니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
console.countReset([label]);
```

### 매개변수

`label` Optional

`String`. 지정한 경우, 이 레이블을 지정한 `count()`를 0으로 초기화합니다. 누락한 경우 default 카운터를 0으로 초기화합니다.

예제
--


```js
let user = "";

function greet() {
  console.count();
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
console.countReset();
```


위 코드의 출력 결과는 다음과 같습니다.
```

"default: 1"
"default: 2"
"default: 3"
"default: 4"
"default: 0"
```


`console.countReset()`이 기본 카운터를 0으로 초기화했음을 알 수 있습니다.

첫 번째 `count()`의 매개변수에는 문자열 "bob"을 제공하고, 두 번째에는 문자열 "alice"를 제공할 경우...


```js
let user = "";

function greet() {
  console.count(user);
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.countReset("bob");
console.count("alice");
```


다음과 같이 출력합니다.
```

"bob: 1"
"alice: 1"
"alice: 2"
"bob: 0"
"alice: 3"
```


카운터 "bob"을 초기화해도 "alice"의 값에는 영향이 없습니다.

명세
--

| Specification |
| --- |
| Console Standard # countreset |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console.clear()
===============

**`console.clear()`** 메서드는 현재 환경에서 가능한 경우, 콘솔에 기록된 메시지를 모두 지웁니다.

구문
--


```js
console.clear();
```

명세
--

| Specification |
| --- |
| Console Standard # clear |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console.timeEnd()
=================

**`console.timeEnd()`** 는 이전에 `console.time()`를 호출하여 시작된 타이머를 중지합니다.

자세한 내용과 예제는 타이머를 참조하세요.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
console.timeEnd(label);
```

### 매개변수

`label`

중지할 타이머의 이름입니다. 중지되면 경과 시간이 웹 콘솔에 자동으로 시간이 종료되었음을 알리는 표시와 함께 표시됩니다.

예제
--


```js
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");
```


위 예제의 출력은 사용자가 첫 번째 경고 상자를 닫는 데 걸린 시간과 사용자가 두 번째 경고를 닫는 데 걸린 시간을 보여줍니다.

![](/ko/docs/Web/API/console/timeend_static/timer_output.png)

타이머 이름은 `timeLog()`를 사용하여 타이머 값을 기록할 때 표시되고 중지될 때 다시 표시됩니다. 또한 timeEnd()에 대한 호출에는 타이머가 더 이상 시간을 추적하지 않는다는 것을 분명히 하기 위해 "타이머 종료됨"이라는 추가 정보가 있습니다.

명세
--

| Specification |
| --- |
| Console Standard # timeend |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console.debug()
===============

**`console.debug()`** 메서드는 메시지를 "디버그" 중요도로 콘솔에 출력합니다. 디버그 중요도 메시지는 별도 설정 없이는 보이지 않습니다. 대부분의 경우 로그 수준은 콘솔 UI 내에서 구성됩니다. 이 로그 수준은 `Debug` 또는 `Verbose` 로그 수준에 해당할 수 있습니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
console.debug(obj1 [, obj2, ..., objN]);
console.debug(msg [, subst1, ..., substN]);
```

### 매개변수

`obj1` ... `objN`

출력에 사용할 JavaScript 객체. 각각의 문자열 표현은 입력한 순서대로 함께 출력됩니다.

`msg`

0개 이상의 치환 문자열을 포함하는 JavaScript 문자열. `subst1`부터 `substN`까지 순서대로 치환됩니다.

`subst1` ... `substN`

`msg` 매개변수의 치환 문자열에 대체할 JavaScript 객체. 출력 형식에 추가 제어를 할 수 있게 해줍니다. 치환 작동 방식에 대한 설명은 console 문서의 문자열 치환 사용하기를 참조하세요.

명세
--

| Specification |
| --- |
| Console Standard # debug |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console.trace()
===============

**`console.trace()`** 메서드는 웹 콘솔에 스택 추적을 출력합니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

자세한 내용과 예제는 `console` 문서의 스택 추적을 참고하세요.

구문
--


```js
console.trace([...any, ...data]);
```

### 매개변수

`...any, ...data` Optional

스택 추적과 함께 콘솔에 출력할 0개 이상의 객체. `console.log()` 메서드에 전달되는 것과 동일한 방식으로 조합되고 형식이 지정됩니다.

예제
--


```js
function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();
```


콘솔에 다음과 같은 추적이 표시됩니다.
```

bar
foo
<anonymous>
```

명세
--

| Specification |
| --- |
| Console Standard # trace |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console.count()
===============

**`console.count()`** 메서드는 특정 `count()` 호출의 횟수를 세어 출력합니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
console.count([label]);
```

### 매개변수

`label` Optional

`String`. 지정한 경우, 이 레이블을 지정한 `count()` 호출의 수를 출력합니다. 누락한 경우 "default"를 지정한 것처럼 동작합니다.

예제
--


```js
let user = "";

function greet() {
  console.count();
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count();
```


위 코드의 출력 결과는 다음과 같습니다.
```

"default: 1"
"default: 2"
"default: 3"
"default: 4"
```


레이블을 명시하지 않았기 때문에 `default`로 나타납니다.

첫 번째 `count()`의 매개변수에는 문자열 "bob"을 제공하고, 두 번째에는 문자열 "alice"를 제공할 경우...


```js
let user = "";

function greet() {
  console.count(user);
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");
```


다음과 같이 출력합니다.
```

"bob: 1"
"alice: 1"
"alice: 2"
"alice: 3"
```


이제 `label` 값만으로 별도의 카운트를 유지 관리하고 있습니다.

명세
--

| Specification |
| --- |
| Console Standard # count |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
console.dir()
=============

**`console.dir()`** 메서드는 주어진 JavaScript 객체 속성을 인터랙티브한 목록으로 표시합니다.
 출력된 결과는 자식 객체의 내용을 볼 수 있는 여닫는 삼각형과 함께 계층적인 목록으로 나타납니다.

 다시 말해, `console.dir()`은 주어진 JavaScript 객체의 모든 속성을 콘솔에서 볼 수 있는 방법으로서
 이를 사용하면 개발자가 객체의 속성을 쉽게 확인할 수 있습니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

![console-dir.png](/ko/docs/Web/API/console/dir_static/console-dir.png)

구문
--


```js
dir(object)
```

### 매개변수

`object`

출력하고 싶은 속성을 포함한 JavaScript 객체

### 반환 값

None (`undefined`).

명세
--

| Specification |
| --- |
| Console Standard # dir |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* MSDN: Using the F12 Tools Console to View Errors and Status
* Chrome Console API reference
console.time()
==============

**`console.time()`** 메서드는 타이머를 시작해 작업이 얼마나 걸리는지 추적할 수 있습니다. 각 타이머에게 고유한 이름을 줄 수 있고, 한 페이지에 최대 10,000개의 타이머를 설정할 수 있습니다. 같은 이름으로 `console.timeEnd()`를 호출할 때, 브라우저가 밀리초 단위로 경과한 시간을 출력합니다.

자세한 내용과 예제는 `console` 문서의 타이머를 참고하세요.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
console.time(label);
```

매개변수
----

`label`

새 타이머에게 설정할 이름. 타이머를 식별합니다. 같은 이름으로 `console.timeEnd()`를 호출하면 타이머가 중단되고 콘솔에 시간을 출력합니다.

명세
--

| Specification |
| --- |
| Console Standard # time |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `console.timeEnd()`
* `console.timeLog()`
console.log()
=============

**`console.log()`** 메서드는 웹 콘솔에 메시지를 출력합니다. 메시지는 (선택적 대체 값을 포함한) 단일 문자열이거나 더 많은 JavaScript 객체중 하나일 수 있습니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);
```

### 매개변수

`obj1` ... `objN`

출력할 JavaScript 객체 목록입니다. 이러한 각 객체의 문자열 표현은 입력한 순서대로 함께 출력됩니다. 최신 버전의 Chrome 및 Firefox에서, 콘솔에 기록되는 것은 객체에 대한 참조이며, `console.log()`를 호출하는 순간에 객체의 '값'이 반드시 필요한 것은 아닙니다.

`msg`

0개 이상의 치환 문자열들을 포함하는 JavaScript 문자열입니다.

`subst1` ... `substN`

`msg` 내의 치환 문자열들을 치환할 JavaScript 객체들입니다. 출력 형식에 추가 제어를 할 수 있게 해줍니다.

자세한 내용은 `console` 문서의 콘솔에 텍스트 출력을 참고하세요.

log()와 dir()의 차이
----------------

당신은 `console.dir()`과 `console.log()`가 무엇이 다른지 궁금할 수 있습니다.

DOM 요소들을 콘솔로 보낼 때 Chrome에서 다른 유용한 차이점이 있습니다.

![](/ko/docs/Web/API/console/log_static/dozdcyr.png)

* `console.log`는 요소를 HTML과 같은 트리 구조로 출력합니다.
* `console.dir`은 요소를 JSON과 같은 트리 구조로 출력합니다.

구체적으로, `console.log`는 DOM 요소에 대해 특별한 처리를 제공하지만 `console.dir`은 그렇지 않습니다. 이것은 종종 DOM JS 객체의 전체 표현을 보려고 할 때 유용합니다.

이것과 다른 함수들에 대한 더 많은 정보는 Chrome Console API reference에서 확인할 수 있습니다.

객체 로깅하기
-------

`console.log(obj)`를 사용하지 말고 `console.log(JSON.parse(JSON.stringify(obj)))`를 사용하시기 바랍니다.

이 방법은 여러분이 로그를 남길 당시의 `obj` 값을 보려고 사용했을 것입니다. 그러나 많은 브라우저가 값이 갱신 될때마다 끊임없이 바뀐 값을 보여줍니다. 이는 여러분이 원하는 방법이 아닐 것입니다.

명세
--

| Specification |
| --- |
| Console Standard # log |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* MSDN: F12 도구 콘솔을 사용하여 오류 및 상태 보기
* NodeJS: Console API
console.warn()
==============

**`console.warn()`** 메서드는 웹 콘솔에 경고 메시지를 출력합니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

**참고:** Firefox에서는 웹 콘솔의 경고 옆에 작은 느낌표 아이콘이 나타납니다.

구문
--


```js
console.warn(obj1 [, obj2, ..., objN]);
console.warn(msg [, subst1, ..., substN]);
```

매개변수
----

`obj1` ... `objN`

출력할 JavaScript 객체의 리스트. 각 객체의 문자열 표현은 입력한 순서대로 함께 출력됩니다.

`msg`

0개 이상의 치환 문자열을 포함하는 JavaScript 문자열.

`subst1` ... `substN`

`msg` 안의 문자열을 치환하기 위한 JavaScript 객체. 출력 형식에 추가 제어를 할 수 있게 해줍니다.

자세한 내용은 `console` 문서의 콘솔에 텍스트 출력하기를 참고하세요.

명세
--

| Specification |
| --- |
| Console Standard # warn |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* MSDN: F12 도구 콘솔을 사용하여 오류 및 상태 보기
console.groupEnd()
==================

**`console.groupEnd()`** 메서드는 웹 콘솔 로그의 현재 인라인 그룹에서 나옵니다. 자세한 내용과 예제는 `console` 문서의 콘솔 그룹 사용하기를 참고하세요.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--


```js
groupEnd();
```

### 매개변수

없음.

명세
--

| Specification |
| --- |
| Console Standard # groupend |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `console.group()`
AnimationEvent: animationName 속성
================================

**`AnimationEvent.animationName`** 읽기 전용 속성은 트랜지션에 연관된 `animation-name` (en-US) CSS 속성 값을 담은 문자열입니다.

값
-

CSS `animation-name` (en-US) 속성의 값을 담은 문자열입니다.

명세서
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-animationname |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS 애니메이션 사용하기
* 애니메이션 관련 CSS 속성과 @규칙: `animation`,
 `animation-delay`, `animation-direction`,
 `animation-duration`, `animation-fill-mode`,
 `animation-iteration-count` (en-US), `animation-name` (en-US),
 `animation-play-state` (en-US), `animation-timing-function` (en-US),
 `@keyframes`
* 이 속성이 속한 `AnimationEvent` 인터페이스.
AnimationEvent: AnimationEvent() 생성자
====================================

**`AnimationEvent()`** 생성자는 애니메이션에 관련된 이벤트를 나타내는 `AnimationEvent` 객체를 새로 생성하고 반환합니다.

구문
--


```js
new AnimationEvent(type)
new AnimationEvent(type, options)
```

### 매개변수

`type`

`AnimationEvent`의 유형을 나타내는 문자열입니다. 대소문자를 구분하며 브라우저는`animationstart`, `animationend`, `animationiteration`을 사용합니다.

`options` Optional

`Event()`에서 사용할 수 있는 속성에 더해 다음 속성들도 포함하는 객체입니다.

`animationName` Optional

트랜지션에 연관된 `animation-name` (en-US) CSS 속성 값을 담은 문자열입니다. 기본 값은 `""`입니다.

`elapsedTime` Optional

이 이벤트가 발생한 시점까지 애니메이션이 재생된 총 시간을 나타내는 `float` 값입니다. 초 단위며, 애니메이션이 일시중지됐던 시간은 제외합니다. `animationstart` 이벤트의 `elapsedTime`은 `animation-delay`의 값이 음수인 경우에만 `(-1 * delay)`가 되고, 그 외에는 `0.0`입니다.

`pseudoElement` Optional

애니메이션이 재생 중인 의사 요소의 이름을 담은, `'::'`으로 시작하는 문자열입니다. 애니메이션이 일반 요소에서 재생 중이라면 빈 문자열(`''`)을 반환합니다.


명세서
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-animationevent |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS 애니메이션 사용하기
* 애니메이션 관련 CSS 속성과 @규칙: `animation`,
 `animation-delay`, `animation-direction`,
 `animation-duration`, `animation-fill-mode`,
 `animation-iteration-count` (en-US), `animation-name` (en-US),
 `animation-play-state` (en-US), `animation-timing-function` (en-US),
 `@keyframes`
* 이 생성자가 속한 `AnimationEvent` 인터페이스.
AnimationEvent: pseudoElement 속성
================================

**`AnimationEvent.pseudoElement`** 읽기 전용 속성은 애니메이션이 재생 중인 의사 요소의 이름을 담은, `'::'`으로 시작하는 문자열입니다. 애니메이션이 일반 요소에서 재생 중이라면 빈 문자열(`''`)을 반환합니다.

값
-

애니메이션이 재생 중인 의사 요소의 이름을 담은, `'::'`으로 시작하는 문자열입니다. 애니메이션이 일반 요소에서 재생 중이라면 빈 문자열(`''`)을 반환합니다.

명세서
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-pseudoelement |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS 애니메이션 사용하기
* 애니메이션 관련 CSS 속성과 @규칙: `animation`,
 `animation-delay`, `animation-direction`,
 `animation-duration`, `animation-fill-mode`,
 `animation-iteration-count` (en-US), `animation-name` (en-US),
 `animation-play-state` (en-US), `animation-timing-function` (en-US),
 `@keyframes`
* 이 속성이 속한 `AnimationEvent` 인터페이스.
AnimationEvent: elapsedTime 속성
==============================

**`AnimationEvent.elapsedTime`** 읽기 전용 속성은 이벤트가 발생한 시점까지 애니메이션이 재생된 총 시간을 나타내는 `float` 값입니다. 초 단위며, 애니메이션이 일시정지된 시간은 제외합니다. `animationstart` (en-US) 이벤트의 `elapsedTime`은 `animation-delay`의 값이 음수인 경우에만 `(-1 * delay)`가 되고, 그 외에는 `0.0`입니다.

값
-

초 단위의 시간을 나타내는 `float`입니다.

명세서
---

| Specification |
| --- |
| CSS Animations Level 1 # dom-animationevent-elapsedtime |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS 애니메이션 사용하기
* 애니메이션 관련 CSS 속성과 @규칙: `animation`,
 `animation-delay`, `animation-direction`,
 `animation-duration`, `animation-fill-mode`,
 `animation-iteration-count` (en-US), `animation-name` (en-US),
 `animation-play-state` (en-US), `animation-timing-function` (en-US),
 `@keyframes`
* 이 속성이 속한 `AnimationEvent` 인터페이스.