UI Code Lab

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

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

요즘 웹사이트 보면 인터페이스에 애니메이션이 살짝 들어가는 것만으로도 확 다르게 느껴지잖아요? 근데 막상 구현하려면 GSAP, Framer Motion 같은 라이브러리부터 생각나는 경우가 많죠. 그런데 라이브러리 없이도 CSS와 자바스크립트만으로 충분히 부드럽고 자연스러운 애니메이션을 만들 수 있다는 거, 알고 계셨나요? 오늘은 정말 가볍게, 하지만 확실하게 애니메이션을 구현할 수 있는 방법을 알려드릴게요! ✅ 왜 굳이 CSS + JS로 애니메이션을 만들까?간단히 말하면:가볍고 빠릅니다! 로딩 속도 빠른 웹이 유리하니까요.조절이 자유롭습니다! CSS로 모양 만들고 JS로 상황에 따라 제어도 가능해요.브라우저 호환도 괜찮아요! 대부분의 최신 브라우저에서 아주 잘 지원됩니다.예쁘면서도 최적화된 웹을 만들..

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

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

모달은 UI에서 자주 쓰이는 컴포넌트지만, 접근성까지 챙긴 구현은 생각보다 드뭅니다. 이 글에서는 기본적인 바닐라 자바스크립트 모달 구현법부터, 스크린리더와 키보드 사용자도 고려한 접근성 개선 포인트까지 다뤄봅니다. 실무에 바로 적용할 수 있는 예제 코드도 함께 제공하니, 복잡한 프레임워크 없이 순수 JS로도 충분히 멋진 접근성 모달을 만들어보세요! ✨ 기본 모달 구현간단한 자바스크립트로 버튼 클릭 시 모달을 띄우고 닫는 기본 구조입니다. ✅ HTML 구조 모달 열기 모달 제목 모달 내용입니다. 닫기 ✅ JS 기본 로직 const openBtn = document.getElementById('openModal');const closeBtn = document.getElementB..