2019.04.25 크롤링 기본(HTML과 선택자 이해하기)

(TIL은 스스로 이해한 것을 바탕으로 정리한 것으로 오류가 있을 수 있습니다)

# 질문에 답하기

1. 크롤링의 그림
2. HTML이란?
3. 선택자란?

크롤링의 큰 그림

1. 우리가 가지고 오고 싶은 부분을 눈으로 확인하고 ( 첫 번째 줄을 가지고 와보자)
2. HTML 구조를 분석해서 선택자를 선별하고 (태그는 div 이고 class는 1234 이네!)
3. 선택자를 컴퓨터가 알아먹게 변환 (div.1234)

HTML의 개념과 구조 이해하기

• HTML은 hypertext markup language로서 hypertext는 링크로서 한 문서에서 다른 문서로의 이동을 이야기하며 markup langage는 태그를 이용해서 문서를 작성한다는 이야기입니다. 즉 웹페이지를 만들기 위한 언어로서 문서간의 이동을 목적으로 만들어졌고 태그들을 이용하여 문서를 작성하는 언어입니다.
• 기본적으로 태그들은 각각의 고유한 역할을 가지며 들여쓰기를 통해 내부 단계를 구현합니다.
• 들여쓰기를 통해 부모와 자식구조를 표현하며 이를 도식화하면 나무와 닮아있기 때문에 트리구조라고도 한다.
• 너무 좋은 내용이 있어서 가지고와 본다. Stage 1 - HTML에 대해 알아보자 - 네이버 함께 정복하는 크롤링 스터디

HTML 구조 연습하기

출처 : Stage 2 - 선택자 대해 알아보자 - 네이버 함께 정복하는 크롤링 스터디

• 제품리스트
  • 첫번째 줄
    • 첫번째 상품
      • 상품명
      • 최저가
      • 상품평
      • 판매처
    • 두번째 상품
      • 상품명
      • 최저가
      • 상품평
      • 판매처

    • ---

  • 두번째 줄
    • 첫번째 상품
      • 상품명
      • 최저가
      • 상품평
      • 판매처
    • 두번째 상품
      • 상품명
      • 최저가
      • 상품평
      • 판매처

    • ---

데이터를 특정짓기 위한 선택자

• html은 반복적으로 태그들이 쓰이기 때문에 컴퓨터는 특정 태그에 대해서 혼동이 올 수 있다.
• 따라서 태그에 특정 별명을 붙이는데 이 별명을 선택자라고 하며 ID와 클래스가 가장 많이 쓰인다.
• id는 고유한 식별자로서 한 ID는 html 문서에 하나밖에 존재하지 않는다.

컴퓨터에게 선택자 알려주기

• 태그 : 그냥 태그명을 적어주면 된다.
• ID가 1234 인 div 태그 : div#1234
• class가 1234인 div 태그 : div.1234
• 우리가 가지고 오고 싶은 부분을 눈으로 확인하고 그 부분의 html 태그를 해석하여 선택자를 선택하고 컴퓨터에게 선택자를 알려준다.

연습하기

출처 : Stage 2 - 선택자 대해 알아보자 - 네이버 함께 정복하는 크롤링 스터디

1. 자식선택자
   1. 바로 밑의 선택자를 찾아야 할 때 사용
   2. 우측의 영상제목들만 가지고 오기
   3. div.cds>span.title
2. 자손 선택자
   1. 자식선택자를 건너띄고 자손선택자를 가지고 오기
   2. div#container span.title
3. 위의 2개 모두 불러오는 것은 같으나 불러오는 상황이 다르다.

선택자 선택하기

1. 간결성
   1. 결국 선택자 경로상에서 가장 중요한 것은 우리가 원하는 데이터가 있는 마지막 선택자이다.
2. 정확성
   1. 해당 태그가 그 태그만 속한 것이 맞는지 확인이 필요하다.
      1. <span class =”hit”> ===> 컨트롤 + F 를 통해 span.hit 을 검색해본다.
3. 세분화
   1. 어디까지의 조상을 결정 할지를 잘 확인하자.