목차나 "서비스 안내" 버튼을 눌렀는데, 제목이 고정 헤더 아래로 숨어 보이지 않았던 적 있으신가요?
고정·스티키 메뉴가 있는 페이지에서 흔한 문제입니다. scroll-margin-top을 앵커 대상에 두면, 레이아웃 여백은 그대로 두고 스크롤 멈춤 위치만 아래로 밀어 제목이 메뉴 아래에 깔끔히 드러납니다.

1. 앵커가 붙는 제목에 scroll-margin-top 넣기

링크 대상이 되는 h2·h3에 id를 두고, 헤더 높이만큼 scroll-margin-top을 줍니다. 헤더가 약 64px라면 12px 정도 여유를 더해 76px처럼 잡으면 제목이 메뉴에 딱 붙지 않습니다.

/* 고정·스티키 헤더 높이 + 살짝 여유 */
:root {
  --header-h: 64px;
}

.article h2[id],
.article h3[id] {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

2. HTML 앵커와 목차 링크 연결

대상 제목에 id를 쓰고, 목차·버튼은 href="#id"로 연결합니다. 자바스크립트 스크롤 보정 없이도 브라우저가 스크롤 마진을 반영합니다. 헤더 높이가 모바일·PC에서 다르면 미디어쿼리로 --header-h만 바꿔 주면 됩니다.

<nav>
  <a href="#pricing">요금 안내</a>
</nav>

<h2 id="pricing">요금 안내</h2>

/* 모바일 헤더가 더 높을 때 */
@media (max-width: 768px) {
  :root { --header-h: 56px; }
}

3. scroll-padding과의 차이, 주의할 점

scroll-padding-top은 스크롤 컨테이너(보통 html) 쪽에 여백을 두는 방식이고, scroll-margin-top은 도착 요소에 붙입니다. 문서 목차처럼 특정 제목만 보정할 때는 마진이 범위가 분명합니다. 둘을 같은 값으로 겹치면 여백이 두 배가 되니, 한쪽에만 맞추는 편이 안전합니다. 또한 [id] 전체에 걸면 숨은 스킵 링크·폼 필드까지 영향이 갈 수 있어, 본문 제목 선택자로 좁히는 것을 권합니다.