<details>

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

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

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

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>

결과

• <summary>