패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 웹페이지의 하단 요소인 Footer를 작성하며 배운 내용들을 적어본다.

Footer❓

사이트 하단 부분의 영역을 의미한다. header와 마찬가지로 기능은 없지만 영역구분의 의미가 있는 <footer> 태그를 가지고 있다.

HTML Entity❓

HTML에서 유니코드를 입력하면 자동으로 불러와지는 특수기호들이 있다. 아래 그림처럼 HTML에 ©를 입력하면 출력은 자동으로 © 이렇게 된다. <div&gt로 입력하면 velog에서도 <div>를 백틱기호 없이 사용할 수 있다! 수많은 엔티티들이 있어서 링크를 첨부하고 필요할 때마다 참조해서 사용하면 좋글 것같다. 제일 쉽게 작성해 놓은 사이트 url을 첨부한다

더 자세한 엔티티 목록 참고는 여기👍
https://unicode-table.com/kr/html-entities/

HTML

- btn-group을 만들어서 버튼 3개를 묶어서 제어하였다
- copyright 클래스
1. ©를 통해 ©를 자동으로 출력할 수 있게 하였다
2. <span class="this-year">를 통해 해가 바뀔 때마다 자동으로 년도가 바뀌도록 하였다(동작 관련 코드는 JS에서 제어하였다)

<!-- FOOTER -->
<!-- 사이트 하단 부분의 영역을 의미하는 footer -->
<footer>
<div class="inner">
  <ul class="menu">
    <li><a href="javascript:void(0)" class="green">개인정보처리방침</a></li>
    <li><a href="javascript:void(0)">영상정보처리기기 운영관리 방침</a></li>
    <li><a href="javascript:void(0)">홈페이지 이용약관</a></li>
    <li><a href="javascript:void(0)">위치정보 이용약관</a></li>
    <li><a href="javascript:void(0)">스타벅스 카드 이용약관</a></li>
    <li><a href="javascript:void(0)">윤리경영 핫라인</a></li>
  </ul>

<div class="btn-group">
  <a href="javascript:void(0)" class="btn btn--white">찾아오시는 길</a>
  <a href="javascript:void(0)" class="btn btn--white">신규입점제의</a>
  <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>

JS

- thisYear.textContent > 요소가 가지고 있는 글자 내용을 알아내거나 값을 지정할 수 있다
- new Date().getFullYear(); > Date()는 현재 날짜 정보를 가지고 있는 객체이다. Date() 객체에 .getFullYear() method를 실행해주면 현재 년도의 정보가 숫자 데이터로 반환된다

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

CSS

• footer .menu li::before > li 태그들(개인정보처리방침뒤부터 글자들) 사이에 회색 점을 찍어주기 위해 가상요소선택자 ::before를 사용하였다
• footer .menu li:last-child::before > li 태그 제일 앞의 점은 안 보이도록 제어하기 위해 li태그의 가장 마지막 요소(li:last-child)를 선택자로 두고 display:none;값을 주었다
• img 요소가 diplay: block; + margin: 0 auto;인 경우 width 속성이 없어도 가운데 정렬이 가능하다

/* FOOTER */

footer{
    background-color: #272727;
    border-top: 1px solid #333;
}

footer .inner{
    padding: 40px 0 60px  0;
}

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;
    top: 0;
    bottom: 0; 
    right: -1px;
    margin: auto;
}

/* li 태그 제일 앞의 점은 안 보이게 하겠다 */
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;
}