HTML 개념과 구조 파악
크롤링을 할 때 마다 가장 불편했던 부분은 Html 에 대한 개념이 부족할 때 구조 파악이 잘 안되는 부분들이었다.
그리하여, 이번에는 Html이 정확이 무엇인지? 그리고 어떤 구조로 구성되어 있는지 한번 알아보고자 한다.
[ HTML 이란? ]
하이퍼 텍스트 마크업(Hyper Text Markup Language, HTML)란?
웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하여 대화형 양식을 생성하는 데 사용될 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다.
- 위키 백과 -
[ HTML 구조 ]
Html은 크게 3가지로 구성되어 있다.
1. <html>
2. <head>
3. <body>
우리가 웹페이지에서 보여지는 대부분의 내용들은 <body>에서 보여지는 부분이다.
각각 구조에 대해 자세한 설명은 아래와 같다.
1. <html>
웹페이지에 보여지는 모든 요소들은 다 html에 있어야 한다. 이게 정확히 무슨 의미냐면 웹페이지를 구성하는 요소가 위에 말한 <html>,<head>,<body> 이렇게 3가지가 있는데 <head>와 <body>는 모두 <html> 안에 있어야한다.
먼저 이를 이해하려면 간단한 html 구조를 봐야 이해가 될 것이다.
<html>
<head>aa</head>
<body>bb</body>
</html>
위와 같은 형식으로 모든 웹페이지는 구성되어 있다. 이런 구조로 되어있기에 모든 html을 구성하는 요소들은 <html> 태그안에 존재해야 한다.
2. <head>
<head>은 대부분의 웹페이지의 설정값들이 존재하는 영역이다.
대표적으로 <meta>, <style>, <title> 등이 존재하는 부분이고 해당 페이지의 인코딩, 스타일, 콘텐츠 타입 등을 표시하는 곳이다.
3. <body>
<body> 는 웹 페이지를 표현하는 데 사용되는 영역이다. 즉 화면에 보여지는 부분이다.
이 영역 안에는 다양한 태그들을 넣을 수 있으며 배치할 수 있다. 그렇게 배치되는 것이 바로 웹 페이지가 구조화 되는 것이다.
이제 태그들의 세부적인 구조를 확인해보고자 한다.
보통 우리는 html 각 태그를 구성하고 있는 것들을 요소라고 부른다.
[ HTML의 요소(element) 구조 ]
대부분의 요소들은 <body>에서 보여진다.
요소들로 웹페이지에서 보여주고자 하는 것들을 만든다고 생각하면 편하다.
element는 태그(tag)와 내용(contents)로 구성되어 있다.
간단하게 예시를 들면 아래와 같다.
<p>Title</p>
-> <p> : 여는 태그
-> Title : 내용
-> </p> : 닫는 태그
요소들이 다 위와 같이 정직하게 생기진 않았다. 실제로 웹페이지 대부분은 아래와 같은 형태로 구성되어 있다.
<div class='name'>Kevin</div>
-> div : 태그명
-> class : 속성명
-> name : 속성
이렇게 HTML 에 개념과 구성 요소들을 알아보았다.