웹페이지 크롤링 + CSS 메소드를 이용하여 원하는 Data 추출 하기

 

안녕하세요, Davey 입니다. 오늘은 CSS 함수를 이용하여, 웹페이지에서 원하는 Data를 추출하는 법에 대해서 포스팅할 예정입니다. 이전에 설명드린 내용은, BeautifulSoup의 find와 find_all 함수를 이용하여, 원하는 Data를 찾았다면, 이번에는 select 와 select_one 함수로 구현한다라고 생각하시면 됩니다. 그럼 차근 차근 하나 씩 설명 드리도록 하겠습니다. 

 

1. CSS (Cascading Style Sheets) 란?

- 종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있습니다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 상당히 높습니다.

 

- 마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있는데요, 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있습니다.

 

- 현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다고 하네요. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있습니다. 저한테는 약간은 새로운 내용이라, 좀 더 공부가 필요하다고 생각합니다.

2. Select & Select_one 함수 이해하기 

: 위에서 말씀드린대로, Select & Select_one 함수로 원하는 Data를 추출하는 방식을 설명 드릴려고 합니다. 일단 본격적인 코드 구현 전에, 크롤링을 원하시는 웹사이트를 선정을 하셔야합니다. 원하는 웹사이트 선정 및 기본 패키지 선언은 아래 Link에서 참조 하시면 됩니다. 

 

관련 내용 참조 - 웹페이지 분석 + 크롤링 - id 와 class 속성을 이용하여 원하는 Data를 추출하기
davey.tistory.com/592

[파이썬 프로그래밍 + Davey식 파이썬 강좌] 웹페이지 분석 + 크롤링 - id 와 class 속성을 이용하여

- 그럼 위 Link에 연결되어 있는 내용을 숙지했다라는 전제하에 설명하도록 하겠습니다. 아래 코드와 함께 Line By Line으로 설명 드리도록 하겠습니다. 

 

==================================================================================

 

# request, BeautifulSoup 패키지 선언하기

import requests
from bs4 import BeautifulSoup



# 희망하는 URL을 변수에 집어 넣고, 연결시키기
Targeted_URL = 'https://www.asiae.co.kr/article/2020101001220363691'
Requested01 = requests.get(Targeted_URL)



# BeautifulSoup을 이용하여, 파싱(parsing)하기

test_1 = BeautifulSoup(Requested01.text, 'html.parser')



# select_one 함수를 이용하여, 조건 값을 준 Tag와 일치하는 첫번째 항목을 Data를 추출

result01_class01 = test_1.select_one('div')
print(result01_class01)

 

==================================================================================

- 위 코드를 실행 시켜 보면, 아래와 같은 결과 값을 보실 수 있습니다. 즉, <div> Tag 를 가지고 있는 첫 번째 Data를 출력이 되는 것을 확인 하실 수 있습니다. 

 

 

- 그럼 select 함수를 사용하면 어떤 결과가 나오는지 한 번 알아보도록 하겠습니다. 수정된 코드만 아래와 같이 보여 드리도록 하겠습니다. 

 

==================================================================================

 

# select 함수를 이용하여, 조건 값을 준 Tag와 일치하는 모든 항목을 Data를 추출

result01_class01 = test_1.select('div')
print(result01_class01)

 

==================================================================================

 

- 그리고 실행 시켜 보면, 아래와 같이, <div> Tag 를 가지는 모든 항목들이 출력되는 것을 확인 하실 수 있습니다. 너무 방대한 내용이라, 중간 내용은 생략하였습니다. 직접 코드를 돌려보시면, 전체 크롤링 된 내용을 확인 하실 수 있습니다.

 

==================================================================================

[<div class="skip">
<a href="#container" title="본문 바로가기"><span>본문 바로가기</span></a>
</div>, <div class="bar_progressCont">
<div class="bar_progress">bar_progress</div>
</div>, <div class="bar_progress">bar_progress</div>, <div id="wrap">

 

-- 중략 --

 

<div class="area_footer">

<dl class="info_t01">

<dt>아시아경제</dt>

<dd>

<address>서울특별시 중구 충무로 29 아시아미디어타워 10-11층</address>

<span class="t_txt01">인터넷신문등록번호 : 서울 아00058</span>

<span class="t_txt02">등록일 : 2005.09.13</span>

<span class="t_txt03">발행·편집인 : 이의철</span><br>

<span class="t_txt04">청소년보호책임자 : 조병무</span>

<span class="t_txt05">전화번호 : 02) 2200-2114</span>

