[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 상단바_2차</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/componant.css">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<section class="hd-section">
<header>
<div class="container con-1920">
<!-- 큰 메뉴 -->
<div class="hd-screen-1920 flex-ac ">
<div class="logo-box"><img src="./image/logo.png" alt="로고이미지"></div>
<nav class="menu-bar ss6 bk t300">
<ul>
<li><a href="#">EVENT</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">BRAND</a></li>
<li><a href="#">REVIEW</a></li>
<li><a href="#">MAGAZINE</a></li>
<li><a href="#">고객센터</a></li>
</ul>
</nav>
<div class="user-menu-box flex-ac">
<div class="menu-btn">
<a href="#">매장안내</a>
</div>
<div class="user-btn">
<a href="#"><img src="./image/search.png" alt="search"></a>
<a href="#"><img src="./image/shop.png" alt="shop"></a>
<a href="#"><img src="./image/profile.png" alt="profile"></a>
</div>
</div>
</div>
<!-- 작은 메뉴 -->
<nav class="menu-bar hd-screen-1024 ss6 bk t300">
<ul>
<li><a href="#">EVENT</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">BRAND</a></li>
<li><a href="#">REVIEW</a></li>
<li><a href="#">MAGAZINE</a></li>
<li><a href="#">고객센터</a></li>
</ul>
</nav>
</div>
</header>
<div class="banner">
<div class="banner-title ml2 wh">
<a href="#">MONIEL</a>
</div>
<div class="banner-text ss1 wh">
<a href="#">오전 11시마다 선착순 한정 0원딜 오픈, 인기 교구 모음집 60% 세일</a>
</div>
</div>
</section>
</body>
</html>
[componant.css]
.hd-section {
height: 100vh;
}
/* 상단바 */
.con-1920 {
max-width: 1920px;
padding-left: 20px; padding-right: 20px;
justify-content: space-between;
}
.container {
margin-left: auto; margin-right: auto;
box-sizing: border-box;
}
/* 로고 */
.logo-box img {
width: 160px;
display: block;
}
/* 메뉴 */
/* 1차 - 1920 */
.menu-bar {display: flex; align-items: center; height:100px;}
.menu-bar > ul {display: flex; gap: 40px;}
/* 1차 -1024 */
.hd-screen-1024 {height: 0; overflow: hidden; justify-content: center;}
/* 유저 메뉴 */
.user-menu-box {gap:14px;}
.user-btn {gap: 4px;}
.user-btn img {
width: 26px; height: 26px;
object-fit: cover;
}
/* 배너 */
.banner {
position: relative;
background-size: cover;
background-repeat: repeat;
background-image: url(../image/banner.jpg);
height: 100vh;
}
.banner-title {
position: absolute;
bottom: 20%; left: 40%;
}
.banner-text {
position: absolute;
bottom: 15%; left: 35%;
}
[main.css]
.hd-screen-1920 {display: flex; justify-content: space-between;}
@media screen and (max-width:1024px) {
/* display:none;은 transition을 사용할 수 없다. -> font-size 줄이기 */
.hd-screen-1920 .menu-bar {font-size: 0; gap:0;}
.hd-screen-1024 {height: 100px;}
}
1. @media screen and (max-width:1024px) 의미
조건 : 브라우저(또는 화면) 가로 길이가 1024px 이하일 경우에만 중괄호 안의 CSS가 적용된다는 뜻.
- PC(1920px) → 적용 안 됨
- 태블릿(768~1024px) → 적용됨
- 모바일(375~480px) → 당연히 적용됨
2. /* display:none;은 transition을 사용할 수 없다. -> font-size 줄이기 */
여기서 의도는:
메뉴를 사라지게 해야 하는데 display:none 을 쓰면 transition 애니메이션이 아예 불가능함
그래서 “없애는 것처럼 보이게” font-size를 0으로 줄여 숨긴 것
3. .hd-screen-1920 .menu-bar { font-size: 0; gap: 0; }
1024px 이하에서는: menu-bar 의 항목 폭을 줄이기 위한 설정
- font-size:0;
→ 텍스트가 보이지 않게 됨 (사라지는 효과) - gap:0;
→ 메뉴 사이 간격을 없앰
목적은:
공간을 차지하지 않게 하여 다른 요소가 레이아웃을 깨지 않도록 유지 또는 네비게이션을 아이콘만 보이게 만들거나 숨기기 위함
즉, 메뉴를 부드럽게 사라지게 하는 방식이야.
4. .hd-screen-1024 { height: 100px; }
1024px 이하에서 헤더 전체 height를 100px로 고정하겠다는 의미
- PC용 헤더는 보통 더 크고 복잡함
- 태블릿/모바일에서는 헤더를 더 간단하고 얇게 만들어야 하기 때문에
'코딩 > 수업메모' 카테고리의 다른 글
| JS 2강 개념 -변수 (0) | 2026.02.20 |
|---|---|
| JS 1강 개념 - 출력문 (0) | 2026.02.20 |
| 251103 반응형 (0) | 2025.11.03 |
| 251017 picogram (버튼) (0) | 2025.10.17 |
| 251013 코딩 연습 (개구리게임) (0) | 2025.10.13 |