[💻] 실습 - 안다르

📖 Overview

사이트명: 안다르
작업 기간: 3일 소요
라이브러리: swiper, jQuery
유형: PC,mobile 적응형, 클론 코딩
참여도: 100%

👀 Check-point

• 동일한 레이아웃을 공통으로 작업 할 수 있는가?
• 적응형 모바일을 이해했는가
• 스와이퍼 css를 원하는 형태로 바꿀 수 있는가
• 메뉴 닫기 버튼을 이용하여 열고 닫기가 가능한가
  
  

---

📌 스크롤 관련

✏ 스크롤시 상단 fixed - scrollTop()

• 
• 

$(window).scroll(function(){
    if ($(this).scrollTop()>0) {
    //현재 scrollTop값이 0보다 클때
        $('.header, .gnb-area, .top-menu').addClass('active');
        $('.menu-wrap').fadeIn(0);
    } else {
        $('.header, .gnb-area, .top-menu').removeClass('active');
    }
  })

◼ $(window).scrollTop()

window를 기준으로 스크롤을 내렸을 때 스크롤이 이동한 만큼의 스크롤 양 값을 구하는 것

✏ 스크롤시 사라졌다, 나타나기

◼ fadeIn/out

e.originalEvent.wheelDelta; //마우스 휠의 데이터 값을 받아온다

$('html, body').on('mousewheel',function(e){
    var E = e.originalEvent.wheelDelta; //마우스 휠의 데이터 값을 받아온다
    console.log(E);
    //밑을 내릴때는 음수 올릴때는 양수값을 받아온다
    if (E > 0) { 
      $('.appear-tab').fadeOut();

    } else {
      $('.appear-tab').fadeIn();
    }
  });

• 만약 마우스 휠 값이 0보다 클때 fade Out
  -> 마우스 휠을 내릴때 사라져라 ex) 120 > 0 참 실행
• 그렇지 않을때 fade In
  ->마우스 휠을 올릴때 나타나라 ex) -120 > 0 거짓 실행

처음 시작시엔 보이지 않아야하는데 시작부터 나타나 있었다.
그 이유는?

if (E < 0) { 
      $('.appear-tab').fadeOut();
} else {
      $('.appear-tab').fadeIn();
    }

만약 마우스 휠 값이 양수일때

내릴때 -120 올릴때 120
내릴때 -120<0 참 fadeOut
올릴때 120<0 거짓 fadeIn 인건 맞지만
0<0은 거짓임으로 시작할때 나타나있는 것 이다.

--❌오류❌--
이렇게 코드 작성시 메뉴영역에서도 휠이벤트가 발생하게 된다.

---

✍(◔◡◔) 오답

lastScroll = 0; //lastScroll이 0일때

  $(window).scroll(function(){

    curr = $(this).scrollTop(); //현재scrollTop값

    if (curr > lastScroll || curr == 0) { //현재값이 lastScroll보다 크거나 0과 같다면
      $('.appear-tab').fadeOut(); //사라져라(내리면
    } else {
      $('.appear-tab').fadeIn(); //아니라면 나타나라 (올리면
    }

    lastScroll = curr; //lastScroll값과 현재값이 같아야 실행이 된다
  })

✍ lastScroll = curr;을 쓰는 이유는?
-> lastScroll에 아무 조건을 걸어주지 않았음으로 lastScroll는 0으로 바뀌지 않는다. 그렇기에 else 조건은 성립되지 않음

->그렇기에 조건문이 먼저 실행된 뒤 lastScroll에 현재값을 담아주면 조건이 성립됨

📌 swiper pagination

이부분은 스와이퍼가 가지고 있는 swiper-pagination-bullet 클래스를 찾아서
width,height,border-radius를 주면 된다.

<div class="swiper main-slide">
  <ul class="swiper-wrapper slide-box">
    <div class="swiper-pagination swiper-bar"></div>
  </ul>
</div>

.sc-banner .main-slide .swiper-bar{
    bottom: 37px;
    left: 50%;
    transform: translateX(-50%);
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
    width: 20px;
    height: 2px;
    margin: 0;
    border-radius: 0;
    background: #fff;
}

클래스명이 긴 이유는 기존에 있는 스와이퍼css클래스명 그대로 가져온 거다.

✍ 내가 착각한것

