CSS / 크롤링

8.9(금)

1. DOM Tree / Render Tree

👉 돔트리는 HTML 문서의 구조를 트리 형태로 표현
👉 div, p, a 태그 같은 요소들이 돔 트리의 노드

👉 랜더트리는 돔트리를 기반으로 페이지를 실제로 어떻게 표시할지 결정하는 트리
👉 돔트리와 각 노드가 스타일 정보와 조합되어 랜더 트리의 노드로 변환.

---

2. Less / Sass

👉 less는 css에 추가적인 기능을 제공하는 스타일 시트 언어
👉 sass는 스타일 시트의 작성을 더 간편하게 해주는 css전처리기

---

3. Bootstrap

3-1. Container

👉 그리드 시스템의 최대 너비를 설정하고, 페이지의 내용을 가운데로 정렬하는 역할
👉 화면 전체너비를 사용하여 반응형 디자인을 구현할때 유용함.

3-2. Row

👉 열을 포함하는 행을 정의, 그리드의 열을 수평으로 정렬

3-3. col

👉 그리드의 열을 정의하며, 페이지 레이아웃을 12등분으로 배치
👉 col-sm,md,lg,xl 순서로 크기가 나뉘어지고

<div class="container">
  <div class="row">
    <div class="col-md-4">첫 번째 열</div>
    <div class="col-md-4">두 번째 열</div>
    <div class="col-md-4">세 번째 열</div>
  </div>
</div>

👉 12개의 크기를 4만큼의 크기로 나누어 갖는다.

4. 크롤링

public class NaverWebtoonList {

    public static void main(String[] args) throws Exception {
        // 네이버 웹툰 메인 페이지의 URL
        String path = "https://comic.naver.com/webtoon";

        // ChromeDriver 인스턴스를 생성하여 Chrome 브라우저를 제어
        WebDriver driver = new ChromeDriver();

        // 지정한 URL로 이동
        driver.get(path);

        // 페이지 로딩을 기다리기 위해 3초간 대기
        Thread.sleep(3000);

        // 웹 페이지에서 ".WeekdayMainView__daily_all_wrap--UvRFc ul" CSS 선택자에 해당하는 요소들을 찾음
        java.util.List<WebElement> elements = driver.findElements(By.cssSelector(".WeekdayMainView__daily_all_wrap--UvRFc ul"));

        // 각 ul 요소에 대해 반복
        for (WebElement ul : elements) {
            // ul 요소 내부에서 "li img" CSS 선택자에 해당하는 첫 번째 img 요소를 찾음
            WebElement li = ul.findElement(By.cssSelector("li img"));
            
            // img 요소의 "alt" 속성을 출력 (이미지에 대한 설명)
            System.out.println(li.getAttribute("alt"));
            // img 요소의 "src" 속성을 출력 (이미지의 URL)
            System.out.println(li.getAttribute("src"));
            // 구분선 출력
            System.out.println("-------------------------");
        }

        // 페이지가 완전히 로드되고 결과가 출력될 시간을 위해 1초간 대기
        Thread.sleep(1000);
        
        // 브라우저를 닫음
        driver.close();
    }
}