[스타벅스 웹사이트] 메인 메뉴, 드롭다운 메뉴

메인, 드롭다운 메뉴

 

inner

<div class="inner">

.inner {
  width: 1100px;
  margin: 0 auto;
  position: relative;
}

한 줄의 컨텐츠를 가운데로 몰아넣을 때 주로 사용하는 클래스명

---

BEM (Block Element Modifier)

HTML 클래스 속성의 작명법

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

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

---

/* header */
header {
  width: 100%;
  background-color: #f6f5f0;
  border-bottom: 1px solid #c8c8c8;
  position: fixed;
  top: 0;
}

position fixed or absolute 로 변경하면 요소가 width의 최대치가 아닌 최소치를 향하도록 변경됨

따라서 width: 100%를 같이 적용

 

---

document : html 문서

window : 브라우저 창

---

외부 라이브러리

lodash.js throttle : scroll 부하 방지

gsap.js : antimation 효과