scroll-snap 스크롤 제어

핵심 개념

scroll-snap-type을 컨테이너에 적용하면 스크롤이 특정 지점에서 멈춥니다. mandatory는 반드시 snap 지점에서 정지, proximity는 가까울 때만 snap합니다. 각 자식에 scroll-snap-align:start/center/end로 정렬 기준을 설정합니다. 모바일 슬라이드 UI에서 자주 사용됩니다. scroll-snap-type을 지우며 자유 스크롤로 돌아가는 것을 확인하십시오.

코드 분석

CSS3📋 코드 (7줄)

<style>.snap-wrap{height:130px;overflow-y:scroll;scroll-snap-type:y mandatory;border:1px solid #333;}.snap-item{height:130px;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:20px;color:white;font-family:monospace;letter-spacing:0.1em;}</style>
<div class='snap-wrap'>
  <div class='snap-item' style='background:#10b981;'>SECTION 01</div>
  <div class='snap-item' style='background:#cc1111;'>SECTION 02</div>
  <div class='snap-item' style='background:#991b1b;'>SECTION 03</div>
  <div class='snap-item' style='background:#6b0f0f;'>SECTION 04</div>
</div>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 CSS 'scroll-snap 스크롤 제어' 코드에서
레이아웃·우선순위·반응형 버그를 찾고
수정 코드와 원인을 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'scroll-snap 스크롤 제어'를 사용한 실전 UI 컴포넌트를
3가지 만들어줘. 모바일 반응형까지 포함된 완성 코드로.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 CSS 'scroll-snap 스크롤 제어' 관련 코드 전체를 분석해서
중복 속성, 미사용 셀렉터, 성능 저하 요소를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'scroll-snap 스크롤 제어'가 2026년에도 최선의 방법인지
최신 CSS(컨테이너 쿼리, :has, 서브그리드 등) 기능과 비교해서
솔직히 평가해줘.

⭐ 이것만 기억하세요

scroll-snap 스크롤 제어는 이 3가지만 확실히 잡으세요

1.카드 슬라이더에서 스크롤이 어중간한 위치에 멈추면 카드가 반쪽만 보여서 사용자 경험이 나빠집니다

2.scroll-snap-type은 스크롤 축과 강도를 설정하고, scroll-snap-align은 자식 요소가 정렬될 기준점을 지정합니다

3.다음 챕터에서 CSS3 트랙의 모든 개념을 종합하는 최종 미션에 도전합니다

💬 이 챕터 질문 보기

CSS3 · CH.33 — 질문하거나 답변을 확인하세요

→

진행도 33 / 34

← 커리큘럼으로 ← 목록으로 (CSS3)