<details> 태그의 정의 및 사용법
<details> 태그는
사용자가 선택하여 열고 닫을 수 있는 콘텐츠를 정의하는 태그입니다.
<details> 태그는 일반적으로 추가 정보 또는 세부 정보를 제공하는 데 사용됩니다. 명세서에서는 '사용자가 추가 정보나 컨트롤을 얻을 수 있는 공개 위젯을 나타낸다'라고 정의하고 있습니다.
<details> 태그는 주로 accordion 위젯처럼 사용자가 열고 닫을 수 있는 대화형 웨젯을 만드는데 사용됩니다.
참고사항
<details> 태그를 사용하기 위해서는 <summary> 태그에 대해 알고 있어야 합니다.
<summary> 태그는
<details> 태그로 생성된 대화형 웨젯의 세부 정보를 요약하거나 제목을 정의하는 역할을 합니다.
<summary> 태그는 기본적으로 ►모양의 마커가 표시됩니다.
구문
모든 종류의 콘텐츠를 태그 안에 포함할 수 있지만, <summary> 태그를 사용하면 제목(요약 내용)을 나타냅니다. 만약 <summary> 태그가 없다면, 사용자 에이전트(브라우저 등)는 자체적인 제목을 제공합니다(예: "세부 정보").
open 속성
open 속성은 부울 속성(boolean attribute)입니다.
이 속성이 존재하면, 요약과 추가 정보 모두 사용자에게 보여야 함을 나타냅니다. 만약 이 속성이 없다면 요약만 보여야 합니다.
기본적으로 위젯은 닫혀 있습니다. 열리면 확장되고 내용물이 표시됩니다.
원한다면 open 속성을 이용해서 위젯을 열어놓을 수 있습니다.
<details> 태그가 브라우저에서 구현되는 모습을 보면 자바스크립트에서 사용하던 accordion(혹은 toggle)을 HTML로 구현하기 위해 고안된 것이라고 가늠할 수 있습니다. 기존에는 자바스크립트와 CSS를 사용하여 accordion을 구현해야 했습니다. 그러나 <details> 태그는 이러한 패턴을 브라우저 자체에서 지원함으로써 웹 개발자들이 더 쉽게 accordion을 구현할 수 있도록 도와주는 역할을 하게 되었습니다.
주의할 점
<details> 태그를 사용할 때에는 몇 가지 주의해야 할 점이 있습니다.
<summary> 태그의 위치
<summary> 태그는 제목(요약 내용)을 나타내는 요소로써, <details> 태그에 사용할 경우 시각장애인을 위한 웹접근성의 보조 기구인 스크린 리더를 위해 첫 번째 자식 요소로 마크업해야 합니다. 그래야 스크린 리더는 <summary> 태그의 제목을 먼저 읽고 세부 정보를 읽을 수 있기 때문에 가독성에 중요한 사항입니다. 이와 같은 이유로 <summary> 태그를 생략하는 것은 권장하지 않습니다.
role 속성은 허용되지 않음
<details> 태그는 role 속성이 허용되지 않습니다. <details> 태그의 암시적인 role 속성 값은 group입니다.
role 속성에 대한 자세한 내용은 다음의 링크를 참조하시기 바랍니다.
<details> 태그는 각주에 적합하지 않음
각주(footnotes)는 주로 문서 내에서 참고 사항이나 추가 정보를 제공하기 위해 사용되며, 간결하게 보여줘야 하는 특성이 있습니다. 하지만 <details> 태그는 사용자에게 더 많은 정보를 제공하고자 할 때 사용되므로, 각주와는 목적과 특성이 다르다고 볼 수 있습니다. 각주를 마크업하는 방법은 아래의 명세서 내용을 참조하시기 바랍니다.
브라우저 호환성
| 태그와 속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
<details>
|
12 | 79 | 49 | 6 |
open
|
12 | 79 | 49 | 6 |
<summary>
|
12 | 79 | 49 | 6 |
명세서
| 명세서 사양 | |
|---|---|
<details>
|
HTML Standard #the-details-element |
<summary>
|
HTML Standard #the-summary-element |