데이터를 기반으로

HTML 개념과 구조 파악 본문

데이터 수집

HTML 개념과 구조 파악

이노후 2023. 7. 1. 00:06
728x90
반응형

크롤링을 할 때 마다 가장 불편했던 부분은 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 에 개념과 구성 요소들을 알아보았다.

728x90
반응형
저작자표시