프로젝트 시작, 스타일 초기화, 파비콘

파비콘

프로젝트 파일 내에 파비콘(favicon.ico)파일이 있는 경우 따로 html에서 불러오지 않아도 브라우저에서 자동적으로 찾아서 탭의 아이콘으로 쓴인다.

png 파일을 쓸 경우에는 link 태그를 통해 경로를 지정해 줄 수 있다.

오픈 그래프와 트위터 카드

오픈 그래프(The Open Graph protocol)

웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용 되는 정보를 지정합니다.

주소를 공유하게 되면 카카오톡 내부에서 페이지에 접속을 해서 사용자가 볼 수 있는 최소한의 메타 정보를 읽어와서 표시를 해준다.

이때 우선적으로 활용되는 정보를 오픈 그래프를 통해 제공한다.

<meta property="og:type" content="website" />
<meta property="og:site_name" content="Starbucks" />
<meta property="og:title" content="Starbucks Coffee Korea" />
<meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
<meta property="og:image" content="./images/starbucks_seo.jpg" />
<meta property="og:url" content="https://starbucks.co.kr" />

• og:type: 페이지의 유형(E.g, website, video.movie)
• og:site_name: 속한 사이트의 이름
• og:title: 페이지의 이름(제목)
• og:description: 페이지의 간단한 설명
• og:image: 페이지의 대표 이미지 주소(URL)
• og:url: 페이지 주소(URL)

트위터 카드

웹페이지가 소셜 미디어(트위터)로 공유될 때 우선적으로 활용되는 정보를 지정한다.

<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="Starbucks" />
<meta property="twitter:title" content="Starbucks Coffee Korea" />
<meta property="twitter:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
<meta property="twitter:image" content="./images/starbucks_seo.jpg" />
<meta property="twitter:url" content="https://starbucks.co.kr" />

• twitter:card: 페이지(카드)의 유형(E.g. summary, player)
• twitter:site: 속한 사이트의 이름
• twitter:title: 페이지의 이름(제목)
• twitter:description: 페이지의 간단한 설명
• twitter:image: 페이지의 대표 이미지 주소(URL)
• twitter:url: 페이지 주소(URL)

시작하기

Google Fonts

서체

구글

사파리

별도의 서체(font) 지정이 없이 사이트를 만들면 각 각의 브라우저 마다 서체가 다르기 때문에 크로스 브라우징을 제공 할 수 없다.

링크텍스트

시작하기

Google Material Icons

웹페이지에서 널리 사용되는 아이콘들을 구글에서 무료로 제공해 준다

링크텍스트

복사해서 붙여 넣기

css를 불러오기 직전에 사용한다.

링크텍스트

복사해서 붙여 넣기

헤더와 드롭다운 메뉴

로고

링크의 주소로 "/" -> 절대경로 만 넣어줘도 메인페이지로 이동하는 경로가 된다.

margin을 auto로 하여 헤더 부분을 자동으로 가운데 정렬이 가능하다.

img 태그는 인라인 요소이기 때문에 글자를 위한 베이스 라인이 있기 때문에 밑에 공간이 생긴다.

img 태그를 display를 이용하여 block으로 바꾸어 주면 위의 문제가 해결 된다.

로고를 header .inner 의 가운데 배치 시키기 위해 .logo 부분에 position: absolute(부모를 기준으로 정렬)를 입력하고 반드시 기준에 될 부모 요소에 position: relative를 입력해준다.

수직 가운데 정렬

우선 수직의 끝점 top: 0; bottom: 0; 을 잡아주고, item의 외부 여백을 자동으로 계산 하게 끔 auto로 해준다. 이 때 item을 높이를 지정해 줘야 여백을 계산할 수 있다.

*수평 가운데 정렬 또한 개념은 같다.

서브 메뉴

header 부분의 logo 밑에 sub-menu class를 생성해 주고
메뉴가 들어갈 리스트를 만들어 준다.

*a태그 에서 아직 링크할 곳이 정해 지지 않았을 때

<a href="javascript:void(0)"></a>
<a href="#"></a>

위와 같이 입력해 줄 수 있다.

javascript:void(0) 같은 경우에는 페이지에 아무런 영향을 주지 않지만 #은 영향을 줄 우려가 있기 때문에 전자를 더 권장한다.

logo 부분에 positon:absolute로 써서 주변 환경과 상호 작용하지 않기 때문에 sub menu의 요소를 덮어 버리는 현상이 나타난다.

작업을 편하게 하기위해 display: none을 입력해서 로고를 잠시 가릴 수 있다.

CSS를 작성할 때 하나하나 작성 하기 보다는 먼저 모든 구조를 만들고 내용을 입력 해 나가는 것이 수월하다.

