JAVA 를 이용한 웹 크롤링 CSS 선택자

우선 웹 크롤링을 Python이 아닌 java의 라이브러리를 사용하기 위해서 찾아보던 중, BeautifulSoup와 Jsoup 똑같이 특정 html을 긁어오려면 F12를 통한 개발자 도구에서 Css Selector가 필요했습니다.

https://wikidocs.net/85739 

 

그중 CSS selector 에 대한 공부가 필요했고, 해당 태그의 문법에 대해서 설명해 드리겠습니다.

 

우선 문법을 쉽게 이해하기위해서https://rebornbb.tistory.com/entry/Springboot-Jsoup-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%EC%9B%B9-%ED%81%AC%EB%A1%A4%EB%A7%81%ED%95%98%EA%B8%B0

위 블로그에서 적은 css selector와 일반적인 윈도우 데브툴을 이용한
CSS selecot 두 사례를 비교하면서 설명하겠습니다. 

section ul.type2 li 와 #section-list > ul 차이에 대해서 설명 하겠습니다. 


먼저, `section ul.type2 li`와 `#section-list > ul`는 서로 다른 CSS 선택자입니다.

1. **`section ul.type2 li`:**
   - 이 선택자는 `<section>` 요소 아래에 있는 모든 `<ul>` 중에서 `class`가 `type2`인 `<ul>` 안에 있는 모든 `<li>` 요소를 선택합니다.

2. **`#section-list > ul`:**
   - 이 선택자는 `id`가 `section-list`인 요소 바로 아래에 있는 모든 `<ul>`을 선택합니다. `>` 기호는 직계 자식을 나타냅니다.

따라서 두 선택자는 다른 요소를 나타냅니다. 첫 번째 선택자는 특정 클래스를 가진 `<ul>` 안에 있는 `<li>` 요소들을 선택하는 반면, 두 번째 선택자는 특정 ID를 가진 요소 바로 아래에 있는 `<ul>`을 선택합니다.

이제 `#section-list > ul` 선택자로 `li` 태그를 한 줄씩 Element에 저장하도록 변경하겠습니다:

```java
Elements contents = document.select("#section-list > ul > li");

for (Element content : contents) {
    News news = News.builder()
            .image(content.select("a img").attr("abs:src")) // 이미지
            .subject(content.select("h4 a").text())        // 제목
            .url(content.select("a").attr("abs:href"))      // 링크
            .build();
    newsList.add(news);
}
```

위 코드에서 `#section-list > ul > li` 선택자를 사용하여 `<ul>`의 직계 자식인 `<li>`를 선택하였습니다. 이렇게 변경하면 `#section-list` 아래의 모든 `<ul>`의 직계 자식 `<li>` 요소를 선택할 것입니다.

 

 

2.6 사이트 정보 추출하기 - beautifulsoup 사용법 (1)