스타벅스 정리 1

기억해야할 내용정리

아이콘

<link rel="icon" href="./favicon.png">

link태그를 따로지정하지않으면, 루트에서 favicon.ico를 자동으로 찾아서 설정

오픈 그래프

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

<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" />

트위터 카드

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

<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" />

이러한 외부에서 접속하는 정보들은 head의 상단에 위치하는 것이 좋음

google font

https://fonts.google.com/?query=nanum
모든 브라우저에서 일반적인 나눔고딕 400, 700을 link로 따와서 main.css위에 연결

<link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap" rel="stylesheet">

이후, css파일 body에
font-family: 'Nanum Gothic', sans-serif;

material Icons

https://fonts.google.com/icons?selected=Material+Icons:minimize
자주 사용되는 아이콘 리소스를 가져올 수 있음

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

header

페이지의 상단

<header> = <div class="header">
<a href="/" class ="logo"> 

이미지는 인라인이기때문에 기본적으로 baseline을 가져 밑에 공간이 생김

position을 사용한다면 부모에 relative가 있는지 습관적으로 확인

위아래 가운데배치

header .logo {
  height: 75px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

javascript:void(0) = 아무것도 동작 안함

material icon크기 = font크기 = 24px

메인메뉴

z-index: 1; - 쌓임순서로 뷰포트보다 위로 올라오게 만들어 뷰포트의 배너등을 안보이게 함

한줄의 컨텐츠를 가운데로 정렬해줌

.inner {
  width: 1100px;
  margin: 0 auto;
  position: relative;
} 

여러 ul태그를 다룰때는 > 자식선택자 사용

header .main-menu .item .item__contents .contents__menu > ul{}

cursor: pointer; - 커서를 올려놓으면 포인터로 변경

BEM(block element modifier)

클래스 속성의 작명법
item__name - 아이템의 이름 표시
btn--primary - 버튼 상태표시
굳이 html을 보지않아도, 직관적으로 알 수 있음

뱃지

그림자 x, y, 4px 이동 blur 10px, 검은색 투명도 .15

box-shadow: 4px 4px 10px rgba(0,0,0,.15); 

헤더 고정

position fixed, absolute - 가로 너비가 최소한으로 가려함
width: 100%; - 해결

스크롤 리스너를 사용하기위한 라이브러리

<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>

위 lodash 라이브러리의 throttle을 사용

애니메이션을 위한 gsap 라이브러리

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"
   integrity="sha512-eP6ippJojIKXKO8EPLtsUMS+/sAGHGo1UN/38swqZa1ypfcD4I0V/ac5G3VzaHfDaklFmQLEs51lhkkVaqg60Q=="
   crossorigin="anonymous" referrerpolicy="no-referrer"></script>

위 라이브러리의 gsap.to를 사용

window.addEventListener('scroll', _.throttle(function () { //0.3초 텀을 두어 함수의 반복실행을 통제
  if (window.scrollY > 500) { //뱃지 숨기기
    gsap.to(badgeEl, .6, { //요소, 지속시간, 옵션 추가
      opacity: 0, // 투명하게
      display: 'none' //투명해지지만, 클릭은 되기때문에 아예 없애버리기
    })
  } else { //뱃지 보이기
    gsap.to(badgeEl, .6, { //요소, 지속시간, 옵션 추가
      opacity: 1, //보이게
      display: 'block' // 다시 생기기
    })
  }
}, 300))