html <details> 태그 사용법에 대한 자세한 설명-HTML 튜토리얼-php.cn

html

태그 사용법에 대한 자세한 설명

黄舟

풀어 주다： 2017-06-21 10:34:42

원래의

9594명이 탐색했습니다.

TML5의 새로운

태그를 사용하면 확장 가능하고 접을 수 있는 요소를 생성하여 텍스트나 제목에 숨겨진 정보를 포함할 수 있습니다.

Usage

일반적으로 세부정보는 페이지에 표시되는 콘텐츠를 추가로 설명하는 데 사용됩니다. 표시되는 효과는 jQuery 아코디언 플러그인의 효과와 유사합니다.

대략적인 글은 다음과 같습니다.

<details>
    <summary>Google Nexus 6</summary>
    <p>商品详情：</p>
    <dl>
        <dt>屏幕</dt>
        <dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd>
        <dt>电池</dt>
        <dd>3220 mAh</dd>
        <dt>相机</dt>
        <dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
        <dt>处理器</dt>
        <dd>Qualcomm® Snapdragon™ 805 processor</dd>
    </dl>
</details>

로그인 후 복사

첫 번째는

태그이고, 그 다음에는

라는 제목이 붙습니다. 여기에 있는 내용은 일반적으로 짧고 요약되어 페이지에 표시됩니다. 그런 다음 모든 유형의

HTML 요소를 세부 콘텐츠로 따를 수 있으며, 이는

를 클릭할 때만 표시됩니다.

위 코드의 효과는 다음과 같습니다.

html <details> 태그 사용법에 대한 자세한 설명

자세한 내용은 처음에는 숨겨졌다가 클릭하면 표시됩니다.

open

attribute

물론

태그에 open 속성을 설정하여 기본적으로 확장된

state로 만들 수도 있습니다.

<details open>
    <summary>Google Nexus 6</summary>
    <p>商品详情：</p>
    <dl>
        <dt>屏幕</dt>
        <dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd>
        <dt>电池</dt>
        <dd>3220 mAh</dd>
        <dt>相机</dt>
        <dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
        <dt>处理器</dt>
        <dd>Qualcomm® Snapdragon™ 805 processor</dd>
    </dl>
</details>

로그인 후 복사

이때 기본적으로 세부정보가 펼쳐져 있으며, 제목을 클릭하면 접힙니다.

Example

예제는 위와 같습니다. 온라인 버전을 미리 보려면 여기를 클릭하세요.

브라우저 호환성

새로운 HTML5 태그로 인해 브라우저 지원이 이상적이지 않습니다. caniuse의 데이터에 따르면 이 태그는 현재 Chrome, Safari 8+ 및 Opera 26+에서만 지원됩니다.

좋은 소식은 캐니스에서 "UC 브라우저 결과 표시" 옵션을 켜면 국내 UC 브라우저에서도 이 태그를 지원한다는 점입니다.

html <details> 태그 사용법에 대한 자세한 설명