웹3 8일차

[스와이퍼 마켓컬리 상품리스트 구현]

수업 코드펜 바로가기

 

ㅇㅇㅇ

 

 

[스와이퍼 데모버전 사용하는 방법]

수업 코드펜 바로가기

 

스와이퍼 슬라이드가 한칸씩 유연하게 넘어가도록 구현하기

 

-. 넘어가는 것은 .swiper-slide 자체가 넘어가는 것이다

-. slidesPerView: 3, <-- swiper 3개를 보여주겠다는 뜻 

-. spaceBetween: 30, <--- swiper 와 swiper 사이 간격을 30(px)로 설정하겠다는 뜻 

 

[스와이퍼 반응형]

수업 코드펜 바로가기

 

 

breakpoints 을 검색하고 복사하여 사용

가장 작은 화면에서 슬라이드가 한개로 나와야 할 때 slidesPerView을 1로 설정 spaceBetween을 10으로 설정해야 한다.
스와이퍼 반응형은 ★<무조건>★ 작은 화면 크기부터 작성 해야 한다.
공식 홈페이지에서 breakpoints 코드를 가져왔을 때, 마지막에 작성 되어 있는 닫는 중괄호에 }, ★콤마★를 반드시 찍어줘야 한다

 

[스와이퍼 반응형 활용]

수업 코드펜 바로가기

width: 1440px; -> 반응형을 구현 하려면 상위 엘리먼트부터 하위 엘리먼트까지 전부 퍼센테이지로 작동해야한다. 고정px로 되어 있으면 반응형으로 사용할 수 없다★★★★★

max-> 최대값 - (예시) max-width: 1440px; -> 0부터 1440px까지 유연하게 값을 가짐
- 1440px이상으로 넘어갈 수 없음
- %와 동일한 효과를 가지지만 정확한 픽셀값으로 반응형을 사용할 수 있다는 장점이 있고 상위엘리먼트의 특정 비율값을 가져오려면 계산해줘야 한다는 단점이 있다.

 

 

[스와이퍼 반응형 왼쪽, 오른쪽 버튼 커스텀(1단계: 버튼구조 밖으로 빼기)]

수업 코드펜 바로가기

 

ㅇㅇㅇㅇ

 

[스와이퍼 반응형 왼쪽, 오른쪽 버튼 커스텀(2단계:relative설정 후 버튼 위치 조정)]

수업 코드펜 바로가기

 

-. calc();

 

-. calc(); -> 속성값에서 사칙연산을 사용할 수 있게 도와주는 값

-. 마이너스(-), 플러스(+)부호를 사용할 때는 양 옆으로 띄어쓰기를 해줘야 한다