sliver__

이번 글에서는 지난 글에서 만든 HTML 구조에 CSS Grid와 Flexbox를 결합하여 아코디언 항목(layout)을 완성하는 방법을 살펴봅니다. 또한, JavaScript 없이 CSS 클래스만으로 열림(open) 상태를 제어하는 트릭을 상세히 다룹니다.1. .item 컨테이너 스타일링그림자(Shadow).item { box-shadow: 0 0 10px rgba(0,0,0,0.1);}내부 여백(Padding).item { padding: 24px;}상단 강조선열린(open) 상태에만 초록색 4px border-top 추가2. CSS Grid로 3열 레이아웃 구성.item에 Grid 적용첫 번째 열(auto): 번호 너비두 번째 열(1fr): 제목과 확장 영역세 번째 열(auto): 아이콘.ite..