[크롤링으로 주식 쉽게 하자!] CSS 선택자 정리 (feat. 쉽게 css선택자 복붙하는 법)

 

저는 주식을 줍줍할 때, 전고점에서 8% 떨어진 가격과 현재가를 비교해서 사는 방법을 사용합니다. 그런데 매번 원하는 종목을 찾아 들어가서 계산을 하고 현재가와 비교하는 것이 귀찮고, 여러 종목을 한눈에 보는 것도 어려워서 방법이 없을까 고민하고 있었습니다. 그러다가 전에 코딩을 하면서 배웠던 크롤링이 생각이 났고, 복습 겸 주식에 들이는 시간을 줄여보자는 생각으로, 원하는 주식의 최고점에서 8% 떨어진 가격과 현재가를 비교해주는 코딩을 만들어보기 시작했습니다. 만드는 과정에서 필요한 기본 지식과 그 결과물을 포스팅할 예정입니다. 

 

이번 포스팅에서는 크롤링을 하려면 꼭 알아야 하는 css선택자에 대해 정리해보려 합니다!

 

html에서 데이터를 추출하기 위해서는 BeautifulSoup 모듈을 사용하고, 크롤링할 태그 내용을 선택할 때는 CSS 선택자를 활용하면 됩니다. 그중 간단하고 기본적으로 사용되는 선택자 6가지 CSS 선택자입니다: 

 

 

1. 태그 선택자

<h1> 태그는 h1

<a> 태그는 a

 

예시: 

<a href="#" onclick="clickcr(this, 'sop.title', '', '', event);window.location.reload();">삼성전자</a>

이 태그 속의 "삼성전자"라는 텍스트만 출력하고 싶다!

name = soup.select_one("a").text

 

 

2. id 선택자

웹사이트 내 id 속성 값이 있고, 그 특정 id를 선택하고 싶을 때, 앞에 #을 붙이기. 

 

예시: 

<strong class="tah p11" id="_nowVal">78,000</strong>

78,000원이라는 가격을 가져오고 싶다!

price = soup.select_one("#_nowVal").text

 

 

3. class 선택자

사이트 내 class 속성이 있으면 .을 앞에 붙이기. 

 

예시: 

<span class="tah p11">78,000</span>

가격을 여기의 78,000원으로 하고 싶다!

price = soup.select_one("span.tah p11").text

 

 

4. 자식 선택자

크롤링하기를 원하는 태그에 유니크한 이름이 없을 때 사용됩니다.

보통 선택자를 찾으면, ctrl+f로 검색해봐서 다른 곳에도 이 태그가 있는지 찾아보고, 중복된다면 그 위의 태그를 끌어오고 경로를 알려줘서, 이 특정 태그에서 가져올 거야!라는 느낌으로 사용합니다. 

 

예시: 

<div class="wrap_company">
   <h2>
      <a href="#" onclick="clickcr(this, 'sop.title', '', '', event);window.location.reload();">삼성전자</a>

   </h2>

</div>

삼성전자를 가져오고 싶은 경우, 선택자를 a로만 표기하면, 사이트 내 다른 많은 a와 겹쳐서 이거를 가져오지 못합니다. 

이 경우 그 위에 있는 부모 태그를 끌어와서 사용합니다. 

name = soup.select_one("div.wrap_company > h2 > a").text

 

 

5. 속성 선택자

이 특성을 가지고 있는 태그를 다 가져오고 싶을 때 사용합니다. 

 

예시: 

<a class='sister' href="http://example.com/elsie" id="link1">

href를 가진 모든 태그를 다 소환해서 프린트하고 싶다! 

print(soup.select("[href]"))

 

 

6. 가상 클래스 선택자

n:th-of-type()

한 그룹 안에 같은 태그가 여러 개 있다... 그러면 똑같은 태그들 중에서 몇 번째를 선택하겠다고 알려줍니다.

 

예시: p들 중에서 두 번째 p태그를 선택한다! 

soup.select_one("p:nth-of-type(2)")

 

 

'아.. 계속 위로 거슬러 올라가야 하네... 너무 복잡한데...' 하는 사람들을 위해, 

 

간단하게 선택자를 가져오는 팁! 

크롬을 사용한다면, f12를 누르고

1. 상단 왼쪽의 돋보기를 누르고

2. 크롤링하고 싶은 것을 클릭하고

3. 오른쪽에 강조되어서 뜨는 줄에 대고 우클릭해서

4. Copy - Copy Selector 선택

하면 자동으로 선택자를 복사해준다!!!!