.responsive-container {
max-width: 100%;
padding: 2rem;
background: #1a1f2e;
box-sizing: border-box;
}
.responsive-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem;
}
.responsive-box {
flex: 1;
background: #2a3142;
padding: 2rem;
border-radius: 0.5rem;
text-align: center;
}
.responsive-box h3 {
font-size: 1.8rem;
font-weight: 600;
color: #ffd700;
margin-bottom: 1rem;
text-align: center;
}
/* 시간 표시 컴포넌트 통일 */
.time-display {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
flex-wrap: nowrap;
white-space: nowrap;
}
.time-unit {
display: inline-flex;
align-items: baseline;
}
.time-unit .number {
font-size: 2.5rem;
font-family: monospace;
color: white;
}
.time-unit .label {
font-size: 1.5rem;
font-family: monospace;
color: white;
margin-left: 0.2rem;
}
/* 태블릿 및 모바일 환경 */
@media (max-width: 768px) {
.responsive-container {
padding: 1rem;
}
.responsive-row {
flex-direction: column;
}
.responsive-box {
padding: 1rem;
}
.time-display {
gap: 0.5rem;
flex-wrap: wrap;
white-space: normal;
}
.time-unit .number {
font-size: 1.8rem;
}
.time-unit .label {
font-size: 1.2rem;
}
}
@media (max-width: 480px) {
.time-unit .number {
font-size: 1.5rem;
}
.time-unit .label {
font-size: 1rem;
}
}
금산군: 1914년 3월 1일부, 폐합 (옛 금산군과 진산군)
ㅣ
임진왜란 최초 육지 승전지, 이치대첩지
ㅣ
한국 천주교 첫 순교 진원지, 진산성지
ㅣ
세계 인삼수도, 인삼종주지
/* 시간 단위를 통일된 포맷으로 생성하는 함수 */
function createTimeHTML(years, months, days, hours, minutes) {
return `
${String(years).padStart(2, '0')}
년
${String(months).padStart(2, '0')}
개월
${String(days).padStart(2, '0')}
일
${String(hours).padStart(2, '0')}
시
${String(minutes).padStart(2, '0')}
분
`;
}
function updateTimes() {
const now = new Date();
// 금산군 탄생 시점: 1914년 3월 1일
const geumsanStart = new Date('1914-03-01');
// 현재 시각 업데이트
const currentHTML = createTimeHTML(
now.getFullYear(),
now.getMonth() + 1,
now.getDate(),
now.getHours(),
now.getMinutes()
);
document.getElementById('currentTime').innerHTML = currentHTML;
// 경과 시간 계산
const timeDiff = now - geumsanStart;
const minutesDiff = Math.floor(timeDiff / (1000 * 60));
const yearsDiff = Math.floor(minutesDiff / 525600);
const monthsDiff = Math.floor((minutesDiff % 525600) / 43800);
const daysDiff = Math.floor((minutesDiff % 43800) / 1440);
const hoursDiff = Math.floor((minutesDiff % 1440) / 60);
const remainingMinutes = minutesDiff % 60;
const geumsanHTML = createTimeHTML(
yearsDiff,
monthsDiff,
daysDiff,
hoursDiff,
remainingMinutes
);
document.getElementById('timeSinceGeumsan').innerHTML = geumsanHTML;
}
updateTimes();
setInterval(updateTimes, 1000);
