분석하는 마케터

크롤링을 처음 시작할 때 무턱대고 예시 코드만 보고 시작했다가 다른 사이트에서 크롤링을 시도하게 되면 자꾸 오류만 나고 헤매었던 경험, 크롤링 초보라면 낯설지 않을겁니다.
HTML 기초 필수 지식을 익히신다면, 크롤링 예시 코드가 왜 그렇게 구성되어있나!! 하는 것들을 좀 더 잘 익히실 수 있을 겁니다.
실제로 크롤링을 활용해보고 싶은 초보 크롤러분들께 필요한 HTML 기초 필수 지식을 담았습니다.

 

이번 포스팅에서는 크롤링을 할 때에 사용되는 '선택자' 개념에 대해 다루어보도록 하겠습니다.

선택자란?

선택자란 말 그대로 선택을 해주는 요소입니다.

주로 css에서 스타일을 적용하기 위해 쓰이는 개념인데요, 크롤링에서의 선택자는 가져오고자 하는 데이터를 선택하는 것 또는 해당 데이터의 문서 내 위치 정도로 이해하면 될 것 같습니다.

 

즉, 선택자를 통해 내가 수집하고자 하는 데이터의 문서 내 위치를 알려주면 서버에서 해당 위치에 위치한 데이터를 가져오게 되는 것이죠.

선택자로는 꼭 하나의 데이터만 불러올 수 있는게 아니라, 선택자의 조건에 부합하는 요소를 모두 수집합니다.

예를 들어, 한 페이지의 모든 제품의 제품명에 해당하는 조건을 선택자로 걸면, 모든 제품명을 가져오게 되는 것입니다.

 

지금부터는 조건을 주기 위한 선택자의 종류를 알아보겠습니다.

 

선택자의 종류

태그 선택자(Type Selector)

태그 선택자는 HTML 요소를 직접 지칭하는 가장 간단한 선택자입니다.

앞 포스팅에서도 언급했듯, 태그란 < div >, < p > 등을 지칭하는 단어인데요, 태그 선택자는 '태그' 형식으로 바로 이런 태그의 이름을 선택자로 활용하는 것입니다.

예를 들어, 태그 선택자로 p를 사용하면 문서 내에서 < p >와 < /p > 사이에 있는 데이터를 모두 수집할 수 있습니다.

이러한 HTML 문서에 대해 p라는 태그 선택자를 사용하면 '태그 선택자 1'과 '태그 선택자 2'를 선택하게 되는 것입니다.

 

클래스 선택자(Class Selector)

클래스 선택자는 주어진 값을 class 속성값으로 가진 HTML 요소를 찾아 선택하는 선택자입니다.

속성은 < p class="menu" >와 같이 <>안에서 태그를 제외한 '속성=속성값' 형식으로 되어있는 것을 말하는데요,

클래스 선택자는 '태그.클래스' 형식으로 사용하면 됩니다.

예를 들어, 위의 HTML 문서에 대해 p.menu라는 선택자를 사용하면 '아메리카노'라는 데이터를 선택하게 되는 것입니다.

 

ID 선택자(ID Selector)

ID 선택자는 주어진 값을 id 속성값으로 가진 HTML 요소를 찾아 선택하는 선택자입니다.

id 또한 class와 같이 < p id="ade-menu" > 처럼 속성으로 사용되었습니다.

ID 선택자에서는 마침표('.') 대신 샵('#')을 사용하여 '태그#아이디'의 형식으로 사용합니다.

예를 들어, 위의 HTML 문서에 대해 div#ade-menu라는 선택자를 사용하면 '에이드류'라는 데이터를 선택하게 되는 것입니다.

 

복합 선택자(Combinator)

복합 선택자를 설명하기에 앞서서, 부모 요소와 자식 요소에 대해 알아두어야 하는데요, 

앞선 포스팅에서는 HTML이 웹 문서를 '계층적'으로 표현한 것이라고 한 바 있습니다.

(아직 포스팅을 확인하지 않으신 분은 이곳을 클릭하여 포스팅을 확인하고 오시면 더욱 이해하기 쉬워지실겁니다.)

 

계층적 구조에 대한 이해를 쉽게 하기 위해 제가 이를 '폴더'로 이해하면 좀 더 수월하게 이해할 수 있을 것이라고 하였는데요, 다시 폴더 비유를 이용하면 '부모' 요소는 상위 폴더들, '자식' 요소는 하위 폴더들로 이해하시면 될 것 같습니다.

