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:
1 2 3 4 | <details><summary>Click to open</summary><p>Collapsible content...</p></details> |
1 | |
사용예
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!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 ImageSize: 8,697 bytes (12 KB on disk)Created: 4 August 2011 2:20 pmModified: 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> |
1 2 3 4 5 | <i><details><summary>Click Detail</summary><p></p></i><p>- Test Page.</p><p>Sample Page Detail</p><p><button>can be Unse Button</button></p></details><p></p> |
Click Detail
- Test Page.
Sample Page Detail
