목차
오늘 달 모양 계산해서 이번 달 달 모양 변화를 표로 보여주는 자바스크립트 프로그램 짜기
천체 관측은 많은 사람들에게 흥미로운 취미 활동 중 하나입니다. 그중에서도 달의 변화는 비교적 쉽게 관찰할 수 있어 많은 사람들이 즐깁니다. 이번 포스트에서는 자바스크립트를 이용해 오늘의 달 모양을 계산하고, 이번 달 동안의 달 모양 변화를 표로 보여주는 프로그램을 작성하는 방법을 다뤄보겠습니다.
달 모양 계산의 기초
달의 모양은 주로 음력(음력 날짜)에 따라 변합니다. 달 모양은 신월, 초승달, 상현달, 보름달, 하현달, 그믐달로 구분됩니다. 이를 계산하기 위해서는 음력 날짜와 달의 위상 정보를 알아야 합니다.
필요한 라이브러리
자바스크립트를 이용해 달의 모양을 계산하기 위해서는 외부 라이브러리를 사용하는 것이 편리합니다. 여기서는 lunarphase-js 라이브러리를 사용해 보겠습니다. 이 라이브러리는 달의 위상을 계산하는 기능을 제공합니다.
npm install lunarphase-js자바스크립트 프로그램 작성
이제 본격적으로 프로그램을 작성해보겠습니다.
const lunar = require('lunarphase-js');
const moment = require('moment');
// 오늘 날짜
const today = moment();
console.log(`오늘 날짜: ${today.format('YYYY-MM-DD')}`);
// 이번 달의 첫 날과 마지막 날
const startOfMonth = today.startOf('month');
const endOfMonth = today.endOf('month');
console.log(`이번 달 시작: ${startOfMonth.format('YYYY-MM-DD')}`);
console.log(`이번 달 종료: ${endOfMonth.format('YYYY-MM-DD')}`);
// 이번 달 동안의 달 모양 변화 저장할 배열
let moonPhases = [];
// 이번 달 모든 날짜에 대해 달의 위상 계산
for (let date = startOfMonth.clone(); date.isBefore(endOfMonth); date.add(1, 'days')) {
const phase = lunar.getPhase(date.toDate());
moonPhases.push({
date: date.format('YYYY-MM-DD'),
phase: phase.name
});
}
// 달 모양 변화 출력
console.log('이번 달 달 모양 변화:');
console.table(moonPhases);프로그램 설명
- 날짜와 라이브러리 설정:
moment라이브러리를 이용해 오늘 날짜를 가져오고, 이번 달의 첫날과 마지막 날을 계산합니다. - 달 모양 계산:
lunarphase-js라이브러리를 이용해 각 날짜별 달의 위상을 계산합니다. - 결과 출력: 이번 달의 모든 날짜에 대해 달의 모양을 표 형식으로 출력합니다.
실행 결과
위의 프로그램을 실행하면 이번 달 동안의 달 모양 변화를 날짜별로 알 수 있습니다. 예를 들어, 2024-08-01부터 2024-08-31까지의 달 모양 변화를 표로 확인할 수 있습니다.
| Phase | Northern Hemisphere(북반구 달모양 이모지) | Southern Hemisphere(남반구 달모양 이모지) |
| New | 🌑 | 🌑 |
| Waxing Crescent | 🌒 | 🌘 |
| First Quarter | 🌓 | 🌗 |
| Waxing Gibbous | 🌔 | 🌖 |
| Full | 🌕 | 🌕 |
| Waning Gibbous | 🌖 | 🌔 |
| Last Quarter | 🌗 | 🌓 |
| Waning Crescent | 🌘 | 🌒 |
달 모양 출력
lunarphase-js를 이용하면, emoji를 출력할 수 있습니다. 하지만, 이모지이기 때문에 마음에 안들 수도 있으므로, 이미지를 이용해 보도록 하겠습니다. 급하게 쓰느라 별도로 작성됐지만, 통합하는 것은 어렵지 않을 것입니다.
이미지를 통으로 사용하고 각 날짜에 맞는 달 모양을 background-position 속성을 이용해 조정하는 방법으로 프로그램을 수정하겠습니다. 여기서는 각 달 모양의 위치를 계산하여 해당 날짜 셀의 배경 이미지 위치를 설정합니다.
1. HTML 코드 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>달 모양 달력</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
width: 14.28%;
height: 100px;
border: 1px solid #000;
text-align: center;
vertical-align: middle;
background-image: url('moon_phases.png'); /* 전체 이미지 설정 */
background-size: 300%; /* 이미지 사이즈 조정 */
}
</style>
</head>
<body>
<h2>이번 달 달 모양 달력</h2>
<table id="moon-calendar">
<thead>
<tr>
<th>일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th>토</th>
</tr>
</thead>
<tbody id="calendar-body">
<!-- 날짜를 JavaScript로 추가합니다. -->
</tbody>
</table>
<script src="moment.min.js"></script>
<script src="lunarphase-js.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const totalPhases = 30; // 이미지에 있는 총 달 모양 수
const moonImageWidth = 100; // 각 달 모양의 가로 크기 (픽셀)
const moonImageHeight = 100; // 각 달 모양의 세로 크기 (픽셀)
const today = moment();
const startOfMonth = today.clone().startOf('month');
const endOfMonth = today.clone().endOf('month');
const calendarBody = document.getElementById('calendar-body');
// 첫 주의 공백 셀 추가
let row = document.createElement('tr');
for (let i = 0; i < startOfMonth.day(); i++) {
let cell = document.createElement('td');
row.appendChild(cell);
}
// 날짜와 달 모양 추가
for (let date = startOfMonth.clone(); date.isBefore(endOfMonth); date.add(1, 'days')) {
if (date.day() === 0 && date !== startOfMonth) {
calendarBody.appendChild(row);
row = document.createElement('tr');
}
let cell = document.createElement('td');
cell.textContent = date.date();
// 달의 위상을 계산하여 background-position 설정
const phase = lunar.getPhase(date.toDate());
const phaseIndex = Math.floor(phase.phase * totalPhases);
const backgroundX = (phaseIndex % 6) * -moonImageWidth; // 이미지 가로 6칸 기준
const backgroundY = Math.floor(phaseIndex / 6) * -moonImageHeight; // 이미지 세로 5칸 기준
cell.style.backgroundPosition = `${backgroundX}px ${backgroundY}px`;
row.appendChild(cell);
}
// 마지막 주의 공백 셀 추가
for (let i = endOfMonth.day(); i < 6; i++) {
let cell = document.createElement('td');
row.appendChild(cell);
}
calendarBody.appendChild(row);
});
</script>
</body>
</html>설명
- HTML 및 스타일 설정:
- HTML 테이블을 생성하고, 각 셀에 배경 이미지를 설정합니다.
background-size를 통해 이미지를 확대하거나 축소하여 사용할 수 있습니다.
- 자바스크립트 로직:
- 각 날짜 셀에 맞는 달 모양을
background-position속성을 통해 조정합니다. lunarphase-js라이브러리를 사용하여 날짜별 달의 위상을 계산합니다.- 달 모양 이미지의 위치를 계산하여 각 셀의 배경 이미지 위치를 조정합니다.
- 각 날짜 셀에 맞는 달 모양을
이 코드는 이미지 전체를 사용하여 각 날짜 셀에 맞는 달 모양을 배경 이미지의 위치를 조정하여 표시합니다. 이렇게 하면 각 날짜별로 달 모양이 적절히 표시됩니다.
결론
이번 포스트에서는 자바스크립트를 이용해 달의 모양을 계산하고, 이번 달 동안의 달 모양 변화를 표로 출력하는 프로그램을 작성해 보았습니다. 이를 통해 천체 관측을 좀 더 체계적으로 할 수 있을 것입니다. 자바스크립트와 같은 프로그래밍 언어를 활용하면 다양한 천체 현상을 쉽게 계산하고 시각화할 수 있어, 천문학을 좀 더 흥미롭게 즐길 수 있습니다.
키워드
달 모양 계산, 자바스크립트, lunarphase-js, 천체 관측, 음력, 달의 위상, 천문학, 프로그래밍, 달의 변화, 달 모양 표
'IT 모바일 Gear Up' 카테고리의 다른 글
| Windows Spotlight에서 마음에 드는 배경화면 그림을 저장하는 방법 (0) | 2024.08.11 |
|---|---|
| LG 휘센 에어컨 에러코드 CH05, CH38 (0) | 2024.08.09 |
| HP 프린터 드라이버 다운로드 및 설치 방법 (0) | 2024.08.07 |
| 리눅스/Linux Mattermost https(SSL)로 운영하기 How to setup mattermost via https(SSL) on ubuntu (0) | 2024.08.03 |
| 워드프레스 이미지 한 줄에 여러 개 넣기 - 구텐베르크 편집기 칼럼 활용 (0) | 2024.08.02 |
댓글