SW/HTML

HTML : HTML5 Details Tag 사용 방법 : 예제, 구현

얇은생각 2020. 7. 20. 07:30
반응형

HTML : HTML5 Details Tag 사용 방법 : 예제, 구현

 

HTML5와 함께 제공되는 새로운 기능 중 일부에 대해 알아보았습니다. HTML5 Form 및 HTML5 placeholders와 함께 몇 가지 새로운 기능을 살펴 보았습니다.

오늘의 튜토리얼에서는 Details라는 또 다른 HTML5 태그를 조사 할 것입니다. 세부 정보 태그는 클릭을 쉽게 구현하여 더 많은 기능을 표시하는 데 사용됩니다.

태그 안에 제목과 내용을 추가 할 수 있으며, 사용자가 제목을 클릭 할 때까지 내용이 숨겨지고 내용이 표시됩니다. 제목을 클릭하면 토글에서 작동하므로 내용이 다시 숨겨집니다. 이 포스팅에서는 HTML5에서 이 기능을 사용하는 것이 얼마나 쉬운 지, jQuery를 사용하여 다시 작성하는 방법에 대해 학습합니다. 

detalis 태그에는 클릭하면 나머지 내용이 표시되는 제목이 있습니다. detalis 태그의 제목을 summary라고 하며 마크업은 다음과 같습니다.

 

 

<details>

<summary>Title of the details tag</summary>

</details>

 

 

 

이제 summary 태그 이외의 것은 제목을 클릭 할 때 표시되는 내용입니다.

 

<details>

<summary>Title of the details tag</summary>
<p>This text is displayed when you click the above text.</p>

</details>

 

 

 

만들기가 매우 간단하고 매우 유용한 기능이 될 수 있습니다. 데모를 실제로 보십시오. 현재 이 태그를 지원하는 브라우저를 확인하려면 웹 사이트를 확인해보세요. 이 detalis 태그를 작성할 때 현재 웹킷 브라우저에서만 지원됩니다.

https://caniuse.com/#search=details

 

Can I use... Support tables for HTML5, CSS3, etc

About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development commu

caniuse.com

 

 

 

Details Tag의 jQuery Version 

현재 HTML5의 문제점은 사람들이 여전히 IE6-8과 같은 오래된 브라우저를 사용하고 있기 때문에 완전히 지원되지 않는다는 것입니다. details 태그는 많은 브라우저에서 지원되지 않는 항목이므로 jQuery 대안을 사용할 수 있습니다.

이 기능은 제목의 클릭 이벤트에 대한 내용에 적용 할 수있는 slideToggle () 메서드로 인해 쉽게 수행 할 수 있는 기능입니다. 이 예제에서는 HTML을 변경해야합니다.

 

<div class="jQueryDetailsExample">
    <h2>Click Here For jQuery Version</h2>
    <p>This is how it's done using jQuery</p>
</div>

 

 

 

jQuery를 추가하여 details 태그와 동일하게 수행해야 하므로 컨텐츠인 단락을 숨기고 시작하여 표시를 전환해야합니다. 그런 다음 h2 태그의 클릭 이벤트에서 단락을 토글 할 수 있습니다. jQuery에서 details 기능을 사용하려면 아래 구문을 참고하세요.

 

$(document).ready(function(){
    $(".jQueryDetailsExample p").hide();

    $(".jQueryDetailsExample h2").click(function(){
        $(this).siblings("p").slideToggle();
    });
})
반응형