강의에 있는 챗지피티 코드와 제가 받은 코드가 달라서 강의를 보며 진행할…

커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
웹개발이 처음이어도 쉽게 배우는 GPT 웹개발
챕터 3
박*준
・
추천
・
조회수
답변 완료
강의에 있는 챗지피티 코드와 제가 받은 코드가 달라서 강의를 보며 진행할수가 없습니다.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        :root {
            --bg: #0f172a;
            --card: #111827;
            --text: #e5e7eb;
            --muted: #94a3b8;
            --size: 86px;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            display: grid;
            place-items: center;
            background: var(--bg);
            color: var(--text);
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        }

        .card {
            width: min(720px, 92vw);
            background: var(--card);
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 12px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
        }

        h1 {
            margin: 0 0 6px;
            font-size: 20px;
        }

        p {
            margin: 0 0 18px;
            color: var(--muted);
            font-size: 14px;
        }

        .balls {
            display: grid;
            grid-template-columns: repeat(6, var(--size));
            gap: 14px;
            justify-content: center;
            overflow: auto;
            padding-bottom: 6px;
        }

        .ball {
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-weight: 800;
            font-size: 28px;
            color: #0b1020;
            position: relative;
            user-select: none;
            background: radial-gradient(circle at 30% 30%, #ffffff, #d1d5db 58%, #9ca3af);
            box-shadow:
                inset 8px 8px 18px rgba(0, 0, 0, .15),
                inset -6px -6px 14px rgba(255, 255, 255, .28),
                0 10px 18px rgba(0, 0, 0, .35);
        }

        .ball::after {
            /* 광택 */
            content: "";
            position: absolute;
            top: 10%;
            left: 18%;
            width: 40%;
            height: 24%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%);
            transform: rotate(-20deg);
        }

        /* 색상 라벨(원하면 사용) */
        .y {
            background: radial-gradient(circle at 30% 30%, #fff7cc, #facc15 58%, #b45309);
        }

        .b {
            background: radial-gradient(circle at 30% 30%, #dbeafe, #60a5fa 58%, #1d4ed8);
            color: #0a1930;
        }

        .r {
            background: radial-gradient(circle at 30% 30%, #fee2e2, #f87171 58%, #b91c1c);
        }

        .g {
            background: radial-gradient(circle at 30% 30%, #dcfce7, #4ade80 58%, #15803d);
        }

        .o {
            background: radial-gradient(circle at 30% 30%, #ffedd5, #fb923c 58%, #c2410c);
        }

        .p {
            background: radial-gradient(circle at 30% 30%, #f5d0fe, #d946ef 58%, #86198f);
        }

        footer {
            margin-top: 14px;
            text-align: center;
            color: var(--muted);
            font-size: 12px;
        }

        @media (max-width:520px) {
            :root {
                --size: 64px;
            }
        }
    </style>
</head>

<body>
    <h1>안녕, {{ data.name }}</h1>
    <h2>로또번호: {{ data.lotto }}</h2>
    <h2>랜덤 로또 번호: {{ data.random_lotto }}</h2>

    <main class="card">
        <h1>로또 번호</h1>

        <!-- 숫자는 직접 수정 -->
        <section class="balls" aria-label="당첨 번호">
            <div class="ball y">07</div>
            <div class="ball b">12</div>
            <div class="ball r">19</div>
            <div class="ball g">23</div>
            <div class="ball o">34</div>
            <div class="ball p">41</div>
        </section>

    </main>

    <!-- 당첨 갯수에 따라 메세지 표시-->
    {% if data.common_count == 6 %}
    <h2>{{data.common_count}} 개 맞았습니다. 1등입니다!!</h2>
    {% elif data.common_count == 5 %}
    <h2>{{data.common_count}} 개 맞았습니다. 2등입니다!!</h2>
    {% elif data.common_count == 4 %}
    <h2>{{data.common_count}} 개 맞았습니다. 3등입니다!!</h2>
    {% elif data.common_count == 3 %}
    <h2>{{data.common_count}} 개 맞았습니다. 4등입니다!!</h2>
    {% else %}
    <h2>{{data.common_count}} 개 맞았습니다. 탈락입니다..</h2>
    {% endif %}


</body>

</html>
댓글 알림