[Restart 프론트엔드 스터디] #4. 웹페이지를 구성하는 기본 태그(출처: poiemaweb)

Studying (Review)/HTML

[Restart 프론트엔드 스터디] #4. 웹페이지를 구성하는 기본 태그(출처: poiemaweb)

材硏 재연 2022. 8. 14. 12:11

728x90

문서 형식 정의 태그(Document Type Definition Tag)

출력할 웹 페이지의 형식을 브라우저에게 전달하는 태그
대소문자를 구별하지 않으며 html 버전 등에 따라 작성하는 방법이 다르다.

<!-- HTML5 -->
<!DOCTYPE html>

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

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

HTML 태그

모든 요소의 부모 요소이며, 웹 페이지에 단 하나만 존재할 수 있다.

따라서 모든 요소는 <html> 내부에서 기술되어야 한다. (<!DOCTYPE>은 예외)

또한 Global Attribute를 지원한다. 가장 많이 사용되는 것에는 lang 정도가 있다.

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

HEAD 태그

head 요소는 metadata를 포함하기 위한 요소로, 웹 페이지에 단 하나만 존재할 수 있다.

화면에 표시되지 않는 meta, title, style, link, script 등을 포함하고 있으며

이 외에 화면에 표시되는 요소에 대해서는 포함시킬 수 없다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
    <style>
      body {
        background-color: yellow;
        color: blue;
      }
    </style>
    <link rel="stylesheet" href="style.css">
    <script>
      document.addEventListener('click', function () {
        alert('Clicked!');
      });
    </script>
    <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>

title 태그
- 문서의 제목을 정의하는 태그, 정의된 제목은 브라우저 탭을 통해 표시된다
style 태그
- html 문서를 위한 style 정보를 정의한다(CSS 작성을 위한 태그)
link 태그
- 외부에서 참조할 리소스와의 연계 정보를 정의한다
  주로 css 파일 등이 이에 속한다.
script 태그
- 화면 상의 동작 등에 대한 내용을 JavaScript를 통해 정의한다.
  src 속성을 사용해 외부 JavaScript 파일을 로드하는 것도 가능하다
meta 태그
- metadata 정의에 사용되는 태그로서,
  브라우저와 검색엔진 등에게 정보를 전달한다
- charset 속성을 이용하여 브라우저가 사용할 문자 셋을 정의할 수 있고,
- 이 외에 name 속성과 content 속성을 사용하여
  다양한 metadata를 정의 할 수 있다 (자세한 내용은 - 여기 참조)

HTML <meta> 요소는 <base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.

developer.mozilla.org

표준 메타데이터 이름 - HTML: Hypertext Markup Language | MDN

developer.mozilla.org

BODY 태그

html 문서의 내용을 나타내며, 웹 페이지에 단 하나만 존재 할 수 있다.

<head>에 포함되는 metadata를 제외한 웹페이지 구성 요소 대부분이 <body> 내에서 작성된다.

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

저작자표시 비영리 변경금지