[카카오테크캠퍼스 선택과정] 스타벅스 예제: 헤더와 드롭다운 메뉴

로고

글자에 비유되는 인라인 요소는 글자가 앉아있는 선(baseline)을 기준으로 배치된다.

img 역시 인라인 요소이기 때문에 이처럼 불편..한 상황이 생길 수 있다.

블록 요소로 바꾸어 공백을 없애자!

img {
  display: block;
}

요소 정렬

auto로 수직 가운데 정렬을 위해서는 height가 필요하다.

.blue {
  background-color: aqua;
  width: 400px;
  height: 300px;
  position: relative;
}
.orange {
  background-color: orange;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

auto로 수평 가운데 정렬을 위해서는 width가 필요하다.

.blue {
  background-color: aqua;
  width: 400px;
  height: 300px;
  position: relative;
}
.orange {
  background-color: orange;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

position vs flex, grid

웹페이지는 일반적으로 모바일, 태블릿, pc 등 다양한 화면 사이즈에 적절히 대응해야 하기 때문에(반응형 레이아웃) 큰 틀은 grid, flex 등을 이용해 만들고, 값을 주어 미세한 조절이 필요할 경우(ex. 1px만 옆으로..!) float, position, margin 등을 사용한다고 볼 수 있다.

---

서브 메뉴

<li>
  <a href="/sigin">Sign In</a>
</li>
<li>
  <a href="#">My Starbucks</a>
</li>
<li>
  <a href="javascript:void(0)">Customer Service & Ideas</a>
</li>

a의 주소에 아직 연결할 페이지가 없는 경우, #이나 javascript:void(0)으로 채워두자!

---

검색

javascript에서 class를 추가, 제거하여 class에 따라 css 스타일 변화를 주는 방법

searchInputEl.addEventListener("focus", function () {
  searchEl.classList.add("focused");
  searchInputEl.setAttribute("placeholder", "통합검색");
});

searchInputEl.addEventListener("blur", function () {
  searchEl.classList.remove("focused");
  searchInputEl.setAttribute("placeholder", "");
});

header .sub-menu .search .material-icons {
  height: 24px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;
  margin: auto 0;
  transition: 0.4s;
}
header .sub-menu .search.focused .material-icons {
  opacity: 0;
}

---

메인 메뉴

z-index : 값이 클수록 화면의 위에 나타난다.

header .main-menu {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  display: flex;
}

hover했을 때 화면의 최상단에 나오기 위해서 z-index 값을 1로 주었다.

 

background-image : 이미지를 배경으로 사용할 수 있다.

header .main-menu .item .item__contents .contents__texture {
  padding: 26px 0;
  font-size: 12px;
  background-image: url("../images/main_menu_pattern.jpg");
}

기본적으로 왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복해서 나타난다.

반복 여부는 background-repeat 속성으로 정한다.

---

BEM

Block Element Modifier의 약자로, html에서 class의 작성법을 의미한다.

요소__일부분 : 요소의 일부분을 표시(ex. item__name)

요소-상태 : 요소의 상태를 표시(ex. btn-success, btn-error)

---

전역 배지(GSAP)

window에 scroll 이벤트를 추가하는 방식은 이처럼 함수를 너무 많이 호출하기에 웹 페이지가 무거워지면 성능 저하가 일어날 수 있다.

그렇다면 사용하자! 라이브러리! 강의에서 나온 4.17.20 버전을 사용했다.

throttle : 지정한 시간동안 이벤트를 발생하지 못하도록 막는 함수

window.addEventListener(
  "scroll",
  _.throttle(function () {
    console.log("SCROLL");
  }, 300)
);
// _.throttle(함수, 시간(ms)) -> scroll 이벤트 처리 시 자주 사용한다고 하니, 기억해두자!

 

애니메이션 효과를 주기 위한 라이브러리 gsap, 강의에서 나온 3.6.0 버전을 사용했다.

window.addEventListener(
  "scroll",
  _.throttle(function () {
    if (window.scrollY > 500) {
      // 뱃지 숨기기
      // gsap.to(요소, 지속시간(s), 옵션)
      gsap.to(badgeEl, 0.6, {
        opacity: 0,
        display: "none",
      });
    } else {
      // 뱃지 보이기
      gsap.to(badgeEl, 0.6, {
        opacity: 1,
        display: "block",
      });
    }
  }, 300)
);