대화형 GUI 요소로 애플리케이션을 더 쉽게 사용할 수 있습니다. HTML에는 기본적으로 여러 양식 구성 요소가 포함되어 있지만 디자인에 맞게 CSS를 사용하는 것이 좋습니다. JavaScript를 사용하여 동작을 확장하거나 수정할 수도 있습니다.
이러한 구성 요소는 Tailwind와 같은 라이브러리를 사용하여 만들 수 있지만 처음부터 만드는 방법도 알아두면 유용합니다.
HTML, CSS 및 JavaScript를 사용하여 숨겨진 검색창을 만드는 방법을 알아보세요.
HTML로 콘텐츠 구조 만들기
다음은 해당 기능의 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" />
<script src="https://kit.fontawesome.com/d69fb28507.js" crossorigin="anonymous"></script>
<title>Hidden Search Bar</title>
</head>
<body>
<div class="parent">
<input class="input" type="type" placeholder="Search..." />
<button class="btn">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</div>
</body>
</html>
CSS를 사용하여 인터페이스 스타일 지정
CSS 파일에서 부모 요소에 상대 위치를 지정해야 합니다. 상대 위치는 입력 및 버튼 요소가 부모 요소를 중심으로 이동할 수 있도록 합니다. CSS 위치 속성은 여러 유형의 레이아웃을 제어하므로 이해해야 할 중요한 속성입니다.
또한 가시성을 높이기 위해 두 요소를 중앙에 정렬합니다. 하지만 애플리케이션에서는 원할 때마다 검색창을 표시하도록 선택할 수 있습니다. 또한 두 요소의 너비를 동일하게 설정하여 한 요소가 다른 요소보다 크지 않고 같은 크기로 보이도록 합니다.
그런 다음 부모에 입력 및 버튼 요소 모두에 활성 클래스를 지정해야 합니다. 이렇게 하면 요소가 움직일 때마다 지정된 대로 변형됩니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #d9d9d9;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.parent {
position: relative;
}
.input {
outline: none;
border: none;
border-radius: 100px;
padding: 5px 10px;
width: 40px;
transition: width 0.3s ease;
}
.input::placeholder {
color: green;
}
.parent.active .input {
width: 200px;
}
.btn {
width: 40px;
padding: 5px 10px;
cursor: pointer;
border-radius: 100px;
border: none;
background: green;
display: inline;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
transition: transform 0.3s ease;
}
.parent.active .btn {
transform: translateX(210px);
}
.fa-solid {
color: #ffffff;
}
검색 버튼이 다음과 같이 표시되어야 합니다:
자바스크립트 기능 추가
다음으로 요소에 대한 자바스크립트 코드를 작성합니다. 먼저 자바스크립트 쿼리셀렉터() 메서드를 사용하여 부모, 입력, 버튼 요소를 선택합니다.
그런 다음 버튼에 클릭 이벤트 리스너를 추가합니다. 그러면 버튼을 클릭하면 선택한 클래스에 따라 버튼이 토글됩니다. 포커스() 메서드를 추가하여 지정된 요소에 포커스를 설정합니다. 검색창이 확장될 때마다 버튼이 깜박이기 시작합니다.
let input = document.querySelector(".input");
let btn = document.querySelector(".btn");
let parent = document.querySelector(".parent");
btn.addEventListener("click", () => {
parent.classList.toggle("active");
input.focus();
});
버튼을 클릭하면 검색창이 열리고 그 반대의 경우도 마찬가지입니다. 다음 다이어그램과 같이 표시됩니다:
이제 정보를 입력하고 버튼을 클릭하면 시스템에서 정보를 검색하는 동안 닫힙니다.
멋지지 않나요? 이 코드를 보고 codepen.io의 검색창에서 검색할 수 있습니다. 검색창에 항목 목록을 생성하여 검색창을 추가로 사용자 정의할 수 있습니다. 이렇게 하면 사용자가 앱에서 더 쉽게 검색할 수 있습니다.
기타 만들 수 있는 기능
웹 개발 초보자라면 HTML, CSS, 자바스크립트로 만들 수 있는 기능은 많습니다. 팝업/모듈 창, 이미지 슬라이더, 푸터 자동 업데이터 등을 만들 수 있습니다.
이러한 창의적인 프로젝트는 프로그래밍 개념을 배우기에 좋습니다. 기술을 배우면서 응용할 수 있어 기술의 유용성을 높일 수 있습니다. 또한, 여러분과 사용자들이 즐길 수 있는 멋진 사용자 인터페이스를 만들 수 있습니다. 이 가이드를 사용하여 사이트에 숨겨진 검색창과 기타 대화형 기능을 만들어 보세요.