UI Code Lab

오늘은 웹에서 자주 쓰이는 파일 탐색기 형태의 트리 구조 UI를 직접 만들어보겠습니다. 다음과 같은 기능을 포함할 거예요: 3단계(3 Depth) 트리 구조폴더/파일 유니코드 아이콘 적용클릭 시 펼치기/접기 기능간결하고 재사용 가능한 코드 🛠️ 트리 UI 구현 코드 ✅ HTML ▸ 📁 루트 ▸ 📁 자식1 📄 자식1-1.txt ▸ 📁 자식1-2 📄 자식1-2-1.png 📄 자식1-2-2.pdf 📄 자식2.txt ✅ CSS ul { ..

🧭 웹 UI를 다루는 기본기 – 탭 기능부터 탄탄하게웹사이트를 처음 방문한 사용자가 가장 먼저 접하는 UI 요소 중 하나가 탭 메뉴입니다. 정보가 많을수록 사용자에게 복잡하게 느껴지기 쉬운데, 탭은 이런 내용을 주제별로 나눠 가독성과 경험을 동시에 잡을 수 있는 훌륭한 도구예요. 오늘은 순수 바닐라 자바스크립트로 탭 기능을 만드는 방법과 함께 접근성(Accessibility)까지 챙기는 팁을 소개합니다. 🎯 탭 UI란?탭 메뉴는 여러 정보 블록을 겹쳐두고, 사용자가 클릭하는 탭에 따라 해당 콘텐츠를 보여주는 구조입니다. FAQ, 제품 사양, 멤버 프로필, 카테고리 구분 등 다양한 상황에 활용되죠. 🧱 HTML 구조부터 준비하기먼저 탭 버튼과 콘텐츠 영역을 HTML로 구성합니다. 탭 1..