728x90
반응형
맨 위 상단바 제작
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>위글위글</title>
<link href="normalize.css" rel="stylesheet" />
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="banner-top">
<a href="#"
>카카오톡 채널 추가 시 <strong>3천원 쿠폰</strong> 즉시 발급</a
>
</div>
</header>
<!-- 헤더 끝 -->
<!-- 콘텐트 시작 -->
<!-- <div class="container">
<div class="logo"><img src="이미지/logo.png" alt="위글위글로고" /></div>
<div class="menu">
<img src="이미지/햄버거메뉴아이콘.png" alt="메뉴아이콘" />
<div class="banner-content"></div>
<img src="이미지/banner1.jpg" alt="배너사진1" />
</div>
</div> -->
</div>
<!-- 스크립트 -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="main.js"></script>
</body>
</html>
반응형으로 만들 거기 때문에
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
이거 헤드 부분에 넣어줬다.
CSS
/* CSS Reset - 기본 설정 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* header */
.banner-top {
background-color: #f5e44f;
width: 100%;
padding: 40px;
height: 40px;
display: flex;
align-items: center;
/* 세로 중앙 정렬 추가 */
justify-content: center;
/* 가로 좌우 정렬 */
}
.banner-top a {
text-decoration: none;
font-size: 12px;
color: rgb(0, 0, 0);
}
.banner-content img {
width: 100%;
}
/* container */
css 작성할 때
banner-top 을 부모로 보고
display: flex 를 줘서
a 태그의 위치를 조절해줬다.
728x90
반응형
'> 포트폴리오 > wiggle wiggle' 카테고리의 다른 글
[SASS] 로고와 메뉴바 위치 지정하기 (display:flex) (0) | 2024.06.21 |
---|---|
[SASS] 상단 메뉴바 생성과 position 이해 ( X버튼 추가 ) (0) | 2024.06.19 |
[SASS] 상단 바 만들기 (0) | 2024.06.18 |
[CSS] 메뉴 바 만들기 (1) - 이미지 사이즈와 맞추기, 이미지 여백 없애기 (0) | 2024.04.16 |
[CSS] 로고 위치 조정하기 - position 으로 띄우기 (0) | 2024.04.16 |