13일차

BEM과 전역배지

스타벅스예제 실습 이어서 진행

BEM과 전역배지

BEM

BEM (Block Element Modifier)

• HTML 클래스 속성의 작명법
• 요소__일부분 Underscore(Lodash) 기호로 요소의 일부분을 표시
• 요소--상태 Hyphen(Dash) 기호로 요소의 상태를 표시

전역배지

  <div class="badges">
      <div class="badge">
        <img src="./images/badge1.jpg" alt="Badge">
      </div>
      <div class="badge">
        <img src="./images/badge2.jpg" alt="Badge">
      </div>
    </div>

header .badges {
  position : absolute;
  top: 132px;
  right: 12px;
}
header .badges .badge {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 4px 4px 10px rgba(0,0,0,.15);
  cursor: pointer;
}

/*헤더에 position fixed; top: 0; width: 100%; 추가 */

const badgeEl = document.querySelector('header .badges');

window.addEventListener('scroll', _.throttle(function () {
    console.log(window.scrollY);
    if (window.scrollY > 500) {
        // 배지 숨기기
        //gsap.to(요소, 지속시간, 옵션);
        gsap.to(badgeEl, .6, {
            opacity: 0
            display: 'none'
        });
    } else {
        // 배지 보이기
        gsap.to(badgeEl, .6, {
            opacity: 1
        });
        
    }
}, 300) );
// _.throttle(함수, 시간)  시간: 1000 = 1초

포지션 absolute 와 fixed로 부여된 요소는 가로값을 최소한 줄어들려고 함
lodash cdn 스로틀 사용
gsap cdn 애니메이션 사용
display: 'none' 뱃지가 사라져도 클릭되는 현상 방지