1. 개발 시작 및 기본 설정 css 초기화, 폰트 설정, 아이콘 설정

파비콘(Favicon)

웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.
아래와 같이 코드를 작성한다.

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

파비콘은 확장자가 ico인 파일이 html 파일과 형제 요소에 있으면 스스로 찾아서 연결을 한다.

 

png 파일을 사용하면 더 좋은 화질의 파비콘을 사용할 수 있다.

 

ico 파일 만들기

GOOGLE에서 favicon maker를 검색하여 아래와 같은 사이트에 접속한다.

 

https://www.favicon-generator.org/

Favicon & App Icon Generator

---

CSS 초기화

스타벅스 프로젝트를 하기 전에 알아야 할 사실이 있다.

CSS는 기본적으로 어느 정도 설정이 되어 있다.

 

그 설정을 모두 없애기 위해 GOOGLE에다가 Reset css cdn을 검색하고

구글 창에서 제일 먼저 나오는 사이트로 들어간다.

 

https://www.jsdelivr.com/package/npm/reset-css

jsDelivr - A free, fast, and reliable CDN for Open Source

이 사이트 내에서 /npm/reset-css@5.0.1/reset.min.css html 코드를 복사한다.

html에서 복사를 하면 index.html에다가 파비콘 다음으로 적용 시켜주면 된다.

<link rel="icon" href="./favicon.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />

직접 만든 CSS나 JS 파일은 마지막에 써주는 것이 좋다.

---

JS defer

  <link rel="stylesheet" href="./css/main.css" />

  <script defer src="./js/main.js"></script>

그리고 JS 파일을 연결할 땐 defer를 꼭 써주어야 한다.

 

HTML 문서 자체가 아주 큰 경우를 가정해보자,

브라우저가 HTML 문서 전체를 다운로드 한 다음에 스크립트를 다운받게 하면 페이지가 정말 느려질 것이다.

브라우저는 defer 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백그라운드’에서 다운로드를 한다. 따라서 defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연된다.

 

새로운 폰트를 사용하려고 할 때 GOOGLE에 또 검색을 해야 한다.

Google fonts라고 검색을 하면 아래와 같은 사이트가 나올 것이다.

---

GOOGLE Fonts

https://fonts.google.com/

Google Fonts

이 사이트를 이용하여 사용할 폰트를 html 파일에 링크를 걸면 된다.

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

이렇게 3가지 link 태그를 쓰면 나눔고딕을 사용할 수 있게 된다.

하지만 CSS에도 나눔고딕을 사용한다는 것을 써주어야 한다.

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

body 태그에 font-family를 사용하면 나눔고딕을 사용할 수 있다. 

sans-serif는 나눔고딕을 사용하지 못하는 환경이면 대체할 수 있는 폰트이다.

---

오픈 그래피(Open graph)

sns로 공유될 때 우선적으로 활용되는 정보

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

위와 같이 오픈 그래피를 사용했다.

 

오픈 그래피는 title 태그 아래 썼다.

아래와 같은 사이트를 접속하면 open graph로 og의 기본 태그와 옵션 태그를 알 수 있다.

 

https://ogp.me/

Open Graph protocol

오픈 그래피의 기본태그

• og:title - 사이트의 제목 태그
• og:type - 사이트의 종류 스타일 예) video.movie
• og:image - 사이트를 나타낼 대표 이미지
• og:url - 사이트의 대표 url

오픈 그래피의 옵션태그

• og:audio - 사이트에 포함되는 오디오 파일 url
• og:description - 사이트의 설명
• og:locale - 사이트의 언어 선택, 기본값은 en_US, 한글의 경우는 ko_KR
• og:site_name - 좀 더 세부적인 카테고리
• og:video - 사이트에 포함되는 비디오 파일 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" />

 

위와 같은 트위터 카드도 사용해주었다.

Summary card

• twitter : card - 카드 유형으로 "summary", "photo" 또는 "player"중 하나
• twitter : url - 카드 내용의 정식 URL
• twitter : title - 카드에 표시 될 내용의 제목
• twitter : description - 최대 200 자의 컨텐츠 설명
• twitter : image - 내용을 나타내는 이미지의 URL

---