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는 사용자 경험에 큰 영향을 줍니다. 특히 CAD와 같은 기술 자료를 제공하는 페이지에서는 “지금 내가 어떤 단계에 있는지”를 직관적으로 인식할 수 있어야 하죠. 이번 글에서는 JavaScript와 CSS만으로 구현하는 진행 단계 타임라인 UI를 소개합니다. 💡 직접 활용한 예시는 현재 CAD 페이지의 흐름STEP 1: CAD 파일 준비 >> STEP 2: CAD 파일 검토 >> STEP 3: 승인 대기 >> STEP 4: 다운로드 가능 STEP 1과 STEP 2는 이미지가 이미 등록된 완료 단계로 같은 색상으로 그룹화하고, 승인 대기 상태인 STEP 3는 강조 애니메이션으로 표현해 사용자의 주의를 끌 수 있도록 구성해 봤습니다. ✅ 주요..