나눔웹 UI/UX 꿀팁
상단 메뉴에 제목이 가려진다고요? '부드러운 스크롤' 마법의 2줄
랜딩 페이지에서 상단 메뉴(예: '회사소개', '오시는길')를 클릭했을 때, 화면이 뚝! 끊기며 순간 이동하거나, 이동한 곳의 제목이 상단에 고정된 메뉴바(헤더)에 파묻혀 안 보이는 현상 겪어보셨나요?
과거에는 이를 고치기 위해 복잡한 자바스크립트를 짜야 했지만, 이제는 순수 CSS 단 2줄로 아주 우아하게 해결할 수 있습니다.
💡 왜 제목이 메뉴바 밑으로 숨어버릴까요?
브라우저는 해당 섹션의 가장 윗부분(Top 0)을 화면의 맨 꼭대기에 무조건 맞추려고 합니다. 이때 상단에 떠 있는 '고정 메뉴바'의 두께를 브라우저가 인식하지 못하기 때문에, 메뉴바 두께만큼 제목이 덮여버리는 것입니다.
1. 고급스러운 이동: 부드러운 스크롤 (Smooth Scroll)
클릭 시 뚝 끊기는 딱딱한 화면 전환 대신, 스르륵 미끄러지듯 이동하는 애니메이션을 줍니다. 전체 문서(html)에 적용하면 모든 링크 이동이 고급스러워집니다.
/* 스크롤이 스무스하게 스르륵 이동합니다 */
html {
scroll-behavior: smooth;
}
2. 가려짐 방지: 스크롤 패딩 (Scroll-padding)
가장 중요한 마법의 속성입니다. 브라우저에게 "도착 지점에 멈출 때, 상단 고정 메뉴바 두께(예: 80px)만큼은 공간을 띄워두고 멈춰라!"라고 지시하는 명령어입니다.
/* 고정된 헤더 높이만큼 띄우고 멈추게 하는 마법의 속성 */
html {
scroll-behavior: smooth;
/* 본인 웹사이트의 상단 메뉴바 높이만큼 픽셀(px)을 적어주세요 */
scroll-padding-top: 80px;
}
단 2줄의 코드가 웹사이트의 '급(Class)'을 바꿉니다.
나눔웹은 고객의 동선을 방해하는 모든 요소를 완벽하게 계산하여,
시각적으로 가장 안정적이고 매끄러운 1%의 디테일을 완성합니다.