[수업노트](20.11.17)D+28 클래스101 상단배너 만들기

※ 상단 광고배너 높이 지정, 텍스트 수직중앙 정렬 

 

- 부모요소가 커지면 자식요소들도 같이 커지게 만드는방법 : 라이브러리 height-100p{height:100%}를 만들어준다

- 텍스트의 수직중앙정렬 : align-items: center;

 

※ 닫기버튼만 수직중앙 정렬 만드는 방법

- 부모 요소 align-items:center;

- 자식요소 align-slef: center;

 

※ 닫기버튼 세부 디자인 조정

- 아이콘을 감싸는 부모 선택자 span을 만들어 역할분배 시켜준다.

 

<!-- 구글 폰트 불러오기 -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

<!-- 폰트어썸 라이브러리 불러오기 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

<div class="gg-bar con-min-width">
  <div class="con height-100p flex">
    <a href="#" class="text flex flex-ai-c">
      지금 알림 신청하면 백화점 상품권 당첨!
    </a>
    <div class="flex-grow-1"></div>
    <div class="btn-close flex flex-ai-c">
      <span>
        <i class="fas fa-times"></i>
      </span>
    </div>
  </div>
</div>

 

/* 노말라이즈 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}

/* 라이브러리 */
.con {
  margin-left:auto;
  margin-right:auto;
}

.flex {
  display:flex;
}

.flex-jc-sb {
  justify-content:space-between;
}

.flex-ai-c {
  align-items:center;
}

.flex-grow-1 {
  flex-grow:1;
}

.flex-as-c {
  align-self:center;
}

.bg-red {
  background-color:red;
}

.bd-red {
  border:10px solid red;
}

.height-100p {
  height:100%;
}

/* 커스텀 */
html {
  font-family: 'Noto Sans KR', sans-serif;
}

.con-min-width {
  min-width:1176px;
}

.con {
  width:1176px;
}

.gg-bar {
  background-color:#5B4FFF;
  height:50px;
  color:white;
}

.gg-bar .text:hover {
  text-decoration:underline;
}

.gg-bar .btn-close {
  cursor:pointer;
}

.gg-bar .btn-close > span {
  padding:0 7px;
  border-radius:3px;
  cursor:pointer;
}

.gg-bar .btn-close:hover > span {
  background-color:rgba(62,64,66,0.2);
}