<details>
시도해보기
HTML <details>
요소는 "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. 요약이나 레이블은 <summary>
요소를 통해 제공할 수 있습니다.
정보 공개 위젯은 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 나타냅니다. <details>
요소의 첫 번째 자식이 <summary>
요소라면, <summary>
의 콘텐츠를 위젯의 레이블로 사용합니다.
콘텐츠 카테고리 | 플로우 콘텐츠, 구획 루트, 대화형 콘텐츠, 뚜렷한 콘텐츠. |
---|---|
가능한 콘텐츠 | 하나의 <summary> 와, 그 뒤의 플로우 콘텐츠. |
태그 생략 | None, both the starting and ending tag are mandatory. |
가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
암시적 ARIA 역할 | group |
가능한 ARIA 역할 | 없음 |
DOM 인터페이스 | HTMLDetailsElement (en-US) |
특성
이벤트
<details>
요소는 HTML 요소가 지원하는 일반적인 이벤트 외에도, <details>
요소의 상태가 열기와 닫기로 바뀔 때 발생하는 toggle
이벤트도 지원합니다. 이벤트는 상태가 변한 후 발생하며, 브라우저에서 이벤트를 쏘기 전에 상태가 여러 번 바뀌는 경우 모두 통합하여 하나의 이벤트만 전송합니다.
toggle
이벤트 처리기를 부착해 위젯의 상태 변화를 감지할 수 있습니다.
details.addEventListener("toggle", event => {
if (details.open) {
/* the element was toggled open */
} else {
/* the element was toggled closed */
}
});
예제
간단한 예제
이번 예제는 요약 없는 <details>
요소를 보입니다.
<details>
<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>
요소를 추가합니다.
<details>
<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>
결과는 다음과 같습니다.
열려있는 상태로 만들기
<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>
결과는 다음과 같습니다.
외형 바꾸기
이제 CSS를 추가해서 외형을 바꿔보겠습니다.
CSS
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
위의 CSS는 탭 인터페이스 같은 외형을 적용합니다.
HTML
<details>
<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>
요소는 list-style
(en-US) 단축 속성과, 그 본디 속성인 list-style-type
(en-US) 등을 지원하므로, list-style-image
(en-US) 속성 등을 사용해 삼각형을 원하는대로 바꿀 수 있습니다. 삼각형을 아예 제거하려면 list-style: none
을 지정하면 됩니다.
그러나 Chrome은 위의 방법을 아직 지원하지 않습니다. 따라서 비표준 ::-webkit-details-marker
의사 요소를 사용해야 합니다.
CSS
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
위의 CSS도 탭 인터페이스같은 외형을 적용하며, 이에 더해 삼각형을 제거합니다.
HTML
<details>
<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>
결과
명세
명세 | 상태 | 주석 |
---|---|---|
HTML Living Standard The definition of '<details>' in that specification. |
Living Standard | |
HTML 5.1 The definition of '<details>' in that specification. |
Recommendation | Initial definition |
브라우저 호환성
BCD tables only load in the browser