개발블로그

이전 글인 https://quail-han.tistory.com/21를 먼저 보고 오시는 것이 좋습니다 :) 도착지로 가는 길 - 2 첫 번째 길에서는 transform을 이용하여 무한 캐러셀을 구현하는 방법에 대해 설명 드렸습니다. 이번에는 scroll을 통해 구현해 보고자 합니다. 이번 글의 핵심 키워드는 처음 보실 수도 있는 css 속성인 scroll-snap-type 과 scroll-behavior 를 사용합니다. 잠깐 보시고 글을 읽으시는 것을 적극 추천드립니다. MDN scroll-snap-type: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type MDN scroll-behavior: https://developer.mozi..

도착지 이번 우아한테크캠프 3기 네번째 프로젝트의 요구사항 중 하나인 Carousel 구현 및 카테고리별 상품 리스트 섹션을 개발하면서 알게 된 점을 공유하려고 합니다. Carousel Requirements 먼저 Craousel의 요구사항을 설명드리겠습니다. 웹 페이지에서 흔하게 볼 수 있는 무한 캐러셀 기능입니다. 지정한 term마다 다음 메뉴로 슬라이드되어 보여지며, 마지막 페이지 이후에는 다시 첫 번째 페이지가 등장하여 메뉴가 무한히 있는 것 처럼 보입니다. 추가로 사용자의 액션을 고려해야 합니다. 사용자는 스와이핑 액션을 통하여 캐러셀의 슬라이드를 왼쪽, 오른쪽으로 조정할 수 있습니다. 도착지로 가는 길 - 1 Carousel을 구현하는 방법에는 정말 여러가지가 있을 텐데요. 처음의 저는 이전의..