반응형
안녕하세요, 여러분! 미소입니다. 😊 특별한 기념일, 중요한 시험, 설레는 여행까지! D-day를 손쉽게 계산하고 싶을 때가 있죠? 그래서 오늘은 여러분이 어디든 간편하게 넣어두고 쓸 수 있는 초간단 디데이 계산기 사용법과 코드를 공유해 드리려고 해요! 바로 시작해 볼까요? 🚀
디데이 계산기, 이렇게 사용하세요! 💻
사용법은 정말 간단해요!
- 기준 날짜: 계산을 시작하고 싶은 날짜를 선택해주세요. (기본은 오늘 날짜랍니다!)
- 목표 날짜: 알고 싶은 D-day의 날짜를 선택해주세요.
- 계산하기: 버튼을 콕! 누르면 바로 아래 결과 영역에 며칠이 남았는지, 혹은 며칠이 지났는지 표시될 거예요. 참 쉽죠? 😉
내 블로그/웹사이트에 적용하기 (HTML 코드 제공) 🛠️
이 디데이 계산기를 여러분의 블로그나 웹사이트에 넣고 싶으시다고요? 문제없어요! 아래 전체 HTML 코드를 복사해서, 사용하시는 플랫폼의 HTML 편집 모드에 그대로 붙여넣기만 하면 된답니다. 그러면 바로 이 계산기가 짠! 하고 나타날 거예요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>디데이 계산기</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* 기본 폰트 및 배경 설정 */
body {
font-family: 'Inter', sans-serif; /* Inter 폰트 사용 */
background-color: #f3f4f6; /* Tailwind CSS gray-100 */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 16px; /* 모바일 화면 여백 */
}
/* 계산기 컨테이너 스타일 */
.calculator-container {
background-color: white;
padding: 24px; /* 내부 여백 */
border-radius: 12px; /* 둥근 모서리 */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* 그림자 효과 */
width: 100%;
max-width: 400px; /* 최대 너비 설정 */
}
/* 제목 스타일 */
.title {
font-size: 24px; /* 글자 크기 */
font-weight: bold; /* 굵게 */
color: #1f2937; /* Tailwind CSS gray-800 */
text-align: center;
margin-bottom: 24px; /* 아래쪽 여백 */
}
/* 입력 필드 레이블 스타일 */
.label {
display: block;
margin-bottom: 8px; /* 아래쪽 여백 */
font-size: 14px; /* 글자 크기 */
font-weight: 500; /* 중간 굵기 */
color: #374151; /* Tailwind CSS gray-700 */
}
/* 날짜 입력 필드 스타일 */
.date-input {
width: 100%;
padding: 10px; /* 내부 여백 */
border: 1px solid #d1d5db; /* Tailwind CSS gray-300 */
border-radius: 8px; /* 둥근 모서리 */
font-size: 16px; /* 글자 크기 */
margin-bottom: 16px; /* 아래쪽 여백 */
box-sizing: border-box; /* 패딩과 테두리를 너비에 포함 */
}
/* 계산 버튼 스타일 */
.calculate-button {
width: 100%;
padding: 12px; /* 내부 여백 */
background-color: #3b82f6; /* Tailwind CSS blue-500 */
color: white;
font-size: 16px; /* 글자 크기 */
font-weight: bold; /* 굵게 */
border: none;
border-radius: 8px; /* 둥근 모서리 */
cursor: pointer; /* 마우스 커서 변경 */
transition: background-color 0.3s; /* 배경색 변경 애니메이션 */
}
.calculate-button:hover {
background-color: #2563eb; /* Tailwind CSS blue-600 */
}
/* 결과 표시 영역 스타일 */
.result-area {
margin-top: 24px; /* 위쪽 여백 */
padding: 16px; /* 내부 여백 */
background-color: #e5e7eb; /* Tailwind CSS gray-200 */
border-radius: 8px; /* 둥근 모서리 */
text-align: center;
font-size: 18px; /* 글자 크기 */
font-weight: 500; /* 중간 굵기 */
color: #1f2937; /* Tailwind CSS gray-800 */
min-height: 60px; /* 최소 높이 */
display: flex;
justify-content: center;
align-items: center;
word-break: keep-all; /* 줄바꿈 시 단어 유지 */
}
/* 로딩 스피너 (필요시) */
.loader {
border: 4px solid #f3f3f3; /* Light grey */
border-top: 4px solid #3b82f6; /* Blue */
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
margin: 0 auto; /* 가운데 정렬 */
display: none; /* 기본적으로 숨김 */
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="calculator-container">
<h1 class="title">디데이 계산기</h1>
<div>
<label for="baseDate" class="label">기준 날짜:</label>
<input type="date" id="baseDate" class="date-input">
</div>
<div>
<label for="targetDate" class="label">목표 날짜:</label>
<input type="date" id="targetDate" class="date-input">
</div>
<button id="calculateBtn" class="calculate-button">계산하기</button>
<div id="result" class="result-area">
결과가 여기에 표시됩니다.
</div>
<div id="loadingSpinner" class="loader mt-4"></div>
</div>
<script>
// DOM 요소 가져오기
const baseDateInput = document.getElementById('baseDate');
const targetDateInput = document.getElementById('targetDate');
const calculateBtn = document.getElementById('calculateBtn');
const resultDiv = document.getElementById('result');
const loadingSpinner = document.getElementById('loadingSpinner');
// 오늘 날짜를 YYYY-MM-DD 형식으로 기본 설정
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 +1, 두 자리로 포맷팅
const day = String(today.getDate()).padStart(2, '0'); // 두 자리로 포맷팅
const todayString = `${year}-${month}-${day}`;
baseDateInput.value = todayString; // 기준 날짜 기본값 설정
targetDateInput.value = todayString; // 목표 날짜 기본값 설정
// 계산 버튼 클릭 이벤트 리스너
calculateBtn.addEventListener('click', () => {
const baseDateValue = baseDateInput.value;
const targetDateValue = targetDateInput.value;
// 날짜를 선택하지 않은 경우 알림
if (!baseDateValue) {
resultDiv.textContent = '기준 날짜를 선택해주세요.';
resultDiv.style.color = 'red';
return;
}
if (!targetDateValue) {
resultDiv.textContent = '목표 날짜를 선택해주세요.';
resultDiv.style.color = 'red';
return;
}
// 로딩 스피너 표시 및 결과 숨기기
loadingSpinner.style.display = 'block';
resultDiv.textContent = ''; // 이전 결과 지우기
resultDiv.style.color = '#1f2937'; // 기본 글자색으로 복원
// 비동기 작업 시뮬레이션 (UI 반응성 보여주기 위함)
setTimeout(() => {
const baseDate = new Date(baseDateValue);
const targetDate = new Date(targetDateValue);
// 시간, 분, 초는 0으로 설정하여 날짜만 비교
baseDate.setHours(0, 0, 0, 0);
targetDate.setHours(0, 0, 0, 0);
const timeDiff = targetDate.getTime() - baseDate.getTime();
const dayDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)); // 밀리초를 일로 변환
let resultText = '';
const formattedBaseDate = baseDate.toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' });
const formattedTargetDate = targetDate.toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' });
if (dayDiff === 0) {
resultText = `기준일(${formattedBaseDate})과 목표일(${formattedTargetDate})은 동일한 날짜입니다.`;
} else if (dayDiff > 0) {
resultText = `기준일(${formattedBaseDate})로부터 목표일(${formattedTargetDate})까지 D-${dayDiff} (${dayDiff}일 남았습니다.)`;
} else {
const pastDays = Math.abs(dayDiff);
resultText = `기준일(${formattedBaseDate})로부터 목표일(${formattedTargetDate})까지 D+${pastDays} (${pastDays}일 지났습니다.)`;
}
resultDiv.textContent = resultText;
loadingSpinner.style.display = 'none'; // 로딩 스피너 숨기기
}, 500); // 0.5초 지연
});
</script>
</body>
</html>
이 디데이 계산기가 여러분의 소중한 날들을 계획하고 기억하는 데 작은 도움이 되었으면 좋겠어요. 유용하게 사용하시고, 매일매일 설렘 가득한 하루 보내세요! 😊
반응형