이 프롬프트를 개발자 콘솔에 복사하여 직접 시도해 보세요!

내용
System주어진 사양에 따라 HTML 파일로 제공되는 원페이지 웹사이트를 만드는 것이 당신의 임무입니다. 웹사이트에는 드롭다운 메뉴, 동적 텍스트와 콘텐츠, 클릭 가능한 버튼 등 다양하고 매력적이며 상호작용하는 디자인 요소가 포함되어야 합니다. 디자인이 시각적으로 매력적이고 반응형이며 사용자 친화적인지 확인하세요. HTML, CSS, JavaScript 코드는 가독성과 유지보수성을 위해 잘 구조화되고 효율적으로 구성되며 적절하게 주석 처리되어야 합니다.
User“EduQuest”라는 온라인 학습 플랫폼을 위한 원페이지 웹사이트를 다음과 같은 기능과 섹션으로 만드세요:

1. 수학, 과학, 언어, 예술 등의 과목 카테고리 링크와 검색창이 있는 고정 내비게이션 바.
2. 온라인으로 학습하는 학생들을 보여주는 비디오 배경, “자신의 속도에 맞춰 학습하세요”, “새로운 열정을 발견하세요”, “당신의 지평을 넓히세요” 등의 문구가 3초마다 바뀌는 동적 태그라인, 강좌 목록으로 연결되는 “시작하기” 버튼이 있는 히어로 섹션.
3. 강좌 이미지, 제목, 강사, 설명 등의 플레이스홀더가 있는 강좌 카드를 표시하는 추천 강좌 섹션.
4. 학습 스타일과 관심사를 파악하기 위한 간단한 퀴즈와 퀴즈 시작 버튼이 있는 대화형 “학습 경로” 섹션.
5. 만족한 학생들의 후기 텍스트와 학생 이름 플레이스홀더가 포함된 “성공 사례” 섹션.
6. 플랫폼 블로그, FAQ, 개인정보 보호정책 링크와 문의 양식 및 고객 지원 정보가 포함된 모달 창을 여는 “문의하기” 버튼이 있는 푸터.

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

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

​
예시 출력

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduQuest - 온라인 학습 플랫폼</title>
    <style>
        /* CSS 스타일 */
        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="#">수학</a></li>
                <li><a href="#">과학</a></li>
                <li><a href="#">언어</a></li>
                <li><a href="#">예술</a></li>
                <li><input type="text" placeholder="검색"></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <video src="placeholder-video.mp4" autoplay loop muted></video>
        <h1>EduQuest에 오신 것을 환영합니다</h1>
        <p id="tagline">자신의 속도에 맞춰 학습하세요</p>
        <button>시작하기</button>
    </section>

    <section class="featured-courses">
        <h2>추천 강좌</h2>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="강좌 이미지">
            <h3>강좌 제목</h3>
            <p>강사: John Doe</p>
            <p>강좌 설명이 여기에 들어갑니다.</p>
        </div>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="강좌 이미지">
            <h3>강좌 제목</h3>
            <p>강사: Jane Smith</p>
            <p>강좌 설명이 여기에 들어갑니다.</p>
        </div>
    </section>

    <section class="success-stories">
        <h2>성공 사례</h2>
        <div class="testimonial">
            <p>"EduQuest 덕분에 새로운 기술을 배우고 경력을 쌓을 수 있었습니다. 강력 추천합니다!"</p>
            <p>- John Doe</p>
        </div>
        <div class="testimonial">
            <p>"온라인으로 새 언어를 배울 수 있을 거라고는 생각도 못 했는데 EduQuest 덕분에 가능해졌어요. 감사합니다!"</p>
            <p>- Jane Smith</p>
        </div>
    </section>

    <footer>
        <a href="#">블로그</a>
        <a href="#">FAQ</a>
        <a href="#">개인정보 보호정책</a>
        <button>문의하기</button>
    </footer>

    <script>
        // JavaScript 코드
        const taglines = [
            "자신의 속도에 맞춰 학습하세요",
            "새로운 열정을 발견하세요",
            "당신의 지평을 넓히세요"
        ];

        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초마다 바뀌는 동적 태그라인, “시작하기” 버튼이 있는 히어로 섹션.

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

만족한 학생들의 후기 텍스트와 학생 이름 플레이스홀더가 포함된 “성공 사례” 섹션.

플랫폼 블로그, FAQ, 개인정보 보호정책 링크와 “문의하기” 버튼이 있는 푸터.

CSS 스타일은 <head> 섹션의 <style> 태그 안에 포함되어 있고, JavaScript 코드는 <body> 섹션 끝의 <script> 태그 안에 배치되어 있습니다.

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

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

​
API 요청

참고: Claude 3 Opus는 곧 Bedrock API에서 사용할 수 있습니다.

import anthropic

client = anthropic.Anthropic( # defaults to os.environ.get("ANTHROPIC_API_KEY")
api_key="my_api_key",
)
message = client.messages.create(
  model="claude-3-opus-20240229",
  max_tokens=4000,
  temperature=0,
  system="주어진 사양에 따라 HTML 파일로 제공되는 원페이지 웹사이트를 만드는 것이 당신의 임무입니다. 웹사이트에는 드롭다운 메뉴, 동적 텍스트와 콘텐츠, 클릭 가능한 버튼 등 다양하고 매력적이며 상호작용하는 디자인 요소가 포함되어야 합니다. 디자인이 시각적으로 매력적이고 반응형이며 사용자 친화적인지 확인하세요. HTML, CSS, JavaScript 코드는 가독성과 유지보수성을 위해 잘 구조화되고 효율적으로 구성되며 적절하게 주석 처리되어야 합니다.",
  messages=[
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "\"EduQuest\"라는 온라인 학습 플랫폼을 위한 원페이지 웹사이트를 다음과 같은 기능과 섹션으로 만드세요: \n \n1. 수학, 과학, 언어, 예술 등의 과목 카테고리 링크와 검색창이 있는 고정 내비게이션 바. \n \n2. 온라인으로 학습하는 학생들을 보여주는 비디오 배경, \"자신의 속도에 맞춰 학습하세요\", \"새로운 열정을 발견하세요\", \"당신의 지평을 넓히세요\" 등의 문구가 3초마다 바뀌는 동적 태그라인, 강좌 목록으로 연결되는 \"시작하기\" 버튼이 있는 히어로 섹션. \n \n3. 강좌 이미지, 제목, 강사, 설명 등의 플레이스홀더가 있는 강좌 카드를 표시하는 추천 강좌 섹션. \n \n4. 학습 스타일과 관심사를 파악하기 위한 간단한 퀴즈와 퀴즈 시작 버튼이 있는 대화형 \"학습 경로\" 섹션. \n \n5. 만족한 학생들의 후기 텍스트와 학생 이름 플레이스홀더가 포함된 \"성공 사례\" 섹션. \n \n6. 플랫폼 블로그, FAQ, 개인정보 보호정책 링크와 문의 양식 및 고객 지원 정보가 포함된 모달 창을 여는 \"문의하기\" 버튼이 있는 푸터. \n \n비디오 배경, 강좌 카드, 후기에 대한 임시 플레이스홀더 콘텐츠를 포함하세요. CSS 스타일은 `<head>` 섹션의 `<style>` 태그 안에 포함시키고 JavaScript 코드는 `<body>` 섹션 끝의 `<script>` 태그 안에 배치하세요. \n \nJavaScript 코드는 히어로 섹션의 동적 태그라인을 처리하여 3초마다 다른 태그라인으로 순환해야 합니다."
        }
      ]
    }
  ]
)
print(message.content)
기업 예지력Excel 수식 전문가