검색

Outline 속성: input 요소를 클릭하게 되면 인풋요소 주변에 파란색 테두리선이 생기기 된다.

outline 속성은 boder 보다 편리 하지 않기 때문에 none으로 해준다.

돋보기가 input 요소 부분을 덮고 있어서 클릭을 해도 반응이 없다.
이 부분을 해결 하기 위해 돋보기 부분을 클릭하면 input 부분이 작동 하게끔 해야 한다. 그러기 위해선 javascript를 이용 해야 한다.

document 내에서 search를 찾고 seachEL이라는 변수에 집어 넣어주고 seqrchEl.querySelector('input') 을 통해 .search 클래스의 후손인 input 요소를 찾아내게 된다.

searchEl 요소를 클릭하면 searchInput 요소가 focus()되게끔 한다.

searchEl 요소를 focus 했을 때 클래스에 'focused'를 추가 하고 placeholder 속성을 부여해서 '통합검색' 이라는 힌트가 나오게 한다.

한번 추가된 속성은 따로 지우지 않는 이상 유지 되기 때문에 반드시 지워 줘야 한다.

요소를 blur 했을 때 'focused' 란 클래스는 사라지고 placeholder를 빈 문자로 만든다.

css로 넘어가서 focused가 되었을 경우 돋보기가 사라지게 끔 투명도(opacity)를 0 으로 해주고 transition을 설정 해준다.

sub-menu의 위치를 오른쪽으로 옮겨주고 로고를 다시 표시 한다.

메인 메뉴

드롭 다운 메뉴: 메뉴에 마우스를 올렸을 때 메뉴에 해당하는 하위 메뉴들이 나타나는 것을 말한다.

header 부분에 추가 메인 메뉴를 추가

메인 메뉴를 눌렀을 때 contents를 드롭 다운 메뉴로 쓰기 위해 hover를 .item의 뒤에 붙여 준다.

itemcontents 부분에서 display를 none으로 해주고
itemcontents를 복사해서 hover 속성을 넣어 주고 display: block으로 해주면

