재미로 읽는 정오의 영어맛 👉구독자님의 일기📓
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>플래시 카드</title>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 100vh;
background-color: #f8f9fa;
position: relative;
z-index: 1;
}
.card {
width: 90%;
max-width: 400px;
height: 300px;
perspective: 1000px;
position: relative;
margin: 10px;
z-index: 2;
}
.card__face {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1.4em;
text-align: center;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.6s;
background-color: #ffffff;
padding: 20px;
box-sizing: border-box;
}
.card__face--front {
background-color: #e6c27b;
}
.card__face--back {
background-color: #c4d8d2;
transform: rotateY(180deg);
}
.card.is-flipped .card__face--front {
transform: rotateY(180deg);
}
.card.is-flipped .card__face--back {
transform: rotateY(0deg);
}
.speaker-icon {
margin-top: 20px;
cursor: pointer;
font-size: 1.4em;
}
.logo {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 50px;
}
.card-number {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
font-size: 0.98em;
}
.text-line {
display: block;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="container" id="card-container">
<!-- 카드가 여기에 동적으로 추가됩니다 -->
</div>
<script>
const cardData = [
{
number: 431,
frontText: "영어 하세요?",
backText: "Do you speak english?",
audioSrc: "https://blog.kakaocdn.net/dn/ERQBP/btsJn0OXvcF/s9uvneHibRxZ2nFjpyxcMk/tfile.mp4"
},
{
number: 432,
frontText: "아님 내가<br>왜 여기 있겠어?",
backText: "Why else would I be here?",
audioSrc: "https://blog.kakaocdn.net/dn/zx31x/btsJmfUrlpF/1kddBQVYAKM2mztinilkUK/tfile.mp4"
},
{
number: 433,
frontText: "내 뜻은<br>그게 아니었어.",
backText: "That's not what I meant.",
audioSrc: "https://blog.kakaocdn.net/dn/HGQZn/btsJmNb5vct/b6o4tKwKxcQNpoapJzKmB1/tfile.mp4"
},
{
number: 434,
frontText: "도와줘,<br>말아?",
backText: "Do you want my help or not?",
audioSrc: "https://blog.kakaocdn.net/dn/LYlux/btsJmbdwUM8/F3Zcpx0vpyEJKHjTKRIKf1/tfile.mp4"
},
{
number: 435,
frontText: "확실히는<br>모르겠어.",
backText: "I don't know for sure.",
audioSrc: "https://blog.kakaocdn.net/dn/dBjX7T/btsJl9NCiIR/7Gz0bPG0YOPbLz1lm49U30/tfile.mp4"
},
{
number: 436,
frontText: "맛있게 드세요.",
backText: "Bon appetit.",
audioSrc: "https://blog.kakaocdn.net/dn/lqXUD/btsJnr7m0lC/vkMGudiG6GjskFItX7Jb5K/tfile.mp4"
},
{
number: 437,
frontText: "볼 일을<br>좀 봐야 해.",
backText: "I got to run some errands.",
audioSrc: "https://blog.kakaocdn.net/dn/btsaOO/btsJmM5gUt2/aKkY2K57PuNZNTdYxbq9O1/tfile.mp4"
},
{
number: 438,
frontText: "할 일을<br>말해줘.",
backText: "Tell me what to do.",
audioSrc: "https://blog.kakaocdn.net/dn/b5tgMG/btsJnXxXLRv/kFarl8OjNtP0yAFPXj71m0/tfile.mp4"
},
{
number: 439,
frontText: "익숙해지고 있어.",
backText: "I'm getting used to it.",
audioSrc: "https://blog.kakaocdn.net/dn/Uo5qC/btsJnGQJAGg/mb7IrIhzsQEHwplLdpU7E1/tfile.mp4"
},
{
number: 440,
frontText: "전혀<br>그렇지 않아.",
backText: "That is not it at all.",
audioSrc: "https://blog.kakaocdn.net/dn/lVU1U/btsJmARrmoD/cx4yt8BOnJ8XMM7Jze5Yh1/tfile.mp4"
}
];
const container = document.getElementById('card-container');
cardData.forEach((data, index) => {
const card = document.createElement('div');
card.className = 'card';
card.id = `card${index + 1}`;
card.innerHTML = `
<div class="card__face card__face--front">
<div class="card-number">${data.number}</div>
${data.frontText.split('<br>').map(line => `<span class="text-line">${line}</span>`).join('')}
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbqWKHV%2FbtsIxkWWSCQ%2FH5ebr5KfDdnjvtA7y43if0%2Fimg.png" class="logo" alt="로고">
</div>
<div class="card__face card__face--back">
<div class="card-number">${data.number}</div>
${data.backText}
<div class="speaker-icon speaker-icon${index + 1}">🎧</div>
<audio id="audio${index + 1}" src="${data.audioSrc}"></audio>
<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbqWKHV%2FbtsIxkWWSCQ%2FH5ebr5KfDdnjvtA7y43if0%2Fimg.png" class="logo" alt="로고">
</div>
`;
container.appendChild(card);
});
function setupCard(cardId, audioId, speakerIconClass) {
document.querySelector(cardId).addEventListener('click', function() {
this.classList.toggle('is-flipped');
});
document.querySelector(speakerIconClass).addEventListener('click', function(event) {
event.stopPropagation();
var audio = document.querySelector(audioId);
audio.play();
});
}
cardData.forEach((_, index) => {
setupCard(`#card${index + 1}`, `#audio${index + 1}`, `.speaker-icon${index + 1}`);
});
</script>
</body>
</html>
영어 카드 뒤집기 뒹굴신 천문장 421-430
dingulsin.tistory.com
영어맛 by 뒹굴신
매일 오전 6시 미드, 영화를 활용하여 쉐도잉, 딕테이션, 구간반복 영어 공부 자료를 업로드합니다. 블로그 https://dingulsin.tistory.com/ (구)뒹굴신 같은 운영자
www.youtube.com
🎧 영어 왕초보 기초 문법 강의 10강
https://www.youtube.com/playlist?list=PLaCVhPj5LHe6jILV8bE_C2LvqgFR7NbmS
영어 왕초보 기초 회화 강의
www.youtube.com
🎧 1000문장 1탄(빈칸채우기)
🎧 1000문장 2탄(설명, 한글발음 有)
🔥뒹굴신 매운맛 영어회화 중급자용 재생목록
https://www.youtube.com/playlist?list=PLaCVhPj5LHe4QVKdVfhrKVhnryvRFCotk
뒹굴신 매운맛🔥 영어회화 중급자용
긴 문장, 자주쓰이는 표현 말하기 트레이닝
www.youtube.com
'영어 한 줄 일기' 카테고리의 다른 글
| 영어 일기 I made myself some cold buckwheat noodles and.. (0) | 2024.09.06 |
|---|---|
| 영어 일기 One of my favorite places in town 471-480 is a cafe called Moon. (0) | 2024.09.05 |
| 영어 일기 Before work, I go to a gym near my office. As soon as I.. (0) | 2024.09.04 |
| 영어 일기 I sometimes talk to the moon. She never answers, but.. (0) | 2024.09.03 |
| 영어 일기 I’ve been spotting so many mantises these days. (0) | 2024.09.02 |
| 영어 일기 It's been forever since I last went to a café without my.. (0) | 2024.08.31 |
| 영어 일기 I used to be so bad at taking pics of the moon, but lately.. (0) | 2024.08.30 |
| 영어 일기 Today was our third wedding anniversary, and it was so.. (0) | 2024.08.29 |
| 영어 일기 I sold a chair I don’t use anymore. 391-400 I just left it outside for.. (0) | 2024.08.28 |
| 영어 일기 Every morning, I wake up and stretch my whole body for.. (0) | 2024.08.27 |
댓글