기계 학습을 사용하여 자연어를 이해하고 사람과 같은 응답을 생성하는 OpenAI에서 설계한 고급 언어 모델인 ChatGPT를 이미 만나보셨습니다. 그것은 방대한 지식 기반을 보유하고 있으며 정교한 언어 "이해"를 통해 정보를 찾는 모든 사람에게 강력한 조수 역할을 할 수 있습니다. 광범위한 질문에 답하고, 조언을 제공하고, 다양한 주제에 대한 대화에 참여할 수 있으며, 방대한 영역에서 그 자체로 입증되었습니다.
그러나 ChatGPT는 웹페이지를 만들 수 있습니까? 작업을 수행하고 알아봅시다.
이것은 최신 버전이 출시되기 전에 ChatGPT 3.5를 사용하여 작성되었습니다.
몇 가지 기본 HTML부터 시작하겠습니다. 을 고려하면 ChatGPT는 이미 재능 있는 코더 및 프로그래밍 도우미로 입증되었습니다., 이것은 많은 테스트가되어서는 안됩니다.
다음은 "Hello, World" HTML 페이지를 성공적으로 만들기 위해 ChatGPT에서 사용한 프롬프트입니다.
간단한 "Hello, World!" HTML을 사용하는 웹페이지
ChatGPT는 다음과 같은 기본 HTML을 생성했으며 이는 당연히 의도한 바를 수행했습니다.
<!DOCTYPE html>
<html> <head> <title>Hello, World!</title> </head> <body> <h1>Hello, World!</h1> </body>
</html>ChatGPT는 이것을 확장자가 ".html"인 파일에 넣고 브라우저에서 열 것을 권장합니다. 임무 완수.
스크린샷으로 귀찮게 하지 않겠습니다. 형식화되지 않은 HTML 출력을 본 적이 있을 것입니다.
ChatGPT에게 더 멋지게 보이도록 요청해 봅시다.
CSS를 사용하여 이 페이지를 훨씬 보기 좋게 만들 수 있습니까?
ChatGPT는 다음에 침을 뱉습니다.
이 예제는 CSS를 사용하여 웹페이지의 배경색을 하늘색으로 변경하고, 페이지의 텍스트를 중앙에 배치하고, 제목의 색상을 네이비로 변경하고, 제목의 글꼴 크기를 4em으로 늘립니다.
CSS를 가지고 놀면서 웹 페이지의 스타일을 지정할 수 있습니다.
css를 별도의 파일에 넣고 index.html 파일에 연결하는 것도 좋은 방법입니다.
다음과 같이 보입니다.
HTML과 CSS를 사용하여 ChatGPT로 만든 간단한 웹페이지
확실히 개선되었지만 이것은 여전히 어린이 놀이입니다. 그러나 계속 진행하기 전에 ChatGPT의 조언을 받아들여 HTML과 CSS를 분리해 보겠습니다.
CSS를 별도의 파일에 넣고 index.html 파일에 연결하려면 어떻게 해야 합니까?
별도의 CSS 파일을 생성하고 내 링크 요소를 사용하여 HTML 파일에 연결할 수 있습니다.
headHTML 파일의 섹션. 다음은 이를 수행하는 방법의 예입니다.
- "index.html" 파일과 같은 디렉토리에 "styles.css"라는 새 파일을 만듭니다.
- "styles.css" 파일에 CSS 코드를 추가합니다.
- "index.html" 파일에서 다음 행을
head섹션 :
<link rel="stylesheet" type="text/css" href="styles.css">XNUMXD덴탈의
rel속성은 현재 문서와 연결된 문서 간의 관계를 지정합니다.type속성은 링크된 문서의 유형을 지정하고href속성은 링크된 문서의 위치를 지정합니다.- 두 파일을 모두 저장하고 웹 브라우저에서 "index.html"을 엽니다. 이제 "styles.css"의 스타일이 웹 페이지에 적용됩니다.
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"와 같은 온라인 링크의 css 파일을 포함할 수도 있습니다.
웹 페이지에도 적용되며 로컬 디렉토리에 포함할 필요가 없습니다.
다음을 수행하는 Craigslist 스타일의 웹 페이지를 만듭니다.
– 새 광고를 추가할 수 있습니다.
– 기존 광고를 삭제할 수 있습니다.
– 모든 기존 광고를 나열할 수 있습니다.
– 기존 광고를 수정할 수 있습니다.
Craigslist 스타일의 웹 페이지를 만들려면 HTML, CSS, JavaScript 및 PHP 또는 Node.js와 같은 백엔드 언어를 조합하여 웹 페이지의 동적 측면을 처리해야 합니다. 다음은 웹 페이지의 기본 구조가 어떻게 생겼는지에 대한 예입니다.
<!DOCTYPE html>
<html> <head> <title>Craigslist-style Webpage</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Craigslist-style Webpage</h1> <form id="add-ad-form"> <label for="title">Title:</label> <input type="text" id="title" name="title"> <br> <label for="description">Description:</label> <textarea id="description" name="description"></textarea> <br> <button type="submit">Add Ad</button> </form> <table id="ads-table"> <thead> <tr> <th>Title</th> <th>Description</th> <th>Actions</th> </tr> </thead> <tbody> <!-- This section will be populated with ads using JavaScript --> </tbody> </table> <script src="script.js"></script> </body>
</html>배경 기능이 없는 결과 프런트 엔드 페이지는 보기 좋지 않습니다. 그래서 묻습니다.
CSS 파일을 사용하여 웹 사이트를 보다 전문적으로 보이게 할 수 있습니까? 색상 팔레트가 이탈리아의 국가 색상이 되었으면 합니다.
그리고 ChatGPT는 의무를 다합니다("추가" 버튼 위에 마우스를 올려 놓으면 빨간색으로 바뀝니다).
ChatGPT로 만든 스타일이 있는 간단한 HTML 양식
그러나 JavaScript는 어떻습니까? ChatGPT가 그것을 추가할 수 있는지 봅시다.
목록에 새 광고를 추가하고 표시하기 위해 javascript를 추가할 수 있습니까?
// Get references to the form and table
const addAdForm = document.querySelector("#add-ad-form");
const adsTable = document.querySelector("#ads-table tbody"); // Handle the form submit event
addAdForm.addEventListener("submit", function(event) { event.preventDefault(); // Get the values from the form inputs const title = document.querySelector("#title").value; const description = document.querySelector("#description").value; // Create a new table row and add the ad data const newRow = document.createElement("tr"); newRow.innerHTML = ` <td>${title}</td> <td>${description}</td> <td> <button>Edit</button> <button>Delete</button> </td> `; // Add the new row to the table adsTable.appendChild(newRow); // Clear the form inputs addAdForm.reset();
});결과 :
ChatGPT로 생성된 자바스크립트를 사용한 반기능 HTML 양식
나쁘지 않다. 몇 가지 프롬프트를 통해 우리는 무에서 시작하여 보기 흉한 HTML, 더 나은 HTML, JavaScript로 이동했습니다. 무언가.
유용한 것을 시도해 봅시다. 다음은 몇 가지 특정 요구 사항이 있는 단순하지만 잠재적으로 유용한 블로그 홈페이지를 만들기 위한 프롬프트입니다.
웹페이지를 만들어 봅시다. 다음 요구 사항을 준수하는 블로그 홈페이지를 생성하는 데 필요한 HTML과 CSS 및 기타 모든 것을 작성해 주시기 바랍니다.
– 페이지는 1024px 너비를 사용합니다.
– 페이지 상단에 큰 글꼴로 된 제목이 표시됩니다.
– 아래에는 블로그의 3가지 유용한 페이지에 대한 링크가 있어야 합니다.
– 이 아래에는 업계 표준 크기를 준수하는 클릭 가능한 배너 광고가 있습니다.
– 이 아래에는 최신 블로그 섹션이 있으며, 여기에는 6개의 타일로 된 2행의 타일 레이아웃으로 3개의 최신 항목이 표시되어야 합니다.
– 최신 블로그 항목 아래에는 사진과 함께 웹사이트 설립자에 대한 정보를 나열하는 "정보" 섹션이 있어야 합니다.
– 아래에는 다음을 포함하는 일반 바닥글이 있어야 합니다.
– lorem ipsum을 사용하여 텍스트 채우기
– 현대적인 스타일을 사용하여 페이지가 매력적이어야 합니다.
– 최신 블로그 타일에 CSS 호버 효과가 있어야 합니다.
다음은 ChatGPT에서 생성한 HTML 및 CSS입니다.
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Blog</title> <style> body { font-family: Arial, sans-serif; max-width: 1024px; margin: 0 auto; padding: 1rem; } h1 { font-size: 2.5rem; text-align: center; margin-bottom: 1rem; } nav { display: flex; justify-content: center; margin-bottom: 1rem; } nav a { text-decoration: none; color: #333; margin: 0 1rem; } .banner { display: block; width: 728px; height: 90px; background-color: #ccc; margin: 0 auto 1rem; text-align: center; line-height: 90px; } .blogs { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem; } .blog { width: 32%; background-color: #f0f0f0; padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; cursor: pointer; } .blog:hover { transform: translateY(-10px); } .about { display: flex; margin-bottom: 1rem; } .about img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin-right: 1rem; } .about p { flex: 1; } footer { background-color: #333; color: #fff; padding: 1rem; text-align: center; font-size: 0.875rem; } </style>
</head> <body> <h1>My Awesome Blog</h1> <nav> <a href="#">Useful Page 1</a> <a href="#">Useful Page 2</a> <a href="#">Useful Page 3</a> </nav> <a href="#" class="banner">Ad - 728x90</a> <div class="blogs"> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> </div> <div class="about"> <img src="founder.jpg" alt="Founder's Photo"> <div> <h2>About the Founder</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis. Integer sit amet tincidunt turpis, a lacinia ligula.</p> </div> </div> <footer> © 2023 My Awesome Blog. All Rights Reserved. </footer> </body>
</html>최종 제품은 다음과 같습니다.
ChatGPT로 만든 심플한 블로그 홈페이지
꽤 좋아 보인다. 내 말은, 내가 확신하는 프롬프트에서 몇 가지 추가 CSS 지침을 사용하면 더 좋아 보일 수 있지만 대체로 나쁜 시작은 아닙니다. 심지어 왼쪽 상단 타일에서 볼 수 있는 호버 효과가 타일에 있습니다(호버링 시 약간 올라감).
한 가지 참고할 점은 "6개의 타일이 2행으로 구성된 타일 레이아웃의 최신 항목 3개"를 요청했지만 ChatGPT는 이 타일링을 2에서 생성했습니다. 열 대신.
매우 간단하고 간단한 프롬프트를 통해 ChatGPT는 확실히 웹 페이지를 생성할 수 있는 몇 가지 기능을 보여줍니다. 역동적인 것을 생성하라는 요청을 받았을 때 어떻게 작동할지, 그리고 서로 다른 구성 요소를 함께 짜도록 인간에게 지시하는 방법이 궁금합니다. 다음 시간을 위한 테스트입니다.
매튜 메이요 (@mattmayo13)는 데이터 과학자이자 획기적인 온라인 데이터 과학 및 기계 학습 리소스인 KDnuggets의 편집장입니다. 그의 관심 분야는 자연어 처리, 알고리즘 설계 및 최적화, 비지도 학습, 신경망, 기계 학습에 대한 자동화된 접근 방식입니다. Matthew는 컴퓨터 공학 석사 학위와 데이터 마이닝 대학원 학위를 보유하고 있습니다. kdnuggets[dot]com의 editor1에게 연락할 수 있습니다.
- SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
- 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
- 출처: https://www.kdnuggets.com/2023/03/chatgpt-webpage-construction.html?utm_source=rss&utm_medium=rss&utm_campaign=using-chatgpt-for-webpage-construction
