details 태그

details 태그는 HTML 스포일러를 생성하며, 사용자의 의사에 따라 숨기거나 표시할 수 있는 정보에 사용됩니다.

기본적으로 태그의 내용은 숨겨져 있으며, 사용자의 요청에 따라 내용을 표시하려면 summary 태그를 추가해야 합니다. 이 태그는 details 태그의 제목을 지정합니다. 이 제목은 페이지에 항상 표시되며(details의 내용이 접혀 있는 상태라도), 숨겨진 텍스트를 펼치거나 접기 위해 클릭할 수 있습니다.

숨겨진 내용을 표시하는 데에는 details 태그의 open 속성도 사용할 수 있습니다 (예: JavaScript를 사용하여 details 내용 표시).

예제

details 태그가 어떻게 작동하는지 살펴보겠습니다:

<details>
	<summary>click me</summary>
	hidden text
</details>

참고 항목

페이지에서 블록을 숨기는 속성 hidden