"HTML 및 CSS를 사용하여 접을 수 있는 div를 만드는 방법"
접을 수 있는 div는 일반적으로 웹 페이지에 동적이고 조직화된 콘텐츠를 표시하는 데 사용됩니다. . 일반적으로 이러한 div에는 사용자 상호 작용 시 확장 및 축소할 수 있는 헤더와 숨겨진 본문이 포함되어 있습니다. CSS만으로 축소 가능한 div를 만드는 것은 특히 깨끗하고 간단한 코드베이스를 유지 관리하는 데 편리할 수 있습니다.
:target 의사 클래스
관련 CSS 축소 가능 div에 대한 초기 접근 방식 특정 요소가 대상 속성(예: )에 의해 연결될 때 스타일을 활성화하는 :target 의사 클래스를 활용합니다. 그러나 이 기술을 사용하려면 여러 개의 축소 가능한 요소에 대해 상당한 반복이 필요하므로 CSS 코드가 비대해집니다.
HTML5
대안적이고 우아한 솔루션은 HTML5
예제 코드
다음은 <의 사용법을 보여주는 예입니다. ;세부정보> 및
<code class="html"><details> <summary>This is the collapsible header</summary> <div class="content">This is the collapsible body</div> </details></code>
브라우저 호환성
광범위한 브라우저 지원을 위해 필요한 경우 details-polyfill과 같은 폴리필을 사용할 수 있습니다.
위 내용은 HTML5 `` 및 ``를 사용하여 축소 가능한 Div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!