<details>

HTML <details> 요소는 "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. 요약이나 레이블은 <summary> 요소를 통해 제공할 수 있습니다.

정보 공개 위젯은 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 나타냅니다. <details> 요소의 첫 번째 자식이 <summary> 요소라면, <summary>의 콘텐츠를 위젯의 레이블로 사용합니다.

시도해보기

A <details> widget can be in one of two states. The default closed state displays only the triangle and the label inside <summary> (or a user agent-defined default string if no <summary>).

When the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents. The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisty".

You can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its open attribute. Unfortunately, at this time there's no built-in way to animate the transition between open and closed.

By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.

Fully standards-compliant implementations automatically apply the CSS display: list-item to the <summary> element. You can use this to customize its appearance further. See Customizing the disclosure widget for further details.

콘텐츠 카테고리	플로우 콘텐츠, 구획 루트, 대화형 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠	하나의 `<summary>`와, 그 뒤의 플로우 콘텐츠.
태그 생략	None, both the starting and ending tag are mandatory.
가능한 부모 요소	플로우 콘텐츠를 허용하는 모든 요소.
암시적 ARIA 역할	`group`
가능한 ARIA 역할	없음
DOM 인터페이스	`HTMLDetailsElement` (en-US)

특성

이 요소는 전역 특성을 포함합니다.

open: 상세 정보, 즉 <details> 요소의 콘텐츠가 현재 보이는 상태인지 나타냅니다. 기본값 false는 정보가 보이지 않는다는 뜻입니다.

이벤트

<details> 요소는 HTML 요소가 지원하는 일반적인 이벤트 외에도, <details> 요소의 상태가 열기와 닫기로 바뀔 때 발생하는 toggle 이벤트도 지원합니다. 이벤트는 상태가 변한 후 발생하며, 브라우저에서 이벤트를 쏘기 전에 상태가 여러 번 바뀌는 경우 모두 통합하여 하나의 이벤트만 전송합니다.

toggle 이벤트 처리기를 부착해 위젯의 상태 변화를 감지할 수 있습니다.

details.addEventListener("toggle", event => {
  if (details.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
});

예제

간단한 예제

이번 예제는 요약 없는 <details> 요소를 보입니다.

<details>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

이렇게 사용하는 경우, 브라우저는 기본 요약 문자열("상세", "세부정보" 등)을 사용합니다. 아래에서 직접 확인해보세요.

요약 제공하기

이번 예제는 이전 코드에 <summary> 요소를 추가합니다.

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

결과는 다음과 같습니다.

열려있는 상태로 만들기

<details>가 처음부터 열려있는 상태로 나타나게 하려면 open 특성을 지정하세요.

<details open>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

결과는 다음과 같습니다.

외형 바꾸기

이제 CSS를 추가해서 외형을 바꿔보겠습니다.

CSS

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

위의 CSS는 탭 인터페이스 같은 외형을 적용합니다.

HTML

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

결과

위젯 바꾸기

넓게 지원되지는 않지만, 열림/닫힘을 나타내는 삼각형의 외형도 바꿀 수 있습니다. 요소의 표준화 과정 중 추가된 실험적 구현이기 때문에 브라우저의 지원에 차이가 있으므로, 당분간 여러 방식을 함께 사용해야 합니다.

<summary> 요소는 list-style (en-US) 단축 속성과, 그 본디 속성인 list-style-type (en-US) 등을 지원하므로, list-style-image (en-US) 속성 등을 사용해 삼각형을 원하는대로 바꿀 수 있습니다. 삼각형을 아예 제거하려면 list-style: none을 지정하면 됩니다.

그러나 Chrome은 위의 방법을 아직 지원하지 않습니다. 따라서 비표준 ::-webkit-details-marker 의사 요소를 사용해야 합니다.

CSS

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

위의 CSS도 탭 인터페이스같은 외형을 적용하며, 이에 더해 삼각형을 제거합니다.

HTML

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

결과

명세

Specification
HTML Standard # the-details-element

브라우저 호환성

BCD tables only load in the browser

같이 보기

<summary>