..

Search

<details>

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>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<details> 12.0 지원하지 않음 지원하지 않음 49.0 6.0 15.0

HTML5에서 변경된 사항

<details> 태그는 HTML5에서 새롭게 추가된 요소입니다.


사용할 수 있는 속성

속성명   속성값 설명

open

 

open

<details> 요소가 사용자에게 보이도록 펼쳐짐을 명시함.


CSS 기본값

details {

  display: block;

}


DOM 인터페이스

interface HTMLDetailsElement : HTMLElement {

  attribute boolean open;

};


연관 페이지

HTML 의미 요소 수업 ⇒


연습문제