반응형
사용한 툴
- `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 파일을 잘 찾아옵니다.
코드를 붙여넣어서 페이지를 살펴보겠습니다.
<!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 |