1. 웹 스크래핑을 위한 CSS 기본 개념
성공적인 웹 스크래핑을 위해서는 HTML 구조와 페이지의 CSS 클래스 이해가 핵심이야.
CSS를 사용해 페이지 요소들이 어떻게 스타일링되고 구조화되어 있는지 파악하면 필요한 데이터를 더 정확히 선택하고 추출할 수 있어.
HTML에 CSS를 연결하고, 선택자를 사용하며, style, class, id, name 속성을 활용하는 방법을 살펴보자.
CSS는 웹 페이지의 스타일을 담당하지만, 웹 스크래핑에서는 CSS를 구조를 이해하고 요소를 선택하는 도구로 볼 수 있어. 이 스크랩핑에 중요한 CSS의 핵심 개념을 살펴보자:
- 선택자 — 특정 HTML 요소를 가리키는 규칙이야. 이를 활용하면 필요한 데이터를 정확하게 식별할 수 있어.
-
class,id,name속성 — 이들은 요소를 구분하고 식별할 수 있는 고유 식별자야. 특히 웹 스크래핑에서는 필요한 요소를 분리해서 데이터를 추출하기 쉽게 해줘.
2. HTML 문서에 CSS 연결
CSS는 여러 가지 방법으로 HTML에 연결될 수 있어. 이 방법들을 이해하면 요소의 스타일과 클래스를 파악하고, 원하는 데이터를 분리하기가 쉬워질 거야.
외부 파일
CSS는 외부 파일 형태로 연결되는 경우가 많아. 이건 HTML 문서에서 <head> 섹션의
<link> 태그를 통해 확인할 수 있어. 외부 CSS 파일은 전체 페이지의 스타일을 정의하고,
ID와 클래스도 포함하니까 스크래핑할 때 네비게이션에 도움이 돼.
<head>
<link rel="stylesheet" href="styles.css">
</head>
내부 스타일
스타일이 <style> 태그를 사용해 페이지 안에서 정의되는 경우도 있어. 내부 스타일은
<head> 섹션에서 찾을 수 있고, 이를 통해 클래스와 ID를 이해하는 데 도움을 받을 수 있어.
<head>
<style>
.price {
color: red;
}
</style>
</head>
인라인 스타일 (속성 style)
인라인 스타일은 HTML 태그 내에서 직접 정의되고 특정 요소에만 영향을 미쳐.
style 속성은 종종 데이터를 식별하는 데 유용한 독특한 속성을 포함하고 있어.
<p style="color: red; font-size: 18px;">인라인 스타일이 적용된 텍스트</p>
<p style="color: red; font-size: 18px;">인라인 스타일이 적용된 텍스트</p>
3. CSS의 선택자
CSS 선택자는 요소에 스타일을 적용하기 위해 사용되지만, 스크래핑에서는 원하는 데이터를 포함한 요소를 정확히 선택하는 데 사용돼. 웹 스크래핑에서 사용할 수 있는 주요 선택자 타입을 살펴보자.
주요 선택자 유형
태그 선택자: 이 선택자는 특정 태그(<p>, <div> 등)의 모든 요소를 선택해.
웹 스크래핑에서는 텍스트, 이미지, 기타 정보를 포함하는 태그에서 데이터를 추출할 때 유용해.
p {
color: blue;
}
클래스 선택자: 이 선택자는 class 속성의 특정 값을 가진 요소를 선택해.
클래스는 이름 앞에 점(.)을 붙여 사용돼. 스크래핑에서는 공통 스타일을 가진 요소를 식별할 때 유용해.
예를 들어 상품 목록 같은 경우.
.price {
color: red;
}
.price {
color: red;
}
<p class="price">가격: $99</p>
ID 선택자: 이 선택자는 고유한 id 속성을 가진 요소를 선택해.
ID는 이름 앞에 샵 기호(#)를 붙여 사용돼. 스크래핑에서는 페이지의 고유 요소를 선택하기에 적합해.
예를 들어 제목이나 버튼 같은 것들.
#product-title {
font-size: 24px;
}
#product-title {
font-size: 24px;
}
<h1 id="product-title">상품 이름</h1>
속성 선택자: 이 선택자는 name, type 등의 특정 속성 값을 가진 요소를 선택해.
폼 요소나 특정 필드(ex. 입력 필드에서 특정 name 찾기)를 선택할 때 정말 유용해.
input[name="email"] {
border: 2px solid blue;
}
복합 선택자: 여러 기준을 조합해서 요소를 더 정밀하게 선택할 수 있어.
예를 들어 .product-list .price는 product-list 안에 있는 가격만 선택해.
속성 및 복합 선택자는 다음 강의에서 더 자세히 배울 예정이야.
4. style, class, id, name 속성
style 속성
style 속성은 요소에 인라인 스타일을 추가하는 데 사용돼. 웹 스크래핑에서는
다른 속성으로 식별하기 어려운 요소를 찾는 데 유용한 힌트가 될 수 있어.
<p style="color: red; font-size: 18px;">이 텍스트는 인라인 스타일로 강조되었어</p>
GO TO FULL VERSION