로그인 폼이 포함된 반응형 내비게이션 메뉴는 데스크톱에서는 메뉴 항목과 로그인 입력란이 가로로 배치되고, 화면이 좁아지면 세로로 재정렬되는 방식으로 동작합니다. 아래 예제는 순수 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>
<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);
}
form {
float: right;
margin-top: 8px;
}
form input{
display: inline-block;
padding: 6px;
font-size: 17px;
margin-right: 8px;
border:none;
}
.selected {
background-color: rgb(0, 18, 43);
}
@media screen and (max-width: 977px) {
.links {
display: block;
}
form {
display: block;
color:white;
}
form input{
margin-right: 0px;
display: block;
width: 100vw;
margin: 0px;
border-bottom: 2px solid rgb(178, 137, 253);
text-align: center;
}
}
</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>
<form>
<input type="text" placeholder="UserName..." />
<input type="password" placeholder="Password...">
</form>
</nav>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
브라우저 창의 너비를 977px 이하로 줄이면 미디어 쿼리가 작동하여 내비게이션 내부의 링크와 로그인 입력란이 다음과 같이 세로 방향으로 재배치됩니다.
코드 핵심 포인트
- .links 클래스:
display: inline-block으로 메뉴 항목을 가로로 나열하고, 마우스를 올리면(hover) 배경색이 변경되도록 처리했습니다. - form 스타일:
float: right를 사용해 아이디·비밀번호 입력 필드를 내비게이션 바의 오른쪽 끝에 배치했습니다. - 미디어 쿼리(max-width: 977px): 화면이 좁아지면
.links와form이display: block으로 전환되어 세로로 쌓이며, 입력 필드는width: 100vw로 전체 너비를 차지해 모바일에서도 입력하기 편리합니다. - .selected 클래스: 현재 머무르는 페이지에 해당하는 'Home' 메뉴에 강조 배경색을 적용해 사용자 위치를 직관적으로 알려줍니다.
이처럼 미디어 쿼리와 몇 가지 기본 CSS 속성만 활용하면 JavaScript 없이도 로그인 폼이 통합된 반응형 내비게이션 바를 손쉽게 완성할 수 있습니다.