1. 파일 생성
프로젝트 폴더 > index.html , css>main.css , js>main.js 파일 생성
2. HTML 기본 설정
<html> 설정 ; lang="ko"로 변경
<head> 설정 ; <title>태그 변경 & 기본 css(구글-> reset.css cdn 검색하여 복사) 설정 & <link>로 css,js 연결
& <meta> opengraph,twitter 설정 & <link> font, Material icon 링크(아래 참고)
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Starbucks Coffee Korea</title>
<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" />
<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" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="icon" href="./favicon.png" />
<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">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
3. CSS 기본 설정
/* COMMON */ 설정 ; Material Icon 연결하는 내용 추가 & body에 기본 설정 & img는 display:block 설정
/* COMMON */
.material-symbols-outlined {font-variation-settings:'FILL'0,'wght'400,'GRAD'0,'opsz'48}
body {
color:#333;
font-size: 16px; /* 기본 font-size, font-wieght, line-height를 설정해 하위 요소들에 상속 */
font-weight:400;
line-height:1.4;
font-family: 'Nanum Gothic', sans-serif;
}
img{ /* <img>는 inline 요소임 inline요소는 baseline 아래에 공간을 가질 수 있음 -> block요소로 변경 */
display:block;
}
4. html문서에 위에서부터 한 구조 단위로 작성(header>container>footer)
5. CSS에 html구조들 모두 상위요소부터 하위요소까지 나열
-> 작성하고 한 눈에 보기 용이함
6. 원하는 디자인으로 CSS작성 & 필요한 기능 JS작성
폰트적용
https://fonts.google.com/specimen/Nanum+Gothic?query=nanum
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
1. https://fonts.google.com/ 에서 원하는 폰트 검색
2. 사용할 bold에 select this style
3. <link> 복사하여 CSS 가져오는 link 앞에 복붙
4. CSS 내 body태그에 font-family를 추가
자주사용하는 아이콘
; Material Icons에서 가져오기
https://material.io/resources/get-started#web
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
1. html>head에 추가
2. https://fonts.google.com/icons 사이트에서 원하는 아이콘을 누른 후 우측에 Inserting the icon의 <span>태그를 원하는 body 위치에 추가
오픈그래프
;웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 지정
<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" />
'WebProgramming > WebProgramming' 카테고리의 다른 글
| [WebProgramming] VS Code 단축키 정리! (0) | 2022.08.01 |
|---|---|
| [React] localStorage (0) | 2022.07.26 |
| [웹 프로그래밍] React vs Vue (0) | 2022.06.25 |
| [웹 프로그래밍] 웹 개발 로드맵 (0) | 2022.06.25 |
| [웹 프로그래밍] Bundler (ICO converter, Babel, Parcel) (0) | 2022.06.13 |
| [BootStrap] BootStrap (0) | 2022.06.13 |
| 웹프로그래밍 오답노트 & 팁 [작성 중] (0) | 2022.06.02 |
