lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

pythonIntroCrawlingChapter1Title

pythonIntroCrawlingChapter2Title

pythonIntroCrawlingChapter3Title

pythonIntroCrawlingChapter4Title

from bs4 import BeautifulSoup

# HTML 코드를 문자열 변수로 저장
html = """
<html>
  <body>
    <div id="wrap">
      <h1 class="title">h1</h1>
      <p class="content">paragraph 1</p>
      <p class="content">paragraph 2</p>
    </div>
  </body>
</html>
"""

# 변수 soup에 BeautifulSoup 객체 저장
soup = BeautifulSoup(html, 'html.parser')

# soup.select로 클래스 이름이 "content"인 모든 요소를 선택
content_elements = soup.select('.content')

# content 클래스를 가진 2개의 p 요소 출력
print(content_elements)

# CSS란?

`CSS(Cascading Style Sheets)`는 웹 페이지의 레이아웃, 색상, 글꼴 등을 지정하고 디자인을 꾸미는 웹 페이지의 **옷**과 같은 역할을 합니다.

<br />

`CSS 선택자(CSS Selectors)`는 여러 요소로 구성된 HTML 문서에서 특정 요소를 선택하기 위한 패턴입니다.

웹 크롤링에서 CSS 선택자를 사용하면 원하는 데이터가 포함된 HTML 요소를 효율적으로 찾을 수 있습니다.

<br />

## 기본 CSS 선택자

### 1. 요소 선택자
  - HTML 요소의 이름을 사용하여 해당 요소를 선택합니다.

  - 예: `p` 선택자는 모든 `<p>` 요소를 선택합니다.
  ```html title="HTML: paragraph 1, paragraph 2"
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  ```

  ```css title="CSS: paragraph 1, paragraph 2 선택"
  p {
    color: blue;
  }
  ```

<br />

### 2. 클래스 선택자
  - `.`을 사용하여 특정 클래스를 가진 요소를 선택합니다.

  - 예: `.classname` 선택자는 클래스 이름이 "classname"인 모든 요소를 선택합니다.
  ```html title="HTML: 클래스명 classname을 가진 2개의 p 요소"
  <p class="classname">paragraph 1</p>
  <p class="classname">paragraph 2</p>
  ```

  ```css title="CSS"
  .classname {
    background-color: yellow;
  }
  ```

<br />

### 3. ID 선택자
  - `#`을 사용하여 특정 ID를 가진 요소를 선택합니다.

  - 예: `#idname` 선택자는 ID가 "idname"인 요소를 선택합니다.
  ```html title="HTML: ID명 idname을 가진 p 요소"
  <p id="idname">paragraph 1</p>
  ```
  
  ```css title="CSS: ID가 idname인 요소 선택"
  #idname {
    font-size: 24px;
  }
  ```

<br />

### 4. 속성 선택자
  - `[속성=값]` 형태로 특정 속성을 가진 요소를 선택합니다.

  - 예: `[type="text"]` 선택자는 `type="text"` 속성을 가진 모든 요소를 선택합니다.
  ```html title="HTML: type 속성이 text인 input 요소"
  <input type="text">
  ```

  ```css title="CSS: type 속성이 text인 input 요소 선택"
  input[type='text'] {
    border: 1px solid black;
  }
  ```

<br />

## 복합 선택자

### 1. 자손 선택자
  - 두 요소 사이에 공백을 사용하여, 특정 요소의 자손 요소를 선택합니다.

  - 예: `div p`는 `<div>` 내의 모든 `<p>` 요소를 선택합니다.
  ```html title="HTML: div 내 p 요소 2개"
  <div>
    <p>paragraph 1</p>
    <p>paragraph 2</p>
  </div>

  <p>paragraph 3</p>
  ```

  ```css title="CSS: paragraph 3 미선택"
  div p {
    color: red; 
  }
  ```

<br />

### 2. 자식 선택자
  - `>`를 사용하여, 특정 요소의 직접 자식 요소만을 선택합니다.

  - 예: `ul > li`는 `<ul>`의 직접적인 자식인 `<li>` 요소만을 선택합니다.

  ```html title="HTML: ul 내 li 자식 요소 2개"
  <ul>
    <li>list 1</li>
    <li>list 2</li>
  </ul>
  ```

  ```css title="CSS: list 1, list 2 선택"
  ul > li {
    color: green;
  }
  ```

<br />

## BeautifulSoup CSS 선택자 사용법

BeautifulSoup 라이브러리에서는 `soup.select` 메서드로 CSS 선택자를 사용할 수 있습니다.

```python title="BeautifulSoup CSS 선택자 사용 예시"
from bs4 import BeautifulSoup

html = """
<html>
  <body>
    <div id="wrap">
      <h1 class="title">h1</h1>
      <p class="content">paragraph 1</p>
      <p class="content">paragraph 2</p>
    </div>
  </body>
</html>
"""

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

# 클래스 이름이 "content"인 모든 요소를 선택
content_elements = soup.select('.content')
print(content_elements)
```

<br />

CSS에 대한 더 자세한 내용은 <a href="https://www.codefriends.net/courses/web-intro-css" target="_blank">CSS 입문 강의</a>에서 확인할 수 있습니다.

<br />

## 실습

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