패스트 캠퍼스 스타벅스 예제 - 3

TonyHan·2021년 7월 28일

21) 패스트캠퍼스_프론트엔드

목록 보기

8/20

https://github.com/ParkYoungWoong/starbucks-vanilla-app

17.

이번에는 swiper가 작동되도록 만들어보자

swiper이라고 검색하자
https://swiperjs.com/

Demos로 들어가자

Vertical의 source code부분을 클릭하자 지금은 사이트가 업데이트 되어 Core을 클릭하면 된다.

이제 다시 swiper 홈페이지로 돌아서 Get Started로 들어가자 거기에서 CDN 중에서 min.css 파일들을 가지고오자.

min.css 파일들을 상단에 위치시키어 주었다.

이제 slider가 해석할 수 있는 swiper-slide 부분을 만들어주자.

간단하게 js를 작성하는 것만으로도 swiper 기능이 되는 것을 확인할 수 있다.

마지막으로 autoplay와 loop를 넣어주어서 완성할 수 있었다.

그리고 swiper-slide에 대한 css도 작성해주자. 그러면 오른쪽과 같이 정상적으로 swiper가 작동하는 하면을 확인할 수 있다.

18.

이번에는 스타벅스 프로모션 부분을 제작해보자

또한 프로모션 부분은 화면을 확대해도 이미지가 정중앙에 있다. 이게 어떻게 가능한지 확인해보자

가장 간단하게 promotion 크래스를 만들자

promotion부분은 이미지 3개가 들어가는 만큼 각 성분의 길이가 계산되어서 들어갈 수 있도록 만들어주자.

.notice .promotion {
  height: 693px;
  background-color: #f6f5ef;
  position: relative;
}
.notice .promotion .swiper-container{
  width: calc(819px * 3 + 20px); //전체 프로모션 영역
  /* width: calc(100% - 50px); */
  height: 553px;
  background-color: orange;
  text-align: center;
  font-size: 200px;
  position: absolute;
  top: 40px;
  //위치기준은 절반이고 이 부분을 땡기어 온 형태이다.
  left: 50%; 
  margin-left: -1238.5px;
}

하지만 매번 margin-left를 전체 사이즈를 계산할 수 없으니 calc를 사용하자

그리고 프로모션에 올라갈 이미지들을 입력해주자

이번에는 js를 수정해주는 것으로 3개의 슬라이드를 10px 간격으로 보여줄 수 있게 된다.

이제 이미지를 f12 로 확인해보면 swiper-slide-active라는 것이 가운데 성분으로 사용되는 것을 확인할 수 있다.

이제 main.css 를 수저애주자. 위에서 선택된 부분들은 의미가 없으니 지워주자

이제 swiper-slide 관련해서 opacity를 수정해주면 보기 중앙만 불투명해지는 것을 확인할 수 있다.

이번에는 버튼이 보이도록 만들어주자.

이번에는 왼쪽 오른쪽 버튼과 페이지 번호도 추가해주자.

다음 세개를 추가해주자.

페이지 번호 옵션은 Swiper에서 제공해준다.

그래서 pagination과 navigation을 추가해주자

하면 위치가 이상한 곳에 생긴다.

이걸 다시 우리가 원하는 위치로 옮기어 주자.

이제 이 버튼의 디자인을 바꾸어보자

이 버튼을 눌러보니 swiper-pagination-bullet 클래스의 영향을 받는 것을 확인할 수 있다.

그래서 위와 같이 버튼의 이미지를 바꾸어주자.

근데 또 파란색 버튼은 -active가 붙는 것을 확인할 수 있다. 이 부분도 바꾸어주자.

위와 같이 작성해주어서 버튼의 이미지를 바꿀 수 있다.

이번에는 다중선택자라는 것도 사용해볼 수 있었다. 그래서 swiper-prev와 swiper-next는 위치 조절을 위해 따로 작성하되 공통적인 부분은 다중 선택자를 사용해서 옵션을 넣어주자.

html에서 material-icons를 넣어주자. 하지만 이미지가 이상한 위치에 있다.

이번에는 화살표의 위치를 조절해주고 hover을 추가해서 마우스를 올릴 경우 색이 바뀌도록 만등어주자.

21

이번에는 프로모션 버튼을 누르면 이벤트가 여닫아지게 만들어주자.

이를 위해 자바스크립트를 이용해서 위와 같이 클릭스 hide속성이 추가/삭제 되도록 만들어주자.

클릭스 클래스가 추가되는 것을 확인할 수 있다.

css에서 .notice .promotion값을 바꾸고 .notice .promotion.hide 부분을 추가해주는 것으로 높이값을 바꾸어 변화시킬 수 있다.

22 Rewards

Rewards 영역을 만들어보자

이미지 영역이 쭉 이어지는 것을 확인할 수 있다.

이제 마지막으로 버튼들을 넣어주자.

일단 버튼 그룹을 이렇게 만들어주기는 했는데 정작 큰 변화가 없다. flex-wrap: wrap은 참고로 성분드이 너비 250px를 넘었을때 줄바꿈을 허용하겠다는 의미이다.

버튼 기본크기를 130px로 했기 때문에 생기는 문제점이다.

버튼의 위치와 크기를 수정해주자.

gift 버튼만 flex-grow를 사용해서 최대 크기로 늘어나도록 만들어주자.

마지막으로 색상만 바꾸어주기 위해 회원가입은 btn--reverse 클래스도 넣어주자.

23. youtube

시작전에 위와 같이 코드를 짯을때 height가 0임에도 불구하고 padding-top만으로도 몇대몇 비율의 사각형을 만들 수 있다. 이것을 유튜브 영상을 삽입하는데 사용해보자.

왜냐하면 유튜브 영상은 기본 16:9인데 이걸 매번 계산할 수 없으니 말이다.

정확하게는 56.25%로 자식 성분의 padding-top에 넣어주자.

오렌지란을 추가했다. 이 오렌지란은 16:9 비율로 정의된것을 확인할 수 있다.

이번에는 유튜브에 relative를 부여하고 height는 400px이다. 그리고 left 50%만큼 밀고 margin-left로 땅기어오자. 그러면 중앙에 배치된것을 확인할 수 있다.

또한 youtube__area의 위치를 calc함수를 사용해서 위쪽으로 올려주면 위 이미지의 주항색부분이 유튜브 영상이 나오는 위치라고 생각하면 된다.

일단 히든을 주어서 넘치는 부분을 안보이게 만들어주자

유튜브 커버 부분을 채워주자.

24

이제 실재로 유튜브 영상을 넣기 위해 youtube ifram api라고 검색해보자

https://developers.google.com/youtube/iframe_api_reference?hl=ko

https://www.youtube.com/watch?v=An6LvWQuj_8

이 영상의 v= 이후에 있는 코드를 videoId를 사용해야 한다.

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.

function onYouTubeIframeAPIReady() {
	new YT.Player('player', {
		videoId: 'An6LvWQuj_8', // 최초 재생할 유튜브 영상 ID
		playerVars: {
			autoplay: true, // 자동 재생 유무
			loop: true, // 반복 재생 유무
			playlist: 'An6LvWQuj_8' // 반복 재생할 유튜브 영상 ID 목록
		},
		events: {
			onReady: function (event) {
				event.target.mute() // 음소거
			}
		}
	});
}