반응형
<details>
<summary>이 기능을 사용하면 숨겨진 메뉴를 드롭다운 형식으로 나타나게 할 수 있다.</summary>
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li><a href="https://www.google.com/">구글 바로가기</a></li>
<li><a href="https://www.tistory.com/">티스토리 바로가기</a></li>
<li><a href="https://www.daum.net/">다음 바로가기</a></li>
</ul>
</details>
굳이 힘들게 드롭다운을 구현하지 않아도 간단한 것은 이 태그들을 이용하면 간단한 드롭다운 메뉴는 구현할 수 있을 듯 하다. 다만, 이 태그 내에 숨겨진 태그 요소들은 비디오 판독기를 필요로 하는 사람에게 친화적인 요소가 아니라고 하므로 사용에 주의가 필요해 보인다.
-- 자세한 사용법은 아래 링크 참고 하자--
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
<summary>: The Disclosure Summary element - HTML: HyperText Markup Language | MDN
The <summary> HTML element specifies a summary, caption, or legend for a <details> element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.
developer.mozilla.org
반응형
'HTML & CSS' 카테고리의 다른 글
| [html/css] js 코드 없는 아코디언 "클릭하면 스르륵 답변창이 나오는 게시판?" (0) | 2023.02.25 |
|---|---|
| [CSS] rem, em 의 차이 (0) | 2023.02.20 |
| [css]3d 카드 뒤집기 (0) | 2023.01.18 |
| [css] 태그 가운데 정렬 하는 법 (0) | 2022.12.27 |
| [html] 비디오 태그에서 자동 플레이가 안 될 경우 해결책 (0) | 2022.12.25 |
