HTML <summary>: 상세 정보 레이블 요소

HTML <summary> 요소<details>가 생성하는 위젯의 내용에 대한 설명이나 범례 등을 제공합니다. <summary> 요소를 클릭하면 부모 <details>가 열림과 닫힘 상태 사이를 전환합니다.

불러오는 중...

<details>
  <summary>사과의 효능</summary>
  아침에 사과 한 개면...
</details>

특성

전역 특성만 포함합니다.

사용 일람

<summary> 요소의 내용으로는 헤딩 콘텐츠, 일반 텍스트, 그리고 <p> 요소 안에 배치할 수 있는 모든 요소를 사용할 수 있습니다.

<summary> 요소는 <details>의 첫 번째 자식으로 배치해야 합니다.

기본 레이블

<details> 요소의 첫 번째 자식이 <summary>가 아니라면, 사용자 에이전트는 위젯 레이블로 기본 문자열("세부정보" 등)을 사용합니다.

기본 스타일

HTML 명세에 따르면 <summary> 요소의 기본 스타일은 display: list-item을 포함해야 합니다. 따라서 CSS list-style-type 속성을 사용해서 레이블 옆의 삼각형을 바꾸거나 제거할 수 있습니다.

<summary>display: block을 적용해도 삼각형이 사라집니다.

기본 스타일의 브라우저 지원 범위는 아직 넓지 않습니다. 브라우저 호환성display: list-item을 참고하세요.

예제

<details> 요소의 예제를 확인하세요.

명세

HTML Living Standard

브라우저 호환성

IEEdgeChromeSafariFirefox
미지원7912649
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
지원4지원49지원
display: list-item
IEEdgeChromeSafariFirefox
미지원8989미지원49
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
미지원미지원894915.0
MDN BCD에서 가져오는 데이터입니다.

같이 보기

마지막 업데이트:
이 페이지를 오프라인에서 볼 수 있습니다.

sorto.me

CC BY-SA 4.0

based on MDN (contributors)