[221003-221007] 스타벅스 예제

 

 

1. favicon

메인 폴더에 favicon.ico 놓고 title 태그 밑에 아래 코드 삽입

<link rel="icon" href="favicon.ico" />

 

 

 

2. 오픈 그래프, 트위터 카드

• title 태그 밑에 차례로 삽입
• seo : 검색 엔진에 노출되는 정보 최적화

 

• 오픈 그래프

<meta property="og:type" content="website" /> 
<!-- 페이지의 유형 -->

<meta property="og:site_name" content="jane" />
<!-- 사이트 이름 -->

<meta property="og:title" content="jane coding" />
<!-- 페이지 이름 -->

<meta property="og:description" content="jane의 개발새발" />
<!-- 페이지에 대한 설명 -->

<meta property="og:image" content="../img/jane_seo.jpg" />
<!-- 페이지의 대표 이미지 -->

<meta property="og:url" content="https://jane-it-story-blog.tistory.com/" />
<!-- 페이지 주소 -->

 

• 트위터 카드

<meta property="twitter:card" content="summary" />
<!-- 페이지의 유형 -->

<meta property="twitter:site" content="jane" />
<!-- 사이트 이름 -->

<meta property="twitter:title" content="jane coding" />
<!-- 페이지 이름 -->

<meta property="twitter:description" content="jane의 개발새발" />
<!-- 페이지에 대한 설명 -->

<meta property="twitter:image" content="../img/jane_seo.jpg" />
<!-- 페이지의 대표 이미지 -->

<meta property="twitter:url" content="https://jane-it-story-blog.tistory.com/" />
<!-- 페이지 주소 -->

 

3. google font

• main.css 위에 link 삽입
• main.css 에 font-family: ~ 복붙
• 브라우저가 달라도 동일한 폰트가 나오게 할 필요 있음

 

 

 

4. 구글 material icon

• 사이트 - 로고 - getting started - getting start 에 link 태그만 복붙
• icons 에서 원하는 아이콘의 코드 복붙
• 폰트 사이즈로 크기 조절

 

 

 

5. 로고

• common - 공통 (공통으로 넣어야 할 스타일링에 적용)
• 상하 가운데로 위치 시키기

.content{
	width: 300px;
    height: 300px;
    position: absolute;
    top: 0; 
    bottom: 0;
    left: 0; 
    right: 0; 
    margin: auto;
}

 

 

 

6. 서브 메뉴

• a 태그로 다른 곳으로 이동할건데 링크가 준비되지 않았다면 href 에 # 이나 javascript:void(0) 해주면 이동하지 않고 작동하지 않겠다 라는 뜻, # 보다는 void 를 권장.
• position 속성의 absolute 와 fixed 속성값은 기본적으로 요소가 display: block 처리

 

 

 

7. 검색

• 부모 요소와 자식 요소를 같이 부르려면 document.querySelector 2개를 해주는 것이 아니라 부모요소를 부르고 부모요소 변수를 document 자리에 넣어주고 소괄호 안에는 자식요소만 적어주면 됨
• input 에만 css 로 focus 를 줬기 때문에 검색 아이콘을 누르면 나오지 않음 이건 js 로 처리해줘야 함
• 그래서 해당 영역을 누르면 focus 효과를 주도록 설정하려면 부모 영역에 이벤트를 추가하여 클릭하면 input 요소에 focus 되도록 설정
• 그리고 input 요소에 focus 되면 이벤트를 추가하여 부모 영역에 focus 되면 아이콘이 사라지는 효과를 줄 css class 를 추가하고, input 에는 placeholder 에 통합검색이 뜨도록 속성을 추가.
• 반대로 input 요소에 blur 되면 반대로 class 를 지우고, placeholder 에는 빈값이 뜨도록 속성을 추가.

 

 

 

8. 메인 메뉴

