728x90
반응형
SMALL
chatGPT를 이용하여 웹사이트 만들기
3탄
카드 만들기
▼ 1탄, 2탄 링크 입니다.
chatGPT를 이용하여 웹사이트 만들기 1탄
chatGPT를 이용하여 웹사이트 만들기 1탄 chatGPT를 이용하여 웹사이트 만드는 방법 알려드릴게요. 1. 우선 윈도우에 Visual Code를 설치합니다. https://code.visualstudio.com/Download 위 링크에 접속하여 비쥬얼
smartgomtaeng.tistory.com
chatGPT를 이용하여 웹사이트 만들기 2탄
chatGPT를 이용하여 웹사이트 만들기 2탄 chatGPT를 이용하여 웹사이트 만드는 방법 알려드릴게요. 2탄입니다. ▼ 1탄 링크 입니다. chatGPT를 이용하여 웹사이트 만들기 1탄 chatGPT를 이용하여 웹사이트
smartgomtaeng.tistory.com
chatGPT를 이용하여 웹사이트 만드는 방법 알려드릴게요. 3탄입니다.
1. GPT에 먼저 기본적인 코드를 알려주기
먼저 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">
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. GPT한테 구체적으로 명령하기
위 코드의 어떤 부분에 어떤 것을 만들고 싶은지 구체적으로 상세히 명령해주어야 합니다.
위에서 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">
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 mt-5">
<div class="row">
<div class="col-lg-4">
<div class="card">
<a href="https://bearpost.tistory.com/" target="_blank"><img src="https://source.unsplash.com/400x225/?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-lg-4">
<div class="card">
<a href="https://bearpost.tistory.com/" target="_blank"><img src="https://source.unsplash.com/400x225/?washing-machine" class="card-img-top" alt="세탁기"></a>
<div class="card-body">
<h5 class="card-title">세탁기</h5>
<h6 class="card-subtitle mb-2 text-muted">20만원</h6>
<p class="card-text">1년 정도 사용한 건조기 겸용 세탁기 팝니다. 상태는 양호합니다.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<a href="https://bearpost.tistory.com/" target="_blank"><img src="https://source.unsplash.com/400x225/?microwave" class="card-img-top" alt="전자레인지"></a>
<div class="card-body">
<h5 class="card-title">전자레인지</h5>
<h6 class="card-subtitle mb-2 text-muted">2만원</h6>
<p class="card-text">조금 오래됐지만 여전히 잘 동작하는 전자레인지 팝니다. 귀찮은 청소도 필요없어요!</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
코드 수정 후 파일 저장한 다음에 Alt+B를 클릭하여 웹사이트가 어떻게 바뀌었는지 실시간으로 확인해줍니다.
만약 원하는 결과가 나오지 않았다면 GPT에게 대화하듯이 계속 구체적으로 수정사항에 대해 이야기하면 됩니다.
728x90
반응형
LIST
'인터넷 IT 관련' 카테고리의 다른 글
| chatGPT를 이용하여 웹사이트 만들기 2탄 (0) | 2023.05.10 |
|---|---|
| chatGPT를 이용하여 웹사이트 만들기 1탄 (0) | 2023.05.08 |
| 윈도우10 C드라이브 용량 확보 (0) | 2023.05.04 |
| 컴퓨터 불필요한 용량 줄이기 C드라이브 용량 확보 (0) | 2023.05.04 |
| 웹 크롤링 코드 작성 예시 (근로복지공단) (0) | 2023.05.03 |
댓글