부트스트랩 없이 반응형 Navbar 완전정복
CSS: Responsive Navbar
부트스트랩을 사용하지 않고, HTML와 CSS, JavaScript만을 사용해서 반응형 Navbar를 제작해보도록 하겠습니다. 화면 크기가 768px보다 작을 땐, 웹사이트 로고와 상호명을 제외한 나머지 메뉴에 대해서는 햄버거 모양(三)의 버튼으로 감춰지게끔 만들어보겠습니다. 햄버거 버튼을 누르면, 감춰졌던 메뉴바가 아래로 펼쳐지는 방식입니다. 모바일 버전으로 제작되는 거의 대부분의 웹사이트들에서 사용하고 있는 방식이기도 합니다.
▶ HTML 파일의 예시입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="폰트어썸 본인 CDN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap" rel="stylesheet">
<script src="main.js" defer></script>
<title>NavBar</title>
</head>
<body>
<nav class="navbar">
<div class="navbar__logo">
<i class="fab fa-amazon"></i>
<a href="#">amazon</a>
</div>
<ul class="navbar__menu">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
<ul class="navbar__sns">
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
</ul>
<a href="#" class="navbar__toggleBtn"> <i class="fas fa-bars"></i> </a>
</nav>
</body>
</html>
▶ CSS 파일의 예시입니다.
:root {
--text-color: #f0f4f5;
--background-color: #000a12;
--accent-color: #ffa726;
}
body {
margin: 0;
}
a {
text-decoration: none;
color: var(--text-color);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--background-color);
padding: 8px 12px;
font-family: 'Source Sans Pro', sans-serif;
}
.navbar__logo {
font-size: 24px;
color: var(--text-color);
}
.navbar__logo i {
color: var(--accent-color);
}
.navbar__menu {
display: flex;
list-style: none;
padding-left: 0;
}
.navbar__menu li {
padding: 8px 12px;
}
.navbar__menu li:hover {
background-color: var(--accent-color);
border-radius: 4px;
}
.navbar__sns {
list-style: none;
display: flex;
padding-left: 0;
}
.navbar__sns li {
padding: 8px 12px;
}
.navbar__toggleBtn {
display: none;
position: absolute;
right: 32px;
font-size: 24px;
color: var(--accent-color);
}
@media screen and (max-width: 768px) {
.navbar {
flex-direction: column;
align-items: flex-start;
padding: 8px 24px;
}
.navbar__menu {
display: none;
flex-direction: column;
align-items: center;
width: 100%;
}
.navbar__menu li {
width: 100%;
text-align: center;
}
.navbar__sns {
display: none;
justify-content: center;
width: 100%;
}
.navbar__toggleBtn {
display: block;
}
.navbar__menu.active,
.navbar__sns.active {
display: flex;
}
}
▶ JavaScript 파일의 예시입니다.
const toggleBtn = document.querySelector('.navbar__toggleBtn');
const menu = document.querySelector('.navbar__menu');
const sns = document.querySelector('.navbar__sns');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('active');
sns.classList.toggle('active');
});
▶ 무료로 아이콘 이미지를 사용할 수 있는 Font Awesome 사이트입니다. 해당 사이트에 가입하신 뒤, 본인에게 부여되는 CDN으로 사이트에서 제공하는 다양한 무료 아이콘들을 사용하실 수 있습니다.
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
▶ 구글에서 다양한 폰트들을 무료로 제공하고 있습니다. 해당 사이트로 접속하신 뒤, 사용하시고 싶은 폰트를 선택합니다. 그리고 각 폰트마다 부여된 link를 복사하신 뒤, 본인의 html 페이지 head 섹션에 넣어주시면 됩니다. 위 예시에서는 Source Sans Pro 폰트를 사용하였습니다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
부트스트랩을 전혀 사용하지 않고, 컴퓨터 화면에서 뿐만 아니라, 모바일이나 태블릿에서도 깨지지 않는 네비게이션 메뉴바를 제작해보았습니다. 물론 위 기능들은 부트스트랩 4 혹은 부트스트랩 5를 사용하신다면 훨씬 손쉽게 제작할 수 있는 내용들이지만, flexbox와 media query(미디어 쿼리)에 대한 개념적 이해를 돕고 실전에 적용해보기 위한 일환으로 제작해보았습니다.
'HTML & CSS > CSS' 카테고리의 다른 글
| [CSS] 화면 가득 높이 설정 방법 (0) | 2021.08.26 |
|---|---|
| [CSS] 스크롤 스냅 (Scroll Snap) (0) | 2021.08.07 |
| [CSS] 리셋: reset.css (0) | 2021.08.06 |
| [CSS] Flexbox 완벽정리 (0) | 2021.08.05 |
| [CSS] 미디어 쿼리 Media Query (0) | 2021.07.25 |