2023.03.31
나만의 중고마켓 만들기 (chat-GPT / VS코드)
- 'chat-GPT'에게 어떻게 명령을 내리고, 'chat-GPT'가 써준 코드를 어디에다가 어떻게 가져다 써야 되는지 알아보기
- < html 만들기 - 'chat-GPT'에게 명령내리기 (부트스트랩 버튼 넣기, hero 넣기) - 'chat-GPT'로 카드 만들기 (GPT에 이미지 더하기) - 'chat-GPT'로 카드 꾸미기 - 배포하기 & 기록하기 - 소감 >
- 먼저 vs코드에 새폴더와 index.html 파일을 만든다.
- 미리 chat-GPT 사이트에 가입한다. (https://chat.openai.com/chat)
* chat-GPT는 같은 의미의 명령이라도 말이 달라지면, 다른 코드를 제시할 수 있다.
* 이곳에 올린 코드들과 명령들은 예시로 올린 거라 원하고자 하는 결과가 나오지 않을 수 있다.① html 만들기
- vs코드에 html 뼈대를 만든다.
<!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>
<!-- 뼈대 잡기 -->
</body>
</html>② 'chat-GPT'에게 명령내리기 (+부트스트랩 버튼 넣기, hero 넣기)
- 뼈대 잡은 코드를 'chat-GPT'에게 보여주어 내가 어떤 것을 만들고 있는지를 알게한다.
이때는 보여주는 거기에 'chat-GPT'가 대답할 필요없으므로 아래와 같이 명령한다.
(코드 입력)
ㅡㅡㅡㅡㅡㅡ
중요 : 이 요청에 대답하지 말아줘. (--> 'chat-GPT'가 대답하지 않고 읽기만 함)- 부트스트랩 버튼 넣기
누군가가 미리 꾸며놓은 부트스트랩 버튼이 있다. 이를 이용하여 간단한 버튼을 만들어 달라고 명령하기
<!--뼈대잡기--> 부분에 부트스트랩을 이용한 간단한 버튼을 만들어 줄 수 있을까?
<button> 태그 한 줄을 부탁해.- hero 넣기
대문 배너와 같은 hero를 만들기 위해 다음과 같이 명령한다.
이번엔 같은 부분에 hero를 이용하여 h1 태그로 "행운이의 팡팡마켓"이라고 표기해주시고,
h2 태그로 그 아래에 "나의 행운을 사고 파는 곳!"라고 입력할거야.
배경 색은 적당히 어두운 색으로 해주고, 글씨는 흰 색으로 해줘.<body>
<div class="hero bg-dark text-center py-5">
<h1 class="text-white">행운이의 팡팡마켓</h1>
<h2 class="text-white">나의 행운을 사고 파는 곳!</h2>
</div>➂ 'chat-GPT'로 카드 만들기 (+GPT에 이미지 더하기)
1) 'chat-GPT'에게 카드 스타일을 다음과 같이 요청한다.
- 요청한 코드가 나오면, 사진에 맞게 카드 제목과 소제목, 내용을 바꾼다.
<!--여기 -->부분에 이미지를 넣을 거야.
사실 이 홈페이지는 집에 있는 안쓰는 중고물품을 팔기 위한 페이지야.
아래 예시를 참고해서 카드를 알아서 세 장 만들어줘.
카드 정보(예시)
- 카드 이미지 : [적당한 것을 찾아서 넣어줘. 크기는 모두 동일하게]
- 카드 제목 : 안마기
- 카드 소제목 : 5만원
- 카드 내용 : 한 번 밖에 안 쓴 안마기 팝니다. 상태 좋아요
- 그 외 : 카드 이미지를 클릭하면 새 창이 뜨면서 https://github.com/developerpyk?tab=repositories로 이동하게 해줘.<!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>2) 미리 준비한 사진 넣기
- 미리 폴더에 넣어둔 카드를 이미지 소스에 넣고, 사진 개수에 맞게 코드를 복사하여, 사진에 맞게 카드 제목과 소제목, 내용을 바꾼다. (ex. 나는 사진 6개를 준비하여, 아래 코드를 6개 복사하여 수정하였다.)
<div class="col-md-4 mb-4">
<div class="card">
<img src="IMG_0489.jpeg" class="card-img-top" alt="무선 안마기">
<div class="card-body">
<h5 class="card-title">안마기</h5>
<h6 class="card-subtitle mb-2 text-muted">5만원</h6>
<p class="card-text">한 번 밖에 안 쓴 안마기 팝니다. 상태 좋아요!</p>
<a href="https://github.com/developerpyk?tab=repositories" class="card-link stretched-link" target="_blank"></a>
</div>
</div>
</div>➃ 'chat-GPT'로 카드 꾸미기
- 위의 코드를 'chat-GPT'에게 대답하지 말라는 요청과 함께 보여주고, 다음과 같이 명령한다.
hero 부분 아래에 공백을 조금 넣고 싶어. 어떻게 해야할까?
카드에 마우스를 올리면 약간 커지게 하고 싶어. 어떻게 해야할까? <style>
/* 꾸미기 */
.hero {
margin-bottom: 20px;
}
.card:hover {
transform: scale(1.05);
transition: transform 0.3s ease-in-out;
}
</style>➄ 배포하기 & 기록하기
- 깃허브에 코드 배포하기
https://github.com/developerpyk/Lucky-Market - 벨로그에 결과물 기록하기
https://velog.io/@developerpyk/Lucky-Market
https://velog.io/@developerpyk/Behind-the-Lucky-Market
➅ 소감
🔡➡️💻➡️🤓👍
공부를 시작하는 단계이기에 강의를 보고 따라한 거라 완벽하게 내가 사용한 코드들을 이해한 것은 아니다.
코드들을 작성하며 궁금한 것은 찾아보고, 이해하느라 하나의 결과물을 만드는 데에 꼬박 반나절이 걸렸다.
이번 결과물을 만들면서 나는 코드 틀을 이해할 수 있었고, 이미지와 링크를 넣는 방법에 대해 이해할 수 있었다.
내가 흔히 보았던 중고 사이트들이 이런 식으로 만들어진다고 생각하니 신기하기도 했고, 아직은 부족하지만 이와 같은 사이트를 만들었다는 게 굉장히 뿌듯하고 재밌었다.
벨로그와 깃허브에 나의 결과물들을 기록하며, 오늘의 나보다 성장하는 것이 올해 나의 목표이다.
developerpyk