HTML <details> 태그
정의 및 특징
<details> 태그는 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)을 명시할 때 사용합니다.
<details> 요소는 보통 사용자가 직접 접거나 펼 수 있는 대화형 위젯(interactive widget)을 정의할 때 사용되며, 그 안에는 어떠한 종류의 콘텐츠도 포함될 수 있습니다.
이러한 <details> 요소의 콘텐츠는 open 속성이 설정되기 전까지는 화면에 보이지 않습니다.
<summary> 요소는 <details> 요소에서 화면에 보일 제목(visible heading)을 명시할 때 사용합니다.
이 제목을 마우스로 클릭함으로써 <details> 요소를 보이도록 할 수도 있고 숨길 수도 있습니다.
예제
<details>
<summary>오늘의 환율</summary>
<ul>
<li>달러($) : 1,135.90</li>
<li>유로(€) : 1,284.08</li>
<li>엔(￥) : 1,014.88</li>
</ul>
</details>
지원하는 브라우저 및 버전
| 태그명 |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| <details> | 12.0 | 지원하지 않음 | 지원하지 않음 | 49.0 | 6.0 | 15.0 |
HTML5에서 변경된 사항
<details> 태그는 HTML5에서 새롭게 추가된 요소입니다.
사용할 수 있는 속성
| 속성명 | 속성값 | 설명 | |
|---|---|---|---|
|
|
open |
<details> 요소가 사용자에게 보이도록 펼쳐짐을 명시함. |
CSS 기본값
|
details { display: block; } |
DOM 인터페이스
|
interface HTMLDetailsElement : HTMLElement { attribute boolean open; }; |
