[HTML] <summary>

<summary>

<detalist> 태그는 접기/펼치기 목록을 설정합니다. 자바스크립트를 이용하여 컨텐츠 내용을 숨기고 보여줄 수 있는 기능을 HTML 태그를 통해 구현할 수 있습니다. 접기/펼치기 목록의 제목은 <summary> 태그를 통해 설정합니다.

---

<summary>

<summary> 태그는 <details> 요소에 대한 요약 또는 제목을 정의합니다.

특징	설명
요소	블록 요소(Block Element)
닫는 태그	닫는 태그 사용(<summary> ~ </summary>)
버전	HTML5

정의(Definition)

• <summary> 태그는 <details> 요소에 대한 요약 또는 제목을 정의합니다.
• <summary> 태그에는 제목 태그나 강조 태그를 사용할 수 있습니다.

비교(Compare)

• 접기/펼치기 목록을 사용시 <details> 태그를 사용합니다.
• 접기/펼치기 목록의 제목은 <summary> 태그를 사용합니다.

Sample1

<details> 태그와 <summary> 태그의 사용 예제입니다.

결과

더 자세한 정보를 알고 싶다면?

1. 접기/펼치기 목록은 deatails 요소를 사용합니다.
2. 접기/펼치기 목록의 제목은 summary 요소를 사용합니다.

html

<details>
    <summary>더 자세한 정보를 알고 싶다면?</summary>
    <ol>
       <li>접기/펼치기 목록은 deatails 요소를 사용합니다.</li>
       <li>접기/펼치기 목록의 제목은 summary 요소를 사용합니다.</li> 
    </ol>
</details>

Sample2

<details> 태그에 open 속성으로 숨겨진 내요을 펼쳐 볼 수 있는 예제입니다.

결과

더 자세한 정보를 알고 싶다면?

1. 접기/펼치기 목록은 deatails 요소를 사용합니다.
2. 접기/펼치기 목록의 제목은 summary 요소를 사용합니다.

html

<details open>
    <summary>더 자세한 정보를 알고 싶다면?</summary>
    <ol>
       <li>접기/펼치기 목록은 deatails 요소를 사용합니다.</li>
       <li>접기/펼치기 목록의 제목은 summary 요소를 사용합니다.</li> 
    </ol>
</details>

Sample3

<summary> 태그에 제목 태그나 강조 태그를 넣을 수 있는 예제입니다.

결과

더 자세한 정보를 알고 싶다면?

1. 접기/펼치기 목록은 deatails 요소를 사용합니다.
2. 접기/펼치기 목록의 제목은 summary 요소를 사용합니다.

html

<details open>
    <summary><strong>더 자세한 정보를 알고 싶다면?</strong></summary>
    <ol>
       <li>접기/펼치기 목록은 deatails 요소를 사용합니다.</li>
       <li>접기/펼치기 목록의 제목은 summary 요소를 사용합니다.</li> 
    </ol>
</details>

호환성(Compatibility)

						6	7	8	9	10	11
<summary>	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능

---