[CSS] 상단 바 만들기

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