CodeGym /행동 /Python SELF KO /웹 페이지에서 CSS 셀렉터를 사용한 요소 검색

웹 페이지에서 CSS 셀렉터를 사용한 요소 검색

Python SELF KO
레벨 31 , 레슨 4
사용 가능

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 페이지에 명언이 있다면:

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>

이를 얻는 방법은 다음과 같아:

Python

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에 열 가지 클래스가 있을 때 어떻게 해야 하는지 똑똑한 네 머리가 알고 있도록, 몇 가지 예제를 통해 연습해보자. 셀렉터는 페이지의 데이터를 더 구체적으로 검색하는 데 사용할 수 있어. 원하는 데이터를 딱 집어내기 위해 셀렉터를 조합할 수도 있어.

클래스 및 태그 셀렉터

Python

# 메뉴 섹션에서 링크 모두 찾기
menu_links = soup.select('nav.menu a')

for link in menu_links:
    print(link['href'])

ID 셀렉터

Python

# 페이지의 주요 제목 추출
main_heading = soup.select_one('#main-heading')
print(main_heading.text)

셀렉터 조합

Python

# 강조된 섹션에서 모든 문장 찾기
highlighted_sentences = soup.select('.highlighted p')

for sentence in highlighted_sentences:
    print(sentence.text)

4. 오류와 피하는 방법

스크레이퍼로서의 일이 항상 커피 한 잔처럼 간단하지는 않을 거야. 다음과 같은 경우 CSS 셀렉터가 작동하지 않을 수 있어:

  • 페이지가 동적인 콘텐츠를 가지고 있고, 필요한 요소들이 JavaScript를 통해 로드되는 경우.
  • 존재하지 않는 셀렉터에 접근하려는 경우 (예: 클래스나 ID 작성 중 오타가 있는 경우).
  • HTML 구조가 변경되어 원하는 요소를 찾기 어려운 상황.

이러한 오류를 피하려면 최신 및 안정적인 HTML 문서 버전을 사용하고, 셀렉터를 신중하고 정확하게 작성하도록 해야 해.

실무 응용

이제 CSS 셀렉터를 실제 데이터 추출 프로젝트에서 사용할 기회를 얻었어. 이 기술은 가격 분석 및 모니터링 도구, 뉴스 수집, 웹사이트 변경 내용 추적 등을 만드는 데 유용할 거야. CSS 스타일링 대신 HTML 구조를 기반으로 하기 때문에, 사이트가 CSS 덕분에 외형을 변경하더라도 코드는 여전히 작동할 수 있다는 점이 장점이지.

1
Опрос
BeautifulSoup와의 첫 만남,  31 уровень,  4 лекция
недоступен
BeautifulSoup와의 첫 만남
BeautifulSoup와의 첫 만남
코멘트
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION