데일리 챌린지 #7 : 'Recursive' 폴더 트리 📂

Source: Dev.to

미션

폴더 안에 폴더가 있는 디렉터리 트리를 만들고, 이를 열고 닫을 수 있게 합니다. 실제 코드 편집기의 사이드바처럼 보이고 느낌이 나야 합니다.

규칙 🚫

• JavaScript 금지: 스크립트로 “active” 클래스를 토글하거나 클릭 이벤트를 처리하지 않습니다.
• Pure CSS/HTML만 사용: <input type="checkbox"> 를 이용한 Checkbox Hack 으로 각 폴더의 열림/닫힘 상태를 관리합니다.
• 무한 중첩: 스타일은 폴더가 1단계 깊이든 10단계 깊이든 동일하게 작동해야 합니다.

목표 🏆

• 폴더 이름을 클릭하면 내부 파일이 표시되도록 확장됩니다.
• 다시 클릭하면 폴더가 접힙니다.
• 파일과 폴더는 깊이에 따라 적절히 들여쓰기 됩니다.

팁: input:checked + label + ul 인접 형제 선택자를 사용해 숨겨진 체크박스가 활성화된 경우에만 중첩 리스트를 표시하세요!

참여 방법

댓글에 CodePen 혹은 GitHub Repo 링크를 남겨 주세요!

보너스 포인트: 폴더가 열릴 때 📁 와 📂 같은 다른 아이콘으로 교체되게 하세요.

추가 점수: 중첩된 자식 요소를 강조하지 않고 전체 행만 강조하는 “Hover Effect” 를 추가하세요.