Stage3 - 태그를 이용해서 원하는 데이터 찾기

앞에서 HTML문서를 직접만들며 태그와 속성을 이해했습니다. 이번 스테이에서는 태그를 이용해서 웹문서에서 원하는 데이터를 찾는 방법을 함께 공부해봅니다.

태그를 이용해 데이터 선택하기 #1

먼저 Challenge1을 통해서 만든 간단한 웹페이지에서 데이터를 찾는 연습을 해봅시다.

<h1>다음부터</h1>
<h3>엄지용, 2014</h3>
<img width="200px" src="이미지 소스">
<br>
이번까지만 이렇게 하고<br>
다음부턴 이러지 말아야지<br>
<br>
라며 버려버린 시간들이<br>
언젠간 한데 모여<br>
<u>우린 뭐 <b><a href="링크">인생</a> 아니었냐</b>고 따져 물어올 것만 같다.</u><br>
<img width="100px" src="이미지소스2"><br>
시집을 받아보고 싶으면 메일주소를 써주세요!<br> <input type="text">
Challenge1 결과
  1. 다음부터

  2. 엄지용, 2014

  3. 우린 뭐 네 인생 아니었냐고 따져 물어올 것만 같다.

  4. 인생

Challenge로 함께 만들어본 페이지에서 위 데이터를 찾으려면 어떻게 해야할까요? 해당하는 데이터를 포함하고 있는 태그를 찾으면 각각 원하는 데이터를 찾을 수 있습니다.

다음부터: <h1>

<h1>다음부터</h1>

엄지용, 2014: <h3>

<h3>엄지용, 2014</h3>

우린 뭐 네 인생 아니었냐고 따져 물어올 것만 같다.: <u>

<u>우린 뭐 <b><a href="링크">인생</a> 아니었냐</b>고 따져 물어올 것만 같다.</u>

인생: <a>

<a href="링크">인생</a>

우린 뭐 네 인생 아니었냐고 따져 물어올 것만 같다 부분을 살펴보면 <u>태그 안에 <b>, <a> 태그 등이 포함되어 있는 것을 알 수 잇습니다. HTML의 태그는 이처럼 태그를 중첩해서 사용할 수 있습니다. 이 때 데이터의 내용은 태그의 유무와 관계없으므로 우린~ 을 선택하고 싶다면 <u>태그를 선택하면 됩니다.

조금 더 복잡한 홈페이지 살펴보기

태그로 데이터를 선택할 수 있다는 사실을 알았지만, 실제 홈페이지는 더욱 복잡한 모양으로 구성되어있습니다. 그렇다면 복잡한 홈페이지에서는 어떻게 데이터를 선택할 수 있을까요? 아래 예제 파일은 다운받아 shopping.html을 실행시켜봅니다.

예제파일 다운로드: http://bit.ly/크롤링_예제1

shopping.html 실행

위와 같은 예제 페이지를 확인할 수 있습니다. 웹페이지에서 마우스 오른쪽 클릭 후 소스코드를 확인해보면 우리가 만들었던 HTML파일과는 비교도 안되게 긴 코드를 확인할 수 있습니다.

169줄의 꽤 긴코드지만 일단 하고 넘겨버립시다.

shopping.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Coala Datascrap W1</title>
<style>
... 생략 ...
</div>
<a href="#">
<span>판매처 62</span>
</a>
</div>
</div>
</div>
</body>
</html>

확인해보면 태그와 태그들이 <tab>으로 구분(들여쓰기)되어있는 것을 알고 있는데, 이렇게 태그로 들여쓰여진 부분은 위의 태그에 아래 태그가 포함되어 있는 것을 말합니다.

이 홈페이지의 소스코드를 위에서 부터 아래로 차례로 한번 살펴보겠습니다. HTML 코드를 살펴볼 때, 우리가 찾고자하는 데이터는 <body>태그 안에서 시작하므로 <head>는 무시해줍니다. *<head>는 웹페이지의 개략적인 정보, 요약 등이 담겨있습니다.

1단계 구분: 큰 제목(제품 리스트)과 상품 박스 구분

1단계 구분
<body>
<span class="main-title">제품 리스트</span>
<div id="items-section">
</body>

