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

TonyHan·2021년 7월 24일

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

목록 보기

7/20

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

8.

이번에는 특정 메뉴의 하위 메뉴를 만들어주어야 한다.

sub menu 아래쪽에 위와 같이 만들어주자. 이때 item__name으로 언더바 두개이다.

해서 총 6개의 메뉴를 만들어주자

위의 이미지에서 잘못 입력했는데 padding 10px 20px 34px 20px로 해주어야 이쁘게 나온다.

이제 컨텐츠가 드롭다운 될 수 있도록 제작해야 하는데 이것을 위해 name에 hover을 붙여주면 안된다. 이는 결국에는 item__contents에 영향을 주어야 하기 때문에 iter__name이 아닌 item에 hover을 주어야만 한다.

또 모양을 잘보면 border-radius가 왼위 오위에만 들어가 있는 것을 확인할 수 있다.

이제 menu의 드롭다운이 잘 덮일 수 있도록 위치와 index를 설정해주자

이번에는 menu의 컨텐츠를 정의해주자

item_contents 자체에는 top이나 bottom 속성을 사용하지 않고 수직 위치 값이 없다면, 요소의 원래 위치를 그대로 사용한다. 그래서 만약 position:absolute 를 사용했다면, 부모 요소를 기준으로 하므로 화면의 뷰포트 좌우 끝까지 늘어날 수 없다.

여기에 none을 넣어서 일단 안보이게 만들자.

그래서 새로운 item__contents에 hover를 넣어주어서 display:block을 넣어주자.

가운데 정렬이 필요하다. 그래서 inner이라는 클래스를 만들어주자.

가운데로 정렬되어 있는 것을 확인할 수 있다.

그런데 이런 inner을 계속 사용할 것이기 때문에 이거을 공통 클래스로 올리어주자.

header > .inner을 사용한 이유는 header의 바로 자식 요소만에 적용해주기 위함이다.

9.

이번에는 contents__menu의 바로 자식에만 영향을 주기 위해 자식 선택자를 사용하자

다시금 모든 것들의 선택자들을 만들어주자.

수평정렬된것을 확인할 수 있다.

특이한 점은 가장 깊은 부분에 cursor을 사용해서 손가락 모양으로 바뀔 수 있도록해준다.

그리고 .content__menu > ul > li ul은 복잡해서 그냥 없앴다.

또한 content__menu를 고른부분에 height를 없애서 텍스트에 따라 자동으로 크기가 조절될 수 있도록했다. 그리고 배경색상도 변경했다.

이러한 드룹다운 아래에 패턴이 있는 부분을 만들어주자. 아까전에 만들어 주었던 contents__texture 부분으로 가자

그리고 위와 같이 h4, p 태그를 넣어주자.

해서 위와 같이 contents_texture과 관련된 부분들을 수정해주자.

그리고 패턴을 설정해주기 위해 background-image태그를 사용해서 패턴을 넣어주자. 그런데 어떻게 패턴이 반복되어서 나올 수 있었을까? background-repeat이라는 속성이 존재하는데 이것의 기본값은 repeat이기 때문에 이와 같은 결과가 나올 수 있었던 것이다.

이제 나머지 부분을 채우면 되는데 솔까 너무 귀찮다.

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

위의 링크의 README.md 파일에 보면 Main menu in Header이라는 부분이 존재한다 이걸 그냥 복붙해주자.

복붙해놓으니 모두 나온것을 확인할 수 있다.

추가적으로 li ul li 가 모두 선택된것에 hover 가상 클래스 선택자를 넣어주자.

그럼 위와 같이 글자에 마우스를 올리면 녹색으로 변하게된다.

10.

그런데 우리는 왜 item 클래스의 자식 클래스에 __ 언더바 두개를 넣었을까?

HTML 클래스 속성의 작명법

BEM (Block Element Modifier)

요소__일부분 Underscore(Lodash) 기호로 요소의 일부분을 표시
요소--상태 Hyphen(Dash) 기호로 요소의 상태를 표시

위와 같이 작성하니 같은 클래스를 작성하지 않고도 구분이 잘가게된다. 이게 필수는 아닌데 가급적 이렇게 하는게 좋다.

11. 뱃지

이번에는 header 바로 아래 웹페이지 오른쪽에 나오는 뱃지들을 만들어보자

먼저 위와 같이 뱃지를 최하단에 만들어놓자

header에는 position값을 넣어주자

이제 뱃지의 위치를 맞추어 주고 둥근 모서리를 만들기 위해 border-radius를 설정해주었다. 하지만 이미지가 바뀌지 않는다.

이건 바로 badge에 사용되는 이미지가 직사각형이기 때문에 발생하는 문제이다. 이를 해결하기 위해서 badge의 overflow:hidden인 상태로 바꾸어주어야 한다.

하면 둥글게 바뀐것을 확인할 수 있다.

나머지 부분은 위와 같이 바꾸어주면 그림자가 얕게 생기면서 마우스를 갖다 대었을때 포인터형태로 바뀌는 것을 확인할 수 있다.

body에 height를 주었다.

이제 헤더가 화면의 상단에 항상 붙어 있을 수 있도록 바꾸어주자.

그래서 상단을 붙여주겠다고 fixed로 바꾸었으나 position fixed와 absolute는 너비가 최소한으로 바뀌게 된다.

그래서 width를 100%로하면 헤더가 고정된다.

이제 뱃지가 일정 페이지 이하로 내려가면 사라지도록 js파일을 수정해주자.

window객체는 하나의 창이다. 그래서 브라우저가 가지고 있는 여러가지 명령등을 이 객체가 가지고 있다.

