헤더 로고, 서브메뉴, 검색창 만들기

1. 로고

- 높이 75px

 

2. 서브메뉴

- 기본 : 12px / #656565 / padding 11 16 / 폰트 Arial

- hover : #000

- 가상 선택자로 구분선 만들기 : #e5e5e5 / 높이12px

 

3. 검색창

- 기본 : 36x34px / padding 4 10 / 선 #ccc / 선 파란색 없애기 / 폰트 12px / 돋보기 24px

- focus : 가로 190px / 선 #669900 / 너비만 0.4초로 늘어나기 / "통합검색" / 돋보기 아이콘 사라지기

- blur : "통합검색" 사라지기, 돋보기 아이콘 생기기

+ 돋보기 아이콘을 클릭해도 input창이 넓어지게 만들기 

 

4 header

- 배경 #f6f5f0, 밑줄 #c8c8c8

- inner 가로사이즈 1100px

 

 

---

 

 

1. 가운데 정렬, 로고 위치

📌margin으로 정렬하려면 height 혹은 width가 우선되어야 함

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

header .logo {
  height: 75px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

 

2. 서브메뉴

📌서브메뉴의 크기와 폰트는 <a>태그에서

    ㄴ <a>태그는 inline이므로 display를 block으로 변경

    ㄴ <a>태그의 padding으로 서브메뉴의 크기를 지정

    ㄴ font-size, color도 <a>태그에서 지정해주어야 링크색(파란색)을 제거할 수 있음

 

📌가상 선택자로 li앞에 구분선 만들기 

    ㄴ 가상 선택자 before는 항상 content속성을 가짐

    ㄴ 구분선은 width, height, background-color으로 보여짐

    ㄴ 구분선의 위치는 position과 margin으로 지정

 

📌검색창

    ㄴ <input>태그에서 box-sizing에 유념

    ㄴ 돋보기 아이콘은 position으로 위치 지정

<div class="inner">

      <a href="/" class="logo">

        <img src="./images/starbucks_logo.png" alt="STARBUCKS" />

      </a>

      <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" />

          <span class="material-icons">search</span>

        </div>

      </div>

</div>

header .sub-menu {
  position: absolute;
  top: 10px;
  right: 0;
  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;
  top: 0;
  bottom: 0;
  margin: auto;
}
header .sub-menu ul.menu li:first-child::before {
  display: none;
}
header .sub-menu .search {
  position: relative;
  height: 34px;
}
header .sub-menu .search input {
  width: 36px;
  height: inherit;
  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;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;
  margin: auto;
  transition: .4s;
}

 

 

3. 아이콘이미지를 눌러도 input 너비 넓어지게 만들기

📌querySelector는 클래스명, 태그명을 모두 찾아주는 DOM API로 클래스를 쓸 때는 반드시 온점(.)을 추가해야 한다.

(힌트)

클래스선택자search와 input태그를 이용하여 클릭이벤트가 발생했을 때 input태그에 focus하시오.

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

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

 

 

4. Input focus / blur 됐을 때 : 통합검색, 아이콘 변경

- 검색창에 "통합검색" 추가, 돋보기 아이콘 사라지기

- 검색창에 "통합검색" 삭제, 돋보기 아이콘 나타나기

4-1. Input태그에 focus됐을 때 클래스선택자search에 focused 클래스를 추가하시오

4-2. Input태그에 focus됐을 때 input태그에 placeholder='통합검색' 속성을 추가하시오

4-3. Input태그에 blur됐을 때 클래스선택자search에 focused 클래스를 제거하시오

4-4. Input태그에 blur됐을 때 input태그에 placeholder='' 속성을 추가하시오

4-5. 돋보기 아이콘를 투명도 0으로 0.4초 트랜지션 하시오 

(힌트)

addEventListener, focus, blur, classList, add, remove, setAttribute

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

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