이번 예제는 반응형 네비게이션 바입니다.
먼저 html 파일입니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navbar</title>
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav>
<div class="nav-center">
<!-- nav header -->
<div class="nav-header">
<img src="./logo.svg" class="logo" alt="logo" />
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
<!-- links -->
<ul class="links">
<li>
<a href="index.html">home</a>
</li>
<li>
<a href="about.html">about</a>
</li>
<li>
<a href="projects.html">projects</a>
</li>
<li>
<a href="contact.html">contact</a>
</li>
</ul>
<!-- social media -->
<ul class="social-icons">
<li>
<a href="https://www.twitter.com">
<i class="fab fa-facebook"></i>
</a>
</li>
<li>
<a href="https://www.twitter.com">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="https://www.twitter.com">
<i class="fab fa-behance"></i>
</a>
</li>
<li>
<a href="https://www.twitter.com">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://www.twitter.com">
<i class="fab fa-sketch"></i>
</a>
</li>
</ul>
</div>
</nav>
<!-- javascript -->
<script src="app.js"></script>
</body>
</html>
반응형 웹이란?
반응형 웹은 다양한 디바이스와 화면 크기에 따라 웹 페이지의 레이아웃과 콘텐츠가 자동으로 최적화 되는 웹 디자인 접근 방식이다. 이를 통해 데스크톱, 테블릿, 스마트폰 등 다양한 환경에서 사용자가 일관된 사용자 경험을 누릴 수 있다.
그래서 위의 코드로 완성된 전체 화면은 이런 모습을 가지고 있다.
페이지의 사이즈가 작아짐에 따라서 화면을 구성하는 레이아웃들이 변동된다.
또한 이에 따라 기존의 메뉴들이 navbar로 변동되었다.
이 네브바를 펼치는 버튼을 햄버거 버튼이라고하는데
이 버튼을 눌렀을 때 내부에서는 코드가 다음처럼 변하게 된다.
<ul class="links">...</ul>
<ul class="links">...</ul>
<ul class="links">...</ul>
<ul class="show-links">...</ul>
CSS파일에서 댜음 코드들을 확인해보자
.links와 .show-links
.links {
height: 0;
overflow: hidden;
transition: var(--transition);
}
.show-links {
height: 10rem;
}
- .links에서는 높이를 0으로 설정하여 화면에 보이지 않도록 하였고 overflow를 hidden으로 하여 요소내부의 콘텐츠가 넘칠 경우에 이를 숨기도록 하였다. 이 hidden설정은 높이가 0일때 콘텐츠가 보이지 않도록 하는데 중요한 역할을 한다. transition: var(--transition);는 css변수를 사용하여 트랜지션효과를 설정한다. --transition변수는 일반적으로 트랜지션 지속 시간과 속성을 정의하는데에 사용된다.
- .show-links클래스가 추가되면 높이가 10rem으로 확장된다. 1rem은 루트 요소의 폰트크기를 의미하므로 10rem은 루트요소 폰트 크기의 10배 높이를 의미한다.
그럼 이러한 화면의 동작을 구현하기 위한 javascript이다.
const navToggle = document.querySelector(".nav-toggle");
const links = document.querySelector(".links");
navToggle.addEventListener("click", function () {
links.classList.toggle("show-links");
});
1.선택자 정의
navToggle에는 .nav-toggle을 links에는 .llinks를 querySelector를 이용해서 할당해준다.
nav-toggle은 navbar를 화면에 표시해주는 햄버거 버튼이다.
2. 이벤트리스너 추가
navToggle에 이벤트리스너를 추가해서 "click"해주면 함수가 발생하도록 한다.
3. 클래스 토글링
함수에서 link.classList.toggle메서드는 show-links가 요소에 존재하면 제거하고 존재하지 않으면 추가한다.
이를 통해 사용자가 버튼을 클릭할 때마다 링크 목록의 가시성이 전환된다.
'개발 > javascript' 카테고리의 다른 글
| [JS]modal만들기 (0) | 2024.06.23 |
|---|---|
| [JS] 사이드 바 만들기 (0) | 2024.06.16 |
| [JS] Review Carousel 리뷰캐러셀 (1) | 2024.06.08 |
| [JS] Counter 만들기 (1) | 2024.06.08 |
| [JS]Color Flipper 만들기2 (2) | 2024.06.07 |
