<!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: 461,
frontText: "우리 약속날짜<br>바꿔도 돼?",
backText: "Can we reschedule?",
audioSrc: "https://blog.kakaocdn.net/dn/qa91z/btsJqHWfdwx/okOknagbTFxvegHKEmUpo0/tfile.mp4"
},
{
number: 462,
frontText: "변명(헛소리)<br>하지 마.",
backText: "Don't give me that.",
audioSrc: "https://blog.kakaocdn.net/dn/cmOPd0/btsJqZh5zSv/rLG80I2wiMBUPgeyn2v4zk/tfile.mp4"
},
{
number: 463,
frontText: "우린 옳은<br>일을 하고 있어.",
backText: "We're doing the right thing.",
audioSrc: "https://blog.kakaocdn.net/dn/cwmhF3/btsJqEk2ZLB/gips5c5jhSvdSnM7klRKW0/tfile.mp4"
},
{
number: 464,
frontText: "그건<br>말도 안 돼.",
backText: "That's nonsense.",
audioSrc: "https://blog.kakaocdn.net/dn/CS7JO/btsJqDGuyIr/1QF5bj0afkibl5YMVoRPN0/tfile.mp4"
},
{
number: 465,
frontText: "가서 옷<br>갈아입을게.",
backText: "I'll go change.",
audioSrc: "https://blog.kakaocdn.net/dn/VVXq1/btsJqleX2iW/pHqVXmtWKlgVLszBwRXpRK/tfile.mp4"
},
{
number: 466,
frontText: "무슨 일이 있어도<br>널 사랑해.",
backText: "I love you no matter what.",
audioSrc: "https://blog.kakaocdn.net/dn/cMBdTI/btsJqT3npUB/KogZUngL4ts0hepMr6jEyk/tfile.mp4"
},
{
number: 467,
frontText: "내가 너<br>다시 볼 수 있을까?",
backText: "Can I see you again?",
audioSrc: "https://blog.kakaocdn.net/dn/bUqhc7/btsJpftptWl/WAmjugptLaLwwEKUPkzrJ1/tfile.mp4"
},
{
number: 468,
frontText: "컨디션 어때?",
backText: "How are you feeling?",
audioSrc: "https://blog.kakaocdn.net/dn/liCEU/btsJo1oy29i/HPQMZFKP8LKB5YmEVKioQk/tfile.mp4"
},
{
number: 469,
frontText: "넌 아주<br>잘하고 있어.",
backText: "You are doing great.",
audioSrc: "https://blog.kakaocdn.net/dn/0zo06/btsJoY6rCTq/4izcGUfknPD0lia7Dpv751/tfile.mp4"
},
{
number: 470,
frontText: "네가 그걸 나한테서<br>듣길 원했어.",
backText: "I wanted you to hear it from me.",
audioSrc: "https://blog.kakaocdn.net/dn/elJS4r/btsJqZI7SD5/fKFDuxnXwoYk2YadNedqxk/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문장
| 136 | 1 | 너 이거 안 믿을걸. | You're not gonna believe this. | 유r 나꺼너 빌리v딧ㅅ |
|
|
2 | 너 이거 안 믿을걸. | You're not gonna believe this. | 유r 나꺼너 빌리v딧ㅅ |
| 3 | 너 이거 안 믿을걸. | You're not gonna believe this. | 유나꺼너 빌리v딧ㅅ | |
| 4 | 너 이거 안 믿을걸. | You're not gonna believe this. | 유r 나꺼너 빌리v딧ㅅ | |
| You are not going to believe 넌 믿지 않을 거야 this. 이것을 | ||||
| 137 | 1 | 나 방금 면허 땄어. | I just got my license. | 아이 저ㅆ 감마 라이쎈ㅅ |
|
|
2 | 나 방금 면허 땄어. | I just got my license. | 아이저ㅆ 감마 라이쎈ㅅ |
| 3 | 나 방금 면허 땄어. | I just got my license. | 은저ㅆ 같마 라이쎈ㅅ | |
| 4 | 나 방금 면허 땄어. | I just got my license. | 아저ㅆ 감마 라이쎈ㅅ | |
| I just got 나 방금 얻었어, 획득했어 my license. 내 면허증을 license는 다양한 종류의 자격증이나 허가증이지만 보통은 운전면허를 의미하는 경우가 많아요. 만약 맥락이 명확하지 않으면 driver's license라고 정확히 말해야 할 때도 있어요. |
||||
| 138 | 1 | 지옥에 온 걸 환영해.(농담) | Welcome to the club. | 웰컴투더 클럽 |
|
|
2 | 지옥에 온 걸 환영해.(농담) | Welcome to the club. | 웰컴투더 클럽 |
| 3 | 지옥에 온 걸 환영해.(농담) | Welcome to the club. | 웰컴투더 클럽 | |
| 4 | 지옥에 온 걸 환영해.(농담) | Welcome to the club. | 웰컴투더 클럽 | |
| Welcome 환영해 to the club. 그 클럽 방향으로, 클럽(모임)에 온 것을 '너도 곧 그 어려움을 알게 될 거야'라는 식으로 상대가 앞으로 겪을 어려움, 불편함을 위로하면서도 반기는 농담. =한 배를 탄 걸 환영해. |
||||
| 139 | 1 | 내가 잠깐 봐도 돼?(면허) | Can I take a look? | 캐나태걸릌ㅋ |
|
|
2 | 내가 잠깐 봐도 돼?(면허) | Can I take a look? | 캐나태걸릌 |
| 3 | 내가 잠깐 봐도 돼?(면허) | Can I take a look? | 캐나이 태걸릌 | |
| 4 | 내가 잠깐 봐도 돼?(면허) | Can I take a look? | 캐나이 태걸릌 | |
| Can I take 내가 취해도 돼? a look? 한 번의 봄, 눈길을 =좀 봐도 돼? |
||||
| 140 | 1 | 얼마든지. 그렇게 해. | Be my guest. | 비마이 게ㅅㅌ |
|
|
2 | 얼마든지. 그렇게 해. | Be my guest. | 비마이 게ㅅㅌ |
| 3 | 얼마든지. 그렇게 해. | Be my guest. | 비마이 게ㅅㅌ | |
| 4 | 얼마든지. 그렇게 해. | Be my guest. | 비마 게슽 | |
| Be 돼라 my guest. 내 손님이. 가게에 온 손님, 집에 온 손님에게는 손님이 편하게 행동할 수 있도록 원하는 것을 흔쾌히 내어주고 허락, 배려하며 호의적이 되지요. 그런 배경이 담긴 말. |
||||
PDF 공유 파일 다운
영어맛by뒹굴신 유튜브 바로가기
- YouTube
www.youtube.com
영어 카드 뒤집기 뒹굴신 천문장 451-460
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탄(설명, 한글발음 有)
'입영작(현재 진행중)' 카테고리의 다른 글
| PDF 다운 뒹굴신 입영작 156-160 (0) | 2024.09.10 |
|---|---|
| PDF 다운 뒹굴신 입영작 151-155 (0) | 2024.09.09 |
| 뒹굴신 입영작 토요 통합본 1-150 PDF 다운 (0) | 2024.09.07 |
| PDF 다운 뒹굴신 입영작 146-150 (0) | 2024.09.06 |
| PDF 다운 뒹굴신 입영작 141-145 (0) | 2024.09.05 |
| PDF 다운 뒹굴신 입영작 131-135 451-460 (0) | 2024.09.03 |
| PDF 다운 뒹굴신 입영작 126-130 441-450 (0) | 2024.09.02 |
| 뒹굴신 입영작 토요 통합본 1-125 PDF 다운 (0) | 2024.08.31 |
| PDF 다운 뒹굴신 입영작 121-125 (0) | 2024.08.30 |
| PDF 다운 뒹굴신 입영작 116-120 (0) | 2024.08.29 |
댓글