찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >월별 달력 웹사이트 구축

월별 달력 웹사이트 구축

王林
王林원래의
2024-08-27 18:01:18592검색

Build a Month Calendar Website

소개

안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 월 달력을 공유하게 되어 기쁩니다. 이 프로젝트는 JavaScript로 기능적이고 시각적으로 매력적인 달력을 만들고자 하는 모든 사람에게 적합합니다. 웹사이트에 캘린더 기능을 추가하는 데 관심이 있거나 단순히 JavaScript 기술을 향상시키고 싶은 경우 이 프로젝트는 귀하의 포트폴리오에 귀중한 추가 자료가 될 것입니다.

프로젝트 개요

월 달력은 이번 달을 표시하고 오늘 날짜를 강조 표시하며 요일을 정확하게 정렬하는 웹 기반 애플리케이션입니다. 이 프로젝트는 HTML 및 CSS로 구축된 세련되고 반응성이 뛰어난 인터페이스와 결합된 JavaScript를 사용하여 달력을 동적으로 생성하는 방법을 보여줍니다.

특징

  • 동적 월 표시: 현재 월과 연도를 자동으로 표시합니다.
  • 현재 날짜 강조: 오늘 날짜를 강조하여 쉽게 알아볼 수 있습니다.
  • 정확한 요일 레이아웃: 요일이 월에 따라 올바르게 정렬됩니다.

사용된 기술

  • HTML: 월별 달력의 구조를 제공합니다.
  • CSS: 달력의 스타일을 지정하여 시각적으로 매력적이고 반응성이 뛰어나도록 합니다.
  • JavaScript: 날짜 계산, 현재 날짜 강조 표시 등 달력 생성을 위한 로직을 처리합니다.

프로젝트 구조

프로젝트 구조 개요는 다음과 같습니다.

Month-Calendar/
├── index.html
├── style.css
└── script.js
  • index.html: 월 달력의 HTML 구조를 포함합니다.
  • style.css: CSS 스타일을 포함하여 현대적이고 반응이 빠른 디자인을 만듭니다.
  • script.js: 달력 생성 기능을 관리합니다.

설치

프로젝트를 시작하려면 다음 단계를 따르세요.

  1. 저장소 복제:

    git clone https://github.com/abhishekgurjar-in/Month-Calendar.git

  2. 프로젝트 디렉토리 열기:

    cd Month-Calendar

  3. 프로젝트 실행:

    • 웹 브라우저에서 index.html 파일을 열어 월별 달력을 확인하세요.

용법

  1. 웹사이트를 엽니다 웹 브라우저에서
  2. 이번 달을 보세요 오늘 날짜가 강조표시되어 있습니다.
  3. 날짜를 탐색하여 한 달 전체의 레이아웃을 확인하세요.

코드 설명

HTML

index.html 파일은 월 표시 및 날짜의 그리드 레이아웃을 포함하여 월 달력의 구조를 정의합니다. 다음은 일부 내용입니다.

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    acd8feeb3a0ea7477b979779de32785a
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Month Calendar6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
      924ff17625d603f964501dd897c96cc6
        4a249f0d628e2318394fd9b75b4636b1Month Calendar473f0a7621bec819994bb5020d29372a
      16b28748ea4df4d9c2150843fecfba68
      6a0cba8356a55c4a6e47746d431e6421
        418883615a2e79b9926c86666863ce0d
          5f41073e18caf0aa09116baf33d01f47
            4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a
            e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
        16b28748ea4df4d9c2150843fecfba68
        639769261d891863793f213a2da06288
          dc6dce4a544fdca2df29d5ac0ea9906bMon16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906bTue16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906bWed16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906bThu16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906bFri16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906bSat16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906bSun16b28748ea4df4d9c2150843fecfba68
        16b28748ea4df4d9c2150843fecfba68
        97a12517d2546b2575274c1d8a6e171e16b28748ea4df4d9c2150843fecfba68
      16b28748ea4df4d9c2150843fecfba68
      ffd6ba4147bda351239915f463e46e38
        e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

style.css 파일은 월 달력의 스타일을 지정하여 매력적이고 반응성이 뛰어납니다. 다음은 몇 가지 주요 스타일입니다.

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: salmon;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.header {
  margin: 20px;
  color: white;
  text-align: center;
}

.calendar {
  background-color: black;
  color: lightgray;
  width: 450px;
  height: 520px;
  border-radius: 10px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}

.month {
  width: 100%;
  height: 120px;
  background-color: lightseagreen;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 10px 10px 0 0;
}

.month h1 {
  font-size: 30px;
  font-weight: 400;
  text-transform: uppercase;
}

.month p {
  font-size: 16px;
}

.weekdays {
  width: 100%;
  height: 50px;
  display: flex;
}

.weekdays div {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.days {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 2px;
}

.days div {
  font-size: 14px;
  margin: 3px;
  width: 57.5px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.days div:hover:not(.empty) {
  border: 2px solid gray;
  cursor: pointer;
}

.today {
  background-color: lightseagreen;
}

.footer {
  margin-top: 70px;
  color: white;
  text-align: center;
}

자바스크립트

script.js 파일에는 달력을 생성하고 현재 날짜를 강조 표시하는 로직이 포함되어 있습니다. 다음은 일부 내용입니다.

const monthEl = document.querySelector(".date h1");
const fullDateEl = document.querySelector(".date p");
const daysEl = document.querySelector(".days");

const monthInx = new Date().getMonth();
const lastDay = new Date(new Date().getFullYear(), monthInx + 1, 0).getDate();
const firstDay = new Date(new Date().getFullYear(), monthInx, 1).getDay() - 1;

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

monthEl.innerText = months[monthInx];
fullDateEl.innerText = new Date().toDateString();

let days = "";

for (let i = firstDay; i > 0; i--) {
  days += `edfd5fc8d5ee204ac4dfe03b945f3c3916b28748ea4df4d9c2150843fecfba68`;
}
for (let i = 1; i 67a68beefb344083e30784f1b3a9b000${i}16b28748ea4df4d9c2150843fecfba68`;
  } else {
    days += `dc6dce4a544fdca2df29d5ac0ea9906b${i}16b28748ea4df4d9c2150843fecfba68`;
  }
}

daysEl.innerHTML = days;

라이브 데모

월 달력 프로젝트의 라이브 데모를 여기에서 확인하실 수 있습니다.

결론

월 달력을 만드는 것은 프론트엔드 개발 기술과 실용적인 JavaScript 기능을 결합할 수 있게 해주는 즐거운 프로젝트였습니다. 이 도구는 웹사이트에 달력 날짜를 표시하는 데 유용하며 웹 개발 프로젝트에 큰 도움이 될 수 있습니다. 여러분도 저만큼 도움이 되길 바랍니다. 즐거운 코딩하세요!

크레딧

이 프로젝트는 JavaScript 기술을 향상하고 기능적인 웹 도구를 만들기 위한 여정의 일환으로 개발되었습니다.

작가

  • 아비셰크 구자르
    • GitHub 프로필

위 내용은 월별 달력 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html for date Calendar Directory using Interface JS this display github
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：대출 계산기 웹사이트 구축다음 기사：대출 계산기 웹사이트 구축

관련 기사

더보기