HTML CSS JS를 활용하여 Transition 효과가 들어간 검색 박스를 구현한다.
1. HTML 구현
- search 클래스 div를 생성
- search div 내에 input 태그 생성
- material-icons 클래스를 갖는 span 태그 생성
- material-icons 클래스는 구글에서 제공하는 아이콘들을 이용하기 위한 방법으로 내용(content)로 아이콘 명을 작성하면 해당 아이콘이 삽입됨 https://fonts.google.com/icons
- 구글에서 제공하는 material-icons를 활용하기 위해 <head>태그 안에 아래 코드 삽입 (삽입 위치는 js파일, css파일 위에 작성하는 것이 좋음)
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons" />
2. CSS 구현
/* 높이와 하위 항목 position absolute 지정을 위한 position relative 지정 */
header .sub-menu .search {
height: 34px;
position: relative;
}
/* 입력 창 디자인 설정 */
/* 입력창 클릭시 창 확장을 위한 transition 적용 */
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 0.4s;
}
/* 입력창 focus된 경우 width 확장 */
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: 0.4s;
}
/* 검색아이콘 사라지도록 설정 */
header .sub-menu .search.focused .material-icons {
opacity: 0;
}
3. Javascript 구현
const searchEl = document.querySelector(".search");
const searchInputEl = searchEl.querySelector("input");
//search 영역 클릭 시 입력창에 focus되도록
searchEl.addEventListener("click", function () {
searchInputEl.focus();
});
// 입력창이 포커스 이벤트 호출시 search클래스에 focused클래스 추가
// 입력창에 placeholder 입력
searchInputEl.addEventListener("focus", function () {
searchEl.classList.add("focused");
searchInputEl.setAttribute("placeholder", "통합검색");
});
// 입력창에 focus가 없어지는 경우 search클래스에 focused클래그 제거
// 입력창에 placeholder 제거
searchInputEl.addEventListener("blur", function () {
searchEl.classList.remove("focused");
searchInputEl.setAttribute("placeholder", "");
});
쉽게 생각한 경우 search영역에 click 이벤트를 구현하지 않아도 input 태그에 focus 이벤트가 호출될 수 있다.
하지만 input 입력창 위에 아이콘이 위치(덮고 있음)하여 focus 이벤트가 호출되지 않을 수 있다.
그래서 search 영역 전체에 click 이벤트를 구현하여 input에 강제로 focus가 되도록 한다.
본 포스팅 내용은 "Starbucks Clone 코딩 강의"의 내용을 정리한 것이다.
'FrontEnd' 카테고리의 다른 글
| [html css js] 이미지 순차적으로 나타내는 효과 (0) | 2022.02.20 |
|---|---|
| [HTML CSS JS] 우측에 고정 배너 구현하기 (0) | 2022.02.06 |
| [HTML JS] data 속성(data attribute) (0) | 2022.01.23 |
| [CSS] 브라우저 스타일 초기화 (0) | 2022.01.22 |
| [CSS] favicon(파비콘) (0) | 2022.01.18 |
댓글