<details>

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

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

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

특성

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

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 단축 속성과, 그 본디 속성인 list-style-type 등을 지원하므로, list-style-image 속성 등을 사용해 삼각형을 원하는대로 바꿀 수 있습니다. 삼각형을 아예 제거하려면 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>

결과

명세

명세 상태 주석
HTML Living Standard
The definition of '<details>' in that specification.
Living Standard
HTML 5.1
The definition of '<details>' in that specification.
Recommendation Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
detailsChrome Full support 12Edge Full support 79Firefox Full support 49
Notes
Full support 49
Notes
Notes Before Firefox 57, there was a bug meaning that <details> elements can't be made open by default using the open attribute if they have a CSS animation active on them.
IE No support NoOpera Full support 15Safari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 49
Notes
Full support 49
Notes
Notes There is a bug meaning that <details> elements can't be made open by default using the open attribute if they have a CSS animation active on them.
Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support Yes
openChrome Full support 12Edge Full support 79Firefox Full support 49IE No support NoOpera Full support 15Safari Full support 6WebView Android Full support 4Chrome Android Full support YesFirefox Android Full support 49Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

같이 보기