크롤링 첫걸음: HTML 기본 구조 이해하기
데이터 수집의 첫 단계, 웹 크롤링은 인터넷의 방대한 데이터를 활용하기 위한 필수 기술입니다. 이 글에서는 웹 크롤링의 핵심 개념과 웹 페이지의 기본 뼈대인 HTML에 대해 간결하게 설명합니다.
1. 크롤링과 스크래핑: 무엇이 다를까요?
웹에서 데이터를 수집하는 두 가지 주요 개념인 크롤링과 스크래핑을 혼동하기 쉽습니다.
웹 크롤러(Web Crawler) 또는 웹 스파이더(Web Spider)
수많은 웹사이트를 탐색하며 페이지를 수집하는 시스템을 의미합니다. 마치 거미가 웹을 타고 다니듯 인터넷을 돌아다니며 정보를 모으는 행위 전체를 포괄합니다.
웹 스크래핑(Web Scraping)
특정 웹 페이지 내용 중 원하는 부분을 내가 원하는 형식으로 만드는 것을 말합니다. 이는 크롤링을 통해 수집한 페이지에서 필요한 데이터만을 추출하고 가공하는 기술적인 과정입니다.
쉽게 말해, 크롤링은 웹사이트를 "탐험하며 페이지를 수집"하는 것이고, 스크래핑은 수집된 페이지에서 "원하는 부분을 추출하여 정리"하는 것입니다. 스크래핑은 크롤링 기술을 배우기 위한 중요한 발판이 됩니다. 성공적인 스크래핑을 위해서는 웹에 대한 사전 지식이 필수입니다.
2. 웹 페이지의 구성 요소: HTML, CSS, JavaScript
우리가 보는 대부분의 웹 페이지는 세 가지 주요 언어로 구성됩니다. 웹사이트를 건물 짓기에 비유하자면, 각 요소의 역할은 다음과 같습니다:
HTML (Hyper Text Markup Language)
정보 및 설계도에 해당합니다. 웹 페이지의 뼈대와 내용을 정의합니다. 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어입니다.
CSS (Cascading Style Sheets)
디자인 및 스타일링을 담당합니다. 건물의 인테리어 디자인과 같습니다.
JavaScript
기능과 효과를 구현합니다. 건물의 기능적인 요소(예: 엘리베이터, 자동문)와 같습니다.
3. HTML 기본 태그 파헤치기
HTML은 일련의 요소(Element)들로 이루어져 있으며, 각 요소는 웹 페이지를 구성하고 특정 방식으로 동작하게 하거나 콘텐츠를 다른 형식으로 보이게 합니다. 요소는 일반적으로 <여는 태그 속성="속성값"> 텍스트 컨텐츠 </닫는 태그> 형태로 작성됩니다.
다음은 웹 페이지에서 자주 사용되는 핵심 HTML 태그들입니다.
<!DOCTYPE html>HTML 문서임을 선언하는 요소입니다. 문서의 맨 윗줄에 작성하며, 태그 안에 쓰지 않습니다.
<html>...</html>HTML 문서의 시작과 끝을 의미하는 최상단(root) 요소입니다. 모든 다른 요소들은 이 태그 안에 입력됩니다.
<head>...</head>웹사이트에 대한 설명(메타데이터)을 적어 넣는 요소입니다. 반드시 하나의 요소를 포함해야 합니다.
<body>...</body>웹사이트에 표시될 실제 내용이 담기는 요소입니다. 앞으로 배우는 대부분의 요소는 이곳에 작성됩니다.
<meta>빈 요소로, 해당 HTML 문서의 특징 및 설명을 적는 요소입니다. charset 속성으로 문자 인코딩을 선언합니다.
<title>...</title>웹사이트의 제목을 적는 요소입니다.
<p>...</p>문단(paragraph)을 나타내는 태그입니다. 문단 간에는 한 줄의 간격이 생성됩니다.
<h?>...</h?> (h1~h6)제목 또는 부제목을 표현하는 태그입니다. 숫자가 클수록 폰트 사이즈가 작아집니다. 가장 중요한 제목이므로, 하나의 HTML 문서에서 한 번만 사용하는 것이 좋습니다.
<a>...</a>하이퍼링크(anchor)를 만드는 태그입니다. href 속성으로 링크의 목적지 URL을, target 속성으로 링크를 보여줄 위치를 지정합니다.
<img>이미지를 문서에 넣을 때 사용하는 빈 요소입니다. src 속성으로 이미지의 경로를, alt 속성으로 이미지의 대체 텍스트를 지정합니다.
<div>...</div>자체적으로는 아무것도 표현하지 않는 컨테이너 요소입니다. 여러 요소를 하나의 구역으로 묶어 꾸미기 쉽게 해줍니다.
<span>...</span>자체적으로는 아무것도 표현하지 않지만, 주로 문장 중간에서 일부분을 꾸며줄 때 사용됩니다.
4. HTML 전역 속성 (Global Attributes)
전역 속성은 모든 HTML 요소가 공통으로 사용할 수 있는 속성입니다.
style
요소에 CSS 스타일을 직접 적용할 때 사용합니다. 간단한 테스트 용도로 적합합니다.
class
특정 요소에 스타일 또는 스크립트를 적용하기 위해 사용합니다. 하나의 요소에 여러 개의 클래스를 적용할 수 있습니다.
id
class와 유사하게 스타일 또는 스크립트를 적용하지만, 각 요소는 단 하나의 id만 가질 수 있습니다.
hidden
해당 요소를 웹에서 보이지 않게 합니다. hidden="hidden" 대신 간략히 hidden만 적어도 됩니다.
title
요소와 관련된 툴팁(tooltip)을 제공합니다.
다음 단계에서는 파이썬과 셀레늄(Selenium)을 활용하여 실제 웹 페이지에서 데이터를 스크래핑하는 방법을 배울 수 있습니다. 웹의 구조를 이해하는 것은 효과적인 데이터 수집의 첫걸음입니다!
