파이썬 크롤링 시작하기 - html 구조와 간단한 크롤링

2019. 4. 17. 15:33

crawling

html 간단한 구조

tag
head
title
body
p
a href
img
h1, h2, h3, h4
input
button

css란?

tag별 스타일링
id, class

크롤링

requests
beautiful soup

네이버 블로그 크롤링 해보기

크롤링은 웹상에서 데이터를 원하는 대로 받아올 수 있어, 활용도가 높은 기술이죠. 프로그래밍을 통한 자동화의 핵심도 크롤링인데요. 이번 글에서는 html 기본 구조를 알아보고, beautifoul soup를 통해 간단한 크롤링을 해워보도록 하겠습니다.

마지막으론 실습 겸 네이브 블로그를 크롤링 해볼께요.

1. html이란?

HTML(Hypertext markup language) 은 웹페이지를 보여줄 때 사용하는 언어에요.

모든 웹사이트는 html을 기본적으로 써서 만들어졌습니다.

웹의 기본적인 구조를 알아야 크롤링을 할 수 있어요.

직접 html을 만들어 볼께요.

파일명은 index.html로 해주세요.

index.html


x
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>Hello 안녕하세요.</p>
<h1>간단한 문자 쓰기</h1>
</body>
</html>

위의 html을 브라우저에 띄우면

"Hello 안녕하세요."란 문자가 표시됩니다.

html은 항상 열고 닫는 <태그><태그/>로 구성되어 있습니다.

열었다가 닫는 <body></body> 같은 걸 태그라고 하는데요.

html은 태그로 만들어진 문서입니다.

1.1 기본 태그 - html, head, body

html 문서는 html 문서인 걸 표시하는 <html></html>이 있고

필요한 데이터를 불러오거나, 문서 정보를 표시할 때 쓰는 <head></head>,

웹 페에지를 표시할 때 쓰이는 <body></body>로 구성되어 있습니다.

<html><head><body> <- 이 3개의 태그는 항상 있어야 되니 잊지 마세요.

1.2 기본 태그 (문자) - p, h1

<p></p> 는 문자를 적을 때 쓰는 태그고

<h1></h1>도 문자를 적을 때 쓰는 태그인데 h1은 문자의 크기가 기본적으로 정해져 있는 태그에요.

h1,h2,h3,h4,h5,h6 같이 점점 작은 크기의 문자를 표시합니다.

1.3 기본 태그 활용해보기 - img, a href, input

모든 태그를 알아 볼 수는 없으니 자주 쓰는 태그만 몇 개 알아볼께요.

<a></a> a 태그는 다른 사이트에 링크를 걸 때 씁니다.

<a href="https://www.naver.com"> 네이버 이동</a>

input 태그는 입력을 받을 때 쓰여요. 버튼 같은 걸 만들 떄 씁니다. <input></input>

img 태그는 이미지를 표시할 때 쓰여요. <img src=""/>

아래의 html을 실행시키고 확인해보세요.

index.html


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>Hello 안녕하세요.</p>
<h1>h1 글씨</h1>
<h6>h6 글씨 </h6>
<img src="https://images.unsplash.com/photo-1554659966-023466cbc607?ixlib=rb-1.2.1&auto=format&fit=crop&w=1225&q=80">
<a href="https://www.naver.com"> 네이버 이동</a>
<input type="button" name="login" value="login">
</body>
</html>

문제 1.1 html을 새로 만들고,
태그를 3개 넣어보세요.

문제 1.2. html을 새로 만들고 를 써서 구글로 이동하는 링크를 만들어보세요.

