[스타벅스 웹사이트] 헤더 메뉴

common

img block 전환

img {
  display: block;
}

img tag로 불러온 이미지 밑에 빈 영역 존재

img tag는 인라인 요소이고, 인라인 요소(글자)는 baseline 밑으로 추가 공간이 존재함

따라서 빈 영역을 없애기 위해서는 img tag를 블록 요소로 변경해주어야함(display:block)

 

a tag 밑줄 제거

a {
  text-decoration: none;
}

---

수직 / 수평 정렬(가운데 정렬)

widht: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

width나 height 값이 존재하는 요소에 

position: absolute로 배치 적용(부모에 position: relative 확인)

top,bottom(수직), left,right(수평): 0과 margin: auto 적용

---

header menu

 

menu 정렬 flex

header .sub-menu ul.menu {
  display: flex;
}

 

menu bar

header .sub-menu ul.menu li::before {
  content: "";
  width: 1px;
  height: 12px;
  background-color: #e5e5e5;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

li::before에 영역을 잡고, 정렬 후 표현

header .sub-menu ul.menu li:first-child:before {
  display: none;
}

첫번째 li에서는 display:none으로 제거

---

검색창

        <div class="search">
          <input type="text">
          <div class="material-icons">search</div>
        </div>

 

input focus 시에 outline 생기는 현상 없애기

outline: none;

 

검색 아이콘 클릭 시에 input focus 주기

const searchEl = document.querySelector('.search');
const searchInputEl = searchEl.querySelector('input');

searchEl.addEventListener('click', function(){
  searchInputEl.focus();
});

 

focus, blur에 따른 input 효과 주기

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

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