[Crawling] iframe 태그

크롤링할 때 selenium 사용하지 않고 iframe 크롤링을 배우다.

---

 

https://finance.naver.com/marketindex/?tabSel=exchange#tab_section

https://finance.naver.com/marketindex/?tabSel=exchange#tab_section

가져오고 싶은 데이터 (그림 1)

# 1. req를 활용해서 네이버 환율 사이트 요청
url = "https://finance.naver.com/marketindex/?tabSel=exchange#tab_section"
res = req.get(url)

# 2. bs를 통해서 html형태의 데이터로 변형
soup = bs(res.text, 'lxml')
country = soup.select("tb.tit")
country

네이버 증권 페이지에서 하단에 위치한 그림 1 부분의 통화명 정보를 크롤링하려고 한다. 그래서 전에 배운 것처럼 url을 가져와서 데이터를 가져오고 개발자 도구를 열고 무슨 태그, 선택자를 가지고 있는지 파악 후 결과를 확인해 보면 비어있는 리스트가 나올 것이다. 그냥 무슨 짓을 해도 빈 리스트가 나오게 된다. 왜냐하면 해당 부분은 iframe 태그 안에 위치해 있기 때문이다. 그럼 iframe은 무엇일까?

1. iframe 이란?

iframe 태그는 화면상에 보여만주고 실제 원본 데이터는 다른 사이트에 존재하는 것이다. 유튜브 영상도 iframe으로 되어있다. 기존의 방법으로 데이터를 수집하려고 하면 불가능하다. 원본 데이터가 있는 주소를 알아내서 데이터를 수집해야 한다.

iframe 태그의 src 속성 (그림 2)

개발자 도구를 보면 iframe 태그에 src 속성이 존재한다. src의 속성 값이 바로 원본 데이터가 존재하는 url이다. 처음 url에 src의 속성값을 적절하게 연결시키면 원본데이터가 존재하는 주소이고 만들어낸 url로 기존의 방법으로 시도하면 이제 데이터가 불러와질 것이다. 적절하게 연결한다는 것은 지금 src를 보면 marketindex부터 시작하는데 기존의 안되던 url을 보면 동일하게 markeindex가 존재한다. 그럼 marketindex부터 src 속성값을 넣으면 된다. marketindex가 1번 들어가게끔.

 

2. copy selector (선택자 한번에 다 가져오기)

Copy selector (그림 3)

특정 요소에 접근하기 위해서 우리는 선택자를 사용할 수 있다. 기존에는 사용자가 직접 태그의 선택자를 보고, 부모 요소의 선택자를 보는 번거로운 과정이 있었다. 이제는 개발자도구에서 copy selector를 사용해서 CSS에서 선택자에 접근하는 방법으로 간편하게 해당 요소에 접근하는 선택자들을 모두 가져올 수 있다.

"body > div > table > tbody > tr:nth-child(1) > td.tit > a"

위의 코드 블럭에 있는 것처럼 가져와지는데 nth-child는 자식 요소 중 1번째 요소를 의미한다. 하지만 우리는 자식요소 모두를 가져오고 싶으니까 범위를 국한시키는 nth-child를 없애면 자식 요소 모두를 가져올 수 있다.

"body > div > table > tbody > tr > td.tit > a"