이번 포스팅에서는, html의 태그중에서 <meta>태그에 대해서 알아보겠습니다.
● <meta>태그에 대한 설명
<meta>태그는, 작성된 html문서의 일종의 정보를 정의하는 것이라고 볼 수 있습니다. <meta>태그는 반드시, <head>태그 내부에 코딩이 되어져 있어야 합니다. 그래서, <meta>태그는 웹뷰어 화면에 보여지지 않습니다. <meta> 태그는 사이트설명, 키워드, 문서 작성자, 뷰포트 설정 등을 할 수 있습니다. 특히 키워드는 검색에 사용되는 주요 태그 요소입니다.
● charset
메타태그의 속성중 charset은 문자 인코딩 방식을 선언해 줍니다. meta charset은 웹뷰어가 웹페이지에 코딩되는 태그들의 내용들을 이해할 수 있도록 돕는 태그입니다. 표기 방법은 아래와 같습니다.
<meta charset="UTF-8">
● name
메타태그의 속성중 name은 name의 요소에 들어가는 제목에 따라서, content의 내용을 코딩할 수 있습니다. 예를들어서 name의 요소에 keywords를 넣으면, content에는 검색사이트에서 주요 키워드로 사용되는 단어들을 넣을 수 있습니다.
// description은 어떤 사이트인지 내용을 선언합니다.
<meta name="description" content="행운공장이 블로그를 하는 사이트">
// keywords는 검색사이트용 키워드를 기입할 수 있습니다.
<meta name="keywords" content="로또예상번호, html, 코딩">
// author는 사이트의 작성자를 기입합니다.
<meta name="author" content="행운공장">
// viewport는 기기의 사이즈에 따라 보여지는 사이트의 배율을 지정합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
● content
content는 name에서 선언된 요소의, 구체적인 내용을 담습니다. 아래 코딩을 보시면, content의 ""안에 name의 요소에 따라 내용들을 적은것을 확인 할 수 있습니다.
<meta name="description" content="행운공장이 블로그를 하는 사이트">
<meta name="keywords" content="로또예상번호, html, 코딩">
<meta name="author" content="행운공장">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
위에서 살펴본 내용들이 코딩된 사이트를, 웹뷰어로 확인해 보세요. 웹 화면에는 body태그 내부의 내용만 보여지기때문에, 다소 황당할 수 도 있습니다. 다양하게 많은 내용들을 담기 위해선 수없이 많은 태그와 스크립트들이 사용되어 집니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>html_meta_charset_name_content</title>
<meta charset="UTF-8">
<meta name="description" content="행운공장이 블로그를 하는 사이트">
<meta name="keywords" content="로또예상번호, html, 코딩">
<meta name="author" content="행운공장">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>오늘 포스팅 내용은 html_meta_charset_name_content 에 관한 내용입니다.</p>
</body>
</html>
html에 관한 지금까지의 블로그 포스팅 내용은 아래와 같습니다.
2020/07/29 - [코딩] - html_html에디터
2020/07/23 - [코딩] - html_head, title
2020/07/02 - [코딩] - html_html이란?
'코딩' 카테고리의 다른 글
| html_br_img_alt (0) | 2020.09.02 |
|---|---|
| html_h1_h6_p (0) | 2020.08.26 |
| 코딩_인공지능 사진 인식_닮은 동물 찾기 (0) | 2020.08.07 |
| html_html에디터 (0) | 2020.07.29 |
| html_head, title (0) | 2020.07.23 |
