meta 태그에 대해 포스팅해보겠다.
원래 목적은 납치태그만 다루는것이였지만 이왕이면 홈페이지 제작에 도움되는 정보라 다 하기로 했다.
납치태그, 많이 들어봤을것이다.
그럼 meta태그, 많이 들어봤나?
<meta>태그는 HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있다.
이런 식으로 사용하는 <meta>태그는 문서의 헤더부분(<head>와</head> 사이)에 위치하여야 한다.
<meta>태그에서 가장 일반적으로 사용되는 속성은 name, content 속성이다.
참 혹시 이런태그들 본적 있는가?
<meta name="subject" content="한솔닷컴 메타태그 강좌">
<meta name="title" content="메타 태그강좌">
<meta name="author" content="한솔">
<meta name="keywords" content="한솔닷컴, 일상, 마인크래프트, 프로그래밍">
블로그좀 했다는 사람들은 봤을거다 분명
아마 이게 사람들 사이에는 " 투데이 올려주는 태그 " 라고 불리는데
검색엔진에게 문서의 내용을 요약해 주는 역할을 담당한다고 할 수 있다.
검색엔진에게 문서를 쉽게 찾을 수 있게 해주니깐 당연히 투데이 올려주는 태그 로 통할수 밖에 없는것이다. ㅋ
name 속성값으로는 subject, title, author, keywords 등이 있다.
여기서 잠깐. name 속성값으로 키워드(keywords)를 지정하고, content에 " 한솔닷컴, 일상, 마인크래프트, 프로그래밍 " 이라고 지정했으니 검색엔진에서 한솔닷컴이라고 입력하면 이 페이지가 상단에 나올것인가?
정답은 별로 그렇지 못하다 검색엔진은 이 태그를 참고는 하지만
이를 상업적으로 활용하는 홈페이지가 너무 많기 때문에 요즘은 왠만하면 보지 않는다는 문제다.
또한 <meta>태그는 위와같이 검색엔진에게 정보를 전달할 뿐 아니라 웹 브라우저에게도 정보를 전달하는 역할을 한다.
따라서 이걸 이용해서 납치태그가 존재하는 것이기도 하다.
웹 브라우저에게 정보를 전달하는 대표적인 경우는 아래와 같이 2가지를 생각할 수 있다.
예를들어 한글로 작성된 홈페이지라는것을 웹 브라우저에게 알리기 위해서는 아래와 같이 <meta>태그를 지정해 주는 경우
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
그리고 이 글의 목적, 납치태그
<meta http-equiv="refresh" content="5;url=http://sunrint.hs.kr/">
홈페이지의 주소가 바뀌었을 경우에 사용하는 태그로 5초뒤에 url 속성값으로 지정한 페이지로 이동한다는 의미다.
여기서 중요한건 이렇게 이동하는 것은 하이퍼링크( a태그 )를 눌러서 이동하는거와는 다른 의미를 갖는다는 것이다.
하이퍼링크를 누른다는것은 한 페이지를 읽고 있다가 다른 페이지로 이동한다는 의미이지만, <meta> 태그를 이용한 페이지 이동은 http-equiv 속성값을 지정된것과 같이 refresh 한다는 의미다.
즉, 위와 같은 <meta>태그가 입력된 페이지는 읽지 않은걸로 인식하겠다는 의미다.
충격인가? 간단하게 말해 이 태그를 입력한곳은 방문처리를 안해준다는것이다.
사실 내가 meta로 안하고 javascript를 쓴 이유가 이것이기도 하다
이 태그를 잘 이용하면 자동 카페 탈퇴라던지의 유머러스한 상황을 만들 수 있다. ㅋ
납치태그의 예를 들어보자면
다들 경험이 있을거다, 분명 다른제목을 검색하여 들어갔으나 p2p사이트가 뜨는 그런 사이트들
그게 바로 납치태그다. ( 예가 좀 부실한가 ? )
바로 설명 들어가는게 좋겠다.
사용의 예) <meta http-equiv="refresh" content="0;url=http://hsol.tistory.com">
이런식으로 사용하게 되는데. 옵션이 여러가지 있지만 납치태그에선 대표로 두 옵션을 쓴다.
(-) http-equiv
일단 http-equiv는 meta태그의 사용 목적 이라고 보면 되겠다.
제대로 설명하자면 http-quiv는 웹 브라우저에 정보를 전달해준다.
납치태그에선 refresh, 새로고침 옵션을 쓴다.
팝업은 불가능하다고 알고있다. ( 혹시 가능하면 댓글로 좀 알려주길 )
(-) content
여기는 meta태그의 가장 중요한 " 내용 " 부분이다.
예문에서는 0;url=http://hsol.tistory.com 이라고 되있다.
0 은 0초 후 이동, url 이하는 목적지다.
0초 후 hsol.tistory.com 으로 이동한다는 것이다.
자 이제 실습이다.
자신의 블로그 혹은 자신의 홈페이지에 적용 해본다 ! 실시 ~
'it > programming' 카테고리의 다른 글
프로그래밍 숙제 (0) | 2012.04.22 |
---|---|
C++ 문장을 입력받아 어절의 갯수 출력하기( 단어 개수 세는 프로그램 ) (1) | 2012.04.21 |
C++ stack 자료구조 구현 (0) | 2012.04.20 |