안녕하세요 하루린입니다. 오늘은 초보3편 head 태그에 관해 좀 알아보죠. 사실 저도 이 head 태그안에 들어가는 냉요은 아직까지는 잘 감이 오지 않지만 그래도 아주 조금은 이해가 가기게 이렇게 적어 올립니다. 적다가 보면 뭐가가 알수 있겠다 싶어서요.
|
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="alternate" type="application/rss+xml" title="[샵샵_title_샵샵]" href="[샵샵_rss_url_샵샵]" /> <link rel="stylesheet" media="screen" type="text/css" href="./style.css" /> <link rel="stylesheet" media="print" type="text/css" href="./images/print.css" /> <link rel="shortcut icon" href="[샵샵_blog_link_샵샵]favicon.ico" /> <title>[샵샵_title_샵샵] :: [샵샵_page_title_샵샵]</title>
</head> |
이거 뭐라고 하는 건지 모르겠다 솔직하게 이런.....
하나씩 보도록하자.
1. meta 태그
|
|
meta 태그는 일반적인 이 홈페이지나 웹사이트의 정보를 나타내고 있다. 그래서 잘 보이질 않아서 사람들에게 익숙하지 않는다. 이것은 head 태그안에 위치하고 있고 주로 웹서버 정보, html 문서의 저자, 만기일, 키워드목록등과 같은 문서의 속성이나, refresh등의 명령어등이 포함되어 있습니다 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />을 살펴보기 전에 먼저 meta 태그안에 들어가는 속성을 먼저 알아보자 |
|
이 태그안에는 주로 name과 content 태그를 주로 사용하는데 name 속성은 meta정보의 이름을 지정하고, content속성은 meta정보의 값을 지정합니다. 아래의 보기처럼 참고 바랍니다.
|
|
<meta name="정보의 이름" content="응답 헤더에 할당된 값"> <meta name="subject" content="하루린의 문서" /> <meta name="description" content="하루린의 문서의 요약" /> <meta name="author" content="하루린" /> <meta name="copyright" content="저작권 정보" /> |
|
http-equiv 속성 뒤에 오는 refresh 옵션은 웹서버에게 특정한 시간이 지나면 자동적으로 다른 웹페이지로 이동 하거나,
멀티미디어 파일을 재생시키도록 명령을 내리는 옵션이고, content 속성에 초에 해당하는 시간을 넣어주면 그 만큼의 시간이 흐른 다음 정해진 URL을 실행한다. 그리고 웹서핑중 흔히 접할 수 있는 자동으로 다른 곳으로 이동하는 것에서도 이 태그를 사용한다.
|
|
<meta http-equiv="refresh" content="값;URL=html 문서 또는 file의 URL"> <meta http-equiv="refresh" content="10;URL=하루린.html"> |
|
자 그럼 위의 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />는 어떤 뜻이냐 하면 먼저 http-equiv의 의미는 웹브라우즈에 정보를 전달 한다는 의미이고 웹페이지 작성시에 사용한 문자가 깨지지 않고 인코딩되도록 하려고 문자 코드 세트를 지정해야 하는데 이때 다국어 인코딩인 경우 utf-8을 지정할 수 있으며 한글은 euc-kr을 지정합니다. 또한 문자 코드 세트를 지정할 때 마임 타입도 함께 지정할 수 있습니다. XHTML 문서에 지정하는 마임 타입은 application/xhtml+xml이 일반적입니다. 그러나 HTML 하위 호환성을 고려하여 HTML에서 사용하는 text/html을 사용합니다(사실 나도 이것이 무슨 말인지 모르겠다. 정말로 솔직하게 반만 알아먹음)
간단하게 말하서 위의 태그는 한글이나 아니면 euc-kr을 사용하고 다국어일경우는 utf-8을 사용하라는 의미이걸로 판단하겠다.
2. link 태그
|
|
<link rel="alternate" type="application/rss+xml" title="[샵샵_title_샵샵]" href="[샵샵_rss_url_샵샵]" /> <link rel="stylesheet" media="screen" type="text/css" href="./style.css" /> <link rel="stylesheet" media="print" type="text/css" href="./images/print.css" /> <link rel="shortcut icon" href="[샵샵_blog_link_샵샵]favicon.ico" /> rel 속성은 연결문서와 현재문서와의 관계를 나타내고 href는 연결할곳의 주소를 나타내고 type는 현 연결문서의 웹에서의 내용 유형을, 그리고 media는 연결문서의 미디어 유형을 나타낸다. |
|
그럼 그 안에 들어있는 속성을 하나씩 볼가요.
|
rel 속성 alternate는 문서의 프린터나 번역사이트로 연결할때 사용한다.
stylesheet는 스타일시트로 연결할때 사용하고
href은 그냥 연결하는 주소로 보시면 되고
type 속성
css일 경우 text/css, ja는 text/javascript, xml은 application/xtml로 표현해 준다. media 속성
스크린, 프린트, 프로젝터, tv 식으로 표현하면 screen, print, projection,tv,all 이런식으로 표현이 가능하다. 또 다른 속성이 많으니깐 다른 웹페이지를 참조해보는것도 좋을것이다. |
|
title 태그는 웹문서의 제목를 표시하거나 아니면 탭표시줄에 웹문서의 제목을 적을때 사용한다.
간단하게 만든 html을 실행시켜보면 알수 있으니깐 아래의 그림을 보면 짐작이 가리라 믿겠다.
위의 작성한 것 처럼 meta를 한글로 표기한다는 것이고 다음은 웹상의 탭표시줄을 "하루린의 멋진 세상"이라고 만든것이다. 그리고 아래는 body에 "하루린의 멋진 세상의 방입니다"라는 글을 입력하라는 것이고 이렇게 해서 아래의 그림이 완성된 것이다.
이렇게 head에 관련되 태그를 살펴보았다. 그러나 아 나 잘 모르겠다. 얼마나 더 공부를 해야지 알수 있는지 모르겠다. 그리고 하나다 head앞에 적는 문구로써 <!doctype html>은 웹문서 형식을 html로 하겠다는 뜻이다. 다음에는 body 안에 들어가는 태그를 살펴보도록 하고 가능하다면 다른 웹페이지를 만들어가면서 해보도록 하겠다.
'IT > IT,인터넷' 카테고리의 다른 글
| 아이리버 플러스 3(Iriver Plus 3)를 다운 받다. (0) | 2014.08.26 |
|---|---|
| 어도비 리더(Adobe Reader) 무료 다운(PDF 뷰)이건 뭐냐? (0) | 2014.08.24 |
| 진짜 초보가 무료호스팅신청,FTP프로그램 그리고 그누보드5 사용하기 (0) | 2014.08.22 |
| 티스토리의 Skin.html과 Style.css 초보2편 css란? (0) | 2014.06.13 |
| 티스토리의 Skin.html과 Style.css 초보1편 html이란? (0) | 2014.06.12 |
