목차
필자는 아직 웹 개발에 대해서는 관심도가 크지 않고 본격적으로 배워볼 생각도 아직은 없다.
그러나 파이썬의 requests, beautifulsoup, selenium 등의 라이브러리를 이용하다 보면 HTML 문서를 접할 일이 많다.
이 블로그에도 웹 스크레이핑에 관한 내용을 소개한 적이 있는데, 웹사이트에서 게시글의 제목들을 추출하려면 'h' 태그를 찾아 추출하면 된다고 언급하였다.
파이썬을 이용한 웹스크레이핑(웹크롤링) 예제/requests와 beautifulsoup로 웹페이지 정보 추출하기
웹 개발을 직접 하지 않더라도 웹문서를 다루는 작업을 하려면 HTML의 기초적인 구조에 대해서는 알 필요가 있어 조금 공부를 하였고, 이 글에서는 그 내용을 공유하려 한다.
필자 스스로 HTML에 대해 전반적으로 이해하고 있지 못하므로, 본격적으로 HTML을 공부하려는 사람이라면 다른 글을 읽을 것을 권장한다.
1. HTML 문서의 기본 구조
HTML은 웹 페이지를 만드는 데 쓰이는 마크업 언어이며, HTML로 작성한 문서를 HTML 문서라고 부른다.
HTML이라는 용어는 생소할수 있으나, 매일같이 인터넷에서 보는 웹페이지들이 모두 HTML로 작성된 것들이다.
HTML 문서의 기본 구조를 보자. 왼쪽이 HTML 소스이고, 오른쪽이 브라우저에 나타난 모습이다.
HTML 문서의 첫줄(<!DOCTYPE html>)은 이 문서가 HTML 문서라는 것을 브라우저에 알려주고 있다.
그다음 줄을 보면 첫 번째 <html> 표시가 있는데, 이렇게 화살 괄호로 표시한 것들을 "태그"라고 한다. "태그"는 여는 태그와 닫는 태그로 구분된다.
<html> 태그는 HTML 문서의 시작을 알리는, 여는 태그이다.
위 예시의 맨 아랫줄을 보면 닫는 태그인 </html> 태그가 있다. 이것은 HTML 문서의 끝을 알리는 태그이다.
여는 태그에서부터 닫는 태그까지를 하나의 "요소"(element)라고 부른다.
모든 HTML 문서는 이러한 요소들을 계층적으로 나열하는 구조로 되어 있다.
위 예시를 보면, html 요소 안에(여는 태그와 닫는 태그 사이에) head, body 요소가 들어 있고, body 요소 안에는 h1과 p 요소가 들어 있는 것을 볼 수 있다.
head에는 웹페이지에 관한 정보(metadata)가 담기고, body에는 웹페이지 본문에 나타날 정보들이 담긴다.
웹스크레이핑이나 웹자동화를 할 때에는 통상 body 안에서 필요한 요소(태그)들을 찾아야 한다.
body에 들어가는 요소들에 대해서 밑에서 간단히 살펴보자.
| [참고] 서두에 말한 것처럼 웹 페이지를 만들려고 하는 것이 아니기 때문에 head에 들어가는 요소들에 대해서는 여기에서 다루지 않는다. |
2. HTML 태그와 속성에 대한 기초적인 설명
속성(attributes)이란?
태그가 무엇인지는 앞에서 보았는데, HTML 문서들을 보다 보면 여는 태그 안에 태그 이름 외에도 id나 class 등 이것저것 들어 있는 걸 볼 수 있다.
이런 것들은 해당 태그의 "속성"이라고 한다.
예를 들면 바로 위에 보이는 제목은 HTML 문서에서 아래와 같이 작성되어 있는데, 여기에서 id, style, data-ke-size같은 것들이 h2 태그의 속성에 해당한다.
<h2 id="2" style="text-align: left;" data-ke-size="size26"><br /><b>2. HTML 태그와 속성에 대한 기초적인 설명</b></h2>
속성은 해당 태그에 대해서 추가적인 정보를 담기 위해 붙이는 것이다. 예를 들면 style 속성을 주어 글자의 색을 바꾸거나, img 태그에서 src 속성으로 해당 요소에 어떤 이미지를 가져다 쓸 것인지를 표시해준다.
위 예시에서 본 id의 경우 해당 요소에 이름을 부여함으로써 하이퍼링크로 참조하거나(이 글의 앞부분에서 a 태그를 붙여 위의 제목으로 하이퍼링크를 걸어둔 것이다.) 자바스크립트로 그 요소를 조작하고자 할 때 사용한다.
<div>, <span>
HTML 문서들을 보다보면 아마 가장 많이 마주치는 것이 <div> 와 <span>태그일 것이다.
div 태그는 division의 약자로 보이고, span은 아마 span이라는 단어를 그대로 쓰는 것 같은데, 둘 다 HTML 문서의 구역을 나누는 데 사용한다.
세부적인 용법은 다르지만 그밖에도 header, nav, section, article 등의 태그들이 문서의 구역을 나누는 데 사용된다.
웹스크레이핑이나 웹자동화를 하면서 div를 찾는 경우에는 아래와 같이 내가 찾으려는 div의 속성을 명시해줌으로써 내가 찾고자 하는 요소를 특정할 수 있다.
soup.find_all("div", {"class": "contens_list"})
<a>
div 다음으로 많이 보게 되는 것이 a 태그이다. a 태그는 하이퍼링크를 나타내는 태그이다.
따라서 아래 예시와 같이 a 태그에는 href 속성이 따라붙는다. 예시는 이 게시글에서 내부 참조를 하는 하이퍼링크를 걸어둔 모습이고, 웹문서들을 보면 "#2" 자리에 보통 URL이 들어간다.
<p data-ke-size="size16"><a href="#2">2. HTML 태그와 속성에 대한 기초적인 설명</a></p>
웹스크레이핑을 하다 보면 href 속성에서 링크를 뽑아낼 때가 많으니, href는 a태그의 속성으로 들어가 있다는 점을 기억해 두자.
<h>, <p>
h 태그는 headings의 약자로, 제목을 나타내는 태그이다.
head 요소에 들어가는 title 태그가 웹페이지 자체의 제목을 나타내는 것이라면, h 태그는 본문 내에서의 제목을 나타내는 것으로 h1부터 h6까지 사용할 수 있다.
그리고 p 태그는 단락을 나타내는 태그이다.
h 태그와 p 태그를 사용했을 때 웹페이지에 어떻게 표시되는지는 이 글의 서두에서 본 HTML 문서 예시를 참조하자.
<li>
li 태그는 list의 약자로, 목록의 개별 항목을 나타내는 태그이다.
순서가 있는 목록인지 순서가 없는 목록인지에 따라 ol 또는 ul 태그(ordered, unorderd)로 목록 요소를 표시하고, 그 안에 li 요소를 담는다.
<table>
table은 말 그대로 표를 나타내는 태그이다.
table 안에는 tr과 th, 그리고 td 태그가 들어 있고, 각각 표의 행과 열, 그리고 데이터(셀)을 나타낸다.
<iframe>
iframe은 HTML 안에 또다른 HTML 문서가 들어가 있는 구조로 되어 있을 때 사용한다.
iframe은 위에서 본 태그들에 비해 자주 보이지는 않는데, 여기에 함께 소개하는 이유가 있다.
iframe 안에 있는 요소들은 find_element 등의 함수로 찾으려 하기 전에 해당 요소가 있는 iframe으로 먼저 전환해주지 않으면 요소가 찾아지지 않는다.
이것 때문에 웹자동화 프로그램을 짤 때 난관에 봉착하기 쉽다.
분명히 눈에 보이는데 요소를 찾을 수 없다고 나온다면 일단 iframe이 있는 것은 아닌지 의심해봐야 한다.
'코딩 > 자동화' 카테고리의 다른 글
| Go 언어(golang)로 파이썬보다 속도가 n배 빠른 웹스크레이퍼(크롤러) 만들기 (1) | 2022.03.07 |
|---|---|
| 엑셀 매크로(VBA script)를 파이썬 스크립트로 바꾸는 방법/win32com (1) | 2021.12.10 |
| 파이썬에서 ID, 비밀번호 입력이나 파일, 폴더 선택 창을 띄우는 방법/tkinter, pyautogui (0) | 2021.12.03 |
| 파이썬을 이용한 웹스크레이핑(웹크롤링) 예제/requests와 beautifulsoup로 웹페이지 정보 추출하기 (0) | 2021.11.30 |
| 파이썬으로 웹 페이지에서 정보 추출하기(웹스크레이핑, 웹크롤링)/Request와 Beautifulsoup 이용하기 (0) | 2021.11.29 |
댓글