풀스택 개발자 과정 49일차

너구·2026년 7월 16일

풀스택 성장과정

목록 보기

52/79

JSONUPTest

package CRTest;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

import java.io.IOException;

public class JSONUPTest {
    static void main() throws IOException {
        String url = "https://gominppogegi.tistory.com/entry/%EC%98%A4%EB%8A%98%EC%9D%98-%EB%AA%85%EC%96%B8-%EC%9D%B8%EC%83%9D-%EB%AA%85%EC%96%B8-%EC%A7%A7%EA%B3%A0-%EC%A2%8B%EC%9D%80-%EA%B8%80%EA%B7%80-%EC%A7%A7%EC%9D%80-%EB%AA%85%EC%96%B8-%EB%AA%A8%EC%9D%8C#google_vignette";
        // 요청 후 나온 결과물 Document  Jsoup을 이용해 연결하는데 위에 문자열 웹 주소 get
        Document document = Jsoup.connect(url).get();

        Elements elements = document.select("div.tt_article_useless_p_margin");
        Elements elements1 = elements.select("ol");

        System.out.println(elements1.first().text());

        int count = 1;
        for (Element e : elements1) {
            Elements elements2 = e.select("li");
            for (Element e1 : elements2) {
                System.out.println((count++) + ". " + e1.text());
            }
            System.out.println();
        }
    }
}

의존성

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>effect</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>25</maven.compiler.source>
        <maven.compiler.target>25</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <dependencies>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.10.1</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <version>9.4.0</version>
        </dependency>
        <dependency>
            <groupId>com.itextpdf</groupId>
            <artifactId>itext-core</artifactId>
            <version>8.0.4</version>
            <type>pom</type>
        </dependency>
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>4.15.0</version>
        </dependency>
        <dependency>
            <groupId>io.github.bonigarcia</groupId>
            <artifactId>webdrivermanager</artifactId>
            <version>5.5.3</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>1.7.30</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>5.2.3</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>5.2.3</version>
        </dependency>
        <dependency>
            <groupId>org.jsoup</groupId>
            <artifactId>jsoup</artifactId>
            <version>1.15.3</version>
        </dependency>
    </dependencies>

</project>

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹 개발 입문</title>
</head>
<body>
    <h1>웹 개발 기초</h1>
    <p>HTML</p>
    <p>CSS</p>
    <p>자바스크립트</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>상품 소개 페이지</title>
</head>
<body>
    <h1>레드향</h1>
    <h2>레드향 샐러드 레시피</h2>
    <h3>상품 구성</h3>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>상품 소개 페이지</title>
</head>
<body>
    <h1>레드향</h1>
    <p><small>껍질</small>에 붉은 빛이 돌아 <strong>레드향</strong> 이라 불린다.</p>
    <p>레드향은 <em>한라봉과 귤</em>을 교배한 것으로 <br>크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 <br>좋은 것으로 알려져 있다.</p>
    <blockquote>
        비타민 C와
        <i>비타민 P</i>가 풍부해 <br>
        <b>혈액 순환</b>, 감기 예방
        <sup>1</sup> 등에
        <del>좋은 것으로 알려져 있다.</del>
    </blockquote>
    <h2>레드향 <sub>2</sub> 샐러드레시피</h2>
    <h2>상품 구성</h2>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>상품 소개 페이지</title>
</head>

