2. 스타벅스 로고, header, 서브메뉴, 검색

로고(Logo)

로고부터 살펴보면

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

로고는 a 태그로 img 태그를 묶어서 로고를 누르면 현재 페이지로 갈 수 있게 만든다.

a태그에 있는 '/'의 의미

- '/'는현재 페이지를 의미한다.

 

logo에 적용되는 CSS 를 살펴보면 아래와 같다.

img {
  display: block;
}
a {
  text-decoration: none;
}

img 태그를 인라인 요소가 아닌 블록 요소로 만들고 상하좌우 변경이 쉽게 할 수 있도록 한다.

block : 한 줄 모두 차지

inline : 콘텐츠 크기 만큼만 차지

 

a 태그는 원래 밑줄이 생기지만 밑줄을 없애는 기능을 한다.

 

logo 클래스에 적용되는 CSS를 살펴보면

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

세로는 75px이고 inner 클래스를 부모 요소로 둬서 inner를 기준으로

top:0, bottom:0, left:0에 margin: auto로 하여 가운데 정렬하고 왼쪽에 로고가 위치할 수 있도록 한다.

---

CSS 헤더 & inner

이번에는 header 아래에서 구성하는 대부분 요소를 inner class로 묶는다.

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

inner 클래스의 css 속성을 보면 

가로는 1100px, margin은 0 auto로 하여 가운데 정렬을 하고

position을 relative로 하여 요소를 자기 자신 기준으로 배치한다.

자식 요소들은 inner를 기준으로 잡을 것이다.

 

/* HEADER */
header {
  background-color: #f6f5f0;
  border-bottom: 1px solid #c8c8c8;
}
header > .inner { 
  /* 1단 inner만 */
  height: 120px;
}

HEADER라는 주석을 달아줘서 다른 사람이 봐도 알아볼 수 있도록 한다.

그리고 header > .inner란 1단 inner만을 말하는 것이다.

바로 아래 inner 클래스만 세로 120px을 적용하라는 코드이다.

#f6f5f0의 색상이 1단을 차지한다.

 

---

스타벅스 헤더 서브메뉴 

 

스타벅스 헤더 서브메뉴 html

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

헤더 서브 메뉴의 html이다. 

서브메뉴는 아래 사진을 담당한다.

 

이 부분이 서브 메뉴이다.

ul 태그로 li 태그를 묶고 li 태그는 a 태그를 묶어 각각의 서브메뉴 안으로 이동 할 수 있도록 만든 것이다.

a태그안에 경로를 설정해주어야 한다.

로그인하는 Sign In 서브메뉴는 만들어 볼 것이기 때문에 경로를 설정해주고

나머지 서브메뉴는 만들지 않을 것이다.

하지만 홈페이지는 구현해야 하기 때문에 javascript:void(0)을 경로에 넣어주었다.

javascript:void(0)

a 태그의 디자인성은 살리면서 링크 기능은 없앤 것이다.

javascript:void(0) 대신 #을 사용해도 된다.

---

스타벅스 헤더 서브메뉴 CSS

header .sub-menu {
  position: absolute;
  top: 10px;
  right: 0;
  display: flex;
}

서브메뉴는 부모 요소를 기준으로 설정한다.

헤더에서 위로 10px, 오른쪽으로 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: "";
  width: 1px;
  height: 12px;
  background-color: #e5e5e5;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
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 ul.menu {
  font-family: Arial, sans-serif;
  display: flex;
}

나눔고딕을 이 웹페이지의 기본 폰트로 사용했지만 

서브메뉴는 나눔고딕과 어울리지 않기 때문에 Arial 폰트를 사용했다.

그리고 display: flex를 하여 수평정렬하였다.

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

li 태그는 absolute로 하여 부모요소를  기준으로 배치한다.

li 태그 앞에 작은 구분선이 있다. 그것을 만들기 위해

content는 공백으로 해놓고, 가로 1px, 세로 12px짜리를 만든다.

색은 #e5e5e5로 하고

position을 자기로 기준을 삼는다.

