[css] 캐러셀..인데 이제 큐카드 넘기는 느낌을 얹은

스킬부분 스타일링에 대해 고민을 많이했다.
대충 키워드만 나열해보자면
1. 전구 : 컨텐츠 넣기가 애매해서 패스
2. 리본 : 구현했다 생각보다 별로라서 롤백
3. horizontal
4. 카드

카드는 awwward 구경하다 발견한 아래 홈페이지를 감탄하면서 보다가 시도!
https://chainzoku.io/

드롭다운? 뭐라해야할지 모르겠는데
카드를 선택하고 떨구는 것도 어떻게한건지 너무 궁금한데...
일단 저기까지는 무리일거같고 나는 캐러셀로만 구현해보기로 마음먹었다.

구조

.container {
  .button {}
  .ul {
    .li {}
  }
}

.container

컨테이너 너비와 높이를 꼭 설정해주어야한다.
그리고 컨테이너를 기준으로 삼는다.(position: relative)

width: 85%;
height: 100vh;
margin: auto;
position: relative;

.button

transform: translate(-50%)은 버튼 영역의 x축 기준점을 가운데로 주기위함이다! 왼쪽 위를 기준으로 생각하면 복잡하고 어렵기때문에...
예전에는 버튼 위치 잡는것도 복잡하게 했던거같은데 flex로 아주 쉽게 설정해주었다.

width: 100%;
display: flex;
justify-content: space-between;
position: absolute;
transform: translate(-50%);
left: 50%;
top: 25%;
z-index: 1;
padding: 20px;

.ul

display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;

.li

내부 카드영역.
나는 너비를 50vw, 높이를 60vw으로 설정했다.
60vh로 하지 않은 이유는 기기마다 너비와 높이가 다르기때문에 비율을 유지하기 위함이다.
같은 너비라도 같은 높이가 보장되지 않기 때문에!
nth-of-type을 사용해서 짝수번째 요소일때와 홀수번째 요소일때 기울기를 다르게 주어서 카드가 겹쳐진듯한 효과를 준다.
그리고 백그라운드 컬러를 주지 않으면 요소들이 겹쳐져서 컨텐츠가 하나도 보이지 않는다... 꼭 줄것.

width: 50vw;
height: 76vw;
margin: auto;
display: flex;
flex-direction: column;
position: absolute;
top: 10%;
right: 0;
left: 0;
background-color: white;
  &:nth-of-type(2n) {
    transform: rotate(-3deg);
  }
  &:nth-of-type(2n - 1) {
    transform: rotate(3deg);
  }

순서에 따라서 z-index 부여하기!!

• sass를 사용했다. 스타일드 컴포넌트로 프롭스를 너무 받고싶었다...ㅠ
  sass로 제어할때는 class를 주는수밖에 없는 것 같다.
  고민고민하다가 z-index를 요소에 일단 순서대로 주었다.

1. z-index로 순서 일정하게 하기
   for문을 사용해 10-i를 z-index로 부여.
   첫번째 요소는 9, 두번째는 8, 이런식으로 우선순위를 가질 수 있게 함.
2. 현재 캐러셀이 아닐때는 z-index를 1을 갖도록 했다.
   이게 하두 안먹어서 한참 고생하다가 그냥 !important를 줘버렸다.
   웬만하면 주고싶지 않지만... 어쩔수없지..!!

.is_carousel_item {
  position: relative;
  //i를 받아서 z-index에 10-i 주기.
  // 0번째: 10 - i = 10;
  // 1번째: 10 - i = 9;
  @for $i from 0 through 6 {
    &:nth-of-type(#{$i}) {
      z-index: 10 - $i;
    }
  }
}
.is_passed_carousel {
  position: static;
  z-index: 1 !important;
  //지나면 z-index: 1; important있어야 함!
}