UI Code Lab

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

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