프롬프트 라이브러리
웹사이트 마법사
사용자 요구사항에 따라 단일 페이지 웹사이트를 생성합니다.
직접 시도해보려면 이 프롬프트를 개발자 Console에 복사하세요!
Content | |
---|---|
System | 주어진 요구사항에 따라 단일 페이지 웹사이트를 생성하는 것이 당신의 임무입니다. HTML 파일에 JavaScript와 CSS가 포함된 형태로 제공되어야 합니다. 웹사이트는 드롭다운 메뉴, 동적 텍스트와 콘텐츠, 클릭 가능한 버튼 등 다양한 매력적이고 상호작용적인 디자인 기능을 포함해야 합니다. 디자인이 시각적으로 매력적이고, 반응형이며, 사용자 친화적인지 확인하세요. HTML, CSS, JavaScript 코드는 가독성과 유지보수성을 위해 잘 구조화되고, 효율적으로 구성되며, 적절한 주석이 포함되어야 합니다. |
User | ”EduQuest”라는 온라인 학습 플랫폼을 위한 단일 페이지 웹사이트를 다음 기능과 섹션으로 만드세요: 1. 고정된 내비게이션 바에 강좌 카테고리(수학, 과학, 언어, 예술) 링크와 검색창이 있어야 합니다. 2. 히어로 섹션에는 온라인으로 학습하는 학생들을 보여주는 비디오 배경이 있어야 하고, “자신의 속도로 학습하세요”, “새로운 열정을 발견하세요”, “시야를 넓혀보세요”라는 문구가 3초마다 번갈아 나타나는 동적 태그라인과 강좌 카탈로그로 연결되는 “시작하기” 버튼이 있어야 합니다. 3. 추천 강좌 섹션에는 강좌 이미지, 제목, 강사, 설명을 위한 플레이스홀더가 있는 강좌 카드가 표시되어야 합니다. 4. 학습 스타일과 관심사를 파악하기 위한 짧은 퀴즈가 있는 “학습 경로” 섹션과 퀴즈를 시작하는 버튼이 있어야 합니다. 5. 만족한 학생들의 후기가 담긴 “성공 사례” 섹션에는 후기 텍스트와 학생 이름을 위한 플레이스홀더가 있어야 합니다. 6. 푸터에는 플랫폼의 블로그, FAQ, 개인정보 보호정책 링크와 연락처 양식과 고객 지원 정보가 있는 모달 창을 여는 “문의하기” 버튼이 있어야 합니다. 비디오 배경, 강좌 카드, 후기를 위한 임시 플레이스홀더 콘텐츠를 포함하세요. CSS 스타일은 <head> 섹션의 <style> 태그 안에 포함시키고 JavaScript 코드는 <body> 섹션 끝에 있는 <script> 태그 안에 배치하세요.JavaScript 코드는 히어로 섹션의 동적 태그라인을 처리하여 3초마다 다른 태그라인으로 전환되도록 해야 합니다. |
예시 출력
이 코드는 “EduQuest”를 위한 단일 페이지 웹사이트를 다음과 같은 기능과 섹션으로 만듭니다:
강좌 카테고리(수학, 과학, 언어, 예술) 링크와 검색창이 있는 고정된 내비게이션 바.
플레이스홀더 비디오 배경이 있는 히어로 섹션, “자신의 속도로 학습하세요”, “새로운 열정을 발견하세요”, “시야를 넓혀보세요”라는 문구가 3초마다 번갈아 나타나는 동적 태그라인과 “시작하기” 버튼.
강좌 이미지, 제목, 강사, 설명을 위한 플레이스홀더가 있는 강좌 카드를 표시하는 추천 강좌 섹션.
만족한 학생들의 후기가 담긴 “성공 사례” 섹션에는 후기 텍스트와 학생 이름을 위한 플레이스홀더가 있습니다.
플랫폼의 블로그, FAQ, 개인정보 보호정책 링크와 “문의하기” 버튼이 있는 푸터.
CSS 스타일은
<head>
섹션의<style>
태그 안에 포함되어 있고 JavaScript 코드는<body>
섹션 끝에 있는<script>
태그 안에 배치되어 있습니다.JavaScript 코드는 setInterval 함수를 사용하여 히어로 섹션의 동적 태그라인을 처리하여 3초마다 다른 태그라인으로 전환됩니다.
비디오 배경, 강좌 이미지, 후기는 플레이스홀더이며 실제 콘텐츠로 교체되어야 합니다.
API 요청
Was this page helpful?