Home 쉼터 ☏…………Tip & Tech

✔ 뷰어로 보기

2011.12.29 02:36

Tag

바람의종

조회 수 29,681 추천 수 12 댓글 0

단축키

Prev이전 문서

Next다음 문서

가 위로 아래로 인쇄 쓰기 목록 수정 삭제

단축키

Prev이전 문서

Next다음 문서

가 위로 아래로 인쇄 쓰기 목록 수정 삭제

☞ 머릿글 태그(Heading tags)

머릿글 태그는 이 앞장에서 보았던
<HEAD> 와 </HEAD> 태그 사이에 들어가는 태그들입니다.
이태그들은 다음의 종류 이외에도 몇가지가 더 있습니다. 머릿글 태그는
문서의 어느 일부분에만 적용되는것이 아니라 문서 전체에 영향을 주는 태그들입니다.

<TITLE>

<BASE>

<META>

<STYLE>

--------------------------------------------------------------------------------
☞ <META> - 문서의 요약과 특성을 지정합니다. △TOP△

<META> 태그는 여러가지로 쓰임새가 많은 태그입니다.
그만큼 사용방법도 다양하며 옵션도 많습니다.
이곳에서는 주로 사용되는 검색엔진 인덱스 하는법과 자동적으로 업데이트 하는
용법등에 대해서 알아보겠습니다.

메타 태그는 가장 기본적으로 삽입할 문서의 요약 부분이라고 생각하시면 됩니다.
메타 태그는 <HEAD> 와 </HEAD> 태그 사이에 위치하며 문서 전체에 대한
간단한 요약내용을 담고 있으며 브라우저 상에는 메세지가 나타나지 않습니다.

다만 검색엔진이 메타태그가 삽입된 페이지를 검색하는 경우 메타태그 내의 내용을
바탕으로 검색엔진에 등록하게 됩니다. 보통 검색엔진에 자신의 홈을 등록신청할때
메타 태그를 삽입하지 않고 놔두는 경우가 있는데 이렇게 되면 검색엔진에 등록신청을
한뒤 올바르게 검색되지 않을수 있습니다. 검색엔진에 등록신청을 할 경우 반드시
자신의 홈 메인 화면에 메타 태그를 삽입해서 홈페이지의 설명과 함께 키워드를
만들어 두어야 합니다. 그러면 검색엔진에서 해당 키워드를 검색했을때 나타나는
결과부분에 홈페이지 설명에 적은 메타태그 부분이 설명으로 나오게 됩니다.

☞☞ 문법
<META NAME="name" CONTENT="value">

META 태그는 크게 위 두가지 사용법이 있습니다.
name 이나 FieldName 그리고 value값은 사용하고자 하는 방법에 따라 바꿔 주시면 됩니다.

☞ NAME="name"에 들어갈수 있는 옵션.

NAME="Description" - 문서의 요약이 들어갑니다.

위의 경우 이 메타 태그가 들어간 페이지가 검색엔진에 등록이 되어 있는경우
CONTENT부분에 요약한 내용이 검색결과로 나타나게 됩니다.

NAME="Keywords" - 검색어를 입력하며 각 검색어는 ,(콤마)로 분리되야 합니다.

위처럼 키워드를 지정해 놓으면 검색엔진에 검색되어 등록이 된 경우
HTML, tags, reference, attributes, 태그강좌,의 검색어가 입력되면 결과창에
해당 페이지가 검색되게 됩니다. 똑같은 검색어로 등록된 홈페이지가 많을경우는
한참 뒤쪽에 나올수도 있습니다. 검색어의 선택을 잘하시는 것이 검색엔진을 통해
자신의 홈으로 방문자를 늘릴수 있는 길입니다.

NAME="Author" - 페이지 제작자를 적습니다. 저작권에 관한 부분이라고 생각하셔도 됩니다.

<NAME="Author" CONTENT="Ki Young,Kim">

☞ HTTP-EQUIV="FieldName"에 들어갈수 있는 옵션.

HTTP-EQUIV="Expires" - 문서의 유효기간을 지정합니다.

