웹사이트에서 검색 기능을 구현할 때, 입력창과 검색 버튼이 하나의 바처럼 자연스럽게 연결되어 있으면 사용자 경험이 훨씬 좋아집니다. CSS를 활용하면 별도의 이미지 없이도 깔끔하고 직관적인 검색 버튼을 만들 수 있습니다.
아래 예제에서는 HTML 입력 필드와 Font Awesome 아이콘, 그리고 CSS 플로트(float) 레이아웃을 조합하여 검색 버튼을 구현하는 방법을 소개합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
input[type=text] {
padding: 12px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
button {
float: left;
width: 20%;
padding: 12px;
background: rgb(14, 81, 204);
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
button:hover {
background: #1b11a5;
}
</style>
</head>
<body>
<h1>검색 버튼 예제</h1>
<form>
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</body>
</html>코드 설명
이 코드의 핵심 요소를 살펴보면 다음과 같습니다.
1. 입력 필드와 버튼의 가로 배치
텍스트 입력창에는 width: 80%, 버튼에는 width: 20%를 지정하고 두 요소 모두에 float: left를 적용했습니다. 이렇게 하면 입력창과 버튼이 나란히 붙어 하나의 검색바처럼 보이게 됩니다.
2. 경계선 처리
버튼에 border-left: none을 설정하면 입력창과 버튼 사이의 중복된 경계선이 사라져 두 요소가 매끄럽게 연결됩니다.
3. 마우스 오버(hover) 효과
:hover 선택자를 사용해 버튼에 마우스를 올리면 배경색이 진한 남색으로 변경됩니다. 이는 사용자에게 클릭 가능한 요소임을 시각적으로 알려주는 역할을 합니다.
4. Font Awesome 검색 아이콘
버튼 안에는 텍스트 대신 <i class="fa fa-search"> 태그로 돋보기 모양의 검색 아이콘을 넣었습니다. CDN 링크를 통해 Font Awesome 4.7.0 스타일시트를 불러오기 때문에 별도의 이미지 파일 없이 아이콘을 사용할 수 있습니다.
실행 결과
위 코드를 브라우저에서 실행하면 회색 배경의 검색 입력창 오른쪽에 파란색 검색 버튼이 붙어 있는 형태의 검색바가 화면에 나타납니다. 버튼 위에 마우스를 올리면 색상이 어두운 남색으로 바뀌며, 클릭 시 폼이 제출됩니다.
마무리
이처럼 float와 width 비율만 잘 활용해도 간단하게 검색 버튼 UI를 만들 수 있습니다. 최신 프로젝트라면 flexbox(display: flex)를 사용하면 float 없이도 더 유연하고 반응형으로 같은 레이아웃을 구현할 수 있으니 참고하시기 바랍니다.