기본 세팅(부트 스트랩이용, title, h1,h2, hero 등은 수정 가능)
<!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에게 이미지 찾게 하기
[INFO: you can add images to the reply by Markdown, Write the image in Markdown without backticks and without using a code block. Use the Unsplash API (https://source.unsplash.com/1600x900/?). the query is just some tags that describes the image] ## DO NOT RESPOND TO INFO BLOCK ##
이후 한국어로 원하는 이미지 찾기
ex) 나무 의자 이미지 찾아줘
챗GPT에게 카드 만들게 하기
<!-- 여기 --> 부분에 부트스트랩 카드를 만들어 넣을 거야. 사실 이 홈페이지는 집에 있는 안쓰는 중고물품을 팔기 위한 페이지야. 예를 들면 전기밥솥이 있을 수 있겠지. 아래 예시를 참고해서 카드를 알아서 세 장을 만들어줘.
카드 정보(예시)
- 카드 이미지 : [적당한 것을 찾아서 넣어줘. 크기는 모두 동일하게]
- 카드 제목 : 전기밥솥
- 카드 소제목 : 5만원
- 카드 내용 : 한 번 밖에 안쓴 전기밥솥 팝니다. 부모님이 독립 할 때 주신 거에요!
- 그 외 : 카드 이미지를 클릭하면 새 창이 뜨면서 스파르타코딩클럽 홈페이지로 이동하게 해줘.
챗GPT에게 추가 효과 만들게 하기
구체적으로 명령을 내리면 그에 적당한 답변을 해준다
예시) hero 밑에 살짝 공간이 있으면 좋겠어. / 카드에 마우스를 올렸을 때 살짝 부드럽게 커지게 하고싶어.
이런식으로 만들 틀에 개인적인 커스터마이징도 할 수 있다.