[코알라univ]1. 웹페이지의 이해

1. 웹페이지의 구조 이해

데이터 수집이란?

웹페이지는 HTML코드로 이루어져 있는데 이는 익스플로러, 크롬과 같은 웹브라우저를 통해 보기 좋게 나타난다.
이때, 데이터 수집을 하는 과정은 눈으로 볼 수 있는 데이터를 소스 코드 안에 어디에 있는지 확인 후 가져오는 것을 데이터 수집이라고 한다.

 

 

웹페이지(HTML)의 기본 구조

<태그> 내용 </태그>

• html 문서는 태그로 둘러 쌓여 있다.
• 이러한 html에서 원하는 내용이 속해 있는 태그를 통해 수집하고자하는 데이터를 쉽게 찾을 수 있다.

 

 

2. HTML과 태그

태그의 개념과 간단한 태그 실습

<h1> 태그를 배워봅시다 </h1>
<h3> 텍스트편 </h3>

<h6> 헤더 연습하기 </h6>

html은 <b>태그</b>로 이루어진 문서입니다.
텍스트를 <b>진하게</b> 만들 수도 있고,
<u>밑줄</u>을 칠 수도 있습니다.
참, 줄바꿈을 하려면 <br> br태그를 사용해주세요 :D <br>
<a href = "https://naver.com">여기</a>를 클릭하면 네이버로 이동합니다~
href는 hypertext reference의 약자

• <h> 태그는 <h1>이 가장 크며, <h6>이 가장 작다.
• html문서는 공백기능을 자동으로 적용하지 않기 때문에 <br>태그를 통해서 줄바꿈을 해주어야 한다.
• <u>태그는 밑줄태그.
• <a>태그는 anchor의 약자이며 href는 hypertext reference의 약자로 이 다음에는 내가 이동을 원하는 링크의 url을 사용하면 된다.
  • <a href = "원하는 url">TEXT</a>

 

다양한 태그와 속성

<img src = "http://bit.ly/구글로고이미지">
<div>
    아이디 <input><br>
    비밀번호 <input><br>
    <textarea>내용을 입력해주세요. </textarea>
</div>

• <img>태그의 src는 source의 약자이다.
  • 이때, url은 검색엔진에서 우클릭을 통해 이미지 주소 복사를 통해 가져온다.
• <div>태그는 특별한 기능은 없지만 페이지를 분할하는 역할을 한다. 눈에 보이는 차이는 없지만 공간을 구분할때 유용하다.

 

이때, 페이지를 좀더 예쁘게 꾸미고 싶다면?

<img width = "200px" height = "100px" src = "https://images4.alphacoders.com/735/thumb-1920-735747.png">
<div>
    아이디 <input><br>
    비밀번호 <input type = "password"><br>
    <textarea rows = "30" cols = "100">내용을 입력해주세요. </textarea>
</div>

• <img>태그의 속성 : width는 너비, height는 높이를 조정해줌
• <input>태그의 속성 : type을 통해 비밀번호창에 입력된 것이 보이지 않ㄹ게끔 할 수 있다.
• <textarea> 태그의 속성 : rows와 cols를 통해 내용 입력칸의 크기를 조절도 가능하다. 여기서 rows는 행의 수이기에 세로 길이를 의미하며, cols는 열의 수이기 때문에 가로의 길이를 의미한다.

 

3. 태그를 통해 데이터 찾기

<h1> 다음부터 </h1>
<h2> 엄지용, 2014 </h2>
<div>
    <img width = "300px" height = "300px" src = "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20141009_96%2Flssnet1379_14128381613294qPkH_JPEG%2F%25C4%25DA%25BE%25CB%25B6%25F32.jpg&type=b400"> <br><br>
    이번까지만 이렇게 하고<br>
    다음부턴 이러지 말아야지 <br><br>

    라며 버려버린 시간들이<br>
    언젠간 한데 모여 <br>
    <u>우린 뭐 <b>네<a href = "">인생</a>아니었냐고</b> 따져 물어올 것만 같다.</u>
</div>

<img width = "200px" height = "200px" src = "http://imgnews.naver.net/image/5286/2014/05/30/20140530000072_59_20140530102110.png"> <br>
시집을 받아보고 싶으면 메일주소를 써주세요! <br>
<input>

여기서 원하는 데이터를 찾으려면?

