개발 여정/FrontEnd

[HTML/CSS] 달력 만들기

calm-lee 2021. 9. 9. 18:34

문제 :

html 과 css 를 아래와 같이 2023년 5월 달력을 만들어 보세요.

휴일은 빨간색으로 표시하세요.

오늘 날짜에 배경색을 다르게 만드세요.

날짜위에 마우스를 올렸을때 배경색을 변경하세요.

 

HTML

<!DOCTYPE html>

<html>

    <head>

        <title>2023년 5월</title>

        <meta charset="utf-8">

        <link href="style.css" rel="stylesheet">

    </head>

    <body>

        <table id=calendar>

            <span class="year">2023</span>

            <span class="month">5</span>

            <thead>

                <th class="holiday">Sunday</th>

                <th>Monday</th>

                <th>Tuesday</th>

                <th>Wednesday</th>

                <th>Thursday</th>

                <th>Friday</th>

                <th>Saturday</th>

            </thead>

            <tbody>

                <tr>

                    <td class="holiday">1 근로자의 날</td>

                    <td>2</td>

                    <td>3</td>

                    <td>4</td>

                    <td class="holiday">5 어린이날</td>

                    <td>6</td>

                    <td>7</td>

                </tr>

                <tr>

                    <td class="holiday">8 어버이날</td>

                    <td>9</td>

                    <td>10</td>

                    <td>11</td>

                    <td>12</td>

                    <td>13</td>

                    <td>14</td>

                </tr>

                <tr>

                    <td class="holiday">15 스승의 날</td>

                    <td>16</td>

                    <td>17</td>

                    <td id="today">18 today</td>

                    <td>19</td>

                    <td>20</td>

                    <td>21</td>

                </tr>

                <tr>

                    <td class="holiday">22</td>

                    <td>23</td>

                    <td>24</td>

                    <td>25</td>

                    <td>26</td>

                    <td class="holiday">27 부처님 오신 날</td>

                    <td>28</td>

                </tr>

                <tr>

                    <td class="holiday">29</td>

                    <td>30</td>

                    <td>31</td>

                    <td colspan="4"></td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

 

CSS문

table, th, td {border: 1px solid black; border-collapse: collapse;}

td:hover{background-color: lightblue;}

th{font-weight: bold; height: 50px;}

td{text-align: left; vertical-align: text-top; width: 200px; height: 100px; padding: 10px}

.holiday{color: red;}

#today{font-weight: bold; background-color: bisque;}

.year{font-size: 30px;}

.month{font-size: 50px; font-weight: bold;}