네이게이션 바 만들기 HTML

클론코딩

네이게이션 바 만들기 HTML - 드림코딩

앨리스.W 2023. 5. 23. 14:44

1.HTML 박스를 먼저 파악하기

2.아이콘과 폰트 가져오기

<!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=Source+Sans+Pro&display=swap" rel="stylesheet">
    <title>nav_bar</title>
    <script src="https://kit.fontawesome.com/8c67942cfe.js" crossorigin="anonymous"></script>
    <script src="main.js" defer></script>
</head>
<body>
    <nav class="navbar">
        <div class="navbar_logo">
            <i class="fa-brands fa-pagelines"></i>
            <a href="">WjiCoding</a>
        </div>

        <ul class="navbar_menu">
            <!--(li>a)*5  다섯번 자동으로 들어감-->
            <li><a href="">Home</a></li>
            <li><a href="">Gallery</a></li>
            <li><a href="">Wedding</a></li>
            <li><a href="">FAQ</a></li>
            <li><a href="">Booking</a></li>
        </ul>
        <ul class="navbar_icons">
            <li><i class="fa-brands fa-twitter"></i></li>
            <li><i class="fa-brands fa-github"></i></li>
        </ul>
        <a href="#" class="navbar_toggleBtn">  <!--#빼면 안됨-->
            <i class="fa-solid fa-bars"></i>
        </a>
    </nav>

</body>

</html>

드림코딩

https://www.youtube.com/watch?v=X91jsJyZofw