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

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

 

 

 

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();
    });
})