2290
No
소스 :
https://github.dev/braverokmc79/tailwind-loopstudios-website
https://braverokmc79.github.io/tailwind-loopstudios-website/
1. HTML 문서 기본 구조
HTML 파일이 표준 규격을 따르도록 기본적인 요소들을 설정합니다:
- <!DOCTYPE html>로 문서의 타입을 정의.
- meta 태그를 사용하여 문서의 문자 인코딩과 뷰포트를 설정, 이로 인해 반응형 디자인이 가능하게 합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 폰트 및 Tailwind CSS 링크 추가 --> </head>
2. 외부 폰트 및 Tailwind CSS 추가
Tailwind CSS를 적용하여 빠르고 효율적으로 스타일링할 수 있도록 하고, Google Fonts를 통해 Alata와 Josefin Sans 같은 외부 폰트를 불러옵니다.
<link href="https://fonts.googleapis.com/css2?family=Alata&family=Josefin+Sans:wght@300&display=swap" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
3. 스타일 설정 (햄버거 메뉴 애니메이션)
햄버거 메뉴의 애니메이션 효과를 위한 CSS를 정의합니다. 메뉴 버튼을 클릭했을 때, 애니메이션이 자연스럽게 작동하도록 합니다. 예를 들어, 햄버거 아이콘이 90도로 회전하고 각 막대가 교차하는 효과를 제공합니다.
<style>
.hamburger { /* 햄버거 버튼 기본 스타일 */ }
.open { /* 햄버거가 열렸을 때의 스타일 */ }
</style>
4. 네비게이션 바 구성
nav 태그 안에 로고와 네비게이션 링크를 포함합니다. Tailwind CSS의 유틸리티 클래스를 사용하여 스타일을 빠르게 적용합니다. 예를 들어 flex와 items-center를 사용하여 콘텐츠를 가로로 정렬하고 가운데 정렬합니다.
<nav class="flex items-center justify-between font-bold text-white">
<img src="images/logo.svg" alt="">
<div class="hidden md:flex"> <!-- 데스크탑에서만 보이는 네비게이션 메뉴 -->
<a href="#">소개</a>
<a href="#">이벤트</a>
<a href="#">제품</a>
<a href="#">지원</a>
</div>
<div class="md:hidden"> <!-- 모바일에서 보이는 햄버거 메뉴 버튼 -->
<div id="menu-btn" class="block hamburger focus:outline-none">
<span class="hamburger-top"></span>
<span class="hamburger-middle"></span>
<span class="hamburger-bottom"></span>
</div>
</div>
</nav>
5. 모바일 메뉴
모바일에서는 햄버거 메뉴 버튼을 누르면 숨겨져 있던 네비게이션 메뉴가 나타납니다. 이 메뉴는 hidden 클래스로 기본적으로 숨겨져 있다가, 햄버거 버튼이 클릭되면 flex 클래스로 변환되어 표시됩니다.
<div id="menu" class="absolute hidden w-full min-h-screen bg-black"> <a href="#" class="hover:text-pink-500">소개</a> <a href="#" class="hover:text-pink-500">직업</a> <a href="#" class="hover:text-pink-500">이벤트</a> <a href="#" class="hover:text-pink-500">제품</a> <a href="#" class="hover:text-pink-500">지원</a> </div>
6. 자바스크립트로 햄버거 메뉴 제어
햄버거 버튼을 클릭했을 때, open 클래스를 토글하여 햄버거 애니메이션과 메뉴 표시를 제어합니다. addEventListener로 클릭 이벤트를 감지하고, classList.toggle을 사용해 hidden과 flex 클래스를 토글합니다.
const btn = document.getElementById('menu-btn');
const menu = document.getElementById('menu');
btn.addEventListener('click', function() {
btn.classList.toggle('open');
menu.classList.toggle('hidden');
menu.classList.toggle('flex');
});
7. 최종 결과
결과적으로, 작은 화면에서는 햄버거 메뉴가 표시되고, 이를 클릭하면 메뉴가 펼쳐지며 애니메이션 효과가 적용됩니다. 큰 화면에서는 네비게이션 메뉴가 기본적으로 보이게 됩니다. Tailwind CSS로 반응형 레이아웃을 쉽게 만들었으며, 자바스크립트로 상호작용을 추가하여 동적인 메뉴를 완성했습니다.
전체
<!DOCTYPE html>
<html lang="ko">
<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="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Alata&family=Josefin+Sans:wght@300&display=swap"
rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<script src="js/script.js" defer></script>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<title> Tailwind 햄버거 메뉴</title>
<style>
/* Hamburger Menu */
.hamburger {
cursor: pointer;
width: 24px;
height: 24px;
transition: all 0.25s;
position: relative;
}
.hamburger-top,
.hamburger-middle,
.hamburger-bottom {
position: absolute;
width: 24px;
height: 2px;
top: 0;
left: 0;
background: #fff;
transform: rotate(0);
transition: all 0.5s;
}
.hamburger-middle {
transform: translateY(7px);
}
.hamburger-bottom {
transform: translateY(14px);
}
.open {
transform: rotate(90deg);
}
.open .hamburger-top {
transform: rotate(45deg) translateY(6px) translateX(6px);
}
.open .hamburger-middle {
display: none;
}
.open .hamburger-bottom {
transform: rotate(-45deg) translateY(6px) translateX(-6px);
}
</style>
</head>
<body>
<section id="hero">
<div class="
max-w-screen-2xl
mx-auto px-6
py-12
md:px-12
h-96 bg-pink-500
">
<nav class="flex items-center justify-between
font-bold text-white">
<img src="images/logo.svg" alt="">
<div class="hidden h-10 font-alta md:flex md:space-x-8">
<div class="group">
<a href="#">소개</a>
<div class="mx-2 group-hover:border-b
group-hover:border-blue-50">
</div>
</div>
<div class="group">
<a href="#">이벤트</a>
<div class="mx-2 group-hover:border-b
group-hover:border-blue-50">
</div>
</div>
<div class="group">
<a href="#">제품</a>
<div class="mx-2 group-hover:border-b
group-hover:border-blue-50">
</div>
</div>
<div class="group">
<a href="#">지원</a>
<div class="mx-2 group-hover:border-b
group-hover:border-blue-50">
</div>
</div>
</div>
<div class="md:hidden">
<div id="menu-btn" class="z-40 block hamburger md:hidden focus:outline-none">
<span class="hamburger-top"></span>
<span class="hamburger-middle"></span>
<span class="hamburger-bottom"></span>
</div>
</div>
</nav>
<div id="menu" class="absolute top-0 bottom-0 left-0
flex-col self-end
hidden w-full min-h-screen py-1 pt-40 pl-12 space-y-3
text-lg text-white uppercase bg-black
">
<a href="#" class="hover:text-pink-500">소개</a>
<a href="#" class="hover:text-pink-500">직업</a>
<a href="#" class="hover:text-pink-500">이벤트</a>
<a href="#" class="hover:text-pink-500">제품</a>
<a href="#" class="hover:text-pink-500">지원</a>
</div>
</div>
</section>
<script>
const btn = document.getElementById('menu-btn')
const menu = document.getElementById('menu')
btn.addEventListener('click', navToggle)
function navToggle() {
btn.classList.toggle('open')
menu.classList.toggle('flex')
menu.classList.toggle('hidden')
}
</script>
</body>
</html>
댓글 ( 0)
댓글 남기기