스타벅스 정리 2

visual

css에 먼저 선언후 html 사용

.btn.btn--brown {
  color: #592B18;
  border-color: #592B18;
}

 <a href="javascript:void(0)" class="btn btn--brown">자세히보기</a>

요소 자동화

const fadeEls = document.querySelectorAll('.visual .fade-in') //fade-in 클래스를 전부 다 찾음
fadeEls.forEach(function (fadeEl, index) {
  gsap.to(fadeEl, 1, { //요소, 지속시간, 옵션 추가
    delay: (index + 1) * .7, // 0.7초, 1.4초, 2.1,초 등 하나씩 나타남
    opacity: 1
  })
})

notice

height는 최소한으로 가려함

flex-grow: 1; - 최대한 옆으로 늘어나게

justify-content: flex-end; - 수평정렬을 끝쪽으로

swiper

<!-- SWIPER 라이브러리 -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
  <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

 <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="javascript:void(0)">크리스마스 & 연말연시 스타벅스 매장 영업시간 변경 안내</a>
              </div>

//notice의 swiper
new Swiper('.notice-line .swiper-container', {
  direction: 'vertical', //세로방향
  autoplay: true, //자동재생
  loop: true //다시 반복재생
})

calc함수

css의 계산을 편하게 해줌

width: calc(819px * 3 + 20px);

확대나 축소해도 정중앙 배치하기

.notice .promotion .swiper-container {
  width: calc(819px * 3 + 20px); //전체 너비 계산
  position: absolute; // 절대위치로 변경
  left: 50%; // 오른쪽으로 반만큼 이동
  margin-left: calc((819px * 3 + 20px) / -2); //다시 너비의 반만큼 거리를 줄임
}

중간 프로모션

가운데에 왔을때만 active가 설정되므로

.notice .promotion .swiper-slide-active { 
  opacity: 1;
}

프로모션 전환

//promotion의 swiper
new Swiper('.promotion .swiper-container', {
  // direction: 'horizontal', //기본값, 가로방향
  slidesPerView: 3, //한번에 보여줄 슬라이드 개수
  spaceBetween: 10, //슬라이드 사이 여백
  centeredSlides: true, //1번 슬라이드가 가운데 보이기
  loop: true ,//다시 반복재생
    autoplay: { //자동재생 옵션추가
    delay: 5000 //5초
   }

  //.....으로 요소를 지정해 페이지 넘기기
  pagination: {
    el: '.promotion .swiper-pagination', //페이지 번호 요소 선택자
    clickable: true // 클릭이 가능하게
  },

  //이전과 다음 슬라이드를 볼 수 있는 기능 
  navigation: {
    prevEl: '.promotion .swiper-prev', //이전 버튼
    nextEl: '.promotion .swiper-next' //다음 버튼
  }

})

pagination-bullet

.notice .promotion .swiper-pagination .swiper-pagination-bullet {
  background-image: url("../images/promotion_slide_pager.png");
  width: 12px;
  height: 12px;
  margin-right: 6px;
  outline: none;
  background-color: transparent;
}

다중 선택자

.notice .promotion .swiper-prev,
.notice .promotion .swiper-next {
  width: 42px;
  height: 42px;
}

일치선택자

class="promotion hide"같이 연속클래스는 css에서 붙여 표현

.notice .promotion.hide {
  height: 0;
}

토글 구현

일반적으로 토글같이 보임이나 숨김처리를 할때는 js에서 class만 처리하게하고, 나머지는 css에서 구현하는 것이 좋음

const promotionEl = document.querySelector('.promotion')
const promotionToggleBtn = document.querySelector('.toggle-promotion')
let isHidePromotion = false

promotionToggleBtn.addEventListener('click', function(){
  isHidePromotion = !isHidePromotion //클릭되면 true로 지정

  if(isHidePromotion){ //숨김처리
    promotionEl.classList.add('hide') // promotion에 class hide 추가

  }else{//보임처리
    promotionEl.classList.remove('hide') // promotion에 class hide 제거

  }
})