[클론프로젝트] 스타벅스코리아 3일차
API 끌어다 쓴 링크
Swiper
Gsap_scrollToPlugin
ScrollMagic
오늘은 섹션을 여러가지 추가해보았다.
사용해본 API, CDN은
- 스와이퍼
- 스크롤매직
- Gsap의 ScrollToplugin
이 세개를 통해서 슬라이드를 하면서 순차적으로 애니메이션을 부여하는 방법을 배웠다.
신기하기도 했지만 자세한 것을 다룰려면 아직 연습이 더 필요할 것 같다.
뭔가 PPT에 애니메이션을 불어넣어서 만들어보는 느낌이었다. PPT보다 훨씬 어렵지만..
겪어본 오류들
첫 번째 오류
지금 이 오류 현상은 무엇이냐, 유튜브 동영상이 나타나지 않는다.
알고보니까 id=”player”에 큰 따옴표 (““)를 감싸지 않아서 발생하는 것 같았다.
그리고 CSS에서도 클래스 안에서
display: "block";
으로 큰 따옴표로 감싸면 안되는 부분에 큰 따옴표를 감쌌다.
HTML의 id 이름에는 큰 따옴표를 감싸주었고,
그리고 CSS에서도 클래스 안에서
display: block;
으로 수정하였다. 위의 사진과 같이.
오케이. 해결되었다. 영상이 잘 나온다.
두 번째 오류
위 두 사진을 같이 보면 내가 하려고 했던 것은 저 배너들이 한 번에 5개씩 나타도록 만들려고 했지만 그보다 많은 7개가 나타난다.
분명 강사님의 코드엔 문제가 없었다.
하지만 이번에는 바로 해결할 수 있었다.
overflow: hidden;
어제 겪었던 오류랑 똑같은 오류였다. 그래서 그런지 1시간을 해맸던 어제와는 달리 이번엔 바로 해결할 수 있었다.
이게 바로 오답노트의 힘인가..
오케이! 이제 의도한 대로 5개만 나타난다.
내 첫 클론 프로젝트이다. 이 프로젝트도 어느새 막바지에 접어들고있다.
다음 단계로 푸터와 페이지의 맨 위로 향하는 버튼을 만들면 이 프로젝트는 끝이난다.
근데 프로젝트 만들기는 끝이지만 코드 자체는 여러번 볼 것 같다.
나중에 내 홈페이지를 만들 때 참고해야하니까.
나중에 시간이 날 때 블로그에 각 API 사용법을 정리해야겠다.
너무 유용하네.
