패스트캠퍼스 챌린지 23일차 - Part 1. 스타벅스 예제(11)

32. 푸터

html에 특수문자 표시하기

&copy; <!-- copyright 표시 -->
&lt;div&gt <!-- <div>라고 표시됨 -->

더 많은 기호 참고 https://tools.w3cub.com/html-entities

 

이미지 가운데 정렬

footer .logo {
/* img 요소가 display:block; + margin: 0 auto;인 경우 width 속성 없어도 가운데 정렬 가능 */
/* 현재 프로젝트에서 img 요소에 display: block; 적용되어있음 */
	margin: 30px auto 0;
}

Copyright 년도 계산

<p class="copyright">
		&copy; <span class="this-year"></span> Starbucks Coffee Company. All Rights Reserved.
</p>
<!-- this-year 부분에 현재 년도 표시 -->

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

33. 페이지 상단으로 이동

Gsap Cdn ScrollToPlugin 연결

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollToPlugin.min.js" integrity="sha512-tQFq+nb/TSS648SDzWbSj0A67t4I1PFzR0U6Oi/yEYFyUbAIwg74SOCbr7t2X1Rn+iln7sYwfh8y+z7p0gddOw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

1. 스크롤에 따라 버튼 보였다 안 보이게 하기 (예전에 만들어놨던 window.addEventListener에 추가)

window.addEventListener(
	'scroll',
	_.throttle(function () {
		if (window.scrollY > 500) {
			// 배지 숨기기 //
			
			// 버튼 보이기! // 새로 작성
			gsap.to('#to-top', 0.2, {
				x: 0,
			});
		} else {
			// 배지 보이기 //

			// 버튼 숨기기! // 새로 작성
			gsap.to('#to-top', 0.2, {
				x: 100,
			});
		}
	}, 300)
);

2. to-top 버튼 누르면 위로 가게 하기

const toTopEl = document.querySelector('#to-top');
toTopEl.addEventListener('click', function () {
	gsap.to(window, 0.7, {
		scrollTo: 0,
	});
});

페이지 상단에서는 보이지 않던 top 버튼이 스크롤을 내리면 나타남

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.