반응형
구현
먼저 HTML에 검색창과 버튼을 생성합니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
<!-- custom style -->
<link rel="stylesheet" href="main.css" />
<script defer src="index.js"></script>
</head>
<body>
<div class="input-box">
<input type="text" class="search">
<i class="fas fa-search fa-2x magnifier"></i>
</div>
</body>
</html>CSS를 활용하여 기본 스타일을 적용합니다.
/* main.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: lightcoral;
}
.input-box {
position: relative;
}
input {
height: 50px;
width: 50px;
border-radius: 15px;
transition: 0.4s ease;
font-size: 1.7rem;
border: none;
}
input:focus {
outline: none;
}
input.expand {
width: 250px;
padding: 0 50px 0 10px;
}
.magnifier {
height: 50px;
width: 50px;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.magnifier::before {
height: 50px;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}마지막으로 자바스크립트에서 클릭이벤트에 스타일을 추가하는 클래스를 토글 합니다.
// index.js
const magnifier = document.querySelector('.magnifier')
const searchBar = document.querySelector('.search')
magnifier.addEventListener('click', () => {
searchBar.classList.toggle('expand')
})이상으로 바닐라 자바스크립트를 활용하여 컴포넌트를 만들어 보았습니다.
728x90
반응형
'프론트엔드 > 자바스크립트' 카테고리의 다른 글
| 반응형 웹 디바이스 구분하기 (3) | 2023.03.23 |
|---|---|
| 라이브러리 - RxJS (0) | 2023.02.15 |
| 자바스크립트 컴포넌트 - 사이드 메뉴 (2) | 2023.02.13 |
| 엔피엠 (0) | 2023.02.01 |
| 자바스크립트 컴포넌트 - 스탭퍼 (0) | 2023.02.01 |
