패스트캠퍼스 챌린지 15일차 - Part 1. 스타벅스 예제(3

8. 헤더와 드롭다운 메뉴 - 메인메뉴 (1)

메인메뉴 부분은 어려운 기술이 쓰이는 것은 아니었지만 태그 구조가 복잡해서 따라가기 어려웠다.
css에 이름을 쓰다보면 굉장히 길어지는데, 이 부분은 scss를 이용해서 개선할 수 있다고 한다.

9. 헤더와 드롭다운 메뉴 - 메인메뉴 (2)

header .main-menu .item .item__contents .contents__menu > ul {
 /* ul 태그가 여러개이므로 자식 선택자 사용! */
}

header .main-menu {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  display: flex;
}
header .main-menu .item {
  
}
header .main-menu .item .item__name {
  padding: 10px 20px 34px 20px;
  font-family: Arial, sans-serif;
  font-size: 13px;
}
header .main-menu .item:hover .item__name{
  background-color: #2c2a29;
  color: #669900;
  border-radius: 6px 6px 0 0;
}
header .main-menu .item .item__contents {
  width: 100%;
  position: fixed;
  left: 0;
  display: none;
}
header .main-menu .item:hover .item__contents {
  display: block;
}
header .main-menu .item .item__contents .contents__menu {
  background-color: #2c2a29;
}
header .main-menu .item .item__contents .contents__menu > ul{
  display: flex;
  padding: 20px 0;
}
header .main-menu .item .item__contents .contents__menu > ul > li {
  width: 220px;
}
header .main-menu .item .item__contents .contents__menu > ul > li h4{
  padding: 3px 0 12px 0;
  font-size: 14px;
  color: #fff;
}
header .main-menu .item .item__contents .contents__menu > ul > li ul li{
  padding: 5px 0;
  font-size: 12px;
  color: #999;
  cursor: pointer;
}
header .main-menu .item .item__contents .contents__menu > ul > li ul li:hover{
  color: #669900;
}
header .main-menu .item .item__contents .contents__texture {
  padding: 26px 0;
  height: 100px;
  font-size: 12px;
  background-image: url("../images/main_menu_pattern.jpg");
}
header .main-menu .item .item__contents .contents__texture h4 {
  color: #999;
  font-weight: 700;
}
header .main-menu .item .item__contents .contents__texture p {
  color: #669900;
  margin: 4px 0 14px;
}

메인 메뉴를 hover하면 메뉴가 펼쳐진다.

10. 헤더와 드롭다운 메뉴 - BEM

BEM (Block Element Modifier)

: HTML 클래스 속성의 작명법

요소__일부분 : UUnderscore(Lodash) 기호로 요소의 일부분을 표시

요소—상태 : Hyphen(Dash) 기호로 요소의 상태를 표시

<!-- 예시 -->
<div class="container">
  <div class="name">
    <div class="item">
      <div class="name"></div>
    </div>
  </div>
</div>
<!-- name이 중복됨 -->

<div class="container">
  <div class="container__name">
    <div class="item">
      <div class="item__name"></div>
    </div>
  </div>
</div>
<!-- name이 중복되지도 않고, 어떤 태그의 일부분인 지 알기 쉬움 -->

<div class="btn primary"></div>
<div class="btn success"></div>
<div class="btn error"></div>
<!-- btn과 뒤의 단어를 매칭하기 어려움 -->

<div class="btn btn--primary"></div>
<div class="btn btn--success"></div>
<div class="btn btn--error"></div>
<!-- 클래스 이름의 역할 유추 가능 -->

11. 헤더와 드롭다운 메뉴 - 전역배지(GSAP) (1)

1. 스크롤 내려도 움직이지 않게 header position : fixed 설정

• position이 absolute, fixed인 요소는 너비가 최소한으로 줄어들게 됨.
  → width : 100%;

2. 스크롤 내리면 뱃지 사라졌다가 올리면 다시 나타나게 하기

window // 브라우저 창

window.addEventListener('scroll', function(){
  console.log('scroll');
});
// scroll 될 때마다 실행되므로 부담이 큼

// lodash cdn 검색 후 link
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

window.addEventListener('scroll', _.throttle(function(){
  console.log('scroll');
}, 300));
// lodash에서 제공하는 throttle이라는 함수를 사용해서 0.3초마다 실행되게 바꿔줌
// _.throttle(함수, 시간)

12. 헤더와 드롭다운 메뉴 - 전역배지(GSAP) (2)

애니메이션 자연스럽게

gsap cdn 사용

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js" integrity="sha512-f8mwTB+Bs8a5c46DEm7HQLcJuHMBaH/UFlcgyetMqqkvTcYg4g5VXsYR71b3qC82lZytjNYvBj2pf0VekA9/FQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

window.addEventListener('scroll', _.throttle(function(){
  console.log(window.scrollY);
  if (window.scrollY > 300) {
    // 배지 숨기기
    // gsap.to(요소, 지속시간, 옵션);
    gsap.to(badgeEl, .6, {
      opacity: 0,
      display: 'none'
    }); // 0.6초에 걸쳐서 점점 투명해지는 애니메이션
  } else {
    gsap.to(badgeEl, .6, {
      opacity: 1,
      display: 'block'
    }); // 0.6초에 걸쳐서 점점 보여지는 애니메이션
  }
}, 300));

우측 광고 배지가 스크롤에 따라 나타났다가 사라졌다가 한다.

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.