UI Code Lab

요즘 웹사이트를 보면 다크 모드 기능이 기본처럼 탑재되어 있죠. 눈의 피로를 줄이고, 사용자의 환경에 맞춰 테마를 바꿀 수 있는 다크 모드 토글 기능은 UX를 높이는 데 매우 효과적입니다. 이번 글에서는 라이브러리 없이 바닐라 JavaScript와 CSS 변수만으로 다크 모드 토글 기능을 구현하는 방법을 소개합니다. ✅ 구현 목표버튼 클릭 시 라이트 ↔ 다크 모드 전환CSS 변수(--color, --bg)를 활용한 테마 스타일링JavaScript로 data-theme 속성 제어로컬 스토리지에 사용자 테마 저장 🧱 HTML 구조 input[type="checkbox"]로 토글 기능 구현label과 span.slider로 스타일링 🎨 CSS 스타일 :root { --bg-color: #ffff..

웹 UI에서 사용자와의 상호작용을 자연스럽게 만드는 방법 중 하나가 바로 드래그 앤 드롭 인터페이스(Drag and Drop UI) 입니다. 파일 첨부, 리스트 정렬, 대시보드 구성 등 다양한 실무 사례에서 사용되는 이 기능은 사용자 경험(UX)을 크게 향상시킬 수 있습니다. 이 글에서는 바닐라 자바스크립트(Vanilla JavaScript)를 활용하여 다음 세 가지 실전 사례를 중심으로 드래그 앤 드롭 UI를 구현해 보겠습니다. ✅ Gmail 스타일의 파일 첨부 드롭존✅ TODO 앱에서 할 일 순서 변경 기능✅ 대시보드 위젯 위치 이동 UI 📂 1. 파일 첨부 드롭존 UI – Gmail 스타일 구현 드래그 앤 드롭 방식으로 파일을 첨부할 수 있는 UI는 이메일, 게시판, 관리자 페이지 등에서 많이 사..

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