이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다.
<details> 태그는 사용자가 선택하여 열고 닫을 수 있는 콘텐츠를 정의하는 태그입니다.
<details> 태그는 일반적으로 추가 정보 또는 세부 정보를 제공하는 데 사용됩니다. 명세서에서는 '사용자가 추가 정보나 컨트롤을 얻을 수 있는 공개 위젯을 나타낸다'라고 정의하고 있습니다.
<details> 태그는 주로 accordion 위젯처럼 사용자가 열고 닫을 수 있는 대화형 웨젯을 만드는데 사용됩니다.
기본 예제
<details>
<summary>요약 내용</summary>
추가 정보나 세부 내용
</details>
사용법
<details> 태그를 사용하기 위해서는 <summary> 태그에 대해 알고 있어야 합니다.
<summary> 태그는 기본적으로 ►모양의 마커가 표시됩니다.
모든 종류의 콘텐츠를 태그 안에 포함할 수 있지만, <summary> 태그를 사용하면 제목(요약 내용)을 나타냅니다. 만약 <summary> 태그가 없다면, 사용자 에이전트(브라우저 등)는 자체적인 제목을 제공합니다(예: "세부 정보").
<details>
<summary>요약 내용</summary> <!-- <summary> 태그는 제목을 나타냄 -->
추가 정보나 세부 내용
</details>
open 속성
open 속성은 부울 속성(Boolean attribute)입니다.
이 속성이 존재하면, 요약과 추가 정보 모두 사용자에게 보여야 함을 나타냅니다. 만약 이 속성이 없다면 요약만 보여야 합니다.
기본적으로 위젯은 닫혀 있습니다. 열리면 확장되고 내용물이 표시됩니다.
원한다면 open 속성을 이용해서 위젯을 열어놓을 수 있습니다.
<details open> <!-- 원한다면 open 속성을 이용해서 위젯을 열어놓을 수 있습니다. -->
<summary>요약 내용</summary>
추가 정보나 세부 내용
</details>
<details> 태그가 브라우저에서 구현되는 모습을 보면 자바스크립트에서 사용하던 accordion(또는 toggle)을 HTML로 구현하기 위해 고안된 것이라고 가늠할 수 있습니다. 기존에는 자바스크립트와 CSS를 사용하여 accordion을 구현해야 했습니다. 그러나 <details> 태그는 이러한 패턴을 브라우저 자체에서 지원함으로써 웹 개발자들이 더 쉽게 accordion을 구현할 수 있도록 도와주는 역할을 하게 되었습니다.
<summary> 태그의 위치
<summary> 태그는 제목(요약 내용)을 나타내는 요소로써, <details> 태그에 사용할 경우 시각장애인을 위한 웹접근성의 보조 기구인 스크린 리더를 위해 첫 번째 자식 요소로 마크업해야 합니다. 그래야 스크린 리더는 <summary> 태그의 제목을 먼저 읽고 세부 정보를 읽을 수 있기 때문에 가독성에 중요한 사항입니다. 이와 같은 이유로 <summary> 태그를 생략하는 것은 권장하지 않습니다.
참고문헌
codingCourses: HTML <details> Tag – Proper Understanding and Usage
HTML <details> Tag – The Details Disclosure Element - codingCourses
The details tag defines content that users can choose to open or close. It is commonly used to provide additional or detailed information. This article also covers the open attribute used with the details tag.
coding.courses
HTML <details>タグ：正しい理解と使い方 - codingEverybody
detailsタグは、ユーザーが選択して開閉できるコンテンツを定義するタグです。一般的に、追加情報や詳細情報を提供する際に使用されます。本記事では、detailsタグで使用される「open」属性
codingeverybody.jp