보안에 관계되는 문서 같은 경우 한번 보고 나면 문서가 파기되며
다시 보려고 하는경우 리로드해야만 보이는 웹문서를 보신 기억이 있을겁니다.
보통 멤버쉽으로 운영되는 웹사이트에서 개인 프로필을 본다음 다른 사이트로
갔다가 브라우저의 back버튼을 이용해서 프로필 화면으로 다시 와보면
파기된 문서라는(Expires) 메세지를 받게 되는데 이런경우가 해당됩니다.

위처럼 GMT를 사용해서 표준시각으로 파기될 날짜를 지정할수도 있습니다.

HTTP-EQUIV="Refresh" - 문서를 자동으로 업데이트 합니다.

웹페이지를 시시 때때로 업데이트 하시는 경우 위 태그를 지정해 놓으면 자동적으로
몇초간격으로 다시 리로드 됩니다. 주로 어떤 페이지에 들어갔을때 자동적으로 다른
페이지로 이동하게 만들때 많이 사용되는 부분입니다.

위의 메타 태그가 http://galaxy.channeli.net/jakalky/default.htm이라는 파일에
삽입되었을때 방문자가 http://galaxy.channeli.net/jakalky/default.htm에 접속하게
되면 페이지가 모두 로딩된 뒤에 자동적으로 http://galaxy.channeli.net/jakalky/sitemap.htm 으로
이동하게 됩니다.

HTTP-EQUIV="Content-Type" - 웹문서의 언어를 설정합니다.

간혹 어느 홈에서 글자가 깨지는 경우가 있습니다. 이런경우 대부분이 브라우저 상에서
언어 설정이 다르게 되어 있어서 생기는 문제가 많은데 위 메타 태그를 지정해놓으면
어느 브라우저이든 해당 페이지에 오면 언어설정을 위에 지정한 것으로 바꿔주기 때문에
글자가 브라우저 별로 깨지는 문제를 해결할수 있습니다.
한글이 깨지는 경우 문서의 언어 설정을 메타 태그로 하신 다음 브라우저에서도
Encoding 을 Korean으로 바꿔 주셔야 합니다.(넷스케이프의 경우)
익스플로러 역시 언어를 한국어로 맞추어 주어야 제대로 한글을 볼수 있습니다.

☞☞ 예제 1
<HTML>

<HEAD>
<TITLE>Heading Tags</TITLE>

</HEAD>

</BODY>
</HTML>

☞☞ 예제 2

1.htm파일의 내용

2.htm파일의 내용

3.htm파일의 내용

위의 예제처럼 1.htm, 2.htm, 3.htm파일이 있다면 1.htm 파일을 불러들였을때
자동적으로 15초 간격으로 2.htm, 3.htm 파일로 이동하게 되며 그다음엔 다시
1.htm파일로 이동하므로 계속 반복적으로 이동하게 됩니다.
이걸 잘 이용하면 아주 재미있는 홈을 만들수 있습니다.

META 택은 크게 두 가지로 사용됩니다.
하나는, 웹 검색엔진의 효율적인 인덱스를 위한 것이고, 다른 하나는 웹페이지의 자동 로딩을 위한 것입니다.

웹 검색엔진의 인덱스를 위한 META TAG 사용법

META 택은 HTML문서의 header에 위치하여 Alta Vista 나 Lycos와 같은 검색엔진이 그 문서를 효율적 으로 index 하도록 해줍니다. 효율적으로 인덱스 처리된 문서는 그 정보를 원하는 사람들이 쉽게 그 문서에 접근할 수가 있습니다. HETA택은 그 웹페이지를 브라우저로 볼 때는 나타나지 않고, 브라우저의 document source 메뉴로 그 문서 소스를 보면 나타납니다.

META택이 문서의 헤더부분에 삽입되면, 검색로봇은 그 META 택에 있는 정보를 보고 그 문서를 인덱스 하는 데에 사용합니다.

예를 들어 menu_pl.html 이란 저의 페이지는 웹문서의 풀다운 메뉴에 관한 페이지인데, 이것의 헤더 부분은 다음과 같습니다.

Alta Vista에서 이 웹페이지에 대한 검색 엔진의 결과는 다음과 같이 나타납니다.

Pull Down Menu 만들기
Pull Down Menu in HTML using CGI in Korean.
http://cgkim.cgiserver.net/cgijava/menu_pl.html

