12. 스타벅스 푸터

---

스타벅스 푸터 HTML

 <!-- FOOTER -->
  <footer>
    <div class="inner">

      <ul class="menu">
        <li><a href="javascripte:void(0)" class="green">개인정보처리방침</a></li>
        <li><a href="javascripte:void(0)">영상정보처리기기 운영관리 방침</a></li>
        <li><a href="javascripte:void(0)">홈페이지 이용약관</a></li>
        <li><a href="javascripte:void(0)">위치정보 이용약관</a></li>
        <li><a href="javascripte:void(0)">스타벅스 카드 이용약관</a></li>
        <li><a href="javascripte:void(0)">윤리경영 핫라인</a></li>
      </ul>

      <div class="btn-group">
        <a href="javascript:void(0)" class="btn btn--white">찾아오시는 길</a>
      </div>

      <div class="info">
        <span>사업자등록번호 201-81-21515</span>
        <span>(주)스타벅스 코리아 대표이사 이석구</span>
        <span>TEL: 02) 3015-1100 / FAX : 02) 3015-1106</span>
        <span>개인정보 책임자 : 강기원</span>
      </div>

      <p class="copyright">
        &copy; <span class="this-year"></span> Starbucks Coffee Company All Rights Reserved.
      </p>
      <img src="./images/starbucks_logo_only_text.png" alt="" class="logo" />
    
    </div>
  </footer>

• menu class로 메뉴 묶음 처리
• btn-group class로 버튼 묶음 처리
• info class로 회사 정보 묶음 처리

---

스타벅스 푸터 CSS

/* FOOTER */
footer {
  background-color: #272727;
  border-top: 1px solid #333;
}
footer .inner {
  padding: 40px 0 60px;
}
footer .menu {
  display: flex;
  justify-content: center;
}
footer .menu li {
  position: relative;
}
footer .menu li::before {
  content: "";
  width: 3px;
  height: 3px;
  background-color: #555;
  position: absolute; 
  /* absolute를 사용했기 때문에 display:block도 함께 처리됨. */
  top: 0;
  bottom: 0;
  right: -1px;
  margin: auto;
}
footer .menu li:last-child::before {
  display: none;
}
footer .menu li a {
  color: #ccc;
  font-size: 12px;
  font-weight: 700;
  padding: 15px;
  display: block;
}
footer .menu li a.green {
  color: #669900;
}
footer .btn-group {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
footer .btn-group .btn {
  font-size: 12px;
  margin-right: 10px;
}
footer .btn-group .btn:last-child {
  margin-right: 0;
}
footer .info {
  margin-top: 30px;
  text-align: center;
}
footer .info span {
  margin-right: 20px;
  color: #999;
  font-size: 12px;
}
footer .info span:last-child {
  margin-right: 0;
}
footer .copyright {
  color: #999;
  font-size: 12px;
  text-align: center;
  margin-top: 12px;
}
footer .logo {
  margin: 30px auto 0;
  /* 이미지이기 때문에 display:block; + margin: 0 auto; 인 경우,
  width 속성이 없이도 가운데 정렬이 가능 */
}

footer class

• 배경 색 #272727
• 위쪽 테두리를 1px, solid 색은 #333

inner class

• 내부 여백은 위쪽 40px 좌우 0 아래 60px

menu class

• 수평 정렬
• 위아래 기준 중앙 정렬

li

• menu class 기준으로 배치

li::before 

• content: ""; 꼭 포함
• 가로 3px, 세로 3px
• 배경 색 #555
• menu class 기준으로 배치

li:last-child::before

• 마지막 요소가 안보임

a

• 색은 #ccc
• 폰트 사이즈는 12px
• 폰트 굵기는 700
• 내부여백은 15px 
• 블럭요소로 설정

a green class

• 색을 #669900으로 지정

btn-group class

• 위쪽 외부여백 20px
• 수평 정렬
• 위아래 기준 중앙 정렬

btn class

• 폰트 크기 12px
• 오른쪽 외부여백 10px

btn:last-child class

• 오른쪽 외부여백 초기화

info class

• 위쪽 외부여백 30px
• 좌우 기준 중앙정렬

span 

• 오른쪽 외부여백 20px
• 색 #999
• 폰트 크기 12px

span:last-child class

• 오른쪽 외부여백 초기화

copyright class

• 색 #999
• 폰트 사이즈 12px
• 좌우 기준 중앙정렬
• 위쪽 외부여백 12px

logo class

• 외부여백 위 30px, 좌우 auto, 아래 0
   
• 이미지이기 때문에 display:block; + margin: 0 auto; 인 경우,
  width 속성이 없이도 가운데 정렬이 가능

---

스타벅스 푸터 JS

const thisYear = document.querySelector('.this-year');
thisYear.textContent = new Date().getFullYear(); // 2022

• 2022년도를 나오게 할 수 있는 기능

---

스타벅스 푸터 최종 완성

---

문자 참조 사이트

• 브라우저에 html entities를 검색
• https://dev.w3.org/html5/html-author/charref

Character Entity Reference Chart

• 위와 같은 사이트를 이용하면 된다.