[크롤링 기초] 부모(상위)태그 | 자식(하위)태그 | 형제 태그 개념

혹시 부모 태그와 자식 태그 형제 태그에 대한 개념을 아시나요?

모르신다면 이번 포스팅을 통해 개념을 정리 해보도록 하겠습니다.

 

참고적으로 우리는 html을 공부하는게 아니라, 크롤링을 위한 최소한 것들만 알아볼 예정입니다.

 

html 기본 형태

위 그림이 우리가 일반적으로 만날 수있는 html태그의 구성입니다.

(물론 이해를 돕기 위해 극단적으로 단순화 했지만요.)

 

보시는것 처럼 <태그명></태그명>형태로 구성이 되어있습니다.

다시 말하면 <태그명>로 태그를 열고 </태그명> 같이 슬래시가 있는 형태로 닫아주는 형태입니다.

 

물론 태그에 따라 닫지 않는 태그도 있으나, 일반적으로 열고 닫는 형태라는것만 알아두시면 됩니다.

 

부모 태그 자식 태그 관계

 

위 그림을 보시면 html태그 안에 head태그가 들어있습니다.

두 태그 중 누가 부모태그(상위태그) 일까요?

 

정답은 html태그입니다. 마치 자식을 품고 있듯이 head 태그를 품고 있는 형태이기 때문입니다.

 

정리하자면 html태그 기준으로 head 태그는 자식태그이고, head태그 기준으로 html 태그는 부모 태그라고 할 수 있습니다.

 

 

형제 태그

head와 body태그는 서로 어떤 관계일까요?

 

서로 포함 관계가 아니기 때문에 형제 태그 입니다.

 

물론 head태그와 h2 태그가 형제태그는 아닙니다.

아래와 같이 계층 구조로 봤을때 h2는 body의 자식태그로서 한차원 더 낮아진 형태이기 때문이죠.

 

 

 

부모 태그, 자식 태그 이런 관계들을 왜 알아야 할까요?

우리가 크롤링을 할때 필요한 일차적 정보는 태그입니다.

앞서 봤던 예시는 너무나 단순 형태여서 큰 필요성이 없게 느껴지지만,

 

아래와 같이 실제 태그들은 반복되는 태그들이 너무 많습니다.

만약 우리가 찾고자하는 부분이 div태그로 감싸져있다면, div태그가 너무 많기 때문에 어느 한부분을 특정하기 어렵습니다.

 

이런 문제를 해결하기 위한것이 class나, id같은 속성들을 추가하여 특정 부분을 유니크하게 만들어 주는 것입니다.

 

하지만 나아가 또 발생할 수 있는 문제는 마침 우리가 크롤링 할 부분만 id나 class가 없을 때입니다.

 

이럴땐 어떻게 해야할 까요?

먼저 우리가 찾고자하는 부분과 가장 가까우면서 id나 class가 있는 부분을 찾습니다.

 

다음으로 찾은 위치를 기준으로 우리의 목표 한 곳의 위치를 정의하는것입니다.

 

무슨말인지 잘 모르겠죠?

예를들어, 

 

우리가 찾고 싶은 부분이 파란색 사각형 부분이고, 그 근처에 유니크한 부분을 찾을 수 있는 위치가 title 태그 즉 빨간색 사각형 부분이라고 하겠습니다.

 

이를 계층 구조로 보자면, 아래와 같습니다.

title태그 기준으로 p태그를 어떻게 찾을까요?

 

p태그는 title태그의 형제태그인가요?

아닙니다. p태그는 body태그의 자식이지, title의 부모인 head태그의 자식이 아님으로 형제가 아니죠. 

 

그럼 둘 사이의 관계를 어떻게 정의할까요?

 

이럴땐 서로의 관계를 이어주는 최상위 태그까지 일단 올라 가는것입니다.

여기선 html이죠.

 

그다음 html기준으로 한칸씩 내려오면서 p태그를 찾는 것입니다.

 

도식화 하자면,

 

title -> head(부모) -> html(부모)까지 올라간다음

html -> body(자식) -> p(자식)순으로 내려가면서 찾을 수가 있습니다.

 

 

정리

아직까지는 조금 추상적으로 느껴지실겁니다.

하지만 지금까지 배운 이 개념을 토대로 실제로 어떻게 코드를 짜는지 배우면 확실히 이해 될테니 너무 조급해하지마세요.