• 메인 메뉴 이름에만 hover 했을 때 하위 컨텐츠가 뜨도록 하는 것이 아니라 하위 컨텐츠도 영향이 가기 때문에 이름과 하위 컨텐츠를 함께 감싸고 있는 부모 요소에 hover 를 적용해야 함
• 하위 컨텐츠의 위치에 position fixed 를 지정, top 이나 bottom 같은 수직 위치 값이 없다면 요소의 원래 위치를 사용함. 만약 position absolute 를 사용한다면 부모 요소를 기준으로 하기 때문에 화면의 좌우 끝까지 늘어날 수 없게 됨
• 컨텐츠의 좌우 넓이가 동일한 부분이 계속된다면 common 공통 부분에 .inner 라는 클래스를 가진 컨텐츠들은 모두 같은 위치에 있도록 설정

 

 

 

9. bem

• html 클래스 속성의 작명법으로 block element modifier 의 약자
• 요소__일부분 : underscore 기호로 요소의 일부분을 표시
• 요소--상태 : hyphen 기호로 요소의 상태를 표시, ex) btn btn--error → 버튼인데 에러인 버튼을 뜻함

 

 

 

10. 전역 배지: 고정 배너

• position absolute 와 fixed 는 block 으로 처리된다고 했는데 block 요소는 가로 넓이를 최대한 늘어나려고 시도하지만 absolute 와 fixed 의 경우 최소한으로 줄어들려고 시도함
• 스크롤이 내려가면 배지는 사라지는데 이것은 js 로 구현
• window 창에 scroll 이벤트를 추가할 건데 스크롤이 될 때마다 해당 함수가 실행되기 때문에 화면이 버벅일 수 있음 따라서 라이브러리를 사용할 것임
• lodash cdn : lodash.js 페이지 맨 위에 있는 html 태그 를 복사해서 main. js 파일 위쪽에 붙여넣기
• 이벤트 함수의 'scroll' 에 이은 두번째 매개변수로 _.throttle( ) 이라는 함수를 불러오고 소괄호 안의 첫번째 매개변수로는 실행할 함수를 두번째로 시간(ms)을 입력하면 그 시간만큼만 함수를 실행할 수 있음
• 실행할 함수에는 if 문을 사용하여 window 의 scrollY 가 500 보다 커지면 배지를 지우고 아니면 나오게 하도록 설정
• 하지만 저렇게만 하면 움직임이 부자연스럽기 때문에 gsap 의 애니메이션을 처리해주는 라이브러리를 사용할 것 gsap cdn 상단의 html 태그를 복사해서 main.js 파일 위쪽에 붙여넣기
• 다시 if 안에 gsap 으로 애니메이션 효과를 줄건데 gsap.to( ) 를 이용하여 소괄호 안에는 차례대로 적용할 요소, 지속시간(s), 적용할 옵션을 적어주면 됨 → gsap.to(badgeEl, .6, { opacity: 0, display: 'none' })
• 여기서 opacity 와 display 를 같이 주는 이유는 opacity 만 주면 해당 요소가 투명해져 없어져보이는 것이지 화면 상에는 남아 있어 display 값을 같이 주는 것이고, display 만 주면 해당 속성은 숫자가 아닌 속성이라 전후 상태의 중간갑이 존재하지 않아 자연스러운 전환 효과를 적용할 수 없어 opacity 값을 같이 주는 것

 

 

 

11. 전역 버튼 스타일

• 비슷한 스타일의 버튼을 전역으로 쓸 것이기 때문에 common 에 btn 으로 css 동일하게 작성하고 hover, btn 과 동일한 구조지만 반대 스타일인 reverse 와 다른 색상의 버튼인 brown, gold, white 도 중복 클래스로 같이 작성. 이때 class 이름을 요소의 상태를 표시하는 bem 으로 작성할 것.

 

 

 

12. 순차적으로 요소 보이기

• 배치한 이미지를 새로고침하면 순차적으로 이미지가 나타나도록 설정.
• 해당 요소에 각 fade-in class 적용하고 css 에 opacity: 0 으로 화면에 안 보이게 설정.
• js 에서 해당 요소를 모두 가져와서 변수(fadeEls)로 묶어서 적용하고 forEach 문으로 각각 하나씩 애니메이션이 돌면서 적용되도록 설정. 함수의 매개변수로는 각 요소의 이름(fadeEl)과 index 를 설정하고 함수 안에는 라이브러리로 gsap.to( ) 를 이용하여 fadeEl 에 1초의 지속시간으로 opacity: 1 로 요소가 나타나게 하고 delay 라는 옵션으로 index 당 하나씩 차례대로 나타나게 0.7초를 곱하게 설정. 이때 index 는 0번부터 시작하므로 0 곱하기 0.7초를 하면 0 이 되어 index 에 더하기 1을 해줄 것

 

 

 

