[Crawler] 파이썬 웹 크롤링(기본편) 3 - CSS 선택자

파이썬

파이썬 웹 크롤링(기본 편) 3 - CSS 선택자

---

웹 크롤러를 만들 때 CSS 선택자는 매우 유용한 도구 중 하나이다. CSS 선택자를 사용하면 특정 HTML 요소를 쉽게 선택하고 추출할 수 있다. BeautifulSoup과 같은 라이브러리를 사용하면 파이썬으로 웹 크롤러를 작성할 때 css 선택자를 활용할 수 있다.

 

CSS란 무엇인가?

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하는 스타일 시트 언어이다. HTML이 웹 페이지의 구조를 정의한다면, CSS는 웹 페이지의 디자인 및 레이아웃을 담당한다. 즉, HTML로 작성된 문서의 스타일을 꾸미고 표현하는 역할을 한다. CSS는 다음과 같은 주요 기능을 제공한다.

 

1. 페이지 스타일링 - CSS는 텍스트의 색상, 글꼴, 크기, 간격, 배경 등과 같은 요소들의 시각적인 스타일을 정의할 수 있다.
2. 레이아웃 조정 - CSS를 사용하면 웹 페이지의 레이아웃을 조정할 수 있다. 요소들의 위치, 정렬, 간격 등을 설정하여 사용자에게 보기 좋은 화면을 제공할 수 있다.
3. 반응형 웹 디자인 - CSS는 미디어 쿼리(Media Query)와 함께 사용하여 화면 크기에 따라 다른 스타일을 적용하여 반응형 웹 디자인을 구현할 수 있다.
4. 애니메이션 및 전이 효과 - CSS를 사용하면 웹 페이지에 간단한 애니메이션과 전이(transition) 효과를 부여할 수 있다.
5. 다양한 선택자 - CSS는 HTML 요소를 선택하기 위한 다양한 선택자를 제공하여 원하는 대상을 정확하게 선택할 수 있다.

 

CSS 선택자

태그 선택자

HTML	선택자
<h1>파이썬으로 크롤랑하기<h1>	h1{ color : green; }

태그 선택자는 HTML 요소의 태그 이름을 사용하여 스타일을 적용한다. 또한, 모든 해당 태그에 동일한 스타일이 적용된다.

 

 

ID 선택자

HTML	선택자
<div id = "articleBody">본문 내용입니다.</div>	#articleBody{ color : green; }

ID 선택자는 특정 HTML 요소에 고유한 ID 속성이 할당된 경우에 사용된다, 또한 ID는 한 페이지에서 고유해야 하며 # 기호를 사용하여 지정된다.

 

 

class 선택자

HTML	선택자
<div class = "info_group">뉴스 목록입니다.</div>	.info_group{ color : green; }

Class 선택자는 특정 HTML 요소에 클래스(class) 속성이 할당된 경우에 사용된다. 또한 여러 요소가 동일한 클래스를 가질 수 있으며(다중 선택 가능). 기호를 사용하여 지정된다.

 

자식 선택자

HTML	선택자
<div class = "logo_sports">     <span></span> </div>	.logo_sports > span
<div class = "news_headline>     <h4>제목</h4> </div>	.news_headline > h4

자식 선택자는 특정 요소의 자식 요소에만 스타일을 적용한다. 부모 요소와 자식 요소를 나타날 때 > 기호를 사용한다. 따라서, 위의 보기에서 첫 번째는 클래스가 logo_sports인 요소의 자식 요소 중에 span 태그를 선택한다. 두 번째는 클래스가 news_headline인 요소의 자식 요소 중에서 h4태그를 선택한다.