헤더와 드롭다운 메뉴 - 로고

가장 기본적인 COMMON CSS 작성 및 헤더 영역 정리, 로고 정렬

코드

HTML

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

CSS

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

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


/* HEADER */
header {
  width: 100%;
  background-color: #f6f5f0;
  border-bottom: 1px solid #c8c8c8;
  position: fixed;
  top: 0px;
  z-index: 9;
}

header>.inner {
  height: 120px;
}

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