예제 페이지의 코드를 살펴보면 크게 위와 같이 <span><div>로 나누어져 있습니다. 각각 큰 제목(제품 리스트)과 상품박스를 표시하고 있습니다.

2단계 구분: 상품박스의 행 구분

2단계 구분
<body>
<span class="main-title">제품 리스트</span>
<div id="items-section">
<div class="itmes-row">
<div class="itmes-row">
</body>

상품 리스트를 확인해보면, 각각 첫번째 줄과 두번째 줄은 서로 다른 <div>로 구분하고 있습니다.

3단계 구분: 행 안에서 제품의 구분

3단계 구분
<body>
<span class="main-title">제품 리스트</span>
<div id="items-section">
<div class="itmes-row">
<div class="item">
<div class="item">
<div class="item">
<div class="item">
<div class="item">
<div class="itmes-row">
</body>

상품 리스트의 행 안에 각 상품들 역시 <div>로 구분되어 있음을 알 수 있습니다.

4단계 구분: 상품 이미지, 상품정보, 판매처 구분

4단계 구분
<body>
<span class="main-title">제품 리스트</span>
<div id="items-section">
<div class="itmes-row">
<div class="item">
<img src="./notebook1.png">
<div class="metadata">
<a href="#">
<div class="item">
<div class="item">
<div class="item">
<div class="item">
<div class="itmes-row">
</body>

각 상품에 대한 이미지, 제품정보, 판매처는 각각 <img>, <div>, <a> 태그로 구분되어 있습니다.

5단계 구분: 세부 정보 구분

5단계 구분
<body>
<span class="main-title">제품 리스트</span>
<div id="items-section">
<div class="itmes-row">
<div class="item">
<img src="./notebook1.png">
<div class="metadata">
<span class="title">14U380-EU1TK</span>
<span class="price">최저 389,000원</span>
<span class="comments">상품평 599</span>
<a href="#">
<span>판매처 72</span>
<div class="item">
<div class="item">
<div class="item">
<div class="item">
<div class="itmes-row">
</body>

마지막으로 각 세부 정보들은 <div class="metadata"><a href="#">에 각각 <span> 태그로 포함되어 있습니다.

위와 같이 HTML 웹문서는 복잡해 보이지만, <tab> 들여쓰기를 통해서 상하관계를 들여다보면 각각의 데이터가 저장되어 있는 위치를 찾아낼 수 있습니다.

태그를 통해 데이터 선택하기 #2

shopping.html
<body>
<span class="main-title">제품 리스트</span>
<div id="items-section">
<div class="itmes-row">
<div class="item">
<img src="./notebook1.png">
<div class="metadata">
<span class="title">14U380-EU1TK</span>
<span class="price">최저 389,000원</span>
<span class="comments">상품평 599</span>
<a href="#">
<span>판매처 72</span>
<div class="item">
<div class="item">
<div class="item">
<div class="item">
<div class="itmes-row">
</body>

그렇다면 이번엔 예제페이지에서 데이터를 찾아볼까요?

  1. 제품명

  2. 가격

  3. 상품평

  4. 판매처

태그를 이용해서 위 데이터를 각각 찾아봅시다.

제품명: <span>

<span class="title">14U380-EU1TK</span>

가격: <span>

<span class="price">최저 389,000원</span>

상품평: <span>

<span class="comments">상품평 599</span>

판매처: <span>

<span>판매처 72</span>

네가지 데이터 모두 <span> 태그로 둘러쌓여 있습니다. 이 경우, 제품명 데이터를 가져오고 싶어 컴퓨터에게 소스코드에서 <span>을 찾아줘! 라는 명령을 하는 경우, 네가지 데이터를 구분없이 모두 가져오는 문제가 발생합니다.

태그의 이름, id 와 class

위와 같은 문제 때문에 태그를 구분할 수 있도록, 개발자들은 각각의 태그에 idclass라는 이름을 붙였습니다. id와 class는 일종의 속성(attribute)으로 태그의 <, >안에 포함됩니다.

분류

사용

설명

id

<태그이름 id="아이">

하나의 웹페이지에 하나만 쓸 수 있는 고유한 이름

