AI웹페이지코딩

2023년 11월 달력 코드

홈페이지스 블로그 2023. 11. 5. 18:40

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>

 

이 코드를 실행하면 다음과 같이 나옵니다.