분석하는 마케터

크롤링을 처음 시작할 때 무턱대고 예시 코드만 보고 시작했다가 다른 사이트에서 크롤링을 시도하게 되면 자꾸 오류만 나고 헤매었던 경험, 크롤링 초보라면 낯설지 않을겁니다.
크롤링을 위해 필요한 필수 HTML 지식 이해하기! 포스팅을 따라가며 HTML 기초 필수 지식을 익히신다면, 크롤링 예시 코드가 왜 그렇게 구성되어있나!! 하는 것들을 좀 더 잘 익히실 수 있을 겁니다.
실제로 크롤링을 활용해보고 싶은 초보 크롤러분들께 필요한 HTML 기초 필수 지식을 담았습니다.

 

HTML이란?

웹은 크게 다음의 세 가지로 구성됩니다

 

웹페이지를 구성하는 HTML, CSS, JavaScript

 

HTML은 웹의 뼈대를 구성하는 언어, CSS는 웹의 시각적인 표현을 담당하는 언어, JavaScript는 웹의 동적 처리를 담당하는 언어로,

크롤링을 하는 데에는 웹의 뼈대를 구성하는 HTML만 알아도 충분합니다.

HTML은 웹 사이트의 구조를 계층적으로 표현합니다.

 

예시를 통해 살펴보겠습니다.

 

 

왼쪽의 그림은 제가 만든 카페 메뉴판 웹페이지 입니다.

오른쪽은 왼쪽의 페이지에 대한 구조를 나타낸 HTML 문서입니다.

맨 처음에는 오른쪽의 구조를 볼 엄두가 나지 않으시겠지만 자세히 보면 그렇게 어렵지 않습니다.

 

웹 페이지가 계층적인 구조로 이루어져 있는 HTML 문서인데요,

계층적 구조라는 것은 쉽게 말하면 '폴더'를 생각하시면 됩니다.

 

위의 HTML 문서를 예로 보자면, 'menu' 폴더 안에 'coffee-menu'와 'ade-menu'가 있고,

또 각각의 폴더 안에 'item'이라는 폴더가 3개씩 존재하고,

각각의 'item' 폴더 안에는 '아메리카노', '자몽에이드' 라는 메뉴 이름 폴더와, 3500원, 4500원 등의 가격 폴더 이렇게 두 개의 폴더가 있다고 생각할 수 있습니다.

 

 

태그(Tag)

 

조금 더 자세하게 살펴보자면,

위의 HTML에서 'coffee-menu'가 어떠한 폴더의 이름이라면 div는 해당 폴더의 속성을 나타내준다고 비유할 수 있습니다.

폴더의 속성을 나타내는 div, ul과 같은 것들을 태그(Tag)라고 합니다.

 

개념적으로 태그는 HTML을 기술하기 위하여 사용하는 명령어의 집합으로,

기본적으로 여는 태그 '<>'와 닫는 태그 '</ >'로 구성되며, 태그가 데이터를 감싸고 있는 구조입니다. 닫는 태그 없이 단독으로 이용하는 태그도 있습니다 (줄 바꿈, 구분선 등 주로 시각적 요소).

 

태그에는 다양한 옵션을 줄 수도 있는데요, 위에서 했던 대로 폴더에 비유하자면 폴더의 이름에 해당할 수 있겠습니다.

그냥 태그만 있다면 이름 없는 폴더가 존재하는 것이지만 태그에 옵션을 달아준다면 폴더에 이름을 붙여주는 것이죠.

폴더에 이름은 붙일 수도, 안 붙일수도 있기 때문에 옵션은 필수는 아닙니다.

태그의 옵션에는 'class', 'id', 'href'와 같은 것이 있으며 다양한 옵션은 모두 여는 태그에 지정됩니다.
(닫는 태그는 태그 효과가 적용되는 범위의 끝을 나타내는 기능만 합니다.)

태그의 옵션은 '< p class="contents">'와 같이 부여할 수 있습니다.

 

알아둘 태그 옵션

• class : 비슷한 역할을 하는 태그에 부여. 어떤 분류 안에 포함된 요소의 특성을 정의하는데 사용. 한 문서에 class가 같은 태그가 여러 개 있을 수 있음
• id : 해당 태그의 고유한 아이디. 어떤 요소에 대해 유일한 특성을 정의. 한 문서에 id가 같은 태그가 여러 개 있을 수 없음
• href : a 태그에 사용되며, 해당 링크를 클릭할 시 연결되는 주소를 속성값으로 가짐

웹 크롤링을 한다는 것은?

이 부분을 설명하기 위해 앞의 태그와 같은 개념들을 늘어놓은 거라고 보면 되실 것 같습니다.

 

HTML의 기본 구조는 아래와 같이 태그가 데이터를 감싸고 있는 구조입니다.

데이터 수집(크롤링)은

1. 우리가 원하는 내용을 감싸고있는 태그를 찾아
2. 태그가 가지고 있는 데이터를 찾는 것입니다.

---

실제 저희가 크롤링하고자 하는 웹페이지는 위의 커피 메뉴판보다는 비교도 안되게 복잡하며,

따라서 더더욱 길고 복잡한 HTML 문서로 표현될 것입니다.

그러나 그러한 복잡한 웹페이지들도 '계층적 구조'를 이용하여 '폴더' 처럼 생각한다면 이해하기 그렇게 어렵지 않을 것입니다.

 

웹페이지의 HTML 문서를 확인하는 방법은 다음 포스팅에서 더욱 자세하게 다루도록 하겠습니다.