국비 44일차

JAY·2022년 11월 24일

국비 국비학원 프론트엔드

국비 공부

목록 보기

44/86

form 태그

inline-flex된 카테고리를 반응형 처리할 때

desktop에서는 radio로 (라디오 버튼 d-none, label만 보이도록)
mobile에서는 select로 설정한다!

데이터 베이스 입장에서는 하나만 골라진다는 점에서 동일하게 보는 것이다

=> 매체성을 고려하여 인터페이스를 모바일버전에서는 셀렉트박스로 설정하였다

(DB) REACT에서는 axios로 비동기 통신을 돌린다
ajax는 jQuery 2버전으로 돌린다

swiper

swiper는 돌리고 나서 css 커스터마이징을 해줘야 함

겹쳐지는 스와이퍼

js

<script>
  var mainBanner = new Swiper("#banner.mySwiper", {
    slidesPerView: 3,
    spaceBetween: 0,
    slidesPerGroup: 3,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: true,
    },
    loop: true,
    loopFillGroupWithBlank: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
</script>

autoplay에 마우스 올리면 멈춰지고 다시 올리지 않으면 autoplay되도록 해놓았음
(disableOnInteraction: false, pauseOnMouseEnter: true)

js 성능화 개선

변수에 담아놓아서 바로 쓸 수 있도록 한다!

css

<style>
#banner {background-color: black;}
#banner .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transition: 0.5s;
  opacity: 0.5;
  position: relative;
}

#banner .swiper-slide-active,
#banner .swiper-slide-duplicate-active {
  opacity: 1;
  z-index: 1000;
  overflow: visible;
}

#banner .swiper-slide-active div,
#banner .swiper-slide-duplicate-active div {
  /* width값을 넣는 경우 absolute로 처리, 다른방법은 transform:scale인데 비교적 유지보수에 좋지 못함 */
  width: 1440px;
  position: absolute;
  top: 0; height: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
}

</style>

centeredSlides 설정으로 가운데에 와서 active하게 만드는 class를 데려와서 설정했다

z-index 설정은 꼭 해줘야 한다

.swiper-slide의 자식객체로 div를 추가로 넣어주어 거기에 폰트를 넣어주었다.

가운데로 오는 슬라이드에 width값을 넣는 경우 absolute로 처리, 다른방법은 transform:scale인데 비교적 유지보수에 좋지 못함

100vw는 옆에 스크롤 터지는 것까지 포함되므로 100%가 좋다 (주의 필요)

반응형 설정

<script>
$(function () {

  let widthSize = $(window).width();

  const loop_auto_center_3_pc = {
    slidesPerView: 3,
    spaceBetween: 0,
    slidesPerGroup: 3,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: true,
    },
    loop: true,
    loopFillGroupWithBlank: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  }

  const loop_auto_center_3_m = {
    slidesPerView: 3,
    spaceBetween: 0,
    slidesPerGroup: 3,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: true,
    },
    loop: true,
    loopFillGroupWithBlank: true,
    pagination: {
      el: ".swiper-pagination",
      type: "fraction",
    },
  }

  let swiper_setting = '';
  let mainBanner = undefined;
  
</script>

mainBanner가 한 번도 안 쓰였다고 하기 위해 undefined 값 넣어놓음

<script>

  if (widthSize < 768) {
    swiper_setting = loop_auto_center_3_m;
    if(mainBanner != undefined){
      mainBanner.destroy();
    }
    mainBanner = new Swiper("#banner.mySwiper", swiper_setting);
  }
</script>

widthSize < 768 : 모바일 버전일 때,
swiper_setting에 모바일버전 스와이퍼 값 저장

mainBanner가 undefined가 아니라면 => mainBanner가 사용되었다면
mainBanner에 destroy 메서드 (뿌셔뿌셔)

mainBanner에 새로운 swiper_setting값을 넣어줌

<script>
  else {
    swiper_setting = loop_auto_center_3_pc;
    if(mainBanner != undefined){
      mainBanner.destroy();
    }
    mainBanner = new Swiper("#banner.mySwiper", swiper_setting);
  }
});
</script>