유튜브 '드림코딩'님의 무료 강의 중 반응형 헤더를 따라 만들어 보았다.
1년도 더 전에 만들어보았던 아주 간단한 예제이지만 기록을 위해 남겨두고자 한다.
드림코딩 엘리님은 egoing의 생활코딩님 만큼이나 개인적으로 감사한 분이다.
타지에서 독학으로 웹개발을 공부하고 있는 나로서는 인터넷으로 자료를 찾아보는 게 전부였던지라 이 두 분이 아니었다면 웹개발에 대한 기초만 배우다가 포기했을 것이다.
코드 내용은 매우 매우 심플하다.
- HTML에는 <body> 태그 안에 <nav> 태그 하나뿐
- CSS에는 hover 효과와 반응형 효과를 주었다.
- JS에는 미디어 쿼리가 활성화되었을 때 생기는 버튼을 클릭 시 아래 메뉴들이 토글링되는 효과를 주었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/ed026db0da.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<!-- navbar -->
<nav id="navbar">
<div class="nav_title">
<h1><i class="fa-solid fa-paw"><span>RyanCoding</span></i></h1>
</div>
<ul class="nav_menu">
<li class="nav_menu_items">Home</li>
<li class="nav_menu_items">Gallery</li>
<li class="nav_menu_items">Weddings</li>
<li class="nav_menu_items">FAQ</li>
<li class="nav_menu_items">Bookings</li>
</ul>
<ul class="nav_links">
<li class="nav_links_items"><i class="fa-brands fa-twitter"></i></li>
<li class="nav_links_items"><i class="fa-brands fa-facebook"></i></li>
</ul>
<button class="toggle_btn"><i class="fa-solid fa-bars"></i></button>
</nav>
<!-- toggle button -->
<script src="main.js"></script>
</body>
</html>HTML 코드
폰트어썸에서 사용가능한 간단한 아이콘들을 활용했다.
(지금 보니 토글버튼 주석이 이상한 곳에 가있다...)
/* reset */
@import url(reset.css);
/* fonts */
@font-face {
font-family: 'TheJamsil5Bold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
:root {
--color-1 : rgba(53, 191, 177, 1);
--color-2 : rgba(2, 140, 115, 1);
--color-3 : rgba(2, 114, 94, 1);
--color-4 :rgba(1, 63, 52, 1);
--color-5 : rgba(12, 12, 12, 1);
--font-weight-bold : 700;
--font-weight-semi-bold : 500;
--font-weight-light : 300;
--border-radius : 8px;
--animation-duration : 300ms;
--cursor-pointer : pointer;
}
html {
font-size : 16px;
}
body {
background-color: var(--color-3);
font-family: 'TheJamsil5Bold';
}
#navbar {
position: relative;
background-color: var(--color-5);
color: var(--color-3);
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 1rem;
}
.nav_title {
cursor: var(--cursor-pointer);
transition: var(--animation-duration) all;
}
.nav_title:hover {
color: var(--color-1);
}
.nav_title h1 {
font-size : 1.5rem
}
.nav_title h1 span {
margin-left: 1rem;
}
.nav_menu, .nav_links {
display: flex;
align-items: center;
}
.nav_menu_items, .nav_links_items {
display: block;
padding: .5rem;
margin: .25rem;
font-weight: 700;
cursor: var(--cursor-pointer);
transition: var(--animation-duration) all;
}
.nav_links_items {
font-size: 1.25rem;
}
.nav_menu_items:hover, .nav_links_items:hover {
color: var(--color-1);
transform: scale(1.05);
}
.nav_menu.show, .nav_links.show {
display: flex;
}
.toggle_btn {
display: none;
position: absolute;
right: 2.5%;
border: none;
outline: none;
padding: .5rem;
background-color: transparent;
color: var(--color-3);
cursor: var(--cursor-pointer);
font-size: 1.5rem;
transition: var(--animation-duration) all;
}
.toggle_btn:hover {
color: var(--color-1);
transform: scale(1.05);
}
@media screen and (max-width:768px) {
html {
font-size: 12px;
}
#navbar {
flex-direction: column;
}
.nav_menu {
display: none;
margin: 2rem;
width: 100%;
flex-direction: column;
}
.nav_menu_items {
width: 100%;
text-align: center;
margin: .5rem;
}
.nav_links {
display: none;
}
.toggle_btn {
display: block;
top: 1rem;
}
}
CSS 코드
reset.css로 모든 스타일을 초기화한 후 '눈누'라는 사이트에서 폰트를 받아썼다.
:root(가상선택자)를 사용할 정도의 긴 코드도 아니었지만 개인적으로 너무 편해서 그냥 사용했다.
const toggleBtn = document.querySelector('.toggle_btn');
const navMenu = document.querySelector('.nav_menu');
const navLinks = document.querySelector('.nav_links');
toggleBtn.addEventListener('click', () => {
navMenu.classList.toggle('show');
navLinks.classList.toggle('show');
})JS 코드
딱 여섯 줄이다.
필요한 요소를 변수로 지정하고, 버튼에 이벤트를 추가해 나머지 요소들을 토글링 하는 기능을 담고 있다.
'코딩 리뷰 > [HTML, CSS , JS]' 카테고리의 다른 글
| [HTML, CSS, JS] 요소를 마우스 커서에 따라다니게 하기 (0) | 2023.05.18 |
|---|---|
| [HTML, CSS, JS] 유튜브 클론코딩 리뷰 (0) | 2023.04.26 |
| [HTML, JS] 멀티 Select 공부 리뷰 (0) | 2023.04.14 |
| [HTML, CSS, JS] 모멘텀 클론코딩 리뷰 (0) | 2023.04.12 |
| [HTML, CSS, JS] 10000 시간의 법칙 클론코딩 리뷰 (0) | 2023.04.10 |