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

웹 크롤링을 위한 CSS 필수 지식

웹 크롤링을 할 때는 HTML과 더불어 CSS에 대한 이해도 매우 중요합니다.

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

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

참고 : HTML/CSS/JavaScript 첫걸음 강의에서 CSS에 대한 더 자세한 내용을 확인해 보세요.


CSS란 무엇인가요?​

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

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

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


웹 크롤링을 위한 CSS 필수 지식​

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

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

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


1. CSS 선택자(Selector): 어떠한 HTML 요소를 선택할까?​

CSS 선택자는 특정 HTML 요소를 선택하는 데 사용되는 패턴입니다.

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

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

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

2. Class와 ID: HTML 요소를 구분하는 속성​

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

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

Class와 ID 예시
<div class="product-item">상품 1</div>
<div class="product-item">상품 2</div>

<div id="header">헤더</div>

예를 들어 위 코드에서 class="product-item"인 div 요소는 모두 CSS 동일한 스타일이 적용됩니다.

반면 id="main-header"인 div 요소는 고유한 스타일이 적용됩니다.

CSS로 class를 선택할 때는 선택자로 .을 사용하며, id를 선택할 때는 선택자로 #을 사용합니다.

기본 CSS 선택자 예시
/* class="product-item"인 요소 선택 */
.product-item {
  /* 모든 상품 항목의 글자 크기를 14px로 설정 */
  font-size: 14px;
  /* 모든 상품 항목의 글자 색상을 파란색으로 설정 */
  color: blue;
}

/* id="header"인 요소 선택 */
#header {
  /* 헤더의 위쪽 여백을 10px로 설정 */
  margin-top: 10px;
  /* 헤더의 배경색을 노란색으로 설정 */
  background-color: yellow;
}

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

다음 내용이 궁금하다면?

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