13. 요소 슬라이드: 공지사항

• html 구조로 좌우 배경과 inner 를 형제 요소로 둔 다음, css 로 각 배경을 height: 100% 로 하고 감싸는 부모 요소에는 height 를 적용하지 않으면 auto 로 설정이 되는데 inner 에 height 값을 지정해주면 부모 요소에 height 값이 없기 때문에 줄어들려고 하다가 값이 적용되어 있는 inner 에 맞춰 값이 부모 요소에도 동일하게 적용되고 absolute 로 설정되어 있는 각 배경에는 자연스럽게 부모 요소에 동일하게 적용된 inner 의 height 값이 적용.
• 질문) css 로 inner 안에 자식 요소에게 배경색을 주고 값을 늘려줬는데 애초에 inner 의 형제 요소인 배경에게 값을 늘려주면 되는 거 아닌지? inner 안에서 작동해야 하기 때문에 그런 것인지?
• display: flex 의 경우 별도의 높이 값을 주지 않아도 align-items: strectch, 즉 최대로 잡음. 단 정렬을 위해 다른 속성값을 적용하면 높이 값을 적용하지 않은 자식 요소가 잡아먹히기 때문에 해당 자식 요소에게 높이 값 부여해 줄 것

 

 

 

14. 요소 슬라이드: swiper.js, 수직 슬라이드

• 6버전, 7/8 버전 다름 - 6버전은 html 구조에서 class 이름을 swiper-container 로, 7/8 버전은 swiper 로 설정.
• swiper : get started → use swipter from cdn : min.css, min.js head 안에 복붙 → add swiper html layout : 복붙 (btn, pagination 은 선택)
• new Swiper ( ) 로 생성자(class) 함수를 이용해 첫번째 인수로 해당 swiper 요소의 선택자를 작성하고 두번째 인수로 옵션을 작성. 옵션으로는 수직 슬라이드를 쓸 것이니 direction: 'vertical' , 자동으로 넘어가게 할 것이니 autoplay: true, 멈추지 않고 반복할 것이니 loop: true 를 적용.

 

 

 

15. 요소 슬라이드: 요소 가운데 배치

• css 로 값 계산하기 : calc( ) 함수 - 예를 들어 자식 요소 세개가 각 819px 이고 그 사이 여백이 합쳐서 20px 일 때 계산해서 직접 값을 적용하는 것이 아니라 clac(819px * 3 + 20px) 로 작성해주면 css 에서 자동으로 계산이 가능
• 화면 비율이 커져도 요소 가운데 배치 : position : absolute 로 적용 후 상위 요소(view port) 영역의 left: 50% 적용하여 중앙을 기준으로 오른쪽에 위치시키고, margin-left: clac( (819px * 3 + 20px) / -2 ) 적용하여 해당 요소 전체 넒이 값의 반만큼 여백을 없애서 요소를 가운데로 배치

 

 

 

16. 요소 슬라이드: 프로모션 이미지 슬라이드

• new Swiper( ) 를 이용해 옵션으로 한번에 보여줄 슬라이드 개수가 3개이니 slidesPerView: 3, 슬라이드 사이 여백 10px 을 넣기 위해 spaceBetween: 10, 첫번째로 보일 슬라이드가 가운데에 보이기 위해 centeredSlides: ture, 이때 첫번째로 보일 슬라이드를 가운데로 설정했기 때문에 슬라이드 양 끝에 여백이 생기게 되는데 loop: true 로 적용
• 이때 개발자 검사를 해보면 가운데 보이는 슬라이드의 class 이름에 swiper-slide-active 라고 추가가 되어 있는데 centeredSlides: ture 옵션 때문에 추가가 된 것임. 가운데 슬라이드를 제외하고 나머지는 반투명하게 해줄 것이기 때문에 css 로 전체 슬라이드에 opacity: .5 를 적용한 후 swiper-slide-active 에만 opacity: 1 을 적용

 

