[수업내용] 2022.08.08

2022.08.08
수업내용정리

 

 

.Product .ProductSlider {
    width: 123rem;
    margin: 0 auto;
}
.Product .ProductSlider figure {
    padding: 0 1.5rem;
}

👉 padding: 0 1.5rem;을 준 만큼 width의 크기도 3rem 넓어져야함.
(여기서 1rem = 10px이다)

$('.ProductSlider').slick({
        arrows: false,
        slidesToShow: 5,
        autoplay: true,

        👉 slick반응형
        responsive: [
            {
                breakpoint: 1230,
                settings: {
                    slidesToShow: 1,
                    dots: true
                }
            }
        ]
       
    });

👉 slick을 돌리느 img는 디스플레이 block임

 

👉 display:  block;을 하면 원래 사이즈대로 나타나지 않음. 그래서 display: flex;로 해야함

반응형 크기에 따라서 한글 줄바꿈이 이상하게 될 수 있음 그럴 때는 br태그에 class를 주고, 반응형에서 br의 class를 display: block;으로 하면 됨(반응형 아닌 거에서는 display: none;)