CSS scroll-snap 관련 속성들의 역할은?

Q: CSS scroll-snap 관련 속성들의 역할은?

스크롤 시 지정된 위치에 자동으로 스냅(정렬)되도록 하여 카루셀 등을 CSS만으로 구현한다 scroll-snap-type(컨테이너)과 scroll-snap-align(자식)을 사용하면, 스크롤이 특정 지점에 자석처럼 달라붙습니다. 이미지 갤러리, 카루셀, 페이지 단위 스크롤 등을 JavaScript 없이 CSS만으로 구현할 수 있습니다.

보통 MDN Web Docs

보기 및 정답

A 스크롤 시 지정된 위치에 자동으로 스냅(정렬)되도록 하여 카루셀 등을 CSS만으로 구현한다

B @supports 규칙은 JavaScript를 통해서만 해석이 가능하며 순수 CSS로는 동작하지 않는다

C CSS의 clamp() 함수는 내부에 calc() 표현식을 사용할 수 없다는 제한이 있다

D overflow-x와 overflow-y를 개별 설정하면 서로 완전히 독립적으로 작동한다

해설

scroll-snap-type(컨테이너)과 scroll-snap-align(자식)을 사용하면, 스크롤이 특정 지점에 자석처럼 달라붙습니다. 이미지 갤러리, 카루셀, 페이지 단위 스크롤 등을 JavaScript 없이 CSS만으로 구현할 수 있습니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

로그인

추가 정보 입력

회원가입

비밀번호 찾기

CSS scroll-snap 관련 속성들의 역할은?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

모두를 위한 진짜 쎈 바이브코딩