Scroll Snap
스크롤 스냅
CSS 스크롤 스냅은 사람들이 스크롤한 후 선택된 정렬 지점에서 스크롤 영역이 멈추도록 합니다.
다른 예시
터치 제품 투어에는 필수 인라인 스냅핑이 있는 전체 화면 패널 5개가 있습니다. `scroll-padding`은 고정 헤더를 위한 공간을 남깁니다. 각 패널은 키보드와 직접 링크로도 작동합니다. 280% 확대 시에도 사용자는 큰 콘텐츠를 이동하면서 갇히지 않고 탐색할 수 있습니다.
주요 부분
- 01스냅 컨테이너
- 02스냅 영역
- 03정렬 및 엄격함
사용할 때
콘텐츠에 명확한 중지 지점이 있고 사용자가 일반 브라우저 방식으로 스크롤해야 할 때 사용하세요.
다음 경우에는 사용하지 마세요
긴 기사, 확대된 콘텐츠, 다른 스크롤 영역 내부의 스크롤 영역 또는 자유 탐색이 있는 경우 강한 필수 스냅은 피하십시오.
코드에서 사용된 이름
scroll-snap-type + scroll-snap-align + scroll-padding 출시하기 전에
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with 스크롤 스냅 (Scroll Snap)。 User context：터치 제품 투어에는 필수 인라인 스냅핑이 있는 전체 화면 패널 5개가 있습니다. `scroll-padding`은 고정 헤더를 위한 공간을 남깁니다. 각 패널은 키보드와 직접 링크로도 작동합니다. 280% 확대 시에도 사용자는 큰 콘텐츠를 이동하면서 갇히지 않고 탐색할 수 있습니다. Design concept to apply：스크롤 스냅 (Scroll Snap)。 Why it fits：콘텐츠에 명확한 중지 지점이 있고 사용자가 일반 브라우저 방식으로 스크롤해야 할 때 사용하세요. Do not use it when：긴 기사, 확대된 콘텐츠, 다른 스크롤 영역 내부의 스크롤 영역 또는 자유 탐색이 있는 경우 강한 필수 스냅은 피하십시오. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：공식 문서라고 해도 초안, 출시 후보, 최종 버전일 수 있어요. 상태와 브라우저나 플랫폼 지원 여부를 꼭 확인하세요. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how 스크롤 스냅 (Scroll Snap) is used now. Definition: CSS 스크롤 스냅은 사람들이 스크롤한 후 선택된 정렬 지점에서 스크롤 영역이 멈추도록 합니다. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.