본문으로 건너뛰기
실습하기

중첩된 HTML 요소 다루기

HTML 요소가 중첩되었다는 것은 요소가 다른 요소 안에 포함되어 있다는 것을 의미합니다.

중첩된 요소
<div>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</div>

위의 예제에서 <div> 요소 안에 두 개의 <p> 요소가 중첩되어 있습니다.

이런 요소들을 다루는 것은 웹 크롤링에서 중요한 기술입니다.


중첩된 요소 탐색​

  1. 부모와 자식 관계 이해

    • HTML 요소들은 부모-자식 관계를 가질 수 있습니다.

    • 예를 들어, <div> 안에 있는 <p>는 <div>의 자식 요소입니다.

  2. 특정 경로의 요소 찾기

    • find() 또는 find_all()을 사용하여 특정 경로에 있는 요소를 찾습니다.

    • 예: soup.find('div').find('p')는 첫 번째 <div> 안의 첫 번째 <p>를 찾습니다.


예제: 중첩된 요소 추출​

중첩된 요소 추출
html_doc = """
<div>
  <p class="inner-text">
    First paragraph.
    <span>Text within a span</span>
  </p>
  <p class="inner-text">Second paragraph.</p>
</div>
"""

soup = BeautifulSoup(html_doc, 'html.parser')

# 첫 번째 div 내의 모든 p 태그 추출
for p in soup.find('div').find_all('p'):
    print(p.text)

속성을 활용한 추출​

  • 태그의 클래스, ID, 기타 속성을 사용하여 특정 요소를 추출합니다.

  • 예: soup.find_all('a', class_='external_link')는 클래스가 'external_link'인 모든 <a> 태그를 찾습니다.


CSS 선택자 사용​

  • BeautifulSoup에서는 select() 메소드를 사용하여 CSS 선택자를 활용할 수 있습니다.

  • 예: soup.select('div.content > p.paragraph')는 클래스가 'content'인 <div>의 직접 자식인 클래스가 'paragraph'인 <p>를 찾습니다.


예제: 복잡한 구조의 데이터 추출​

복잡한 구조의 데이터 추출
html_doc = """
<div class="content">
  <p class="paragraph">First paragraph in content.</p>
  <div class="inner-content">
    <p>Inner paragraph.</p>
  </div>
</div>
"""

soup = BeautifulSoup(html_doc, 'html.parser')

# 클래스가 'content'인 div 내의 모든 p 태그 추출
content_paragraphs = soup.select('div.content p')
for p in content_paragraphs:
    print(p.text)

실습​

화면 오른쪽 코드 실행 버튼을 누르고, 크롤링 결과를 확인하거나 코드를 수정해 보세요!

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!