커스텀 크롤러 #

CSS 선택자 이용해 수동으로 크롤링할 사이트를 추가할 수 있는 기능입니다.

CSS 선택자를 모르실 경우는 아래 CSS 선택자에 대한 메뉴얼을 참고해주세요.

크롬 개발자 도구를 사용하기 때문에 크롬 브라우저가 설치되어 있어야 합니다.

CSS 선택자 #

CSS 선택자(CSS Selector)는 웹페이지 내에서 특정 HTML 요소를 선택하는 데 이용됩니다.

<div id="post" class="photo">
  <a href="/post/1">게시글1</a>
  <a href="/post/2">게시글2</a>
</div>
<div>
  <a href="/before">이전페이지</a>
  <a href="/next">다음페이지</a>
</div>

위 의 HTML 코드에서 CSS 선택자에 대한 종류는 아래와 같습니다.

게시글1, 2을 모두 선택하기 위한 선택자는 두 가지 방식으로 가능합니다.

아래처럼 “요소 선택자” 만으로 선택하는 경우에는 “게시글1” “게시글2” 외 에 “이전페이지” 와 “다음페이지” 까지 모두 선택이 되기 때문에 피해야 합니다.

크롬 개발자 도구 사용법 #

크롬 우측의 아이콘을 클릭하여 “도구 더보기” - “개발자 도구” 를 클릭하여 실행할 수 있습니다. 단축키는 윈도우(Ctrl + Shift + I), 맥북(Command + option + I) 입니다.

게시글 목록에서 “제목” a 태그(링크) 를 확인하기 CSS 선택자를 확인하기 위한 요소를 마우스 우클릭 하여 “검사"를 클릭 합니다.

게시글 제목에 해당하는 CSS 선택자를 확인 할 수 있습니다.

여기서는 .list_subject 인것을 확인할 수 있습니다.

만약 .list_subject 선택자 이름을 사용하는 것이 제목 링크만이 아니라 다른 요소에도 사용되는 경우는 해당 선택자로 제목만이 아니라 다른 요소까지 함께 선택되어 버립니다.

때문에 필요한 경우에는 상위 요소 CSS 선택자를 포함하여 좀 더 세밀하게 요소를 특정 해볼 수 있습니다.

div.list_item .list_title .list_subject

1. 개발자 도구의 “콘솔(console)” 탭으로 이동합니다.
2. $$('선택자') 형태로 입력해 테스트로 선택해 볼 수 있습니다.
3. 아래의 예시에서는 총 33개의 객체가 선택 되었습니다.