• 다음부터 : h1태그
• 엄지용, 2014 : h3태그
• 우린 뭐 네 인생 아니었냐고 .... : u태그
  • 그런데 u태그 안에 여러 태그가 있다. 따라서 u태그를 선택하면 다른 태그들도 선택되지만 우리는 u태그 안의 데이터만 가져오는 것이기 때문에 상관없다.
• 인생 : a태그

  이처럼 간단한 홈페이지에서는 각 태그에 해당하는 데이터가 하나밖에 없으므로 태그 이름을 요청하는 것 만으로 원하는 데이터를 찾을 수 있다.

 

기본적으로 어떻게?

• head태그는 생략해도 괜찮다.
• 크롬 개발자용도구 활용하기(우클릭하여 '페이지 소스 보기'클릭)
  • mac단축키 : alt + command + i
  • window단축키 : ctrl + shift + i
• 페이지 소스 보는 단축키
  • mac단축키 : command + option + i
  • window단축키 : ctrl + shift + i
• 개발자용도구를 통해 페이지에 나타나있는 화면을 통해 내가 원하는 부분이 데이터만을 건져올 수 있다. 또, 소스들 중에서 특정 태그가 어떤 페이지를 나타내는지 볼 수 있다.
• 소스코드가 복잡해보이지만 하나하나 들어가보면 쉽게 이해 가능

 

좀 더 복잡한 사이트의 가격/상품/판매처에 대한 데이터를 찾으려면?

• 태그를 통해 선택하기
  그런데.. 가격/상품/판매처가 모두 같은 태그를 사용하기에 원하는 데이터를 고를 수 없다.
  이때, id와 class는 태그의 이름. 각 태그들을 구분하기 위해 id, class를 사용하는 것.
  이때 id는 한 웹페이지 안에서 한번만 쓸 수 있으며, class는 비슷한 요소에는 여러번 사용이 가능하다.

• 선택자

  • 데이터를 수집할 때, 원하는 html태그를 찾기 위한 약속된 문법

분류	선택자
ID가 container인 div태그	div#container
클래스가 title인 spanxorm	span.title
모든 a 태그	a
클래스가 price인 모든 태그	.price

상하관계를 표현하는 방법
div#items-section > div.items-row > div.item > div.metadata span
=> 자식을 선택(>) : 현재 태그의 바로 하위에 있는 태그만 선택
=> 자손을 선택( ) : 현재 태그의 하위에 있는 태그를 모두 선택

 

4. 진짜 홈페이지에서 데이터 선택하기

NaverTV데이터 선택하기

<수집 목표>

1. 제목
2. 채널명
3. 조회수
4. 좋아요

이 페이지에서 100개 영상에 대한 제목, 채널명... 을 찾아볼건데. 네이버페이지처럼 한페이지에 여러가지가 리스트된 경우 우리가 찾으려는 데이터를 찾기 전에 '컨테이너'를 먼저 찾아주자. 우리가 원하는 데이터는 한 곳에 뭉쳐있기에 우리가 원하는 한 단위의 데이터를 모두 포함하는 것을 컨테이너라고 한다.
컨테이너를 상관 안하고 수집할 경우... 가령 제목, 채널을 각각 100개를 수집했다고 가정할때 ... 재생수 데이터에 오류가 생겨서 99개밖에 수집을 못할 경우에는 제목-채널명-재생수를 연결하려할때 몇번 영상의 재생수가 부족한지 알 수가 없다. 따라서 우리는 이것을 모두 포함하는 컨테이너를 수집하여 이 컨테이너 안의 제목, 채널명, 재생수를 두 가지 단계를 통해 수집해야 한다.

 

 

우리가 찾고자 하는 선택자

• 가장 상위의 선택자를 찾은 후에 이 선택자가 우리가 원하는 데이터를 가지고 있는지 검증해야 한다.

컨테이너 : div.inner

• 이때 command + F버튼을 통해 내가 찾은 선택자 'div.inner'를 쳐보면 된다.
• 내가 찾은 성택자가 맞다면 이제 이 div.inner안에서 제목, 채널명, 재생수, 좋아요수를 찾으면 된다.

 

네이버티비 1-3위 데이터 선택자

1. 제목 : div.inner dt.title (strong span)
2. 채널명 : div.inner dd.chn (> a)
3. 재생수 : div.inner (dd.meta) span.hit
4. 좋아요수 : div.inner dd.meta span.like

• ()은 생략 가능하다는 것.

 

 

출처

코알라: https://coalastudy.com
데이터수집 web 공개자료: https://book.coalastudy.com/data_crawling/