TIL #46. slickLibrary 삽질/ css filter, 이미지 확대

ceres·2020년 3월 13일
0

TIL

목록 보기
18/34

(20/3/13)

slick 삽질. 결국 사용 안함

타이달 페이지 홈에 가보면 다양한 곡들이 나열되어있고 화살표 버튼을 누르면 옆으로 슬라이드가 되면서 더 많은 곡들을 볼 수 있다.

slick을 사용해서 만들어 보려고 했지만, 결과물이 아래와 같이 나왔다. 문제점은 1) 앨범 사이사이 간격을 조정할 수 없었고 2) 타이달 홈페이지는 반응형이어서 화면에 나오는 앨범수를 조정할 수 있지만, slick을 사용하면 한 화면에 보이는 앨범수를 고정값으로 줘야했다. (이건 내가 잘 못한듯하다. breakpoint 세팅값이 있는걸 보니, 반응형도 가능한 것 같다.) 3) 화살표 아이콘을 바꿀 수 없다.

그래서 css로 다시 만들기로 했다.... 하지만 slick 사용하려고 노력한게 아까워서 블로그에 남기기라도 하련다.
참고는 요사이트: https://react-slick.neostack.com/docs/get-started
1) install 해주기

npm install react-slick --save
npm install slick-carousel --save

2) 사용하는 컴포넌트에 import 해주기
이유는 모르겠지만, 나의 경우 ~을 빼줘야 실행이 됐다.

import "~slick-carousel/slick/slick.css"; 
import "~slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";

3) slick에서 원하는 디자인 세팅값 가져오기

다 넣은 모습은 이렇다

import React from 'react'
import styled from 'styled-components'
//import 해줘야 하는 부분
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";

//slick에서 가져온 세팅값
var settings = {
    dots: true,
    infinite: false,
    speed: 10,
    slidesToShow: 4,     //화면에 보이는 slide개수를 조정해줄 수 있다. 
    slidesToScroll: 4,
    initialSlide: 0,
    responsive: [
      {
        breakpoint: 1024,  //breakpoint설정가능하네요..
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          initialSlide: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  };

const Featured = () => {
    return (
        <>
        <GlobalStyles />   
        <Wrapper>
            <Header>
                <Title>Featured</Title>
                <FeaturedContainer>
                    <Slider {...settings}> //사용하려는 부분에 컴포넌트로 넣어주면 된다.
                    {FeaturedData.map(item => {
                        return ( 
                         <FeaturedBox 
                         id={item.id}
                         img={item.img}
                         head={item.head}
                         title={item.title}
                         subtitle={item.subtitle}
                         />   
                        )
                    })}
                    </Slider>
                </FeaturedContainer>
            </Header>
        </Wrapper>
        </>
    )
}
export default Featured

styled component TIL

1) filter : 이미지 블러처리, 밝기 조정 할 때 사용

filter: blur(20px) brightness(90%);

2) 마우스 가져갔을 때 이미지 확대시키는 방법

const IMG =styled.img`
width: 100%;
height: 100%;
transform: scale(1);       //default값
-webkit-transform: scale(1); ////default값
-moz-transform: scale(1);   //crome
transition: all 0.2s ease-in-out;
    &:hover {
        transform: scale(1.1);   //hover시 확대되는 범위 조정
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
    }
`;

0개의 댓글