HTML5에서 도입
설명
The HTML details element (<details>) is used as a disclosure widget from which the user the retrieve additional information.
<details> 엘리먼트는 HTML문서 내에서 웹페이지 또는 웹페이지 일부의 세부 정보를 설명하는데에 사용된다. 웹페이지를 보다보면, 문구 왼쪽에 ▼ 표시가 나오고 클릭하면 아래에 세부적인 사항이 펼쳐지는 경우가 있다. 이 때 사용하는 태그가 <detail> 요소이다. 즉, <detail>요소는 HTML 문서 내에서 특정 내용에 대한 세부정보를 제공하고 싶을 때 사용한다. <detail> 요소 안에는 <summary> 요소와 함께 세부 내용을 적은 부분이 들어간다. ▼ 표시를 클릭하면 세부 내용이 나타나고 다시 클릭하면 세부 내용이 숨는다.
Usage Context
| Permitted content | One <summary> element followed by flow content |
| Tag omission | None, both the start tag and the end tag are mandatory. |
| Permitted parent elements | Any element that accepts flow content. |
| Normative document | HTML5, section 4.11.1 |
속성
이 엘리먼트는 전역속성을 지원한다.
open
This Boolean attribute indicates whether the details will be shown to the user on page load. If omitted the details will be hidden.
불리언(Boolean) 속성은 페이지 로드할 때 사용자에게 자세한 내용을 보여줄 것인지 아닌지 표시한다. 생략된다면 자세한 내용은 숨겨진다.
예제
<details>
<summary>Some details</summary>
<p>More info about the details.</p>
</details>
<details>
<summary>생활코딩 HTML 사전</summary>
<li>일반인도 쉽게 이해할 수 있는 사전</li>
<li>개발자도 유용하게 이용할 수 있는 사전</li>
</details>
DOM Interface
This element implements the HTMLDetailsElement interface.
이 요소는 HTMLDetailsElement 인터페이스를 구현한다.
호환성
| 기능 | 구글크롬 | 파이어폭스Gecko) | 인터넷 익스플로러 | Opera | Safari |
|---|---|---|---|---|---|
| 기본적인 지원 | 1.2 |
| 기능 | 안드로이드 | 파이어폭스 모바일(Gecko) | 인터넷 익스플로러 모바일 | 오페라 모바일 | 사파리 모바일 |
|---|---|---|---|---|---|
| 기본적인 지원 | 4.0(2.0) |
