<summary>
태그는
<details>
태그로 생성된 대화형 웨젯의 세부 정보를 요약하거나 제목을 정의하는 역할을 합니다.
<summary>
태그는 <details>
태그로 생성된 대화형 웨젯의 세부 정보를 요약하거나 제목을 정의하는 역할을 합니다.
<details>
<summary>요약 내용</summary>
추가 정보나 세부 내용
</details>
<details> 태그
요약 내용
추가 정보나 세부 내용<summary>
태그의 정의 및 사용법
<summary>
태그의 조상 요소에 반드시 <details>
태그가 있어야 합니다.
만약 <details>
태그에 <summary>
태그가 없다면 사용자 에이전트(브라우저 등)는 자체적인 요약 정보나 제목을 <details>
태그에 제공합니다(예: "세부 정보").
구문
<summary>
태그를 사용하면 제목을 나타냅니다.
<details>
<summary>요약 내용</summary> <!-- <summary> 태그는 제목을 나타냄 -->
추가 정보나 세부 내용
</details>
<summary>
태그를 사용해서 제목을 나타낸 모습입니다.
<details> 태그
요약 내용
추가 정보나 세부 내용다음의 예제는 <summary>
태그를 사용하지 않았습니다.
<summary>
태그를 사용하지 않았습니다.
<details>
추가 정보나 세부 내용
</details>
<summary>
태그를 사용하지 않았을 경우 사용자 에이전트(브라우저 등)는 자체적인 제목을 제공합니다(예: "세부 정보").
<details> 태그
추가 정보나 세부 내용
주의사항 - <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 |