패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 서치영역을 만들었다. 아이콘을 삽입하고 JS 코드를 작성해서 서치영역이 동작하도록 하였다
Header
index.html(body tag)
- "javascript:void(0)" : 자바스크립트를 통해서 동작을 시킬 것인데 : 내용이 0(없음). 앞을 어떤 페이지로 이동하도록 만들 것인데 일단은 동작하지 않도록 만드는 임시적인 기능
- 또는 #로 사용 가능 : URL 해시(Hash)인데, 몇 가지 쓰임이 있지만 그 중 CSS ID 선택자를 이용해 페이지 내 특정 위치로 이동할 수 있음
<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>search 영역(css코드)
- header .sub-menu .search input : 사용자가 검색하는 창
- 창이 foucus되었을 때 가로너비가 자연스럽게 늘어나도록 전환효과 부여
- 사용자가 글씨를 작성하는 창이 focus 되었을 때, 가로 너비를 넓히고, 테두리 색을 바꾸어 줌
- search 아이콘은 JS에서 focused class가 생성될 때, 투명도가 0이 되도록 함 : 자연스럽게 되도록 전환효과 부여
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;
}search 영역(js코드)
- 사용자가 서치 아이콘을 눌렀을 때, 아이콘 주변을 눌러도 자연스럽게 input요소가 focus될 수 있도록 만들기 위해서 JS 코드를 작성
- searchEL이라는 변수에 클래스가 "search"인 요소를 CSS 선택자로 찾아서 할당
- searchInputEl에 클래스가 search의 후손 중 input 요소를 CSS 선택자로 찾아서 할당
- searchEL에 addEventListener라는 메소드를 통해 click하면 함수를 실행
- seatchEL을 click하면 searchInputEl가 focus되는 명령을 실행
- searchInputEl이 focus되었을 때, foucused class가 추가되면서 '통합검색'이라는 글씨가 생성되는 명령
- searchInputEl이 focus되지 않을 때(blur될 때), '통합검색'이라는 글씨가 사라지는 명령
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', ' ');
});
♪(^∇^*) 워-후!!（＾∀＾*）ﾉｼ