데이터 놀이터
Section 4 - Sprint 2. 데이터 수집과 NoSQL - 2. Web scraping - (1) HTML, CSS 본문
Section 4 - Sprint 2. 데이터 수집과 NoSQL - 2. Web scraping - (1) HTML, CSS
jjjk84 2023. 4. 1. 18:38목차
1. 오늘의 키워드
2. 개념정리
2-1. 웹 스크래핑
2-2. HTML
2-3. CSS
3. 더 알아봐야할 것
오늘의 키워드
- 웹 스크래핑
- HTML
- CSS
- DOM
개념 정리
1. 웹 스크래핑
특정 웹 사이트에서 원하는 정보를 긁어오는(scraping) 작업을 말한다. 웹 사이트들을 기어다니며(crawling) 인덱싱을 통해 필요한 정보를 수집하는 웹 크롤링과는 차이가 있다. 웹 스크래핑을 하기 위해서는 기본적으로 HTML, CSS에 대해 이해하고 python의 requests, beautifulsoup라이브러리 활용할 줄 알아야 한다.
2. HTML
참조 : https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started
HTML 시작하기 - Web 개발 학습하기 | MDN
HTML 기본 사항을 둘러 보셨기를 바랍니다.
developer.mozilla.org
(1) 개념
HyperText Markup Language의 약자로 웹 페이지가 어떻게 이루어져있고 보여지는지에 대해 알 수 있도록 하는 마크업 언어다.(프로그래밍 언어라고 하기에는 무리가 있다.)
(2) 기본 구성
- 요소(Elements)
요소는 이름인 tag(opening tag, closing tag), content로 이루어져 있다.
tag를 열어 element를 형성하고 웹 화면에 보일 content를 입력한 뒤 tag를 닫는다.(예외: img와 같이 무언가를 첨부하는 요소는 single tag를 사용하기도 한다.)
요소 내에 다른 요소가 들어갈 수도 있다.
<p>My cat is <strong>very</strong> grumpy.</p>
요소에 실제로 나타내고 싶지 않지만 추가적인 내용을 담고 싶다면 opening tag 내에 속성(attribute)을 넣어 활용할 수 있다.
속성을 활용하기 위해서는 다음과 같은 규칙이 지켜야 한다.
- tag와 속성 사이에 공백이 있어야 하고, 둘 이상의 속성을 넣고자 하는 경우에는 속성 사이에 공백이 있어야 한다.
- 속성 이름 다음에는 등호가 붙는다.
- 속성 값은 따옴표로 감싸야 한다.
(3) html 문서 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> ## 문자 인코딩 관련 문제 해결
<title>My test page</title> ## 웹 페이지 제목
</head>
<body>
<p>This is my page</p>
</body>
</html>
1. <!DOCTYPE html> : html 임을 나타내는 문구
2. <html> : html 요소로 기본 요소
3. <head> : 홈페이지 사용자에게는 보이지 않지만 HTML 페이지의 모든 내용을 담고 있는 요소
4. <body> : 홈페이지에 표시되는 모든 콘텐츠를 포함하는 요소
3. CSS
참조 : https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/Getting_started
CSS 로 시작하기 - Web 개발 학습하기 | MDN
이 기사에서는 간단한 HTML 문서를 가져와서 CSS 를 적용하여 언어에 대한 실질적인 내용을 학습합니다.
developer.mozilla.org
(1) 개념
Cascading Style Sheets의 약자로, HTML이 웹사이트가 어떻게 구성되고 보여져야하는지 알려주는 언어였다면
CSS는 웹페이지가 어떻게 표현될지 스타일(색상, 크기, 레이아웃...)을 정하는 언어이다.
(2) 기본구성
- HTML과의 연결
여러가지 방법이 있지만 MDN에서는 HTML <head> 부분에 다음을 추가하는 것을 가르쳐 주고 있다,
<link rel="stylesheet" href="css 파일명">
- HTML 요소 스타일링
HTML과 연결했다면 화면에 나타나는 <body> 안 요소들에 작성된 내용들을 CSS로 가져와 스타일링을 진행해야한다.
CSS의 기본적인 작성 방식은 Python의 dictionary문법과 유사하다
h1 {color : red;} # 모든 h1요소 색깔 red로 설정
p {color : red;} # 모든 p 요소 색깔 red로 설정
p, li {color : red;} # 모든 p, li 요소
### CSS 상속
## 클래스 상속: HTML <p class='a'>일 때
.a {color : orange;
font-weight : bold;}
## id 상속: HTML <p id='a'>일 때
#a {color : orange;
font-weight : bold;}
### 위치에 따라 스타일 지정
li em {color: green;} # li 하위 요소인 em 색깔 설정
더 알아봐야할 것
Web 개발 학습하기 | MDN
MDN 학습지에 오신 것을 환영합니다! 여기는 웹 개발을 처음 접하는 초보자가 웹 사이트 개발을 시작하기 위해 필요한 모든 것을 제공하는 글을 모아놓은 곳입니다.
developer.mozilla.org
HTML, CSS 읽어보기
'코드스테이츠 AIB 17' 카테고리의 다른 글
| Section 4 - Sprint 2. 데이터 수집과 NoSQL - 3. API (0) | 2023.04.17 |
|---|---|
| Section 4 - Sprint 2. 데이터 수집과 NoSQL - 2. Web scraping - (2) DOM, Web scraping (0) | 2023.04.01 |
| Section 4 - Sprint 2. 데이터 수집과 NoSQL - 1. Python 활용 (0) | 2023.03.28 |
| Section 4 - Sprint 1 Challenge (0) | 2023.03.23 |
| Section 4 - Sprint 1. 환경과 관계형 데이터 베이스 - 4. DB API (0) | 2023.03.23 |
