스타벅스 만들기 2 - 헤더 (header)

로고 (logo)

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

a 태그를 이용하여 특정 페이지로 이동할 수 있도록 해준다. 이때 href="/"를 입력함으로써 로고 클릭 시 메인 페이지로 이동한다는 것을 의미한다.

img {
  display: block;
}

이미지는 inline 요소이기에 하단에 불필요한 백이 생길 수 있다.
이때 이미지를 block 요소로 지정함으로써 불필요한 하단 여백이 생기는 것을 방지할 수 있다.

absolute

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

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

부모요소에 position: relative; 속성을 추가하고 logo에 position: absolute; 속성과 margin: auto; 속성을 추가함으로써 가운데 정렬하도록 하였다.
top: 0;와 bottom: 0;을 속성을 추가해야지만 수직 중앙 정렬을 할 수 있다.

링크

<li>
  <a href="javascript:void(0)">My Starbucks</a>
</li>

javascript:void(0)를 사용함으로써 a 태그에 아무 동작도 하지 않도록 할 수 있다.
(javascript:void(0) 대신 #를 사용가능하나 # 사용 시 실제 #로 이동하기에 javascript:void(0)를 사용하는 것을 추천)

before

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

가상요소 ::before을 사용함으로써 해당 요소의 앞에 특정 요소를 추가할 수 있다.

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

:first-child을 사용함으로써 첫번째 태그에는 가상요소가 출력되지 않도록 할 수 있다.

focus

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

해당 태그를 포커스(클릭 시)하는 동안 해당 속성을 추가해준다.
위 코드에서는 가로 길이와 테두리 색을 바꿔준다.

:hover

header .main-menu .item .item__contents {
  width: 100%;
  position: fixed;
  left: 0;
  display: none;
}

header .main-menu .item:hover .item__contents {
  display: block;
}

상단 메뉴를 터치하고 있는 동안 하단 메뉴가 나오도록 해준다.
기본으로 display: none 속성을 통해 해당 메뉴가 출력되지 않도록 한 후 :hover 속성을 통해 해당 메뉴에 마우스가 이동해있을 때 disply: block을 통해 출력되도록 해준다.