<body>
    <h2>레드향 샐러드 레시피</h2>
    <p><b>재료:</b> 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
    <p><b>드레싱:</b> 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
    <ol type="i">
        <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
        <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
        <li>드레싱 재료를 믹서에 갈아줍니다.</li>
        <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 
            드레싱을 뿌리면 끝!</li>
    </ol>
    <ul>
        <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
        <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
        <li>드레싱 재료를 믹서에 갈아줍니다.</li>
        <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 
            드레싱을 뿌리면 끝!</li>
    </ul>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>상품 구성</h2>
    <dl>
        <dt>선물용 3kg</dt>
        <dd>소과 13~16과</dd>
        <dd>중과 10~12rhk</dd>
    </dl>
    <dl>
        <dt>선물용 5kg</dt>
        <dd>중과 15~19과</dd>
    </dl>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>상품 소개 페이지</title>
    <style>
        table, th, td {
            border: 1px solid #ccc;
            /* cllapse -> collapse로 오타를 수정했습니다 */
            border-collapse: collapse; 
        }
        th, td {
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <thead>
        <tr>
            <th>용도</th>
            <th>중량</th>
            <!-- </thth> -> </th>로 오타를 수정했습니다 -->
            <th colspan="2">개수</th>
            <th>가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">선물용</td>
            <td>3kg</td>
            <td>소과</td>
            <td>13 ~ 16과</td>
            <td rowspan="2">30,000원</td>
        </tr>
        <tr>
            <td>3kg</td>
            <td>중과</td>
            <td>10 ~ 12과</td>
        </tr>
        <tr>
            <td rowspan="2">가정용</td>
            <td>3kg</td>
            <td colspan="2">중과 15 ~ 19과</td>
            <td>50,000원</td>
        </tr>
        <tr>
            <td>5kg</td>
            <td colspan="2">중과 15 ~ 19과</td>
            <td>50,000원</td>
        </tr>
        
    </tbody> <!-- 닫는 tbody 태그가 빠져 있어 추가했습니다 -->
    </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>상품 소개 페이지</title>
    <style>
        table, th, td {
            border: 1px solid #ccc;
            border-collapse: collapse; 
        }
        th, td {
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <table>
    <caption>선물용과 가정용 상품 구성</caption>
    <colgroup>
        <col style="background-color: #eee;">
        <col>
        <col span="2" style="width: 150px;">
    </colgroup>
    <thead>
        <tr>
            <th>용도</th>
            <th>중량</th>
            <th>개수</th>
            <th>가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">선물용</td>
            <td>3kg</td>
            <td>소과</td>
            <td>13 ~ 16과</td>
            <td>30,000원</td>
        </tr>
        <tr>
            <td>3kg</td>
            <td>중과</td>
            <td>10 ~ 12과</td>
        </tr>
        <tr>
            <td rowspan="2">가정용</td>
            <td>3kg</td>
            <td>중과 15 ~ 19과</td>
            <td>50,000원</td>
        </tr>
        <tr>
            <td>5kg</td>
            <td>중과 15 ~ 19과</td>
            <td>50,000원</td>
        </tr>
        
    </tbody> 
    </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="images/1.jpg" alt="레드향">
    <h1>고앵이</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>고앵이고앵이</h1>
    <p>원래 크기의 이미지</p>
    <img src="images/1.jpg" alt="고앵이">
    <p>width="50%", height="50%"로 저장한 이미지</p>
    <img src="images/1.jpg" alt="고앵이" width="50%">
    <p>width="150px"으로 저장한 이미지</p>
    <img src="images/1.jpg" alt="고앵이" width="150px">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>웹 문서에 PDF 파일 삽입하기</h1>
    <object width="900" height="800" data="medias/product.pdf"></object>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <meta charset="UTF-8">
    <title>멀티미디어 파일 삽입하기</title>
<body>
    <embed src="medias/spring.mp3">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <meta charset="UTF-8">
    <title>상품 소개 이미지</title>
<body>
    <div id="container">
        <audio src="medias/spring.mp3" controls></audio>
        <!-- 영상을 읽어오는데 시간이 걸릴 수 있는데 먼저 poster 이미지가 나오고 영상이 오면 영상을 출력 -->
        <video src="medias/salad.mp4" controls autoplay loop width="700"></video>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <meta charset="UTF-8">
    <title>상품 소개 페이지</title>
<body>
    <div id="container">
        <a href="11.html"><img src="images/1.jpg" alt="꼬앵이"></a>
        <h1>고 앵 이 🐾</h1>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <meta charset="UTF-8">
    <title>상품 소개 페이지</title>
<body>
    <div id="container">
        <a href="https://www.starbucks.co.kr/index.do">
            <img src="images/1.jpg" alt="써타벅스 고앵이"></a>
        <h1>써타벅스 고앵이</h1>
    </div>
</body>
</html>

마무리

오늘은 남은 크롤링과 html에 대해 배워보는 시간을 가져보았다.
개인사정으로 오후 수업은 못들었지만 주말에 공부해서 보충할 예정이다.

너구

이전 포스트

풀스택 개발자 과정 48일차

다음 포스트

풀스택 개발자 과정 49일차

풀스택 성장과정

JSONUPTest

의존성

HTML

마무리

풀스택 개발자 과정 48일차

풀스택 개발자 과정 50일차

0개의 댓글