<!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: 581,
frontText: "그게<br>내 주특기야.",
backText: "That's my specialty.",
audioSrc: "https://blog.kakaocdn.net/dn/86ITx/btsJDojd8Qn/APh1hmqKRnKY1g7hIIH971/tfile.mp4"
},
{
number: 582,
frontText: "진정성 있게<br>행동해.",
backText: "Keep it real.",
audioSrc: "https://blog.kakaocdn.net/dn/bDFt9k/btsJEELRx5M/SFHYedWVgDggsjHoZrk5pk/tfile.mp4"
},
{
number: 583,
frontText: "몇 번이나<br>말해야 돼?",
backText: "How many times do I have to tell you?",
audioSrc: "https://blog.kakaocdn.net/dn/bcSusp/btsJDuRc3MV/P73BIbAzeA0IrFC8dYrHF0/tfile.mp4"
},
{
number: 584,
frontText: "너 유난히 더<br>멋져 보여.",
backText: "You look gorgeous.",
audioSrc: "https://blog.kakaocdn.net/dn/KQdMQ/btsJDy6Zm60/nKp7DtcByrVXm4iQkOTdJ1/tfile.mp4"
},
{
number: 585,
frontText: "걔<br>잘 생겼어.",
backText: "He's good looking.",
audioSrc: "https://blog.kakaocdn.net/dn/RLwRe/btsJCWOiJLq/jAuHwzK2eYOYXmHWOaT9B0/tfile.mp4"
},
{
number: 586,
frontText: "왜<br>망설이고 있어?",
backText: "Why are you hesitating?",
audioSrc: "https://blog.kakaocdn.net/dn/plVlQ/btsJDFSrLKk/abkSpuZeQGU9KGyqRERr90/tfile.mp4"
},
{
number: 587,
frontText: "아직<br>초저녁이야.",
backText: "The night is still young.",
audioSrc: "https://blog.kakaocdn.net/dn/K6Gx1/btsJD5bZxPp/YoIiuwitChrkYTeKFmFBnK/tfile.mp4"
},
{
number: 588,
frontText: "우리<br>돌아가면서 해도 돼.",
backText: "We could take turns.",
audioSrc: "https://blog.kakaocdn.net/dn/cnreEY/btsJE0gLjL1/wZli3yCvEPpafVHiTdff7k/tfile.mp4"
},
{
number: 589,
frontText: "귀띔해 줘서<br>고마워.",
backText: "Thanks for the heads-up.",
audioSrc: "https://blog.kakaocdn.net/dn/bwxxnM/btsJD6PwEgq/05sSnSvolz4J5IxRd7XoT0/tfile.mp4"
},
{
number: 590,
frontText: "난 이거에<br>소질이 없나 봐.",
backText: "I'm not cut out for this.",
audioSrc: "https://blog.kakaocdn.net/dn/b7nF4H/btsJCTYlLpm/IqEeqhFgyJ6EDi0XRpcPg0/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>
자신감은 내가 무언가를
잘할 수 있겠다고 생각하는 것이고
자존감은 내가 무언가를
잘하지 못해도 변함없이
나 자신을 사랑할 수 있는 마음이다.
/
자신감, 자존감 둘 다 차곡차곡-
행복한 한가위 보내셔요💛
하루에 3시간을 해도 10분을 해도 매일하는 것이 최고입니다.
이동할 때, 양치할 때, 일어나서 침대에서 밍기적 거릴 때, 언제든 잠시라도 짬을 내어 듣고 소리내 보세요.
오늘의 5문장
| 176 | 1 | 네가 올 줄 몰랐어. | I didn't know you were coming. | 아린 노여r 커밍 |
|
|
2 | 네가 올 줄 몰랐어. | I didn't know you were coming. | 아딘 노여r 커밍 |
| 3 | 네가 올 줄 몰랐어. | I didn't know you were coming. | 아딘 노여r 커밍 | |
| 4 | 네가 올 줄 몰랐어. | I didn't know you were coming. | 아른 노유워r 커밍 | |
| I didn't know 난 몰랐어 you were coming. 네가 오는 줄, 네가 오기로 되어있는 줄. |
||||
| 177 | 1 | 네가 와서 좋다. | I’m glad you’re here. | 암 글래듀r 히r |
|
|
2 | 네가 와서 좋다. | I’m glad you’re here. | 음글래쥬r 히r |
| 3 | 네가 와서 좋다. | I’m glad you’re here. | 암 글래쥬r 히r | |
| 4 | 네가 와서 좋다. | I’m glad you’re here. | 음글래쥬r 히r | |
| I’m glad 난 기뻐 you’re here. 네가 여기 있어서, 네가 여기 와서. |
||||
| 178 | 1 | 얼마나 오래 있을 거야? | How long are you staying? | 할렁아r유 ㅅ때잉 |
|
|
2 | 얼마나 오래 있을 거야? | How long are you staying? | 할렁 유 ㅅ때인 |
| 3 | 얼마나 오래 있을 거야? | How long are you staying? | 할렁 유 ㅆ떼엔 | |
| 4 | 얼마나 오래 있을 거야? | How long are you staying? | 할렁 유 ㅅ때은 | |
| How long 얼마나 길게, 얼마나 오래 are you staying? 너 머물러? 머무르기로 일정이 되어 있어? |
||||
| 179 | 1 | 나 막 가려던 참이었어. | I was just leaving. | 아워서ㅅ 리v빙 |
|
|
2 | 나 막 가려던 참이었어. | I was just leaving. | 아이워ㅅ 저ㅅ 리v빙 |
| 3 | 나 막 가려던 참이었어. | I was just leaving. | 아워서ㅅ 리v빙 | |
| 4 | 나 막 가려던 참이었어. | I was just leaving. | 아이워ㅅ 저ㅅ 리v빙 | |
| I was just 나는 방금 막 leaving. 떠나는 중이었어 떠나는 과정이 시작되었다고 말하면서 갈 채비의 과정에 있거나 있던 장소를 떠나는 중이었음을 말해요. |
||||
| 180 | 1 | 자주 연락해. | Don’t be a stranger. | 돈삐어 ㅅㅊr뢰인저r |
|
|
2 | 자주 연락해. | Don’t be a stranger. | 도은 삐어 ㅅㅊr뢰인저r |
| 3 | 자주 연락해. | Don’t be a stranger. | 돈 삐어 ㅅㅊr뢰인저r | |
| 4 | 자주 연락해. | Don’t be a stranger. | 돈삐 ㅅㅊr뢰인저r | |
| Don’t be 되지 마 a stranger. 낯선 사람, 모르는 사람이. 연락이 끊겨 모르는 사람처럼 지내지 말고 자주 연락하자는 뜻이 담긴 말. |
||||
PDF 공유 파일 다운
영어맛by뒹굴신 유튜브 바로가기
- YouTube
www.youtube.com
영어 카드 뒤집기 뒹굴신 천문장 571-580
dingulsin.tistory.com
🎧 영어 왕초보 기초 문법 강의 10강
https://www.youtube.com/playlist?list=PLaCVhPj5LHe6jILV8bE_C2LvqgFR7NbmS
영어 왕초보 기초 회화 강의
www.youtube.com
1000문장 1탄 12시간 무한반복과 pdf 보러가기
뒹굴신 1000개의 문장 1-1000까지 완성본 간단 PDF 공유
뒹굴신 1000개의 문장 1-1000까지 완성본 간단 PDF 공유
안녕하세요. 드디어 드디어 1000문장이 완성되었습니다. 실화입니까? ㅎㅎㅎ 하나의 장기 프로젝트가 완성되니 정말 뿌듯하고 기분이 좋군요 ㅎㅎ. 가까운 카페에 가서 케이크 한 조각 먹어야겠
dingulsin.tistory.com
🔥뒹굴신 매운맛 영어회화 중급자용 재생목록
https://www.youtube.com/playlist?list=PLaCVhPj5LHe4QVKdVfhrKVhnryvRFCotk
뒹굴신 매운맛🔥 영어회화 중급자용
긴 문장, 자주쓰이는 표현 말하기 트레이닝
www.youtube.com
🎧 1000문장 2탄(설명, 한글발음 有)
'입영작(현재 진행중)' 카테고리의 다른 글
| 뒹굴신 입영작 토요 통합본 1-200 PDF 다운 (0) | 2024.09.21 |
|---|---|
| PDF 다운 뒹굴신 입영작 196-200 (0) | 2024.09.20 |
| PDF 다운 뒹굴신 입영작 191-195 (0) | 2024.09.19 |
| PDF 다운 뒹굴신 입영작 186-190 (0) | 2024.09.18 |
| PDF 다운 뒹굴신 입영작 181-185 (0) | 2024.09.17 |
| 뒹굴신 입영작 토요 통합본 1-175 PDF 다운 561-570 (0) | 2024.09.14 |
| PDF 다운 뒹굴신 입영작 551-560 (0) | 2024.09.13 |
| PDF 다운 뒹굴신 입영작 166-170 541-550 (0) | 2024.09.12 |
| PDF 다운 뒹굴신 입영작 161-165 (0) | 2024.09.11 |
| PDF 다운 뒹굴신 입영작 156-160 (0) | 2024.09.10 |
댓글