lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

lesson18Title

automationIntroBasicsChapter3Title

automationIntroBasicsChapter1Title

automationIntroBasicsChapter2Title

automationIntroBasicsChapter4Title

<html>
  <body>
    <div>
      <h1>웹페이지 대제목</h1>

      <h2>웹페이지 중제목</h2>

      <h3>웹페이지 소제목</h3>

      <p>일반적인 텍스트를 담는 단락</p>

      <a href="https://www.codefriends.net/" target="_blank">코드프렌즈로 이동</a>
    </div>
  </body>
</html>

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

웹 크롤링을 하려면 먼저 웹 페이지가 어떻게 작동하는지 구조를 이해해야 합니다.

크롤링에 가장 핵심적인 개념 중 하나는 `HTML`입니다.

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

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

<br />

## HTML이란 무엇인가요?

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

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

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

<br />

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

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

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

<br />

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

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

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

태그의 수는 매우 다양하며, 각 태그는 특정한 의미와 기능을 갖습니다.

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

위 코드에서 확인할 수 있듯이, HTML로 화면에 표시되는 단위는 `<시작태그>`으로 시작하고, `</종료태그>`으로 끝납니다.

`<시작태그>`과 `</종료태그>` 사이에는 태그의 내용이 들어갑니다.

이렇게 시작 태그와 종료 태그로 둘러싸인 HTML의 최소 단위를 `요소(Element)`라고 합니다.

크롤링 시에는 원하는 정보가 어떤 요소 안에 있는지를 파악해야 합니다.

<br />

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

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

예를 들어 링크를 생성하는 `<a>` 태그는 링크의 목적지를 지정하는 `href` 속성과 새 창에서 여는지를 지정하는 `target` 속성을 가집니다.

```html title="속성 예시"
<a href="https://www.codefriends.net/" target="_blank">
```

위 HTML 코드는 `코드프렌즈` 링크를 `새 창`에서 열도록 지정합니다.

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

특히 `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은 웹 페이지의 구조와 내용을 정의하는 데 사용된다.