웹 크롤링을 위한 CSS 필수 지식, 꼭 알아야 할 것들

웹 크롤링을 할 때, HTML과 더불어 CSS(Cascading Style Sheets)에 대한 이해도 매우 중요합니다.

CSS는 웹 페이지의 스타일을 정의하며, 크롤링할 때 필요한 정보를 찾는 데 큰 도움이 됩니다.

이번 수업에서는 CSS의 기본 개념과 웹 크롤링 시 필요한 필수 지식을 알아보겠습니다.

참고: 웹 입문 + 나만의 웹사이트 만들기 강의에서 CSS에 대한 더 자세한 내용을 확인해 보세요.

CSS란 무엇인가요?

CSS는 웹 페이지의 디자인과 레이아웃을 정의하는 언어로, 웹 페이지가 어떻게 보일지를 결정합니다.

HTML이 웹 페이지의 '구조'를 담당한다면, CSS는 그 구조를 꾸며주는 역할을 합니다.

예를 들어, 글자의 색상, 크기, 여백, 배경색 등을 모두 CSS로 설정합니다.

웹 크롤링을 할 때 CSS의 역할은 단순히 페이지의 시각적 스타일을 넘어서, 데이터를 정확히 추출하기 위한 힌트를 제공합니다.

CSS 선택자를 통해 원하는 요소를 쉽게 찾아낼 수 있기 때문입니다.

이제 웹 크롤링 시 반드시 알아야 하는 CSS 기본 개념을 알아보겠습니다.

CSS 선택자는 특정 HTML 요소를 선택하는 방법을 제공합니다.

CSS 선택자 구조
선택자 {
  속성: 값;
}

예를 들어, 웹사이트 내 모든 <p> 태그를 선택할 떄는 아래와 같이 선택자를 사용합니다.

기본 CSS 선택자 예시
/* 모든 p 태그 선택 */
p {
  /* 모든 p 태그의 글자 색상을 파란색으로 설정 */
  color: blue;
}

CSS로 class(모든 요소에 동일한 스타일을 적용)를 선택할 때는 .을 사용하며, id(고유한 요소에 스타일을 적용)를 선택할 때는 #을 사용합니다.

기본 CSS 선택자 예시
/* class="example"인 요소 선택 */
.example {
  font-size: 14px;
}

/* id="header"인 요소 선택 */
#header {
  background-color: yellow;
}

특히 웹 크롤링 시, class 또는 id 속성으로 특정 요소를 정확하게 지정하는 경우가 많습니다.

Class와 ID는 HTML 요소를 구분하기 위한 속성으로, CSS에서 스타일을 적용할 때 자주 사용됩니다.

class는 여러 요소에 공통으로 적용될 수 있는 반면, id는 페이지 내에서 고유해야 합니다.

Class와 ID 예시
<div class="product-item">상품 1</div>
<div class="product-item">상품 2</div>
<div id="main-header">헤더</div>

크롤링할 때는 class와 id를 활용해 원하는 요소를 쉽게 찾아낼 수 있습니다.

특히, 동일한 디자인이 반복되는 요소를 크롤링해야 할 경우 class 선택자가 유용합니다.

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