UI Code Lab

웹사이트를 이용하는 환경이 다양해지면서, 이용자들은 밝고 화려한 인터페이스보다 눈에 편안한 어두운 테마를 선호하는 경우가 많아졌습니다. 특히 밤 시간이나 조명이 낮은 곳에서 접속할 경우, 화면이 지나치게 밝으면 시야에 부담을 줄 수 있기 때문이죠. 이번 글에서는 순수 자바스크립트(바닐라 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..

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