20220805

jungkwanlee·2022년 8월 5일

코딩일지

목록 보기

92/108

1) 학습한 내용

자바스크립트로 메뉴바 만들기

오늘은 Nav 바를 만들기 위해서 시간을 대부분 할당해야 할 상황인지라 일지를 쓸 것이 별로 많지 않지만 현재 따라 만들고 있는 nav 바 코드를 올려보기로 했다.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>nav bar</title>
    <script src="https://kit.fontawesome.com/58d68d5946.js" crossorigin="anonymous"></script>
    <script src="./main.js" defer></script>
</head>
<body>
    <nav class="navbar">
        <div class="navbar__logo">
            <a href="#">
                <i class="fab fa-accusoft"></i>
                <a href="">DreamCoding</a>
            </a>
        </div>
        <ul class="navbar__menu">
            <li><a href="">Home</a></li>
            <li><a href="">Gallery</a></li>
            <li><a href="">Weddings</a></li>
            <li><a href="">FAQ</a></li>
            <li><a href="">Bookings</a></li>
        </ul>
        <ul class="navbar__icons">
            <li><i class="fab fa-twitter"></i></li>
            <li><i class="fab fa-facebook-f"></i></li>
        </ul>
        <a href="#" class="navbar__toogleBtn">
            <i class="fas fa-bars"></i>
        </a>
    </nav>
</body>
</html>

CSS

:root{
    --text-color: #f0f4f5;
    --background-color: #263343;
    --accent-color: #d49466;
}
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;
}
.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;
    text-align: center;
}
.navbar__menu li:hover{
    background-color: var(--accent-color);
    border-radius: 4px;
}
.navbar__icons{
    list-style: none;
    color: var(--text-color);
    display: flex;
    padding-left:0;
}
.navbar__icons li {
    padding: 8px 12px;
}
.navbar__toogleBtn{
    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__icons{
        display:none;
        justify-content: center;
        width:100%;
    }
    .navbar__icons li{
        padding: 8px 12px;
    }
    .navbar__toogleBtn{
        display:block;
    }
    .navbar__menu.active,
    .navbar__icons.active{
        display: flex;
    }
}

Javascript

const toggleBtn = document.querySelector('.navbar__toogleBtn');
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');

toggleBtn.addEventListener('click', () => {
    menu.classList.toggle('active');
    icons.classList.toggle('acitve');
});

참고한 영상

2) 학습내용 중 어려웠던 점

자바스크립트로 메뉴바를 만들어내는 것은 내가 프로그래밍을 단순히 계산기로 다루는 것과는 차원이 달랐다. 비록, 컴퓨터 소프트웨어를 만드는 것이 아니라고는 하지만 자바스크립트를 다룰 줄은 알아야 당장은 리액트 내지는 나중에 백엔드에 쓰이는 Node.js나 TypeScript를 배우는데 문제가 없다.

3) 해결방법

우선 자바스크립트를 뒤져서 메뉴를 만드는 방법을 찾아보기로 했었다. 내 시각에는 이것은 단순히 HTML이나 CSS로 구현하는 것이 불가능해 보인다. 실제로, 자바스크립트에 작성된 것은 단순히 메뉴를 보여주는 정도였기 때문이다.
+추가) 그나마 오종인이란 분이 팀 내에서 코딩을 잘하는 분이라서 어떻게든 결과는 나올 것이다.