패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 서치영역을 만들었다. 아이콘을 삽입하고 JS 코드를 작성해서 서치영역이 동작하도록 하였다
<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-outlined">search</div>
</div>
</div>
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;
transition: width .4s;
}
header .sub-menu .search input:focus {
width: 190px;
border-color: #669900;
}
header .sub-menu .search .material-icons-outlined {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
position: absolute;
top: 0;
bottom: 0;
right: 5px;
margin: auto;
transition: .4s;
}
header .sub-menu .search.focused .material-icons-outlined {
opacity: 0;
}
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', ' ');
});