index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Starbucks 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.2/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">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="./css/main.css" />
<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
/* COMON */
body {
color: #333;
font-size: 16px;
font-weight: 400px;
line-height: 1.4; /*줄 높이*/
font-family: 'Nanum Gothic', sans-serif;
}
img {
display: block;
}
a {
text-decoration: none;
}
/* HEADER */
header {
background-color: #f6f5f0;
border-bottom: 1px solid #c8c8c8;
}
header .inner {
width: 1100px;
height: 120px;
margin: 0 auto;
position: relative;
}
header .logo {
height: 75px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
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; /*position absolute가 있어 이 부분은 없어도 상관 없음 */
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 .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
}
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.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', '');
});728x90
반응형
'혼자 이것저것 공부해보는 > 스타벅스 클론 코딩' 카테고리의 다른 글
| 스타벅스 클론코딩 #5 요소 슬라이드 - 수직슬라이드 (Swiper) (0) | 2024.02.07 |
|---|---|
| 스타벅스 클론코딩 #4.순차적 애니메이션 (0) | 2023.11.28 |
| 스타벅스 클론코딩 #3 배지 만들기 (0) | 2023.11.04 |
| 스타벅스 클론코딩 #2. 메인 메뉴 (0) | 2023.11.02 |
| 스타벅스 클론코딩 #1. 헤더만들기 (0) | 2023.10.11 |
