22.07.06- TIL

오늘 배운 것

오늘은 어제에 이어서 스타벅스 사이트 헤더 안에 메뉴에 커서를 대면 드랍다운 메뉴가 나오는 것을 구현하였고 드랍다운 메뉴들은 커서를 댔을 때 목록으로 나오기 때문에 ul li태그가 중첩되는 구조로 html을 작성하였다.

<ul class="main_menu">
          <li class="item">
            <div class="item__name">COFFEE</div>
            <div class="item__contents">
              <div class="item__contents__menu">
                <ul class="inner">
                  <li>
                    <a href="#">커피</a>
                    <ul>
                      <li>스타벅스 원두</li>
                      <li>스타벅스 비아</li>
                      <li>스타벅스앳홈 by 캡슐</li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">나와 어울리는 커피</a>
                  </li>
                  <li>
                    <a href="#">스타벅스 리저브™</a>
                    <ul>
                      <li>RESERVE MAGAZINE</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>
                    </ul>
                  </li>
                  <li>
                    <a href="#">커피 이야기</a>
                    <ul>
                      <li>농장에서 우리의 손으로</li>
                      <li>최상의 아라비카 원두</li>
                      <li>스타벅스 로스트 스펙트럼</li>
                      <li>스타벅스 디카페인</li>
                      <li>클로버® 커피 추출 시스템</li>
                    </ul>
                  </li>
                </ul>
              </div>

 

그리고 스타벅스 사이트의 본문 부분중 배경 이미지가 있는 부분을 한부분 구현하였다.