21/09/14 - 패스트캠퍼스 챌린지 09일차[Part 1 - ch 10. 스타벅스 예제...

21/09/14 - 패스트캠퍼스 챌린지 09일차[Part 1 - ch 10. 스타벅스 예제...

헤더와 드롭다운 메뉴 - 메인 메뉴

첫 번째 층 contents__menu 부분에는 화면을 중앙으로 몰아주는 inner가 있고,

그 inner을 ul 태그로 만들었다.

또 그 안에 li 태그를 만들었다. 그 li 부분에는 로 감싼 제목 부분과 ul태그에서 li로 정렬한 하위 내용을 나타낸다.

css로 가보자

자식선택자를 사용하여 ul를 나타냄

그 이유는 .contents__menu 내부 안에는 ul 태그가 총 2개가 들어있다.

자식 선택자를 선택하지 않으면 하위 선택자가 되기 때문에 스타일이 다 지정될 수도 있기 때문이다.

하단 부분의 내용 나타내기

오늘의 공부화면

헤더와 드롭다운 메뉴 - BEM

BEM (Block Element Modifier)

요소__일부분 Underscore(Lodash) 기호로 요소의 일부분을 표시

요소--상태 Hyphen(Dash) 기호로 요소의 상태를 표시

헤더와 드롭다운 메뉴 - 전역 배지(GSAP)

헤더의 우측 하단에 보면 위와 같은 배지를 작업해보자 .

두 개의 이미지가 사용되고 있다. 스크롤하면 배지가 사라지는 것을 나타내야 함

헤더 부분에 inner 클래스가 끝나는 부분 밑에. badges라는 div 클래스를 만들어 준다.

위와 같이 배지 이미지를 입력한다.

position 값을 fixed로 뷰포트 기준으로 고정해줘야 스크롤 내려도 배지가 고정이 된다.

스크롤을 내릴 때마다 배지가 사라지게 만드는 것은

자바스크립트로 표현한다.

window 객체는 화면이 출력되는 화면 자체를 뜻한다.

그런데 이렇게 사용하면 화면 자체가 무거워지기 때문에 다음과 같은 방법을 사용한다.

스크롤할 때마다 수십 개의 함수가 실행이 되므로

그 함수의 수를 외부에서 가져올 수 있는 자바스크립트 라이브러리에서 제어를 해주도록 해야 한다.

태그 가져와서 붙여 넣는다.

scrollY이라는 값이 갱신이 되는 것이다.

숫자로 표시가 되는 것

gsap 라이브러리를 이용해서 자바스크립트에 애니메이션을 붙여 넣는 기능을 한다.

복사해서 index에 붙여 넣는다.

gsap의 애니메이션 기능을 통해 스크롤을 제어하는 방법을 배웠다.

일단 신기했고 간단한 스크립트 라이브러리를 통해 구현할 수 있는 방법들이 다양해서 놀랐다

일단 한 번에 이해하기는 어렵다고 느껴져서 인강을 다시 들으면서 실습을 이어가야겠다.

https://bit.ly/37BpXiC

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

from http://dhstory311.tistory.com/99 by ccl(A) rewrite - 2021-09-14 02:27:23