세부정보 및 요약

유용한 세부정보 및 요약 요소가 어떻게 작동하는지, 사용할 수 있습니다

공개 위젯은 콘텐츠를 숨기거나 표시하는 사용자 인터페이스 컨트롤입니다. web.dev에서 이 문서를 읽고 있고 너비가 106ems 미만인 경우, '이 페이지'를 클릭하면 이 단락 위에는 이 섹션을 참조하세요. 이 탭이 표시되지 않으면 브라우저를 축소하여 이 페이지의 목차 탐색을 정보 공개 문구 위젯입니다.

아코디언 그래픽 사용자 인터페이스는 공개 위젯을 사용합니다. 아코디언 UI의 일반적인 사용 사례는 여러 사이트의 자주 묻는 질문 (FAQ) 페이지입니다. 아코디언 FAQ에는 표시되는 질문 목록이 포함되어 있습니다. 질문을 클릭하면 해당 질문에 대한 답변이 확장, 즉 '공개'됩니다.

적어도 2009년부터 jQuery에는 아코디언 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>를 클릭 또는 탭하거나 다음의 경우 Enter 키에서 손을 떼는 경우 <summary>에 포커스가 있으면 상위 <details> 전환 버튼의 콘텐츠가 표시됩니다.

다른 모든 시맨틱 콘텐츠와 마찬가지로 기본 기능과 모양을 점진적으로 개선할 수 있습니다. 이 경우, 아주 작은 CSS가 추가되었지만 다른 항목은 추가되지 않았습니다.

이러한 Codepen에는 JavaScript가 포함되어 있지 않습니다.

공개 상태 전환: open 속성

<details> 요소는 공개 위젯 컨테이너입니다. <summary>는 상위 <details>의 요약 또는 범례입니다. 이 summary가 항상 표시되고 상위 콘텐츠의 나머지 부분의 표시를 전환하는 버튼 역할을 합니다. 상호작용 <summary>를 사용하면 <details>'를 전환하여 자체 라벨이 지정된 요약 동위 요소 표시를 전환합니다. 요소의 open 속성으로 설정하시기 바랍니다.

open 속성은 불리언 속성입니다. 있는 경우 값이든 값이 결여되든 관계없이 모든 <details>가 사용자에게 표시됩니다. open 속성이 없으면 <summary>의 콘텐츠만 표시됩니다.

open 속성은 사용자가 컨트롤과 상호작용할 때 자동으로 추가 및 삭제되므로 CSS에서 다음과 같이 사용할 수 있습니다. 상태에 따라 요소의 스타일을 다르게 지정합니다.

각각 <summary> 하위 요소가 있는 여러 <details> 요소의 목록으로 아코디언을 만들 수 있습니다. open 속성 생략 HTML에 삽입하면 <details>가 모두 접히거나 닫히며 페이지가 로드될 때 요약 제목만 표시됩니다. 각 제목은 상위 <details>의 나머지 콘텐츠를 여는 데 사용됩니다. HTML에 open 속성을 포함하면 <details> 페이지가 로드될 때 콘텐츠가 보이는 상태로 렌더링됩니다.

접힌 상태의 숨겨진 콘텐츠는 일부 브라우저에서는 검색할 수 있지만, 접힌 콘텐츠가 있더라도 다른 브라우저에서는 검색할 수 없습니다. 는 DOM의 일부가 아닙니다. Edge 또는 Chrome에서 검색하면 검색어가 포함된 세부정보가 펼쳐져 표시됩니다. 확인할 수 있습니다 이 동작은 Firefox 또는 Safari에서는 복제되지 않습니다.

<summary>는 <details> 요소의 첫 번째 하위 요소여야 하며 나머지에 대한 요약, 자막 또는 범례를 나타내야 합니다. 이 값이 중첩되어 있는 상위 <details> 요소의 콘텐츠를 반환합니다. <summary> 요소의 콘텐츠는 모든 제목이 될 수 있습니다. 단락 내에서 사용할 수 있는 콘텐츠, 일반 텍스트 또는 HTML을 포함할 수도 있습니다.

요약 마커 전환

이전의 두 Codepen에서 inline-start 확인할 수 있습니다 공개 위젯은 일반적으로 회전 (또는 비틀림)되는 작은 삼각형을 사용하여 화면에 표시됩니다. 는 영업 중/닫힘 상태를 나타내며 삼각형 옆에 라벨이 표시됩니다. <summary> 요소의 콘텐츠는 공개 위젯에 라벨을 지정합니다. 각 섹션 상단의 회전 화살표는::marker <summary> 요소 <summary> 요소는 목록 항목과 마찬가지로 list-style 약식 속성 및 장기 속성(list-style-type 포함)을 포함하는 것이 좋습니다. 삼각형에서 사용되는 마커를 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를 사용하는 유일한 예입니다. 다른 공개 위젯을 열었습니다.

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

이해도 확인

세부정보 및 요약에 대한 지식을 테스트합니다.