소개
전화영어를 하는데 공부한 것을 복습하는 것이 어려움이 있어서 간단한 퀴즈와 함께 정리를 해 달라고 시켜볼까? 라는 생각을 하게 되었습니다.
오늘은 스터디도 많고 피곤해서 그냥 잘까 했으나 만들어 봅니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
간단하게 claude에게 해달라고 했습니다.
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
오늘 학습한 영어 공부를 정리해서 웹으로 만들어줘. html 단일 파일로 만들어 주면 좋겠어. 간단한21기 퀴21기즈도 추가해 주면 좋겠네.
앞에 이것저것 질문을 했었는데 수정된 것이 정리되면 좋겠고, 퀴즈도 있으면 좋겠다고 생각했습니다.
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
오늘의 영어 공부
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>오늘의 전화영어 복습</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&family=Playfair+Display:wght@700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0f0f14;
--card: #16161f;
--card2: #1c1c28;
--accent: #f0c14b;
--accent2: #e07b3f;
--text: #e8e8f0;
--muted: #888899;
--correct: #4caf8a;
--wrong: #e05c5c;
--border: #2a2a3a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Noto Sans KR', sans-serif;
min-height: 100vh;
padding: 2rem 1rem 4rem;
}
.grain {
position: fixed; inset: 0; pointer-events: none; z-index: 100;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
opacity: 0.4;
}
.container { max-width: 780px; margin: 0 auto; }
header {
text-align: center;
margin-bottom: 3rem;
animation: fadeDown 0.7s ease both;
}
.date-badge {
display: inline-block;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.15em;
color: var(--accent);
background: rgba(240,193,75,0.1);
border: 1px solid rgba(240,193,75,0.3);
padding: 0.3rem 1rem;
border-radius: 999px;
margin-bottom: 1rem;
}
h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 5vw, 3rem);
color: var(--text);
line-height: 1.2;
}
h1 span { color: var(--accent); }
.subtitle {
color: var(--muted);
margin-top: 0.5rem;
font-size: 0.9rem;
letter-spacing: 0.05em;
}
/* ── Section ── */
.section {
margin-bottom: 2rem;
animation: fadeUp 0.6s ease both;
}
.section:nth-child(2) { animation-delay: 0.1s; }
.section:nth-child(3) { animation-delay: 0.2s; }
.section:nth-child(4) { animation-delay: 0.3s; }
.section:nth-child(5) { animation-delay: 0.4s; }
.section-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.section-num {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
color: var(--accent2);
background: rgba(224,123,63,0.12);
border: 1px solid rgba(224,123,63,0.3);
padding: 0.2rem 0.5rem;
border-radius: 4px;
letter-spacing: 0.1em;
}
.section-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.4rem 1.6rem;
margin-bottom: 0.75rem;
}
.vocab-row {
display: flex;
align-items: baseline;
gap: 1rem;
padding: 0.6rem 0;
border-bottom: 1px solid var(--border);
}
.vocab-row:last-child { border-bottom: none; }
.en {
font-family: 'JetBrains Mono', monospace;
color: var(--accent);
font-weight: 600;
font-size: 1rem;
min-width: 220px;
}
.ko {
color: var(--muted);
font-size: 0.88rem;
}
.star { color: var(--accent); margin-left: 0.4rem; font-size: 0.75rem; }
/* grammar correction */
.correction-box {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.correction-row {
display: grid;
grid-template-columns: auto 1fr 1fr;
gap: 1rem;
padding: 0.85rem 1.4rem;
align-items: start;
border-bottom: 1px solid var(--border);
}
.correction-row:last-child { border-bottom: none; }
.label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.08em;
padding: 0.2rem 0.5rem;
border-radius: 4px;
white-space: nowrap;
margin-top: 2px;
}
.label.wrong-label { background: rgba(224,92,92,0.15); color: var(--wrong); border: 1px solid rgba(224,92,92,0.3); }
.label.right-label { background: rgba(76,175,138,0.15); color: var(--correct); border: 1px solid rgba(76,175,138,0.3); }
.c-text { font-size: 0.92rem; line-height: 1.5; }
.c-text.strikethrough { text-decoration: line-through; color: var(--muted); }
.c-text.corrected { color: var(--correct); font-weight: 600; }
.reason { font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; }
/* table */
.vocab-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
.vocab-table th {
background: rgba(240,193,75,0.08);
color: var(--accent);
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.1em;
padding: 0.6rem 1rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
.vocab-table td {
padding: 0.7rem 1rem;
border-bottom: 1px solid rgba(42,42,58,0.6);
vertical-align: top;
}
.vocab-table tr:last-child td { border-bottom: none; }
.vocab-table .en-cell {
font-family: 'JetBrains Mono', monospace;
color: var(--accent);
font-weight: 600;
}
/* ── QUIZ ── */
.quiz-section {
margin-top: 3rem;
animation: fadeUp 0.6s 0.5s ease both;
}
.quiz-header {
text-align: center;
margin-bottom: 2rem;
}
.quiz-header h2 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: var(--text);
}
.quiz-header h2 span { color: var(--accent2); }
.quiz-header p { color: var(--muted); font-size: 0.85rem; margin-top: 0.4rem; }
.quiz-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.8rem;
margin-bottom: 1.2rem;
transition: border-color 0.3s;
}
.quiz-card.answered-correct { border-color: var(--correct); }
.quiz-card.answered-wrong { border-color: var(--wrong); }
.q-num {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
color: var(--muted);
letter-spacing: 0.1em;
margin-bottom: 0.6rem;
}
.q-text {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.2rem;
color: var(--text);
}
.q-text strong { color: var(--accent); }
.options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
}
@media (max-width: 480px) { .options { grid-template-columns: 1fr; } }
.option-btn {
background: var(--card2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem 1rem;
color: var(--text);
font-family: 'Noto Sans KR', sans-serif;
font-size: 0.88rem;
cursor: pointer;
text-align: left;
transition: all 0.2s;
line-height: 1.4;
}
.option-btn:hover:not(:disabled) {
border-color: var(--accent);
color: var(--accent);
background: rgba(240,193,75,0.06);
}
.option-btn.correct { background: rgba(76,175,138,0.15); border-color: var(--correct); color: var(--correct); }
.option-btn.wrong { background: rgba(224,92,92,0.15); border-color: var(--wrong); color: var(--wrong); }
.option-btn:disabled { cursor: default; }
.feedback {
margin-top: 1rem;
padding: 0.8rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
line-height: 1.5;
display: none;
}
.feedback.show { display: block; }
.feedback.fb-correct { background: rgba(76,175,138,0.1); color: var(--correct); border: 1px solid rgba(76,175,138,0.3); }
.feedback.fb-wrong { background: rgba(224,92,92,0.1); color: #e88; border: 1px solid rgba(224,92,92,0.3); }
/* Score */
#score-board {
display: none;
text-align: center;
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 2.5rem;
margin-top: 2rem;
animation: fadeUp 0.5s ease both;
}
.score-num {
font-family: 'Playfair Display', serif;
font-size: 4rem;
color: var(--accent);
line-height: 1;
}
.score-label { color: var(--muted); margin-top: 0.5rem; font-size: 0.9rem; }
.score-msg { margin-top: 1rem; font-size: 1rem; color: var(--text); }
.retry-btn {
margin-top: 1.5rem;
background: var(--accent);
color: #111;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 999px;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
transition: opacity 0.2s;
}
.retry-btn:hover { opacity: 0.85; }
/* progress */
.progress-bar-wrap {
background: var(--border);
border-radius: 999px;
height: 4px;
margin-bottom: 2rem;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--accent2), var(--accent));
border-radius: 999px;
transition: width 0.4s ease;
width: 0%;
}
@keyframes fadeDown { from { opacity:0; transform:translateY(-20px);} to {opacity:1;transform:translateY(0);} }
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to {opacity:1;transform:translateY(0);} }
hr.divider {
border: none;
border-top: 1px solid var(--border);
margin: 2.5rem 0;
}
</style>
</head>
<body>
<div class="grain"></div>
<div class="container">
<!-- Header -->
<header>
<div class="date-badge">📞 전화영어 복습 노트</div>
<h1>Today's <span>English</span> Study</h1>
<p class="subtitle">알러지 · 효소 테라피 · 배달 사고 스토리 · 핵심 표현 정리</p>
</header>
<!-- 1. 오늘의 스토리 -->
<div class="section">
<div class="section-header">
<span class="section-num">01</span>
<span class="section-title">오늘의 대화 스토리</span>
</div>
<div class="card">
<div class="vocab-row">
<span class="en">"I've been struggling with allergies lately."</span>
<span class="ko">요즘 알러지 때문에 힘들어요.</span>
</div>
<div class="vocab-row">
<span class="en">"Yesterday, my delivery box went missing."</span>
<span class="ko">어제 택배 박스가 사라졌어요.</span>
</div>
<div class="vocab-row">
<span class="en">"It must have been the postman's mistake."</span>
<span class="ko">우체부 실수였던 것 같아요.</span>
</div>
<div class="vocab-row">
<span class="en">"I was really looking forward to my new clothes."</span>
<span class="ko">새 옷을 정말 기대하고 있었는데요.</span>
</div>
</div>
</div>
<!-- 2. 문법 교정 -->
<div class="section">
<div class="section-header">
<span class="section-num">02</span>
<span class="section-title">내 문장 → 교정된 문장</span>
</div>
<div class="correction-box">
<div class="correction-row">
<span class="label wrong-label">틀림</span>
<div><div class="c-text strikethrough">I'm missing my direbery box.</div></div>
<div></div>
</div>
<div class="correction-row">
<span class="label right-label">교정</span>
<div><div class="c-text corrected">I lost my delivery box.</div><div class="reason">과거시제 + 스펠링 수정</div></div>
<div></div>
</div>
<div class="correction-row">
<span class="label wrong-label">틀림</span>
<div><div class="c-text strikethrough">becouse I look forward to new cloths</div></div>
<div></div>
</div>
<div class="correction-row">
<span class="label right-label">교정</span>
<div>
<div class="c-text corrected">because I was looking forward to my new clothes</div>
<div class="reason">because 스펠링 · 과거진행형 · clothes 스펠링 · my 추가</div>
</div>
<div></div>
</div>
</div>
</div>
<!-- 3. 핵심 표현 -->
<div class="section">
<div class="section-header">
<span class="section-num">03</span>
<span class="section-title">핵심 표현 비교</span>
</div>
<div class="card" style="padding:0; overflow:hidden;">
<table class="vocab-table">
<thead>
<tr>
<th>표현</th>
<th>뉘앙스</th>
<th>예문</th>
</tr>
</thead>
<tbody>
<tr>
<td class="en-cell">look forward to ⭐</td>
<td>설레는 기대 (긍정)</td>
<td style="font-size:0.82rem;">I'm looking forward to the weekend.</td>
</tr>
<tr>
<td class="en-cell">can't wait</td>
<td>매우 신나는 기대</td>
<td style="font-size:0.82rem;">I can't wait for the concert!</td>
</tr>
<tr>
<td class="en-cell">expect</td>
<td>예상 (중립적)</td>
<td style="font-size:0.82rem;">I expect it to be difficult.</td>
</tr>
<tr>
<td class="en-cell">anticipate</td>
<td>격식 / 예측</td>
<td style="font-size:0.82rem;">We anticipate great results.</td>
</tr>
<tr>
<td class="en-cell">struggling with</td>
<td>~때문에 힘들다</td>
<td style="font-size:0.82rem;">I've been struggling with allergies.</td>
</tr>
<tr>
<td class="en-cell">went missing</td>
<td>사라지다 / 분실되다</td>
<td style="font-size:0.82rem;">My package went missing.</td>
</tr>
<tr>
<td class="en-cell">must have been</td>
<td>~였던 것 같다 (과거추측)</td>
<td style="font-size:0.82rem;">It must have been a mistake.</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 4. 전문용어 -->
<div class="section">
<div class="section-header">
<span class="section-num">04</span>
<span class="section-title">오늘의 전문 표현</span>
</div>
<div class="card">
<div class="vocab-row">
<span class="en">Enzyme Therapy</span>
<span class="ko">효소 테라피</span>
</div>
<div class="vocab-row">
<span class="en">Enzyme Replacement Therapy (ERT)</span>
<span class="ko">효소 대체 요법</span>
</div>
<div class="vocab-row">
<span class="en">Mail carrier / Postman</span>
<span class="ko">우체부 (미국식 / 영국식)</span>
</div>
<div class="vocab-row">
<span class="en">Misdelivered</span>
<span class="ko">잘못 배달된</span>
</div>
</div>
</div>
<hr class="divider">
<!-- QUIZ -->
<div class="quiz-section">
<div class="quiz-header">
<h2>Mini <span>Quiz</span> 🎯</h2>
<p>오늘 배운 표현을 얼마나 기억하나요?</p>
</div>
<div class="progress-bar-wrap"><div class="progress-bar" id="progress"></div></div>
<!-- Q1 -->
<div class="quiz-card" id="qcard-0">
<div class="q-num">Q1 / 6</div>
<div class="q-text">"요즘 알러지 때문에 힘들어"를 가장 자연스럽게 영어로 표현하면?</div>
<div class="options">
<button class="option-btn" onclick="answer(0,0,1)">I'm missing about allergy lately.</button>
<button class="option-btn" onclick="answer(0,1,1)">I've been struggling with allergies lately. ⭐</button>
<button class="option-btn" onclick="answer(0,2,1)">I have allergy problem recently.</button>
<button class="option-btn" onclick="answer(0,3,1)">I'm struggle with allergy now.</button>
</div>
<div class="feedback" id="fb-0"></div>
</div>
<!-- Q2 -->
<div class="quiz-card" id="qcard-1">
<div class="q-num">Q2 / 6</div>
<div class="q-text">"I'm very upset <strong>becouse</strong> I look forward to new <strong>cloths</strong>."<br>이 문장에서 틀린 부분이 아닌 것은?</div>
<div class="options">
<button class="option-btn" onclick="answer(1,0,3)">becouse → because</button>
<button class="option-btn" onclick="answer(1,1,3)">look forward to → was looking forward to</button>
<button class="option-btn" onclick="answer(1,2,3)">cloths → clothes</button>
<button class="option-btn" onclick="answer(1,3,3)">I'm very upset ✓ (이 부분은 맞음)</button>
</div>
<div class="feedback" id="fb-1"></div>
</div>
<!-- Q3 -->
<div class="quiz-card" id="qcard-2">
<div class="q-num">Q3 / 6</div>
<div class="q-text">"설레고 긍정적인 기대"를 나타내는 가장 적합한 표현은?</div>
<div class="options">
<button class="option-btn" onclick="answer(2,0,0)">expect</button>
<button class="option-btn" onclick="answer(2,1,0)">look forward to ⭐</button>
<button class="option-btn" onclick="answer(2,2,0)">anticipate</button>
<button class="option-btn" onclick="answer(2,3,0)">suppose</button>
</div>
<div class="feedback" id="fb-2"></div>
</div>
<!-- Q4 -->
<div class="quiz-card" id="qcard-3">
<div class="q-num">Q4 / 6</div>
<div class="q-text">"택배가 사라졌어"를 한 단어로 표현하면?</div>
<div class="options">
<button class="option-btn" onclick="answer(3,0,2)">disappeared</button>
<button class="option-btn" onclick="answer(3,1,2)">vanished</button>
<button class="option-btn" onclick="answer(3,2,2)">misdelivered ⭐</button>
<button class="option-btn" onclick="answer(3,3,2)">lost-box</button>
</div>
<div class="feedback" id="fb-3"></div>
</div>
<!-- Q5 -->
<div class="quiz-card" id="qcard-4">
<div class="q-num">Q5 / 6</div>
<div class="q-text">"우체부 실수였던 것 같아" — 과거 추측을 나타내는 표현으로 빈칸 채우기:<br><strong>"It ___ the postman's mistake."</strong></div>
<div class="options">
<button class="option-btn" onclick="answer(4,0,2)">was maybe</button>
<button class="option-btn" onclick="answer(4,1,2)">should have been</button>
<button class="option-btn" onclick="answer(4,2,2)">must have been ⭐</button>
<button class="option-btn" onclick="answer(4,3,2)">might be</button>
</div>
<div class="feedback" id="fb-4"></div>
</div>
<!-- Q6 -->
<div class="quiz-card" id="qcard-5">
<div class="q-num">Q6 / 6</div>
<div class="q-text">Enzyme Therapy의 한국어 뜻은?</div>
<div class="options">
<button class="option-btn" onclick="answer(5,0,1)">영양 테라피</button>
<button class="option-btn" onclick="answer(5,1,1)">효소 테라피 ⭐</button>
<button class="option-btn" onclick="answer(5,2,1)">에너지 치료</button>
<button class="option-btn" onclick="answer(5,3,1)">효모 발효 치료</button>
</div>
<div class="feedback" id="fb-5"></div>
</div>
<!-- Score Board -->
<div id="score-board">
<div class="score-num" id="score-num">0</div>
<div class="score-label">/ 6 정답</div>
<div class="score-msg" id="score-msg"></div>
<br>
<button class="retry-btn" onclick="resetQuiz()">🔄 다시 풀기</button>
</div>
</div>
</div>
<script>
const feedbacks = [
{ correct: "✅ 정답! 'struggling with'는 '~때문에 힘들다'는 뜻으로 가장 자연스러운 표현이에요.", wrong: "❌ 정답은 'I've been struggling with allergies lately.' — 현재완료 진행형으로 최근 지속 상태를 나타내요." },
{ correct: "✅ 정답! 'I'm very upset'은 문법적으로 맞는 표현이에요. 나머지 세 곳이 틀렸어요.", wrong: "❌ 정답은 'I'm very upset' 부분 — 나머지는 모두 수정이 필요해요. (because 스펠링, 과거진행형, clothes 스펠링)" },
{ correct: "✅ 정답! 'look forward to'는 설레고 긍정적인 기대를 나타내는 표현이에요.", wrong: "❌ 정답은 'look forward to' — expect는 중립적 예상, anticipate는 격식체예요." },
{ correct: "✅ 정답! 'misdelivered'는 '잘못 배달된'을 한 단어로 깔끔하게 표현해요.", wrong: "❌ 정답은 'misdelivered' — 잘못 배달됐을 때 쓰는 깔끔한 한 단어예요." },
{ correct: "✅ 정답! 'must have been'은 과거 상황에 대한 강한 추측을 나타내요.", wrong: "❌ 정답은 'must have been' — 과거 추측에는 'must have + 과거분사'를 써요." },
{ correct: "✅ 정답! Enzyme Therapy = 효소 테라피예요.", wrong: "❌ 정답은 '효소 테라피' — Enzyme은 효소, Therapy는 치료/테라피예요." },
];
let score = 0;
let answered = 0;
const total = 6;
function answer(qIdx, optIdx, correctIdx) {
const card = document.getElementById('qcard-' + qIdx);
if (card.classList.contains('answered-correct') || card.classList.contains('answered-wrong')) return;
const btns = card.querySelectorAll('.option-btn');
btns.forEach(b => b.disabled = true);
const fb = document.getElementById('fb-' + qIdx);
const isCorrect = optIdx === correctIdx;
btns[correctIdx].classList.add('correct');
if (!isCorrect) btns[optIdx].classList.add('wrong');
fb.textContent = isCorrect ? feedbacks[qIdx].correct : feedbacks[qIdx].wrong;
fb.className = 'feedback show ' + (isCorrect ? 'fb-correct' : 'fb-wrong');
card.classList.add(isCorrect ? 'answered-correct' : 'answered-wrong');
if (isCorrect) score++;
answered++;
document.getElementById('progress').style.width = (answered / total * 100) + '%';
if (answered === total) {
setTimeout(showScore, 500);
}
}
function showScore() {
const sb = document.getElementById('score-board');
sb.style.display = 'block';
document.getElementById('score-num').textContent = score;
const msgs = [
[0,2, "💪 다시 한 번 복습해 봐요!"],
[3,4, "👍 잘 하고 있어요! 조금만 더!"],
[5,5, "🌟 훌륭해요! 거의 다 맞혔어요!"],
[6,6, "🏆 완벽해요! 오늘 학습 내용 마스터!"],
];
let msg = msgs[0][2];
for (const [min, max, m] of msgs) {
if (score >= min && score <= max) msg = m;
}
document.getElementById('score-msg').textContent = msg;
sb.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
function resetQuiz() {
score = 0; answered = 0;
document.getElementById('progress').style.width = '0%';
document.getElementById('score-board').style.display = 'none';
for (let i = 0; i < total; i++) {
const card = document.getElementById('qcard-' + i);
card.classList.remove('answered-correct', 'answered-wrong');
card.querySelectorAll('.option-btn').forEach(b => {
b.disabled = false;
b.classList.remove('correct','wrong');
});
const fb = document.getElementById('fb-' + i);
fb.className = 'feedback';
fb.textContent = '';
}
}
</script>
</body>
</html>
결과와 배운 점
퀴즈에 별이 붙어서 힌트를 주더라구요.
근데 다 붙은건 아니고 한 곳만 없고 나머지는 다 있어서 이거 뭐 낚시하는 건가... 싶기도 했습니다.
다음엔 별표 빼고 만들으라고 해야지 싶습니다.
