KDT 5th 웹개발자 입문 수업 10일차

어제 복습하겠다고 혼자 뚱땅거리며 만들던 스타벅스 모작이 잘 안풀려서 거진 한가지 이유로 1시간 넘게 헤맸다.

알고보니 선택자 지정상 inner 클래스에 height 잡아 둔 것이 화근이었고

(BEM의) Block 요소에는 가급적 저런 요소를 두지 않도록 다시 신경써야겠다고 생각했다. ㅜㅜ

별 것도 아닌데 이유를 찾느라 하나하나 고쳐보았고 다신 이런 실수를 하지 않아야겠다고 다짐하게 되었다.

 

스타벅스 클론 코딩 마지막날!

어제는 메인 메뉴 컨텐츠와 뱃지, 컨텐츠, 공지와 리워드까지 진행했으며 나머지 상품 컨텐츠와 푸터를 마무리로 끝낸다고 한다.

 

 

1. 상품 컨텐츠 (1)

이 부분을 만들었고,

일단 html 구조상 section으로 크게 나눠주고 img item과 img text, btn을 두되, position을 사용하기 위해

이렇게 나눠서 html 구조를 만들어준다

당연하게도 모든 컨텐츠는 .inner를 사용해줘야 그 안에 담길 수 있다.

<section class="elsavador">
    <div class="inner">
      <img src="./images/elsalvador_item.png" alt="엘살바도르 이미지" class="elsalvador__item"/>
      <div class="elsalvador__contents">
        <img src="./images/elsalvador_text.png" alt="엘살바도르 설명" class="item-text"/>
        <a href="#" class="btn btn--brown">자세히 보기</a>
      </div>
    </div>
  </section>

나머지는 position absolute를 주어 .inner를 기준으로 컨텐츠의 위치를 지정해주면 된다.

여기서 inner의 height는 부모 요소에 지정해준 px를 100% 받아와서 작업하면 수월하다. 필수는 아님

 

모작의 경우 이미지는 먼저 크기값을 width를 지정해주고 position을 주고 위치를 잡아주는 순서로 진행해준다.

 

 

상품 컨텐츠 (1)의 애니메이션 추가

display flex의 경우 애니메이션이 번거로워질 수 있다.

 

브라우저 밖에 있다가 원하는 위치에 두는 애니메이션을 css로 구현할 경우,

1. 이미지를 밖에 두고 translate()로 이동시키는 방법은 픽셀 계산 등 귀찮아질 가능성이 크다 (지양)

 

2. 이미지를 원래 위치에 두고 translate()로 보이기만 밖으로 이동시킨 다음 translate(0)을 주는 방식이 더욱 간편하다 (권장)

 

js로 구현 하는 게 맞지만 css로 구현하려면 해당 방식을 사용, css에선 스크롤 감지가 불가능하므로 가상 클래스 태그를 사용하여 표현함

section.elsavador .inner .elsalvador__item {
  position: absolute;
  top: 54px;
  left: 160px;
  width: 310px;

  transform: translateX(-700px);
  opacity: 0;
  transition: 2.5s;
}

section.elsavador:active .inner .elsalvador__item,
section.elsavador:active .inner .elsalvador__contents {
  transform: translateX(0);
  opacity: 1;
}

section.elsavador .inner .elsalvador__contents {
  position: absolute;
  top: 168px;
  right: 166px;

  transform: translateX(900px);
  opacity: 0;
  transition: 2.5s;
}

 

 

2. 상품 컨텐츠 (2)

 

section.ethiopia::before {
  content: "";
  width: 425px;
  height: 400px;
  position: absolute;
  left: -50px;
  top: 0;
  background-image: url('../images/ethiopia_before.png');
}

section.ethiopia::after {
  content: "";
  width: 361px;
  height: 400px;
  position: absolute;
  right: 0px;
  top: 0;
  background-image: url('../images/ethiopia_after.png');
}

영상처럼 홈페이지의 left, right 끝에 이미지가 붙어서 움직인다.

가상 요소 선택자를 사용하여(::before, ::after) content로 구현해주면 된다.

 

나머지 이미지들은 position absolute로 자리를 선정해주면 되는데, css는 absolute에서 시작해서 끝나는거 아닌가 생각될 지경으로 반복해서 작업하고 있다보니 조~~금 이해가 가는 듯도 하다.

 

 

상품 컨텐츠 (2) 애니메이션

:active 가상 클래스로 opacity와 transform translate를 사용하여 애니메이션을 넣어줬다.

 

 

3. 상품 컨텐츠 (3)와 애니메이션

헤더 부분에 비하면 컨텐츠 부분은 css로 할 수 있는 것이 많이 제한되었다. 얼른 js를 배워서 다양한 애니메이션을 적용시켜보고 싶다.

<section class="favorite">
    <div class="inner">
      <img src="./images/fav_text1.png" alt="Pick your favorite" class="contents__title"/>
      <img src="./images/fav_text2.png" alt="설명" class="contents__text"/>
      <a href="#" class="btn btn--white">자세히 보기</a>
      <img src="./images/fav_img.png" alt="상품 사진들" class="contents__image"/>
    </div>
  </section>

 

 

4. 나머지 컨텐츠들까지 완료했다.

하는 방법은 나머지와 비슷했어서 생략한다. 푸터는 시간이 없어서 내일 마저하기로 하였다.

 

https://jocular-cuchufli-21c4f9.netlify.app/

Starbucks Coffe Korea