ChatGPT로 간단한 웹사이트 만들기 - 2

https://spartacodingclub.kr/online/special/chatgpt 를 수강하면서 작성한 포스팅입니다.

사용한 툴

`ChatGPT`
`IntelliJ (IDE)`

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>나만의 중고마켓</title>
    <link rel="stylesheet" href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/easygpt/default.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>
    <style>
        /* 꾸미기 */

    </style>
</head>

<body>
<div class="hero bg-dark text-center py-5">
    <h1 class="text-white">나만의 르탄마켓</h1>
    <h2 class="text-white">집에 있는 물건을 팝니다!</h2>
</div>
<!-- 여기 -->
</body>

</html>

마켓의 홈 에다가 물건 정보를 담을 페이지를 카드 형식(맨 아래에 이미지)으로 만들어 보겠습니다.

gpt 에서 new chat 합니다.

`기본 html 템플릿`을 줍니다.

이번에는 img 파일을 요청해보겠습니다.

gpt가 이미지 파일을 찾아온 것이 아니라, 서울의 캐릭터 (=이미지)를 찾아온 모습입니다.
우리가 원하는 대답이 아니죠?

그래서 이번에는, 직접적으로 `이미지 파일을 구해올 경로`를 주고 요청을 해봅니다.

unsplash 라는 사이트의 경로를 주면 img 파일을 잘 찾아옵니다.

명령을 줄 때는 홈페이지에 대한 설명까지 주어야 gpt의 이해도가 올라가서, 원하는 답변을 얻을 확률이 올라간다고 합니다.

코드를 붙여넣어서 페이지를 살펴보겠습니다.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>나만의 중고마켓</title>
    <link rel="stylesheet" href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/easygpt/default.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>
    <style>
        /* 꾸미기 */

    </style>
</head>

<body>
<div class="hero bg-dark text-center py-5">
    <h1 class="text-white">나만의 르탄마켓</h1>
    <h2 class="text-white">집에 있는 물건을 팝니다!</h2>
</div>
<!-- 여기 -->
<div class="container my-5">
    <div class="row">
        <div class="col-md-4">
            <div class="card h-100">
                <a href="https://spartacodingclub.kr/">
                    <img src="https://source.unsplash.com/random/400x400/?rice-cooker" class="card-img-top" alt="전기밥솥">
                </a>
                <div class="card-body">
                    <h5 class="card-title">전기밥솥</h5>
                    <h6 class="card-subtitle mb-2 text-muted">5만원</h6>
                    <p class="card-text">한 번 밖에 안 쓴 전기밥솥 팝니다. 부모님이 독립할 때 주신 거에요!</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <a href="https://spartacodingclub.kr/">
                    <img src="https://source.unsplash.com/random/400x400/?keyboard" class="card-img-top" alt="컴퓨터 키보드">
                </a>
                <div class="card-body">
                    <h5 class="card-title">컴퓨터 키보드</h5>
                    <h6 class="card-subtitle mb-2 text-muted">10만원</h6>
                    <p class="card-text">새로운 키보드를 구입해 더 이상 사용하지 않는 키보드 팝니다. 키감 좋아요!</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <a href="https://spartacodingclub.kr/">
                    <img src="https://source.unsplash.com/random/400x400/?desk" class="card-img-top" alt="책상">
                </a>
                <div class="card-body">
                    <h5 class="card-title">책상</h5>
                    <h6 class="card-subtitle mb-2 text-muted">30만원</h6>
                    <p class="card-text">집 이사하면서 더 이상 사용하지 않는 책상 팝니다. 넓어서 작업하기 좋아요!</p>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

</html>

다음 게시글에서는 gpt와 함께 카드 형식을 좀 더 꾸며보겠습니다.

저작자표시 비영리 변경금지

티스토리툴바