HTML <summary> 태그

정의 및 사용법

<summary> 태그로 <details> 요소 보이는 제목을 정의했습니다. 제목을 클릭하면 상세 정보를 보이거나 숨기는 수 있습니다.

주의:<summary> 요소는 <details> 요소 의 첫 번째 자식 요소.

추가로 참조하십시오:

HTML DOM 참조 매뉴얼:요약 객체

예제

예제 1

사용 <summary> 요소:

<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>

직접 시험해보세요

전역 속성

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

이벤트 속성

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

기본 CSS 설정

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

summary {
  display: block;
}

브라우저 지원

표의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

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