본문 바로가기

HTML

[HTML] 웹 사이트의 정보를 나타내는 <META> 태그

반응형
-. 인터넷 중에서 자료를 찾을 때에 구글, 네이버 등의 검색엔진을 이용한다.
-. 대부분의 검색 엔진은 웹 사이트의 제목, <META> 태그의 내용, 본문의 첫 100여 단어등을 검색한 후 사용자의 검색어와 비교하여 검색결과를 나열
-. 웹 사이트의 키워드나 주제 등을 나타내는 <META> XORMSMS <HEAD>DHK </HEAD>태그 사이에 입력한다.

█ 웹 사이트의 정보를 나타내는 <META> 태그

 <HYML>
    <HEAD>
        <TITLE>메타 태그</TITLE>
            <META NAME="Generator" Content="Coda">
                <!-- 웹사이트를 제작할 때 어떤 툴을 사용했는지 표시 -->
            <META NAME="Author" Content="홍길동">
                <!-- 웹 사이트의 제작자를 표시 -->
            <META NAME="keywords" Content="HTML 첫걸음">
                <!-- 검색 엔진에서 검색할 웹 사이ㅡ의 키워드를 표시 -->
            <META NAME="Description" Content="웹 사이트 만들기 예제">
                <!-- 문자 세트를 표시 -->   
    </HEAD>
   
    <Body>
    Coda를 이용한 첫 번째 HTML 문서입니다.
    </BODY>
</HTML>


█ 웹 브라우저의 캐시 기능 무시하기

 <META> 태그의 속성중 CONTENT속성을 사용하면, 웹 브라우저에 캐시 기능이 설정되어 있다 하더라도 전에 저장된 웹 사이트가 나타나지 않고, 항상 최신의 웹 페이지를 가져올 수 있다.

 <META http-equiv="Pragma" CONTENT="No-Cache">


█ 시간을 설정하여 자동으로 페이지 이동하기

-. <META> 태그를 사용하면, 미리 설정해 놓은 시간이 지난 후 지정한 웹 사이트로 이동하도록 할 수 있다.
-. 대기시간은 초단위로 입력하고, URL에는 이동할 웹 사이트 주소나 웹 문서를 지정하면된다.

<META http-equiv="refresh" CONTENT="대기시간; URL=웹문서>


█ 장면 전환 효과 연출하기

-. <META> 태그의 CONTENT 속성을 이용하면, 하이퍼링크로 연결한 문서가 열릴 때에 독특한 장면 전환 효과를 연출 가능
-. 장면 전환 효과를 웹 문서를 불러올 때 지정하려면 'Page-Enter'를, 웹 문서에서 나갈 때 지정하려면 'Page-Exit'를 입력하면 된다.
-. 장면 전환의 속도는 초 단위로 입력하여 조절할 수 있다.
-. <META> 태그에서의 장면 전환 효과는 하이퍼링크를 통해 문서가 호출될 때만 확인할 수 있다.

<META http-equiv="refresh" content="RevealTrans(Duration=속도, Transition=번호)">


█ 장면 전환 효과 설정 번호

   효과설정 번호   |                                              효  과  설  명
------------------------------------------------------------------------------------------------------------------------
           0             |     문서 내용을 사각형 모양으로 바깥쪽에서부터 안쪽으로 보여 줍니다.
           1             |     문서 내용을 사격형 모양으로 안쪽에서부터 바깥쪽으로 보여 줍니다.
           2             |     문서 내용을 원형 모양으로 바깥쪽에서부터 안쪽으로 보여 줍니다.
           3             |     문서 내용을 원형 모양으로 안쪽에서부터 바깥쪽으로 보여 줍니다.
           4             |     문서내용을 아래쪽에서 위쪽으로 보여 줍니다.
           5             |     문서 내용을 위쪽에서 아래쪽으로 보여 줍니다.
           6             |     문서 내용을 왼쪽에서 오른쪽으로 보여 줍니다.
           7             |     문서 내용을 오른쪽에서 왼쪽으로 보여 줍니다.
           8             |     문서 내용을 왼쪽에서 오른쪽으로 부분적으로 끊어서 보여 줍니다.
           9             |     문서 내용을 위쪽에서 아래쪽으로 부분적으로 끊어서 보여 줍니다.
          10            |     문서 내용을 왼쪽에서 오른쪽으로 타일 모양으로 보여 줍니다.
          11            |     문서 내용을 위쪽에서 아래쪽으로 타일 모양으로 보엽 줍니다.
          12            |     문서 내용을 점을찍듯이 보여 줍니다.
          13            |     문서 내용을 좌우에서 가운데로 보여 줍니다.
          14            |     문서 내용을 가운데에서 좌우 쪽으로 보여 줍니다.
          15            |     문서 내용을 위아래에서 가운데로 보여 줍니다.
          16            |     문서 내용을 가운데에서 위아래로 보여 줍니다.
          17            |     문서 내용을 오른쪽 위에서 왼쪽 아래 방향으로 보여 줍니다.
          18            |     문서 내용을 오른쪽 아래에서 오른쪽 위 방향으로 보여 줍니다.
          19            |     문서 내용을 왼쪽 위에서 오른쪽 아래 방향으로 보여 줍니다.
          20            |     문서 내용을 왼쪽 아래에서 오른쪽 위 방향으로 보여 줍니다.
          21            |     문서 내용을 가로 방향으로 줄을 긋듯이 보여 줍니다.
          22            |     문서 내용을 세로 방향으로 줄을 긋듯이 보여 줍니다.
          23            |     모든 효과를 사용하여 문서 내용을 랜덤하게 보여 줍니다.


█ META 태그를 이용한 문서 이동 및 장면 전환 효과

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HYML>
    <HEAD>
        <TITLE>2-02.html</TITLE>
            <META NAME="Generator" CONTENT="Coda">
                <!-- 웹사이트를 제작할 때 어떤 툴을 사용했는지 표시 -->
            <META NAME="Author" CONTENT="">
                <!-- 웹 사이트의 제작자를 표시 -->
            <META NAME="keywords" CONTENT="">
                <!-- 검색 엔진에서 검색할 웹 사이ㅡ의 키워드를 표시 -->
            <META NAME="Description" CONTENT="">
                <!-- 웹 사이트의 주제를 표시 -->   
            <META HTTP-EQUIV="Refresh" CONTENT="10; URL=2-01.html">
                <!-- 해당 웹사이트는 10초 후 해당 URL로 이동 -->   
            <META HTTP-EQUIV="Page-Enter" CONTENT="REVEALtrans(Duration=3, Transition23)">
                <!-- 해당 웹 사이트가 호출될 때 3초동안 장면 전환 효과가 나타납니다. -->
    </HEAD>
   
    <Body>
    Coda를 이용한 두번째 문서입니다. <BR>
    META를 이용하여 홈페이지의 기본 정보와 효과를 제공합니다.
    </BODY>
</HTML>
반응형