<details>
<details> 태그는 접기/펼치기 목록을 설정합니다. 컨텐츠 요소를 숨기거나 보여줄 수 있습니다.
자바스크립트를 이용하여 컨텐츠 내용을 숨기고 보여줄 수 있는 기능을 HTML 태그를 통해 구현할 수 있습니다. 접기/펼치기 목록의 제목은 <summary> 태그를 통해 설정합니다.
<details>
<details> 태그는 접기/펼치기 목록을 설정합니다.
| 특징 | 설명 |
|---|---|
| 요소 | 인라인 요소(Inline Element) |
| 닫는 태그 | 닫는 태그 사용(<details> ~ </details>) |
| 버전 | - |
| 시각적 표현 | 접기/펼치기 삼각형 아이콘 |
| 사용성 |
정의(Definition)
- <details> 태그는 접기/펼치기 목록을 설정합니다. 컨텐츠 요소를 숨기거나 보여줄 수 있습니다.
- <details> 태그는 사용자가 열고 닫을 수 있는 위젯이 만들어집니다.
- <details> 태그는 컨텐츠의 제목을 표시하기 위해 <summary> 태그와 같이 사용합니다.
- ::-webkit-details-marker 속성을 사용하면 마커 모양을 수정할 수 있습니다.
속성(Property)
| 속성 | 값(예) | 설명 | 버전 |
|---|---|---|---|
| open | open | 세부 내용을 미리 보여줄 때 설정합니다. |  |
예제1(Sample)
<details> 태그와 <summary> 태그의 사용 예제입니다.
더 자세한 정보를 알고 싶다면?
- 접기/펼치기 목록은 deatails 요소를 사용합니다.
- 접기/펼치기 목록의 제목은 summary 요소를 사용합니다.
HTML
CSS
SCRIPT
<details>
<summary>더 자세한 정보를 알고 싶다면?</summary>
<ol>
<li>접기/펼치기 목록은 deatails 요소를 사용합니다.</li>
<li>접기/펼치기 목록의 제목은 summary 요소를 사용합니다.</li>
</ol>
</details>
//CSS none
//Javascript none
예제2(Sample)
<details> 태그에 open 속성으로 숨겨진 내요을 펼쳐 볼 수 있는 예제입니다.
더 자세한 정보를 알고 싶다면?
- 접기/펼치기 목록은 deatails 요소를 사용합니다.
- 접기/펼치기 목록의 제목은 summary 요소를 사용합니다.
HTML
CSS
SCRIPT
<details open>
<summary>더 자세한 정보를 알고 싶다면?</summary>
<ol>
<li>접기/펼치기 목록은 deatails 요소를 사용합니다.</li>
<li>접기/펼치기 목록의 제목은 summary 요소를 사용합니다.</li>
</ol>
</details>
//CSS none
//Javascript none
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <details> | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| cite | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| datetime | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
