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>
<details><summary>Click Detail</summary> <p>- Test Page.</p> <p>Sample Page Detail</p> <p><button>can be Unse Button</button></p> </details>행결과 예)
Click Detail
- Test Page.
Sample Page Detail
'개발언어 > HTML' 카테고리의 다른 글
| HTML button Tag (0) | 2016.10.21 |
|---|---|
| HTML tag iframe (0) | 2016.09.22 |
| HTML5 Audio Tag (0) | 2016.09.09 |
| HTML video 태그(HTML5) (0) | 2016.09.09 |
| HTML style Tag 사용법 (0) | 2016.07.05 |