</br></dd>

</dl>

<p class="info_lst">

<span class="t_txt10">아시아경제의 모든 콘텐츠(기사)는 저작권법의 보호를 받는 바, 무단전재, 복사, 배포 등을 금합니다.</span>

<span class="t_txt11"><strong>ⓒ 아시아경제</strong> All rights reserved.</span>

</p>

</div>

</div>, <div class="area_footer">

<dl class="info_t01">

<dt>아시아경제</dt>

<dd>

<address>서울특별시 중구 충무로 29 아시아미디어타워 10-11층</address>

<span class="t_txt01">인터넷신문등록번호 : 서울 아00058</span>

<span class="t_txt02">등록일 : 2005.09.13</span>

<span class="t_txt03">발행·편집인 : 이의철</span><br>

<span class="t_txt04">청소년보호책임자 : 조병무</span>

<span class="t_txt05">전화번호 : 02) 2200-2114</span>

</br></dd>

</dl>

<p class="info_lst">

<span class="t_txt10">아시아경제의 모든 콘텐츠(기사)는 저작권법의 보호를 받는 바, 무단전재, 복사, 배포 등을 금합니다.</span>

<span class="t_txt11"><strong>ⓒ 아시아경제</strong> All rights reserved.</span>

</p>

</div>]

================================================================================== 

3. Select & Select_one 함수 내부 속성 값 이용하여, 원하는 Data 추출하기

: 2번 항목에 Select & Select_one 함수에 대해서 간단하게 설명 드렸다면, 이제는 내부 Property를 이용하여, 원하는 값을 출력하도록 하겠습니다. 여기에서도, id와 class 항목의 속성값을 이용하여, Data를 출력하는 걸로 하겠습니다.

 1) id 값을 이용하여 원하는 값 추출하기

: id 값을 이용하기 위해서는 "#id 속성값" 의 Form으로 구성하여, select 함수를 사용하여야 합니다. 쉬운 예를 돕기 위해서 아래와 같이 예제 코드를 구성하였습니다. 

 

==================================================================================

 

# id 속성 값을 이용하여, 원하는 Data 출력하는 코드 구현

result01_class01 = test_1.select('#dablewidget_RoOJxDXm')


# result01_class01 값을 하기 위해서 출력 함수 이용
print(result01_class01)

==================================================================================

 

- 위 코드를 실행시켜 보면, 아래와 같이 id (dablewidget_RoOJxDXm) 를 가지는 Data 값이 출력 되는 것을 확인 할 수 있습니다. 

 

 2) class 값을 이용하여 원하는 값 추출하기

: class 값을 이용하기 위해서는 ".class 속성값" 의 Form으로 구성하여, select 함수를 사용하여야 합니다. 쉬운 예를 돕기 위해서 아래와 같이 예제 코드를 구성하였습니다. 

 

==================================================================================

# id 속성 값을 이용하여, 원하는 Data 출력하는 코드 구현

result01_class01 = test_1.select('.tit01')



# result01_class01 값을 하기 위해서 출력 함수 이용
print(result01_class01)

 

==================================================================================

 

- 위 코드를 실행시켜 보면, 아래와 같이 class (tit01) 를 가지는 Data 값이 출력 되는 것을 확인 할 수 있습니다. 아래 snap shot에는 하나만 나왔지만, 관련 내용을 가진 항목이 1개 이상이면, 여러 개가 출력되는 점 참조 하시면 됩니다. 만약 하나만 출력하고 싶으면, select_one 함수를 사용하셔야 합니다.

 

3) 1차 하위 값 출력 과 2차 하위 출력 이해하기

: 1, 2번 항목에서 사용하는 방법은, 1차원적인 방법입니다. 즉, class 와 id의 속성값을 가지는 tag에 속해있는 data만 추출하는 것입니다. 그러면, 조건 값을으로 부여한, tag 의 1차 or 2차 하위 값 출력을 위해서는 어떻게 코드를 구현해야되는지에 대해서 설명 드리도록 하겠습니다.

 

 - 1차 하위 값 출력

 : select( 태그 값1 > 태그 값2) 으로 구현 해주셔야 합니다. 쉬운 예를 돕기 위해서 아래와 같이 코드를 구현해보았습니다. 

 

==================================================================================

 

