> 엄청난 해커인 척 하는 꿀팁

더보기

hacker Typer

f11

아무거나 타이핑치기

 

 

HTML 구성 요소

  • Document : 한페이지를 나타내는 단위
  • Element : 하나의 레이아웃을 나타내는 단위 : 시작태그, 끝태그, 텍스트로 구성 : /
  • Tag : 엘리먼트의 종류를 정의 : 시작태그(속성값), 끝태그 : p, div
  • Attribute : 시작태그에서 태그의 특정 기능을 하는 값
    • id : 웹 페이지에서 유일한 값
    • class : 동일한 여러개의 값 사용 가능 : element를 그룹핑 할때 사용
    • attr : id와 class를 제외한 나머지 속성들s : href
  • Text : 시작태그와 끝태그 사이에 있는 문자열 : 수집해야하는 문자
  • 엘리먼트는 서로 계층적 구조를 가질수 있습니다.

 

태그

  • <div> : 레이아웃 구성
  • <h1 ~ 6> : 제목 문자열 출력
  • <p> : 한줄 문자열 출력
  • <span> : 한 블럭 문자열 출력
  • <ul>, <li> : 메뉴 목록 출력
  • <a> : 링크, 페이지 이동 : href(url)
  • <img> : 이미지 출력 : src(url)

 

CSS Selector

CSS 스타일을 적용시킬 HTML 엘리먼트를 찾기 위한 방법

  • tag : div, p, span  
  • id : #(이름)
  • class : .(이름)
  • attribute : [role = '(이름)']
  • .(클래스) or (태그) : not .(선택X하는 셀렉터)
  • .(클래스) or (태그) : nth-child(3) : 3번째 ①3번째 앨리먼트인지 먼저 확인하고 ②맞는 태그 혹은 클래스인지 확인함
  • .(클래스) or (태그) > h1 : >로 셀렉트 시, 바로 아래 엘리먼트 선택
  • .(클래스) or (태그) h1 : 공백문자로 셀렉트 시, 모든 하위 엘리먼트 선택

 

- 예시

<div>
	<p class = 'no1'>
	<p class = 'no2'>
	<div> 
    	<p class='no3'> 
   	</div>
</div>
  1. p.no1 : p태그 and calss가 .no1인 것
  2. .no1, .no2 : .no1 or .no2인 것
  3. p : nth-child(2) : no2
  4. ① 2번째 앨리먼트인지 먼저 확인하고 ②p태그인지 확인함
  5. div > p : 한 단계아래 : <p> 2개
  6. div p : 모든 하위 앨리먼트 : <p> 3개

 

1. 웹페이지 분석 : URL

 

2. request > response(html)

response=requests.get(url)
response.text[:100]
#'<!doctype html> <html lang="ko"><head> <meta charset="utf-8"> <meta name="referrer" content="always"'

 

3. html을 beautiful soup을 통해 css-selector로 가져오기

- str(html) > bs object

dom = BeautifulSoup(response.text,'html.parser') #bs4.BeautifulSoup로 변경
type(dom) #bs4.BeautifulSoup

 

- bs object > .select(css-selector), .select_one(css-selector) > str(text)

#fdr-367a0c4aba7a46c09bc7e3400438ee29 > div > div > div.bAUlEC095ho5bG7U0km1.fds-grid-layout-keyword.fds-refine-query-grid > div:nth-child(1) > div:nth-child(1) > a
#Copy를 통해 위 selectore를 얻었지만 필요한 부분만 추출
elements=dom.select('.fds-refine-query-grid span')
len(elements), elements

# (6,
#  [<span class="fds-keyword-text EC6qOsUFAOwAI0C5oRtw">삼성전자주가</span>,
#   <span class="fds-keyword-text EC6qOsUFAOwAI0C5oRtw">오늘 삼성전자 주가</span>,
#   <span class="fds-keyword-text EC6qOsUFAOwAI0C5oRtw">삼성전자주식가격</span>,
#   <span class="fds-keyword-text EC6qOsUFAOwAI0C5oRtw">삼성전자 주식</span>,
#   <span class="fds-keyword-text EC6qOsUFAOwAI0C5oRtw">삼성전자 주가 전망</span>,
#   <span class="fds-keyword-text EC6qOsUFAOwAI0C5oRtw">삼성전자주식전망</span>])

 

4. str(text) > DataFrame

elements[0].text
#'삼성전자주가'
[element.text for element in elements]
#['삼성전자주가', '오늘 삼성전자 주가', '삼성전자주식가격', '삼성전자 주식', '삼성전자 주가 전망', '삼성전자주식전망']

 

 

- 전체 실행 코드

import pandas as pd
import requests
from bs4 import BeautifulSoup

url='https://search.naver.com/search.naver?&query=%EC%82%BC%EC%84%B1%EC%A0%84%EC%9E%90'
response=requests.get(url)
dom = BeautifulSoup(response.text,'html.parser')
elements=dom.select('.fds-refine-query-grid span')
[element.text for element in elements]

'KT AIVLE School > 웹크롤링' 카테고리의 다른 글

Selenium  (3) 2024.09.23
Naver Stock Report  (0) 2024.09.23
ZigBang 원룸 매물 데이터 수집  (0) 2024.09.20
NAVER API  (0) 2024.09.20
403 문제가 생겼을 시  (0) 2024.09.20

티스토리툴바