웹사이트 마법사

	내용
System	주어진 사양에 기반하여 임베디드 JavaScript와 CSS가 포함된 HTML 파일로 제공되는 원페이지 웹사이트를 만드는 것이 당신의 과제입니다. 웹사이트는 드롭다운 메뉴, 동적 텍스트 및 콘텐츠, 클릭 가능한 버튼 등 다양한 매력적이고 인터랙티브한 디자인 기능을 포함해야 합니다. 디자인이 시각적으로 매력적이고, 반응형이며, 사용자 친화적인지 확인하세요. HTML, CSS, JavaScript 코드는 가독성과 유지보수성을 위해 잘 구조화되고, 효율적으로 구성되며, 적절히 주석 처리되어야 합니다.
User	다음 기능과 섹션을 갖춘 "EduQuest"라는 온라인 학습 플랫폼을 위한 원페이지 웹사이트를 만드세요: 1. 강좌 카테고리(수학, 과학, 언어, 예술) 링크와 검색 바가 있는 고정 내비게이션 바. 2. 학생들이 온라인으로 학습하는 모습을 보여주는 비디오 배경이 있는 히어로 섹션, 3초마다 "Learn at your own pace," "Discover new passions," "Expand your horizons" 사이를 순환하는 동적 태그라인, 그리고 강좌 카탈로그로 이동하는 "Get Started" 버튼. 3. 강좌 이미지, 제목, 강사, 설명을 위한 플레이스홀더가 있는 강좌 카드를 표시하는 추천 강좌 섹션. 4. 학습 스타일과 관심사를 파악하기 위한 짧은 퀴즈와 퀴즈를 시작하는 버튼이 있는 인터랙티브 "Learning Paths" 섹션. 5. 후기 텍스트와 학생 이름을 위한 플레이스홀더가 있는 만족한 학생들의 후기를 특징으로 하는 "Success Stories" 섹션. 6. 플랫폼의 블로그, FAQ, 개인정보 보호정책 링크와 연락처 양식 및 고객 지원 정보가 포함된 모달 창을 여는 "Contact Us" 버튼이 있는 푸터. 비디오 배경, 강좌 카드, 후기에 대한 필러 플레이스홀더 콘텐츠를 포함하세요. CSS 스타일은 `<head>` 섹션의 `<style>` 태그 내에 임베드하고 JavaScript 코드는 `<body>` 섹션 끝의 `<script>` 태그 내에 배치하세요. JavaScript 코드는 히어로 섹션의 동적 태그라인을 처리하여 3초마다 다른 태그라인을 순환해야 합니다.

내용

System

주어진 사양에 기반하여 임베디드 JavaScript와 CSS가 포함된 HTML 파일로 제공되는 원페이지 웹사이트를 만드는 것이 당신의 과제입니다. 웹사이트는 드롭다운 메뉴, 동적 텍스트 및 콘텐츠, 클릭 가능한 버튼 등 다양한 매력적이고 인터랙티브한 디자인 기능을 포함해야 합니다. 디자인이 시각적으로 매력적이고, 반응형이며, 사용자 친화적인지 확인하세요. HTML, CSS, JavaScript 코드는 가독성과 유지보수성을 위해 잘 구조화되고, 효율적으로 구성되며, 적절히 주석 처리되어야 합니다.

User

다음 기능과 섹션을 갖춘 "EduQuest"라는 온라인 학습 플랫폼을 위한 원페이지 웹사이트를 만드세요:

1. 강좌 카테고리(수학, 과학, 언어, 예술) 링크와 검색 바가 있는 고정 내비게이션 바.
2. 학생들이 온라인으로 학습하는 모습을 보여주는 비디오 배경이 있는 히어로 섹션, 3초마다 "Learn at your own pace," "Discover new passions," "Expand your horizons" 사이를 순환하는 동적 태그라인, 그리고 강좌 카탈로그로 이동하는 "Get Started" 버튼.
3. 강좌 이미지, 제목, 강사, 설명을 위한 플레이스홀더가 있는 강좌 카드를 표시하는 추천 강좌 섹션.
4. 학습 스타일과 관심사를 파악하기 위한 짧은 퀴즈와 퀴즈를 시작하는 버튼이 있는 인터랙티브 "Learning Paths" 섹션.
5. 후기 텍스트와 학생 이름을 위한 플레이스홀더가 있는 만족한 학생들의 후기를 특징으로 하는 "Success Stories" 섹션.
6. 플랫폼의 블로그, FAQ, 개인정보 보호정책 링크와 연락처 양식 및 고객 지원 정보가 포함된 모달 창을 여는 "Contact Us" 버튼이 있는 푸터.

비디오 배경, 강좌 카드, 후기에 대한 필러 플레이스홀더 콘텐츠를 포함하세요. CSS 스타일은 <head> 섹션의 <style> 태그 내에 임베드하고 JavaScript 코드는 <body> 섹션 끝의 <script> 태그 내에 배치하세요.

JavaScript 코드는 히어로 섹션의 동적 태그라인을 처리하여 3초마다 다른 태그라인을 순환해야 합니다.

