웹사이트의 탐색 메뉴(내비게이션 바) 안에 검색 입력 필드를 함께 배치하면 사용자가 원하는 콘텐츠를 더 빠르게 찾을 수 있어 사용성이 크게 향상됩니다. 아래 예제에서는 HTML과 CSS만을 사용하여 메뉴 링크와 텍스트 입력 필드가 하나의 바 안에 함께 있는 탐색 메뉴를 만드는 방법을 살펴보겠습니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0px;
margin-top: 10px;
padding: 0px;
}
nav {
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
}
.selected {
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">Login</a>
<a class="links" href="#">Register</a>
<a class="links" href="#">Contact Us </a>
<a class="links" href="#">More Info</a>
<input type="text" placeholder="Search Here.." />
</nav>
</body>
</html>
코드 설명
- nav 요소 —
width: 100%로 화면 전체 너비를 차지하며, 어두운 배경색(rgb(39, 39, 39))을 적용했습니다.overflow: auto는 자식 요소가 float될 때 부모의 높이가 무너지는 현상을 방지합니다. - .links 클래스 — 각 메뉴 링크에
display: inline-block을 지정해 가로 방향으로 나란히 배치하고, 패딩과 밝은 보라색 글자색으로 클릭하기 편한 버튼 형태를 만들었습니다. - .links:hover — 마우스 커서를 올리면 배경이 회색(
rgb(100, 100, 100))으로 바뀌는 호버 효과를 추가했습니다. - input[type="text"] —
float: right를 사용해 검색 입력 필드를 메뉴바의 오른쪽 끝으로 정렬했습니다. 패딩과 마진으로 여백을 조절해 시각적 균형을 맞췄습니다. - .selected 클래스 — 현재 머무르고 있는 페이지('Home')를 나타내기 위해 진한 남색 배경을 적용해 활성 상태를 표시했습니다.
출력 결과
위 코드를 브라우저에서 실행하면 왼쪽에는 메뉴 링크들이, 오른쪽에는 검색 입력 필드가 배치된 어두운 색조의 탐색 메뉴가 다음과 같이 나타납니다 −
이처럼 <nav> 태그 안에 앵커(<a>) 요소와 <input> 요소를 함께 넣고 CSS로 배치만 조정하면, 별도의 JavaScript 없이도 검색 기능이 통합된 실용적인 내비게이션 바를 손쉽게 구현할 수 있습니다.