HTML5 시대에 맞게 홈페이지 코딩하기 포스트에서 이어지는 포스트입니다.
이 포스트에서는 HTML5 문서의 head 태그 안에 들어갈 내용에 대한 설명입니다.
head 태그는 body와 함께 HTML 태그의 차상위 태그로(최상위는 html) body가 문서의 내용을 서술하는 부분이라면 head는 문서의 속성을 지정하는 부분입니다. 다음 코드를 봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<style type="text/css"> element {style: value;} </style>
<script type="text/javascript" src="script.js"></script>
<title>페이지 제목</title>
<meta name="description" content="페이지 설명" />
<link rel="canonical" href="http://www.example.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="페이지 제목" />
<meta property="og:description" content="페이지 설명" />
<meta property="og:image" content="example.jpg" />
<meta property="og:url" content="http://www.example.com" />
</head>
<body>
내용이 들어갈 곳
</body>
</html>
head 태그 안에 문서 속성을 지정하기 위한 태그들을 넣은 예시입니다. 이 예시에서 html 태그의 속성값으로 lang=”ko” 이렇게 되어 있는데 문서의 언어가 한국어로 되어 있다는 의미입니다. 영어라면 “en”, 러시아어라면 “ru”, 중국어라면 “zh”, 일본어라면 “ja” 이런 식으로 지정하면 됩니다.
4번 줄부터 6번 줄까지는 문서를 최적화된 형태로 표시하기 위한 코드입니다.
- 4번 줄은 문서의 인코딩 문자 집합을 지정하는 메타 태그로 HTML5에서 추가되었습니다. 근래에는 이 예제와 같이 UTF-8로 정하는 것이 일반적입니다.
- 5번 줄은 뷰포트(viewport)의 속성을 지정하기 위한 코드로, 화면이 작은 모바일 기기에서 그 너비에 맞춰 표현하게 할 때 사용합니다. 모바일 전용이나 반응형 페이지를 만들 때 필수적입니다.
- 6번 줄은 인터넷 익스플로러 사용자가 페이지를 열람할 경우 항상 웹 표준에 맞는 최신 버전의 모드로 렌더링되도록 하기 위한 코드입니다.
8번 줄부터 11번 줄까지는 스타일시트와 스크립트를 불러오기 위한 코드입니다.
- 8번 줄은 외부 스타일시트(CSS) 파일을 불러와 문서에 적용시키기 위한 코드입니다. media 속성은 문서를 표현하기 위한 매체를 지정하는 것으로 일반적으로 all, screen, print 이 세 가지가 쓰입니다. all은 모든 매체에 적용, screen은 화면에 적용, print는 인쇄물에 적용합니다.
- 9번 줄은 파비콘(웹 페이지를 불러올 때 제목 표시줄에 나타나는 아이콘)을 지정하기 위한 코드입니다.
- 10번 줄은 HTML 문서 안에서 직접 CSS 속성을 지정하는 태그입니다. 가급적이면 8번 줄처럼 외부 CSS를 쓰는 것이 좋지만 필요하면 직접 이 방법을 사용할 수 있습니다.
- 11번 줄은 웹 페이지에서 실행될 스크립트를 불러오기 위한 태그입니다. 외부 스크립트 파일을 만들어 불러오는 방법과 직접 코드를 넣는 방법이 있습니다. type 속성값을 주지 않을 경우 자바스크립트(text/javascript)로 지정됩니다.
13번 줄부터 16번 줄까지는 페이지의 제목과 설명을 지정하는 태그입니다.
- 13번 줄은 페이지의 제목을 지정하는 태그입니다. 이 페이지 제목이라 함은 브라우저의 제목 표시줄에 나타나는 제목으로, 검색 엔진에서도 이 제목이 나타나게 됩니다.
- 14번 줄은 페이지의 설명을 간략하게 서술하는 태그입니다.
- 15번 줄은 페이지의 대표 URL을 지정하는 태그입니다.
17번 줄부터 21번 줄까지는 오픈그래프 정보를 지정하기 위한 태그입니다. 트위터나 페이스북 등 소셜 미디어에 페이지가 공유될 때 활용되는 간략한 정보입니다. 17번 줄부터 순서대로 페이지 유형, 제목, 설명, 대표 이미지, 대표 URL입니다.
그 외에도 필요할 경우 여러 가지 속성을 지정할 수 있습니다.