• 페이지 매김과 다음, 이전 버튼을 적용하기 위해 html 구조에 swiper 안 slide 형제 요소로 pagination 과 next, prev 버튼 구조를 추가
• 페이지 매김을 위해 swiper 옵션으로 pagination 을 적어주고 해당 옵션의 중괄호 안에 해당 옵션에 대한 옵션을 적용할 수 있는데 페이지 번호 요소 선택자를 지정해주는 el 에 해당 요소의 class 이름을 적어주고, 사용자가 시각적으로 페이지를 볼 수만 있는 것이 아니라 클릭도 가능하도록 clickable: true 적용
• 다음, 이전 버튼을 위해 swiper 옵션으로 navigation 을 적어주고 해당 옵션의 옵션으로 페이지 번호 요소 선택자를 지정해주는 prevEl 과 nextEl 에 해당 요소의 class 이름을 적용
• pagination 버튼에는 swiper 기본 css 스타일이 있는데 그 중 position: absolute 가 있어 따로 적용하지 않아도 됨
• 다음, 이전 버튼 위치는 가운데 배치했을 때랑 비슷하게 right, margin-right 를 사용해서 적용

 

 

 

 

17. 요소 슬라이드: 슬라이드 영역 토글

• 슬라이드 영역 부분과 토글 버튼을 가져와 변수로 적용하고 let 으로 해당 영역이 보이고 있으니 기본값으로 isHidePromotion 을 flase 로 할당.
• 토글 버튼에 이벤트를 추가하여 클릭하면 isHidePromotion 을 true 로 변경한다는 뜻으로 ! 논리부정연산자를 사용하여 다시 할당해주고 if 문을 사용하여 isHidePromotion (true) 일 경우 슬라이드 영역에 hide class 를 추가, else 로 슬라이드 영역에 hide class 를 지우게 적용

 

 

18. 유튜브 영상 배경: Youtube iframe API

• 16:9 비율 계산 - 부모 요소에 width 값만 지정하고 자식 요소에 width: 100%, height: 0, padding-top: 56.25% 를 지정해주면 부모 요소에 height 를 지정해주지 않아도 padding-top 에 56.25% 를 지정해주면 부모 요소의 width 값에 따라 크기가 맞춰짐(영상 출력할 때 많이 사용)
• 유튜브 영상 배경 : html 구조를 youtube > youtube__area > id : player 로 할건데 youtube__area 밑에 16:9 비율을 위해 자식 요소가 필요한데 스타일을 위한 것이라면 ::before 로 조절. before 에 width: 100%, height: 0, padding-top: 56.25% 적용. 화면 좌우 가운데에, 부모 기준 상하 가운데에 위치해야 하기 때문에 요소 가운데 배치를 위해 left: 50%, top: 50% 적용 후 각각 margin-left: calc(1920px / -2), margin-top: calc(1920px * 9 / 16 / -2) 적용. 이때 margin-top 의 경우 before 의 padding-top 으로 16:9 비율로 조절되고 있기 때문에 1920px 의 16:9 비율로 맞춰진 높이값의 반을 끌어올리도록 적용한 것. 그리고 youtube 부분에서 적용한 높이에 넘쳐 위아래가 튀어나왔을텐데 overflow 로 숨김처리 적용.

 

