lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

lesson18Title

automationIntroBasicsChapter3Title

automationIntroBasicsChapter1Title

automationIntroBasicsChapter2Title

automationIntroBasicsChapter4Title

# 웹 크롤링을 위한 HTML 필수 지식, 꼭 알아야 할 것들

웹 크롤링을 하려면 먼저 웹 페이지의 구조를 이해하는 것이 중요합니다.

이때 핵심적으로 알아야 할 것이 바로 **HTML**입니다.

웹 페이지의 '뼈대'라 할 수 있는 HTML에 대해 간단히 알아보겠습니다.

> 참고: <a href="https://www.codefriends.net/packages/web-intro-basic" target="_blank">웹 입문 + 나만의 웹사이트 만들기</a> 강의에서 HTML에 대한 더 자세한 내용을 확인해 보세요.

<br />

## HTML이란 무엇인가요?

HTML은 `HyperText Markup Language`의 약자로, 웹 페이지를 구성하는 데 사용되는 기본 언어입니다.

쉽게 말해, 웹 페이지의 **구조**와 **내용**을 정의하는 역할을 합니다.

웹 브라우저는 이 HTML을 해석해 우리가 보는 웹 페이지를 화면에 표시합니다.

예를 들어, 신문 기사를 웹으로 본다고 상상해 보세요.

제목, 본문, 이미지 등이 각각 다른 위치에 배치되어 있는데, 이 모든 것은 HTML 태그를 사용해 정의됩니다.

<br />

## 웹 크롤링을 위한 HTML 필수 지식

웹 크롤링을 할 때 가장 중요한 것은 원하는 데이터를 정확히 찾아내는 것입니다.

이를 위해 알아두어야 할 HTML의 핵심 요소들을 살펴보겠습니다.

<br />

### 1. 태그(Tag): 웹 페이지의 건축 자재

HTML은 **태그**로 이루어져 있습니다. 태그는 `<태그이름>` 형식으로 작성되며, 웹 페이지의 각 요소를 정의합니다.

예를 들어, 제목은 `<h1>`, 단락은 `<p>` 태그로 감싸서 표현합니다.

```html title="기본 HTML 태그 예시"
<h1>이것은 제목입니다</h1>
<p>이것은 단락입니다.</p>
```

크롤링 시에는 원하는 정보가 어떤 태그 안에 있는지를 파악하는 것이 중요합니다.

이를 통해 특정 태그를 찾아내 데이터를 추출할 수 있습니다.

<br />

### 2. 속성(Attribute): 태그의 성격을 부여하는 요소

태그에는 **속성**이 붙을 수 있습니다. 속성은 태그의 성격을 정의하거나 추가적인 정보를 제공합니다.

예를 들어, `<a>` 태그는 링크를 생성하는 태그인데, 이 태그의 `href` 속성은 링크의 목적지를 지정합니다.

```html title="속성 예시"
<a href="https://example.com">예제 사이트로 이동</a>
```

웹 크롤링 시 속성값을 기준으로 특정 요소를 찾는 경우가 많습니다.

특히 `class`(동일한 스타일을 적용할 때 사용)나 `id`(고유한 식별자) 속성은 웹 크롤링에 빈번하게 사용합니다.

<br />

### 3. DOM 구조: 웹 페이지의 지도

웹 페이지는 HTML 태그들이 계층적으로 배치된 **DOM**(Document Object Model) 구조를 갖습니다.

이를테면, `<html>` 태그 안에 `<body>`, `<body>` 태그 안에 `<div>` 등이 들어 있는 식입니다.

DOM 구조를 이해하면 특정 요소가 페이지에서 어디에 위치해 있는지 쉽게 파악할 수 있습니다.

```html title="DOM 구조 예시"
<html>
  <body>
    <div>
      <p>단락 내용</p>
    </div>
  </body>
</html>
```

크롤링할 때는 이 DOM 구조를 분석해 필요한 데이터를 정확히 추출할 수 있도록 해야 합니다.

HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조와 내용을 정의합니다. 웹 브라우저는 이 HTML을 해석해 우리가 보는 웹 페이지를 화면에 표시합니다.

### HTML은 웹 페이지의 구조와 내용을 정의하는 데 사용된다.