웹 페이지에서 앵커 링크에 URL Fragment를 사용하면 사용자가 페이지의 특정 부분으로 쉽게 이동할 수 있습니다. 하지만 페이지에 고정된 헤더나 다른 요소 때문에 앵커의 목적지가 가려지는 문제가 발생할 수 있습니다. 언뜻 생각하면 자바스크립트가 필요할 것 같지만 CSS의 scroll-margin-top 속성을 활용해 JS 없이 문제를 해결할 수 있습니다.
scroll-margin-top 속성 이해하기
scroll-margin-top 속성은 요소가 뷰포트(화면에 보이는 영역)의 상단에 도달했을 때, 추가적인 여백을 지정할 수 있게 해줍니다.
이 속성은 주로 앵커 태그나 스크롤 위치 조정에 사용됩니다.
적용 방법
우선, 페이지 내에서 이동하고자 하는 앵커 태그(<a href="#section">)와 링크할 요소(ex <div id="section">)을 확인합니다.
해당 요소에 scroll-margin-top 속성을 적용합니다. 예를 들어, #section { scroll-margin-top: 100px; }과 같이 설정할 수 있습니다.
추가로 예제처럼 스크롤 동작을 부드럽게 하려면 scroll-behavior: smooth;를 사용하면 됩니다.