728x90
- HTML 작성
- 웹페이지 언어 Korean 변경
- 스타일 초기화 연결
- 메타 정보 Open Graph, Twitter Cards 연결
- CSS, JS파일 연결
- 기본폰트 연결
- 구글 매터리얼 아이콘 연결
(1) HTML 작성
! + tab
(2) 웹페이지 언어 Korean 변경 : 한국어로 번역 방지
<html lang="ko">
(3) 스타일 초기화 연결 : reset.css cdn
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
(4) 메타 정보 연결 : OGP, TC
Getting started with Cards
By using Twitter’s services you agree to our Cookies Use. We use cookies for purposes including analytics, personalisation, and ads.
developer.twitter.com
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
ogp.me
<!-- OPEN GRAPH -->
<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" />
(5) CSS, JS연결
defer : html페이지를 모두 읽어들인 후 외부 스크립트 실행하기, src 속성이 명시된 경우만 사용 가능
<link rel="stylesheet" href="./css/main.css" />
<script defer src="./js/main.js"></script>
(6) 기본 폰트 연결 : 나눔고딕 400,700
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
<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">font-family: 'Nanum Gothic', sans-serif;
(7) COMMON
body {
font-family: 'Nanum Gothic', sans-serif;
font-size: 16px;
color: #333;
line-height: 1.4;
font-weight: 400;
}
a {
text-decoration: none;
}
img {
display: block;
}
(8) 구글 material icons 연결
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
728x90
'FE' 카테고리의 다른 글
| slider를 쉽게 만드는 라이브러리 Swiper js (0) | 2021.10.15 |
|---|---|
| 이미지 순차적으로 나타나기, 기본 버튼 css에서 스타일주기 (0) | 2021.10.15 |
| 메인메뉴 상단 고정, 따라다니는 배지 스크롤하면 사라지기 (0) | 2021.10.13 |
| 메인메뉴와 하위 드롭메뉴 만들기 (0) | 2021.10.12 |
| 헤더 로고, 서브메뉴, 검색창 만들기 (0) | 2021.10.11 |