<summary>
<detalist> 태그는 접기/펼치기 목록을 설정합니다. 자바스크립트를 이용하여 컨텐츠 내용을 숨기고 보여줄 수 있는 기능을 HTML 태그를 통해 구현할 수 있습니다. 접기/펼치기 목록의 제목은 <summary> 태그를 통해 설정합니다.
<summary>
<summary> 태그는 <details> 요소에 대한 요약 또는 제목을 정의합니다.
정의(Definition)
- <summary> 태그는 <details> 요소에 대한 요약 또는 제목을 정의합니다.
- <summary> 태그에는 제목 태그나 강조 태그를 사용할 수 있습니다.
비교(Compare)
- 접기/펼치기 목록을 사용시 <details> 태그를 사용합니다.
- 접기/펼치기 목록의 제목은 <summary> 태그를 사용합니다.
Sample1
<details> 태그와 <summary> 태그의 사용 예제입니다.
결과
더 자세한 정보를 알고 싶다면?
- 접기/펼치기 목록은 deatails 요소를 사용합니다.
- 접기/펼치기 목록의 제목은 summary 요소를 사용합니다.
html
<details>
<summary>더 자세한 정보를 알고 싶다면?</summary>
<ol>
<li>접기/펼치기 목록은 deatails 요소를 사용합니다.</li>
<li>접기/펼치기 목록의 제목은 summary 요소를 사용합니다.</li>
</ol>
</details>
Sample2
<details> 태그에 open 속성으로 숨겨진 내요을 펼쳐 볼 수 있는 예제입니다.
결과
더 자세한 정보를 알고 싶다면?
- 접기/펼치기 목록은 deatails 요소를 사용합니다.
- 접기/펼치기 목록의 제목은 summary 요소를 사용합니다.
html
<details open>
<summary>더 자세한 정보를 알고 싶다면?</summary>
<ol>
<li>접기/펼치기 목록은 deatails 요소를 사용합니다.</li>
<li>접기/펼치기 목록의 제목은 summary 요소를 사용합니다.</li>
</ol>
</details>
Sample3
<summary> 태그에 제목 태그나 강조 태그를 넣을 수 있는 예제입니다.
결과
더 자세한 정보를 알고 싶다면?
- 접기/펼치기 목록은 deatails 요소를 사용합니다.
- 접기/펼치기 목록의 제목은 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> | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 |