메인 메뉴에 마우스를 올렸을 때 드롭다운 메뉴가 표시된다.

 <ul class="main-menu">
        <li class="item">
          <div class="item__name">COFFEE</div>
          <div class="item__contents">
            <div class="contents__menu">
              <ul class="inner">
                <li>
                  <h4>커피</h4>
                  <ul>
                    <li>스타벅스 원두</li>
                    <li>스타벅스 비아</li>
                    <li>스타벅스 오리가미</li>
                  </ul>
                </li>
                <li>
                  <h4>에스프레소 음료</h4>
                  <ul>
                    <li>도피오</li>
                    <li>에스프레소 마키아또</li>
                    <li>아메리카노</li>
                    <li>마키아또</li>
                    <li>카푸치노</li>
                    <li>라떼</li>
                    <li>모카</li>
                    <li>리스트레또 비안코</li>
                  </ul>
                </li>
                <li>
                  <h4>커피 이야기</h4>
                  <ul>
                    <li>스타벅스 로스트 스팩트럼</li>
                    <li>최상의 아라비카 원두</li>
                    <li>한 잔의 커피가 완성되기까지</li>
                    <li>클로버® 커피 추출 시스템</li>
                  </ul>
                </li>
                <li>
                  <h4>최상의 커피를 즐기는 법</h4>
                  <ul>
                    <li>커피 프레스</li>
                    <li>푸어 오버</li>
                    <li>아이스 푸어 오버</li>
                    <li>커피 메이커</li>
                    <li>리저브를 매장에서 다양하게 즐기는 법</li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="contents__texture">
              <div class="inner">
                <h4>나와 어울리는 커피 찾기</h4>
                <p>스타벅스가 여러분에게 어울리는 커피를 찾아드립니다.</p>
                <h4>최상의 커피를 즐기는 법</h4>
                <p>여러가지 방법을 통해 다양한 풍미의 커피를 즐겨보세요.</p>
              </div>
            </div>
          </div>
        </li>
        <li class="item">
          <div class="item__name">MENU</div>
          <div class="item__contents">
            <div class="contents__menu">
              <ul class="inner">
                <li>
                  <h4>음료</h4>
                  <ul>
                    <li>콜드 브루</li>
                    <li>브루드 커피</li>
                    <li>에스프레소</li>
                    <li>프라푸치노</li>
                    <li>블렌디드 음료</li>
                    <li>스타벅스 피지오</li>
                    <li>티(티바나)</li>
                    <li>기타 제조 음료</li>
                    <li>스타벅스 주스(병음료)</li>
                  </ul>
                </li>
                <li>
                  <h4>푸드</h4>
                  <ul>
                    <li>베이커리</li>
                    <li>케익</li>
                    <li>샌드위치 & 샐러드</li>
                    <li>따뜻한 푸드</li>
                    <li>과일 & 요거트</li>
                    <li>스낵 & 미니 디저트</li>
                    <li>아이스크림</li>
                  </ul>
                </li>
                <li>
                  <h4>상품</h4>
                  <ul>
                    <li>머그</li>
                    <li>글라스</li>
                    <li>플라스틱 텀블러</li>
                    <li>스테인리스 텀블러</li>
                    <li>보온병</li>
                    <li>액세서리</li>
                    <li>커피 용품</li>
                    <li>패키지 티(티바나)</li>
                  </ul>
                </li>
                <li>
                  <h4>카드</h4>
                  <ul>
                    <li>실물카드</li>
                    <li>e-Gift 카드</li>
                  </ul>
                </li>
                <li>
                  <h4>메뉴 이야기</h4>
                  <ul>
                    <li>콜드 브루</li>
                    <li>스타벅스 티바나</li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="contents__texture">
              <div class="inner">
                <h4 class="new">스타벅스 티바나</h4>
                <p>다양한 찻잎과 향신료 등 개성있는 재료로 새로운 맛과 향의 티를 선보입니다.</p>
              </div>
            </div>
          </div>
        </li>
        <li class="item">
          <div class="item__name">STORE</div>
          <div class="item__contents">
            <div class="contents__menu">
              <ul class="inner">
                <li>
                  <h4>매장 찾기</h4>
                  <ul>
                    <li>퀵 검색</li>
                    <li>지역 검색</li>
                    <li>My 매장</li>
                  </ul>
                </li>
                <li>
                  <h4>매장 이야기</h4>
                  <ul>
                    <li>청담스타</li>
                    <li>티바나 인스파이어드 매장</li>
                    <li>파미에파크</li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="contents__texture">
              <div class="inner">
                <h4>매장 찾기</h4>
                <p>보다 빠르게 매장을 찾아보세요.</p>
                <h4 class="new">청담스타</h4>
                <p>스타벅스 1,000호점인 청담스타점을 만나보세요.</p>
              </div>
            </div>
          </div>
        </li>
        <li class="item">
          <div class="item__name">RESPONSIBILITY</div>
          <div class="item__contents">
            <div class="contents__menu">
              <ul class="inner">
                <li>
                  <h4>지역 사회 참여 활동</h4>
                  <ul>
                    <li>회망배달 캠페인</li>
                    <li>재능기부 카페 소식</li>
                    <li>커뮤니티 스토어</li>
                    <li>청년인재 양성</li>
                    <li>우리 농산물 사랑 캠페인</li>
                    <li>우리 문화 지키기</li>
                  </ul>
                </li>
                <li>
                  <h4>환경보호 활동</h4>
                  <ul>
                    <li>환경 발자국 줄이기</li>
                    <li>일회용 컵 없는 매장</li>
                    <li>커피 원두 재활용</li>
                  </ul>
                </li>
                <li>
                  <h4>윤리 구매</h4>
                  <ul>
                    <li>윤리적 원두 구매</li>
                    <li>공정무역 인증</li>
                    <li>커피 농가 지원 활동</li>
                  </ul>
                </li>
                <li>
                  <h4>글로벌 사회 공헌</h4>
                  <ul>
                    <li>윤리경영 보고서</li>
                    <li>스타벅스 재단</li>
                    <li>지구촌 봉사의 달</li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="contents__texture">
              <div class="inner">
                <h4>커피원두 재활용</h4>
                <p>스타벅스 커피 원두를 재활용 해보세요.</p>
              </div>
            </div>
          </div>
        </li>
        <li class="item">
          <div class="item__name">MY STARBUCKS REWARDS</div>
          <div class="item__contents">
            <div class="contents__menu">
              <ul class="inner">
                <li>
                  <h4>마이 스타벅스 리워드</h4>
                  <ul>
                    <li>마이 스타벅스 리워드 소개</li>
                    <li>등급 및 혜택</li>
                    <li>스타벅스 별</li>
                    <li>자주하는 질문</li>
                  </ul>
                </li>
                <li>
                  <h4>스타벅스 카드</h4>
                  <ul>
                    <li>스타벅스 카드 소개</li>
                    <li>스타벅스 카드 갤러리</li>
                    <li>등록 및 조회</li>
                    <li>충전 및 이용안내</li>
                    <li>분실신고/환불신청</li>
                    <li>자주하는 질문</li>
                  </ul>
                </li>
                <li>
                  <h4>스타벅스 카드 e-Gift</h4>
                  <ul>
                    <li>스타벅스 카드 e-Gift 소개</li>
                    <li>이용안내</li>
                    <li>선물하기</li>
                    <li>자주하는 질문</li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="contents__texture">
              <div class="inner">
                <h4>스타벅스 카드 등록하기</h4>
                <p>카드 등록 후 리워드 서비스를 누리고 사용내역도 조회해보세요.</p>
              </div>
            </div>
          </div>
        </li>
        <li class="item">
          <div class="item__name">WHAT'S NEW</div>
          <div class="item__contents">
            <div class="contents__menu">
              <ul class="inner">
                <li>
                  <h4>프로모션 & 이벤트</h4>
                  <ul>
                    <li>전체</li>
                    <li>스타벅스 카드</li>
                    <li>마이 스타벅스 리워드</li>
                    <li>온라인</li>
                    <li>2017 스타벅스 플래너</li>
                  </ul>
                </li>
                <li>
                  <h4>새소식</h4>
                  <ul>
                    <li>전체</li>
                    <li>상품 출시</li>
                    <li>스타벅스의 문화</li>
                    <li>스타벅스 사회공헌</li>
                    <li>스타벅스 카드출시</li>
                  </ul>
                </li>
                <li>
                  <h4>매장별 이벤트</h4>
                  <ul>
                    <li>일반 매장</li>
                    <li>신규 매장</li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="contents__texture">
              <div class="inner">
                <h4>매장별 이벤트</h4>
                <p>스타벅스의 매장 이벤트 정보를 확인 하실 수 있습니다.</p>
                <h4>소셜 스타벅스</h4>
                <p>다양한 스타벅스 SNS 채널을 통해 스타벅스를 만나보세요!</p>
              </div>
            </div>
          </div>
        </li>
      </ul>

