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

※ 크롬 개발자 단축키 : ctrl +shift + c

※ codepen 코드업 동작 재실행: ctri + shift + 7

 

※ 고정형 사이트 만들기 : 너비를 조절해주는 라이브러리 .con이 있다면 자식을 감싸는 부모요소에

                                자식너비만큼의 라이브러리 .con-min-width를 만들어준다

 

※ 폰트적용 : 구글폰트에서 Noto Sans KR 다운가능 (가독성 좋고 무료 폰트)

                 용량 감안하여 필요한 크기선택하여 오른편 링크를 html에 붙여넣기, font-family를 css붙여넣기

 

※ 아이콘 적용 : 이미지를 삽입하여도 되지만 색, 크기조절 등 자유로운 디자인은 위해 폰트어썸 font awesome이용

  - 무료아이콘검색 - 적절한 아이콘 선택 및 주소 복사 - html 마크업

  - cdnjs사이트에서 font awesome 검색 - 링크복사 - html 상단 마크업

 

※ 메뉴바 등 중간여백 넣어주기

  1) flex justify-content:space-between;

  2) 여백을 넣을 위치에 내용없는 엘리먼트 생성후 라이브러리 flex-grow-1 만들어준다. 

 

<!-- 구글 폰트 불러오기 -->
<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 flex">
    <div class="text">
      지금 알림 신청하면 백화점 상품권 당첨!
    </div>
    <div class="flex-grow-1"></div>
    <div class="btn-close"><i class="fas fa-times"></i></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-grow-1 {
  flex-grow:1;
}

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

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

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

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

.con {
  width:1176px;
}

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

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

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