저는 추석즈음이 되면
내년을 그리기 시작해요.
천천히 작게 시작하는 편이라서
올해 대충 100일 정도가 남았으니
내년에 갖고 싶은 작은 습관을
미리 추가해 보는 거지요.
그리고 지우고 싶은 습관도
뭐가 있나 한 번 적어봅니다.
새해 자정 땡 했다고
갑자기 세상이 바뀌거나
내가 바뀌진 않으니까
지금부터 서서히 물들여 보려고요.
내년을 100일 미리 땡겨 살아보는 방법💛
하루에 3시간을 해도 10분을 해도 매일하는 것이 최고입니다.
이동할 때, 양치할 때, 일어나서 침대에서 밍기적 거릴 때, 언제든 잠시라도 짬을 내어 듣고 소리내 보세요.
PDF 공유 파일 다운
영어맛by뒹굴신 유튜브 바로가기
<!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: 561,
frontText: "부러운<br>거야?",
backText: "Are you jealous?",
audioSrc: "https://blog.kakaocdn.net/dn/czVpiD/btsJD8su1AB/DBnmCzhOrIMJDk8HzP1ZGk/tfile.mp4"
},
{
number: 562,
frontText: "너 눈이<br>참 예쁘다.",
backText: "You have beautiful eyes.",
audioSrc: "https://blog.kakaocdn.net/dn/q71Gk/btsJDtRLPJw/34tJEiHbP6ek3Hx2ZKFE0k/tfile.mp4"
},
{
number: 563,
frontText: "아기가<br>정말 예뻐요.",
backText: "She's adorable.",
audioSrc: "https://blog.kakaocdn.net/dn/bMLQAo/btsJEm48e2Y/4Ky0kefveWU9N24J9EMaK1/tfile.mp4"
},
{
number: 564,
frontText: "이걸<br>어떻게 말하지?",
backText: "How can I put this?",
audioSrc: "https://blog.kakaocdn.net/dn/JN1T6/btsJDhYi244/iPBB6kMK60qDjRLHGkbJck/tfile.mp4"
},
{
number: 565,
frontText: "다<br>됐어?",
backText: "Good to go?",
audioSrc: "https://blog.kakaocdn.net/dn/QhVG2/btsJCMkfawI/vjDB1uFMYKucK7oan7hhVk/tfile.mp4"
},
{
number: 566,
frontText: "네 속을<br>읽을 수 있어.",
backText: "I can read your mind.",
audioSrc: "https://blog.kakaocdn.net/dn/vk2zP/btsJDH3fBtW/wwJnRwO0o1oFghVvXkEWfk/tfile.mp4"
},
{
number: 567,
frontText: "표지판에 뭐라<br>써져 있어?",
backText: "What does the sign say?",
audioSrc: "https://blog.kakaocdn.net/dn/CKaOj/btsJEoBTqjx/OgXkb9HsJ2xqN5IqoY2UH0/tfile.mp4"
},
{
number: 568,
frontText: "나 늦을<br>것 같아.",
backText: "I'm running late.",
audioSrc: "https://blog.kakaocdn.net/dn/bcoz5c/btsJC03A540/bD77IPZjCWwRx1biBbXZv0/tfile.mp4"
},
{
number: 569,
frontText: "그게 바로<br>진짜 너야.",
backText: "That's who you are.",
audioSrc: "https://blog.kakaocdn.net/dn/tYgSI/btsJCCa7ONq/oGcowgXRpWSElck1h8eHA0/tfile.mp4"
},
{
number: 570,
frontText: "그가 바로<br>내 뒤에 있었어.",
backText: "He was right behind me.",
audioSrc: "https://blog.kakaocdn.net/dn/cPkyeY/btsJEnQwP6z/8Mr4EvNcJXkM2Fca98dgX0/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.youtube.com/playlist?list=PLaCVhPj5LHe6jILV8bE_C2LvqgFR7NbmS
1000문장 1탄 12시간 무한반복과 pdf 보러가기
뒹굴신 1000개의 문장 1-1000까지 완성본 간단 PDF 공유
🔥뒹굴신 매운맛 영어회화 중급자용 재생목록
https://www.youtube.com/playlist?list=PLaCVhPj5LHe4QVKdVfhrKVhnryvRFCotk
🎧 1000문장 2탄(설명, 한글발음 有)
'입영작(현재 진행중)' 카테고리의 다른 글
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 |
PDF 다운 뒹굴신 입영작 176-180 581-590 (0) | 2024.09.16 |
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 |
PDF 다운 뒹굴신 입영작 151-155 (0) | 2024.09.09 |
댓글