js로 올해 연도 표기하기 / 페이지 상단으로 이동 ScrollTo / HTML특수문자

 

🚨 ⓒ2021 : 저작권연도 표기

📍 올해 연도 자동 계산 함수

   ㄴ textContent / Date()

const thisYear = document.querySelector('.this-year');
thisYear.textContent = new Date().getFullYear(); //2021 // textContent : 글자 값을 알아내거나 지정하는

 

📍 ⓒ저작권 (특수문자) 넣는 방법 Html Entities

Character Entity Reference Chart

 

 

 

 

🚨 ScrollTo 페이지 상단으로 이동 gsap 라이브러리📌

기존에 Badge만들었던 window 이벤트 _.throttle함수에 함께 작성

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

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

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

// 배지
const badgeEl = document.querySelector('header .badges');
const toTopEl = document.querySelector('#to-top');

window.addEventListener('scroll', _.throttle(function () {
  console.log(window.scrollY);
  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));

// _.throttle(함수, 시간)

toTopEl.addEventListener('click', function () {
  gsap.to(window, .7, {
    scrollTo: 0
  });
});

 

 

 

 

 

 

👩‍💻 완성 코드

 

<!-- 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 : 1522-3232</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="logo" class="logo">

  </div>

 </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: "";  /* display: block; */  width: 3px;  height: 3px;    background-color: #555;  position: absolute;    top:0;  bottom: 0;  margin: auto;  right:-1px;}
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 .menu li:hover a {text-decoration: underline;}

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