스타벅스 클론코딩-1 (HTML <head> 작성)

IT Blue 2021. 5. 6. 23:00

HTML <head> 작업

- 문서의 정보를 작성

- 웹 브라우저가 해석해야 하는 페이지 제목, 설명, 사용할 파일의 위치, 스타일, 보이지 않는 정보를 작성

<!-- 타이틀 변경 -->
<title>Starbucks Coffee Korea</title>
<!-- 아이콘 삽입 -->
<link rel="icon" href="./favicon.png">
<!-- css 초기화 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<!-- css 연결 -->
<link rel="stylesheet" href="./css/main.css">

Favicon(favorites icon)

- 윕페이지를 나타내는 아이콘으로 파비콘이라고 부른다

- 웹페이지의 로고를 의미하며 대부분의 경우 루트 경로에 favicon.ico 파일을 위치하면 자동으로 설정된다

- favicon.png 파일을 사용하려면 <link /> 태그를 작성

오픈 그래프와 트위터 카드

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

오픈 그래프(The Open Graph protocol)

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

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

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

twitter:card - 페이지(카드)의 유형(E.g. summary, player)

twitter:site - 속한 사이트의 이름

twitter:title - 페이지의 이름(제목)

twitter:description - 페이지의 간단한 설명

twitter:image - 페이지의 대표 이미지 주소(URL)

twitter:url - 페이지 주소(URL)

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

- 자신의 웹 사이트/페이지를 노출할 수 있도록 정보를 최적화하는 작업을 의미

Google Fonts

<!-- google font(나눔 고딕) HTML 연결 작업 + CSS 부분도 연결하기  -->
<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">

body {
  /* google font(나눔 고딕) CSS 연결 작업 */
  font-family: 'Nanum Gothic', sans-serif;
}

Google Font(나눔 고딕) 연결, HTML + CSS

Google Meterial Icons

<!-- Google Meterial Icons 연결 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- 사용법 예시 -->
<body>
    <span class="material-icons">login</span>
</body>

Google Meterial Icons 연결

meterial-icon은 글자로 인식함