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

어제 남은 헤더의 메인 컨텐츠 부분을 만들었다.

도중에 li를 l1으로 써서 당황했는데, cmd+d를 눌러서 이름이 같은 여러 요소를 한번에 지정이 가능하다는 점을 알게되었다.

 

스타벅스 홈페이지 클론 코딩 - 2

1. 메인 메뉴 컨텐츠 배치

position fixed를 사용하여 뷰포트 기준으로 width를 가져올 필요가 있음.

부모 요소에서부터 위치를 가져오므로 left값을 0으로 줘야 한다.

일단 컨텐츠는 hover가 되었을 때 보여야 하므로 display none으로 해주고 메인 메뉴가 hover 됐을 때 display block 으로 해주면 보이게 된다.

 

메인 메뉴 컨텐츠 또한 inner 안에 있어야 하는데 width를 제외한 다른 속성은 필요 없으므로 header > .inner 같이 특정 지어준다.

 

<li class="item">
  <div class="item__name">MENU</div>
  <div class="item__contents">
    <div class="item__contents__menu">
      <ul class="inner">
        <li>
          <a href="#">음료</a>
          <ul>
            <li>콜드 브루</li>
            <li>부르드 커피</li>
            <li>에스프레소</li>
            <li>프라프치노</li>
            <li>블렌디드</li>
            <li>스타벅스 리프레셔</li>
            <li>스타벅스 피지오</li>
            <li>티(티바나)</li>
            <li>기타 제조 음료</li>
            <li>스타벅스 주스(병음료)</li>
          </ul>
        </li>
        <li>
          <a href="#">푸드</a>
          <ul>
            <li>브레드</li>
            <li>케이크</li>
            <li>샌드위치 & 샐러드</li>
            <li>따뜻한 푸드</li>
            <li>과일 & 요거트</li>
            <li>스낵 & 미니 디저트</li>
            <li>아이스크림</li>
          </ul>
        </li>
        <li>
          <a href="#">상품</a>
          <ul>
            <li>머그</li>
            <li>글라스</li>
            <li>플라스틱 텀블러</li>
            <li>스테인리스 텀블러</li>
            <li>보온병</li>
            <li>액세서리</li>
            <li>선물세트</li>
            <li>커피 용품</li>
            <li>패키지 티(티바나)</li>
            <li>시럽</li>
          </ul>
        </li>
        <li>
          <a href="#">카드</a>
          <ul>
            <li>실물카드</li>
            <li>e-Gift 카드</li>
          </ul>
        </li>
        <li>
          <a href="#">메뉴 이야기</a>
          <ul>
            <li>나이트로 콜드브루</li>
            <li>콜드 브루</li>
            <li>스타벅스 티바나</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</li>

 

 

메뉴가 나오는 효과는 자바스크립트로 구현하는 것이 맞지만, css를 배우고자

메뉴가 내려오는 효과를 유사하게 비슷해준다.

header .main-menu li.item .item__contents {
	transform: scaleY(0);	
  	transform-origin: center top;
  	transition: transform 0.4s;
}

header .main-menu li.item:hover .item__contents {
  	transform: scale(1);
}

Y scale을 다뤄줘서 늘려주면서 애니메이션 효과를 준다.

 

 

2. Badge

화면 넓이+스크롤을 따라오므로 header 안에 position absolute를 주는 것이 가능하다.

간단한 방법으론 뱃지부분에 그냥 position fixed를 줘도 되긴하지만 이미 header에 fixed가 되어 있으니 그걸 이용한 것

 

크기 또한 화면 상태에 따라 변경되는 반응형이지만 js를 아직 안배워서 컴퓨터 화면 기준으로 해준다.

컴퓨터 화면 기준으로 크기 변화를 주려면 img 크기를 vw, %비율로 주면 된다.

 

 

구조는 div.badges>div.badge>img 형식으로 구성 뱃지가 늘어날수록 .badge를 늘려주면 된다.

 

뱃지의 반응형을 위해 1100px 를 기준으로 left 를 calc(1100px + (100vw - 1100px) / 2) 로 해주면 1100px 보다 클 때는 .inner의 바깥에 고정된 자리에 위치하게 해준다.

추가로 미디어 쿼리를 주기 위해 @media screen and (max-width : 1400px) 로 1400 보다 작아지면 뱃지가 .inner 안으로 점차 들어가는 효과를 줄 수 있다.

 

 

3. Visual 작업

중요한 아이템을 처리하는 <section>을 사용하여 컨텐츠들을 나타내준다.

당연하게도 inner 클래스로 랩 해줌

 

3-1. 첫번째 컨텐츠 (이미지와 버튼)

 

버튼의 경우, BEM에서 modifier로 제작이 가능하므로

.btn에는 모든 버튼의 기본 공통 속성들을 지정 (모양이나 스타일같은)

특히나 색상 표현 중에는 currentColor 라는 지정값이 있어서 이는 부모 요소가 자식 요소의 색을 가져오는 키워드임

  border: 2px solid currentColor;

버튼은 따로 태그를 사용하기보단 a태그를 사용해주는데, a 태그는 기본적으로 인라인 이므로 블록 으로 변경해줄 필요가 있다.

나머지 이미지들은 absolute로 위치를 지정해준다.

 

완성

 

3-2. 컨텐츠 사이 공지 부분

이 부분의 레이아웃과 디자인부분만 만들어준다. 자바스크립트는 아직 모르므로 생긴 것만 다뤄준다.

 

div.notice > div.notice-line > div.bg-left+div.bg-right+div.inner 형식으로 나눠주고

실제 컨텐츠는 .inner 안에 작성해준다.

 

div.inner > div.inner__left+div.inner__right 인 두 부분으로 나눠주고

서로 반씩 자리를 차지 하고 있음 absolute로 left:0, right:0 width:50% 으로 설정해준다

 

 

어렵다 ... 선택자 때문에 눈알 빠질거 같다