• youtube iframe api : 시작하기 부분에서 코드 복붙
• 코드 설명 : document 에서 script 라는 요소를 만들어 가져와서 tag 라는 변수로 지정하고 tag 의 src 로 실제 유튜브의 영상을 재생할 수 있는 명령의 js 파일을 가져옴, 즉 script 태그 부분에 src 속성에 외부 js 라이브러리가 할당이 되는 것(라이브러리 사용할 때 script 코드 가져오는 것과 동일). 문서에서 script 라는 태그 이름을 가진 요소 중 0번째 를 firstScriptTag 로 할당. firstScriptTag 의 부모 요소의 이전 부분에 삽입할건데 해당 요소는 tag 이고 firstScriptTag 의 이전에 할 것. → 따라서 사용하는 script 중 첫번째 script 태그를 찾아서 그것보다 먼저 유튜브 api 를 사용할 수 있는 script 태그를 앞에다가 삽입해서 실행한다는 것.
• 여기서 함수이름은 유튜브에서 설정한 것이기 때문에 수정하면 안 되며 var player, player =, width, height, events 는 지워주고 new YT.Player 는 YT 라는 유튜브 객체의 Player 라는 메소드가 실행되고 있는데 그 안의 'player' 는 html 구조에서 미리 만들어뒀던 player 라는 id 를 가진 요소를 선택한 것.
• 이제 원하는 동영상을 가져와야 하는데 해당 유튜브 영상의 주소를 보면 watch?v= 다음으로 나오는 것이 최초 재생할 유튜브 영상 id 인 videoId 에 들어가는 부분임 복사해서 붙여넣고, 영상을 재생하기 위한 여러가지 변수들을 뜻하는 playersVars 에 옵션으로 자동 재생을 위한 autoplay: true, 반복 재생을 위한 loop: true, 반복 재생할 유튜브 영상 id 목록을 지정하기 위해 playlist: '영상 주소에서 복사한 것' 을 적용. events 라는 옵션을 적용할 것인데 그의 데이터로 onReady 라는 익명의 함수를 할당할 것, 여기서 객체 데이터 내부에 함수 데이터가 할당되면 메소드라고 부름, 익명 함수의 매개변수로 event 라는 사용하는데 이 동영상 플레이어가 준비되면 이때 익명 함수를 실행해주는데 실행할 때 그 인수로 이 동영상이 플레이되는 상황 자체를 데이터로 넘겨주게 됨. event 라는 매개변수에 재생되고 있는 영상 자체를 뜻하는 target 에 mute 라는 메소드를 실행하면 음소거가 적용. playersVars 에서는 지원이 되지 않아 events 로 따로 적용해줘야 함.
• playersVars 에서 지원하는 여러가지 매개변수가 있으니 iframe player api 에서 확인.

 

 

 

19. 유튜브 영상 배경: 반복 애니메이션

• floatingObject 라는 함수를 만들고 호출될 때 선택자를 받아서 실행되는 selector 를 매개변수로 지정, gsap.to ( ) 를 이용해서 css 선택자만 집어넣으면 실행될 수 있도록 selector 를 요소로 하고 시간은 1, 옵션으로는 세로를 기준으로 움직일 것이기 때문에 y: 20, 무한 반복되도록 repeat: -1, 20만큼 내려가는 것 뿐만 아니라 올라오는 것도 처리할 수 있도록 yoyo: true 를 적용. 여기까지 하면 부자연스럽기 때문에 easing 함수를 이용하여 처리할 것, gsap easing 에서 type: easeInOut 으로 설정하고 run 누른 뒤 power1 클릭하면 하단에 나오는 ease: Power1.easeInOut 을 복사하여 gsap.to 안에 붙여넣기, 다음 옵션으로 새로고침하고 지연 시간을 둔 뒤 재생하는 delay: 3 을 추가.
• 랜덤한 숫자를 생성하는 함수 : random 이라는 이름의 함수를 설정하여 min 과 max 라는 매개변수로 받아서 Math.random( ) 을 이용해 랜덤 메소드에다가 (max-min)+min 에 소수의 자리수의 길이를 제한하며 문자를 반환하는 toFixed( ) 메소드를 곱한 것을 소수점을 가지는 숫자 데이터로 변환하는 parseFloat( ) 이라는 메서드를 반환.
• random 함수를 이용해 floatingObject 함수 수정 : floatingObject 함수에 selector, delay, size 를 매개변수로 설정하고 floatingObject 함수를 호출할 때 인자로 각 반복 애니메이션을 적용할 각 요소의 선택자, 지연 시간, y축으로 움직일 크기를 지정. gsap.to 메소드 안의 옵션 부분에 y: size 로 수정, 1초로 되어있던 애니메이션 동작 시간 부분을 랜덤하게 적용하기 위해 random( ) 함수로 수정하고 인자로 1.5와 2.5 를 지정, 옵션의 delay 부분에 random( ) 함수를 적용하여 인자로 0, delay 를 지정.
• gsap.to 메소드에 대한 여러가지 옵션이 있으니 라이브러리 사용법 확인해볼 것.