스냅스크롤1 테슬라 웹사이트와 동일한 화면 스크롤링 구현 오늘은 테슬라 웹사이트의 전체 화면 스크롤링을 따라해보겠습니다. 마우스휠로 현재 보이는 화면 전체가 스무스하게 스크롤링되는 기능으로 스냅 스크롤링이라고 부르는데요, 별도의 스크립트없이 CSS만으로 간단하게 구현이 가능합니다. 아래 영상처럼 화면이 스크롤되는 기능으로 꽤 많은 웹사이트에서 사용하는 기능입니다. scroll-snap-type 속성을 이용하면 위아래, 좌우 방향으로 적용가능합니다. 자, 그럼 테슬라 홈페이지와 동일하게 위아래로 자연스럽게 스크롤링되는 방법을 알아봅니다. scroll-snap-wrapper 클래스를 가진 div 를 만든 후 그 안에 section 클래스 div 를 만들어 줍니다. 이제 html 기본 구조가 준비가 되었으면 스크롤링 적용을 위해 아래 스타일을 추가해줍니다. .scr.. 2022. 10. 7. 이전 1 다음
