HTML 구조
https://www.w3schools.com/tags/ 를 참고
HTML로 작성할 때 기본적으로 들어가는 요소들이 있다.
한 가지씩 살펴보자면
<!DOCTYPE> 선언
기본적으로 HTML 파일은 <!DOCTYPE html>으로 시작해야 한다. 이것은 HTML 파일이다라는 것을 의미하며, 이것이 없어도 동작하긴하지만 기본적으로 권고사항이라고 생각하면 된다.
<html>
<html> 태그는 HTML 코드 부분을 의미한다.
모든 HTML 코드는 <html> 태그 안에 포함시키면 된다.
1
2
3
4
<!DOCTYPE html>
<html>
<!-- html 코드 -->
<\html>
<head> <body>
<head>는 웹 페이지의 metadata(데이터에 대한 데이터) 부분을 의미하고,
<body>는 그외 모든 내용을 포함하는 부분이라고 생각하면 된다.
<head>안에는 <title>, <\style>, <\meta> 등이 들어갈 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html> <!-- html 파일임을 명시 -->
<html> <!-- html 코드 부분 -->
<head> <!-- 웹 페이지의 metadata 부분 -->
<meta charset="UTF-8"> <!-- UTF-8 인코딩 방식을 사용한다는 의미-->
<title>웹 페이지 타이틀</title>
<style>
/* CSS 코드 */
</style>
<!-- 그외 metadata들 -->
</head>
<body>
<!-- contents 부분 -->
</body>
</html>
<div>
아무 웹페이지에 들어가 F12를 누르면 해당 웹페이지의 HTML코드를 볼 수 있는데 <div>라는 tag가 가장 많이 보이는 것을 알 수 있다.
<div>는 영역을 구분하는 용도로 사용되는데, 영역별로 구분해서 style을 지정해주기 위해 사용된다. <div>는 보통 class와 id 속성을 사용하여 style 지정을 한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h1>This is a heading in a div element</h1>
<p>This is some text in a div element.</p>
</div>
</body>
</html>
This is a heading in a div element
This is some text in a div element.
HTML 기본적인 구조
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html> <!-- html 파일임을 명시 -->
<html> <!-- html 코드 부분 -->
<head> <!-- 웹 페이지의 metadata 부분 -->
<meta charset="UTF-8"> <!-- UTF-8 인코딩 방식을 사용한다는 의미-->
<title>웹 페이지 타이틀</title>
<style>
/* CSS 코드 */
</style>
<!-- 그외 metadata들 -->
</head>
<body> <!-- contents 부분 -->
<div> <!-- <div>로 영역 구분(영역별로 style 지정) -->
<!-- ... -->
</div>
<!-- ... -->
</body>
</html>