<!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: 651,
frontText: "문제 있어?",
backText: "Is there a problem?",
audioSrc: "https://blog.kakaocdn.net/dn/cAVoNu/btsJIqfNoUF/FNiy0q4hiJ2DA9zupTBX1k/tfile.mp4"
},
{
number: 652,
frontText: "그가 갑자기<br>나타났어.",
backText: "He came out of nowhere.",
audioSrc: "https://blog.kakaocdn.net/dn/c2Epdt/btsJGObmTKr/gA6kacHuPvmGVw8LS8qkik/tfile.mp4"
},
{
number: 653,
frontText: "숙제하렴.",
backText: "Do your homework.",
audioSrc: "https://blog.kakaocdn.net/dn/3vjD1/btsJIhJ8ikf/kfEV6c5HZKPc3YaUcW1xe0/tfile.mp4"
},
{
number: 654,
frontText: "그는 이사 갔어.",
backText: "He moved out.",
audioSrc: "https://blog.kakaocdn.net/dn/oppLn/btsJIuCtp7T/MgcEHspS6mt7IFTnn2Oln1/tfile.mp4"
},
{
number: 655,
frontText: "내가 너무<br>크게 말했나?",
backText: "Did I say that out loud?",
audioSrc: "https://blog.kakaocdn.net/dn/YmbFH/btsJImdyT8R/qZEZ9ZjJtQBxXIqkNFTe5K/tfile.mp4"
},
{
number: 656,
frontText: "나 환장하겠네!",
backText: "I'm freaking out!",
audioSrc: "https://blog.kakaocdn.net/dn/bqLxgc/btsJHj3b7XQ/7RKzsI7ZYfPlkJK2qv31d1/tfile.mp4"
},
{
number: 657,
frontText: "달리 갈 곳을<br>모르겠어.",
backText: "I don't know where else to go.",
audioSrc: "https://blog.kakaocdn.net/dn/5InOC/btsJHVgeiPS/bWjRYkFV9q6Z5h55jcLGdK/tfile.mp4"
},
{
number: 658,
frontText: "넌 초대되지<br>않았어.",
backText: "You're not invited.",
audioSrc: "https://blog.kakaocdn.net/dn/cXzmWa/btsJHkA3uD1/UsYmYFqG8zGHbRrEYLWIG0/tfile.mp4"
},
{
number: 659,
frontText: "나한텐 중요한<br>문제야.",
backText: "It matters to me.",
audioSrc: "https://blog.kakaocdn.net/dn/cgKVuc/btsJHnqWBhk/IFySP978AwJIFDNYNbBbG1/tfile.mp4"
},
{
number: 660,
frontText: "그게 잘 안되면<br>어쩌지?",
backText: "What if it doesn't work?",
audioSrc: "https://blog.kakaocdn.net/dn/bJlMaH/btsJJcnLhBJ/866Jt1ogG5WJkFwFUTI7p0/tfile.mp4"
}
];
const container = document.getElementById('card-container');
cardData.forEach((data, index) => {
const card = document.create
드디어 찬바람이 붑니다.
이제야 더위가 가시네 생각하며
날짜를 보니 9월 23일입니다.
이번달이 7일 남았네요.
그리고 10월, 11월, 12월
남은 세 달까지 합쳐봐도
올해는 100일이 채 안 남은 거지요.
새해는 여러 번 맞아봐 알지만
1월 1일부터 바뀐 삶을 산다는 건
거의 불가능에 가까워요 ㅎㅎ
그래서 저는 내년 목표를 미리 적어보았습니다.
홈페이지를 만들고 싶었는데
유튜브 영상을 보고 따라 하며
엉성하고 허전해도
홈페이지 한쪽이 만들어졌어요.
조금씩 다듬어 가야지요.
하고 싶은 컨텐츠들도 쭉 적었습니다.
조금씩 발을 담가보니
올해의 남은 세 달을 지난 9달보다
더 진하고 무겁게 만들고 싶어 졌어요.
새 식당도 가오픈을 하고
정식 그랜드 오픈을 하는데
우리도 내년을 가오픈해서
살기 시작하면 어떨까요?💛
하루에 3시간을 해도 10분을 해도 매일하는 것이 최고입니다.
이동할 때, 양치할 때, 일어나서 침대에서 밍기적 거릴 때, 언제든 잠시라도 짬을 내어 듣고 소리내 보세요.
오늘의 5문장
201 | 1 | 내가 증명해볼게. | Let me prove it to you. | 렘미 ㅍr루v비투유 |
|
2 | 내가 증명해볼게. | Let me prove it to you. | 렘미 ㅍr루v비투유 |
3 | 내가 증명해볼게. | Let me prove it to you. | 렘미 ㅍr루v비투유 | |
4 | 내가 증명해볼게. | Let me prove it to you. | 렘미 ㅍr루v비투유 | |
Let -게 해 me 나를 prove 증명하게 해 it 그것을 to you. 너에게 |
||||
202 | 1 | 직접 확인해봐. | See for yourself. | 씨f퓨r 쎌f |
|
2 | 직접 확인해봐. | See for yourself. | 씨f퓨r 쎌f |
3 | 직접 확인해봐. | See for yourself. | 씨f퓨r 쎌f | |
4 | 직접 확인해봐. | See for yourself. | 씨f요r 쎌f | |
See 봐 for(목적) yourself. 네 스스로를 위해서 확인 과정이 너를 위한 것이며, 다른 사람의 의견보다는 네가 직접 보고 스스로 판단하라는 뜻. |
||||
203 | 1 | 그건 불가능하다고 생각했어. | I thought it was impossible. | 아 th써리 워심 파써버 |
|
2 | 그건 불가능하다고 생각했어. | I thought it was impossible. | 아이 th떠리워심 파써버 |
3 | 그건 불가능하다고 생각했어. | I thought it was impossible. | 아 th떠리워심 파써버 | |
4 | 그건 불가능하다고 생각했어. | I thought it was impossible. | 아 th떠리워심 파써버 | |
I thought 난 생각했어 it was impossible. 그것이 불가능 하다고 | ||||
204 | 1 | 봐봐, 내가 뭐랬어. | See, I told you. | 씨 아이 톨 쥬 |
|
2 | 봐봐, 내가 뭐랬어. | See, I told you. | 씨아 톨쥬 |
3 | 봐봐, 내가 뭐랬어. | See, I told you. | 씨아이 톨쥬 | |
4 | 봐봐, 내가 뭐랬어. | See, I told you. | 씨아 톨쥬 | |
See, 봐 I told you. 내가 말했줬잖아 너한테 | ||||
205 | 1 | 내가 틀렸어. | I stand corrected. | 아이ㅅ땐 크r뤸틷 |
|
2 | 내가 틀렸어. | I stand corrected. | 아이ㅅ땐 크r뤸틷 |
3 | 내가 틀렸어. | I stand corrected. | 아이ㅅ땐 크r뤸틷 | |
4 | 내가 틀렸어. | I stand corrected. | 아이ㅅ땐 크r뤸틷 | |
I stand 난 서있어 corrected. 맞게 고쳐진 상태로 stand는 사람이 서있다는 말도 되지만 어떤 입장에 선다는 말이기도 해요. 맞게 정정된, 고쳐진, 바로 잡힌(corrected) 상태로 서있다고 하니 내가 틀렸음을 인정하고 올바른 입장에 선다는 의미. |
PDF 공유 파일 다운
영어맛by뒹굴신 유튜브 바로가기
🎧 영어 왕초보 기초 문법 강의 10강
https://www.youtube.com/playlist?list=PLaCVhPj5LHe6jILV8bE_C2LvqgFR7NbmS
1000문장 1탄 12시간 무한반복과 pdf 보러가기
뒹굴신 1000개의 문장 1-1000까지 완성본 간단 PDF 공유
🔥뒹굴신 매운맛 영어회화 중급자용 재생목록
https://www.youtube.com/playlist?list=PLaCVhPj5LHe4QVKdVfhrKVhnryvRFCotk
🎧 1000문장 2탄(설명, 한글발음 有)
'입영작(현재 진행중)' 카테고리의 다른 글
뒹굴신 입영작 토요 통합본 1-225 PDF 다운 (0) | 2024.09.28 |
---|---|
PDF 다운 뒹굴신 입영작 221-225 (0) | 2024.09.27 |
PDF 다운 뒹굴신 입영작 216-220 (0) | 2024.09.26 |
PDF 다운 뒹굴신 입영작 211-215 (0) | 2024.09.25 |
PDF 다운 뒹굴신 입영작 661-670 (0) | 2024.09.24 |
뒹굴신 입영작 토요 통합본 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 |
댓글