HTML <details> 태그

정의 및 특징

・<details> 태그는

　사용자가 직접 조작하여 보거나 숨길 수 있는

　부가적인 세부사항(additional details)을 명시할 때 사용한다

 

・<details> 요소는

　보통 사용자가 직접 접거나 펼 수 있는

　대화형 위젯(interactive widget)을 정의할 때 사용되며,

　그 안에는 어떠한 종류의 콘텐츠도 포함될 수 있다

　이러한 <details> 요소의 콘텐츠는

　open 속성이 설정되기 전까지는 화면에 보이지 않는다

 

・<summary> 요소는

　<details> 요소에서 화면에 보일 제목(visible heading)을

　명시할 때 사용한다

　이 제목을 마우스로 클릭함으로써

　<details> 요소를 보이도록 할 수도 있고 숨길 수도 있다

 

・<details> 태그는 HTML5에서 새롭게 추가된 요소이다

 

 

지원하는 브라우저

12.0	지원하지 않음	지원하지 않음	49.0	6.0	15.0

 

속성

속성명	속성값	설명
open	open	<details> 요소가 사용자에게 보이도록 펼쳐짐을 명시한다

 

예제

<details>
    <summary>오늘의 환율</summary>
    <ul>
        <li>달러($) : 1,135.90</li>
        <li>유로(€) : 1,284.08</li>
        <li>엔(￥) : 1,014.88</li>
    </ul>
</details>

오늘의 환율 달러($) : 1,135.90 유로(€) : 1,284.08 엔(￥) : 1,014.88

 

 

■HTML 태그 레퍼런스

HTML 태그 레퍼런스 - MAIN 돌아가기