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

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

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

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

참고 : 웹 입문 + 나만의 웹사이트 만들기 강의에서 HTML에 대한 더 자세한 내용을 확인해 보세요.

HTML이란 무엇인가요?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

일반적으로 웹 페이지는 <html> 태그 안에 <body>, <body> 태그 안에 <div> 등의 요소들이 중첩되어 있습니다.

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

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

크롤링할 때는 이 DOM 구조로 위계를 파악하여 필요한 데이터를 정확히 추출할 수 있도록 해야 합니다.

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!