프론트엔드 10일차 스타벅스 예제

waymo·2022년 5월 5일

패캠 FE 공부

목록 보기

11/28

10일차

스타벅스 사이트 실습예제

스타벅스 예제

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

사이트 아이콘 설정
head 태그 안에 저 코드를 적거나 만약 저 코드가 없을 경우 폴더내에 favicon자동적용

뷰포트(Viewport) 렌더링 방식 설정

웹페이지가 화면(Viewport)에 표현되는 방식을 설정 (모바일 환경도 적용)

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

width=device-width : 화면의 가로너비를 각 디바이스(Device)의 가로 너비와 동일하게 적용
initial-scale=1.0 : 화면의 초기 화면 배율(확대 정도)을 설정
user-scalable=no : 사용자가 디바이스 화면을 확대(yes)/축소(no)할 수 있는지 설정
maximum-scale=1 : 사용자가 화면을 확대할 수 있는 최댓값
minimum-scale=1 : 사용자가 화면을 축소할 수 있는 최솟값

오픈 그래프 (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)

트위터 카드 (Twitter Cards)

웹페이지가 트위터로 공유될 때 우선적으로 활용되는 정보를 지정
트위터카드 정보

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