..

Search

<summary>

HTML <summary> 태그


정의 및 특징

<summary> 태그는 <details> 요소에 의해 생성되는 대화형 위젯에서 기본적으로 보이는 제목을 정의할 때 사용합니다.

 

<summary> 요소는 반드시 <details> 요소의 첫 번째 자식 요소이어야 하며, 이 제목을 마우스로 클릭함으로써 <details> 요소를 보이도록 할 수도 있고 숨길 수도 있습니다.

 

<details> 요소는 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional 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

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

HTML5에서 변경된 사항

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


CSS 기본값

summary {

  display: block;

}


DOM 인터페이스


연관 페이지

HTML 의미 요소 수업 ⇒


연습문제