swiper-pagination-bullet를 감싸고 있는 swiper-pagination에 사이즈와 색을 주려해서 안된것

📌click 이벤트

✍ 요소들을 컨드롤할때는 부모요소를 건드는게 편하다.
부모요소로 밖에 안된다고 생각하자

.hidden-menu .ic-show.active .all-menu{display: block;}

ex) 부모요소 a가 눌렸을때 b가 되라, c가 되라 → O
형제요소 a가 눌렸을때 b사 되라 → X

 $('.hidden-menu .ic-show').click(function(e){
    e.preventDefault();
    $(this).toggleClass("active");
    $('.bottom-menu').stop().slideToggle();
   
    if ($(this).hasClass('active')) {
      $('.all-menu').addClass("active");
      $('.top-menu-list').addClass("active");
    } else {
      // $('bottom-menu').slideUp();
      $('.all-menu').removeClass("active");
      $('.top-menu-list').removeClass("active");
    }
  })

📌 스크롤 바 없애기

네비게이션바 넘쳤을때 슬라이드를 만들어준다.
안다르에서 슬라이드바는 없애줘야함

box-sizing: border-box;
overflow-x: auto;

응용시 박스에다가 클래스 넣어주면됨

.box {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.box::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera*/
}

📌 사이드 메뉴 생성,닫기

✏ 생성,펼치기

메뉴 버튼을 눌렀을때 왼쪽에서 오른쪽으로 펼쳐지기
다른 섹션들보다 제일 위에 떠있어야한다.
->마크업에선 dimmed를 맨위에 위치시킨다.

✍ 위 사진과 같이 활성화 된 창 아래에 있는 컨텐츠들은 어둡게 설정하는, 흔히 dimmed 라고 불리운다.

.dimmed{
    position: fixed;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 20;
    visibility: hidden;
    opacity: 0;
    transition: opactiy 0.3s;
}
/* 제이쿼리 */
.dimmed.active{
    opacity: 1;
    visibility: visible;
}

◼ menu가 펼쳐졌을때 body에 마우스 휠 안보이게 하는법

body.hidden{
    overflow: hidden;
}

.header .sc-menu{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;

    width: 82%;
    height: 100%;
    /* display: none; */

    transform: translateX(-100%);
    transition: 0.3s;
    background: #fff;
    z-index: 9999;

    overflow: auto; -> 내용이 넘치면 보이지 않기 때문에 스크롤 생성
    overflow-x: hidden;
}

제이쿼리

  $('.link-menu').click(function(e){ //클릭했을때
    e.preventDefault();
    $('.sc-menu, .dimmed').addClass('active'); //펼쳐지는 active 추가
    $('body').addClass('hidden');
  })//END

  $('.close, .dimmed').click(function(){ //닫힘 버튼 클릭시
    $('.sc-menu, .dimmed').removeClass('active'); //active 빼기
    $('body').removeClass('hidden');
  })

📌 폰트 적용

✏ 웹폰트

방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트이다.

◼ 웹폰트의 종류와 지원 범위

• 구글 폰트에서 원하는 폰트, 굵기를 선택한후 link혹은 import로 가져온다.
  

✏ font-face

폰트 파일을 저장하여 직접 불러와 적용할 수 있는 방법이다.

◼ 적용 방법

@font-face {
    font-family: 'Gilroy-Medium';
    //폰트 이름을 설정할 수 있다.
    _ 파일명과 동일하게 하는 것이 좋음!
    
    src: url(../font/Gilroy-Medium.woff2) format('woff2');
    //폰트 파일의 경로와 파일 형식
    
    font-weight: 500;
    //각 폰트의 굵기 표시
};

📌 레이아웃

✍ 안다르는 공통 레이아웃이 많다.
클래스명을 공통으로 지정해주면 더 쉽고 빠르게 꾸미기 가능해진다.

---

✍(◔◡◔) 오답

스와이퍼에는 가로,세로 사이즈가 이미 들어있는데

.swiper img {
    width: 100%;
    height: 85vh;
    object-fit: cover;
    background-image: cadetblue;
    /* background-size: 100%; */
}

이런식으로 스와이퍼 이미지 height에 직접적인 vh라는 수치를 줘서 내가 원하는 레이아웃으로 나오지 않은것