패스트 캠퍼스 챌린지 14일차

☕

14일차

 

Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트

Ch 10. 스타벅스 예제

 

---

 

Ch 10. 스타벅스 예제

 

 

주제

 

• 고정 이미지 배경
• 3D 애니메이션
• 스크롤 위치 계산 애니메이션
• 다중 요소 슬라이드
• 푸터
• 페이지 상단으로 이동(ScrollTo)

 

 

주요 내용

 

 🔗 HTML Entities (HTML 특수기호들) 

https://dev.w3.org/html5/html-author/charref

Character Entity Reference Chart

 

실습 화면

 

 

새로 알게 된 내용

 

 🔗 뒤집기 애니메이션 

backface-visibility: hidden;

 

<div class="container">
  <div class="item front">앞</div>
  <div class="item back">뒤</div>
</div>

 

body {
  padding: 50px;
}
.container {
  width: 100px;
  height: 100px;
  background-color: orange;
  perspective: 300px;
}
.container .item {
  width: 100px;
  height: 100px;
  border: 4px solid red;
  box-sizing: border-box;
  font-size: 60px;
  backface-visibility: hidden;
  transition: 1s;
}
.container .item.front {
  position: absolute;
  transform: rotateY(0deg);
}
.container:hover .item.front {
  transform: rotateY(180deg);
}
.container .item.back {
   transform: rotateY(-180deg);
}
.container:hover .item.back {
  transform: rotateY(0deg);
}

 

 

 🔗 ScrollMagic JS 라이브러리 : 요소가 화면에 보여짐 여부에 따른 요소 관리

https://cdnjs.com/libraries/ScrollMagic

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

//? 요소가 화면에 보여짐 여부에 따른 요소 관리
// 관리할 요소들 검색!
const spyEls = document.querySelectorAll("section.scroll-spy");
// 요소들 반복 처리!
spyEls.forEach(function (spyEl) {
  new ScrollMagic.Scene({
    // 감시할 장면(Scene)을 추가
    triggerElement: spyEl, // 보여짐 여부를 감시할 요소를 지정
    triggerHook: 0.8, // 화면의 80% 지점에서 보여짐 여부 감시
  })
    .setClassToggle(spyEl, "show") // 요소가 화면에 보이면 show 클래스 추가
    .addTo(new ScrollMagic.Controller()); // 컨트롤러에 장면을 할당(필수!)
});

 

 

 🔗 GSAP JS 라이브러리 - ScrollToPlugin : 페이지 상단으로 이동

https://cdnjs.com/libraries/gsap

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollToPlugin.min.js" integrity="sha512-agNfXmEo6F+qcj3WGryaRvl9X9wLMQORbTt5ACS9YVqzKDMzhRxY+xjgO45HCLm61OwHWR1Oblp4QSw/SGh9SA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

// 상단으로 스크롤 버튼을 클릭하면,
toTopEl.addEventListener("click", function () {
  // 페이지 위치를 최상단으로 부드럽게(0.7초 동안) 이동.
  gsap.to(window, 0.7, {
    scrollTo: 0,
  });
});

 

 

• img 요소가 display: block; + margin: 0 auto; 인 경우, width 속성 없이도 가운데 정렬이 가능하다.

 

 

느낀점

 

 후 드디어 길고 긴 10장이 끝났다!🤣 며칠동안 하느라 중간에 산으로 갈 뻔 한 적도 있지만 계획대로 다 끝마쳐서 다행이다. 클론코딩이 도움이 안 된다는 얘기를 많이 들었는데 나도 어느정도는 공감한다. 물론 혼자 프로젝트 만들어 보는게 실력 향상에 제일 도움 되겠지만 클론 코딩을 통해 얻는 것도 많다. 아 이 부분은 이런식으로 할 수도 있구나 더 편하다 다음에 이렇게 해봐야지라는 생각도 많이 할 수 있었다. 무엇보다 이번 강의를 통해 얻은 가장 큰 수확은 다양한 JS 라이브러리를 알게 됐다는 것이다. 다음에 프로젝트할 때 빨리 써먹어보고 싶다.😆😇

 

---

 

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

 

#패스트캠퍼스

#패캠챌린지

#직장인인강

#직장인자기계발

#패스트캠퍼스후기

#한_번에_끝내는_프론트엔드_개발_초격차_패키지_Online

 

https://bit.ly/37BpXiC

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