1. CSS 셀렉터 다시보기
HTML 페이지가 단순히 손가락 한 번 튕기는 걸로 비밀을 드러내는 게 아니라, 정확한 CSS 셀렉터를 통해 열리는 세계에 오신 걸 환영해. CSS 셀렉터가 단순히 페이지 스타일링 (예를 들어, 사이트가 낙서 같은 노트로 보이지 않도록)만을 위해 필요한 거라고 생각했다면, 이제 스크레이핑의 새로운 눈을 떠야 할 때야. 오늘 우리는 CSS 셀렉터가 데이터를 찾고 추출하는 데 가장 좋아하는 도구가 될 수 있는 방법을 알아볼 거야.
CSS 셀렉터는 마치 애칭처럼 HTML 요소들에 접근할 수 있게 해. 페이지에서 처리하고자 하는 요소들을 정확히 지정하는 데 도움을 줘. HTML 페이지가 미로라면, CSS 셀렉터는 출구를 찾을 수 있는 빨간 실과 같아.
CSS 셀렉터 예제
-
태그:
p
— 모든<p>
태그 (문단)를 선택해. -
클래스:
.classname
— 특정 클래스가 지정된 모든 요소를 선택해. -
ID:
#idname
— 특정 ID를 가진 요소를 선택해. -
조합:
div > p
—<div>
의 자식 요소인 모든<p>
를 선택해.
2. BeautifulSoup에서 셀렉터 사용
CSS 셀렉터 없는 BeautifulSoup의 지루한 삶은 이제 안녕! 이제 새로운 접근 방식을 살펴보자. 예를 들어, 어떤 웹사이트에 좋은 명언들이 있고 그것들을 꼭 추출해야 한다고 상상해봐. 이 명언들로 면접에서 잘 보이기 위해서 말이야. 이럴 땐 select()
메서드를 사용하는데, 이 메서드는 바로 CSS 셀렉터와 함께 작동해.
select()
와 select_one()
메서드
select()
메서드는 셀렉터에 해당하는 모든 요소의 리스트를 반환해. 반면 select_one()
는 셀렉터에 해당하는 첫 번째 요소를 찾아줘. 마치 검색 엔진이 딱 네가 원하는 것만 반환해주는 것처럼 말이야.
HTML 페이지에 명언이 있다면:
<div class="quote">
<h2 class="author">푸쉬킨</h2>
<p class="text">훌륭한 푸쉬킨.</p>
<a href="https://example.com" class="link">더 읽기</a>
</div>
<div class="quote">
<h2 class="author">레닌</h2>
<p class="text">배우고, 배우고 또 배우라.</p>
<a href="https://example.com" class="link">더 읽기</a>
</div>
<div class="quote">
<h2 class="author">스탈린</h2>
<p class="text">문제가 있는 사람은 문제가 있고, 사람이 없으면 문제가 없다.</p>
<a href="https://example.com" class="link">더 읽기</a>
</div>
이를 얻는 방법은 다음과 같아:
from bs4 import BeautifulSoup
import requests
# HTML 페이지 코드 가져오기
response = requests.get('http://quotes.toscrape.com/')
soup = BeautifulSoup(response.text, 'html.parser')
# CSS 셀렉터를 사용해 모든 명언 찾기
quotes = soup.select('.quote')
for quote in quotes:
text = quote.select_one('.text').get_text()
author = quote.select_one('.author').get_text()
print(f'명언: {text}\\n작가: {author}\\n')
정말 마법 같은 편리함이지 않아? .quote
클래스는 모든 명언으로 설정된 요소들을 가져오게 도와주고, .text
와 .author
는 명언의 텍스트와 작가를 추출할 수 있는 자식 요소야.
3. CSS 셀렉터로 데이터 검색 예제
div에 열 가지 클래스가 있을 때 어떻게 해야 하는지 똑똑한 네 머리가 알고 있도록, 몇 가지 예제를 통해 연습해보자. 셀렉터는 페이지의 데이터를 더 구체적으로 검색하는 데 사용할 수 있어. 원하는 데이터를 딱 집어내기 위해 셀렉터를 조합할 수도 있어.
클래스 및 태그 셀렉터
# 메뉴 섹션에서 링크 모두 찾기
menu_links = soup.select('nav.menu a')
for link in menu_links:
print(link['href'])
ID 셀렉터
# 페이지의 주요 제목 추출
main_heading = soup.select_one('#main-heading')
print(main_heading.text)
셀렉터 조합
# 강조된 섹션에서 모든 문장 찾기
highlighted_sentences = soup.select('.highlighted p')
for sentence in highlighted_sentences:
print(sentence.text)
4. 오류와 피하는 방법
스크레이퍼로서의 일이 항상 커피 한 잔처럼 간단하지는 않을 거야. 다음과 같은 경우 CSS 셀렉터가 작동하지 않을 수 있어:
- 페이지가 동적인 콘텐츠를 가지고 있고, 필요한 요소들이 JavaScript를 통해 로드되는 경우.
- 존재하지 않는 셀렉터에 접근하려는 경우 (예: 클래스나 ID 작성 중 오타가 있는 경우).
- HTML 구조가 변경되어 원하는 요소를 찾기 어려운 상황.
이러한 오류를 피하려면 최신 및 안정적인 HTML 문서 버전을 사용하고, 셀렉터를 신중하고 정확하게 작성하도록 해야 해.
실무 응용
이제 CSS 셀렉터를 실제 데이터 추출 프로젝트에서 사용할 기회를 얻었어. 이 기술은 가격 분석 및 모니터링 도구, 뉴스 수집, 웹사이트 변경 내용 추적 등을 만드는 데 유용할 거야. CSS 스타일링 대신 HTML 구조를 기반으로 하기 때문에, 사이트가 CSS 덕분에 외형을 변경하더라도 코드는 여전히 작동할 수 있다는 점이 장점이지.
GO TO FULL VERSION