header .main-menu {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  display: flex;
}
header .main-menu .item {

}
header .main-menu .item .item__name {
  padding: 10px 20px 34px 20px;
  font-family: Arial, sans-serif;
  font-size: 13px;
}

header .main-menu .item:hover  .item__name{
  background-color: #2c2a29;
  color: #669900;
  border-radius: 6px 6px 0 0;
}
header .main-menu .item .item__contents {
  width: 100%;
  position: fixed;
  left: 0;
  display: none;
}
header .main-menu .item:hover .item__contents{
  display: block;
}
header .main-menu .item .item__contents .contents__menu {
  background-color: #2c2a29;
}
header .main-menu .item .item__contents .contents__menu > ul {
  display: flex;
  padding: 20px 0;
}
header .main-menu .item .item__contents .contents__menu > ul > li {
  width: 220px;
}
header .main-menu .item .item__contents .contents__menu > ul > li h4 {
  padding: 3px 0 12px 0;
  font-size: 14px;
  color: #fff;

}
header .main-menu .item .item__contents .contents__menu > ul > li ul li {
  padding: 5px 0;
  font-size: 12px;
  color: #999;
  cursor: pointer;
}
header .main-menu .item .item__contents .contents__menu > ul > li ul li:hover {
  color: #669900
}
header .main-menu .item .item__contents .contents__texture {
  padding: 26px 0;
  font-size: 12px;
  background-image: url("../images/main_menu_pattern.jpg");
}
header .main-menu .item .item__contents .contents__texture h4 {
  color: #999;
  font-weight: 700;

}
header .main-menu .item .item__contents .contents__texture p {
  color: #669900;
  margin:  4px 0 14px;
}

BEM

css를 작성 할때 .container .name의 요소를 선택자로 쓰게 되면 .item의 자식 요소의 name도 같이 선택 되게 된다.

선택자를 명시적으로 알기 쉽게 해주고 css를 작성할때도 겹치지 않아서 용이 하다.

앞의 단어의 상태를 나타냄으로서 클래스 이름만 보고도 그 역활을 유추해 낼 수 잇다.

전역 배지(GSAP)

_.throttle

링크텍스트

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

main.js를 불러오는 코드 위에 붙여넣는다.

scroll 이벤트를 사용하면 스크롤 한번에 몇십 번씩 함수가 실행 되기 때문에 브라우저에 부하가 빨리온다. 그렇기 때문 throtle을 이용해서 함수가 실행 되는 시간을 제한시켜 준다.

gsap

링크텍스트

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

main.js를 불러오는 코드 위에 붙여넣는다.

gsap.to 를 통해 애니메이션 효과를 줄 수 있다.

스크롤을 내려서 window y축에서 500픽셀이 넘어 가면 badgeEl가 .6 만에 투명해 지고 실제로 사라지게 만든다.

다시 스크롤을 올릴 경우 반대로 나타나게 만든다.