class

<태그이름 class="클래스">

비슷한 형태를 가진 요소에 여러번 사용할 수 있는 이름

또한 특정한 태그를 선택해달라는 명령을 컴퓨터가 수행하기위해서는 "선택자(Selector)"라는 약속된 명령어를 사용해야합니다. 선택자를 사용하면 원하는 class/id를 가진 태그를 쉽게 선택할 수 있습니다.

분류

설명

태그이름

모든 태그

태그이름#아이디

id가 '아이디'인 태그

태그이름.클래스

class가 '클래스'인 태그

#아이디

id가 '아이디'인 모든 태그(태그 종류 관계 X)

.클래스

class가 '클래스'인 모든 태그(태그 종류 관계 X)

선택자는 .을 이용해서 class를,

#을 이용해서 id를 특정합니다.

선택자를 사용하여 위의 데이터들을 찾으면 다음과 같은 결과를 얻을 수 있습니다.

제품명: class가 title인 span 태그 span.title

<span class="title">14U380-EU1TK</span>

가격: class가 price인 span 태그 span.price

<span class="price">최저 389,000원</span>

상품평: class가 comments인 span 태그 span.comments

<span class="comments">상품평 599</span>

판매처: class, id가 없는 span 태그 span

<span class="title">14U380-EU1TK</span>
<span class="price">최저 389,000원</span>
<span class="comments">상품평 599</span>
<span>판매처 72</span>

다른 데이터들은 선택자를 통해 문제없이 선택이 가능하지만, 판매처의 경우 class나 id를 가지고있지 않기 때문에 span태그를 가진 모든 데이터들이 포함됩니다. 이때는 데이터의 상하관계를 통해 특정한 태그를 선택해야합니다.

상하관계를 통해 데이터를 선택하는 방법: 자식(Child)/자손(Descendant)

위에서 설명한 것과 같이 판매처 데이터는 class와 id를 가지고 있지 않기때문에 기존의 .# 방법으로는 데이터를 선택하는 것이 불가능합니다. 이와 같은 경우에는 주로 태그 사이의 상하관계를 활용해서 데이터를 선택할 수 있습니다.

앞에서 살펴본 <shopping.html> 태그들의 상하관계를 도식화 하면 위처럼 나타낼 수 있습니다. 이 때, 제품명, 가격, 상품평 데이터를 가지고 있는 span태그는 div.metadata에 포함되어 있지만, 판매처 데이터를 가지고 있는 span태그는 a태그에 포함되어 있는 것을 알 수 있습니다.

a태그가 가지고 있는 span태그를 선택해줘!!!

라는 명령을 내릴 수 있다면, 판매처 데이터를 특정할 수 있습니다.

태그의 상하관계는 아래와 같이 두가지 방법으로 표현할 수 있습니다.

분류

표현

자식(Child)

a > span

a태그가 직접 포함하고 있는 span태그

자손(Descendant)

a span

a태그가 포함하고 있는 모든 span태그

자식(Child)은 앞의 특정 태그가 직접 포함하고 있는 태그를 말하며, 상하관계를 가지고 있는 태그 사이에 >를 써서 표현합니다. 자손(Descendant)은 특정의 하위에 있는 모든 태그를 말하며, 상하관계를 가지고 있는 태그 사이에 공백(space)을 써서 표현합니다.

판매처 데이터a태그 안에 속해있는 span태그가 하나 뿐이기 때문에 둘 중 어느 방법을 사용해도 판매처 데이터를 선택할 수 있습니다.

위와 같이 div.items-rowspan의 상하관계를 비교해보면 자손과 자식의 차이를 쉽게 이해할 수 있습니다.

*데이터 수집기를 구현하기 위해서 자식과 자손이라는 용어자체는 중요하지 않습니다. 다만, 공백(space)과 꺽쇠(>)를 활용한 상하관계 표현에 익숙해지셔야 원하는 데이터를 선택할 수 있는 힘을 기를 수 있습니다 :)

다음 스테이지에서는 실제 웹페이지(네이버 TV: https://tv.naver.com/r)에서 선택자를 통해 데이터를 선택해보겠습니다.