HTML5 & lt; 세부 사항을 어떻게 사용합니까? & gt; 및 & lt; 요약 & gt; 접을 수있는 컨텐츠를 생성하는 요소?

html5 <details></details> 및 <summary></summary> 요소를 사용하는 방법은 접을 수있는 콘텐츠를 생성합니다.

HTML5 <details></details> 및 <summary></summary> 요소는 접을 수있는 컨텐츠를 만들 수있는 간단하고 의미적인 방법을 제공합니다. <details></details> 요소는 접을 수있는 컨텐츠의 컨테이너 역할을하는 반면 <summary></summary> 요소는 클릭 할 때 <details></details> 요소 내의 컨텐츠의 가시성을 전환하는 제목 또는 레이블을 제공합니다.

작동 방식은 다음과 같습니다.

• <summary></summary> : 이 요소는 <details></details> 요소 내에서 필요하며 컨텐츠를 보여 주거나 숨기기위한 제어 역할을합니다. <summary></summary> 요소의 텍스트 내용은 접을 수있는 섹션의 제목 또는 레이블로 표시됩니다.
• <details></details> : 이 요소는 <summary></summary> 요소와 접을 수있는 모든 컨텐츠를 포함합니다. 페이지가로드되면 <details></details> 요소 내의 내용이 처음에는 기본적으로 숨겨져 있습니다. <summary></summary> 요소를 클릭하면 컨텐츠의 가시성이 전환됩니다.

예:

 <code class="html"><details> <summary>Click to Expand</summary> <p>This is the collapsible content. You can include any HTML content here, such as paragraphs, images, lists, etc.</p> </details></code>

이 예에서 "확장하려면 클릭"을 클릭하면 텍스트 단락이 표시됩니다. 다시 클릭하면 콘텐츠가 무너집니다. 브라우저는 가시성의 토글링을 자동으로 처리합니다. 기본 기능에는 JavaScript가 필요하지 않습니다.

CSS를 사용한 <details></details> 및 <summary></summary> 요소 스타일

CSS를 사용하여 <details></details> 및 <summary></summary> 요소의 모양을 완전히 사용자 정의 할 수 있습니다. 이를 통해 접을 수있는 콘텐츠를 전체 웹 사이트 디자인과 일치시킬 수 있습니다. 토글의 모양을 변경하기 위해 <summary></summary> 요소를 스타일링 할 수 있으며 <details></details> 요소를 스타일링하여 컨텐츠가 확장되고 붕괴 될 때 컨텐츠의 모양을 제어 할 수 있습니다.

예:

 <code class="css">details { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; } summary { cursor: pointer; background-color: #f0f0f0; padding: 5px; margin-bottom: 5px; } details[open] summary { /* Style when open */ background-color: #ddd; } details[open] { /* Style the details when open */ border-color: #aaa; }</code>

이 CSS는 테두리와 패딩을 <details></details> 요소에 추가하고 배경색과 패딩으로 <summary></summary> 요소를 스타일로 만들고 <details></details> 요소가 열릴 때 ( [open] 속성 선택기 사용)를 사용하면 다른 스타일을 추가합니다. 웹 사이트의 디자인에 맞게 이러한 스타일을 조정할 수 있습니다. 스타일링 할 때 접근성을 염두에 두어 충분한 대비와 명확한 시각적 지표를 보장해야합니다.

<details></details> 및 <summary></summary> 사용할 때 접근성 고려 사항

<details></details> 및 <summary></summary> 는 붕괴 가능한 컨텐츠를 만들 수있는 의미적이고 접근 가능한 방법을 제공하지만 몇 가지 접근성 고려 사항이 있습니다.

• ARIA 속성 : 엄격하게 필요하지는 않지만 ARIA 속성을 사용하면 스크린 리더 및 기타 보조 기술의 접근성을 향상시킬 수 있습니다. 예를 들어, <summary></summary> 요소에 설명적인 aria-label 추가하면 추가 컨텍스트를 제공 할 수 있습니다.
• 키보드 내비게이션 : 키보드를 사용하여 접을 수있는 컨텐츠를 탐색 할 수 있는지 확인하십시오. 기본 브라우저 동작은 이미이를 제공하지만 사용자 정의 스타일은이를 방해해서는 안됩니다.
• 명확한 시각적 표시기 : 명확한 시각적 신호를 사용하여 다른 배경색 또는 아이콘과 같은 개방/닫힌 상태를 나타냅니다. 시각 장애가있는 사용자에게 충분한 색상 대비를 보장하십시오.
• 대체 텍스트 : <summary></summary> 내에 아이콘을 사용하는 경우 화면 리더에게 적절한 대체 텍스트를 제공하십시오.

<details></details> 및 <summary></summary> 의 브라우저 호환성 문제

일반적으로 <details></details> 및 <summary></summary> 는 좋은 브라우저 지원을합니다. 그러나 이전 브라우저는 올바르게 렌더링하지 않을 수 있습니다. 이전 브라우저의 경우 JavaScript PolyFill 또는 폴백 메커니즘이 필요할 수 있습니다. 최신 브라우저 (Chrome, Firefox, Safari, Edge)는 기본 HTML 및 CSS를 넘어서 추가 작업을 요구하지 않고 기본적으로 이러한 요소를 지원합니다. 일관된 행동과 접근성을 보장하기 위해 다양한 브라우저 및 보조 기술에서 구현을 항상 테스트하십시오. Caniuse.com과 같은 도구를 사용하여 다른 브라우저 버전에서 이러한 요소에 대한 지원을 확인하십시오.

위 내용은 HTML5 & lt; 세부 사항을 어떻게 사용합니까? & gt; 및 & lt; 요약 & gt; 접을 수있는 컨텐츠를 생성하는 요소?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!