위아래 0만큼 공백을 주고 위아래 가운데로 정렬을 주었다.

 

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

하지만 첫번째 요소에는 우리가 만든 이러한 요소를 적용하지 않게 하려고

display:none을 적용했다.

Sign In 앞에는 구분선이 없어졌다.

header .sub-menu ul.menu li a {
  font-size: 12px;
  padding: 11px 16px;
  display: block;
  color: #656565;
}

a 태그는 글자의 속성을 담당하기 때문에

font-size는 12px, 글자 인라인 요소에 11px, 16px만큼 여유를 주고

display를 블록요소로 한다.

글자색은 #656565로 한다.

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

hover 선택자는 요소를 마우스에 올렸을 때 반응하는 요소이다.

글자 색이 #656565였는데 #000 즉, 검은색으로 바뀐다.

---

스타벅스 헤더 서브메뉴 검색 html

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

서브메뉴 안에 있는 검색 아이콘과 검색창을 자세히 살펴볼 것이다.

search라는 클래스를 선언하고 input type을 text로 하여 텍스트를 입력할 수 있도록 설정한다.

material-icons 클래스를 선언하고 안에 search를 넣으면

검색 아이콘이 만들어진다.

위 코드에 아이콘을 사용할 것이라는 코드를 사용했기 때문에 클래스 안에 글자를 계속 바꾸면 구글 아이콘 사이트안에 있는

아이콘들을 사용할 수 있게 된다.

---

스타벅스 헤더 서브메뉴 검색 CSS

header .sub-menu .search {
  height: 34px;
  position: relative;
}

search 클래스는 세로로 34px, 포지션은 부모요소를 기준으로 한다.

그리고 클릭을 했을 때 글자를 삽입하기에는 너무 크기가 작다.

그러므로 마우스 클릭을 했을 때 변화를 따로 css 속성을 입력해주어야 한다.

 

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;
}

input 요소는 가로 36px, 세로 34px이고

인라인 요소는 padding을 이용해 위아래 4px, 좌우 10px 여백을 준다.

테두리는 1px solid로 색은 #ccc로 한다.

box-sizing은 border-box로 하여 

border-box까지를 기준으로 계산한다.

테두리는 radius 5px로 설정하여 둥글게 만들어주고

outline: border의 바깥 테두리를 의미하는데 이 바깥 테두리를 없이 한다.

배경: #fff

통합검색이 나올 글씨 색은 #777로 한다.

font-size는 12px로 한다.

클릭을 했을 때 가로가 변화하는 속도는 0.4s로 한다.

 

header .sub-menu .search input:focus {
  width: 190px;
  border-color: #669900;
}

클릭을 했을 때 가로 길이는 190px까지 늘리고

border 색은 #669900으로 바뀌게 된다.

---

스타벅스 헤더 서브메뉴 검색 JS

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

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

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

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

JS를 이용하여 글씨와 아이콘이 같이 나오는 것을 수정할 수 있다.

일단 searchEl이라는 변수를 이용하여 문서에서 search 클래스를 찾는다.

searchInputEl은 searchEl에서 input 태그를 찾는다. 

문서에서 찾게 되면 중복 적용되기 때문에 searchEl로 범위를 줄여놓고 찾은 것이다.

 

addEventListener을 이용하여 클릭을 하면 focus를 찾게 함수를 만든다.

 

classList.add를 이용하여

focus가 맞춰지면 focused를 클래스 리스트에 추가하면 아래 사진과 같이

사진 1에서는 class가 search였지만 focus 상태에서는 focused가 추가된 걸 볼 수 있다.

하지만 focus가 안맞춰진 상태는 blur고 그 상태에서는

classList.remove를 이용하여 focused가 추가된 것이 없어진다.

그리고 focus 상황에서 보이던 통합검색도 보이지 않게 된다.

이처럼 자바스크립트를 이용하여 글자와 아이콘이 중복되어 보였던  현상이 없어졌다.

 

다음 글은 메인 메뉴에 대한 글이다.