대화형 콘텐츠에 대해 공부를 하다가 details 태그를 처음 보게되었는데
마침 <details>와 <summary>태그가 한 번도 만들어보지 못했던 아코디언 UI를 만드는 데 사용하는 태그여서 바로 실습을 해보았다.
콘텐츠 카테고리 - 웹 개발자 안내서 | MDN
모든 HTML 요소는 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한 가지 이상에 속합니다. 콘텐츠 카테고리는 느슨한 관계로 서로 간에 어떤 관계를 형성하지는 않지만, 카테고리에서 공유하
developer.mozilla.org
See the Pen Untitled by yuran (@rubberduck12345) on CodePen.
1개짜리 아코디언 UI는 <details>와 <summary>와 <p>태그만 단독으로 사용하면 된다.
div 태그로 위에 있는 details 태그를 여러개 묶으면 어러개의 아코디언 메뉴를 만들 수 있다.
'웹개발' 카테고리의 다른 글
| click 이벤트 함수 - 이벤트 버블링 해결 방법, stopPropagation (0) | 2023.01.11 |
|---|---|
| transform 속성 translate, scale, rotate 변환 함수 예시 (0) | 2022.12.05 |
| 딤드(deemed) 레이어 팝업에 어두운 배경 적용하기 (0) | 2022.11.23 |
| [메모] React 리액트 (1) | 2022.11.07 |
| stacking context와 z-index 정렬 순서 이해하기 (0) | 2022.11.02 |
