재미로 읽는 정오의 뒹굴신 일기📓
<!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: 71,
frontText: "당연해. 두 말할 필요 없어.",
backText: "It goes without saying.",
audioSrc: "https://blog.kakaocdn.net/dn/ySDfw/btsIQxGIHya/kMeHNCg4I8M9zKZiKWVQK0/tfile.mp4"
},
{
number: 72,
frontText: "그는 웃기고 재밌어.",
backText: "He is funny.",
audioSrc: "https://blog.kakaocdn.net/dn/uAGxC/btsIQnqDXVU/fKdGnActeCwOf9sv6KHz2k/tfile.mp4"
},
{
number: 73,
frontText: "그건 별 상관없어.",
backText: "It doesn't really matter.",
audioSrc: "https://blog.kakaocdn.net/dn/HqT8M/btsIP45WpD0/FFKCX9kl44E7wCDipN6eSk/tfile.mp4"
},
{
number: 74,
frontText: "완전 별로야.",
backText: "That is so lame.",
audioSrc: "https://blog.kakaocdn.net/dn/cXkyXr/btsIPlHl7Rf/VmzKwttpGJiEeyCC74FBI0/tfile.mp4"
},
{
number: 75,
frontText: "대단해. 믿을 수 없어.",
backText: "It's unbelievable.",
audioSrc: "https://blog.kakaocdn.net/dn/cchBs8/btsIQvWqtj2/NyLRpp1Z6FORMiVWK6Q3CK/tfile.mp4"
},
{
number: 76,
frontText: "좀 있다 봐.",
backText: "I'll see you in a minute.",
audioSrc: "https://blog.kakaocdn.net/dn/D0CmM/btsIO2VsLYQ/mASXbKn5dd8AxT58DbGon0/tfile.mp4"
},
{
number: 77,
frontText: "나 몸이 안 좋아.",
backText: "I'm not feeling well.",
audioSrc: "https://blog.kakaocdn.net/dn/nqn8c/btsIQgkUPCz/XqwtRuvKbY01jSEiexlsM0/tfile.mp4"
},
{
number: 78,
frontText: "아까는<br>(저번 일은) 미안해.",
backText: "I'm sorry about earlier.",
audioSrc: "https://blog.kakaocdn.net/dn/cgwOjR/btsIQpPvR5N/SAuTE8HQ41I3XeYCz9lyy0/tfile.mp4"
},
{
number: 79,
frontText: "들어올래요?",
backText: "Would you like to come in?",
audioSrc: "https://blog.kakaocdn.net/dn/bMGVsc/btsIQJGUBeQ/bt2fRp8KL8uqaQIZR8c5zK/tfile.mp4"
},
{
number: 80,
frontText: "나도 공감이 가.",
backText: "I can relate to that.",
audioSrc: "https://blog.kakaocdn.net/dn/lxieX/btsIPLFIr9b/cTTH8MElWxZgR6BGc9brw1/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>
10
https://www.outube.com/pllist?list=PLCVhPj5LHe6jILV8bE_C2LvqgFR7NbmS
https://www.outube.com/pllist?list=PLCVhPj5LHe6jILV8bE_C2LvqgFR7NbmS
www.outube.com
'영어 한 줄 일기' 카테고리의 다른 글
| 영어 일기 After my workout, (0) | 2024.08.01 |
|---|---|
| 영어 일기 Today's goal is to list my unused camera on the second.. (0) | 2024.07.31 |
| 10. Don't bother. 뜻, 직독직해, 영어 회화 유튜브 (0) | 2024.07.30 |
| 영어 일기 I kept forgetting to wear my blue light blocking glasses, (0) | 2024.07.29 |
| 영어 일기 Today, after a long time, there's no rain in the forecast. (0) | 2024.07.28 |
| 영어 일기 Yesterday was one of the hottest (0) | 2024.07.26 |
| 영어 일기 Today, the weather was so clear, (0) | 2024.07.25 |
| 영어 일기 I hate searching for scissors (0) | 2024.07.24 |
| 영어 일기 Cats love scratching posts, especially ones that feel like.. (0) | 2024.07.23 |
| 영어 일기 I started reading "Seino's Teachings," which I've heard.. (0) | 2024.07.22 |
댓글