🌈 head 관련 태그
🔥 site-information
🔥 explore 최적화
🔥 공유 card 기능
🔥 fabicon 설정
🔥 Reset CSS
🔥 Fontawesome 적용
🔥 font 적용
🔥 head 적용 예시
1. site-information
- 검색엔진에게 페이지에 대한 정보를 제공하기 위한 목적으로 제목, 설명, 저자, 키워드 등을 입력
- 🔍
<title>이름 입력</title>: 페이지 이름- 🔍
<meta name="description" content="설명 입력" />: 설명- 🔍
<meta name="keywords" content="키워드 입력" />: 키워드- 🔍
<meta name="author" content="저자 입력" />: 만든이
2. explore 최적화
- explore 호환성 최적화를 위해 최신 엔진을 적용시키라는 meta 태그
- 🔍
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
3. 공유 card 기능
- 페이스북이나 트위터 등에 페이지의 링크를 붙여넣으면 자동으로 페이지에 대한 압축된 정보가 그림과 텍스트로 보여질 수 있게 하는 기능
1) facebook 설정
- 🔍
<meta property="og:type" content="website" />- 🔍
<meta property="og:title" content="타이틀 입력" />- 🔍
<meta property="og:description" content="설명 입력" />- 🔍
<meta property="og:image" content="이미지 경로 입력" />- 🔍
<meta property="og:url" content="url 주소 입력" />- 🔍
<meta property="og:site_name" content="사이트 이름 입력" />
2) twitter 설정
- 🔍
<meta name="twitter:card" content="summary" />- 🔍
<meta name="twitter:title" content="타이틀 입력" />- 🔍
<meta name="twitter:description" content="설명 입력" />- 🔍
<meta name="twitter:image" content="이미지 경로 입력" />- 🔍
<meta name="twitter:url" content="url 주소 입력" />- 🔍
<meta name="twitter:creator" content="저자 입력" />
4. fabicon 설정
- 웹브라우저 탭창에 싸이트에 대한 icon을 설정하게하는 기술을 fabicon 이라함
- 일반적인 fabicon 설정 : 🔍
<link rel="icon" href="fabicon 경로" />- 아이폰용 fabicon 설정 : 🔍
<link rel="apple-touch-icon" href="fabicon 경로" />- 인터넷 익스프로러용 fabicon 설정 : 🔍
<link rel="shortcut icon" tyle="image/x-icon" href="fabicon 경로" />
5. Reset CSS
- html 연결해줘도되고, css 파일을 생성 후 import로 연결해줘도 됨
- nomalize 참고 : https://cdnjs.com/libraries/normalize
- 🔍
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
6. Fontawesome 적용
- 웹페이지 내 다양한 icon을 활용하기 위해 CDN 방법으로 fontawesome 연결
- fontawesome 참고 : https://fontawesome.com/
- 🔍
<script src="fontawsome에서 부여 받은 주소" crossorigin="anonymous"></script>
7. font 적용
- Spoca 폰트 참고 : https://spoqa.github.io/spoqa-han-sans/#webfont
- google 폰트 참고 : https://fonts.google.com/
- 🔍
<link href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css" rel="stylesheet" type="text/css" />
8. head 태그 적용 예시
✍🏻 html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>sample</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="input description" /> <meta name="keywords" content="input keywords" /> <meta name="author" content="input author" /> <!-- Open Graph (Facebook, Linkedin)--> <meta property="og:type" content="website" /> <meta property="og:title" content="input title" /> <meta property="og:description" content="input description" /> <meta property="og:image" content="img/sample-image.png" /> <meta property="og:url" content="https://www.sample.com" /> <meta property="og:site_name" content="input site-name" /> <!-- twitter card (Twitter)--> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="input title" /> <meta name="twitter:description" content="input description" /> <meta name="twitter:image" content="img/sample-image.png" /> <meta name="twitter:url" content="https://www.sample.com" /> <meta name="twitter:creator" content="input creator" /> <!-- fabicon 설정 --> <link rel="icon" href="img/fabicon-image-name.ico" /> <link rel="apple-touch-icon" href="img/fabicon-image-name.ico" /> <link rel="shortcut icon" tyle="image/x-icon" href="img/fabicon-image-name.ico" /> <!-- CSS Reset(nomalize) --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> <!-- Fontawesome --> <script src="https://kit.fontawesome.com/부여 받은 정보.js" crossorigin="anonymous"></script> <!-- Spoca Han Sans Neo --> <link href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css" rel="stylesheet" type="text/css" /> <!-- CSS link --> <link rel="stylesheet" href="css/style.css" /> </head> <body></body> </html>
Keep Going, Keep Coding!