HTML <details> 태그

정의와 사용법

<details> 태그는 사용자가 필요에 따라 열고 닫을 수 있는 다른 상세 정보를 정의합니다.

<details> 태그는 사용자가 열고 닫을 수 있는 상호작용형 소형 위젯을 만들기 위해 사용됩니다. 기본적으로 위젯은 닫혀 있습니다. 열면 확장되고 내용이 표시됩니다.

모든 유형의 내용을 넣을 수 있습니다 <details> 태그에 있습니다.

푸터<summary> 태그 와 <details> 결합하여, 상세 정보에 보이는 제목을 지정할 수 있습니다. 제목을 클릭하면, <details> 정의된 내용입니다。

다른 것을 참조하십시오：

HTML DOM 참조 매뉴얼：Details 객체

예제

예제 1

사용자가 필요에 따라 열고 닫을 수 있는 상세 정보를 정의합니다：

<details>
  <summary>미래 세계의 중심(Epcot Center)</summary>
  <p>Epcot는 월트 디즈니 월드 리조트의 테마 파크로, 흥미로운 명소, 국제 전시관, 수상 경력에 빛나는 화려한 불꽃과 계절별 행사를 자랑합니다.</p>
</details>

직접 시험해 보세요

예제 2

CSS를 사용하여 <details>와 <summary>의 스타일을 설정합니다：

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>미래 세계의 중심(Epcot Center)</summary>
  <p>Epcot는 월트 디즈니 월드 리조트의 테마 파크로, 흥미로운 명소, 국제 전시관, 수상 경력에 빛나는 화려한 불꽃과 계절별 행사를 자랑합니다.</p>
</details>
</body>
</html>

직접 시험해 보세요

속성

속성 값 설명
open open 사용자에게 정보가 보이도록 설정해야 합니다(열림)

전역 속성

<details> 태그는 다음과 같은 이벤트 속성을 지원합니다 HTML에서의 전역 속성.

이벤트 속성

<details> 태그는 다음과 같은 이벤트 속성을 지원합니다 HTML에서의 이벤트 속성.

기본 CSS 설정

대부분의 브라우저는 다음과 같은 기본 값으로 표시합니다 <details> 요소:

details {
  display: block;
}

브라우저 지원

표에서의 숫자는 해당 요소를 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
12.0 79.0 49.0 6.0 15.0