세부정보 및 요약 요소의 작동 방식과 사용 위치를 알아보세요.
공개 위젯은 콘텐츠를 숨기고 표시하는 사용자 인터페이스 컨트롤입니다. web.dev에서 이 페이지를 읽고 있으며 표시 영역의 너비가 106ems 미만일 때 이 단락 위의 '이 페이지'를 클릭하면 이 섹션의 목차가 나타납니다. 표시되지 않는 경우 브라우저를 축소하여 이 페이지의 목차 탐색을 공개 위젯으로 표시합니다.
아코디언 그래픽 사용자 인터페이스는 세로로 쌓인 공개 위젯의 조합입니다. 아코디언 UI의 일반적인 사용 사례는 여러 사이트의 자주 묻는 질문 (FAQ) 페이지입니다. 아코디언 FAQ에는 표시되는 질문 목록이 포함되어 있습니다. 질문을 클릭하면 해당 질문에 대한 답변이 확장되거나 '공개'됩니다.
jQuery에는 적어도 2009년부터 아코디언 UI 패턴이 포함되었습니다. 자바스크립트가 없는 원래의 아코디언 솔루션에는 각 FAQ 질문에 <label>로 지정하고 그 뒤에 라벨이 지정된 체크표시를 추가한 다음 체크표시가 선택되면 <div> 답변을 표시하는 것이 포함되었습니다. CSS의 모양은 다음과 같습니다.
#FAQ [type="checkbox"] + div.answer {
/* all the answer styles */
display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
display: block;
}
왜 역사인가요? JavaScript나 양식 제어 해킹이 없는 아코디언과 같은 공개 위젯은 비교적 최근에 추가된 기능입니다. <details> 및 <summary> 요소는 2020년 1월부터 모든 최신 브라우저에서만 완전히 지원되었습니다. 이제 시맨틱 HTML만 사용하여 매력적이지는 않지만 작동하는 공개 위젯을 만들 수 있습니다. <details> 및 <summary> 요소만 있으면 됩니다. 이러한 요소는 콘텐츠 펼치기 및 접기를 처리하는 기본 제공 방식입니다. 사용자가 <summary>를 클릭하거나 탭하거나 <summary>에 포커스가 있을 때 Enter 키를 놓으면 상위 <details>의 콘텐츠가 표시됩니다.
모든 시맨틱 콘텐츠와 마찬가지로 기본 기능과 디자인을 점진적으로 개선할 수 있습니다. 여기에서는 CSS를 조금 추가했지만, 다른 것은 없습니다.
이러한 Codepen에는 JavaScript가 포함되어 있지 않습니다.
공개 상태 전환: open 속성
<details> 요소는 공개 위젯 컨테이너입니다. <summary>는 상위 <details>의 요약 또는 범례입니다. 요약은 항상 표시되어 상위 요소의 나머지 콘텐츠 표시를 전환하는 버튼의 역할을 합니다. <summary>와 상호작용하면 <details> 요소의 open 속성을 전환하여 자체 라벨이 지정된 요약 동위 항목의 표시가 전환됩니다.
open 속성은 불리언 속성입니다. 있는 경우 값이 있든 없든 상관없이 모든 <details> 콘텐츠가 사용자에게 표시된다는 의미입니다. open 속성이 없으면 <summary>의 콘텐츠만 표시됩니다.
open 속성은 사용자가 컨트롤과 상호작용할 때 자동으로 추가 및 삭제되므로 CSS에서 상태에 따라 요소의 스타일을 다르게 지정할 수 있습니다.
각각 <summary> 하위 요소가 있는 여러 <details> 요소의 목록으로 아코디언을 만들 수 있습니다. HTML에서 open 속성을 생략하면 <details>가 모두 축소되거나 닫히고 페이지가 로드될 때 요약 제목만 표시됩니다. 각 제목이 상위 <details>의 나머지 콘텐츠를 위한 오프너입니다. HTML에 open 속성을 포함하면 페이지가 로드될 때 <details>가 확장된 상태로 렌더링되고 콘텐츠가 표시됩니다.
접힌 상태의 숨겨진 콘텐츠는 일부 브라우저에서만 검색할 수 있지만 접힌 콘텐츠가 DOM의 일부가 아닌 경우에도 검색할 수 없습니다. Edge 또는 Chrome에서 검색하면 검색어가 포함된 세부정보가 확장되어 해당 항목이 표시됩니다. 이 동작은 Firefox나 Safari에서는 복제되지 않습니다.
<summary>는 <details> 요소의 첫 번째 하위 요소여야 하며 중첩된 상위 <details> 요소의 나머지 콘텐츠에 관한 요약, 설명 또는 범례를 나타냅니다. <summary> 요소의 콘텐츠는 제목 콘텐츠, 일반 텍스트 또는 단락 내에서 사용할 수 있는 HTML일 수 있습니다.
요약 마커 전환
이전의 두 Codepen에서는 요약의 inline-start 측 화살표를 확인할 수 있습니다. 공개 위젯은 일반적으로 회전 (또는 비틀기)하여 열린/닫힘 상태를 나타내는 작은 삼각형을 사용하여 화면에 표시되며 삼각형 옆에 라벨이 있습니다. <summary> 요소의 콘텐츠는 공개 위젯 라벨을 지정합니다.
각 섹션 상단의 회전 화살표는 <summary> 요소에 설정된 ::marker입니다. 목록 항목과 마찬가지로 <summary> 요소는 list-style 약식 속성과 list-style-type를 비롯한 긴 형식 속성을 지원합니다.
CSS로 펼치기 삼각형의 스타일을 지정할 수 있으며, list-style-image가 있는 이미지를 비롯하여 삼각형에서 사용되는 마커를 다른 글머리기호 유형으로 변경할 수도 있습니다.
다른 스타일을 적용하려면 details summary::marker와 유사한 선택기를 사용합니다. ::marker pseudo-element는 제한된 수의 스타일만 허용합니다. ::marker를 삭제하고 더 쉬운 스타일 ::before로 바꾸는 것이 일반적입니다. CSS 스타일은 열린 속성의 존재 여부에 따라 생성된 콘텐츠의 스타일을 약간 변경합니다. list-style: none를 설정하거나 마커의 콘텐츠를 none로 설정하여 정보 공개 위젯 아이콘을 삭제할 수 있지만, 항상 시각적 표시기를 포함하여 일반 사용자에게 요약 콘텐츠가 활성화 시 콘텐츠를 표시하고 숨기는 전환 버튼임을 알립니다.
details summary::before {
/* all the styles */
}
details[open] summary::before {
/* changes applied when open only */
}
이 예에서는 기본 마커를 삭제하고 생성된 콘텐츠를 추가하여 세부정보가 닫혀 있으면 +를 만들고 세부정보가 열려 있으면 -를 만듭니다.
세부정보 블록을 기본적으로 열려면 여는 <details> 태그에 open 속성을 포함합니다. 각 대화상자 사이에 공간을 추가하고 생성된 콘텐츠로 만든 마커의 회전을 전환하여 모양을 개선할 수도 있습니다.
오류 처리 방법
<summary>를 포함하지 않으면 브라우저에서 마커와 'details'라는 단어가 포함된 속성이 자동으로 생성됩니다. 이 요약은 섀도 루트의 일부이므로 작성자 CSS 요약 스타일이 적용되지 않습니다. Safari의 키보드 포커스 순서에는
세부정보가 포함되어 있지 않습니다.
<summary>를 포함하지만 <details>의 첫 번째 요소가 아닌 경우에도 브라우저에는 계속 요약이 표시됩니다. 또한 요약 내에 링크, 라벨 또는 기타 상호작용 요소를 포함하는 경우에도 실패하지 않지만, 브라우저는 대화형 콘텐츠 내의 대화형 콘텐츠를 다르게 처리합니다. 예를 들어 요약에 링크를 포함하는 경우 일부 브라우저에서는
기본 탭 순서에 대한 요약과 링크를 모두 추가하지만 다른 브라우저는 기본적으로 링크에 포커스를 맞추지 않습니다.
<summary>에 중첩된 <label>를 클릭하면 일부 브라우저에서는 연결된 양식 컨트롤에 포커스를 부여하고 다른 브라우저에서는 양식 컨트롤에 포커스를 맞추고 <details>를 열거나 닫습니다.
HTMLDetailsElement 인터페이스
모든 HTML 요소와 마찬가지로 HTMLDetailsElement는 HTMLElement에서 모든 속성, 메서드, 이벤트를 상속하고 open 인스턴스 속성과 toggle 이벤트를 추가합니다. HTMLDetailsElement.open 속성은 open HTML 속성을 반영하는 불리언 값으로, <summary>을 제외하고 요소의 콘텐츠를 사용자에게 표시할지 여부를 나타냅니다. 전환 이벤트는 <details> 요소가 열기 또는 닫힌 상태로 전환되면 실행됩니다. addEventListener()를 사용하여 이 이벤트를 수신할 수 있습니다.
사용자가 다른 세부정보를 열 때 열려 있는 세부정보를 닫는 스크립트를 작성하려면 removeAttribute("open")를 사용하여 열려 있는 속성을 삭제합니다.
이는 JavaScript를 사용하는 유일한 예입니다. 열려 있는 다른 공개 위젯을 닫는 기능을 제외하면 JavaScript는 필요하지 않습니다.
<details> 및 <summary>는 과도한 스타일을 지정할 수 있으며 도구 팁을 만드는 데도 사용할 수 있습니다.
하지만 네이티브 의미 체계가 일치하지 않는 사용 사례에 이러한 시맨틱 요소를 사용하려는 경우 항상 접근성을 유지해야 합니다.
대부분의 경우 HTML에 기본적으로 액세스할 수 있습니다. 개발자의 역할은 콘텐츠에 계속 액세스할 수 있도록 하는 것입니다.
이해도 테스트
세부정보 및 요약에 대한 지식을 테스트합니다.
<summary>은(는) 어떤 요소의 첫 번째 하위 요소여야 하나요?
<p><details><fieldset>