반응형
html 파일의 순서를 보면 DOCTYPE, lang을 설정한 다음 meta 요소가 나오는데
meta 데이터는 html문서에 대한 정보를 나타낸다.
즉, html 파일에 정보를 부여하는 것.
페이지에는 표시되지 않지만 커뮤터 구문 분석이 가능하며
항상 <head> 태그 안에 위치해야한다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문자 코드 세트 지정</title>
</head>먼저 meta 태그의 charset 속성은 HTML 문서의 문자 인코딩을 지정한다.
값은 "UTF-8" , "ISO-8859-1", "EUC-KR" 이 있고 각각의 뜻은 아래와 같다.
- "UTF-8" : 유니 코드 문자 인코딩 <!--기본값-->
- "ISO-8859-1" : 라틴알파벳 문자 인코딩
- "EUC-KR" : 한글 문자 인코딩
<head>
<meta charset="UTF-8">
<meta name="author" content="gayouni">
<meta name="description" content="설명">
<meta name="generator" content="version 1.1">
<meta name="keywords" content="웹표준, 웹접근성, 웹호환성">
<meta name="subject" content="웹표준, 웹접근성, 웹호환성">
<meta name="robots" content="index, follow">
<meta name="copyright" content="copyright 2020 java2th">
<meta name="reply-to" content="ubrejk@naver.com">
<meta name="data" content="20200313">
<!--viewport = 반응형 웹브라우저에서 사용-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문자 정보 삽입하기</title>
</head>다음은 meta 태그의 name 속성이다.
name 속성은 메타 데이터의 이름을 지정한다.
그리고 content로 그 내용을 담는다.
| application - name author |
-페이지가 나타내는 웹 응용 프로그램의 이름을 지정. -문서 작성자의 이름을 지정 |
| date | 날짜(작성일) |
| description | 페이지의 설명을 지정. 검색 엔진은 이 설명을 선택하여 검색 결과와 함께 표시할 수 있음. |
| generator | 문서를 생성하는 데 사용되는 소프트웨어 패키지 중 하나를 지정. |
| keywords | 페이지와 관련된 쉼표로 구분된 키워드 목록을 지정 |
| viewport | 장치에 따라 다르며 컴퓨터 화면보다 휴대전화에서 더 작다. = 뷰포트(웹 페이지의 사용자가 볼 수 있는 영역)를 조정. |
| subject | 문서 제목 정보 |
| robots | 검색 로봇 제어 |
| copyright | 저작권 정보 |
| reply-to | 연락처(이메일) |
를 나타낸다.
이 중 검색 로봇 선언은 특히 중요한데, content 속성에 다음과 같은 값을 지정하면 자신이 원하는 대로
검색 로봇 수집대상에서 제외될 수도 포함될 수도 있다.
| ALL(기본값) | 'INDEX, FOLLOW'를 지정한 것과 같다. |
| NONE | 'NOINDEX, NOFOLLOW'를 지정한 것과 같다. |
| INDEX | 그 페이지를 수집 대상으로 한다.(검색 결과에 나타남) |
| FOLLOW | 그 페이지를 포함해 링크가 걸린 곳을 수집 대상으로 한다. |
| NOINDEX | 그 페이지를 수집대상에서 제외한다.(검색 결과에 나타나지 않음) |
| NOFOLLOW | 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 하지 않는다. |
(복수로 지정할 때에는 콤마로 구분한다)
반응형
'web > HTML&CSS' 카테고리의 다른 글
| html emmet(에멧) 문법 (0) | 2024.09.11 |
|---|---|
| [HTML/CSS]:hover로 transition 효과주기 (0) | 2020.04.01 |
| HTML 하이퍼링크 (0) | 2020.03.30 |
| HTML에 구글 웹 폰트/웹 아이콘 사용하기. (0) | 2020.03.27 |
| [CSS]transform(3D변형)효과 주기 (0) | 2020.03.27 |
댓글