# [데이터 수집] 데이터 크롤링과 데이터 스크래핑

## 머신러닝 데이터

---

- 머신러닝에 활용할 목적으로 만들어진 데이터가 공개된 경우도 있다.

- 인터넷에 있는 여러 정보를 조합하거나, 정기적으로 확인하면 다양한 비즈니스에 활용 가능하다.

- 인터넷에서 데이터를 추출할 때 스크핑과 크롤링을 사용한다.

## 스크래핑 Scraping

---

- 웹 사이트에서 특정 정보를 추출하는 기술

- 웹 데이터 → HTML 형식이다.

- 웹 페이지에서 필요한 정보만 가져오기 위해서는 사이트의 구조를 분석해야 한다.

- 웹에서 데이터 추출 + 구조를 분석하는 것이 스크래핑이다.

## 크롤링 Crwaling

---

- 웹 사이트를 정기적으로 돌며 정보를 추출

- 크롤링 하는 프로그램 = 크롤러(Crawler), 스파이더(Spider)

- 항상 최신정보 유지 가능

## 데이터 저장

---

- 스크래핑과 크롤링을 통해 정보를 추출했다면 데이터를 저장해야 한다.

- 데이터를 어떤(CSV, JSON, XML, YAML 등) 형태로 어디(데이터 베이스, 파일 등)에 저장할지 결정해야 한다.

- 텍스트 데이터와 이미지는 전처리 없이 머신러닝 학습이 불가능하다.

- 데이터에 어떤 특징이 있는지 개발자가 직접 확인하고 가공해야 학습 가능.

## HTML

---

- 문서나 데이터의 구조를 표현하는 웹 페이지를 위한 마크업 언어

- HTML 문서의 기본 구성: 태그와 속성

```javascript
<img src="data crawling.png" class="fr-fin fr-dib" style="width: 93px;">
```

1. img     → 태그: HTML에서 콘텐츠를 표현하거나 처리하기 위해 사용하는 명령어 /<tag>

2. img 외 → 속성: 태그보다 구체화된 명령어 체계 / 속성 = 속성 값의 형태로 표현

```javascript
<div id = "u_skip"> // 오프닝 태그
    <a href="#menu" tabindex="1"> // 태그 안의 태그
        <span> 메인 메뉴로 바로가기 </span>
    </a>
    <a href="#start" tabindex="2">
    </a>
</div> //클로징 태그
```

### HTML 문서의 기본 구조

```javascript
<html> // 1
    <head> //3
        <title>HTML 문서</title>
        <meta charset='utf-8'>
    </head>

    <body> //4
        <b>Hello world</b>
    </body>
</html> //2
```

1. 문서에서 가장 먼저 사용, 해당 문서가 HMTL 언어 사용했음을 나타냄

### 태그 별 주요 요소

**<head>**** 태그와 주요 요소>**

```javascript
<head>
        <title>HTML 문서</title>
        <meta charset='utf-8'>
    </head>
```

- 문서의 제목을 나타냄

- 문서에 대한 정보 포함

- 문서에서 사용된 인코딩 방식 표기

- 어떤 문자들이 깨지지 않게 출력하고 취급할 수 있는지를 나타냄

- utf-8과 같이 여러 종류의 문자 집합을 취급할 수 있는 코드가 아니라면 문자가 개져서 표현되기 때문

**<body> 태그와 주요 요소**

```javascript
<table>
    <thread>
        <tr>
            <th>이름</th>
            <th>성적</th>
        </tr>
    </thread>
    <tbody>
        <tr>
            <td>김김김</td>
            <td>90</td>
        </tr>
        <tr>
            <td>이이이</td>
            <td>92</td>
        </tr>
    </tbody>
</table>
```

### class와 id

**class 속성**

- 반복되는 태그들을 유형으로 분류하고 싶을 때 사용

- 크롤링을 하는 데에 키워드가 되는 경우가 많음

- .으로 선택

**id 속성**

- 특정 요소에 이름을 붙이는 데에 사용, 중복 불가

- 크롤링 하는 데에 종종 쓰일 수 있음

- #으로 선택

```javascript
<div id = "wrap">
    <div class = "home_spot view_off">
        <div class = "bx_spot">
        </div>	
    </div>
</div>
```

## CSS

---

**style 태그 확인**

- 태그 안에 적용된 property 확인하기

- property: value;

- property: value; 형태로 입력

- 데이터를 가져오는 데에는 그렇게 중요하지는 않음

```javascript
<div id = "wrap">
    <div class = "home_spot view_off">
        <div class = "bx_spot">
        </div>
    </div>
</div>

<style scope = "iron-all-announcer">
    iron-all-announcer{
        display: inline-block;
            position: fixed;
            clip: rect(0px, 0px, 0px, 0px);
    }
</style>
```

For the site tree, see the [root Markdown](https://slashpage.com/yerim-devnote.md).
