Head
<head> 태그는 문서를 설명하는 태그들이 위치하는 태그다.
<body> 태그가 웹페이지가 담아내려는 정보 그 자체라면 head 태그는 body 태그의 정보를 설명하는 메타 정보라고 할 수 있다.
HTML 의 head 는 페이지를 열 때 웹 브라우저에 표시되지 않는다.
대신 문서 자체를 설명하는 메타데이터를 담는데, 담는 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있다.
주 목적은 기계 처리를 위한 정보이고, 사람이 읽을 목적의 정보는 아니다.
최상위 제목, 작성자 목록 등 사람에게 보여야 할 정보는 <header> 요소를 사용하도록 권장하고 있다.
head 에는 하나 이상의 메타데이터 콘텐츠를 포함할 수 있지만, 정확히 한 개의 <title> 요소를 포함해야 한다.
예시1)
<!doctype html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
</body>
</htmlHTML 5 호환 브라우저에서는 <head> 가 없는 경우 자동으로 생성한다.
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="생활코딩은 일반인에게 프로그래밍을 알려주는 온라인 수업" />
<meta name="keywords" content="생활코딩, HTML, HEAD, META" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
</html>description
그 문서에 대한 설명이 들어간다. 주로 검색엔진 같은 곳에서 description 에 있는 내용을 주요하게 다룬다.
keywords
description 이 설명적이라면, keywords 는 일종의 태그, 콤마로 구분해서 웹페이지에서 사용하는 주요한 단어들을 나열한다. 검색엔진에서 중요하게 사용된다.
http-equiv
Content-Type 이라고 하고, html 이라는 것을 좀더 정확하게 명시해주고, 캐릭터 셋(문자 코드)를 명시한다. 각각의 문자들은 내부적으로 표현하는 방식이 제각각이다. 명시해주지 않으면 깨지거나 알아볼 수 없는 등의 문제가 생긴다.
실제 사용
실제 head 에서 코드를 어떻게 작성하는지 보기 위해서, 네이버 메인페이지의 head 태그 코드를 확인해보자.
<head>
<script async type="text/javascript" src="https://ssl.pstatic.net/tveta/libs/ndpsdk/prod/ndp-core.js"></script>
<meta charset="utf-8">
<title>NAVER</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=1190">
<meta name="apple-mobile-web-app-title" content="NAVER">
<meta name="robots" content="index,nofollow">
<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<meta property="og:title" content="네이버">
<meta property="og:url" content="https://www.naver.com/">
<meta property="og:image" content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png">
<meta property="og:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="">
<meta name="twitter:url" content="https://www.naver.com/">
<meta name="twitter:image" content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png">
<meta name="twitter:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<link rel="stylesheet" href="https://pm.pstatic.net/dist/css/nmain.20220526.css">
<link rel="stylesheet" href="https://ssl.pstatic.net/sstatic/search/pc/css/sp_autocomplete_220526.css">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?1">
<link rel="apple-touch-icon" size="114x114" href="https://s.pstatic.net/static/www/u/2014/0328/mma_204243574.png">
<link rel="apple-touch-icon" href="https://s.pstatic.net/static/www/u/2014/0328/mma_20432863.png">
</head>스크립트 태그는 제외하고 어떤 <meta> 태그 속성을 사용했는지 알아보자
1. charset
<meta> 태그의 charset 속성은 HTML 문서의 인코딩 방식을 명시한다.
각각의 HTML 요소의 lang 속성을 사용하면, <meta> 요소의 charset 속성으로 명시한 문자 인코딩 방식을 재정의할 수 있다.
<meta charset="문자셋">
유니코드(Unicode)를 위한 문자셋인 UTF-8 이 가장 많이 사용된다.
<head>
<meta charset="UTF-8">
</head>
2. http-equiv="X-UA-compatible"
http-equiv 는 content 속성에 명시된 값에 대한 HTTP 헤더를 제공한다.
<meta http-equiv=”X-UA-Compatible" content=”IE-edge”> 는 IE 문서 모드이다. content=”IE=edge” 는 IE 브라우저에서, 각 버전중 가장 최신 표준 모드를 선택하는 문서 모드이다. 문서 유형 (document type) 선언과 함께 사용해야 유효하다. ( <!DOCTYPE html> )
IE11 에서 문서 모드를 앞으로 사용하지 않을 것으로 규정하고 있지만, 현재로서 IE11 은 edge mode 가 가장 추천하는 문서 모드이다. ( content=”IE=edge” )
<meta http-equiv="x-ua-compatible" content="IE=edge" >
3. viewport
뷰포트 메타 태그는 브라우저가 웹 페이지를 렌더링 할 때 동작하는 방법을 알려주고 뷰포트의 크기를 알 수 있다. 네이버에서는 width 를 설정해주었는데, 뷰포트에서 정의하는 너비는 브라우저에게 이 웹페이지가 해당하는 너비에서 가장 잘 보인다고 알려주는 것과 같다.
여기서는 웹페이지의 너비가 1190px 가 가장 적합한 크기라고 설정해주었기 때문에, 만약 더 작은 기기에서 해당 웹사이트를 보면 1190px 의 웹사이트를 현재 스크린 크기에 맞게 축소해서 보여준다.
300px 가량의 모바일 기기에서 보면 1/4 정도 사이즈로 축소되어 보이기때문에 가독성이 많이 떨어지지만, 모바일용 웹 페이지와 어플리케이션이 존재하므로, 굳이 PC 모드로 보기를 설정하지 않는다면 해당 사이즈로 볼일은 많이 없을 것이다.
일반적으론 사용중인 장치와 동일하게 뷰포트의 너비를 설정하여, 컨텐츠의 확대 축소가 일어나지 않도록 하고, 반응형으로 제작을 하는 경우가 많다.
<meta name="viewport" content="width=device-width">
4. robots
로봇 메타 태그를 사용하면 개별 페이지의 색인이 생성되는 방식과 Google 검색 결과에서 페이지가 사용자에게 게재되는 방식을 제어하는 자세한 페이지별 접근방식을 활용할 수 있다.
content="noindex" 라고 설정하면 Google 검색결과에 이 페이지가 표시되지 않는다.
content="nofollow" 는 이 페이지의 링크를 따라가지 않는다는 뜻이다. 메인페이지에 수많은 링크가 있으나 크롤러가 그 링크를 들어가면서 수집하지 않도록 하는 것이다.
속성별로 세부적으로는 따로 정리해서 작성하자.
'스터디 > 웹개발' 카테고리의 다른 글
| 나만의 홈페이지 만들기 - GitHub.io (0) | 2022.08.28 |
|---|---|
| HTML (2) - Meta 태그의 charset 이란? (0) | 2022.06.17 |
| 혼자 공부하는 자바스크립트 2주차! 03. 조건문 (0) | 2022.01.24 |
| 자바스크립트 시작하기: 오류와 표준 스타일 (0) | 2022.01.11 |
| 자바스크립트 시작하기 : 설치와 코드 실행 (0) | 2022.01.10 |
