20231208~10 TIL carousel 화살표, dots 커스텀 / masonry 구현/ 반응형 페이지 만들기

목표

• css 수정

새로 알게 된것/ 오늘의 코드

내가 맡은 부분을 좀 더 구성을 추가하고 css도 추가해야겠다고 생각했다.

그래서 

 

디테일 부분을 수정해서 두 버전을 볼 수 있도록 만들어야겠다고 생각이 들었다.

1개는 캐러셀 형태, 1개는 그리드 형식 

캐러셀 수정

 

	as is	to be
dot	false	true , 사진 안에 보이게
arrow	false	true , 사진 안에 보이게
size	width고정 height auto	height 고정 width auto
centerMode	false	true

 

간단한 변화는 이렇게 지정했고 

바꾼 settings 는 

  const settings = {
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true
  };

 

이렇게 설정한 뒤 화살표와 dot를 custom해줘야 했다. 

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';


export const Styled_Slide = styled(Slider)`

`;

나는 styled component를 이용해서 수정을 할거라서 기본 세팅은 이렇게 된다.

우선 dots 부터  색을 흰색으로 변경해주겠다.

// active중인 단추
  .slick-dots li.slick-active button:before {
    color: white;
    font-size: 12px;
  }
  
// active중이 아닌 단추
  .slick-dots li button:before {
    color: white;
  }

slider는 고유의 클래스 네임을 가지고 있어서 그것을 이용해서 해주면 된다

단추의 위치는 

  .slick-dots {
    bottom: 40px;
  }

 -+ a 하면서  원하는 위치를 잡아주면 된다. 

 

그럼 이제 화살표를 수정해보자!

첫 세팅을 할 때 화살표가 true인데도 보이지 않는 경우가 있자. 그 이유는 기본 화살표가 흰색이라서 배경색이 없으면 보이지 않는 것이다 .

 

캐러셀  밖에 그대로 두고 화살표 색상과 크기만 변경한다면

  .slick-prev:before,
  .slick-next:before {
    font-size: 30px; 	 //화살표 크기 default =  20px
    opacity: 0.5;	// 투명도 default = 0.7
    color: #c9f2ff;	// 화살표 색상 default = white
  }

 

이런식으로  설정을 해주면 된다.

화살표 위치는  dots와 마찬가지로 위치응 설정해주면 된다.

  .slick-prev {
    z-index: 1;  // 사진 위에 보이게
    left: 30px;
  }

  .slick-next {
    right: 40px;
  }

그리고 캐러셀의 사이즈를 조절해야하는게 조절을 위한 클래스명은 

 

이렇게 된다. 

slick-track은 거의손을 대지 않을 것이다.. 

전체 크기는 

slick-list를 수정해주면된다.

  .slick-list {
    width: 800px;

  }

 

그리고 나는 캐러셀에 img를 바로 넣었기에

  & img {
    height: 400px;

  }

캐러셀 안에 이미지의 사이즈를 조절해줬다. 그러면 이렇게 된다

근데 저번에 했을 땐 기준을 가로로 잡고 height를 자율로 했는데 그렇게 하면 너무 사이즈가 들쭉날쭉 해여서 보기가 조금 불편한 경향이 있었다. 그래서 height를 고정으로 두고 width를 자율로 지정해줘야했다. 

 

원래 settings에는 adaptiveHeight 를 true로 했었는데 그걸 variableWidth을 true로 하는 것으로 변경해주었다. 

adaptiveHeight 는 새로로 도는 캐러셀에서 쓰는 걸로!!

 

아무튼 사진들이 조금 거리가 있으면 좋지 않을까? slick slide에 padding값을 주면된다.

  .slick-slide {
    padding: 0 30px;
  }

그렇게 하면 

 

원하는 느낌을 낼 수 있다.

그리고 그리드 형식을 만들어 줬다. 정확히는 masonry방식을단순하게! 

원래라면 display : grid 하고 이것저것 해줘야하는데 우선 내가 할 것은 그것보다 단순하게 하는 법이다. 단점은 있지만 ,, colum-width를 사용해서 구현해 줄 것 이다!

export const Works = styled.div`
  width: 1000px;
  column-width: 300px;
  column-gap: 15px;
  margin: 20px 0;
`;
export const WorksImg = styled.img`
  display: inline-block;
  border: 1px solid #c9f2ff;
  margin: 0;
  margin-bottom: 30px;
  padding: 10px;
  width: 300px;
`;

이렇게만 해주면 css만을 이용해서 사진 크기별로 들어갈 수 있다! 

 

단점은 지금 처럼 세팅을 했을 때 사진이 4개라면, 배치가 

1 2 3

4

이렇게 되는 것이 아닌

1 3

2 4

이렇게 된다. 그리고 반응형을 주거나 사진의 크기를 변경할 때마다 column-width를 계속 수정해야한다는 점이다..

 

하지만 지금은 그렇게 복잡한 상황은 아니니 그대로 사용해줬다.

 

그리고 사이트를 반응형으로 만들기 위해서

  @media screen and (max-width: 1000px) {
    width: 650px;
    column-width: 230px;
  }

 

이런 설정들을 해주었다.

1000px보다 페이지 크기가 작아지면 아래 속성으로 바뀌게 된다. 

 

반응형은 이렇게 귀찮게 하는 수밖에 없나?

 

아무튼 다 만들어준다음에 state를 하나 만들어서 masonry 방식과 carousel을 토글 되도록 해줬다.

 

목표 달성여부

• css 손보기 
• 인증 강의 듣기
• redux 툴킷 강의 듣기

내일 목표

• 인증 강의 듣기
• redux 툴킷 강의 듣기