1. HTML(Hyper Text Markup Language)
웹에서 페이지를 표시할 때 사용
(MDN에 의해면 프로그래밍 언어는 아님 / 웹 페이지가 어떻게 구성이 되어 있어야 하는지 알려주는 마크업 언어)
HTML element(요소)
head : <head>열어주는태그 </head>닫아주는 태그
body, div, li
br(빈줄 추가), hr(수평 줄긋기) 등등
2. CSS(Cascading Style Sheets)
웹 페이지 문서가 어떻게 표현되는지 알려주는 스타일시트 언어
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>
# 아무런 스타일이 적용 안되어 있지만 div의 영향을 받는다CSS 클래스 : 어떤 특정 요소들의 스타일을 정하고 싶을 때에 사용이 된다
<p class="banana">I have a banana class</p>이렇게 클래스를 지정하면 CSS에서는 따로 해당 클래스에 대한 정의를 내릴 수 있고 웹 브라우저를 통해 열었을 때에 적용이 되도록 할 수 있다
# . 을 통해서 클래스를 정의
.banana {
color:"yellow";
}CSS ID
<p id="pink">My id is pink</p> # HTML상에서 ID 지정
#pink { # 을 통해서 스타일을 정함
color:"pink";
}html 예시
visualcode 파일+ 이름을 index.html하면 자동 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>제목</title>
</head>
<body>
hello world
<div>ABCDEFG</div>
가나다라마바사
</body>
</html>
# 수정하고 → 저장하고 → 크롬에서 새로고침3. DOM(Document Object Model)
문서 객체 모델, 문서의 프로그래밍 인터페이스
프로그래밍 언어를 통해서 html 문서 등에 접근할 수 있도록 함
문서를 하나의 구조화된 형식으로 표현
DOM 메소드
- getElementsbyTagName: 태그 이름으로 문서의 요소들을 리턴
- getElementById: 'id' 가 일치하는 요소들을 리턴
- getElementsByClassName: '클래스' 가 일치하는 요소들을 리턴
- querySelector: 셀렉터(들)과 일치하는 요소를 리턴
- querySelectorAll: 셀렉터(들)과 일치하는 모든 요소들을 리턴
DOM 예시
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> h1태그 </h1>
<p> p태그 </p>
</body>
</html>4. Web Scraping / 크롤링 (웹 페이지에서 정보를 가져오기)
pip install requests 로 설치
- 요청보내기
import request
response = requests.get(‘https://www.google.com/’)
print(response)
# <Response [200]>출력됨- 응답 받기
import requests
url = ‘https://www.google.com’
resp = requests.get(url)- 응답 여부
resp.status_code HTTP 상태 코드 200이면 성공
resp.text로 정보확인
※ BeautifulSoup 라이브러리
받아온 HTML 파일을 파싱해서 원하는 정보를 손쉽게 찾을 수 있게 해준다
import requests
from bs4 import BeautifulSoup
url = 'https://google.com'
page = requests.get(url)
soup = BeautifulSoup(page.content, 'html.parser')- 요소 찾기
# id가 ‘A’라는 요소를 찾을 때
A_element = soup.find(id=’A’)
# class에 ‘BBB’가 들어있는 요소들을 찾고 싶을 때
B_element = soup.find_all(class=’BBB’)
# CCC라는 클래스가 div태그에도 있고 p태그에도 있을 때
div태그를 사용하는 요소를 가지고 올 때
C_div_elements =soup.find_all(‘div’, class=’CCC’)
# ‘hello’라는 문자열이 포함된 요소 찾기
soup.find_all(string=’hello’)
# ‘hello’가 대소문자 구분 없이 들어간 것 찾기
soup.find_all(string=lambda text: ‘hello’ in text.lower())
# 각 요소의 .string 속성을 불러오는 것이기 때문에 요소가 아닌 문자열로 리턴이 된다
따라서 하나의 요소로 받기 위해서는 태그도 같이 추가해줘야 한다
soup.find_all(‘h3’, soup=’hello’) - 정보얻기
text 속성을 이용해서 내부 문자를 얻어낸다
<p class='AAA'>This is hello</p>
A_el = soup.find('p', class_='AAA')
A_el.text #=> 'This is hello'
AI/Data Science