[SASS] 상단 바 만들기

HTML

    <div class="wrapper">
      <header class="header">
        <div class="banner-top">
          <a href="#"
            >🌸카카오톡 채널 추가 시 <strong>3천원 쿠폰</strong> 즉시 발급🌸</a
          >
        </div>
      </header>
      <!-- 헤더 끝 -->
    </div>

전체 감싸는 div = wrapper

 

header 안에 들어 갈 것

div .banner-top ( 문구 ) 뿐만 아니라 
X 버튼 div 도 추가해줄 예정.

SASS

@use "reset";

/* 색상 변수 */
$main_color: #f5e44f;
$sub_color: #e33258;

/* header  */
.banner-top {
  background-color: $main_color;
  width: 100%;
  padding: 11px;
  text-align: center;
  font-size: 12px;
}

가운데 정렬을 하기 위해서

text-align: center 사용하고,

위아래 정렬은 padding 을 계산해서 넣어줬다.

 

padding 으로 높이를 대신했기 때문에

width 만 넣어주고, height 는 안 넣어줌.

---

이전에 만든 CSS와 차이점

/* 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);
}

예전에는 가운데 정렬하려고 

복잡하게 flex 쓰고 했었는데 그럴 필요없이

padding 으로 간추림.

( banner-top 을 부모로 보고

display: flex 를 줘서 

a 태그의 위치를 조절 )

 

그리고 css 로 생성하니 복잡해보여서 sass 로 사용