CSS의 미디어 쿼리(media query)와 Font Awesome 같은 아이콘 라이브러리를 활용하면 별도의 JavaScript 없이도 화면 크기에 따라 레이아웃이 자동으로 전환되는 반응형 내비게이션 메뉴를 손쉽게 만들 수 있습니다. 데스크톱에서는 메뉴 항목이 가로로 나열되고, 화면 폭이 좁아지면 세로로 쌓이는 방식입니다.
핵심 구현 포인트
- 아이콘 추가: Font Awesome CDN 스타일시트를 연결한 뒤, <i> 태그에 fa-home, fa-user 등의 클래스를 지정해 각 메뉴 항목에 아이콘을 삽입합니다.
- 가로 배치: 링크에 display: inline-block을 적용하면 데스크톱 화면에서 메뉴가 한 줄로 나란히 정렬됩니다.
- 반응형 전환: @media screen and (max-width: 600px) 규칙에서 display: block으로 변경하면 화면 폭이 600px 이하일 때 메뉴가 세로 방향으로 쌓여 모바일 환경에 최적화됩니다.
전체 예제 코드
<!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);
}
.selected{
background-color: rgb(0, 18, 43);
}
@media screen and (max-width: 600px) {
.links {
display: block;
}
}
</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>
</nav>
</body>
</html>
코드 설명
nav 요소는 화면 전체 폭(width: 100%)을 차지하며 어두운 회색 배경을 적용했습니다. 각 메뉴 링크에 공통으로 사용된 .links 클래스는 inline-block으로 가로 정렬하고, 패딩으로 클릭 영역을 넓히며 밝은 보라색 텍스트와 밑줄 제거(text-decoration: none) 처리를 했습니다.
:hover 가상 클래스를 사용하면 마우스를 올렸을 때 배경색이 밝은 회색으로 바뀌어 시각적 피드백을 줄 수 있고, .selected 클래스는 현재 머무르고 있는 페이지의 메뉴 항목을 진한 남색 배경으로 강조합니다.
가장 중요한 부분은 미디어 쿼리입니다. max-width: 600px 조건 안에서 .links의 display 값을 block으로 바꾸면, 스마트폰처럼 화면이 좁은 기기에서는 각 메뉴가 한 줄씩 세로로 배치되어 가독성과 터치 편의성이 크게 향상됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 내비게이션 메뉴가 출력됩니다.
화면 크기를 600px 이하로 줄이면 메뉴 항목이 아래와 같이 세로로 정렬됩니다.
