HTML5 `` 및 ``를 사용하여 축소 가능한 Div를 만드는 방법은 무엇입니까?

"HTML 및 CSS를 사용하여 접을 수 있는 div를 만드는 방법"

접을 수 있는 div는 일반적으로 웹 페이지에 동적이고 조직화된 콘텐츠를 표시하는 데 사용됩니다. . 일반적으로 이러한 div에는 사용자 상호 작용 시 확장 및 축소할 수 있는 헤더와 숨겨진 본문이 포함되어 있습니다. CSS만으로 축소 가능한 div를 만드는 것은 특히 깨끗하고 간단한 코드베이스를 유지 관리하는 데 편리할 수 있습니다.

:target 의사 클래스

관련 CSS 축소 가능 div에 대한 초기 접근 방식 특정 요소가 대상 속성(예: )에 의해 연결될 때 스타일을 활성화하는 :target 의사 클래스를 활용합니다. 그러나 이 기술을 사용하려면 여러 개의 축소 가능한 요소에 대해 상당한 반복이 필요하므로 CSS 코드가 비대해집니다.

HTML5

및 <요약> 태그

대안적이고 우아한 솔루션은 HTML5

및 <요약> 태그. <요약> 요소는 전환 가능한 헤더를 나타내고

요소는 접을 수 있는 콘텐츠를 캡슐화합니다. 이 접근 방식을 사용하면 맞춤 JavaScript 또는 복잡한 CSS가 필요하지 않으므로 접을 수 있는 div를 만드는 프로세스가 크게 단순화됩니다.

예제 코드

다음은 <의 사용법을 보여주는 예입니다. ;세부정보> 및

:

<code class="html"><details>
  <summary>This is the collapsible header</summary>
  <div class="content">This is the collapsible body</div>
</details></code>

브라우저 호환성

및 <요약> 태그는 편리한 솔루션을 제공하므로 브라우저 호환성을 고려해야 합니다. Chrome, Firefox, Safari를 포함한 최신 브라우저에서 지원됩니다. 그러나 모든 브라우저가 동일한 동작으로 렌더링할 수는 없습니다.

광범위한 브라우저 지원을 위해 필요한 경우 details-polyfill과 같은 폴리필을 사용할 수 있습니다.

위 내용은 HTML5 `` 및 ``를 사용하여 축소 가능한 Div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!