<head>
<head> 태그안에 정의할 수 있는 내용들을 간단하게 정리합니다.
보통 정리된 순서로 작성합니다.
인코딩 방식 설명
"UTF-8" : 가장 많이 사용되는 인코딩 방식으로 많은 언어들을 표현할 수 있습니다.
<meta charset="UTF-8">문서의 타이틀 정의
브라우저의 페이지 탭에 보이는 페이지의 제목을 정의합니다.
- 택스트만 포함할 수 있습니다.
<title>타이틀</title><meta>
- name : 메타데이터가 어떤 정보를 포함하는지 알려줍니다.
- content : 실제 메타데이터의 내용입니다.
문서의 저자
문서의 작성자에 대한 정보입니다.
<meta name="author" content="문서 작성자의 이름">문서 설명
문서에 대한 간략한 설명 글을 작성할 수 있습니다.
<meta name="description" content="페이지에 대한 설명">검색 키워드
검색 엔진의 키워드를 설정할 수 있습니다.
<meta name="keywords" content="키워드1, 키워드2, 키워드3, 등등">뷰포트 설정
디바이스 별 해상도 즉, 반응형을 위한 뷰포트를 설정할 수 있습니다.
- 일반적으로 확대, 축소 등을 불가능하게 설정합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalble=no, maximum-scale=1.0, minimum-scale=1.0">익스플로러 설정
익스플로러는 호환성이 가장 좋지 않기 때문에 익스플로러 사용자라면 "최신 익스플로러 엔진을 사용하여 렌더링을 하여라"라는 것을 설정할 수 있습니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">오픈그래프
웹을 공유할 때 사용자에게 보여지는 미리보기와 같은 설정입니다.
오픈그래프의 경우 웹에 필요한 기본적인 오픈그래프를 설정하지만 네이버 블로그, 카카오톡, 트위터 등등.. 사용자가 사용하는 플랫폼에 따라 필요한 오픈그래프 설정이 다르기 때문에 다양한 오픈그래프 설정이 필요합니다.
<!-- 해당 페이지에 필요한 오픈그래프 양식을 찾아서 작성할 수 있습니다. -->
<meta property="og:type" content="website">
...파비콘 설정
문서 타이틀 옆에 작은 이미지 넣기 위한 설정입니다.
- 없을 경우 브라우저별 기본 이미지 값이 설정됩니다.
- 오픈그래프와 마찬가지로 다양한 브라우저 및 디바이스에 적용하기 위해 여러가지 파비콘 설정이 필요합니다. | 아이폰, 익스플로러 등...
<link rel="icon" href="파비콘 이미지 경로">Reset CSS 설정
Reset CSS를 직접 작성할 수 있기 때문에 필수는 아니지만 간편하게 사용할 수 있는 방법입니다.
cdnjs에 있는 파일을 불러와 사용하는 경우가 보통입니다.min.css파일을 선택해 CSS 파일 용량을 줄이는 방법도 좋은 방법입니다.
<link rel="stylesheet" href="https://cdnjs.cloudfl....">Icon 설정
이미지를 직접 저장해 사용할 수 있지만 서버에서 불러와 사용하는 방법도 있습니다.
- 보통 Font Asesome 사이트를 많이 이용합니다.
cdnjs에 있는 파일을 불러와 사용할 수도 있고 Font Asesome 사이트에 나와 있는 가이드에 따라 사용할 수도 있습니다.
<link rel="stylesheet" href="경로...">Font 설정
직접 만들어 사용할 수 있지만 Web Font를 사용하는 방법도 좋은 방법입니다.
- 보통 google font를 많이 사용합니다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googlea..." rel="stylesheet">개발자에 의한 CSS 설정
마지막으로 개발자에 의한 스타일을 설정합니다.
<link rel="stylesheet" href="css/style.css">
둡둡