UI Code Lab

웹 프로젝트를 진행하다 보면 탭 전환 기능을 구현할 일이 자주 생깁니다. 처음에는 단순히 fetch로 HTML을 불러와서 innerHTML에 넣고, 탭 클릭 시 보여주기/숨기기만 하면 충분해 보이죠. 하지만 프로젝트가 커질수록 코드가 중복되고, 전역 변수 충돌이나 페이지별 관리의 불편함 같은 문제가 하나둘씩 드러납니다. 이런 상황에서 필요한 건 공통 로직을 모듈화하고, 각 페이지에서는 최소한의 설정만 남기는 구조화입니다. 1. 문제 상황탭 전환 로직을 페이지마다 중복 작성 → 유지보수 어려움전역 변수(cache, loaded)가 다른 스크립트와 충돌 가능성페이지마다 다른 파일맵을 관리해야 하는데, 공통 로직과 섞여 있어서 불편 2. 해결 전략공통 로직은 하나의 모듈로 분리페이지별로는 fileMap만..

웹사이트를 이용하는 환경이 다양해지면서, 이용자들은 밝고 화려한 인터페이스보다 눈에 편안한 어두운 테마를 선호하는 경우가 많아졌습니다. 특히 밤 시간이나 조명이 낮은 곳에서 접속할 경우, 화면이 지나치게 밝으면 시야에 부담을 줄 수 있기 때문이죠. 이번 글에서는 순수 자바스크립트(바닐라 JS)만으로 간단하면서도 직관적인 다크 모드 토글 기능을 만드는 방법을 안내합니다. 추가 라이브러리 없이 구현할 수 있고, 사용자 설정을 기억하는 기능까지 포함되어 있어 실무에도 충분히 적용할 수 있습니다. 🧱 HTML 구성 – 가장 단순한 시작먼저 테마 전환 버튼을 하나 추가해줍니다. 🌞 / 🌚 모드 전환 이 버튼은 라이트/다크 모드 전환을 담당하며, id 속성을 통해 스크립트에서 쉽게 접근할 수 있도록 설정합..

웹사이트를 읽다 보면 상단에 얇은 바가 스르륵 차오르는 걸 본 적 있으신가요? 이건 바로 스크롤 퍼센트 기반 프로그레스 바(progress bar)입니다. 사용자가 페이지를 얼마나 읽었는지 직관적으로 보여주는 UI로, 사용자 경험(UX)을 높이는 데 효과적이에요. 이번 글에서는 라이브러리 없이 바닐라 JavaScript만으로 이 기능을 구현하는 방법을 소개합니다. 🎯 구현 목표사용자가 스크롤한 비율에 따라 상단 바의 너비가 실시간으로 변함HTML, CSS, JavaScript만 사용반응형 웹에서도 자연스럽게 작동 🧩 HTML 구조 progress-container: 전체 프로그레스 바 영역progress-bar: 실제 너비가 변하는 바 요소 🎨 CSS 스타일링 .progress-container..

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

🧭 왜 직접 날짜 선택기를 만들어야 할까? 대부분의 웹 프로젝트에서는 날짜 입력이 필요한 경우가 많습니다. 물론 input [type="date"] 를 사용할 수도 있지만, 브라우저마다 디자인이 다르고 커스터마이징이 어렵다는 단점이 있죠. 그래서 이번 글에서는 순수 자바스크립트로 날짜 선택기 UI를 직접 구현해 보겠습니다. 🛠️ 구현 목표달력 UI를 동적으로 생성현재 월 기준으로 날짜 표시이전/다음 달 이동 기능날짜 클릭 시 선택된 날짜 출력 🧱 HTML 구조 ◀ ▶ 일월화수목금토 선택한 날짜: 없음 🎨 CSS 스타일 (간단 버전) .datepicker { width: 300px; border: 1..

📌 개요 Toast 알림은 사용자에게 빠르고 간단한 피드백을 제공하는 UI 요소입니다. 예를 들어 “저장되었습니다”처럼 화면 상단이나 하단에 짧게 나타나는 알림 말이죠. 이 글에서는 바닐라 자바스크립트(Vanilla JS)만으로 재사용 가능한 toast 컴포넌트를 만드는 법을 소개합니다. ✅ 순수 JS로 가볍게 구현✅ 위치, 지속 시간, 애니메이션 설정 가능✅ 스크린 리더 사용자도 고려한 접근성 💡 Toast UI란?Toast는 화면 한쪽에 몇 초간 표시되는 일시적인 메시지입니다. 사용자가 별도의 조작 없이 피드백을 받을 수 있어 UX 향상에 효과적이죠. 📈 자주 쓰이는 상황 예시폼 제출 후 “제출이 완료되었습니다”복사 버튼 클릭 시 “클립보드에 복사됨”저장, 삭제, 오류 안내 등 🛠️ HTML..