2023년 11월 달력 코드입니다.
실제 달력과 요일과 날짜가 맞지 않는데 HTML을 학습한다는 생각으로 날짜와 요일을 맞춰서 코딩 연습을 해보시면 좋을 것 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2023년 11월 달력</title>
<style>
body {
font-family: Arial, sans-serif;
}
table {
width: 80%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
text-align: center;
padding: 0; /* 내부 패딩 제거 */
}
th {
background-color: #ccc;
}
td {
width: 14.2857%;
height: 100px;
position: relative;
}
.sunday {
background-color: red;
color: white; /* 일요일 글자색 변경 */
}
.saturday {
background-color: blue;
color: white; /* 토요일 글자색 변경 */
}
.date {
position: absolute;
top: 5px;
left: 5px;
}
</style>
</head>
<body>
<h1>2023년 11월 달력</h1>
<table>
<tr>
<th class="sunday">일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th class="saturday">토</th>
</tr>
<tr>
<td class="sunday"><div class="date">31</div></td>
<td><div class="date">1</div></td>
<td><div class="date">2</div></td>
<td><div class="date">3</div></td>
<td><div class="date">4</div></td>
<td><div class="date">5</div></td>
<td class="saturday"><div class="date">6</div></td>
</tr>
<tr>
<td class="sunday"><div class="date">7</div></td>
<td><div class="date">8</div></td>
<td><div class="date">9</div></td>
<td><div class="date">10</div></td>
<td><div class="date">11</div></td>
<td><div class="date">12</div></td>
<td class="saturday"><div class="date">13</div></td>
</tr>
<tr>
<td class="sunday"><div class="date">14</div></td>
<td><div class="date">15</div></td>
<td><div class="date">16</div></td>
<td><div class="date">17</div></td>
<td><div class="date">18</div></td>
<td><div class="date">19</div></td>
<td class="saturday"><div class="date">20</div></td>
</tr>
<tr>
<td class="sunday"><div class="date">21</div></td>
<td><div class="date">22</div></td>
<td><div class="date">23</div></td>
<td><div class="date">24</div></td>
<td><div class="date">25</div></td>
<td><div class="date">26</div></td>
<td class="saturday"><div class="date">27</div></td>
</tr>
<tr>
<td class="sunday"><div class="date">28</div></td>
<td><div class="date">29</div></td>
<td><div class="date">30</div></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
이 코드를 실행하면 다음과 같이 나옵니다.
'AI웹페이지코딩' 카테고리의 다른 글
| readdy ai 홈페이지 AI 코딩 (0) | 2025.03.14 |
|---|---|
| url만 입력하면 동영상 만들어 주는 사이트 (1) | 2025.02.22 |
| Framer.com AI가 만들어 주는 홈페이지 (0) | 2024.03.05 |
| 스톱워치 HTML 코드 (0) | 2023.11.05 |
| 간단한 계산기 코드 (0) | 2023.11.05 |
