고정 헤더 영역
상세 컨텐츠
본문
Meta 태그란 Data에 관한 정보를 나타내는 태그이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-with , initial-scale=1,
minimum-scale=1 maximum-scale=1">
<meta name="description" content="Meta태그 연습하기!">
<meta name="keyword" cotnent="연습,퍼블리싱,Meta태그">
<style type="text/css"></style>
<title>Example 01</title>
<link rel="shortcut icon" href="파비콘 주소">
<!-- start StyleSheet-->
<link rel="stylesheet" media="screen" href="../templates/css/css.css">
<!-- end StyleSheet-->
<!-- start Javascript-->
<script type="text/javascript" src="../templates/js/javascript.js"></script>
<!-- end Javascript-->
</head>
<body>
<!-- contaier -->
<div>
<!-- content-->
<div></div>
<!-- aside -->
<div></div>
<!-- commit footer -->
<div></div>
</div>
</body>
</html>
기본적으로 필자가 기본적으로 사용하는 tag에 대해서 적어보았다. 한번 하나하나씩 설명을 드리도록 해보겠다.
4 line 에 있는 charset 부터 보도록하자.
<meta charset="utf-8">
이문서에 대한 문자 인코딩에 대한 설정이다. 참고로
utf-8 은 유니코드를 위한 가변길이 문자 인코딩 방식중 하나로 흔히 euc-kr , utf-8 중에 사용하고있다.
하지만 되도록 utf-8을 쓸려고 노력하는중이다!
추가적으로 내용으로 < 으로 시작해서 처음 나오는 단어를 Tag 혹은 Element 라 하는데. meta로 예시를들면.
<meta charset="utf-8"> 중에 meta 라는 태그 혹은 Element 라 칭한다. 그리고 나서 시작되는 단어들 즉 여기선
charset 이란것은 속성(Property) 이라 뜻한다. 한번 풀어서 설명해보면.
meta 태그안에 charset 이란 속성을 부여하고. 그속성의 값은 utf-8로 설정한다 라는 뜻이다.
5 line 에있는 http-equiv 라는 속성에 대해서 알아보자.
<meta http:-equiv="X-UA-Compartible" content="IE-edge">
http-equiv 는 HTTP 해더의 이름값으로 가질수 있으며 이 속성 값으로 서버나 사용자 에이전트의 작동방식을
변경할수 있다..
어느정도 풀어말하자면. window exploer 8 이후에 호환성 보기 가 생기면서 자주쓰이는 속성인데
MS사에서 문서를 해석할때. X-UA-compartible 유무를 판단하여 문서모드가 결정된다는 뜻이다.
그 문서모드는 어떻게 바뀌냐? 바로 content 안에있는 IE-edge 로 바꾼다는 뜻이다.
다른 값도 있긴하지만.. IE-edge 만 사용하는것을 권장한다.
너무 상세한것을 적고는 싶으나. 이것만해도 나름 길어질거같아서. 여기까지만 이해하면 될거같다!
6,7,8 line에 있는 name 속성에 대해서 설명을 시작하겠다.
name 속성은 아마 meta태그 중에서 가장 많으쓰이며 속성값에 따라 다양한 설정을 하지않을까? 조심스럽게 말해본다.
라인별로 name 속성을 썻지만 각각 다른 속성값을 사용했기에 하나하나 설명해보겠다.
6 line 에있는 viewport 이다.
아마 퍼블리싱을 해본사람들은 모바일 시대가오면서 많이 사용했을거라 생각이든다.
사이트가 랜더링시 출력되는 화면의 사이즈를 유동적으로 조절해준다는 뜻 이다!
viewport 에 있는 속성값은.
width , initial-scale, minimum-scale , maximum-scale 등이 있으며 하나하나 설명해보자면.
width=width-device : 페이지 넓이를 기기에 맞춰서 설정합니다
initial-scale=1 : 페이지 로딩후 확대와 축소값을 설정할수있습니다 0~10 까지 설정할수있으며 1이 기본값입니다.
minimum-scale=1 : 최소로 줄일수있는 크기를 뜻합니다. 0~10값 까지 설정이가능합니다.
maximum-scale=1 : 최대롤 줄일수있는 크기를 뜻합니다.0~10값 까지 설정이가능합니다.
7,8 line 은 묶어서 같이 설명해야 할 것 같다.
다들 SEO 우리말로 검색엔진최적화 라는 말을 들어보았는가...?
description 은 사이트의 설명을 적는 공간이다 예를들면 네이버나 구글에 검색해보면 설명글 나오지않는가? 그 내용을 적어주는. 속성이라 생각하면된다..
keyword는 마찬가지로 검색단어를 설정해주는 공간이다. 여러개를 넣고싶을시 , 를 사용하여 여러개를 넣어보자!
아무것도 모르고 쓰는것보다 알고쓰는게 좀더 좋을거같아서. 나를위해서 혹은 필자처럼 봍붙유저들은 한번씩 꼭 봐줬으면 좋겠다.
참고로 틀린것이나 잘못된 정보가있으면 댓글 부탁드립니다!
추가 정보
댓글 영역