[HTML & CSS] HTML 기본 구조와 구성 요소

728x90

1. HTML5란?

웹 페이지를 기술하기 위한 마크업(markup)언어

태그를 이용해서 문서의 구조를 표현합니다.

HTML은 태그로 이루어진 요소(element)로 구성됩니다.

- 태그는 대소문자를 구분하지 않습니다.

2. 구성 요소

HTML은 태그를 통해 문서를 표현한다고 했습니다. 태그들에 대해 알아보겠습니다.

2-1. 요소(element)

- 시작태그와 종료태그로 이루어진 문서의 구성 요소

2-2. 속성(attribute)

- 속성은 요소에 대한 추가적인 정보를 제공합니다.

속성은 항상 시작 태그에 이름="값" 형태로 기술됩니다.

3. HTML의 기본 구조

- 브라우저는 <!DOCTYPE>을 이용해 HTML 문서로 인식합니다.

- <html>로 시작해서 </html>로 끝이 납니다.

- HTML문서는 <head> 와 <body> 요소로 구성됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Sample title </title>
</head>
<body>
	<!-- contents of this page -->
	
	
</body>
</html>

가장 큰 태그에 <html> 태그가 있고 그 안에 <head>태그 먼저 그리고 <body>태그가 따라옵니다.

<head>태그 안에 <title> 태그를 사용하여 문서의 제목을 설정할 수 있습니다.

하나하나 분석해보겠습니다.

<!DOCTYPE HTML> : HTML5를 사용함을 브라우저에 선언하는 역할을 합니다.

<html> : 전체 html 문서를 감싸주는 역할을 합니다.

<head> : html문서에 대한 정보를 나타내는 태그입니다. <html>아래에 있어야 하고 하나만 존재해야 합니다.

<title> : <head>안에 들어가는 태그로써 제목표시줄의 기능을 담당합니다.

<meta> : <head>안에 들어가는 태그로써 문서에 대한 설명을 표시합니다. 주석처럼 소스로만 존재하고 브라우저에서는 보여지지 않습니다. 속성으로 charset="UTF-8"한것은 브라우저에게 한글 인코딩을 UTF-8로 설정하라고 지시함으로써 한글이 깨지지 않도록 합니다.

<body> : 문서에서 실제로 화면에 보이는 부분을 담당합니다. 하나만 존재해야 하고 <html>아래, <head> 다음에 존재해야 합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 나의 웹페이지 </title>
</head>
<body>
	<!-- contents of this page -->
	<p> Hello HTML! </p>
</body>
</html>