ChatGPT로 웹사이트를 만드는 방법
ChatGPT 튜토리얼: ChatGPT로 웹사이트를 만드는 방법
ChatGPT 는 지난 몇 주 동안 가장 핫한 AI 주제입니다. 모두가 대화를 공유하거나 많은 문제에 대한 답변을 공유합니다. 또한 사람들은 코드 작성 능력에 대한 통찰력을 공유하지만 우리는 그것에 대해 이야기하지 않을 것입니다. 이 튜토리얼에서는 ChatGPT를 사용하여 웹 사이트를 만듭니다. 그리고 ChatGPT 및 기타 획기적인 기술을 기반으로 앱을 만들고 싶다면 AI 해커톤 등록을 고려해야 합니다. 그러니… 더 이상 시간을 낭비하지 말고 바로 시작하세요!
GPTChat으로 웹사이트 만들기
먼저 프롬프트를 삽입했습니다.
chatgpt 프롬프트
모바일에서도 작동하는 부트스트랩 반응형 디자인과 반응형 메뉴 및 반응형 햄버거 메뉴로 html 스켈레톤을 만듭니다. 그리고 jquery, popper 및 bootstrap과 같은 닫는 본문 태그 앞에 필요한 모든 스크립트를 가져옵니다.
ChatGPT에서 올바른 응답을 받은 것 같지만 확실히 하기 위해 리플릿 에서 확인하지 않고 계속 작업합니다.
리플릿의 html 스켈레톤
작동하는 것을 볼 수 있지만 모바일 메뉴는 작동하지 않습니다. 그리고 ChatGPT가 스켈레톤을 약간 자른 것 같고 하나의 스크립트에 대한 닫는 태그가 없으며 https://getbootstrap.com/docs/4.1/getting-started/introduction/ 을 확인 하면 해당 부트스트랩을 볼 수 있습니다. 스크립트가 없습니다. 그래서 그냥 수정합시다. 아, 그리고 부트스트랩 소개를 기반으로 수입품도 최신 수입품으로 바꾸겠습니다.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Website</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Page content -->
<div class="container mt-5">
<h1>Welcome to My Website!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare
magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa
sem. Etiam finibus odio quis feugiat facilisis.
</p>
</div>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
만세, 작동합니다! 콘텐츠 작업을 해보겠습니다. 포트폴리오 사이트를 만들고 싶습니다.
제목은 무엇이어야 합니까?
우선, 제목은 무엇이어야 할까요? 저는 ChatGPT에게 작업을 요청했습니다.
