(8) CSS Selector 활용하기 (1)

• CSS(Cascading Style Sheets)는 HTML과 같은 마크업 언어의 디자인을 꾸미기 위해 사용하는 스타일 지정 도구이다.
• BeautifulSoup에서는 select() 메소드에 CSS 선택자를 매개변수로 전달하는 방법을 사용한다.
• select() 메소드는 해당하는 태그를 모두 찾아서 리스트로 리턴한다.
• 크롬 개발자 도구의 음영으로 선택된 부분에서 마우스 오른쪽 버튼을 클릭하면, CSS Selector를 복사할 수 있는 팝업 메뉴가 나타난다.

Copy→Copy selector 순서로 선택하고 메모장 또는 IDE 등에 붙여넣기 하면 CSS 선택자를 확인 할 수 있다. 이내용을 select() 메소드의 매개변수로 전달하면 해당 태그 요소를 찾는다.

 

import requests
from bs4 import BeautifulSoup
#라이브러리를 불러온다.

url = "<https://en.wikipedia.org/wiki/Seoul_Metropolitan_Subway>"
resp = requests.get(url)
html_src = resp.text
soup = BeautifulSoup(html_src, 'html.parser')
#웹 페이지 문서의 HTML 소스코드를 추출, 파싱하여 BeautifulSoup 객체를 생성한다.
#변수 soup에 저장한다.

subway_image = soup.select('#mw-content-text > div.mw-parser-output > table:nth-of-type(3) > tbody > tr:nth-of-type(2) > td > a > img')
print(subway_image)
#select()메소드가 리턴하는 객체는 파이썬 리스트이다.
#subway_image 변수를 print() 함수를 사용하여 출력해 보면 원소 1개  태그를 갖는다.
#이 웹페이지에는 select() 메소드에 전달한 CSS선택자가 가리키는 태그가 1개만 존재한다는 것을 알 수 있다.
#쉽게 말하면 블록지정한 부분에서 img태그를 가진 원소는 1개만 있기에 1개의 img태그만 추출한다.

print("\\n")
print(subway_image[0])
#HTML 요소( 태그) 부분만을 따로 추출하려면 파이썬 리스트의 원소 인덱싱을 사용한다.
#첫 번째 원소이므로 subway_image[0]과 같이 입력한다.
print("\\n")

subway_image2 = soup.select('tr > td > a > img')
#앞서 사용한 CSS 선택자를 이용하여 같은 레벨에 있는 다른 태그까지 한꺼번에 선택할 수 있다.
#쉽게말해 해당 사이트에 있는 태그를 가진 원소들을 모두 추출한다.
#'tr>td>a>img 와 같이 원본 CSS 선택자에서 태그 이름만 남겨서 select() 메소드에 입력한다.
#리턴하는 객체를 변수 subway_image2에 저장한다.
#CSS선택자에 관한 자세한 정보는 다음의 링크를 참조한다
#www.w3schools.com/cssref/css_selectors.asp
print(subway_image2[1])
#앞에서 선택한 서울 지하철 차량 이미지는 리스트의 2번째 원소이다.
#따라서 2번째 순서를 나타내는 인덱스를 사용하여 subway_image2[1]과 같이 입력한다.
#원소 인덱스는 0부터 시작하기 때문에 2번째 원소의 인덱스가 1이 된다.

실행결과

 

[<img alt="South Korea subway logo.svg" data-file-height="450" data-file-width="450" decoding="async" height="75" src="//upload.wikimedia.org/wikipedia/commons/thumb/1/12/South_Korea_subway_logo.svg/75px-South_Korea_subway_logo.svg.png" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/1/12/South_Korea_subway_logo.svg/113px-South_Korea_subway_logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/1/12/South_Korea_subway_logo.svg/150px-South_Korea_subway_logo.svg.png 2x" width="75"/>]

<img alt="South Korea subway logo.svg" data-file-height="450" data-file-width="450" decoding="async" height="75" src="//upload.wikimedia.org/wikipedia/commons/thumb/1/12/South_Korea_subway_logo.svg/75px-South_Korea_subway_logo.svg.png" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/1/12/South_Korea_subway_logo.svg/113px-South_Korea_subway_logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/1/12/South_Korea_subway_logo.svg/150px-South_Korea_subway_logo.svg.png 2x" width="75"/>

<img alt="Seoul Metro 2000 series train on Line 2" data-file-height="2403" data-file-width="4272" decoding="async" height="169" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Seoul-metro-2009-20180916-103548.jpg/300px-Seoul-metro-2009-20180916-103548.jpg" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Seoul-metro-2009-20180916-103548.jpg/450px-Seoul-metro-2009-20180916-103548.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Seoul-metro-2009-20180916-103548.jpg/600px-Seoul-metro-2009-20180916-103548.jpg 2x" width="300"/>

 

해당 예제를 통해 실무에서…

• 원하는 태그의 특정 순번의 원소 또는 모든 원소를 불러올 수 있다.