CSS Academy · 강의

scroll-behavior: smooth

scroll-behavior를 사용해 앵커 링크와 프로그래밍 방식의 스크롤에 부드러운 스크롤을 적용합니다.

scroll-behavior: smooth은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

scroll-behavior란 무엇인가요

scroll-behavior는 탐색으로 발생하는 스크롤(앵커 링크, JavaScript scrollTo())을 부드럽게 애니메이션할지 즉시 이동할지 제어합니다.

scroll-behavior: smooth

html 또는 body 요소에 scroll-behavior: smooth를 설정하면 페이지의 모든 앵커 링크 탐색이 부드럽게 애니메이션됩니다:

  <p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>

즉시 이동과 부드러운 이동

값:

auto(기본값): 즉시 이동
smooth: 대상까지 애니메이션하며 스크롤

앵커 링크 탐색

부드러운 스크롤을 사용하면 <a href="#contact"> 같은 링크를 클릭할 때 즉시 이동하지 않고 id="contact"인 요소까지 부드럽게 스크롤됩니다.

  <nav>
    <a href="#about">About</a>
    <a href="#work">Work</a>
    <a href="#contact">Contact</a>
  </nav>
  <section id="about"><h3>About</h3></section>
  <section id="work"><h3>Work</h3></section>
  <section id="contact"><h3>Contact</h3></section>

부드러운 JavaScript scrollTo()

애니메이션 스크롤을 위해 JavaScript 스크롤 메서드에 behavior: "smooth"를 전달합니다:

  <pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });

document.querySelector('#section').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});</pre>

prefers-reduced-motion과의 상호 작용

부드러운 스크롤은 멀미를 유발할 수 있습니다. 움직임 감소를 선호하는 사용자에게는 항상 비활성화합니다:

  <p>Respects <code>prefers-reduced-motion</code>.</p>

컨테이너의 scroll-behavior

페이지뿐 아니라 스크롤 가능한 모든 컨테이너에 적용합니다:

  <div class="tabs-panel">
    <div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
  </div>

제한 사항

CSS scroll-behavior는 스크롤 지속 시간이나 완화 방식을 제어할 수 없습니다. 정밀한 애니메이션 제어가 필요하면 JavaScript 웹 애니메이션 API나 스크롤 플러그인이 포함된 GSAP 같은 라이브러리를 사용합니다.

고정 헤더를 위한 scroll-padding-top

고정 헤더가 앵커 대상을 가릴 때 scroll-padding-top은 오프셋을 추가하여 대상이 헤더 뒤에 숨지 않도록 합니다:

  <p>Anchor targets offset by fixed header height.</p>

scroll-margin과 scroll-padding 비교

scroll-margin은 대상 요소에 직접 오프셋을 추가하고, scroll-padding은 스크롤 컨테이너에 오프셋을 추가합니다. 둘 다 고정 헤더 문제를 해결합니다:

  <div class="section">Section content</div>

접근성 참고 사항

부드러운 스크롤은 사용자 경험을 향상하는 기능입니다. 부드러운 스크롤이 없어도 앵커 탐색이 작동하도록 항상 보장해야 합니다. 기능을 부드러운 스크롤 동작에 의존하지 말고, 시각적 효과를 높이는 용도로만 사용합니다.

빠른 확인

전정기관의 움직임 민감성이 있는 사용자에게 부드러운 스크롤 애니메이션이 비활성화되도록 하려면 어떻게 해야 하나요?

복습

html에 scroll-behavior: smooth를 설정하면 앵커 링크와 JavaScript 스크롤 메서드가 부드럽게 애니메이션됩니다. 고정 헤더 뒤에 스크롤 대상이 가려지지 않도록 scroll-padding-top을 사용합니다. 접근성을 위해 prefers-reduced-motion: reduce 미디어 쿼리 안에서는 항상 부드러운 스크롤을 비활성화합니다.

자주 묻는 질문

“scroll-behavior: smooth” 강의는 무료인가요?

네 — “scroll-behavior: smooth” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“scroll-behavior: smooth”에서 뭘 배우나요?

scroll-behavior를 사용해 앵커 링크와 프로그래밍 방식의 스크롤에 부드러운 스크롤을 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“scroll-behavior: smooth” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← CSS Academy(으)로 돌아가기