HTML 예제 18 / 20
<details> 는 JavaScript 없이도 클릭으로 펼치고 접을 수 있는 진짜로 동작하는 아코디언 UI입니다. 아래를 직접 클릭해보세요!
details
summary
아코디언
open
💡 이렇게 바꿔보세요
open 속성을 처음부터 붙여두면 페이지 로드시 펼쳐진 상태로 시작해요- 여러 details 를 아코디언(한 번에 하나만 열림)으로 만들려면
name 속성을 같게 주면 됩니다 (최신 브라우저)
- CSS
summary { list-style: none; } 로 기본 화살표를 지우고 나만의 아이콘을 넣을 수 있어요
← HTML 예제 목록