모를 때는 w3school (https://www.w3schools.com/) 을 참고하세요.

2. css - html 스타일링

기본 html 태그를 써서 웹페이지를 만들면 밋밋합니다.

이럴 때 css를 써서 웹페이지를 스타일링합니다.

css를 쓰면 html 태그별로 스타일링을 할 수 있어요.

style.css란 파일을 만들어볼께요.

style.css


xxxxxxxxxx
p {
    font-size: 25px;
    font-family: Verdana;
}
img {
    width: 200px;
    height: 200px;
}
a {
    color: cornflowerblue;
}

css를 만들었으면 html에서 불러와야 됩니다.

안에다가 를 적어주세요.


xxxxxxxxxx
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

index.html


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p >Hello 안녕하세요.</p>
<p id="greeting">안녕하세요.</p>
<p>제 이름은 </p>
<h1>h1 글씨</h1>
<h6>h6 글씨 </h6>
<h6>날씨 예보</h6>
<h6 class="textStyle">오늘 날씨는</h6>
<h6 class="textStyle">맑고</h6>
<h6 class="textStyle">화창합니다.</h6>
<img id="road-img" src="https://images.unsplash.com/photo-1554659966-023466cbc607?ixlib=rb-1.2.1&auto=format&fit=crop&w=1225&q=80">
<img src="https://images.unsplash.com/photo-1554659966-023466cbc607?ixlib=rb-1.2.1&auto=format&fit=crop&w=1225&q=80">
<a href="https://www.naver.com"> 네이버 이동</a>
<input type="button" name="login" value="login">
</body>
</html>

문제 2.1 - html을 새로 만들고, css가 적용된
태그를 만들어보세요.

모르겠으면 구글에 "css p tag" 라고 검색해보세요.

2.1 html, css - id와 class의 차이점

지금은 html 태그가 많지 않으니 괜찮지만

100개, 1000개가 될 때는 구분할 방법이 필요하겠죠?

이럴 때 쓰는 게 id와 class 입니다.

id와 class를 통해 html 속성에 접근하거나, 꾸미거나 변경을합니다.

id와 html의 차이는 간단합니다. html 태그당 1개씩 있는가, 여러 태그를 한꺼번에 다루는가입니다.

id는 html 속성을 구분할 때 사용합니다. id는 한 html 페이지에 하나만 있을 수 있어요.

class도 html 속성을 구분할 때 사용합니다. class는 한 html 페이지에 여러개가 있을 수 있어요.

id는 <p id="my-id"> </p> 같은 식으로 적고 class는 <p class="textStyle"></p> 같은 방식으로 적어줍니다.

그럼 html에 id와 class를 적고, 적은 id와 class를 css에서 활용해보도록 할께요.

index.html


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p >Hello 안녕하세요.</p>
<p id="greeting">안녕하세요.</p>
<p>제 이름은 </p>
<h1>h1 글씨</h1>
<h6>h6 글씨 </h6>
<h6>날씨 예보</h6>
<h6 class="textStyle">오늘 날씨는</h6>
<h6 class="textStyle">맑고</h6>
<h6 class="textStyle">화창합니다.</h6>
<img id="road-img" src="https://images.unsplash.com/photo-1554659966-023466cbc607?ixlib=rb-1.2.1&auto=format&fit=crop&w=1225&q=80">
<img src="https://images.unsplash.com/photo-1554659966-023466cbc607?ixlib=rb-1.2.1&auto=format&fit=crop&w=1225&q=80">
<a href="https://www.naver.com"> 네이버 이동</a>
<input type="button" name="login" value="login">
</body>
</html>

style.css

css에서는 원하는 id와 class만 스타일링 해줄 수 있습니다.

id를 표시할 때는 #id 같은 식으로 쓰이구요.

클래스는 .class 같은 식으로 적습니다.


xxxxxxxxxx
p {
    font-size: 25px;
    font-family: Verdana;
}
.textStyle {
    font-size: 15px;
    font-family: Serif;
}
img {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    border: 1px solid #cccccc;
}
img#road-img {
    width: 300px;
    height: 300px;
}
img#road-img:hover {
    box-shadow: 0 0 3px 3px rgba(200, 255, 255, 0.5)
}
a {
    color: #b4654d;
}

2.3 CSS - 자식 태그에 접근하기


