안녕하세요 저번 글에 이어서 이번 글에서는 BeautifulSoup을 이용한 HTML정보 찾기를 공부해보려고 합니다.
저는 이래저래 이 부분을 총 3번 공부했는데요, 두번째 공부할때에도 이해가 잘 안되더라구요.. 그래서 이해가 어느정도 될 때까지 책에 나온 예제들을 공부하면서 실습하고 다시 공부해보았습니다. (오늘 잘 설명을 할 수 있을지..걱정이..ㅠ 책도 이해가 좀 힘들게 나와있더라구요..)
즉 바로 이해가 안될 수 있지만!! 하다보면 익숙해지면서 언젠가 이해가 될 수 있어요..!
(1) BeautifulSoup 라이브러리 불러오기
저번 글에서 했던 "html 다운로드"에 이어서 작성해주면 됩니다.
from bs4 import BeautifulSoup 을 해주면 되는데요
만약 설치가 안되어 있어 오류가 뜬다면 bs4 패키지를 설치해주시면 됩니다.
앞서 내려받은 html은 여러 문자들이 연결된 문자열 데이터입니다.
이를 BeautifulSoup이라는 라이브러리를 통해 html 변수에 있는 정보를 HTML 형식에 맞게
해석해서 원하는 정보를 찾을 수 있습니다.
! 여기서 B 와 S를 반드시 대문자로 써주세요 !
(2) HTML 정보 찾기 - 태그 속성 활용
BeautifulSoup 명령어 select('조건')을 이용하면 HTML내에서 입력한 조건을 만족하는 태그를 모두 선택할 수 있습니다.
저는 직접 이 글을 보는 분들이 바로 실습을 할 수 있도록 저번 글에서도 사용했던
네이버 홈페이지를 이용해 실습 해보겠습니다.
(책에서는 실제 html이 아닌 저자가 직접 만든 html 글을 가지고 예제를 만들었는데요, 직접 돌려볼 수 없어서 이해가 더 힘들더라구요. 그래서 이번 글에서는 실제 네이버 홈페이지 html 을 이용해보겠습니다.)
이번 장에서 이론?을 위주로 보시고 다음 글에서 멜론 웹페이지로 실습을 해보다보면 더 적용이 잘 될거예요.
예제2-1. 태그명으로 태그찾기
select('조건')을 이용한 예제들인데요 조건에 태그명을 입력한 경우입니다.
첫번째로는 soup에 담긴 HTML페이지에서 태그명이 'span'인 태그를 모두 찾아 tags_span변수에 저장했고, 두번째로는 태그명이 'p'인 태그를 모두 찾아 tags_p 변수에 저장했습니다.
저는 tags_span을 출력해보았는데요, 실제로 네이버 홈페이지에서 태그명이 'span'인 정보들이 출력된것을 확인할 수 있습니다.
예제2-2. id와 class로 태그 찾기
이번에는 아이디값을 이용해 태그 정보를 찾아보려고합니다.
위의 경우 id 값이 "header" 인 태그를 모두 찾아 ids_header에 저장한 뒤 ids_header을 출력한 모습입니다. (제가 네이버 홈페이지 html을 보고 임의로 정한 값입니다. 큰의미x)
id값을 select()안 조건으로 사용할때에는 '#'을 사용해주면 됩니다.
위의 경우 '.opt_item'을 이용해보았는데요, 이 경우 class 명이 'opt_item'인 태그들을 찾을 수 있습니다. ('opt_item' 또한 제가 네이버 웹페이지 html을 보고 임의로 선택한 class정보입니다.)
그리고 class명 조건을 태그명과 함께 지정할 수도 있습니다. 'span.opt_item'의 형식으로 사용하면 되는데요, 이는 태그명이 'span'이면서 class 명이 'opt_item'인 태그를 조건으로 지정하는 것입니다.
(3) HTML 정보 찾기 - 상위 구조 활용
앞서 (2)에서는 태그 속성을 활용하여 정보를 찾았다면 (3)에서는 구조를 활용한 정보찾기를 해 볼 예정입니다.
예제 3-1. 태그 구조로 위치 찾기 1
(2)의 예제2-2는 네이버 홈페이지 html에서 span.opt_item 태그를 찾아보았는데요, 이번엔 그 태그의 상위구조를 이용해 특정 정보만을 찾아보는 것을 연습해보려고합니다.
(2)의 예제 2-2에서 찾은 span.opt_item 태그는 총 5개인데요, 'span.side_opt_area' 라는 상위태그를 이용하면 3개의 태그만을 골라낼 수 있습니다. 출력이 안된 나머지 2개의 태그는 span이라는 태그명과 opt_item이라는 class명을 가지고 있지만 상위태그가 span.side_opt_area 가 아니기 때문에 출력이 되지 않은 것입니다.
이렇게 바로 위의 상위 태그를 입력할때는 '>' 를 사용합니다.
상위구조를 보는 방법은 실제 html 에서 ctrl +F 를 이용해 찾을 수도 있고, [검사]기능을 이용해 찾을수도 있으며 'copy selector'을 통해서도 찾을 수 있습니다. 이 부분은 오늘 글 아래에서 추가해놓겠습니다.*
(위 사진에서 selector 코드는 span.opt_item 태그 중 첫번째 태그의 셀렉터 코드입니다.)
예제 3-2. 태그 구조로 위치 찾기 2
예제 3-1처럼 바로 위의 상위태그를 이용하는 것이 아닌 몇 단계 위의 상위태그를 이용하는 방법도 있습니다.
바로 위의 상위태그를 이용할 때는 주로 '>' 를 사용하지만 몇 단계 위의 상위태그를 이용할 때에는 띄어쓰기를 사용합니다. '>'를 쓰게 되면 실행 완료가 되지 않더라구요. (파이썬 툴마다 차이가 있을 수 있습니다.)
* 참고
앞선 글에서 알려드렸듯, 원하는 부분에서 마우스 커서를 올려두고 오른쪽 버튼을 누른 뒤,
검사를 누르면 해당 html 이 나옵니다.
여기서 html 에 커서를 갖다 놓은 뒤 오른쪽 버튼을 누루고 - copy를 선택 - copy selector 를 선택하면 해당 html 정보의 selector 코드가 복사가 됩니다. 이를 파이참에 ctrl+V 를 하면 붙여넣기가 됩니다.
저는 예제를 공부하면서 궁금한 점이 생겼는데요, 바로 html 내에서의 띄어쓰기는 어떻게 파이참에서 써야 하나입니다. 예제 3-2에서 공부했듯, 띄어쓰기는 그저 띄어쓰기를 뜻하는 것이 아닌 상위구조를 구분해주는 기능으로 쓰입니다. 만약 class 명 혹은 id 명에 띄어쓰기가 있다면 그 부분을 "." 으로 대체해주면 됩니다.
위 사진의 경우 class명이 "list_nav type_empty" 인데요, 이를 파이참에서 표현을 한다면 "list_nav.type_empty" 로 표현하면 됩니다.
(4) 정보 가져오기 - 태그 그룹에서 하나의 태그 선택하기
마지막으로 html 을 이용해서 정보를 뽑아오는 걸 공부해볼건데요, 이 부분은 사실 다음 글에서 하는 멜론 실습부분을 하면 쉽게 이해되는 부분이라 간단히 말하고 넘어갈게요.
위에서 만든 span.opt_item 태그를 tags 라는 변수에 저장합니다. 그 후 tags[0] 을 통해 인덱스 번호로 하나의 태그를 tags_1 에 지정합니다. 이를 출력하면 span.opt_item 태그 중 첫번째 태그 정보가 출력이 됩니다. 이를 반복문으로도 활용할 수도 있습니다.
이렇게 보면 뭔가 싶지만 실제로 활용하면 감이 오실거예요!
다음 장에서는 멜론 차트 페이지에서 100위 가수, 곡 제목을 뽑는 실습을 해보려고 합니다.
댓글 없음:
댓글 쓰기