DAY42[N322]

마친자·2021년 10월 15일

[코드스테이츠] AI 코스

목록 보기

30/33

HTML & CSS

HTML

:웹 페이지에서 보여지는 것들이 어떻게 어떤 방식으로 보여져야 하는지 알려주는 마크업 언어

HTML Element

head, body, div, li 등 있으며
태그로 표현: 열어주는 태그(<head>)와 닫아주는 태그(</head>)
모든 태그들이 닫아주는 태그가 있지는 않음(빈줄 추가:<br>,선 추가:<hr>)

HTML Children

하나의 HTMl 요소 안에 다른 요소를 추가 가능
예시) 리스트를 html로 표현할때

<ul>
    <li>Hello</li>
    <li>World</li>
    <li>!</li>
</ul>

결과

Hello
World
!

CSS

: 웹 페이지 문서가 어떻게 표현되는지 알려주는 스타일시트 언어

HTML 에서도 태그 내에 스타일에 대해서 알려줄 수 있음
- but,스타일에 관한 내용이 많을수록 HTML 이 복작해지고 편의성도 떨어지기 때문에 이렇게 분리해서 사용

CSS Selector

Type selector: CSS 타입에 따라서 선택 (예: 'p', 'div' 등)
Class selector: 클래스에 따라 선택
Id selector: id 에 따라 선택
셀렉터들을 활용하게 되면 더 쉽게 원하는 요소들을 선택해 접근

CSS 상속

요소의 위치에 따라 상위 요소의 스타일을 상속받도록 되어 있음

<div style="color:red">
    <p>I have no style</p>
</div>

결과

I have no style

<p>는 아무런 스타일이 적용되지 않지만 <div> 의 영향을 받게 됨

CSS 클래스

클래스는 어떤 특정 요소들의 스타일을 정하고 싶을때 사용
동시에 여러 개의 요소들에 대한 스타일을 정할때 클래스를 상속받도록 설정

<p class="banana">I have a banana class</p>

.banana {
    color:"yellow";
}

CSS ID

<p id="pink">My id is pink</p>

#pink {
    color:"pink";
}

-'#' 기호를 통해서 스타일을 정할 수 있음

ID 는 보통 특정 HTML 요소를 가리킬 때에만 사용(여러개 가리켜도 오류는 안남, 다만 규칙이 그럴뿐이여서 여러개의 요소로 사용하지 않음)

DOM

: HTML, XML 등 문서의 프로그래밍 인터페이스

프로그래밍 언어를 통해서 HTML 문서 등에 접근할 수 있도록 해줌
그외 웹 페이지의 요소나 스타일 등을 추가하거나 수정하는 등 다양한 작업을 진행
크롤링 등 웹 페이지와 작업할 때 매우 중요한 개념
DOM methods
개발자 도구를 열어 콘솔 창으로 들어가 자바스크립트를 사용하셔 DOM을 손쉬게 사용할 수 있음
getElementsbyTagName: 태그 이름으로 문서의 요소들을 리턴합니다.
getElementById: 'id' 가 일치하는 요소들을 리턴합니다.
getElementsByClassName: '클래스' 가 일치하는 요소들을 리턴합니다.
querySelector: 셀렉터(들)과 일치하는 요소를 리턴합니다.
querySelectorAll: 셀렉터(들)과 일치하는 모든 요소들을 리턴합니다.

예시

document.querySelectorAll('p')

이런 메소드를 통해서 크롤링할 때 보다 손쉽게 접근할 수 있다

Web Scraping

웹 스크레이핑, 크롤링

웹 크롤링: 웹을 돌아다니면서 정보를 수집하는 행위
- 자동화에 초점-> 알아서 돌아가게 함
- 인터넷에 있는 사이트들을 인덱싱하는 목적
웹 스크레이핑: 특정정보를 가져오는 것

Web Scraping 단계

requests 라이브러리 &응답받기
$ pip install requests
import requests 
requests.get('https://google.com') 
#get(http 요청 메소드):  뭔가를 가지고 올 때 사용
------------
<Response [200]> #정상적인 연결, requests 라이브러리의 Response 타입  
HTTP 상태 코드
resp.status_code #응답코드 확인
raise_for_status메소드로 응답이 성공적이지 않은 경우에 에러를 일으키는 방법도 있음

응답 내용

'text'라는 속성으로 서버에서 받은 응답을 텍스트 형식으로 보여주기
resp.text
결과-성공
'<!doctype html><html itemscope="" itemtype="http://schema.org/WebPage" lang="ko"><head>...</body></html>'

BeautifulSoup 라이브러리

실질적으로 돌려받은 응답 내용을 파싱하고 정보를 얻어내보자
$ pip install beautifulsoup4
기본 파싱

파싱 (parsing): 문자열로 구성된 특정 문서들 (HTML, XML) 등을 파이썬에서도 쉽게 사용할 수 있도록 변환해주는 작업
import requests
from bs4 import BeautifulSoup
url = 'https://google.com'
page = requests.get(url)
soup = BeautifulSoup(page.content, 'html.parser')
requests 라이브러리로 먼저 파싱할 페이지를 받아옴

내용물을 문자열로 변환한 page.content 를 인수로 넘김

'html.parser'(기본 라이브러리에 포함) 파서로 파싱

요소 찾기

find 및 find_all

find: 조건에 맞는 첫번째 결과를 리턴
find_all: 조건에 일치하는 모든 결과를 리스트에 담아 리턴
cat_elements = soup.find_all(class_='cat')
for cat_el in cat_elements:
    cat_el.find(class_='fish')
태그 활용

상세하게 찾고 싶을때 태그와 함께 조합해서 사용
예시: 'cat' 이라는 클래스가 'div' 태그에도 있고 'p' 태그에도 있음
# div 태그 활용
cat_div_elements = soup.find_all('div', class_='cat')
string 활용
soup.find_all(string='raining')
#대소문 구분없이 찾고 싶을때
soup.find_all(string=lambda text: 'raining' in text.lower())
# 태그 추가
soup.find_all('h3', string='raining')
정보 얻기
<p class='cat'>This is a p-cat</p>
cat_el = soup.find('p', class_='cat')
cat_el.text #=> 'This is a p-cat'
# 불필요한 띄어쓰기 있을때
cat_el.text.strip()