likelion-ssu · sunwin1029 · May 12, 2025 · May 12, 2025 · May 12, 2025 · May 13, 2025
diff --git a/week02/calendar.css b/week02/calendar.css
@@ -0,0 +1,45 @@
+#calendar_main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.calendar_header{
+    display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 25px;
+  margin-bottom: 20px;
+}
+
+body {
+  font-family: 'Pretendard';
+  display: flex;
+  justify-content: center; 
+  align-items: center;     
+  height: 100vh;          
+  margin: 0;               
+}
+
+
+
+td {
+    border: 1px solid #ccc;
+    text-align: center;
+    width: 40px;
+    height: 40px;
+    padding: 5px;
+}
+
+table {
+    border-collapse: collapse;
+}
+
+tr:not(.day_indicator) td:nth-child(7) {
+  color: blue;
+}
+
+tr:not(.day_indicator) td:nth-child(1) {
+  color: red;
+}
+
diff --git a/week02/calendar.html b/week02/calendar.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Heaseung_calendar</title>
+    <link rel="stylesheet" href="calendar.css">
+    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
+</head>
+<body>
+    <div id="calendar_main">
+        <section class="calendar_header">
+            <button id="prev_month"></button>
+            <div id="year_month"></div>
+            <button id="next_month"></button>
+        </section>
+
+        <section>
+            <table>
+                <tr class="day_indicator">
+                    <td>일</td>
+                    <td>월</td>
+                    <td>화</td>
+                    <td>수</td>
+                    <td>목</td>
+                    <td>금</td>
+                    <td>토</td>
+                </tr>
+                <tr id="week01"></tr>
+                <tr id="week02"></tr>
+                <tr id="week03"></tr>
+                <tr id="week04"></tr>
+                <tr id="week05"></tr>
+                <tr></tr id="week06">
+            </table>
+        </section>
+    </div>
+
+
+    <script src="calendar.js"></script>
+</body>
+</html>
diff --git a/week02/calendar.js b/week02/calendar.js
@@ -0,0 +1,64 @@
+const date = new Date();
+const year = date.getFullYear();
+const month = date.getMonth();
+
+let tmp_date = new Date();
+let tmp_year = tmp_date.getFullYear();
+let tmp_month = tmp_date.getMonth();
+
+let prev_button = document.getElementById(`prev_month`);
+let next_button = document.getElementById(`next_month`);
+
+prev_button.textContent = '<';
+next_button.textContent = '>';
+
+prev_button.addEventListener('click', () => {
+    tmp_month--;
+    if(tmp_month < 0) {
+        tmp_month = 11;
+        tmp_year--;
+    }
+    update_calendar();
+})
+
+next_button.addEventListener('click', () => {
+    tmp_month++;
+    if(tmp_month > 11) {
+        tmp_month = 0;
+        tmp_year++;
+    }
+    update_calendar();
+})
+
+
+
+make_calendar(year, month);
+
+function make_calendar(year, month) {
+    document.getElementById(`year_month`).textContent = `${year}년 ${month + 1}월`;
+    const first_day = new Date(year, month, 1).getDay();
+    const last_date = new Date(year, month + 1, 0).getDate();
+
+    let date = 1;
+
+    for(let week = 1; week < 7; week++) {
+        const week_part = document.getElementById(`week0${week}`);
+        if(week_part == null) continue;
+        week_part.innerHTML = ``;
+
+        for(let day = 0; day < 7; day++) {
+            if(week === 1 && day < first_day) {
+                week_part.innerHTML += `<td></td>`;
+            } else if (date > last_date) {
+                week_part.innerHTML += `<td></td>`;
+            } else {
+                week_part.innerHTML += `<td>${date}</td>`;
+                date++;
+            }
+        }
+    }
+}
+
+function update_calendar() {
+    make_calendar(tmp_year, tmp_month);
+}
diff --git a/week02/image/home_button.png b/week02/image/home_button.png
diff --git a/week02/image/menu_button.png b/week02/image/menu_button.png
diff --git a/week02/image/microphone_icon.png b/week02/image/microphone_icon.png
diff --git a/week02/image/music_button.png b/week02/image/music_button.png
diff --git a/week02/image/my_page_button.png b/week02/image/my_page_button.png
diff --git a/week02/image/notification_icon.png b/week02/image/notification_icon.png
diff --git a/week02/image/profile_icon.png b/week02/image/profile_icon.png
diff --git a/week02/image/search_button.png b/week02/image/search_button.png
diff --git a/week02/image/shorts_button.png b/week02/image/shorts_button.png
diff --git a/week02/image/subscribe_button.png b/week02/image/subscribe_button.png
diff --git a/week02/image/video01.png b/week02/image/video01.png
diff --git a/week02/image/video02.png b/week02/image/video02.png
diff --git a/week02/image/video03.png b/week02/image/video03.png
diff --git a/week02/image/video04.png b/week02/image/video04.png
diff --git a/week02/image/video05.png b/week02/image/video05.png
diff --git a/week02/image/youtube_button.png b/week02/image/youtube_button.png