details, summary element - by. UXKM

2025-05-16

요약 설명
<details> 요소는 사용자가 클릭하여 내용을 열고 닫을 수 있는 인터랙티브한 컨테이너(토글 박스)를 정의하는 시맨틱 태그로, 자주 묻는 질문(FAQ), 추가 설명, 옵션 설정 등 숨겨진 정보를 필요할 때 표시할 수 있도록 도와줍니다. 기본적으로 닫힌 상태로 표시되며, open 속성을 추가하면 처음부터 열린 상태로 렌더링됩니다.

<summary> 요소는 <details> 요소의 요약 제목 또는 클릭 가능한 트리거 역할을 하며, 해당 요소를 클릭하면 <details>의 숨겨진 콘텐츠가 펼쳐지거나 닫힙니다. <summary>는 반드시 <details> 내부에 위치해야 하며, 내용을 직관적으로 안내하는 제목 역할을 합니다.

두 요소는 자바스크립트 없이도 접을 수 있는 인터페이스를 제공하여 사용자 경험과 접근성을 모두 향상시킬 수 있습니다.

주요 역할 및 특징

접고 펼칠 수 있는 정보 패널 생성
기본적으로 닫힌 상태(collapsed)로 표시되며, 사용자가 클릭하면 펼쳐집니다.
요약 제목 제공을 위한 <summary>와 함께 사용
- <summary> 요소는 <details>의 접힘/펼침을 제어하는 제목 역할을 합니다.
- <summary> 요소는 <details> 요소의 필수 하위 요소가 아닙니다.
  <summary>를 생략하면 브라우저에서 기본적으로 "세부정보"(Details)라는 텍스트가 제공되며, 이 텍스트를 클릭하여 내용을 펼치거나 접을 수 있습니다.
  하지만 <summary>를 직접 추가하면 사용자가 원하는 제목을 설정할 수 있습니다.
기본 상태 설정 가능 (open 속성)
open 속성을 사용하면 페이지 로딩 시 기본으로 펼쳐진 상태로 시작할 수 있습니다.
접근성 및 시맨틱 구조에 유리함
<details>와 <summary>는 스크린 리더도 지원하며, 키보드 접근성도 기본적으로 제공됩니다.
자바스크립트 없이도 동작하는 네이티브 기능
<details> 요소는 토글 기능을 브라우저가 자동으로 처리하므로, 별도의 JavaScript 없이도 동작합니다.
FAQ, 추가 설명, 코드 보기 등 다양한 UI 패턴에 활용
"더 보기", "상세 보기"와 같은 기능에 매우 적합합니다.
브라우저 지원
- HTML5에서 추가된 요소이며, 대부분의 최신 브라우저에서 지원됩니다.
- 구형 브라우저에서는 <details>가 동작하지 않을 수 있으므로 대체 UI가 필요할 수 있습니다.

콘텐츠 모델

`<details>` 콘텐츠 모델

<details> 요소는 플로우 콘텐츠(flow content), 섹션 루팅 콘텐츠(sectioning root), 인터랙티브 콘텐츠(interactive content)에 속합니다.

플로우 콘텐츠
대부분의 HTML 요소가 속하는 범주로, 문서 흐름에 포함될 수 있는 모든 콘텐츠를 포함합니다.
섹션 루팅 콘텐츠
<details> 내부는 별도의 섹션 구조로 간주되며, 내부에서 <h1> ~ <h6> 요소를 사용할 수 있습니다.
인터랙티브 콘텐츠
사용자가 열고 닫는 동작을 할 수 있는 인터랙션이 있기 때문에 이 범주에도 속합니다.

`<summary>` 콘텐츠 모델

<details> 요소 안에 포함되는 <summary>는 메타데이터 콘텐츠(metadata content)에 속합니다.
<summary>는 <details> 요소의 제목 역할을 하며, 그 콘텐츠(=세부 정보)의 요약 또는 설명을 제공합니다.
즉, 본문 콘텐츠를 구성하지 않고, 다른 콘텐츠(세부 정보)를 설명하거나 대표하는 역할을 하므로 메타데이터 콘텐츠로 분류됩니다.

CSS 기본 값

<details>, <summary> 요소는 아래와 같은 기본값이 적용됩니다.

							details {
								display: block;
							}

							summary {
								display: block;
								cursor: pointer;
							}

기본 문법

							<details>
								<summary>자세한 정보 보기</summary>
								<p>이것은 숨겨진 내용입니다. 클릭하면 나타납니다.</p>
							</details>

속성

[open] Boolean - 선택 사항 <details open>

open 속성은 <details> 요소가 페이지 로드 시 기본적으로 열려 있는지를 지정합니다.

open 속성이 존재하면 <details> 내용이 기본적으로 펼쳐진 상태로 표시됩니다.
open 속성이 없으면 사용자가 클릭하기 전까지 내용이 숨겨진 상태로 유지됩니다.

								<details open>
									<summary>기본으로 열림</summary>
									<p>페이지가 로드되자마자 이 내용이 보입니다.</p>
								</details>

예제

기본적인 사용 예제

FAQ (CSS 스타일 적용)

주의사항

<summary> 요소 없이도 <details>는 동작하지만, 가급적 포함하는 것이 좋습니다.
모든 브라우저에서 <details>를 지원하는 것은 아닙니다.
구형 브라우저에서는 <details>가 동작하지 않을 수 있으므로, 대체 UI(JavaScript를 활용한 토글 버튼 등)를 고려해야 합니다.
브라우저 스타일이 다를 수 있으므로, 시각적으로 일관된 UI를 위해 CSS로 커스터마이징하는 것이 좋습니다.