html

HTML - 메타 태그 설정

2월 12, 2019
브라우저에 제공할 문서의 정보를 기술하는 태그이며 다음 표를 사용할 수 있습니다.

속 성 값 설 명
name application-name 해당 애플리케이션의 이름을 지정.
author 문서의 저자를 지정
generator 이 페이지를 만든 프로그램 이름
description 문서의 개요.
설명문은 검색엔진의 검색결과에 나타남.
keywords 문서 내용과 관련된 키워드를 지정.
키워드는 콤마(,)로 여러 개 입력할 수 있으며 검색엔진 키워드로 제공되어짐.
viewport 기기의 폭을 지정하는 속성.
Ex.) <meta name="viewport" content="width=device-width, initial-scale=1.0">
http-equiv content-Type 문서의 인코딩을 지정.
Ex.) <meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
content-Style-Type 문서의 사용언어
Ex.) <meta http-equiv="content-Style-Type" content="text/css" />
content-Script-Type Ex.) <meta http-equiv="content-Script-Type" content="text/javascript" />
default-style 기본 스타일 시트를 지정.
여러 개의 스타일시트가 있다면 어떤 스타일시트를 우선적으로 적용할 것인지를 지정.
refresh 해당 페이지를 새로고침하거나 다른 페이지로 이동시킴.
숫자만 입력하면 자기 자신의 페이지를 새로고침시키고, URL을 함께 입력하면 지정한 URL 로 이동시킴.
charset UTF-8 문서의 인코딩을 지정.
Ex.) <meta charset=”UTF-8”>

기본 형식은 다음과 같습니다.

<!doctype html>
<html>
  <head>
    <title>문서 제목을 넣는 곳입니다.</title>
    <meta name="author" content="habony">
    <meta name="keywords" content="php, study, 버드, html, css, 리눅스">
    <meta name="description" content="하보니 PHP - 웹언어를 배우는 곳입니다.">
  </head>
  <body>
    내용입니다.
  </body>
</html>


default-style 의 예

content 속성 값은 동일한 문서의 link 요소나 style요소에 있는 title 속성 값과 일치해야 우선 적용됩니다.

<!doctype html>
<html>
  <head>
    <title>문서 제목을 넣는 곳입니다.</title>

    <!-- 3개의 스타일시트 중 habony 스타일 시트를 사용 -->
    <meta http-equiv="default-style" content="habony">
    <link rel="stylesheet" href="style/habony.css" title="habony">
    <link ref="stylesheet" href="style/boot.css" title="boot">
    <style title="study">
      body {
        background: #111;
      }
    </style>
  </head>
  <body>
    내용입니다.
  </body>
</html>


refresh 의 예

이 값을 지정하면 다른 페이지로 자동으로 이동시킬 수 있으며, 숫자만 입력하면 자기 자신의 페이지를 새로고침합니다.

<!doctype html>
<html>
  <head>
    <title>문서 제목을 넣는 곳입니다.</title>

    <!-- 10(초) 후에 http://habonyphp.com 으로 페이지 이동합니다. -->
   <meta http-equiv="refresh" content="10; http://habonyphp.com">  
</head>
  <body>
    내용입니다.
  </body>
</html>

Tag:

0 Comments

0 댓글