이 테스트를 위해 Alta Vista를 사용해 봅시다. "Pull Down Menu"라는 서치워드(search word)를 입력하면 다른 많은 웹페이지와 함께 위의 결과가 나타납니다. 검색단어를 "풀다운메뉴"로 입력하면 좀 더 줄여진 다른 웹페이지와 함께 나타나고, "풀다운메뉴만들기입니다"를 검색단어로 입력하면 이 페이지만이 검색 결과로 나타날 것입니다. 물론 Alta Vista에 이 홈페이지가 등록되어 있어야 합니다. 만약 위의 메타 택이 없이 등록된 페이지라면 그 페이지 상단에 나와있는 몇 줄의 설명이 그대로 검색 결과로 나타나 정확하지 못한 결과를 보여 줍니다.

웹페이지의 자동 로딩을 위한 META TAG 사용법

대형 ISP의 홈페이지를 방문하면 하나의 프레임에 광고를 띄우는데, 일정 시간이 지나면 다른 광고로 바뀌어 나타나고, 또 일정 시간 경과 후에 다른 광고로 대체되어 나타납니다. 또한 이 홈페이지의 상단 왼쪽에 보시는 바와 같이 회전하는 별이 있다가 조금 지나면 다른 모양의 별이 나타납니다. 이러한 것들이 모두 META TAG의 속성중 HTTP-EUIP 의 값을 "Refresh"로 하여 사용한 것입니다. META TAG은 브라우저(client)가 일정시간을 두고 웹서버에게 자료를 요청하여 받아오게 합니다.

다음의 예는 1초 경과할 때마다 example.html이란 웹 문서를 웹서버에게 요청하여 브라우저에 나타나게 합니다.

-------------example.html---------------------------------------------------------------
<META HTTP-EQUIV="refresh" CONTENT=1>
   <title>Auto Loading Test</title>
   <h1>Auto Loading Test!</h1>
   이것은 1초 간격으로 이 페이지를 불러오는 test 입니다. <p>
   단, 똑 같은 내용을 계속 불러오기 때문에 약간 깜빡거림 외에는 변화가 없습니다.
   그렇지만 1초 간격으로 계속 Reload하게 됩니다. <p>
-----------------------------------------------------------------------------------------

위의 예에서 처럼, HTTP-EQUIP 속성값을 refresh로 하면 CONTENT 속성에서 지정한 초 (여기서는 1) 간격으로 웹서버에게 해당 웹페이지를 보내 달라고 요청하여 브라우저에 로딩합니다.

다음의 예는 이 홈페이지의 상단 왼쪽 프레임에 있는 별모양의 그림이 번갈아 나타나는 것입니다. logo.html을 부르면 star1.jpg 가 화면에 나타나고 20초 후에 logo1.html이 로드되어 starroll.gif 가 나타나며 또 20초 후에 logo.html의 star1.jpg가 나오는 식으로 끓임없이 반복합니다.

   -------logo.html-------------------------------------------------------------------
   <BODY BGCOLOR=#0000FF>
   <META HTTP-EQUIV=REFRESH
CONTENT= "20; URL=http://www.kol.co.kr/~cgklyk/logo1.html">
<IMG SRC="/~cgklyk/gif/star1.jpg">
   </BODY>
   --------------------------------------------------------------------------------------

   -------logo1.html------------------------------------------------------------------
   <BODY BGCOLOR=#0000FF>
   <META HTTP-EQUIV=REFRESH
CONTENT="20; URL=http://www.kol.co.kr/~cgklyk/logo.html">
<IMG SRC="gif/starroll.gif">
   </BODY>
   --------------------------------------------------------------------------------------

위의 예에서 처럼 CONTENT 속성에 시간 간격 뿐만 아니라 URL을 써서, 지정된 시간에 다른 문서를 불러오게 합니다.

위와 같은 예를 응용하여 여러개의 html을 연결시켜 움직이는 그림을 만들 수도 있고(요즘에는 gifcon을 더욱 많이 쓰지만) 또 순서대로 연결하는 웹 문서를 사용자가 마우스로 크릭하지 않고 자동으로 지정한 시간이 지나면 연결하여 로딩하도록 할 수도 있습니다.

모두의원 적용 예 -------------------------------------------------------------------------------------------