세부정보 및 요약

매우 유용한 세부정보 및 요약 요소의 작동 방식과 사용 위치를 알아봅니다.

익스팬더 화살표(공개 위젯이라고도 함)는 콘텐츠를 숨기거나 표시하는 사용자 인터페이스 컨트롤입니다. web.dev에서 이 페이지를 읽고 있고 표시 영역의 너비가 106em 미만인 경우 '이 페이지에서'를 클릭하면 이 섹션의 목차가 표시됩니다. 표시되지 않으면 브라우저를 축소하여 이 페이지의 목차 탐색을 확장 화살표로 확인하세요.

아코디언 그래픽 사용자 인터페이스는 세로로 쌓인 공개 위젯의 시리즈입니다. 아코디언의 일반적인 사용 사례는 자주 묻는 질문 (FAQ) 페이지입니다. 이 경우 아코디언 FAQ에는 표시되는 질문 목록이 포함됩니다. 클릭하면 질문이 펼쳐지거나 해당 질문에 대한 답변이 '공개'됩니다.

jQuery에는 2009년부터 아코디언 UI 패턴이 포함되어 있습니다. 원래 JavaScript가 없는 아코디언 솔루션에는 각 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 (및 모든 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 의사 요소는 제한된 수의 스타일만 허용합니다. ::marker를 삭제하고 스타일을 지정하기 더 쉬운 ::before로 대체하는 것이 일반적인 방법이며, CSS 스타일은 open 속성의 존재 여부에 따라 생성된 콘텐츠의 스타일을 약간 변경합니다. list-style: none를 설정하여 공개 위젯 아이콘을 삭제하거나 마커의 content를 none로 설정할 수 있지만, 시력이 있는 사용자에게 요약 콘텐츠가 전환되어 콘텐츠를 표시하거나 숨긴다는 것을 알리는 시각적 표시기를 항상 포함해야 합니다.

details summary::before {
  /* all the styles */
}
details[open] summary::before {
  /* changes applied when open only */
}

이 예에서는 기본 마커를 삭제하고 세부정보가 닫히면 +을 만들고 세부정보가 열리면 -을 만들기 위해 생성된 콘텐츠를 추가합니다.

세부정보 블록이 기본적으로 열리도록 하려면 여는 <details> 태그에 open 속성을 포함하세요. 각 대화상자 사이에 공간을 추가하고 생성된 콘텐츠로 만든 마커의 회전을 전환하여 모양을 개선할 수도 있습니다.

오류 처리 방식

<summary>를 포함하지 않으면 브라우저에서 마커와 'details'라는 단어가 포함된 <summary>를 만듭니다. 이 요약은 섀도우 루트의 일부이므로 작성자 CSS 요약 스타일이 적용되지 않습니다.

<summary>를 포함하지만 <details>의 첫 번째 요소가 아닌 경우 브라우저는 요약을 올바르게 표시합니다. 요약에 링크, 라벨 또는 기타 상호작용형 요소를 포함해도 실패하지는 않지만 브라우저에서 상호작용형 콘텐츠 내의 상호작용형 콘텐츠를 다르게 처리합니다.

예를 들어 요약에 링크를 포함하면 일부 브라우저에서는 요약과 링크를 모두 기본 탭 순서에 추가하지만 다른 브라우저에서는 기본적으로 링크에 포커스를 두지 않습니다. <summary>에 중첩된 <label>를 클릭하면 일부 브라우저에서 연결된 양식 컨트롤에 포커스를 줍니다. 다른 브라우저에서는 양식 컨트롤에 포커스를 지정하고 <details>을 열거나 닫습니다.

HTMLDetailsElement 인터페이스

모든 HTML 요소와 마찬가지로 HTMLDetailsElement는 HTMLElement의 모든 속성, 메서드, 이벤트를 상속하고 open 인스턴스 속성과 toggle 이벤트를 추가합니다. HTMLDetailsElement.open 속성은 open HTML 속성을 반영하는 불리언 값으로, <summary>를 제외한 요소의 콘텐츠가 사용자에게 표시되는지 여부를 나타냅니다. 전환 이벤트는 <details> 요소가 열리거나 닫히도록 전환될 때 발생합니다. addEventListener()를 사용하여 이 이벤트를 수신할 수 있습니다.

사용자가 다른 세부정보를 열 때 열려 있는 세부정보를 닫는 스크립트를 작성하려면 removeAttribute("open")를 사용하여 open 속성을 삭제하세요.

JavaScript를 사용하는 유일한 예입니다. 열려 있는 다른 위젯을 닫는 경우를 제외하고는 JavaScript가 필요하지 않을 수 있습니다.

<details> 및 <summary>는 스타일을 지정할 수 있으며 도움말을 만드는 데 사용할 수도 있습니다. 하지만 기본 시맨틱이 일치하지 않는 사용 사례에 이러한 시맨틱 요소를 사용하려면 항상 접근성을 유지하세요. HTML은 대부분 기본적으로 액세스할 수 있습니다. 개발자의 역할은 콘텐츠에 계속 액세스할 수 있도록 하는 것입니다.

이해도 확인

세부정보와 요약에 대한 지식을 테스트해 보세요.