반응형


 

사용한 툴 

  1. ChatGPT
  2. 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와 함께 카드 형식을 좀 더 꾸며보겠습니다.

 

 

 

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'Etc' 카테고리의 다른 글

[Git] 원격 저장소와 로컬 저장소 병합 문제 해결 : non-fast-forward  (0) 2025.01.09
ChatGPT로 간단한 웹사이트 만들기 - 3  (0) 2023.04.25
ChatGPT로 간단한 웹사이트 만들기 - 1  (0) 2023.04.22
IT 개인 블로그 추천 (백엔드 / 알고리즘)  (1) 2022.07.26
[참고할 사이트][김영한의 스프링 입문]  (0) 2022.06.25

티스토리툴바