xxxxxxxxxx
p em

p em은 em이 p보다 안쪽에 있는 경우면 다 해당됩니다.

이렇게 적든


xxxxxxxxxx
<p>Text <em>foo</em> bar</p>

요렇게 적든 상관없죠.


xxxxxxxxxx
<p><strong><em>foo</em></strong></p>

반면 > 기호가 있으면 바로 안쪽에 있는 경우만 해당됩니다.


xxxxxxxxxx
p > em

이것만 되고


xxxxxxxxxx
<p>Text <em>foo</em> bar</p>

이건 안되요. p와 em 사이에 strong이 있으니까요.


xxxxxxxxxx
<p><strong><em>foo</em></strong></p>


xxxxxxxxxx
p > em {
}


xxxxxxxxxx
<p>Text <em>foo</em> bar</p>

지금까지 html에 id와 class를 통해 css를 적용하는 방법을 알아보았습니다.

기본적인 html 구조는 알게 되었으니 이제 크롤링 하는 법을 알아보도록 할께요.

3. 크롤링하기


xxxxxxxxxx
- http request 보내기, response 받기
- beautiful soup
- save data

3.1.1 파이썬 라이브러리 설치

이미 만들어진 함수들의 모음을 라이브러리라고 하는데,

파이썬으로 크롤링을 하려면 라이브러리를 설치해야 합니다.

커맨드 라인에서 pip를 써서 설치를 하거나 파이참에서 설치를 해주세요.


xxxxxxxxxx
pip install beautifulsoup4 requests

파이참에서 라이브러리 설치하기 - https://www.youtube.com/watch?v=HJ9bTO5yYw0

설치한 라이브러리는 requests와 Beautiful Soup입니다.

requests는 인터넷 상으로 데이터를 보내고, 받는 걸 쉽게 해줍니다.

웹사이트에서 html 문서를 받을 때 쓰죠.

Beautiful Soup(뷰티플 소프)은 받은 html 문서를 파싱할 때 씁니다. 파싱은 분해해서 다루기 편하게 만드는 걸 말합니다. Beautiful Soup를 쓰면 원하는 html 태그를 쉽게 찾을 수 있습니다.

3.1.2 requests 라이브러리

인터넷은 http란 프로토콜로 만들어졌는데요. 프로토콜은 어떤일을 어떻게 하겠다는 약속입니다.

http는 통신을 하는 방식에 대한 약속이죠.

http는 크게 요청(request)과 응답(response)으로 이뤄져 있습니다.

간단히 말해 요청은 데이터를 달라는 말과 같습니다.

"내가 이 사이트에 접속할 테니 필요한 html을 줘!" 라고 웹사이트에 요청하는 거죠.

응답(response)는 내가 한 요청을 사이트가 처리해서 돌려주는 겁니다.

보통 응답에 html이나 에러(잘못된 페이지에요. 서버가 죽었어요) 등을 담아서 돌려주죠.

이런 요청과 응답을 쉽게 해주는 게 requests 라이브러리에요.

아래의 코드를 실행해 볼까요?


xxxxxxxxxx
import requests
response = requests.get('https://www.naver.com') # 웹사이트에 리퀘스트를 보냄. 리퀘스트의 결과가 response에 저장
print(response)
print(response.status_code) # 응답 코드 보여주기 200이면 성공!
print(response.text) # 응답 결과를 텍스트로 보여줌.

**http 응답이 이해하기 어려우면

웹사이트 주소를 치면 데이터를 보내주고,

그 데이터를 분해해서 쓴다 정도로만 생각해도 됩니다.**

html 데이터를 받았으니 이제 파싱(쓰기 쉽게 분해)를 해볼께요.

그래야 나중에 분석이 가능하겠죠?

3.2 Beautiful Soup 써보기

BeautifulSoup는 파싱을 할 떄 사용합니다.

간단히 파싱을 해보도록 할께요.


