TIL 31|★作成茶屋登録ページ1(head tag、open graph、google font/icon)
クイックキャンパスネット講座で作成した★茶屋登録ページ.head tagを作成し、理解したオープングラフ、Google Font、Google Material Iconを記録します.
ヘッダーラベル
「オープングラフィックプロトコル」(The Open Graph Protocol)は、Webページがソーシャルメディアとして共有される場合に優先的に使用される情報を指定する技術です.
-titleとfaviconの間で作成: の機能は、外部から接続し、最小限の情報を迅速に収集することです.ページのソーシャルメディア共有とは、対応するページのリンクをスレイク、KakaoTalkなどに共有する際に、オープングラフの概念を用いたものである. KakaoTalkにあるサイトを入力して送信すると、そのアドレスに関する情報がカードとして表示されます.KakaoTalkの内部では、該当するページに接続し、ユーザーが見られる最小限のメタデータ情報だけをドラッグして、サイトの名前やロゴなどの機能を表示することができます. は、これらの重要な情報を優先的に提供するために、オープングラフの形式で処理する. 例 
-オープングラフィック記述コード:明確な情報を表すタグ(link、style、title、scriptなど)のほか、その他の情報はmetaタグとして定義されます
(コードソース:https://github.com/ParkYoungWoong/starbucks-vanilla-app) og:type:ページタイプ(E.g、Webサイト、video.movie) og:site name:所属サイトの名前 og:title:ページ名(タイトル) og:description:ページの簡単な説明 og:image:ページの代表画像アドレス(URL) og:url:ページアドレス(URL)
ソーシャルメディア(Twitter)が共有する際に優先的に使用する情報(オープングラフのような)としてページを指定します.
-titleとfaviconの間で作成: の機能は、外部から接続し、最小限の情報を迅速に収集することです.ツイッターカード作成コード
(コードソース:https://github.com/ParkYoungWoong/starbucks-vanilla-app) twitter:card:ページタイプ(E.g.summary,player) twitter:site:所属サイトの名前 twitter:title:ページ名(タイトル) twitter:description:ページの簡単な説明 twitter:image:ページの代表画像アドレス(URL) twitter:url:ページアドレス(URL) Google Fonts「Nanum Gothic」を検索し、Regular 400、Bold 700生成コード を選択 CSSルールは、指定された家庭の
fontは著作権の問題があるので、許可証をよく確認して使う習慣を身につけなければなりません.
Googleマテリアルiconを使用してGoogleリンクを行うことで、Googleマテリアルiconを使用できるリンクラベル が得られる.
ヘッダーラベル <!DOCTYPE html>
<html lang="ko">
<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="icon" href="./favicon.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<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">
</head>
<body>
Hello world
</body>
</html>
icon
リンクタグを挿入することで、faviocnはより解像度の高いファイルをアイコンとして使用できます.icoファイルの代わりに<link rel="icon" href="./favicon.png">
ブラウザのスタイルの初期化
reset.css cdnでGoogle化してtagを挿入しました<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
CSSファイルをインデックスします。htmlに接続
スタイルを作成します.htmlファイルの周囲にmainを含むcssフォルダを作成します.cssファイルを作成しlinkタグにリンク<link rel="stylesheet" href="./css/main.css">
オープングラフィックの作成
<!DOCTYPE html>
<html lang="ko">
<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="icon" href="./favicon.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<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">
</head>
<body>
Hello world
</body>
</html>
<link rel="icon" href="./favicon.png"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"><link rel="stylesheet" href="./css/main.css">-titleとfaviconの間で作成:
-オープングラフィック記述コード:明確な情報を表すタグ(link、style、title、scriptなど)のほか、その他の情報はmetaタグとして定義されます
(コードソース:https://github.com/ParkYoungWoong/starbucks-vanilla-app)
<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)が共有する際に優先的に使用する情報(オープングラフのような)として
-titleとfaviconの間で作成:
(コードソース:https://github.com/ParkYoungWoong/starbucks-vanilla-app)
<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" />Google fonts
<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をCSSにコピーする(main.cssファイルに書き込む)fontは著作権の問題があるので、許可証をよく確認して使う習慣を身につけなければなりません.
Google meterial icon
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">Reference
この問題について(TIL 31|★作成茶屋登録ページ1(head tag、open graph、google font/icon)), 我々は、より多くの情報をここで見つけました https://velog.io/@yeonbee/TIL-31-다방-랜딩페이지-만들기1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol