웹페이지의 구성하는 기본 태그

2023. 1. 26. 13:57

문서 형식 정의 tag

문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달

문서의 최상위에 위치해야 하며 대소문자를 구별하지 않음

문서별 기술 양식

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 tag

html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재

모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한

<!DOCTYPE>는 예외

html은 글로벌 어트리뷰트를 지원, 특히 lang 어트리뷰트를 사용하는 경우가 많음

<html lang="ko">

한국어를 주언어로 사용하는 경우

head tag

head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재

메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않음

head 요소에는 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없음

title tag

문서의 제목을 정의

정의된 제목은 브라우저의 탭에 표시

<head>
    <meta charset="utf-8">
    <title>문서 제목</title>
</head>

style tag

style 요소에는 HTML 문서를 위한 style 정보를 정의

<head>
  <meta charset="utf-8">
  <title>문서 제목</title>
  <style>
    body {
      background-color: green;
      color: white;
    }
  </style>
</head>

link tag

link 요소에는 외부 리소스와의 연계 정보를 정의, 주로 HTML과 외부 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>

href = style.css을 파일을 불러올것을 지시

rel = 불러오는 파일이 stylesheet임을 알려줌

script tag

script 요소에는 client-side JavaScript를 정의

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      document.addEventListener('click', function () {
        alert('Clicked!');
      });
    </script>
  </head>
  <body>
    test
  </body>
</html>

src 어트리뷰트를 사용하면 외부 JavaScript 파일을 로드할 수 있음

1. 절대 주소(absolute URL)
ex) src=“http://www.tcpschool.com/sample.js”

2. 상대 주소(relative URL)
ex) src=“/scripts/sample.js”

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>practice</title>

    </head>
    <body>

        <button onclick="btn_alert('test')"> 완료! </button>

        <script type="text/javascript" src="main.js"></script>

    </body>
</html>

src 어트리뷰트 사용 test.html파일에서 main.js 파일 불러오기

meta tag

meta 요소는 description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용

charset 어트리뷰트는 브라우저가 사용할 문자셋을 정의

밑에 예시

<!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>

Keywords

SEO(검색엔진 최적화)를 위해 검색엔진이 사용할 keywords을 정의

현재는 있어도 없어도 어떠한 문제도 발생하지 않는다고 한다.(

밑에 예시

<meta name="keywords" content="키워드1, 키워드2, 키워드3">

Description

웹페이지의 설명을 정의

밑에 예시

<meta name="description" content="웹페이지 설명">

author

웹페이지의 저자을 명기

<meta name="author" content="cojun">

refresh

웹페이지를 30초 마다 Refresh

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

body tag

body tag는 HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재

메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 body 요소 내에 기술

저작자표시

'HTML' 카테고리의 다른 글

목록(List)와 표(Table) 형식 표현을 위한 태그 (0)	2023.01.27
Hyperlink (0)	2023.01.27
텍스트 관련 태그 (0)	2023.01.26
HTML5 기본 문법 (0)	2023.01.25
HTML5 시맨틱 태그 (0)	2023.01.19

CO_JUN 개발일지