HTML <details> tag 정리, 한글 설명

HTML <details> element

mdn, W3C 정리 & 한국어 설명

 

자료 수집 : 2022년 3월

 

details 태그란?

사용자가 직접 조작해 열림 상태일 때만 내부 정보를 보여주는 정보 공개 위젯(interactive widget, disclosure widget)을 정의한다. 기본으로 닫힘 상태이다. details 태그 안에는 어떤 종류의 콘텐츠도 포함할 수 있다.

보통 레이블 옆의 작은 삼각형이 움직이며 열림과 닫힘 상태를 나타낸다.

 

 

details 태그와 같이 사용하는 태그

summary 태그 

요약이나 레이블을 제공하는 요소.

summary 요소를 사용하지 않으면 브라우저마다 기본 요약 문자열인 상세, 세부정보, More details 등과 같이 표기된다.

 

 

details 태그의 속성

open (속성값이 없는 부울 속성)

요소의 콘텐츠가 보이는 상태. 기본값은 'false'이다. (open="open" 도 같은 의미이다.)

 

 

details 태그의 사용 예제

summary 에 들어가는 글자가 위젯의 레이블이 된다.

<details>
    <summary>자세히보기</summary>
    Something small enough to escape casual notice.
</details>

open 속성을 사용해 처음부터 열려있는 상태를 보여준다.

<details open>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

 

 

기타사항

• summary 요소에 css스타일인 list-style 속성이 기본 삼각형으로 들어간다.
• js에서 toggle 이벤트로 위젯 상태 변화를 감지할 수 있다.
• 가능한 ARIA role : 없음
• details 요소는 HTML5에서 추가되었다.

 

 

출처

W3schools, W3docs, MDN, TCPschool