11일차

금토일 3일간 못 올린것 반성

열심히 하자

헤더 만들기

헤더

 <!-- HEADER -->
    <header>
        <div class="inner">

            <a href="/" class="logo">
                <img src="./images/starbucks_logo.png" alt="STARBUCKS">
            </a>

        </div>    
    
    </header>

/* COMMON */
body {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  font-family: 'Nanum Gothic', sans-serif;
}
img {
  display: block;
}

/* HEADER */
header {
  background-color:  royalblue;
}
header .inner {
  width: 1100px;
  height: 120px;
  margin: 0 auto;
  background-color: orange;
  position: relative; 로고 포지션 absoulute 사용시 지정
}
header .logo {
  height: 75px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;  로고는 왼쪽에 붙어있다 명시
  margin: auto;
}

css 헤더.로고에서
height: 75px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
요소를 수직 가운데 배치 시킴
margin auto를 사용하기위해서는 height값이 알려줘야함 (수직 가운데정렬)

서브메뉴

<div class="sub-menu">
        <ul class="menu">
          <li>
            <a href="/signin">Sign In</a>
          </li>
          <li>
            <a href="javascript:void(0)">My Starbucks</a>
          </li>
          <li>
            <a href="javascript:void(0)">Customer Service & Ideas</a>
          </li>
          <li>
            <a href="javascript:void(0)">Find a Store</a>
          </li>
        </ul>
        <div class="search">
          <input type="text" />
          <div class="material-icons">search</div>
        </div>
      </div>

/* COMMON */
body {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  font-family: 'Nanum Gothic', sans-serif;
}
img {
  display: block;
}
a {
  text-decoration: none; 밑줄 제거
}


/* HEADER */
header {
  background-color:  #f6f5f0;
  border-bottom: 1px solid #c8c8c8;
}
header .inner {
  width: 1100px;
  height: 120px;
  margin: 0 auto;
  position: relative;
}
header .logo {
  height: 75px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;

}

header .sub-menu {
  position: absolute; 서브메뉴 오른쪽으로 위치시키기 위함
  top: 10px;
  right: 0px;
  display: flex; 
}
header .sub-menu ul.menu {
  font-family: Arial, sans-serif;
  display: flex; 수평만들기
}
header .sub-menu ul.menu li {
  position: relative;
}
header .sub-menu ul.menu li::before {
  content:"";
  display: block;
  width: 1px;
  height: 12px;
  background-color: #e5e5e5;
  position: absolute;  항상 상위요소 relative 확인후 지정
  top: 0;
  bottom: 0;
  margin: auto;
}
header .sub-menu ul.menu li:first-child:before {
  display: none;  구분선 앞에 사라지게 만드는 용도
}
header .sub-menu ul.menu li a {  
  font-size: 12px;
  padding: 11px 16px; 클릭하는 범위 넓히는 방법
  display: block; 범위 넓히기 위해 블록요소로 바꾸기 
  color: #656565;

}
header .sub-menu ul.menu li a:hover {
  color: #000; 
}


header .sub-menu .search {
  height: 34px;
  position: relative;
}
header .sub-menu .search input {
  width: 36px;
  height: 34px;
  padding: 4px 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 5px;
  outline: none;
  background-color: #fff;
  color: #777;
  font-size: 12px;
  transition: width .4s;
}
header .sub-menu .search input:focus {
  width: 190px;  포커스 되었을때 넓이 커지게
  border-color: #669900;

}
header .sub-menu .search .material-icons {
  height: 24px; 아이콘높이값은 24px 수직 가운데 정렬하기위해 높이 지정
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;
  margin: auto;
  transition: .4s; 서서히 사라지게 만들기 
}
header .sub-menu .search.focused .material-icons {
  opacity: 0;  돋보기 사라지게 만들기
  
}

//돋보기아이콘을 눌러도 포커스가 되기위해 자바스크립트 이용 

const searchEl = document.querySelector('.search');
// search인것을 찾아 searchEl에 할당. document는 전체 html자체다 라도 해도 무방

const searchInputEl = searchEl.querySelector('input');
// search에 input요소를 찾아 searchInputEl에 할당

searchEl.addEventListener('click', function () {
    searchInputEl.focus();
});
// search라는 요소를 클릭하면 함수 실행  클릭되면 input요소에 포커스를 해라

searchInputEl.addEventListener('focus', function () {
    searchEl.classList.add('focused');
    searchInputEl.setAttribute('placeholder', '통합검색');
});
// 포커스가 되면 focused 추가

searchInputEl.addEventListener('blur', function () {
    searchEl.classList.remove('focused');
    searchInputEl.setAttribute('placeholder', '');
});
// 블러 되면 focused 제거