xxxxxxxxxx
html_doc="""
<html>
    <head>
    </head>
        <body>
            <p> hello </p>
            <p> good day </p>
        </body>
</html>
"""
from bs4 import BeautifulSoup
soup = BeautifulSoup(html_doc, 'html.parser') # <- html_doc은 파싱할 문서고, 'html.parser'는 파싱 방식이에요.
for p in soup.find('p'):
    print(p)

html 문서에서 p 태그만 출력합니다.

근데 find() 함수를 쓰니 p 태그가 여러개 있어도 1개만 출력하네요.

이때는 find_all() 함수를 쓰면 됩니다.


xxxxxxxxxx
from bs4 import BeautifulSoup
soup = BeautifulSoup(html_doc, 'html.parser') # <- html_doc은 파싱할 문서고, 'html.parser'는 파싱 방식이에요.
for p in soup.find_all('p'):
    print(p)

모든 p 태그가 출력됩니다.

3.2.1 Beautiful Soup - find, select 차이점. requests 사용

Beautiful Soup (뷰티풀 소프)는 2가지 방식으로 html 문서를 파싱합니다.

find와 select인데요. find는 html tag를 통해서 원하는 부분을 찾습니다.

반면 select는 css를 통해 원하는 부분을 찾습니다.

find와 select는 기능적으로는 동일해요. 선택의 문제죠.

많은 메소드가 있지만 자주 함수는 4개에요.

find : 1개의 태그만 찾음.
find_all : 모든 태그를 찾음.
select_one : 1개의 태그만 찾음.
select : 모든 태그를 찾음.


xxxxxxxxxx
import requests
from bs4 import BeautifulSoup
response = requests.get('https://www.naver.com')
soup = BeautifulSoup(response.text, 'html.parser')
for p in soup.select('p'):
    print(p)
    
for link in soup.select('a'):
    print(link.get('href')) # a태그의 href를 전부 찾기

문제 3.1 - Beautiful Soup를 써서 태그만 골라서 출력해보세요.

3.3 Chrome 써서 원하는 태그 쉽게 찾기

크롬을 쓰면 웹에서 내가 찾고자 하는 부분을 쉽게 찾을 수 있어요.

일단 '개발자 도구'를 열도록 할께요.

마우스 오른쪽 키를 누르면 '검사'가 뜨는 데 검사를 누르면 됩니다.

새로 창이 생겼죠? 거기서 element 탭을 누르면 html 요소들을 확인할 수 있습니다.

내가 원하는 태그를 찾을 때도 비슷한 방법을 써요.

일단 마우스를 웹 페이지에 올리고 '검사' 버튼을 누르면 됩니다.

아래 이미지를 참고해주세요.

alt text

크롬 툴을 쓰면 편하게 html에 있는 요소들을 찾고, 편집할 수 있습니다.

내가 원하는 html 요소 찾는 법을 알았으니 이걸 크롤링하면 되겠죠?

아래 영상을 보거나

