웹페이지를 구성하는 기본 Tag

divedeepp·2022년 2월 9일

html5

HTML5

목록 보기

3/9

<!DOCTYPE html>

Document Type Definition(DTD) Tag는 출력할 웹페이지의 형식을 브라우저에게 전달한다. Document에 최상단에 위치해야하며 대소문자를 구분하지 않는다.

문서별 기술 양식은 다음과 같다.

HTML5

<!DOCTYPE html>

HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

html tag는 모든 HTML element의 부모 element이며 웹페이지에 단 하나만 존재한다. 즉, 모든 element는 html element 내부에 기술해야 한다.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
  </head>
  <body>
    화면에 표시할 모든 콘텐츠는 이곳에 기술한다.
  </body>
</html>

특히, html tag는 lang attribute를 사용하는 경우가 많다.

<html lang="ko">

<head>

head element는 메타데이터를 포함하기 위한 element이며, 웹 페이지에 단 하나만 존재한다. 메타데이터는 HTML document의 title, style, link, script 등에 대한 데이터로 화면에 직접 표시되지 않는다.

<title>

title element는 document의 제목을 정의한다. 정의된 제목은 브라우저의 탭에 표시된다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </body>
</html>

<style>

style element에는 document의 스타일 정보를 정의한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
    <style>
      body {
        background-color: yellow;
        color: blue;
      }
    </style>
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </body>
</html>

<link>

link element에는 외부 리소스와의 연관 관계 정보를 정의한다. 주로, 외부 CSS 파일을 연결하는데 사용된다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </body>
</html>

<script>

script element에는 기본적으로, client-side JavaScript를 정의한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      document.addEventListener('click', function () {
        alert('Clicked!');
      });
    </script>
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </body>
</html>

script tag에 src attribute를 사용해서 외부 JavaScript 파일을 로드할 수도 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="main.js"></script>
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </body>
</html>

<meta>

meta element는 description, keywords, author 등 메타데이터를 정의하는데 사용된다. 정의된 메타데이터는 브라우저나 검색엔진에 사용된다.

다양한 attribute들이 메타데이터로 정의된다.

charset attribute : 브라우저가 사용할 character set을 정의한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>안녕하세요</p>
    <p>Hello</p>
    <p>こんにちは</p>
    <p>你好</p>
    <p>שלום</p>
    <p>สวัสดี</p>
  </body>
</html>

name attribute : name attribute에 값 마다 정의되는 메타데이터가 다르다.
- keywords : SEO를 위해 검색엔진이 사용할 keywords를 정의한다.
```
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">```
```
- description : 웹페이지의 설명을 정의한다.
```
<meta name="description" content="Web tutorials on HTML and CSS">```
```
- author : 웹페이지의 저자를 명시한다.
```
<meta name="author" content="John Doe">```
```
http-equiv attribute : 웹페이지를 새로고침한다.

<meta http-equiv="refresh" content="30">

<body>

body tag는 HTML document의 내용을 나타내며 웹페이지에 단 하나만 존재한다.

메타데이터를 제외한 웹페이지를 구성하고, 화면에 표시되는 대부분의 element가 body element 내에 기술된다.

<html>
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
  </head>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </body>
</html>