즉, 태그들이 포함 관계를 가질 때, 포함하는 요소를 부모 요소, 포함되는 요소를 자식 요소라고 하는 것이죠.

 

복합 선택자는 다시 하위 선택자와 자식 선택자로 나눌 수 있습니다.

 

하위 선택자는 부모 요소에 포함된 '모든' 자식(하위) 요소를 선택하는 선택자를 의미하고,

자식 선택자는 부모의 '바로 아래' 자식 요소만 선택하는 선택자입니다.

 

즉, 하위 선택자의 경우 특정 폴더로부터 클릭해서 열어볼 수 있는 모든 폴더를 선택하는 것이고,

자식 선택자는 특정 폴더를 클릭해서 열었을 때 보이는 폴더만 선택하는 것입니다.

 

하위 선택자는 태그와 태그 사이에 공백을 두어 표현하고, 자식 선택자는 태그와 태그 하이에 '>'를 넣어 표현합니다.

 

하위 선택자와 자식 선택자 비교

 

위의 그림으로 예시를 들어보자면, 하위 선택자인 section ul은 section 아래에 있는 모든 ul을 선택하는 것입니다.

선택자는 앞서 언급했듯이 조건에 부합하는 데이터를 모두 선택하기 때문에 section 바로 아래 있는 ul과 그보다 두 단계 더 내려간 ul을 모두 선택하게 됩니다.

그러나, 자식 선택자인 section > ul의 경우, section 바로 아래에 있는 ul만 선택하기 때문에 자식 선택자에서는 맨 아래에 있는 ul을 선택하지 않은 것입니다.

 

복합 선택자는 section ul li ul나 section > ul > li > ul과 같이 여러 태그들을 활용해 길게 늘려서 사용할 수도 있습니다.

 

바로 아래의 자식 요소와 모든 하위 요소를 포함하는 자식 요소를 구분하기 위해 전자에 대해 '자식 요소', 후자에 대해 '자손 요소'라는 네이밍을 사용하기도 합니다.

 

 

가상 클래스 선택자(Pseudo-Class)

가상 클래스 선택자에는 종류가 매우 많은데요, 그 중에서도 크롤링을 하는데 직접적으로 관련있는 선택자에는 특정 순서에 있는 요소를 선택할 때 사용하는 선택자가 있습니다.

 

특정 순서에 있는 요소를 선택하는 선택자에는 :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type()이 있습니다.

 

선택자	설명
p:nth-child(n)	부모 요소의 자식 개체 중 n번째 요소가 p태그면 선택
p:nth-last-child(n)	뒤에서부터 순서를 세었을 때 부모 요소의 바로 아래 자식 개체 중 n번째 요소가 p 태그면 선택
p:nth-of-type(n)	부모 요소의 바로 아래 자식 개체인 모든 p태그 중 n 번째 p태그 선택
p:nth-last-of-type(n)	뒤에서부터 순서를 세었을 때 부모 요소의 바로 아래 자식 개체인 모든 p태그 중 n 번째 p태그 선택

위의 표와 같이 설명을 할 수는 있으나... 저 글만 읽어서는 도무지 무슨 설명을 하는건지 이해를 하기가 힘듭니다.

그래서 쉽게 이해할 수 있게 예시를 준비했습니다.

 

위와 같은 HTML 문서를 가정해보겠습니다.

 

선택자가 div > a:nth-child(1)인 경우, div의 바로 아래 자식 개체 중 첫번째 요소는 a 입니다. 따라서 '포스팅 제목'이라는 데이터를 가지고 오게 됩니다.

그러나, 선택자가 div > p:nth-child(1)인 경우, div의 바로 아래 자식 개체 중 첫번째 요소는 p가 아닌 a이기 때문에, 조건을 만족하는 데이터가 없어 아무 데이터도 선택하지 않습니다.

 

:nth-last-child의 경우에도 마찬가지입니다.

선택자가 div > a:nth-last-child(1)인 경우, div의 바로 아래 자식 개체 중 뒤에서부터 첫 번째 요소가 a이기 때문에 '관련 포스팅'이라는 데이터를 반환하게 되지만,

선택자가 div > p:nth-last-child(1)인 경우 div의 바로 아래 자식 개체 중 뒤에서부터 첫 번째 요소가 p가 아니기 때문에 아무 데이터도 선택하지 않게 됩니다.

 