이 영상을 참고하세요 (https://www.youtube.com/watch?v=mLPIcnFKD04)

4. 네이버 블로그 크롤링 하기

네이버에서 검색했을 때 나오는 블로그의 글을 크롤링해보도록 하겠습니다.

글의 제목과 내용정도만 간단히 크롤링해보려 합니다.

네이버 검색에서 '홍대 맛집'으로 검색하고 블로그 탭을 누르도록 합시다.

블로그 검색 결과만 주르륵 나옵니다 .

alt text

이 검색 결과를 크롤링 하도록 할께요.

위의 사진처럼 검색 결과를 나타내는 주소 (https://search.naver.com/search.naver?where=post&sm=tab_jum&query=%ED%99%8D%EB%8C%80+%EB%A7%9B%EC%A7%91)를

복사해주세요.

4.1 크롤링 함수 만들기

블로그 검색 결과를 요청하는 함수를 만들어볼께요.

4.1 step 1

리퀘스트를 보내고 응답이 제대로 오는지 확인합시다.


xxxxxxxxxx
import requests
from bs4 import BeautifulSoup
def blog_crawling():
    url = 'https://search.naver.com/search.naver?where=post&sm=tab_jum&query=%ED%99%8D%EB%8C%80+%EB%A7%9B%EC%A7%91'
    
    response = requests.get(url)
    
    print(response.text)
blog_crawling()

4.1 step 2

응답을 Beautiful Soup로 파싱해 봅시다.


xxxxxxxxxx
import requests
from bs4 import BeautifulSoup
def blog_crawling():
    url = 'https://search.naver.com/search.naver?where=post&sm=tab_jum&query=%ED%99%8D%EB%8C%80+%EB%A7%9B%EC%A7%91'
    
    response = requests.get(url)
    
    soup = BeautifulSoup(response.text, 'html.parser')
    
    print(soup.text)
    
blog_crawling()

4.1 step 3

검색 결과 중에서 블로그 제목만 파싱해 보도록 할께요.

'3.3 Chrome 써서 원하는 태그 쉽게 찾기'에 적은 대로 블로그 제목의 항목만 찾아주세요.

크롤링을 잘하려면 html 구조를 보고, 원하는 항목만 쉽게 볼 수 있어야 해요.

이건 연습이 필요합니다.


xxxxxxxxxx
import requests
from bs4 import BeautifulSoup
def blog_crawling():
    url = 'https://search.naver.com/search.naver?where=post&sm=tab_jum&query=%ED%99%8D%EB%8C%80+%EB%A7%9B%EC%A7%91'
    
    response = requests.get(url)
    
    soup = BeautifulSoup(response.text, 'html.parser')
    
    for links in soup.select('li.sh_blog_top > dl'): 
        title = links.select('dt > a')
        title = title[0].get('title') # select로 찾은 결과는 리스트로 표시되기에 [0]을 썼습니다. 
        
        print(title)
    
blog_crawling()

4.1 step 4

블로그 제목뿐만 아니라, 작성자, 내용까지 파싱해보도록 할께요.

블로그 데이터는 사전으로 만들고, 하나씩 리스트에 담겠습니다.


xxxxxxxxxx
import requests
from bs4 import BeautifulSoup
def blog_crawling():
    url = "https://search.naver.com/search.naver?where=post&sm=tab_jum&query=%ED%99%8D%EB%8C%80+%EB%A7%9B%EC%A7%91"
    response = requests.get(url)
    soup = BeautifulSoup(response.text, 'html.parser')
    blog_post_list = []
    for links in soup.select('li.sh_blog_top > dl'):
        title = links.select('dt > a')
        content = links.select('dd.sh_blog_passage')
        author = links.select('dd.txt_block a')
        title = title[0].get('title')
        content = content[0].text
        author = author[0].text
        blog_post = {'author': author, 'title': title, 'content': content} # 블로그 데이터를 사전으로 만들어주었습니다.
        blog_post_list.append(blog_post) 
    return blog_post_list
    
    
blog_post_list = blog_crawling()

4.1 step 5

추출한 데이터를 엑셀에 저장하도록 할께요.


xxxxxxxxxx
import csv
def save_data(blog_post):
    keys = blog_post[0].keys()
    with open('blog_crawling.csv', 'w') as file:
        writer = csv.DictWriter(file, keys) 
        writer.writeheader()
        writer.writerows(blog_post) 
blog_post_list = blog_crawling() 
save_data(blog_post_list)

4.1 step 6

위의 코드는 검색 결과 중 1페이지만 저장했습니다.

여러 페이지를 저장할 수 있게 코드를 수정해볼께요.


xxxxxxxxxx
def blog_crawling(page=1):
    url = "https://search.naver.com/search.naver?date_from=&date_option=0&date_to=&dup_remove=1&nso=&post_blogurl=&post_blogurl_without=&query=%ED%99%8D%EB%8C%80%20%EB%A7%9B%EC%A7%91&sm=tab_pge&srchby=all&st=sim&where=post&start={}".format(page)
    
blog_post_list = []
for i in range(1, 100, 10):
    blog_post_list.extend( blog_crawling(page=i) )
    time.sleep(2)
save_data(blog_post_list)

100개 블로그의 데이터가 저장됩니다!

네이버 블로그 크롤링 전체 코드


xxxxxxxxxx
import csv
import requests
import time
from bs4 import BeautifulSoup
def blog_crawling(page=1):
    url = "https://search.naver.com/search.naver?date_from=&date_option=0&date_to=&dup_remove=1&nso=&post_blogurl=&post_blogurl_without=&query=%ED%99%8D%EB%8C%80%20%EB%A7%9B%EC%A7%91&sm=tab_pge&srchby=all&st=sim&where=post&start={}".format(page)
    response = requests.get(url)
    soup = BeautifulSoup(response.text, 'html.parser')
    blog_post_list = []
    for links in soup.select('li.sh_blog_top > dl'):
        title = links.select('dt > a')
        content = links.select('dd.sh_blog_passage')
        author = links.select('dd.txt_block a')
        title = title[0].get('title')
        content = content[0].text
        author = author[0].text
        blog_post = {'author': author, 'title': title, 'content': content}
        blog_post_list.append(blog_post)
    return blog_post_list
def save_data(blog_post):
    keys = blog_post[0].keys()
    with open('blog_crawling.csv', 'w') as file:
        writer = csv.DictWriter(file, keys)
        writer.writeheader()
        writer.writerows(blog_post)
blog_post_list = []
for i in range(1, 100, 10):
    blog_post_list.extend( blog_crawling(page=i) )
    time.sleep(2)
save_data(blog_post_list)

참고사이트 : https://www.w3schools.com/html/ 참고글 : 파이썬 requests 라이브러리 예제 - http://docs.python-requests.org/en/master/user/quickstart/

'파이썬' 카테고리의 다른 글

파이썬 정규표현식 배워보기 (4)	2021.01.09
파이썬 - 데이터 분석 라이브러리 (numpy, pandas, matplotlib) 익히기 (4)	2019.04.24
파이썬 기초 문법 정리 (3)	2019.04.11

소프트웨어 이야기

파이썬 크롤링 시작하기 - html 구조와 간단한 크롤링

html 간단한 구조

css란?

크롤링

네이버 블로그 크롤링 해보기

1. html이란?

index.html

1.1 기본 태그 - html, head, body

1.2 기본 태그 (문자) - p, h1

1.3 기본 태그 활용해보기 - img, a href, input

index.html

문제 1.1 html을 새로 만들고, 태그를 3개 넣어보세요.

문제 1.2. html을 새로 만들고 를 써서 구글로 이동하는 링크를 만들어보세요.

2. css - html 스타일링

style.css

index.html

문제 2.1 - html을 새로 만들고, css가 적용된 태그를 만들어보세요.

2.1 html, css - id와 class의 차이점

index.html

style.css

2.3 CSS - 자식 태그에 접근하기

3. 크롤링하기

3.1.1 파이썬 라이브러리 설치

3.1.2 requests 라이브러리

3.2 Beautiful Soup 써보기

3.2.1 Beautiful Soup - find, select 차이점. requests 사용

문제 3.1 - Beautiful Soup를 써서 태그만 골라서 출력해보세요.

3.3 Chrome 써서 원하는 태그 쉽게 찾기

4. 네이버 블로그 크롤링 하기

4.1 크롤링 함수 만들기

4.1 step 1

4.1 step 2

4.1 step 3

4.1 step 4

4.1 step 5

4.1 step 6

네이버 블로그 크롤링 전체 코드

'파이썬' 카테고리의 다른 글

+ Recent posts

티스토리툴바

문제 1.1 html을 새로 만들고,
태그를 3개 넣어보세요.

문제 2.1 - html을 새로 만들고, css가 적용된
태그를 만들어보세요.