웹개발/HTML

[독학 HTML] HTML의 구조 이해하기 |DOCTYPE, html, head, body

chaewon11 2023. 3. 18. 02:38

오늘의 목표는 HTML의 기본구조를 이해하기

<목차>
1. !DOCTYPE html
2. <html> </html>
3. <head></head>
4. <body></body>

기본적인 HTML의 구조를 이해하기 위해서, 네이버의 HTML 코드를 캡처해 왔다.

아래 코드를 보면, <!DOCTYPE html>, <html>, <head>, <body>가 보이는데 이게 바로 기본적인 HTML의 구조라고 볼 수 있다.

1. <!DOCTYPE html>

<!DOCTYPE html>은 Document type declaration의 약자로 현재 문서가 HTML5 문서임을 선언한다.

html문서 작성 시 가장 먼저 입력해야 한다.

DOCTYPE 선언은 작성한 HTML코드가 어떤 버전으로 작성됐는지 브라우저에게 알려줌으로써 브라우저가 HTML 코드를 잘 출력할 수 있도록 도와주는 역할을 한다.

HTML의 버전에 따라 DOCTYPE 선언 방법은 다르지만, HTML5의 경우 간단하게 <!DOCTYPE html>를 선언하면 된다.

<!DOCTYPE html>

여는 태그와 닫는 태그로 짝지어서 쓰는 <head>, <body> 태그와 다르게 닫는 태그가 필요치 않다.

2. <html> </html>

<html> 태그는 웹 문서가 시작됨을 알리고, </html> 태그는 웹 문서의 끝을 의미한다.

<html> </html> 사이에 웹 문서 코드를 작성해야 한다.

<!DOCTYPE html>
<html>
 .
 .
 .
 웹 문서 소스 입력
 .
 .
 .
</html>

3. <head> </head>

<html> 태그를 입력하면, 기본적으로 <head>와 <body> 태그를 입력하게 된다.

<head>에 입력된 소스들은 웹 브라우저 화면에 나타나지는 않지만, 웹 문서를 해석하는데 필요한 정보를 입력하는 공간이다.

문서를 설명해 주는 문서의 내용 자체는 아니지만, 문서 제목, 저자, 문서를 저장한 문자의 방법 등을 설명해 주는 정보들을 담는 공간이다.

주로 <meta>, <title> 태그가 사용된다.

아래 코드에서 <meta charset ="UTF-8">은 화면에 글자를 표시할 때 UTF-8이라는 인코딩을 사용하겠다고 지정하는 코드다.

한글을 표시할 때에는 UTF-8이라는 문자 세트를 사용한다고 알려주는 게 꼭 필요하다.

영어가 기본언어이기 때문에 이를 생략하면 글자가 깨져서 안 보일 수 있기 때문이다.

<title>은 우리가 웹브라우저를 켰을 때 상단 탭의 제목 표시줄에 보이는 title을 의미한다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset = "UTF-8">
  <title> html 독학으로 공부하기 </title>
 </head>


</html>

html 독학으로 공부하기

4. <body></body>

<body> 태그는 실제로 웹 브라우저를 실행했을 때 화면에 보이는 내용을 담는다. 이미지, 표, 아이콘, 버튼, 글 등등 눈에 보이는 모든 요소가 <body> 태그에 해당하게 된다.

아래 코드와 같이 <body> 태그에 글을 입력하면, 실제 보이는 화면에 그대로 출력이 된다.

<h1>은 제목태그로, <h1>부터 <h6>까지 제목을 구분할 수 있다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset = "UTF-8">
  <title> html 독학으로 공부하기 </title>
 </head>
 <body>
  <h1> HTML, CSS, Javascript </h1>
  <h2> HTML, CSS, Javascript </h2>
  <h3> HTML, CSS, Javascript </h3>
  <h4> HTML, CSS, Javascript </h4>
  <h5> HTML, CSS, Javascript </h5>
  <h6> HTML, CSS, Javascript </h6>
 </body>

</html>

html 독학으로 공부하기

HTML, CSS, Javascript

줄글을 입력할 경우에는 아래와 같이 나타나게 된다.

하지만 Html 코드는 엔터로 줄 바꿈을 아무리 해도 이를 인식하지 않으므로 <br>태그를 추가하거나, <p>태그로 묶어서 단락으로 표현할 수 있다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset = "UTF-8">
  <title> html 독학으로 공부하기 </title>
 </head>
 <body>
  1. 안녕하세요, 오늘은 HTML의 기본구조에 대해 알아보겠습니다.
  HTML은 head와 body 영역으로 구분되어 있습니다.
  
  <p>2. <p>태그 사용 / 안녕하세요, 오늘은 HTML의 기본구조에 대해 알아보겠습니다.
  HTML은 head와 body 영역으로 구분되어 있습니다.</p>
  
  <br>
  
  3.<br>태그 사용 / 안녕하세요, 오늘은 HTML의 기본구조에 대해 알아보겠습니다.
  <br>
  HTML은 head와 body 영역으로 구분되어 있습니다.
 </body>
 </html>

html 독학으로 공부하기 1. 안녕하세요, 오늘은 HTML의 기본구조에 대해 알아보겠습니다. HTML은 head와 body 영역으로 구분되어 있습니다.

2. p태그 사용 / 안녕하세요, 오늘은 HTML의 기본구조에 대해 알아보겠습니다. HTML은 head와 body 영역으로 구분되어 있습니다.

3. br 태그 사용 / 안녕하세요, 오늘은 HTML의 기본구조에 대해 알아보겠습니다.
HTML은 head와 body 영역으로 구분되어 있습니다.

출처 : 생활코딩 유튜브 | https://youtu.be/OGFgdro160I

Do it! HTML+CSS+자바스크립트 웹 표준의 정석

저작자표시 비영리 변경금지 (새창열림)

현재글[독학 HTML] HTML의 구조 이해하기 |DOCTYPE, html, head, body