개발공부 임고미

React에서 많이 사용하는 Carousel은 여러가지가 있겠지만, 그 중 직관적이고 많이사용하는 slick slider을 이용해 Carousel을 뽀개..보겠습니다! 사용한 스택 : React / TypeScript / emotion emotion은 styled-component와 비슷하니 문법만 잘 수정하면됩니다 styled-component를 사용할경우 하나 확인해야할 부분은 반응형 적용부분입니다! 목차 1. 슬라이드 세팅 2. 간격주기 / hover 효과 영역 3. 드래그중 클릭 막기 간격주기 1. css custom 간격을 주기위해선 slick slide의 css를 수정해줭하는 수밖에 없습니다. [기본] //오른쪽으로 20px만큼 간격주기 .slick-list { marign-right: -..

React에서 많이 사용하는 Carousel은 여러가지가 있겠지만, 그 중 직관적이고 많이사용하는 slick slider을 이용해 Carousel을 뽀개..보겠습니다! 사용한 스택 : React / TypeScript / emotion emotion은 styled-component와 비슷하니 문법만 잘 수정하면됩니다 styled-component를 사용할경우 하나 확인해야할 부분은 반응형 적용부분입니다! 목차 1. 슬라이드 세팅 2. 간격주기 3. 드래그중 클릭 막기 슬라이드 세팅 1. 패키지 로드 리엑트에서 slick을 세팅하기위에선 몇가지 패키지를 다운로드 해야합니다. //react slick npm install react-slick --save npm install slick-carousel -..