현대의 정보 사회에서 데이터는 상당 부분은 웹상에 존재하며, 이를 효율적으로 수집하는 기술이 바로 웹 크롤링이다. 웹 크롤링이란 웹 페이지로부터 정보를 자동으로 추출하는 과정을 말한다. 이 과정을 수행하기 위해서는 HTML이라는 웹 페이지를 구성하는 언어에 대한 이해가 필수적이다. HTML은 웹의 기본적인 뼈대를 이루며, 이를 알고 있어야만 웹 크롤링을 통해 데이터를 정확히 추출할 수 있다. 이번 블로그 포스팅에서는 HTML의 기초부터 시작하여, 웹 크롤링에 필요한 핵심적인 태그와 속성, 그리고 HTML 문서의 기본적인 구조에 대해 설명하고자 한다.
목차
1. HTML 태그
2. HTML 속성
3. HTML 문법
1. HTML 태그
HTML 문서는 다양한 태그를 사용하여 구조화된다. 크롤링을 위해 알아야 할 주요 태그는 다음과 같다.
- <div>: 페이지 내에서 섹션을 구분하는 데 사용되는 컨테이너 태그. 레이아웃을 구성할 때 주로 활용된다.
- <p>: 텍스트 단락을 정의하는 태그로, 데이터를 구조적으로 분리하는 데 유용하다.
- <a>: 하이퍼링크를 생성하는 태그. 링크된 URL을 크롤링할 때 필수적으로 파악해야 한다.
- <table>, <tr>, <td>: 표와 관련된 데이터를 크롤링할 때 필수적인 태그들. 구조화된 데이터 추출에 중요하다.
- <ul>, <ol>, <li>: 목록을 나타내며, 정보를 순차적이거나 비순차적 목록으로 구분할 때 사용된다.
- <h1> ~ <h6>: 제목 태그들로, 문서의 구조적 중요성을 나타낸다. 각 섹션의 제목을 크롤링하는 데 유용하다.
- <img>: 이미지 태그로, src 속성을 통해 이미지 URL을 크롤링할 수 있다.
- <span>: 인라인 요소로, 특정 텍스트에 스타일을 적용하거나, 특정 데이터를 감싸는 용도로 사용된다.
| 태그 | 설명 |
| <div> | 섹션 분리를 위한 블록 레벨 컨테이너, 스타일링과 레이아웃에 사용 |
| <p> | 텍스트 단락을 정의, 각 태그는 새 단락 시작 |
| <a> | 하이퍼링크 생성, href 속성으로 링크 목적지 지정 |
| <table> | 행과 열로 구성된 테이블 형태의 데이터 표시, <tr>, <td> 사용 |
| <ul>, <ol>, <li> | 순서 없는/있는 목록과 목록 아이템을 정의 |
| <h1>~<h6> | 문서의 제목을 정의, <h1>은 가장 높은 레벨 |
| <img> | 이미지 포함, src로 이미지 위치 지정 |
| <span> | 인라인 요소, 텍스트 스타일링 또는 구분에 사용 |
2. HTML 속성
HTML 태그의 기능을 확장하는 속성에는 다음과 같은 것들이 있다.
- id: 문서 내에서 유일한 식별자. 크롤링 시 특정 요소를 정확히 지목할 때 사용된다.
- class: 스타일링을 적용할 때 그룹화의 기준으로 사용. 여러 요소에 동일한 스타일을 쉽게 적용할 수 있게 한다.
- src: 외부 리소스의 위치를 지정. 주로 이미지, 비디오, 오디오 파일의 위치를 나타내는 데 사용된다.
- href: 하이퍼링크의 목적지 주소를 지정. 링크 추적에 필수적이다.
- alt: 이미지 태그에서 사용되며, 이미지를 설명하는 텍스트를 제공한다. 이미지가 로드되지 않을 경우 표시된다.
- title: 추가 정보를 제공하는 툴팁을 생성할 때 사용된다.
- style: 직접 스타일을 적용할 때 사용. CSS 스타일을 HTML 요소에 직접 작성할 수 있다.
| 속성 | 설명 |
| id | 요소를 식별하기 위한 유니크 식별자, 페이지 내 유일해야 함 |
| class | 요소를 그룹화하고 CSS/JS를 통해 스타일링하거나 조작할 때 사용 |
| src | 외부 소스 파일의 위치를 지정, 주로 멀티미디어 파일에 사용 |
| href | 하이퍼링크의 목적지 URL을 지정 |
| alt | 이미지 대체 텍스트 제공, 이미지 로드 실패 시 표시 |
| title | 요소에 대한 추가 정보 제공, 툴팁으로 보여짐 |
| style | 요소에 직접 CSS 스타일을 적용 |
3. HTML 기본 문법
- HTML에서 태그와 속성은 소문자로 사용한다.
- HTML 문서는 <html>로 시작하여 </html>로 종료한다.
- 페이지의 구조는 <head>와 <body>로 크게 나뉜다.
- <head>에는 문서의 메타 데이터가 , <body>에는 실제 콘텐츠가 들어 간다.
- 태그는 대부분 <태그명>로 시작하여 </태그명>으로 종료되며, 속성은 태그 내부에 위치한다.
아래는 기본적인 HTML 구조이다.
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<h1>안녕하세요, Bear_Pepperoni 입니다.</h1>
<p>웹 크롤링을 위한 HTML 기초 지식에 대해 알아봅시다.</p>
</body>
</html>
아래는 div 태그를 이용하여 id와 class 속성을 활용한 예시이다.
<div id="main-content" class="content">
<h2>HTML 기초</h2>
<p>HTML은 웹 페이지를 구성하는 데 사용되는 언어입니다.</p>
</div>
아래는 HTML을 연습할 수 있는 사이트이다.
위 코드를 직접 아래 사이트에서 작성 후 Run 버튼을 누르면 실제로 어떻게 출력되는지 확인할 수 있다.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
이 글을 통해 HTML의 기본적인 구조와 태그, 속성의 사용법을 살펴보았다. 웹 크롤링은 단순히 데이터를 수집하는 기술을 넘어서, 그 데이터를 어떻게 활용하느냐에 따라 큰 가치를 창출할 수 있다. 기초적인 HTML 지식은 웹에서 데이터를 효과적으로 추출하고, 이를 분석하여 인사이트를 도출하는 데 첫 단추를 끼우는 것과 같다. 향후 웹 크롤링 기술을 더 발전시키고 싶다면, JavaScript나 서버 사이드 스크립트를 이해하는 것도 중요하다. 그러나 그 모든 것의 기반은 바로 오늘 살펴본 HTML에 대한 이해에서 시작된다. 앞으로 이 지식을 바탕으로 더 다양한 데이터를 수집하고, 그것을 실질적인 비즈니스 결정과 연결 지어 생각해보는 시간을 가지길 바란다. 웹 크롤링은 정보의 바다에서 가장 유용한 진주를 찾는 여정이며, 오늘 배운 내용이 그 여정의 출발점이 될 것이다.