-
[HTML/CSS] 달력 만들기개발 여정/FrontEnd 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;}'개발 여정 > FrontEnd' 카테고리의 다른 글
[BootStrap] 의류 쇼핑몰 메인 페이지 만들기 (0) 2021.09.09 [BootStrap] 택배회사 메인 페이지 만들기 (0) 2021.09.09 [BootStrap] 레이아웃 구조 (2) :: d-flex 이용해서 header, section, footer 나누기 (0) 2021.09.09 [BooStrap] 레이아웃 구조 (1) :: d-flex 이용해서 header, footer 나누기 (0) 2021.09.09 [HTML/CSS] 가계부 만들기 (0) 2021.09.09