8. 스타벅스 고정 이미지 변경

• 총 3단으로 구성
• 1단씩 코드 분석을 할 예정
• 아이스 커피 블렌드 위에 저번 개발 일지에 썼던 이미지 애니메이션 효과가 짤리는 것을 수정

---

스타벅스 1단 HTML

  <!-- SEASON PRODUCT -->
<section class="season-product">
  <div class="inner">
    <img src="/./images/floating3.png" alt="Icon" class="floating floating3" />
    <img src="./images/season_product_image.png" alt="" class="product" />

    <div class="text-group">
        <img src="./images/season_product_text1.png" alt="" class="title" />
        <img src="./images/season_product_text2.png" alt="" class="description" />
      <div class="more">
        <a href="javascripte:void(0)" class="btn">자세히 보기</a>
      </div>
    </div>

  </div>
</section>

• 저번 개발일지에 썼던 floating3을 season-product에 옮겨 overflow:hidden 효과를 무시하게 됨.
• text와 관련된 이미지는 text-group class로 묶고 상품은 따로 지정, 버튼도 more class로 따로 지정.

---

스타벅스 1단 CSS

/* SEASON PRODUCT */
.season-product {
  background-image: url("../images/season_product_bg.jpg");
}
.season-product .inner {
  height: 400px;
}
.season-product .floating3 {
  position: absolute;
  top: -200px;
  right: 0;  
}
.season-product .text-group {
  position: absolute;
  top: 110px;
  right: 100px;
}
.season-product .text-group .title {
  margin-bottom: 10px;
}
.season-product .text-group .description {
  margin-bottom: 15px;
}

seoson-product class

• 배경 이미지를 season_product_bg.jpg로 지정

inner class

• 세로 400px

floating3 class

• season-product class를 기준으로 위치 지정
• 위로부터 -200px 오른쪽으로 0 위치에 지정

text-group class

• season-product class를 기준으로 위치 지정
• 위로부터 110px, 오른쪽으로 100px 위치에 지정

title class

• 아래 외부여백 10px 지정

description class

• 아래 외부여백 15px 지정

---

스타벅스 1단 최종 완성

---

스타벅스 2단 HTML

<!-- RESERVE COFFEE -->

  <section class="reserve-coffee">
    <div class="inner">

      <img src="./images/reserve_logo.png" alt="" class="reserve-logo" />

      <div class="text-group">
        <img src="./images/reserve_text.png" alt="" class="description" />
        <div class="text-group">
          <a href="javascript:void(0)" class="btn btn--gold">자세히 보기</a>
        </div>
      </div>

      <img src="./images/reserve_image.png" alt="" class="product" />

    </div>
  </section>

• 1단과 유사성이 크다.
• 로고는 따로 클래스 지정
• text 이미지와 자세히 보기 버튼을 text-group class로 지정
• 상품 클래스를 따로 지정

---

스타벅스 2단 CSS

/* RESERVE COFFEE */
.reserve-coffee {
  background-image: url("../images/reserve_bg.jpg");
}
.reserve-coffee .inner {
  height: 400px;
}
.reserve-coffee .reserve-logo {
  position: absolute;
  top: 110px;
  left: 0;
}
.reserve-coffee .text-group {
  position: absolute;
  top: 124px;
  left: 208px;
}
.reserve-coffee .product {
  position: absolute;
  top: 0;
  right: 0;
}

reserve-coffee class

• 배경 이미지를 reserve_bg.jpg로 지정

inner class

• 세로 400px

reserve-logo class

• reserve-coffee class를 기준으로 위치 지정
• 위로부터 110px, 왼쪽으로부터 0 위치에 지정

text-group class

• reserve-coffee class를 기준으로 위치 지정
• 위로부터 124px, 왼쪽으로부터 208px 위치에 지정

product class

• reserve-coffee class를 기준으로 위치 지정
• 위로부터 0, 오른쪽으로부터 0 위치에 지정

---

스타벅스 2단 최종 완성

---

스타벅스 3단 HTML

<!-- PICK YOUR FAVORITE -->
<section class="pick-your-favorite">
  <div class="inner">

    <div class="text-group">
      <img src="./images/favorite_text1.png" alt="" class="title" />
      <img src="./images/favorite_text2.png" alt="" class="description" />
      <div class="more">
        <a href="javascript:void(0)" class="btn btn--white">자세히 보기</a>
      </div>
    </div>
  </div>
</section>

• text 이미지는 text-group class로 묶는다.
• 자세히 보기 버튼은 more class로 묶는다.

---

스타벅스 3단 CSS

/* PICK YOUR FAVORITE */
.pick-your-favorite {
  background-image: url("../images/favorite_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
.pick-your-favorite .inner {
  padding: 110px 0;
}
.pick-your-favorite .text-group {
  margin-left: 100px;
  display: flex;
  width: 362px;
  flex-wrap: wrap;  
  /* 줄바꿈 가능 */
  justify-content: flex-end;
}
.pick-your-favorite .text-group .title {
  margin-bottom: 40px;
}
.pick-your-favorite .text-group .description {
  margin-bottom: 40px;
}

pick-your-favorite class

• 배경 이미지는 favorite_bg.jpg로 지정
• 배경 이미지 반복되는 속성을 없애줌.
• 배경 이미지의 위치를 가운데로 지정
• 배경 이미지는 움직이지 않도록 함.
• 배경 이미지는 사용하는 요소에 맞게끔 확대 또는 축소하도록 한다.

inner class

• 내부여백은 위아래 110px

text-group class

• 왼쪽 외부여백 100px
• 수평정렬
• 가로 362px
• 요소가 수평 정렬할 때 꽉 차면 줄바꿈이 가능하도록 설정
• 오른쪽에서 요소들이 시작할 수 있도록 지정

title class

• 아래 외부여백 40px

description class

• 아래 외부여백 40px

---

스타벅스 3단 최종 완성

---

스타벅스 고정 이미지 최종 완성