HTML Tag <details>

 

HTML <details > Tag

<details >를 사용하면 항목 펼쳐 보이기 기능을 실행 할 수 있다.

Syntax

The <details> tag is written as <details></details> with a <summary> tag inserted between the start and end tag. The expandable/collapsible content follows the <summary> tag (but is also contained between the start and end tags of the <details>element).

Like this:

<details>
<summary>Click to open</summary>
<p>Collapsible content...</p>
</details>
 

사용예

<!DOCTYPE html>
<title>Example</title>
<style>
details {color:#999;}
details > summary {font-size:larger;color:#666;}
details[open] > summary { color:black;font-weight:bold; }
div {width:210px;padding:5px;background:#eee;border:1px solid #ccc;}
</style>
<div>
<details>
<summary>General:</summary>
<p>Kind: JPEG Image<br>
Size: 8,697 bytes (12 KB on disk)<br>
Created: 4 August 2011 2:20 pm<br>
Modified: 4 August 2011 2:20 pm
</p>
</details>
<hr>
<details>
<summary>Name & Extension:</summary>
<p><input name="fileName" value="phi-phi-200x150.jpg"></p>
<p><input name="hideExt" type="checkbox" value="">Hide Extension</p>
</details>
<hr>
<details>
<summary>Preview:</summary>
<img src="/pix/places/phi-phi-200x150" alt="Photo of Phi Phi">
</details>
</div>

 

image

“HTML Tag <details>”의 9개의 댓글

  1. Attractive part of content. I just stumbled upon your web site and in accession capital to say that I acquire actually loved account
    your weblog posts. Any way I’ll be subscribing in your augment and even I achievement you
    get right of entry to constantly quickly.

  2. I’m really inspired with your writing abilities as smartly as with
    the layout to your weblog. Is this a paid topic or did you modify it your self?
    Anyway stay up the nice quality writing, it’s rare to peer a nice weblog like this one these days..

  3. When I originally commented I clicked the “Notify me when new comments are added” checkbox
    and now each time a comment is added I get three e-mails with the same comment.
    Is there any way you can remove people from that service? Thanks
    a lot!

  4. Hey there! Quick question that’s completely off topic.
    Do you know how to make your site mobile friendly?
    My site looks weird when browsing from my apple iphone. I’m trying to find
    a theme or plugin that might be able to correct this problem.

    If you have any recommendations, please share. Thanks!

  5. Do you have a spam problem on this blog; I also am a blogger, and I was wanting
    to know your situation; we have developed some nice practices
    and we are looking to exchange methods with other folks, please shoot
    me an email if interested.

댓글 남기기