4. 안다르 적응형 모바일 클론 코딩

📌
사이트 명: 안다르 모바일 (andar)
제작 기간: 22.08.20 ~ 22.08.22 (3일 소요)
사용 언어: html, css, jQuery, java script

[안다르 적응형 모바일 클론 코딩 작업]

모바일 적응형 페이지를 클론 코딩하였습니다. 반복되는 레이아웃 구조임을 감안하여, 통일된 클래스 명으로 코드를 간결하게 작성하고자 했고, 아코디언 메뉴 제작 및 swiper플러그인을 활용하여 작업했습니다!

💡Learning point

• header영역 scroll 이벤트 기능
• swiper (메인 슬라이드, 상품 영역) 제작(padding)
• 사이드 메뉴 제작(아코디언 메뉴, dimmed 영역)
• @font-face 적용
• top-button 영역

1. header영역 scroll 이벤트 기능

-scroll 시, header 영역 디자인이 변경되는 스크립트

$(window).scroll(function(){
        const curr = $(this).scrollTop();
        //스크롤 현재 위치
        if (curr > 0) {
        //스크롤 내렸을 때
            $('.header-inner').addClass('fixed');
        } else {
        //아닐 때
            $('.header-inner').removeClass('fixed');
        }
    })
    $(window).trigger('scroll');
    //스크롤 한 상태에서 새로 고침 했을 때 발생하는 오류를 막기 위해
    항상 스크롤이 실행되도록 스크롤 이벤트 강제 실행

스크롤의 현재 위치 값을 계산해서 그 값이 0보다 클 때 즉, 스크롤을 내렸을 때 헤더부분에 클래스명을 줘서 활성화 시킴. 0보다 작을 경우라 함은 스크롤을 내리지 않은 상태이므로 비활성화 되도록 적용

2. swiper (메인 슬라이드, 상품 영역) 제작(padding)

Swiper 플러그인을 활용하여 메인 슬라이드와 상품 영역 슬라이드를 제작했다.

////메인슬라이드
var mainSlide = new Swiper(".visual-slide", {
  spaceBetween: 30,
  effect: "fade",
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false
  },

  pagination: {
    el: ".swiper-pagination"
  }
});

메인 슬라이드에는 fade효과와 자동 재생 간격 3초를 설정해두었다.

////제품 영역 슬라이드
    var prodSlide = new Swiper(".prod-slide", {
        slidesPerView: 2.2,
        spaceBetween: 10,
        freeMode: true,
      });

.sc-content .swiper{
    padding: 0 20px;
}

제품 영역 슬라이드에는 드래그 시 자연스럽게 넘어가도록 freeMode를 설정하고, swiper 양쪽에 padding값을 줬다.

3. 사이드 메뉴 제작

3-1. dimmed

메뉴가 열리면 우측 body영역이 어두워지면서 스크롤이 되지 않도록 설정했고, 메뉴 닫기 버튼 대신 dimmed영역을 클릭해도 사이드 메뉴가 닫히게끔 만들었다.

[css]

body.hidden{overflow: hidden;}
body.hidden .dimmed{display: block;}

.dimmed{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.65);
    display: none;
    z-index: 9000;
}

[js]

////aside 메뉴 영역
$(".header .btn-menu").click(function (e) {
  e.preventDefault();

  $(".menu-left").addClass("active");
  //사이드 메뉴가 활성화 되면
  $("body").addClass("hidden");
  //body 스크롤 제어
});

$(".header .btn-close, .dimmed").click(function (e) {
//닫기 버튼과 dimmed가 클릭될 경우
  e.preventDefault();
  $(".menu-left").removeClass("active");
  //사이드 메뉴 비활성화
  $("body").removeClass("hidden");
  //body 스크롤 제어 해제
});

3-2. 아코디언 메뉴

sub영역과 depth영역을 display:none처리 해둔 뒤, 해당 카테고리를 클릭하면 sub영역이 슬라이드 다운(열림)되면서 하위 depth영역이 페이드인/페이드아웃 되도록 적용. 화면이 넘치는 영역을 위해 스크롤이 생기도록 overflow:auto로 설정했다.

[css]

/* 왼쪽 메뉴 영역 */

.menu-left{
    position: fixed;
    top: 0;
    left: -100%;
    width: 82%;
    height: 100%;
    overflow: auto;
    background: #fff;
    font-size: 11px;
    padding: 0 16px;
    z-index: 10000;
    transition: left 0.7s;
}
.menu-left.active{
    left: 0;
}
.menu-left .category-item .sub{
    height: auto;
    padding-bottom: 15px;
    display: none;
}
.menu-left .depth1{display: none;}

[js]

$(".category-wrap .btn-cate").click(function (e) {
  e.preventDefault();

  if ($(this).hasClass("active")) {
  //카테고리 영역이 열려있는 상태라면
    $(this).removeClass("active");
    //active 클래스 제거
    $(this).siblings().stop().fadeOut();
    //닫히는 depth영역은 fadeout처리
    $(this).siblings().find("ul").stop().slideUp();
    //닫기
  } else {
  //카테고리 영역이 닫혀있는 상태라면
    $(this).addClass("active");
    //active 클래스 주기
    $(this).siblings().stop().fadeIn();
    //열리는 depth영역 fadein처리
    $(this).siblings().find("ul").stop().slideDown();
    //열기
  }
});

4. @font-face 적용

@font-face {
    font-family: 'gilroy';
    src: url('../font/Gilroy-Regular.woff2') format('woff2');
    font-weight: 300;
}

font.css에 @font-face작성, font-weight만 변경하면 해당 폰트가 출력된다.

body{
    font-size: 14px;
    line-height: 1.2em;
    color: #1b1b1b;
    font-family: 'gilroy', 'Noto Sans KR', sans-serif;
}

4. top-button 영역

스크롤 값과 윈도우 스크롤 위치 값을 구해서 스크롤의 위치에 따라
퀵메뉴 영역이 나타나고 사라지도록 스크립트를 작성했다.

[html]

<div class="quickmenu-area">
  <a href="#" class="link-cs">톡상담</a>
  <a href="#" class="btn-top"><span class="blind">상단으로가기</span></a>
</div>

[css]

.quickmenu-area{
    display: block;
    position: fixed;
    right: 10px;
    bottom: 50px;
    border: 1px solid #e9e9e9;
    background: rgba(255,255,255,.7);
    box-sizing: border-box;
    transition: opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 10;

}
.quickmenu-area.on{
    opacity: 1;
    visibility: visible;
}

[js]

/////퀵메뉴 영역
$("body").on("mousewheel", function (e) {
  var wheel = e.originalEvent.wheelDelta;
  //스크롤 값
  curr = $(window).scrollTop();
  //윈도우의 현재 스크롤 위치 값

  if (wheel > 0) {
  
    //스크롤 올릴 때(양수)
    if (curr < 1) {
    //윈도우 스크롤 위치 값이 1보다 작으면
      $(".quickmenu-area").removeClass("on");
      //숨기기
    } else {
    //1보다 클 경우
      $(".quickmenu-area").addClass("on");
      //보이게
    }
  } else {
    //스크롤 내릴 때(음수)
    $(".quickmenu-area").removeClass("on");
    //숨기기
  }
});