예시 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduQuest - Online Learning Platform</title>
    <style>
        /* CSS Styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
        }

        nav ul li a {
            color: #fff;
            text-decoration: none;
            padding: 10px;
        }

        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 24px;
            margin-bottom: 40px;
        }

        .hero button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #333;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .featured-courses, .success-stories {
            padding: 40px;
        }

        .course-card {
            background-color: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
        }

        .testimonial {
            background-color: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
        }

        footer {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        footer a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
        }

        footer button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #fff;
            color: #333;
            border: none;
            cursor: pointer;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Math</a></li>
                <li><a href="#">Science</a></li>
                <li><a href="#">Languages</a></li>
                <li><a href="#">Arts</a></li>
                <li><input type="text" placeholder="Search"></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <video src="placeholder-video.mp4" autoplay loop muted></video>
        <h1>Welcome to EduQuest</h1>
        <p id="tagline">Learn at your own pace</p>
        <button>Get Started</button>
    </section>

    <section class="featured-courses">
        <h2>Featured Courses</h2>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Course Image">
            <h3>Course Title</h3>
            <p>Instructor: John Doe</p>
            <p>Course description goes here.</p>
        </div>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Course Image">
            <h3>Course Title</h3>
            <p>Instructor: Jane Smith</p>
            <p>Course description goes here.</p>
        </div>
    </section>

    <section class="success-stories">
        <h2>Success Stories</h2>
        <div class="testimonial">
            <p>"EduQuest helped me learn a new skill and advance my career. Highly recommended!"</p>
            <p>- John Doe</p>
        </div>
        <div class="testimonial">
            <p>"I never thought I could learn a new language online, but EduQuest made it possible. Thank you!"</p>
            <p>- Jane Smith</p>
        </div>
    </section>

    <footer>
        <a href="#">Blog</a>
        <a href="#">FAQ</a>
        <a href="#">Privacy Policy</a>
        <button>Contact Us</button>
    </footer>

    <script>
        // JavaScript Code
        const taglines = [
            "Learn at your own pace",
            "Discover new passions",
            "Expand your horizons"
        ];

        let index = 0;
        const taglineElement = document.getElementById("tagline");

        function rotateTagline() {
            taglineElement.textContent = taglines[index];
            index = (index + 1) % taglines.length;
        }

        setInterval(rotateTagline, 3000);
    </script>
</body>
</html>

이 코드는 다음 기능과 섹션을 갖춘 "EduQuest" 원페이지 웹사이트를 생성합니다:

강좌 카테고리(수학, 과학, 언어, 예술) 링크와 검색 바가 있는 고정 내비게이션 바.

플레이스홀더 비디오 배경이 있는 히어로 섹션, 3초마다 "Learn at your own pace," "Discover new passions," "Expand your horizons" 사이를 순환하는 동적 태그라인, 그리고 "Get Started" 버튼.

강좌 이미지, 제목, 강사, 설명을 위한 플레이스홀더가 있는 강좌 카드를 표시하는 추천 강좌 섹션.

후기 텍스트와 학생 이름을 위한 플레이스홀더가 있는 만족한 학생들의 후기를 특징으로 하는 "Success Stories" 섹션.

플랫폼의 블로그, FAQ, 개인정보 보호정책 링크와 "Contact Us" 버튼이 있는 푸터.

CSS 스타일은 <head> 섹션의 <style> 태그 내에 임베드되어 있으며, JavaScript 코드는 <body> 섹션 끝의 <script> 태그 내에 배치되어 있습니다.

JavaScript 코드는 히어로 섹션의 동적 태그라인을 처리하며, setInterval 함수를 사용하여 3초마다 다른 태그라인을 순환합니다.

비디오 배경, 강좌 이미지, 후기는 플레이스홀더이며 실제 콘텐츠로 교체해야 합니다.

	내용
System	주어진 사양에 기반하여 임베디드 JavaScript와 CSS가 포함된 HTML 파일로 제공되는 원페이지 웹사이트를 만드는 것이 당신의 과제입니다. 웹사이트는 드롭다운 메뉴, 동적 텍스트 및 콘텐츠, 클릭 가능한 버튼 등 다양한 매력적이고 인터랙티브한 디자인 기능을 포함해야 합니다. 디자인이 시각적으로 매력적이고, 반응형이며, 사용자 친화적인지 확인하세요. HTML, CSS, JavaScript 코드는 가독성과 유지보수성을 위해 잘 구조화되고, 효율적으로 구성되며, 적절히 주석 처리되어야 합니다.
User	다음 기능과 섹션을 갖춘 "EduQuest"라는 온라인 학습 플랫폼을 위한 원페이지 웹사이트를 만드세요: 1. 강좌 카테고리(수학, 과학, 언어, 예술) 링크와 검색 바가 있는 고정 내비게이션 바. 2. 학생들이 온라인으로 학습하는 모습을 보여주는 비디오 배경이 있는 히어로 섹션, 3초마다 "Learn at your own pace," "Discover new passions," "Expand your horizons" 사이를 순환하는 동적 태그라인, 그리고 강좌 카탈로그로 이동하는 "Get Started" 버튼. 3. 강좌 이미지, 제목, 강사, 설명을 위한 플레이스홀더가 있는 강좌 카드를 표시하는 추천 강좌 섹션. 4. 학습 스타일과 관심사를 파악하기 위한 짧은 퀴즈와 퀴즈를 시작하는 버튼이 있는 인터랙티브 "Learning Paths" 섹션. 5. 후기 텍스트와 학생 이름을 위한 플레이스홀더가 있는 만족한 학생들의 후기를 특징으로 하는 "Success Stories" 섹션. 6. 플랫폼의 블로그, FAQ, 개인정보 보호정책 링크와 연락처 양식 및 고객 지원 정보가 포함된 모달 창을 여는 "Contact Us" 버튼이 있는 푸터. 비디오 배경, 강좌 카드, 후기에 대한 필러 플레이스홀더 콘텐츠를 포함하세요. CSS 스타일은 `<head>` 섹션의 `<style>` 태그 내에 임베드하고 JavaScript 코드는 `<body>` 섹션 끝의 `<script>` 태그 내에 배치하세요. JavaScript 코드는 히어로 섹션의 동적 태그라인을 처리하여 3초마다 다른 태그라인을 순환해야 합니다.

내용

System

User

예시 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduQuest - Online Learning Platform</title>
    <style>
        /* CSS Styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
        }

        nav ul li a {
            color: #fff;
            text-decoration: none;
            padding: 10px;
        }

        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 24px;
            margin-bottom: 40px;
        }

        .hero button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #333;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .featured-courses, .success-stories {
            padding: 40px;
        }

        .course-card {
            background-color: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
        }

        .testimonial {
            background-color: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
        }

        footer {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        footer a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
        }

        footer button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #fff;
            color: #333;
            border: none;
            cursor: pointer;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Math</a></li>
                <li><a href="#">Science</a></li>
                <li><a href="#">Languages</a></li>
                <li><a href="#">Arts</a></li>
                <li><input type="text" placeholder="Search"></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <video src="placeholder-video.mp4" autoplay loop muted></video>
        <h1>Welcome to EduQuest</h1>
        <p id="tagline">Learn at your own pace</p>
        <button>Get Started</button>
    </section>

    <section class="featured-courses">
        <h2>Featured Courses</h2>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Course Image">
            <h3>Course Title</h3>
            <p>Instructor: John Doe</p>
            <p>Course description goes here.</p>
        </div>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Course Image">
            <h3>Course Title</h3>
            <p>Instructor: Jane Smith</p>
            <p>Course description goes here.</p>
        </div>
    </section>

    <section class="success-stories">
        <h2>Success Stories</h2>
        <div class="testimonial">
            <p>"EduQuest helped me learn a new skill and advance my career. Highly recommended!"</p>
            <p>- John Doe</p>
        </div>
        <div class="testimonial">
            <p>"I never thought I could learn a new language online, but EduQuest made it possible. Thank you!"</p>
            <p>- Jane Smith</p>
        </div>
    </section>

    <footer>
        <a href="#">Blog</a>
        <a href="#">FAQ</a>
        <a href="#">Privacy Policy</a>
        <button>Contact Us</button>
    </footer>

    <script>
        // JavaScript Code
        const taglines = [
            "Learn at your own pace",
            "Discover new passions",
            "Expand your horizons"
        ];

        let index = 0;
        const taglineElement = document.getElementById("tagline");

        function rotateTagline() {
            taglineElement.textContent = taglines[index];
            index = (index + 1) % taglines.length;
        }

        setInterval(rotateTagline, 3000);
    </script>
</body>
</html>

이 코드는 다음 기능과 섹션을 갖춘 "EduQuest" 원페이지 웹사이트를 생성합니다:

강좌 카테고리(수학, 과학, 언어, 예술) 링크와 검색 바가 있는 고정 내비게이션 바.

강좌 이미지, 제목, 강사, 설명을 위한 플레이스홀더가 있는 강좌 카드를 표시하는 추천 강좌 섹션.

후기 텍스트와 학생 이름을 위한 플레이스홀더가 있는 만족한 학생들의 후기를 특징으로 하는 "Success Stories" 섹션.

플랫폼의 블로그, FAQ, 개인정보 보호정책 링크와 "Contact Us" 버튼이 있는 푸터.

CSS 스타일은 <head> 섹션의 <style> 태그 내에 임베드되어 있으며, JavaScript 코드는 <body> 섹션 끝의 <script> 태그 내에 배치되어 있습니다.

JavaScript 코드는 히어로 섹션의 동적 태그라인을 처리하며, setInterval 함수를 사용하여 3초마다 다른 태그라인을 순환합니다.

비디오 배경, 강좌 이미지, 후기는 플레이스홀더이며 실제 콘텐츠로 교체해야 합니다.

웹사이트 마법사

예시 출력

API 요청

웹사이트 마법사

예시 출력

API 요청