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

CSS란?

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


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

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


기본 CSS 선택자​

1. 요소 선택자​

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

  • 예: p 선택자는 모든 <p> 요소를 선택합니다.

HTML: paragraph 1, paragraph 2
<p>paragraph 1</p>
<p>paragraph 2</p>
CSS: paragraph 1, paragraph 2 선택
p {
  color: blue;
}

2. 클래스 선택자​

  • .을 사용하여 특정 클래스를 가진 요소를 선택합니다.

  • 예: .classname 선택자는 클래스 이름이 "classname"인 모든 요소를 선택합니다.

HTML: 클래스명 classname을 가진 2개의 p 요소
<p class="classname">paragraph 1</p>
<p class="classname">paragraph 2</p>
CSS
.classname {
  background-color: yellow;
}

3. ID 선택자​

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

  • 예: #idname 선택자는 ID가 "idname"인 요소를 선택합니다.

HTML: ID명 idname을 가진 p 요소
<p id="idname">paragraph 1</p>
CSS: ID가 idname인 요소 선택
#idname {
  font-size: 24px;
}

4. 속성 선택자​

  • [속성=값] 형태로 특정 속성을 가진 요소를 선택합니다.

  • 예: [type="text"] 선택자는 type="text" 속성을 가진 모든 요소를 선택합니다.

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

복합 선택자​

1. 자손 선택자​

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

  • 예: div p는 <div> 내의 모든 <p> 요소를 선택합니다.

HTML: div 내 p 요소 2개
<div>
  <p>paragraph 1</p>
  <p>paragraph 2</p>
</div>

<p>paragraph 3</p>
CSS: paragraph 3 미선택
div p {
  color: red; 
}

2. 자식 선택자​

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

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

HTML: ul 내 li 자식 요소 2개
<ul>
  <li>list 1</li>
  <li>list 2</li>
</ul>
CSS: list 1, list 2 선택
ul > li {
  color: green;
}

BeautifulSoup CSS 선택자 사용법​

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

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)

CSS에 대한 더 자세한 내용은 CSS 입문 강의에서 확인할 수 있습니다.


실습​

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