vanilla js 웹 페이지 만들기

소셜미디어 공유를 위한 준비 (SEO)

검색 엔진 최적화 ( SEO : Search Engine Optimization )

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

트위터 카드 ( 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" />

Font와 Icon 준비

Google Fonts

여러가지 브라우저에서 동일한 폰트를 사용하기위해 지정해준다.

무료인 구글 폰트 페이지에서 폰트를 골라 가져온다.

링크 방식으로 적용!

( 용량이 크기 때문에 폰트 여러개를 남발하지 않는게 좋다! )

index.html

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

css 페이지에 적용

body에 적용하면 글자는 상속되어 body 안에 모든 요소에 적용된다.

main.css

body {
    font-family: 'Nanum Gothic', sans-serif;
}

Google Material Icons

구글에서 제공하는 머터리얼 아이콘 사용하기!

링크로 사용

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

사용 예제

<div class="material-icons">upload</div>

header 만들기