WONA_IN_IT

안녕하세요.

크롤러를 만들다 보면,

내가 가져오고 싶은 부분이 어디에 위치해 있는지 알아야 할 때가 있습니다.

그 때 개발자도구를 사용하면 해당 사이트 html의 어느 부분에 있는지 금방 파악이 가능합니다.

지금부터 그 방법을 같이 알아보도록 하겠습니다.

여기에서 사용할 예시 사이트는 네이버 뉴스의 어느 한 기사 입니다.

- 예시 사이트: https://n.news.naver.com/article/666/0000019702

위의 사이트를 클릭해서 들어가 주세요.

위와 같은 기사가 보일 것입니다.

1. F12키를 눌러 개발자 도구 열기

우리가 만약 기사 제목을 수집하고 싶다고 가정해 봅시다.

제목을 가져오려면 html에 어디에 제목이 위치해 있는지 알아야 할 것입니다.

이 때 개발자 도구를 열어줍니다.

개발자 도구는 F12키를 누르면 확인할 수 있습니다.

위와 같이 우측에 창이 생길 것입니다.

하지만 소스 코드 전체를 한눈에 보기엔 어려움이 있습니다.

제목 또한 어디에 있는지 알기 어렵습니다. 

이럴 때는 요소를 클릭하면 바로 알 수 있습니다.

2. 요소 선택하기

위의 개발자 도구 창을 보면 좌측 상단에 커서 아이콘이 보입니다.

이 아이콘은 페이지에서 요소를 선택해 검사할 수 있는 기능을 가지고 있습니다.

위의 사진에서 빨간색 박스로 표시된 아이콘을 클릭 후 왼쪽에 기사에 내가 확인하고 싶은 기사에 커서를 가져가면

아래 사진과 같이 파란색으로 표시가 됩니다.

그후 오른쪽 창을 보면 아까는 보이지 않았던 제목 부분이 보입니다.

여기서 원래대로라면 body 밑에 div class name이 end_container인것 밑에 div ct_wrap 밑에 ct_scroll_wrapper 밑에 newsct... 밑에 이런 식으로 쭉쭉 타고 내려가서 h2에 span 에 제목이 위치해 있는 것을 확인할 수 있겠습니다만 귀찮고 복잡합니다.

이렇게 하나하나 눈으로 봐도 되지만 이 대신에  copy selector를 사용하면

더 간단하게 Beautiful Soup의 html selector를 사용해서 바로 가져올 수 있습니다.

3. selector 복사하기

copy selector는 간단합니다.

아까 찾은 개발자 도구에서 제목부분 우클릭을 하고 Copy(복사) 클릭, Copy selector 클릭하면 복사가 됩니다.

이렇게 하고 Ctrl+V를 해서 붙여넣기를 하면 아래와 같이 복사됩니다.

#title_area > span

위의 뜻은 id가 title_area 아래의 span 태그에 제목이 위치해 있다는 것을 뜻합니다.

이것을 만약 Beautiful Soup의 select로 가져오려면 아래처럼 작성하면 제목을 가져오는 것을 확인할 수 있습니다.

#크롤링시 필요한 라이브러리 불러오기
from bs4 import BeautifulSoup
import requests

#테스트 기사
test_url = "https://n.news.naver.com/article/666/0000019702"

# ConnectionError방지
headers = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/98.0.4758.102"}

news = requests.get(test_url,headers=headers)
news_html = BeautifulSoup(news.text,"html.parser")

title = news_html.select("#title_area > span")
title

결과: [<span>폭염으로 닭 폐사에 크기까지 줄어든 계란…“왕란이 사라졌다”</span>]

이런 식으로 다른 부분들도 개발자 도구를 이용하면 간단하게 가져올 수 있습니다.

안녕하세요!

오랜만입니다 ㅎㅎ

오늘은 티스토리 블로그에 html 파일을 넣어서 보여줄 수 있는 방법을 알아보도록 하겠습니다.

티스토리 블로그에는 html로 블로그 글을 편집할 수 있는데요,

html 편집기로 iframe을 사용하여 html파일을 블로그에 보여줄 수 있습니다.

그럼 시작하도록 하겠습니다.

Step1. github 가입

https://github.com

Github에 가입을 해 주세요.

구글 아이디가 있으면 회원가입을 간편하게 할 수 있습니다.

Step2. repository 생성하기

로그인 후 우측 상단의 Your repositories를 클릭 해 주세요.

그 후 new를 눌러 repository를 생성해 줍니다. repository는 저장소인데요, 간단하게 폴더라고 생각하면 됩니다.

new를 클릭하면 새로운 창이 뜨는데, 거기서 저장소 이름 설정 후 Create repository를 클릭하면 만들어집니다.

Step3. html 파일 추가하기

그 후 Add file > Upload files 를 클릭하여 필요한 html파일을 업로드 해 줍니다.

파일을 드래그하여 업로드 또는 선택하여 업로드 후 Commit changes를 클릭하면 업로드가 완료됩니다.

Step4. html 배포하기

이제 Settings > Pages 를 클릭한 후 

Source설정에서 main으로 설정 후 Save를 누르면 page가 만들어집니다.

위처럼 만들어진 페이지 뒤에 해당 html 파일 이름을 넣어 주면,

예) https://elenalim.github.io/Visualizations/YONGSAN.html

이렇게 html 파일이 페이지로 배포됩니다.

이제 이 링크를 가지고 티스토리 블로그에 넣어 보도록 합시다.

Step5. 티스토리 블로그에 html 페이지 삽입하기

이제 마지막 단계입니다! 

github에서 배포한 페이지를 블로그에 나타내어서 사람들이 볼 수 있도록 해 봅시다.

티스토리 블로그에 로그인 후, '글쓰기'를 눌러 제목을 적어 줍니다.

그 후, 좌측상단의 기본모드를 클릭하여 HTML로 바꾸어 줍니다.

그러면 위와 같이 정체모를 영어들과 중간중간 한글이 보일 것입니다.

여기에서 내가 원하는 위치에 iframe으로 github html 페이지를 넣어 줍니다.

아래와 같이 입력하면 됩니다.

<iframe src="html페이지 주소" width="가로 사이즈(숫자)" height="세로 사이즈(숫자)"></iframe>

예) <iframe src="https://elenalim.github.io/Visualizations/YONGSAN.html" width="1000" height="500"></iframe>

이런 식으로 <p>태그 안에 <iframe>태그를 넣어 준 후,

다시 기본모드로 변경해 줍니다.

그러면 아래와 같이 html페이지가 iframe안에 잘 들어가 있음을 눈으로 쉽게 확인할 수 있습니다 :)

그 후 저장을 눌러 글을 업로드 하면 됩니다ㅎㅎ

마무리

처음에는 어려워 보일 수 있지만, 하다보면 생각보다는 쉽고 간단한 방법입니다 ㅎㅎ

html을 몰라도 <iframe>한줄만 추가해 주면 되기 때문에 초보자도 할 수 있습니다 :)

이제 여러분들은 html 파일을 보여주려고 사진을 캡처하거나 하지 않고

정성스럽게 만든 html 파일을그대로 보여 줄 수 있을 뿐만 아니라

세련된 블로그 게시물을 다른 사람에게 보여줄 수 있습니다.

추가적으로 다른 방법을 알고있거나 이번 게시물과 관련한 문의가 있으면 댓글 남겨주세요 :)