써치킴의 우당탕탕 개발 블로그

[HTML/CSS][Ch9][스타벅스] 헤더와 드롭다운 메뉴 - 검색 본문

알아두자 HTML, CSS

[HTML/CSS][Ch9][스타벅스] 헤더와 드롭다운 메뉴 - 검색

써치킴 2022. 1. 10. 21:02

index.html

<!DOCTYPE html>
<html lang="kor">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>startbucks Coffee Korea</title>
  <!-- 오픈그래프 -->
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Starbucks" />
  <meta property="og:title" content="Starbucks Coffee Korea" />
  <meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
  <meta property="og:image" content="./images/starbucks_seo.jpg" />
  <meta property="og:url" content="https://starbucks.co.kr" />
  <!-- 트위터카트 -->
  <meta property="twitter:card" content="summary" />
  <meta property="twitter:site" content="Starbucks" />
  <meta property="twitter:title" content="Starbucks Coffee Korea" />
  <meta property="twitter:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
  <meta property="twitter:image" content="./images/starbucks_seo.jpg" />
  <meta property="twitter:url" content="https://starbucks.co.kr" />
  <!-- 파비콘 -->
  <link rel="icon" href="./favicon.png">
  <!-- 브라우저 스타일 초기화 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
  <!-- 폰트 태그  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap" rel="stylesheet">
  <!-- google meterial icons 추가 -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <!-- css 연결 -->
  <link rel="stylesheet" href="./css/main.css">
  <!-- js 연결 -->
  <script defer src="./js/main.js"></script>
</head>
<body>

  <!-- HEADER -->
  <header>
    <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">
          <div class="material-icons">search</div>
        </div>
      </div>
 
    </div>
  </header>

</body>
</html>

main.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 태그는 선 사용 X */
a {
  text-decoration: none;
}
.inner {
  width: 1100px;
  margin: 0 auto;
  position: relative;    /* 자신 기준 */
}

/* HEADER */
header {
  background-color: #f6f5f0;
  border-bottom: 1px solid #c8c8c8;
}
header > .inner {
  height: 120px;
}
header .logo {
  height: 75px;
  position: absolute;   /* 부모 기준 */
  top: 0 ;
  bottom: 0;
  left: 0;
  margin: auto;
}
header .sub-menu {
  position: absolute;
  top: 10px;
  right: 0;
  display: flex;
}
header .sub-menu ul.menu {
  font-family: Arial, sans-serif; /* 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;
}
/* 제일 왼쪽 구분선 display : none 처리 */
header .sub-menu ul.menu li:first-child:before {
  display: none;
}
/* a 태그가 인라인 요소이기 때문에 display: block을 추가해서 블록요소로 사용 */
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;  /* 가로길이 0.4초동안 전환효과 */
}
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;
}
header .sub-menu .search.focused .material-icons {
  opacity : 0;
}

main.js

const searchEl = document.querySelector('.search');
const searchInputEl = searchEl.querySelector('input');    // searchEl 안에서 input 요소를 찾음

// search라는 클래스를 갖고 있는 요소를 클릭하면 input 요소에 포커스하라.
searchEl.addEventListener('click', function () {
  searchInputEl.focus();
});

// input 요소가 포커스되면 search 클래스 요소에 focused라는 클래스 추가
searchInputEl.addEventListener('focus', function () {
  searchEl.classList.add('focused');
  // input 요소에 placeholder : 통합검색 설정
  searchInputEl.setAttribute('placeholder', '통합검색');    
});

// 포커스 해제됐을 때
searchInputEl.addEventListener('blur', function () {
  searchEl.classList.remove('focused');
  // input 요소에 placeholder : 통합검색 설정
  searchInputEl.setAttribute('placeholder', '');    
});

출력

'알아두자 HTML, CSS' 카테고리의 다른 글

[HTML/CSS][Ch9][스타벅스] 헤더와 드롭다운 메뉴 - BEM  (0) 2022.01.18
[HTML/CSS][Ch9][스타벅스] 헤더와 드롭다운 메뉴 - 메인 메뉴  (0) 2022.01.18
[HTML/CSS][Ch9][스타벅스] 헤더와 드롭다운 메뉴 - 서브 메뉴  (0) 2022.01.10
[HTML/CSS][Ch9][스타벅스] 헤더와 드롭다운 메뉴 - 로고  (0) 2022.01.10
[HTML/CSS][Ch9][스타벅스] 시작하기 4 - Google Material Icons  (0) 2022.01.06
'알아두자 HTML, CSS' Related Articles more
Comments