본문 바로가기
HTML/CSS

[HTML/CSS] Tailwind로 캘린더 만들기

by teamnova 2023. 12. 4.
728x90

안녕하세요 이번시간에는 Tailwind를 사용하여 캘린더를 만들어 보겠습니다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>October 2023 Calendar with TailwindCSS</title>
    <!-- Tailwind CSS 스타일 시트 링크 -->
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.17/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>

  <body class="bg-gray-200 py-20">
    <div class="max-w-4xl mx-auto p-4">
      <!-- October -->
      <div class="text-center mb-6 text-2xl font-medium">October 2023</div>
      <div class="grid grid-cols-7 gap-0">
        <!-- Weekday headers (요일 헤더) -->
        <div class="text-center text-sm text-gray-500 bg-gray-300 py-1 border">
          Sun
        </div>
        <div class="text-center text-sm text-gray-500 bg-gray-300 py-1 border">
          Mon
        </div>
        <div class="text-center text-sm text-gray-500 bg-gray-300 py-1 border">
          Tue
        </div>
        <div class="text-center text-sm text-gray-500 bg-gray-300 py-1 border">
          Wed
        </div>
        <div class="text-center text-sm text-gray-500 bg-gray-300 py-1 border">
          Thu
        </div>
        <div class="text-center text-sm text-gray-500 bg-gray-300 py-1 border">
          Fri
        </div>
        <div class="text-center text-sm text-gray-500 bg-gray-300 py-1 border">
          Sat
        </div>
        <!-- Dates for October will be inserted by JavaScript (10월의 날짜는 JavaScript로 삽입됩니다.) -->
      </div>
    </div>

    <script>
      // JavaScript로 그리드 엘리먼트를 선택합니다.
      const calendarGrid = document.querySelector(".grid");

      // 2023년 10월 1일은 일요일이므로 시작 요일을 0으로 설정합니다.
      const startDay = 0;
      const totalDaysInOctober = 31; // 10월의 총 날짜 수

      // 10월의 날짜를 생성하고 그리드에 추가합니다.
      for (let i = 1; i <= totalDaysInOctober; i++) {
        const dateDiv = document.createElement("div");
        dateDiv.className = "relative h-20";

        // 날짜를 표시할 스팬 엘리먼트를 생성하고 추가합니다.
        const textSpan = document.createElement("span");
        textSpan.className = "absolute top-1 right-2";
        textSpan.innerText = i;
        dateDiv.appendChild(textSpan);
        calendarGrid.appendChild(dateDiv);
      }
    </script>
  </body>
</html>