차근차근 떠올려보면,
우리는 게시판 페이지에서 게시물로 접근할 수 있는 URL을 얻고자 했다.
그래서 지금까지 beautifulSoup를 이용해 a태그 엘리멘트를 모두 찾아 냈었지만
(a 태그는 anchor 태그로 다른 페이지로 이동하는 기능을 한다)
9. <a> 태그 가지치기
사실 브라우저에서 웹페이지를 보면 게시물 말고도
다양한 링크(a 태그)가 있다는 걸 알 수 있다.
웹페이지 위, 아래, 좌, 우로 광고 링크나 그날의 인기 있는 컨텐츠가 있는 페이지 등으로 이동하는 링크 등등.
그래서 찾아낸 a 태그 엘리멘트 중에서도 소기의 목적대로 게시물에 접근하는 URL도 있지만
우리가 원하지 않은 페이지(광고, 목록, 게시판 페이지 등등)로 접근하는 엘리멘트도 함께 긁어졌다.
그래서 불필요한 페이지로 이동하는 엘레멘트는 걷어내고
게시물 페이지로 이동하는 URL를 뽑아보자.
beautifulSoup을 좀더 정교하게 사용해서.
10. 그래서 필요한 툴. 크롬의 개발자 도구.
크롬 브라우저에서 제공하는 개발자 도구(IE 엣지나 사파리 등의 다른 브라우저도 동일한 기능이 있다.)를 이용해서
게시물 페이지 URL을 src 속성으로 갖는 a 태그 엘리멘트와
그렇지 않은 엘리멘트의 특성을 구분해보도록 하자.
상황이 여의치 않으면 이전 글에서 살펴본 결과에서
게시물 페이지 URL을 src 속성으로 갖는 a 태그 엘리멘트와
그렇지 않은 엘리멘트를 구분하거나.
당장은 개발자 도구에서 일일이 URL을 찾을 필요없이
이전의 모든 a 태그 엘리멘트를 출력한 결과 중에서
게시물 제목을 둘러 싸고 있는 a 태그를 찾는게 더 편해 보일지도 모르겠지만
이후의 작업을 생각한다면 브라우저의 개발자 도구가 월등히 유용하다.
크롬 브라우저에서 제공하는 개발자 도구 기능은 아래 사진에서 확인하고 실행하자.
개발자 도구를 실행하면 위와 같이 구성되어 있을 것이다.
구성이 다르다면 오른쪽 위의 빨간 테두리로 표시되어 있는 Elements 탭을 클릭하자.
화면 구성과 기능을 짧게나마 설명하기 위해
Elements 탭을 클릭하고 표시되는 창은 공식적인 이름이 있겠지만
편의상 엘리멘트 창이라고 칭하자.
위의 화면에서 왼쪽 페이지 화면이 푸르게 보이는 것은
엘레멘트 창에서 선택되는 엘리멘트의 영역을 표시하기 때문이다.
만약 게시물 제목을 둘러 싸고 있는 a 태그 엘리멘트를 찾아 선택한다면
왼쪽 화면에서는 그에 해당하는 게시물 제목만 푸르게 표시될 것이다.
오른쪽 아래의 빨간 테두리는 엘리멘트 창에서 선택되는 엘리멘트의 뎁스별 엘리멘트를 표시한다.
그래서 현재 선택된 <div id="dgn_wrap" stype= .......> 태그는 <html> 태그 안에 <body> 태그 안에 위치하고 있다.
그럼 엘리멘트 창에서 게시물 페이지의 URL을 갖고 있는 a 태그를 찾아가보자.
둘러싸고 있는 태그가 많아 뎁스가 깊기는 하지만
왼쪽 푸른 색 표시를 따라 찾아가면 위와 같이 손쉽게 찾을 수 있다.
그리고 또 다른 게시물의 a 태그도 찾아보자.
11. 둘러 갈 것 없이 한방에 크롤링.
두개 태그 혹은 두개 제목을 덮고 있는 파란영역 사이에서 차이점을 발견했는가?
원래 계획대로라면 게시물 페이지의 URL을 긁어내고
그 결과 중에서 짤방을 포함하는 게시물의 URL을 구분해 내려했다.
하지만 두단계를 거칠 필요없이 짤방을 포함하는 게시물의 URL만
한방에 긁어낼 수도 있을 것 같다.
디씨 인사이드 게시판에서는 사용자가 작성한 게시물 본문 중에
이미지를 첨부하였다면 게시물 제목 앞에 액자 아이콘을 표시하고
이미지 첨부 없이 텍스트로만 작성하였다면 말풍선 아이콘을 표시한다.
(공지 같은 경우에는 느낌표 아이콘)
이런 특성은 우리가 웹서버에서 받은 html 소스 속에서도 그대로 구분되어 있을 것이다.
html 소스 속 태그들 사이에서 이런 차이가 발생하는 부분을 찾아낸다면
그 근처에서 짤방 게시물의 URL을 속성으로 갖는 a 태그도 찾아낼 수 있지 않을까?
게시물 제목마다 액자나 말풍선 아이콘이 있으니
적어도 이 아이콘들을 표시하는 태그들은 게시물 제목을 둘러싸고 있는 a 태그와 같은 레벨에 위치하거나
한두 뎁스 정도 밖에 차이나지 않겠지.
혹은 액자 아이콘과 말풍선 아이콘 중 하나를 표시하게 하는 값이 a 태그의 속성으로 들어가 있을지도 모른다.
그래서 다시 한번 질문. 두개의 태그 사이에서 차이점을 발견했는가?
12. 클라스가 다르다.
게시물 페이지로 이동하는 a 태그의 class 속성을 살펴보면
icon_pic_n과 icon_txt_n으로 서로 다르다!
(공지 게시물은 icon_notice로 설정되어 있다!)
다른 a 태그(게시판 페이지를 이동하거나 '글쓰기' 버튼의 a 태그, 광고 페이지로 이동하는 a 태그 등)들은
class 속성 값이 없거나 게시물 페이지로 이동하는 a 태그와 class 속성 값이 다르다.
이 class 속성 값은 액자 아이콘과 말풍선 아이콘을 표시하는 결정을 하는데
(class 속성 값은 구분자 역할을 하며 CSS나 자바 스크립트에서 해당 태그를 찾는데 사용한다.)
궂이 소스에서 icon_pic_n 이나 icon_txt_n 에 따라
아이콘을 다르게 표시하는 코드를 찾을 필요 없이 간단히 확인할 수 있다.
서버에서 받은 html 소스 코드를 별도의 파일로 저장한 후
icon_pic_n 을 icon_txt_n으로, 혹은 그 반대로 속성 값을 바꾸고
웹브라우저에서 렌더링을 시켜보자(웹브라우저에서 열어보자).
같은 게시물이지만 아이콘을 바꾸어 표시한다!
: a 태그의 class 속성 값이 icon_pic_n 일 때.
: 같은 a 태그의 class 속성 값을 icon_txt_n로 인위적으로 바꾸었을 때.
이제 어떤 코드를 짜야할지 감이 잡힌다.
앞서 파싱한 결과로 얻었던 a 태그들 중에서 class 속성 값이 icon_pic_n 인 태그들만 추려내고
거기서 href 속성 값을 읽어낸다면 짤방이 있는 게시물의 URL를 획득할 수 있다!
이전에 BeautifulSoup를 이용해서 a 태그 리스트를 만들었고 순회하며 출력하였다.
그 코드를 조금 수정해서 a 태그 중 class 속성 값이 icon_pic_n 인 태그를 출력해보자.
BeautifulSoup 객체의 find_all 메소드로 찾아낸 리스트는 bs4.element.Tag(이하 편의상 Tag)를 요소로 갖는데
dictionary(사전) 처럼 key를 입력하거나 get 메소드를 이용해 Tag의 속성값을 확인할 수 있다.
하지만 key를 사용할 때는 주의가 필요한데,
Tag에 존재하지 않는 key를 찾다가는 KeyError 예외가 발생한다.
Tag에 찾는 속성이 있는지 없는지 정확하지 않을때는 맘편히 get 메소드를 사용하도록 하자.
: find_all 메소드로 모든 a 태그를 찾았다. 그 중에 class 속성이 icon_pic_n 인 a 태그의 href를 출력.
line 11 : a 태그 리스트를 순회.
line 13~15 : a 태그에 class 속성이 있는지, 있다면 icon_pic_n 인지 비교한 후 href 속성 값 즉, 게시물 URL을 글 제목과 함께 출력.
이렇게 짤방이 있는 게시물 URL 을 찾아 봤다.
콘솔에 결과로 출력된 URL 중 어떤 페이지를 가더라도 짤방이 첨부되어 있을 것이다.
다음에는 이렇게 모은 짤방 게시물 URL을 갖고 본격적으로 짤방을 모아보도록 하자.
'python > beautifulSoup' 카테고리의 다른 글
| 파이썬(python) - 품절 상품의 입고 여부를 확인 해보자(Nike-Uptempo) (4) | 2017.04.30 |
|---|---|
| 파이썬(Python) - 게시물 페이지에서 이미지를 다운받아 저장하기. (19) | 2016.11.21 |
| 파이썬(Python) - 게시판(갤러리)에서 게시물 페이지로! (3) | 2016.10.04 |
| [python] BeautifulSoup 에서 UnicodeEncodeError Exception(예외), 특히 cmd에서 cp949 문제. (0) | 2016.08.23 |
| 파이썬(Python) - beautifulSoup 으로 html 파싱 (17) | 2016.07.16 |