# class 속성 값을 가지는 Tag 안에 1차 하위에 위치하는 <p> 태그를 가지는 Data 추출하기
result01_class01 = test_1.select_one('.article_view > p')


# result01_class02 = result01_class01.find('h3')
print(result01_class01)

 

==================================================================================

- 위 코드를 실행을 시켜보면, "class=article_view" 에 해당하는 항목 바로 하위에는 <p> 태그가 없기 때문에, 아무런 값도 출력이 되지 않는 걸 확인 하실 수 있습니다.

 

 

 - n차 하위 값 (하위 모든 값) 출력

 : select( 태그 값1 태그 값2) 으로 구현 해주셔야 합니다. 쉬운 예를 돕기 위해서 아래와 같이 코드를 구현해보았습니다.

 

==================================================================================

# class 속성 값을 가지는 Tag 안에 n차 하위 값 (하위 모든 값) 중에 <p> 태그를 가지는 Data 추출하기

result01_class01 = test_1.select_one('.article_view p')


# result01_class02 = result01_class01.find('h3')
print(result01_class01)

 

 

==================================================================================

- 위 코드를 실행을 시켜보면, "class=article_view" 에 해당하는 항목의 그룹에서, <p> 태그를 가지는 항목을 출력하는 것이기에, 제일 처음 <p> tag 항목이 출력 되는 걸 확인 하실 수 있습니다. 모든 <p> 태그를 출력하시고 싶으시면, select_one 대신, select 함수를 사용하시면 됩니다.

 

 

 

4) 속성값 머리값, 끝값을 통해서 조건 값 부여하기

 : class나 id의 속성값을 모두 입력하지 않고, 머리값이나 끝값을 줘서 출력하는 방법도 크롤링 작업할 때 유용하다고 생각합니다. 그래서 이 부분을 설명하고, 마지막으로 여러 출력 값 중에 순번으로 원하는 항목을 출력하는 법도 같이 설명 드리도록 하겠습니다. 

 

 

 - 머리값으로 조건 속성 값 부여 : select('div[class^='article'])

 - 끝값 조건 속성 값 부여 : select('div[class$='article'])

 

 - 그리고 마지막으로, 여러 항목 중에 순번으로 값을 추출할 때는 아래 코드 사용하시면 됩니다. 

  : select('div.article_view:nth-child(원하는 순번)')

 

 이상입니다. 사실 HTML이라는 단어는 너무 나도 많이 들었고, 대학교 때도, 수업 중에 한 번 정도는 들어봤던 거 같습니다. 하지만, CSS는 듣기는 했는데, 어떤 것인지에 대해서 잘 모르는 상태여서, 이번 계기로 여러가지를 배웠다라고 생각합니다. 유튜브나 블로그 그리고 검색 엔진을 통해서 너무나도 많은 내용이 있다는 게 너무나도 다행이라고 생각합니다. 하지만 반대로, 너무 많은 Information이 있기에, 구별해서 봐야 되는데, 어떤 것이 좋고 나쁜 것인지를 판단하기가 좀 시간이 걸린다고 생각합니다. 그래서 저는 차라리 제 블로그에 있으면 더 찾기가 쉽고, 이해하기도 쉽지 않을까라는 생각도 해봤습니다. 여러모로 저한테 도움이 된다라고 생각합니다. 그냥 작은 소망은 이런 도움이 저 에게만 국한되지 않고, 다른 분들에게도 도움이 되었으면 합니다. 그럼 여기에서 마무리 하도록 하겠습니다. 같이 공부하고, 같이 성장하시죠! 감사합니다.

 

 Posting이 조금이나마 정보 전달에 도움이 되셨길 빌며, 되셨다면, 구독, 댓글, 공감 3종 세트 부탁 드립니다. 감사합니다.

 

참조 자료

- ko.wikipedia.org/wiki/%EC%A2%85%EC%86%8D%ED%98%95_%EC%8B%9C%ED%8A%B8

[저작권이나, 권리를 침해한 사항이 있으면 언제든지 Comment 부탁 드립니다. 검토 후 수정 및 삭제 조치 하도록 하겠습니다. 그리고, 기재되는 내용은 개인적으로 습득한 내용이므로, 혹 오류가 발생할 수 있을 가능성이 있으므로, 기재된 내용은 참조용으로만 봐주시길 바랍니다. 게시물에, 오류가 있을때도, Comment 달아 주시면, 검증 결과를 통해, 수정하도록 하겠습니다.]