Header & Offcavas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header & OffCanvas</title>
<!-- BS css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Fifth navbar example">
<div class="container">
<a class="navbar-brand" href="/">
<img src="./img/logo.png" alt="logo" width="48">
<span>ALOHA CLASS</span>
</a>
<!-- ํ๋ฒ๊ฑฐ ๋ฒํผ -->
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight" aria-controls="offcanvasNavbarLight" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- ๋ฉ๋ด -->
<div class="collapse navbar-collapse">
<div class="d-flex justify-content-between w-100">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">์ํ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">๊ฒ์ํ</a>
</li>
</ul>
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item mx-2">
<a class="btn btn-outline-primary" href="#">๋ก๊ทธ์ธ</a>
</li>
<li class="nav-item mx-2">
<a class="btn btn-outline-success" href="#">ํ์๊ฐ์
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- ์คํ์บ๋ฒ์ค -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarLight" aria-labelledby="offcanvasNavbarLightLabel">
<div class="offcanvas-header border-bottom">
<a class="navbar-brand d-flex align-items-center gap-2" href="/">
<img src="./img/logo.png" alt="logo" width="48">
<h5 class="offcanvas-title" id="offcanvasNavbarLightLabel">ALOHA CLASS</h5>
</a>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body d-flex flex-column justify-content-end">
<!-- โฌ -->
<ul class="navbar-nav flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link" href="#">์ํ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">๊ฒ์ํ</a>
</li>
</ul>
<!-- โฌ -->
<div class="box p-4 d-grid gap-2">
<a class="btn btn-primary" href="#">๋ก๊ทธ์ธ</a>
<a class="btn btn-success" href="#">ํ์๊ฐ์
</a>
</div>
</div>
</div>
</header>
<!-- BS js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
HTML
๋ณต์ฌ