Frontend practice

반응형 헤더 만들기

판다꼬마 2022. 5. 23. 22:09
728x90

https://www.youtube.com/watch?v=X91jsJyZofw&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=15 

 

만들어본 사이트

 

예전에 한번 유튜브를 보고 클론 코딩을 해봤는데

이번에는 한번 안 보고 쭉 만들고 이상한 부분은 영상을 보면서 수정을 해보았다.

 

만들 사이트

 

위에 있는 사이트를 구축해보고 사이즈가 작아지면 아래 사이트처럼 변해야 한다.

 

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" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Koulen&family=Roboto:wght@300&display=swap" rel="stylesheet" />
        <title>Header practice</title>
        <script src="https://kit.fontawesome.com/e4e79036b7.js" crossorigin="anonymous"></script>
        <script src="js.js" defer></script>
    </head>
    <body>
        <nav class="navbar">
            <div class="navbar_logo">
                <i class="fa-brands fa-accusoft"></i>
                <a href="">DreamCoding</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_icon">
                <li><i class="fa-brands fa-twitter"></i></li>
                <li><i class="fa-brands fa-facebook"></i></li>
            </ul>
            <a href="#" class="navbar_toggle">
                <i class="fa-solid fa-bars"></i>
            </a>
        </nav>
    </body>
</html>

css

body {
    margin: 0;
    font-family: "Source Sans Pro";
}

a {
    text-decoration: none;
    color: white;
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: aqua;
    padding: 8px 12px;
}

.navbar_logo {
    font-size: 24px;
    color: white;
}

.navbar_logo i {
    color: orange;
}

.navbar_menu {
    display: flex;
    list-style: none;
    padding-left: 0;
}

.navbar_menu li {
    padding: 8px 12px;
    font-size: 20px;
}

.navbar_menu li:hover {
    background-color: blue;
    border-radius: 4px;
}

.navbar_icon {
    list-style: none;
    display: flex;
    color: white;
    padding-left: 0;
}

.navbar_icon li {
    padding: 8px 12px;
}
.navbar_toggle {
    display: none;
    position: absolute;
    right: 32px;
    font-size: 24px;
    color: orange;
}

@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_icon {
        display: none;
        justify-content: center;
        width: 100%;
    }
    .navbar_toggle {
        display: block;
    }
    .navbar_menu.active,
    .navbar_icon.active {
        display: flex;
    }
}

js

const toggle = document.querySelector(".navbar_toggle");
const menu = document.querySelector(".navbar_menu");
const icon = document.querySelector(".navbar_icon");

toggle.addEventListener("click", () => {
    menu.classList.toggle("active");
    icon.classList.toggle("active");
});

 

느낀 점

영상을 예전에 보고 만들어보고도 다시 안 보고 만들려니 시간이 정말 오래 걸렸다.

아직 갈 길이 먼 것 같다 ㅜㅜ

728x90
저작자표시 비영리 변경금지