<summary> 태그의 정의 및 사용법
<summary> 태그는
<details> 태그로 생성된 대화형 웨젯의 세부 정보를 요약하거나 제목을 정의하는 역할을 합니다.
<summary> 태그를 이해하기 위해서는 사전 지식으로 <details> 태그에 대해 알고 있어야 합니다.
<details> 태그는
사용자가 선택하여 열고 닫을 수 있는 콘텐츠를 정의하는 태그입니다.
<summary> 태그는 기본적으로 ►모양의 마커가 표시됩니다.
<details>와 <summary> 태그
<summary> 태그의 조상 요소에는 반드시 <details> 태그가 있어야 하지만,
<details> 태그의 자손 요소로 <details> 태그가 반드시 있어야 하는 것은 아닙니다.
<details> 태그의 자손 요소로 <details> 태그가 반드시 있어야 하는 것은 아니지만, <details> 태그를 생략하는 것은 웹 접근성을 고려할 때 권장하지 않습니다.
주의할 점을 참고하세요!
<details>에 <summary> 태그가 있을 경우
<summary> 태그는 <details>의 제목을 나타냅니다.
<details>에 <summary> 태그가 없을 경우
만약 <details> 태그에 <summary> 태그가 없다면
사용자 에이전트(브라우저 등)는 자체적인 요약 정보나 제목을 <details> 태그에 제공합니다(예: "세부 정보").
다음의 예제는 <summary> 태그를 사용하지 않았습니다.
주의할 점
<summary> 태그를 사용할 때에는 다음의 주의할 점이 있습니다.
<summary> 태그의 위치
<summary> 태그는 제목(요약 내용)을 나타내는 요소로써, <details> 태그에 사용할 경우 시각장애인을 위한 웹접근성의 보조 기구인 스크린 리더를 위해 첫 번째 자식 요소로 마크업 해야합니다. 그래야 스크린 리더는 <summary> 태그의 제목을 먼저 읽고 세부 정보를 읽을 수 있기 때문에 가독성에 중요한 사항입니다. 이와 같은 이유로 <summary> 태그를 생략하는 것은 권장하지 않습니다.
role 속성은 허용되지 않음
<summary> 태그는 role 속성이 허용되지 않습니다. <summary> 태그의 암시적인 role 속성 값은 button입니다.
role 속성에 대한 자세한 내용은 다음의 링크를 참조하시기 바랍니다.
브라우저 호환성
| 태그와 속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
<summary>
|
12 | 79 | 49 | 9 |
<details>
|
12 | 79 | 49 | 9 |
open
|
12 | 79 | 49 | 9 |
명세서
| 명세서 사양 | |
|---|---|
<summary>
|
HTML Standard #the-summary-element |
<details>
|
HTML Standard #the-details-element |