UI Code Lab

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

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

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

스크롤을 내리면 메뉴나 헤더가 화면 상단에 고정되어 계속 보이는 경험, 다들 한 번쯤 해보셨죠? 이런 기능은 사용자 탐색 효율을 높이고, 상호작용 요소에 집중도를 높여주는 UI 기법 중 하나예요. 이번 글에서는 position: sticky 와 자바스크립트를 활용해 스크롤 위치에 따라 고정되는 요소(Sticky UI) 를 만드는 방법을 소개합니다. 🎯 구현 목표특정 영역에서 스크롤 시 요소 고정순수 CSS 또는 JS로 구현반응형 웹에서도 유연하게 작동 ✍️ 기본 CSS 방식 – position: sticky 가장 간단한 방식은 CSS의 position: sticky 속성을 사용하는 것입니다. .sticky { position: sticky; top: 0; /* 화면 위에서 얼마나 떨어진 위치에 고정..

최근 웹 UI에서 스크롤에 반응해 요소가 자연스럽게 나타나는 인터랙션은 사용자에게 생동감을 줍니다. 보통 GSAP, ScrollReveal 같은 라이브러리를 활용하곤 하지만, 이번엔 바닐라 JS와 CSS만으로 간결하게 구현하는 방법을 알아봅니다. 🔧 구현 목표스크롤 위치에 따라 요소 등장자연스러운 애니메이션 효과라이브러리 없이 순수 HTML/CSS/JS 사용 ✨ 완성된 UI 시연 이미지(💡예시 이미지로 제공 가능 – 이미지 생성이 필요한 경우 알려주세요!)사용자가 화면을 아래로 스크롤하면, 각 콘텐츠 블록이 순차적으로 부드럽게 등장합니다.하단으로 갈수록 요소가 지연 등장하면서 집중도를 유도합니다. 🧩 코드 구현 ✅ HTML 구조 섹션 제목 이곳에 상세 설명이 들어갑니다. 🎨 CSS 스타일 ...

✅ 개요많은 웹사이트에서 사용되는 풀페이지(Fullpage) 인터페이스는 사용자 경험을 직관적으로 만들고, 콘텐츠에 몰입할 수 있는 구조를 제공합니다. 대표적으로 fullPage.js와 같은 라이브러리가 널리 사용되지만, 순수 JavaScript만으로도 충분히 가볍고 유연하게 구현할 수 있습니다. 이 글에서는 바닐라 JS 기반의 fullpage 웹사이트 UI를 직접 만드는 과정을 예제 중심으로 자세히 소개합니다. 📦 왜 라이브러리 없이 직접 구현할까?성능 최적화: 라이브러리 불포함으로 페이지 로딩 속도 개선커스터마이징 자유도: 내가 직접 만든 코드로 원하는 대로 수정 가능학습 효과: 스크롤 이벤트와 UI 흐름 이해도가 높아짐 🧱 HTML 및 CSS 기본 구조 Section 1 Section 2..