그래서 이렇게 작성했는데 scroll할때마다 바뀌는 것을 확인할 수 있다.

그런데 너무 많이 실행된다. 이를 제어해줄 수 있는 라이브러리를 가지고 오자

lodash cdn을 검색해서 cdnjs.com으로 가자

외부라이브러리를 이쪽에 넣어주었다.

12. 뱃지 없애기

그래서 위와 같이 만들어주면된다. throttle 함수를 사용하면 시간단위로 부하를 주어서 함수가 나올 수 있는데 걸리는 시간을 제한을 줄 수 있다.

300은 정확하게 0.3초를 의미한다.

그래서 한번에 그렇게 많이 나오지 않는것을 확인할 수 있다.

_.throttle(함수, 시간)형태의 함수를 사용한다고 보면 된다.

이제 내 위치를 파악해보자

이렇게 작성하면 내 위치에 따라서 이미지를 보여주고 없앨수도 있다. 하지만 애니메이션이 없어서 부자연스럽다.

gsap cdn을 검색해보자

이렇게 붙여주자.

gsap.to(요소, 지속시간, 옵션); 으로 성분을 삽입할 수 있다.

위와 같이 사라지는 것을 확인할 수 있다. 하지만 주의해야 하는점은 이렇게 할 경우 뱃지가 사라진것이 아닌 시각적으로 없어지기만 한 것이라는 점이다.

그래서 display 속성을 넣어주었는데 알려주지만 숫자가 아니면 옴표로 가려주어야 한다.

gsap 라이브러리는 많이 사용하기 때문에 꼭 알아두자.

13.

header 바로 아래의 section이라는 태그들로 묶어주어 표시한다. 그리고 가장 아래쪽은 footer이라는 태그가 존재한다.

해서 위와 같이 작성해주면 이미지가 header에 가려있는 것을 확인할 수 있다.

이미지들을 모두 넣어주자.

이제 다시 클래스들을 정의할 것데 그 기능이 전체를 모아주는 inner과 같은 클래스는 그냥 적어만 놓고 그 아래에서는 적지않아도 된다.

inner 클래스는 따로 지정할거 없이 필요한것만 해주면 된다. 왜냐하면 이미 위쪽에서 전역속성을 정의를 해주었기 떄문이다.

14.

이제 이미지들을 적절한 위치에 배치시키어주자

.visual .inner {
  height: 646px;
  background-color: orange;
}

.visual .title {
  position: absolute;
  top: 88px;
  left: -10px;
}

.visual .title .btn {
}

.visual .cup1.image {
  position: absolute;
  bottom: 0;
  right: -47px;
}

.visual .cup1.text {
  position: absolute;
  top: 38px;
  right: 171px;
}

.visual .cup2.image {
  position: absolute;
  bottom: 0;
  right: 162px;
}

.visual .cup2.text {
  position: absolute;
  top: 321px;
  right: 416px
}

.visual .spoon {
  position: absolute;
  bottom: 0;
  left: 275px;
}

칸이 작아지면 뱃지가 안보인다.

header에 z-index를 넣어주어서 header가 잘 보이도록 만들어주자.

다 고치었으니 .visual .inner의 background-color도 없애주자.

그 외의 자세한 버튼 색깔들은 여기에 올려놓는다.

.btn {
  width: 130px;
  padding: 10px;
  border: 2px solid #333;
  border-radius: 4px;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box; /*padding과 block에 영향을 받지 않도록 설정 */
  display: block;
  transition: .4s;
}

.btn:hover {
  background-color: #333;
  color: #fff;
}

.btn.btn--reverse {
  background-color: #333;
  color: #FFF;
}
.btn.btn--reverse:hover {
  background-color: transparent;
  color: #333;
}
.btn.btn--brown {
  color: #592B18;
  border-color: #592B18;
}
.btn.btn--brown:hover {
  color: #FFF;
  background-color: #592B18;
}
.btn.btn--gold {
  color: #D9AA8A;
  border-color: #D9AA8A;
}
.btn.btn--gold:hover {
  color: #FFF;
  background-color: #D9AA8A;
}
.btn.btn--white {
  color: #FFF;
  border-color: #FFF;
}
.btn.btn--white:hover {
  color: #333;
  background-color: #FFF;
}

이제 만들어진 버튼을 가지고 자세히 보기를 수정해주자.

버튼이 잘 수정된 것을 확인할 수 있다.

마지막으로 위치를 잘 수정해주자.

그런데 왜 btn을 absolute로 설정했을까? 이건 title이 부모요소이기 때문에 버튼도 이 title을 따라가도록 만들기 위함이다.

15.

이번에는 이미지가 점진적으로 사라지는 것을 구현해보자. 이르 위해 이미지를 감사고 있는 클래스들에 fade-in 클래스를 입력해주자.

그리고 처음 나왔을때는 opacity를 0으로 만들어놓자.

이제 fade-in이라는 성분들을 모두 가지고와서 forEach로 돌아가면서 처리해주자.

다시금 gsap을 사용하는데 애니메이션이 순차적으로 실행될 수 있도록 delay값도 인덱스에 함께 넣어주자.

애니메이션이 순차적으로 나오는 것을 확인할 수 있다.

16.

공지사항 라인을 만들어보자.

inner에 따라 크기가 바뀐다. 도대체 왜? 부모요소인 notice-line의 height 기본속성 값이 auto이기 때문에 최대한 줄어들려고 하다가 자식 성분의 inner에 걸리어서 200px이 된 것이다. 어찌보면 inner값만 바꾸는 것으로 이 크기를 조절할 수 있게 되었다.