안녕하세요 이번시간에는 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>
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] Bowser 라이브러리를 통해 브라우저 이름과 버전 정보 가져오기 (0) | 2023.12.29 |
|---|---|
| [HTML/CSS] Tailwind로 이미지에 그림자 및 회전 효과를 적용할 수 있는 카드뷰 만들기 (0) | 2023.12.20 |
| [HTML/CSS] Tailwind로 사용자 선택 이미지 카드 뷰어 만들기 (0) | 2023.12.01 |
| [HTML/CSS]카드 컴포넌트 캐러셀 구현 (0) | 2023.11.26 |
| [HTML/CSS]간단한 메모장 만들기 (0) | 2023.11.16 |
