웹 페이지로부터 데이터를 추출하는 행위를 크롤링(Crawling)이라고 합니다. 앞서 살펴본 재무정보 웹 페이지도 크롤링함으로써 원하는 데이터만 추출해낼 수 있습니다. 웹 페이지에서 크롤링을 잘하려 면 웹 페이지를 만드는 데 사용되는 언어인 HTML(HyperText Markup Language)에 대해 조금은 알고 있는 것이 좋습니다. 그래서 이번 절에서는 크롤링에 필요한 기본적인 HTML 지식을 간단히 살펴 보겠습니다.
HTML은 하이퍼텍스트 마크업 언어입니다. 웹 페이지는 일반 텍스트와 달리 링크를 클릭하면 다른 페 이지로 이동합니다. 이처럼 서로 연결(링크)된 문자 데이터를 하이퍼텍스트라고 합니다. 마크업 언어 라는 것은 문서나 데이터의 구조를 명기하는 언어를 의미합니다. 즉, 하이퍼텍스트 마크업 언어라는 것 은 웹 페이지(하이퍼텍스트)를 만드는 데 사용되는 언어인 것입니다.
간단한 코드를 통해 HTML을 배워보겠습니다. 먼저 윈도우 메모장을 실행합니다. 그리고 다음과 같은 코드를 입력합니다. 다음은 HTML을 사용해서 웹 페이지를 만든 것입니다.
<html>
<table border=1>
<tr>
<td> 항목 </td>
<td> 2013 </td>
<td> 2014 </td>
<td> 2015 </td>
</tr>
<tr>
<td> 매출액 </td>
<td> 100 </td>
<td> 200 </td>
<td> 300 </td>
</tr>
</table>
</html>
메모장에서 [파일] → [다른 이름으로 저장]을 차례로 선택합니다. 파일을 저장하는 위치로 윈도우 바탕화면을 선택한 후 그림 19.8과 같이 파일명을 ‘table.html’로, 파일 형식을 ‘모든 파일’로 변경합니다. 인코딩 설정도 ‘UTF-8’로 변경한 후 [저장] 버튼을 눌러 파일로 저장합니다.
그림 19.8 table.html 파일로 저장
바탕 화면에 저장된 table.html을 클릭해보면 그림 19.9와 같이 웹 브라우저에서 table.html 파일이 열린 것을 확인할 수 있습니다. 앞서 여러분이 HTML로 작성한 내용은 사실 표를 만든 것입니다. 인터넷 익스플로러나 크롬 같은 웹 브라우저가 HTML 코드를 해석해서 그림 19.9와 같이 여러분이 의도한대로 표를 출력하는 것입니다.
그림 19.9 웹 브라우저에서 table.html 파일 열기
앞에서 작성한 HTML 코드를 살펴보겠습니다. HTML 코드에서 <html>, <table>, <tr>, <td> 같은 것들을 태그라고 부릅니다. HTML에서 태그는 항상 쌍으로 존재합니다. 예를 들어, HTML 코드가 시작함을 의미하는 태그인 <html>이 있다면 코드의 끝부분에는 HTML 코드의 끝을 의미하는 </html>이 위치해야 합니다.
표를 만들기 위해서는 <table> … </table> 태그를 사용합니다. 표는 행(row)과 열(column)로 구성되는데, 행을 만들 때는 <tr> … </tr> 태그를 사용하고 열을 만들 때는 <td> … </td>를 사용합니다. 표가 웹 페이지 안에 존재하므로 <table> … </table> 태그는 다음과 같이 <html> … </html> 태그 안에 위치해야 합니다. 표의 선 두께는 border 속성을 통해 설정할 수 있습니다.
<html>
<table border=1>
</table>
</html>
그림 19.9를 참조하면 표에는 두 개의 행이 존재합니다. 행이라는 것은 표 안에 존재하는 것이기 때문에 다음과 같이 <tr> ... </tr> 태그를 <table> ... </table> 안쪽으로 위치시킵니다. 행이 두 개이기 때문에 <tr> ... </tr> 태그 쌍이 두 번 위치합니다. 참고로 HTML 코드에서 공백은 의미를 갖지 않지만 코드의 가독성을 위해 적절히 띄어쓰는 것이 좋습니다.
<html>
<table border=1>
<tr>
</tr>
<tr>
</tr>
</table>
</html>
그림 19.9에나온표의각행에는네개의열이존재합니다.따라서<tr>...</tr>태그안쪽으로 <td> ... </td> 태그 쌍을 네 번 넣어줍니다.
<html>
<table border=1>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</html>
마지막으로 표의 셀(표 안의 공간)에 데이터를 넣으면 되는데 데이터는 <td>와 </td> 사이에 넣으면 됩니다.
<html>
<table border=1>
<tr>
<td> 항목 </td>
<td> 2013 </td>
<td> 2014 </td>
<td> 2015 </td>
</tr>
<tr>
<td> 매출액 </td>
<td> 100 </td>
<td> 200 </td>
<td> 300 </td>
</tr>
</table>
</html>
이로써 간단히 HTML 태그에 대해 살펴봤습니다. 배운 내용을 정리해 보면 웹 페이지를 만들기 위해서는 HTML 태그를 사용해서 코드를 작성해야 합니다. 물론 HTML 태그를 사용해 직접 코드를 작성하지 않고 어도비 드림위버(Adobe Dreamweaver) 같은 위지위그 기반의 프로그램을 사용해 손쉽게 웹 페이지를 만들 수도 있습니다. 이는 여러분이 PyQt로 GUI를 구성할 때 직접 코드를 입력해서 만들 수도 있었고 Qt Designer를 이용해 UI 구성을 쉽게 수행했던 것과 같습니다.
어쨌거나 위지위그 기반의 프로그램을 사용하든 직접 HTML을 사용하든 결과물은 그림 19.10과 같이 HTML 태그로 구성된 *.html 파일입니다. 이 파일을 인터넷 익스플로러, 파이어폭스, 크롬 같은 웹 브라우저가 읽으면 웹 브라우저가 HTML 태그를 해석한 후 이를 웹 페이지로 보여주는 것입니다.
그림 19.10 웹 페이지 제작 및 출력 과정
