HTML 문서의 구조

Jinny·2021년 10월 13일
2

HTML 기초

목록 보기
3/13

일반적으로 HTML문서는 다음과 같은 기본 구조를 가집니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>문서의 제목</title>
  </head>
  <body>
    웹페이지에 표시할 내용
  </body>
</html>

이제 이 기본 구조를 하나하나 알아보도록 하겠습니다!

!DOCTYPE html

<!DOCTYPE html>
  • 문서의 첫 부분에서 문서 유형을 지정하는 단일태그입니다.
  • DOCTYPE 선언은 HTML 문서에서 html 태그를 정의하기 전에 가장 먼저 선언되어야만 합니다.
  • 현재 표준으로 사용되고 있는 HTML 버전을 사용하기 위해 적어주는 타입이 바로 'html'입니다.

html 태그

<html> 
head, body등 기본태그가 들어갈수있습니다.
</html>
  • 문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그입니다!
  • 이 태그의 내부에 다양한 태그들이 포함되어 문서의 내용을 구성합니다!

head 태그

<head>

</head>
  • 웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 이 태그에 들어갑니다!
아래 코드는 <head></head> 안에 들어가는 내용입니다!

<meta charset="utf-8" />
  • 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그입니다.
  • 문자 인코딩이란?
    - 한글을 표시하기 위해 문자 세트를 지정하는 작업으로, 영문과 한글을 모두 사용하기 때문에 utf-8 방식을 사용하는 것이 좋습니다.
<title>제목이 들어갑니다!</title>
  • 문서의 제목을 나타냅니다! 콘텐츠는 브라우저 탭에 표시됩니다!

head태그 안에는 meta, title 외에도 많은 태그가 있습니다!

body태그

<body>
 이곳에는 많은 태그들이 들어갑니다!
</body>
  • 실제 브라우저 화면에 표시될 내용을 입력하는 태그입니다.
  • 여기에는 다음과 같은 유형의 태그들이 포함될 수 있습니다.
    • 텍스트를 표시하는 태그
    • 이미지를 표시하는 태그
    • 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태

내용정리

  • HTML 코드를 작성할 때는 기본 문서 구조를 마련한 다음 작성하기!
  • 들여쓰기를 통해 태가 간의 포함 관계를 나타낸다. 이는 가독성에 도움이 되지만 문법적으로 필수 사항은 아니다!
  • head태그 에는 문서의 정보가, body태그에는 표시할 내용이 포함된다.
  • 태그의 콘텐츠로 또 다른 태그가 포함될 수 있다!!
profile
프론트엔드 공부중입니다!

0개의 댓글