-
스타벅스 클론코딩-1 (HTML <head> 작성)프로젝트/스타벅스 클론코딩 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은 글자로 인식함
'프로젝트 > 스타벅스 클론코딩' 카테고리의 다른 글
스타벅스 클론코딩-5 (PROMOTION 및 REWARDS) (0) 2021.05.14 스타벅스 클론코딩-4 (NOTICE) (0) 2021.05.12 스타벅스 클론코딩-3 (전역 배지 및 VISUAL) (0) 2021.05.09 스타벅스 클론코딩-2 (HEADER) (0) 2021.05.07 스타벅스 클론코딩 (0) 2021.04.11