반응형 웹 디자인에서 사이드 탐색 메뉴는 화면 크기에 따라 레이아웃이 자동으로 조정되어야 합니다. 이 글에서는 JavaScript 없이 순수 CSS만 사용하여, 데스크톱에서는 세로형 사이드바로 표시되고 화면이 좁아지면 가로형 상단 메뉴로 자동 전환되는 반응형 내비게이션을 만드는 방법을 소개합니다.
핵심 원리
반응형 사이드 내비게이션의 핵심은 미디어 쿼리(@media)입니다. 화면 너비가 특정 기준값(여기서는 700px) 이하로 줄어들면, 화면 왼쪽에 고정되어 있던 세로 사이드바가 상대적 위치의 가로 메뉴로 전환됩니다.
주요 CSS 속성 살펴보기
- position: fixed — 사이드바를 화면 왼쪽에 고정하여 스크롤해도 항상 보이도록 합니다.
- height: 100% — 사이드바가 화면 전체 높이를 차지하게 합니다.
- overflow: auto — 메뉴 항목이 많아져도 사이드바 내부에서 스크롤할 수 있게 합니다.
- :hover 및 .selected 스타일 — 마우스를 올렸을 때와 현재 선택된 메뉴 항목에 시각적 강조 효과를 줍니다.
- @media screen and (max-width: 700px) — 화면 너비가 700px 이하일 때 사이드바를 가로형 메뉴로 전환하는 핵심 규칙입니다.
전체 예제 코드
다음은 CSS를 사용하여 반응형 사이드 탐색 메뉴를 구현한 완전한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
nav {
margin: 0;
padding: 0;
width: 150px;
background-color: #2f77e4;
position: fixed;
height: 100%;
overflow: auto;
}
nav a {
display: block;
color: rgb(255, 255, 255);
font-weight: bolder;
font-size: 20px;
padding: 16px;
text-decoration: none;
}
nav a.selected {
background-color: rgb(15, 189, 20);
color: rgb(255, 255, 255);
}
nav a:hover:not(.selected) {
background-color: white;
color: #2f77e4;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
@media screen and (max-width: 700px) {
nav {
width: 100%;
height: auto;
position: relative;
}
nav a {float: left;}
div.content {margin-left: 0;}
}
</style>
</head>
<body>
<nav class="sideBar">
<a class="selected" href="#">홈</a>
<a href="#">로그인</a>
<a href="#">회원가입</a>
<a href="#">메시지 보내기</a>
<a href="#">문의하기</a>
</nav>
<div class="content">
<h1>샘플 텍스트</h1>
<h2>브라우저 창 크기를 700px로 줄이면 세로 내비게이션이 가로 내비게이션으로 변경됩니다</h2>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같이 화면 왼쪽에 세로형 사이드바가 표시됩니다.
브라우저 창 크기를 700px 이하로 줄이면 미디어 쿼리가 작동하여, 사이드바가 다음과 같이 화면 상단의 가로형 메뉴로 자동 전환됩니다.
마무리
이처럼 미디어 쿼리와 몇 가지 기본적인 CSS 속성만 활용하면 별도의 라이브러리나 JavaScript 없이도 다양한 화면 크기에 유연하게 대응하는 반응형 내비게이션 메뉴를 손쉽게 구현할 수 있습니다. 실제 프로젝트에서는 색상, 폰트, 여백 등을 조절하여 사이트의 디자인에 맞게 커스터마이징해 보세요.