반응형 웹 디자인에서 내비게이션 바는 필수 요소이며, 여기에 검색 상자를 함께 배치하면 사용자 편의성이 크게 향상됩니다. 아래 예제에서는 HTML과 CSS만으로 데스크톱과 모바일 환경 모두에서 자연스럽게 작동하는 검색 상자를 내비게이션 메뉴에 추가하는 방법을 살펴봅니다.
예제
다음은 반응형 내비게이션 메뉴 안에 검색 상자를 추가하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<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);
}
@media screen and (max-width: 830px) {
.links {
display: block;
}
input[type="text"] {
display: block;
width: 100%;
margin: 0px;
border-bottom: 2px solid rgb(178, 137, 253);
text-align: center;
}
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">
<i class="fa fa-fw fa-home"></i> Home
</a>
<a class="links" href="#">
<i class="fa fa-fw fa-user"></i> Login
</a>
<a class="links" href="#">
<i class="fa fa-user-circle-o" aria-hidden="true"></i> Register
</a>
<a class="links" href="#">
<i class="fa fa-fw fa-envelope"></i> Contact Us
</a>
<a class="links" href="#">
<i class="fa fa-info-circle" aria-hidden="true"></i> More Info
</a>
<input type="text" placeholder="Search Here.." />
</nav>
</body>
</html>
핵심 포인트 정리
- 내비게이션 바 스타일:
nav요소에 어두운 배경색과overflow: auto;를 지정하여 오른쪽으로 떠 있는(float) 검색 입력창 때문에 레이아웃이 무너지지 않도록 처리했습니다. - 메뉴 링크:
.links클래스를inline-block으로 설정해 데스크톱 화면에서는 메뉴 항목이 가로로 나란히 배치됩니다. - 검색 상자 위치:
input[type="text"]에float: right;를 적용하여 검색 상자가 메뉴의 오른쪽 끝에 자연스럽게 자리 잡습니다. - 반응형 처리: 화면 너비가 830px 이하로 줄어들면 미디어 쿼리가 실행되어 링크와 검색 상자가
display: block;으로 전환되고, 검색 상자는 전체 너비(100%)를 차지하며 세로로 쌓입니다.
출력 결과
위 코드를 브라우저에서 실행하면 다음과 같은 화면이 나타납니다.
화면 크기를 830px 이하로 줄이면 미디어 쿼리에 따라 메뉴 항목과 검색 상자가 세로 방향으로 재배치되어 모바il 환경에 최적화된 형태로 표시됩니다.
