Day7 : 스타벅스 웹사이트 만들기 / 푸터 & 페이지 상단으로 이동

 

HTML/CSS/JS로 스타벅스 웹사이트 만들기

 

개요

 

프로젝트명 : HTML/CSS/JS로 스타벅스 웹사이트 만들기

강의 : 패스트캠퍼스 프론트엔드

분류 : 클론코딩

주요 강의 내용

- html : basic html + font, favicon

- css : basic css, 가상 클래스, bem

- js : basic js, swiper(슬라이드), toggle, gsap.to(순차적 애니메이션), Youtube iframe APII 등

사용 툴 : HTML, CSS, JavaScript

 

패스트캠퍼스 강의를 정리한 내용으로, 개인공부 후 기록하기 위한 목적임으로 내용 상에 오류가 있을 수 있습니다.

 

---

DAY 7
: 푸터 & 페이지 상단으로 이동

 

푸터 & 페이지 상단으로 이동

* view

마지막 마무리 footer 만들고, 오른쪽 하단에 누르면 최상단으로 올라가는 버튼 만들기 :)

---

* html code - 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>

 

 

* css code - footer

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

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;
}

 

 

footer의 경우 디자인에 맞춰서 만들어주면 됐기 때문에 어려운 건 없었다.

---

맨 하단에 해당년도를 넣어줘야하는데, 자바스크립트로 날짜 객체를 넣어주면 자동으로 현재 날짜 정보를 넣을 수 있어 매년 바꿔주지 않아도 되게끔 만들 수 있다.

 

* js code - footer

// Footer
const thisYear = document.querySelector('.this-year');
thisYear.textContent = new Date().getFullYear(); // 현재 날짜 정보 (2022)

Date 객체: 자바스크립트에는 현재 날짜 정보를 가지고 있는 Date 객체가 있다.

---

* html code - scroll to

<!-- Scroll to  -->
<div id="to-top">
	<div class="material-icons">arrow_upward</div>
</div>

위로 향하는 아이콘을 넣어준다.

---

* css code - scroll to

/* SCROLL TO */

#to-top {
    width: 42px;
    height: 42px;
    background-color: #333;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9;
}

 

* js code - scroll to

// header -> 오른쪽 Badge & scroll control
const badgeEl = document.querySelector('header .badges');
const toTopEl = document.querySelector('#to-top');

// _.throttle(함수, 시간/밀리세컨드)
window.addEventListener('scroll', _.throttle(function(){
    if(window.scrollY > 500){
        // 배치 숨기기
        gsap.to(badgeEl, .6, {
            opacity: 0 // 점점 투명해지는 애니메이션이 실행될 것이다.
            ,display : 'none'
        });
        // 버튼 보이기
        gsap.to(toTopEl, .2, {
            x: 0, // 버튼 보이게 원래 위치로
        });

        
    } else {
        // 배치 보이기
        gsap.to(badgeEl, .6, {
            opacity: 1 // 점점 나타나는 애니메이션이 실행될 것이다.
            ,display: 'block'
        });

        // 버튼 숨기기
        gsap.to(toTopEl, .2, {
            x: 100, // 버튼 안보이게 숨김.

        });
    }
}, 300));
//0.3초(window scroll event가 0.3초 단위로 부활된다.)


// Scroll-to
toTopEl.addEventListener('click', function() {
    gsap.to(window, .7, {
        scrollTo: 0 // 화면의 위치를 0px 위치로 옮기겠다.
    })
});

1. 챌린지 이전에 했던 거라 기록엔 없지만 화면 오른쪽에 나타나는 badge를 만들었었는데, badge가 나타나고 사라지는 자바스크립트 코드에 하단 scroll 화살표 버튼도 나타나고 사라질 수 있도록 코드를 추가해준다.

 

2. scroll 화살표 버튼을 누르면 상단으로 올라갈 수 있도록 addEventListener를 추가해준다.

여기서 gsap.to 를 사용하고, 그 때 올라가는 요소는 body 전체이므로 window이다.

그리고 상단으로 올라가게 만들저누는 scrollTo 는 ScrollPlugin cdn을 미리 script 태그로 추가해놔야 사용할 수 있다.

---

스타벅스 웹사이트 만들기 챌린지 완성본 :)