[HTML5] 스크립트 없이 동적으로 클릭시 세부 사항을 보여주는 태그 'details'

'<details>' 태그는 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)을 명시할 때 사용하며 별도의 스크립트 작업없이도 사용자로 하여금 동적인 동작을 할 수있게끔 해주는 유용한 태그이다.

 

<details> 요소는 보통 사용자가 직접 접거나 펼 수 있는 대화형 위젯(interactive widget)을 정의할 때 사용되며, 그 안에는 어떠한 종류의 콘텐츠도 포함될 수 있다.

이러한 <details> 요소의 콘텐츠는 open 속성이 설정되기 전까지는 화면에 보이지 않는다..

 

<details> 태그의 자식으로서 반드시 같이 사용해되어야 하는 '<summary>' 태그는 <details>요소에서 화면에 보일 제목을 명시 할 때 사용한다.

 

이 제목을 마우스로 클릭함으로써 <details> 요소를 보이도록 할 수도 있고 숨길 수도 있습니다.

 

 

예제)

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

 

결과 확인: http://www.tcpschool.com/examples/tryit/tryhtml.php?filename=html_ref_tag_details_01 

©TCP-tryWWW

 

 

참고: TCP School