모각코 파이썬 크롤링 5일차

📌 선택자

웹 페이지를 표현하는 데이터 모두가 태그로 이루어져 있기떄문에,

그 중 서로 동일한 태그가 존재할 수 있음

 

이렇게 동일한 태그를 분간해 주기 위해, HTML에서는 선택자라는걸 사용해 

각 태그를 구별할 수 있는 일종에 주소를 부여함 

 

📌 선택자의 필요성

 

아래와 같은 HTML 문서가 있다고 가정해 보면,

<div>	
	<div>
		<span> 파이썬 </span>
		<span> 크롤링 </span>
	</div>
	
	<div>
		<span> C언어 </span>
		<span> 게임 </span>
	</div>
</div>

해당 웹 페이지에서 언어 (language)와 관련된 데이터만 필요하다고 생각해 보자.

만약 태그로만 해당 데이터를 선택한다면, 태그 <span>을 사용할 수 있다. 

하지만 태그 <span>에 언어 정보 뿐만 아니라 프로젝트 정보 (크롤링, 게임만들기)도 포함된다.

 

이러한 경우, 프로젝트 정보를 제외하고 언어 정보만을 특정하기 위해 선택자를 사용

<div id = "contents">	
	<div class = "metadata1">
		<span class = "language"> 파이썬 </span>
		<span class = "project" > 크롤링 </span>
	</div>
	
	<div class = "metadata2">
		<span class = "language"> c언어 </span>
		<span class = "project"> 게임 </span>
	</div>
</div>

이렇게 class = language​라는 선택자를 추가해 준다면,

우리는 span 태그와 language​라는 선택자를 사용해 언어 관련 데이터만을 받아올 수 있는것이다. 

 

📌 id와 class

태그의 선택자는 주로 id와 class를 사용한다.

 

하나의 id는 고유한 선택자로,

하나의 html 코드에 id는 중복되지 않고 하나만 존재한다. 

 

class도 태그의 선택자로 사용되지만 id처럼 고유한 값은 아니다.

class는 같은 속성을 지닌 데이터들을 묶어주는 값으로, 여러번 사용될 수 있다. 

 

 

📌 선택자 사용법

 

우리가 다음과 같은 태그를 사용한다고 가정해 보면,

<div id='123' class='456'>

선택자에 따라 데이터 검색 방법에 차이가 있다.

​

✔️ 태그만 사용하여 데이터를 찾을 경우 : '태그'

→ div

✔️ 태그와 id를 사용하여 데이터를 찾을 경우 : '태그#id'

→ div#123

✔️ 태그와 class를 사용하여 데이터를 찾을 경우 : '태그.class'

→ div.456

✔️ 태그, id, class 모두 사용하여 데이터를 찾을 경우 : '태그#id.class'

→ div#123.456

 

class의 이름에 공백이 포함될 경우

<div class='hello python'>

 

공백을 ' . '으로 대체해서 작성하면 된다.

​

✔️ <div class='hello python'>

→ div.hello.python

​

📌 선택자 실습

html 문서에서 ctrl + F키를 눌러 데이터 검색 할 수 있다. 

 

⭐정리하기⭐

✔ 선택자: 동일한 태그를 구별할 수 있는 것

- 선택자를 이용하여 우리가 원하는 데이터를 정확하게 얻기

- id, class

✔ 선택자 사용법

- id: #을 앞에 붙인다.

- class: .을 앞에 붙인다.

✔ 더 정확한 데이터 검색방법

- id 선택자 + class 선택자

ex. div#article div.nums