오늘 프론트엔드 공부는 반응형 네비게이션 바를 공부할 예정이다.
반응형 네비게이션 메뉴바
반응형은 웹사이트가 다양한 장치(데스크톱, 태블릿, 스마트폰 등)와 화면 크기에 맞춰 자동으로 콘텐츠와 레이아웃을 조정하여 최적화된 사용자 경험을 제공하는 디자인 접근 방식이다.
이는 사용자가 어떤 장치를 사용하든 일관되고 효과적인 방식으로 콘텐츠를 볼 수 있게 해준다.
컴퓨터로 접근해도, 스마트폰으로 접근해도 콘텐츠를 보기 쉽게 하는 것이다. 만약 컴퓨터로 접근해서 화면을 줄이거나 늘리면 웹사이트가 변화하는 모습을 본 적 있을 것이다. 이러한 것들이 반응형 디자인의 대표적 예시이다.
미니 인턴 사이트를 화면을 줄이면 아래와 같이 변화한다.
화면의 크기가 줄어들거나 사용자가 모바일 기기를 사용할 때는 수평적인 메뉴 바가 축소된 화면 공간에 적합한 형태, 보통은 '햄버거' 메뉴 아이콘으로 변환되는 방식으로 작동하게 된다. 햄버거 아이콘은 아래 이미지 같은 아이콘이다.
index.html
우선 기본 nav bar 틀을 생성하기 위해 index.html 을 작성한다.
<!DOCTYPE html>
<html lang="kor">
<head>
<title>반응형 네비게이션 바 만들기</title>
<link href="./style.css" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div id="hamburger-menu">
<div></div>
<div></div>
<div></div>
</div>
<ul id="nav-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
</header>
</body>
</html>일단은 아래 사진과 같은 상태가 된다.
style.css
이제 화면이 줄어들면 반응형으로 변화하는 걸 css 를 사용하여 구현할 것이다. 기본적 메뉴바의 디자인을 수정할 예정이다.
우선, 위에 사진을 보면 앞에 점이나 글자 밑에 있는 선을 제거하고, 해당 메뉴들을 수평으로 정렬할 것이다.
점을 제거하려면 nav-menu 의 속성중 list-style-type: none; 으로 해준다.
nav-menu 은 li 태그의 4개로 구성되어 있다. 이러한 요소들을 수평정렬하기 위해선 li 태그에 float: left; 속성을 추가해준다.
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>다음은 링크의 점이나 선을 제거하려고 한다. a 태그가 링크로 연결하는 태그인데 이의 속성을 변경해준다. 우선 text-decoration: none; 으로 하여 링크 줄을 삭제하고, display: block; 을 통해 링크 자체를 블록으로 디스플레이 한다.
#nav-menu {
list-style-type: none;
margin: 0;
padding: 0;
/*내용이 넘치면 숨김*/
overflow: hidden;
}
#nav-menu li {
float : left; /*좌측 정렬*/
}
#nav-menu li a {
display: block; /* 링크를 블록으로 */
text-align: center; /*텍스트는 블록의 중심*/
padding: 14px 16px;
text-decoration: none; /*링크의 밑줄 제거*/
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: rgb(65, 144, 255);
cursor: pointer;
}
여기까지 하면 이렇게 된다.
햄버거 아이콘 style
다음은 화면이 줄어들었을 때 표시될 햄버거 아이콘을 정의할 것이ㅏㄷ.
기본 상태에서는 숨기기 위해 display: none; 으로 한다.
햄버거 아이콘은 세 개의 가로줄로 구성되므로 이에 대한 스타일을 정의한다.
/* 햄버거 메뉴 스타일 설정 */
#hamburger-menu {
display: none; /* 기본 상태에서는 햄버거 메뉴 숨김 */
cursor: pointer; /* 마우스 오버 시 포인터 모양 변경 */
}
/* 햄버거 메뉴 아이콘 스타일 (세 개의 가로줄) */
#hamburger-menu div {
width: 25px; /* 가로줄 너비 */
height: 3px; /* 가로줄 높이 */
background-color: rgb(65, 144, 255);
margin: 6px 0; /* 상하 마진 설정 (줄 간격) */
}
미디어 쿼리?
다음은 화면이 줄어들면 햄버거 아이콘이 나오도록 해야한다. 이떄 사용하는게 미디어 쿼리이다.
미디어 쿼리는 웹 디자인에서 사용되는 CSS 기술로, 웹 페이지가 다양한 디바이스(스마트폰, 태블릿, 데스크톱 등)와 화면 크기에 따라 다르게 보일 수 있도록 하는 데 사용된다.
간단히 말해, 미디어 쿼리를 사용하면 개발자는 특정 조건(예: 화면의 너비나 해상도)에 따라 CSS 스타일을 적용할 수 있게된다.
예를 들어, 미디어 쿼리를 사용하면 화면 크기가 작은 모바일 기기에서는 콘텐츠가 한 열로 보이게 하고, 큰 화면의 데스크톱에서는 여러 열로 콘텐츠를 표시할 수 있다.
코드에서는 600px 의 width 보다 작아지면 햄버거 아이콘으로 표시되도록 하였다.
/* 미디어 쿼리를 사용한 반응형 디자인 설정 */
@media screen and (max-width: 600px) {
#nav-menu {
display: none; /* 화면 너비가 600px 이하일 때 네비게이션 메뉴 숨김 */
}
#hamburger-menu {
display: block; /* 화면 너비가 600px 이하일 때 햄버거 메뉴 표시 */
}
}스타일이 마음에 들지 않아 이렇게 수정했다.
#nav-bar {
background-color: rgb(248, 252, 255);
border-bottom: 1px solid rgb(219, 224, 255);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
margin: 0;
padding: 0;
}
#nav-menu {
list-style-type: none;
margin: 0;
padding: 0;
/*내용이 넘치면 숨김*/
overflow: hidden;
}
#nav-menu li {
float : left; /*좌측 정렬*/
}
#nav-menu li a {
display: block; /* 링크를 블록으로 */
text-align: center; /*텍스트는 블록의 중심*/
padding: 14px 14px;
text-decoration: none; /*링크의 밑줄 제거*/
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: rgb(65, 144, 255);
cursor: pointer;
margin: 0 20px;
font-size: large;
font-weight: bold;
}
#nav-menu li a:hover {
background-color: aliceblue;
color: rgb(3, 78, 184);
font-weight: bold;
}
/* 햄버거 메뉴 스타일 설정 */
#hamburger-menu {
display: none; /* 기본 상태에서는 햄버거 메뉴 숨김 */
cursor: pointer; /* 마우스 오버 시 포인터 모양 변경 */
padding: 10px;
}
/* 햄버거 메뉴 아이콘 스타일 (세 개의 가로줄) */
#hamburger-menu div {
width: 25px; /* 가로줄 너비 */
height: 2px; /* 가로줄 높이 */
background-color: rgb(65, 144, 255);
margin: 6px 0; /* 상하 마진 설정 (줄 간격) */
}
/* 미디어 쿼리를 사용한 반응형 디자인 설정 */
@media screen and (max-width: 600px) {
#nav-menu {
display: none; /* 화면 너비가 600px 이하일 때 네비게이션 메뉴 숨김 */
}
#hamburger-menu {
display: block; /* 화면 너비가 600px 이하일 때 햄버거 메뉴 표시 */
}
}
이런 스타일이 되었다.
화면을 줄이면 햄버거 아이콘이 나온다.
햄버거 아이콘 클릭 시 이벤트 구현
햄버거 아이콘 클릭시 메뉴바가 클릭되도록 하여 js 코드를 짤 것이다.
우선 나는 햄버거 아이콘 클릭시 메뉴바가 수직으로 나왔으면 좋겠어서 css 를 약간 수정할 것이다.
/* 미디어 쿼리를 사용한 반응형 디자인 설정 */
@media screen and (max-width: 600px) {
#nav-menu {
display: none; /* 초기 상태에서는 숨김 */
width: 100%; /* 메뉴바 전체 너비 */
background-color: rgb(248, 252, 255); /* 배경색 */
}
#nav-menu li {
float: none; /* 세로 정렬을 위해 float 제거 */
width: 100%; /* 각 항목 전체 너비 */
}
#nav-menu li a {
text-align: left; /* 텍스트 왼쪽 정렬 */
}
#hamburger-menu {
display: block; /* 햄버거 메뉴 표시 */
}
}
버튼 이벤트 구현을 위해 아래와 같은 리스터를 js 파일에 추가한다.
document.getElementById('hamburger-menu').addEventListener('click', function() {
var navMenu = document.getElementById('nav-menu');
if (navMenu.style.display === 'block') {
navMenu.style.display = 'none';
} else {
navMenu.style.display = 'block';
}
});
만약 햄버거 아이콘 클릭 시 아래처럼 메뉴바가 나온다.
호버효과 넣기
나는 마우스를 햄버거 아이콘에 갖다 대기만 해도 메뉴바가 표시되었으면 좋겠다. 이를 위한 호버 효과를 구현하려고 한다.
자바스크립트에서 마우스가 올라갔을때의 이벤트처리, 벗어났을 떄의 이벤트 처리를 해주면 된다.
// 햄버거 메뉴 아이콘에 마우스가 올라갔을 때 이벤트 리스너 추가
document.getElementById('hamburger-menu').addEventListener('mouseenter', function() {
// 'nav-menu' ID를 가진 요소를 찾아 navMenu 변수에 할당
var navMenu = document.getElementById('nav-menu');
// navMenu의 display 스타일을 'block'으로 설정하여 메뉴를 표시
navMenu.style.display = 'block';
});
// 햄버거 메뉴 아이콘에서 마우스가 벗어났을 때 이벤트 리스너 추가
document.getElementById('hamburger-menu').addEventListener('mouseleave', function() {
// 'nav-menu' ID를 가진 요소를 찾아 navMenu 변수에 할당
var navMenu = document.getElementById('nav-menu');
// navMenu의 display 스타일을 'none'으로 설정하여 메뉴를 숨김
navMenu.style.display = 'none';
});
