[TIL #5] 클론코딩 - 비주얼 섹션

Yejin Yang·2022년 4월 13일

TIL

[TIL]

목록 보기

5/67

스타벅스 랜딩 페이지 예제

목표

버튼: 공통의 스타일로 정의해서 홈페이지 내에서 반복적으로 사용
이미지들을 JS를 이용해서 순차적으로 요소 보이게 하기

HTML

<!-- VISUAL -->
  <section class="visual">
	  <div class="inner">

      <div class="title">
        <img src="./images/visual_title.png" alt="STARBUCKS DELIGHTFUL START TO THE YEARS" />
        <a href="javascript:void(0)" class="btn">자세히 보기</a>
      </div>
      <img src="./images/visual_cup1.png" alt="new OATMEAL LATTE" class="cup1 image" />
      <img src="./images/visual_cup1_text.png" alt="오트밀 라떼" class="cup1 text" />
      <img src="./images/visual_cup2.png" alt="new STARBUCKS CARAMEL CRUMBLE MOCHA" class="cup2 image" />
      <img src="./images/visual_cup2_text.png" alt="스타벅스 카라멜 크럼블 모카" class="cup2 text" />
      <img src="./images/visual_spoon.png" alt="Spoon" class="spoon" />

    </div>
  </section>

CSS

/* VISUAL */
.visual {
  margin-top: 120px;
  background-image: url("../images/visual_bg.jpg");
  background-position: center;

}
.visual .inner {
  height: 646px;
  background-color: #669900;
}
.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;
}

.cup1.image 처럼 클래스가 붙어있는 것은 일치선택자라고 한다.
비주얼의 inner부분이 전역 배지를 가리는 것은 header 에서 쌓임 순서 수정하면 된다(z-inex 값을 높게주어 다른 요소보다 위에있도록 함)

버튼 구현

// COMMON
.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;
  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 은 클래스 선택자가 1개라 10점, .btn.btn--reverse 는 클래스 선택자가 총 2개여서 우선순위 20점 따라서 기존 버튼의 스타일을 reverse 스타일로 덮어쓸 수 있다.

버튼 위치

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

title안에 버튼을 묶어놨기 때문에 이미지의 위치를 옮기면 버튼도 옮겨지는 것처럼, 요소를 배치할 때 배치하는 요소들이 묶음으로 판단 되면 묶음 자체를 기준으로해서 안에서만 배치할수있는 구조를 만드는 것이 좋다.

JS를 이용해서 순차적으로 요소 보이기

이미지와, 텍스트는 같이 나타나야하기때문에 그룹으로 묶어주고자 html 코드 수정

<!-- VISUAL -->
  <section class="visual">
  <div class="inner">

      <div class="title fade-in">
        <img src="./images/visual_title.png" alt="STARBUCKS DELIGHTFUL START TO THE YEARS" />
        <a href="javascript:void(0)" class="btn btn--brown">자세히 보기</a>
      </div>
      <div class="fade-in">
        <img src="./images/visual_cup1.png" alt="new OATMEAL LATTE" class="cup1 image" />
      <img src="./images/visual_cup1_text.png" alt="오트밀 라떼" class="cup1 text" />
      </div>
      <div class="fade-in"> 
        <img src="./images/visual_cup2.png" alt="new STARBUCKS CARAMEL CRUMBLE MOCHA" class="cup2 image" />
      <img src="./images/visual_cup2_text.png" alt="스타벅스 카라멜 크럼블 모카" class="cup2 text" />
      </div>
      <div class="fade-in">
        <img src="./images/visual_spoon.png" alt="Spoon" class="spoon" />
      </div>

    </div>
  </section>

css

.visual .fade-in {
  opacity: 0;
}

1. `.fade-in` 라는 클래스를 가진요소는 투명도 0을 주어 안보이게 미리 만들어 놓음 
1. 그 다음 자바스크립트로 순차적으로 보여지게끔 한다

JavaScript
gsap 라이브러리 이용

const fadeEls = document.querySelectorAll('.visual .fade-in');
fadeEls.forEach(function (fadeEl, index) {
  // gsap.to(요소, 지속시간, 옵션);
  gsap.to(fadeEl, 1, {
    delay: (index + 1) * .7, // 0.7, 1.4, 2.1, 2.7
    opacity: 1
  });
});