즉, :nth-child()와 :nth-last-child()는 자식 태그의 순서와 태그명의 일치 여부를 모두 고려합니다.

 

반면, :nth-of-type()와 :nth-last-of-type()의 경우는 태그명 내에서의 순서만을 고려합니다.

 

선택자가 div > p:nth-of-type(1)이라면, div의 바로 아래 자식 개체 중 태그명이 p인 요소 중 첫 번째 요소를 선택하는 것이기 때문에 '포스팅 내용1'이라는 데이터를 선택하게 됩니다.

마찬가지로, 선택자가 div > p:nth-last-of-type(1)이라면 div의 바로 아래 자식 개체 중 태그명이 p인 요소들 중에서 뒤에서 첫번째 요소를 선택하는 것이므로, '포스팅 내용2' 데이터를 선택합ㄴ디ㅏ.

 

위의 내용을 바탕으로 하였을 때,

div > p:nth-child(2)는 '포스팅 내용1'을, div > p:nth-of-type(2)는 '포스팅 내용2'라는 데이터를 선택한다는 것을 이해하실 수 있겠죠?

 

 

이 외에도 더욱 다양한 종류의 선택자들이 있지만, 크롤링을 위해서면 이 정도만 이해하면 충분합니다!

 

아래에 선택자와 관련한 연습문제들을 직접 제작했으니, 아래 문제들을 통해 선택자에 대해 더욱 깊게 이해하시면 좋을 것 같습니다.

 

이전 포스팅에서 언급한 웹사이트 HTML문서에서 원하는 데이터의 선택자를 가져오는 방법을 이용하여 문제를 풀어주시기 바랍니다!

 

연습문제

 

예제 1 지난 포스팅에 다룬 커피 메뉴판 예시에서 에이드의 메뉴명을 모두 선택하는 선택자를 작성해보세요.

(이곳을 클릭하여 지난 포스팅으로 이동하실 수 있습니다.)

#ade-menu > ul > li > p.menu

 

예제 2 지난 포스팅에서 다룬 커피 메뉴판 예시에서 ADE라는 글자를 선택하는 선택자를 작성해보세요.

#ade-menu > h1

 

예제 3 아래의 사이트에서 모든 제품명을 선택하는 선택자를 적어보세요! (최대한 여러 개 적어보세요)

휴대폰 : 네이버 쇼핑

div.basicList_title__3P9Q7 > a

또는

#next > div > div.style_container1YjHN > div.style_inner__18zZX > div.style_content_wrap__1PzEo > div.style_content__2T20F > ul > div > div > li > div > div.basicList_info_area__17Xyo > div.basicList_title__3P9Q7 > a

div.basicList_title__3P9Q7 > a

또는

#next > div > div.style_container1YjHN > div.style_inner__18zZX > div.style_content_wrap__1PzEo > div.style_content__2T20F > ul > div > div > li > div > div.basicList_info_area__17Xyo > div.basicList_title__3P9Q7 > a

등이 있습니다.

 

---

참고) 알아두면 도움되는 html 태그 종류

 

태그 종류는 크롤링에 있어 필수 사항은 아니나, 몇 가지 알고 있으면 사이트의 구조를 더 수월하게 파악할 수 있어 크롤링에 용이합니다.

아래는 기억해두면 좋을 태그의 종류입니다.

• h1 ~ h6 : 제목. 숫자가 작을수록 더 큰 제목
• p : 문단을 구분하는 요소
• 목록(list)
  • ul : 항목 목록. 순서를 따지지 않고 열거하는 타입의 목록 (unordered list)
  • ol : 번호 목록. 순차적 목록으로 번호가 붙는 형식의 목록 (ordered list)
  • ul과 ol로 목록을 정의하고, li 요소로 각 항목(list item)을 하나씩 정의

• a : 링크(anchor)를 설정할 때 사용(href 속성 사용하여 링크 설정)
• div : 그룹화 요소. 여러 태그들을 하나의 그룹으로 묶기 위해 사용
• b : 글씨를 볼드체로 만들어줌

더 많은 태그와 각 태그에 적용되는 속성이 궁금하시다면, 아래의 링크를 참고하시면 됩니다.

(크롤링에는 굳이 필요하지 않습니다.)

 

HTML 사전 - 생활코딩