달력 만들기 - table

Park.D·2023년 4월 21일

table태그를 활용해 달력을 만들어보자

1. 우선 월, 주, 요일 등 내용의 영역을 만들자

div>
    <table border="2" width="100" align="center">
        <tr>
            <th>4월</th>
        </tr>
        <ahead>    
        <tr>
               <th>요일</th>
               <th>일</th>
               <th>월</th>
               <th>화</th>
               <th>수</th>
               <th>목</th>
               <th>금</th>
               <th>토</th>
            </tr>
        </ahead>
        <tbody>
            <tr>
            <th>1주차</th>
            <td>26</td>
            <td>27</td>
            <td>28</td>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td>1</td>
         </tr>
        <tr>
            <th>2주차</th>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
         <tr>
              <tr>
            <th>3주차</th>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
         <tr>
              <tr>
            <th>4주차</th>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
            <td>21</td>
            <td>22</td>
         <tr>
             <tr>
            <th>5주차</th>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
            <td>28</td>
            <td>29</td>
         <tr>
              <tr>
            <th>6주차</th>
            <td>30</td>
            <td>1
                  </td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
         <tr>
        </tbody>
    </table>
</div>

칸이 세로로 길게 나오는 것은 table 사이즈가 100이고 그 안 10칸이 분배되었기 때문이다

2. 색과 해더 부분의 셀을 합치자

2-1. 4월 헤더 부분 셀 합치고 색 넣기

<tr bgcolor="black" align ="center">
<th height="100" colspan = "10" style="color:white;font-size:2rem">4월</th>

2-2. 토요일, 일요일 행은 각 파란색과 빨간색으로 수정

<th style="color:red">일</th>    // 해당 style을 일요일의 행에 있는 숫자에 모두 넣어주자
<th style="color:blue">토</th>   // 해당 style을 토요일의 행에 있는 숫자에 모두 넣어주자

2-3. 날짜가 지난 날짜 칸은 회색으로 바꾸자

<td style="background-color:lightgray;color:red" >26</td>   //  해당 style을 해당하는 칸에 모두 넣어주자

3. 표의 줄을 하나로 합치고 날짜의 칸 크기와 글자의 조정하자

table {                         // 줄 하나로 합치기
    border-collapse: collapse;
}

table td{                       // padding을 글자에 넣어 위치와
                                   칸 사이즈를 한번에 조정
    padding-top: 70px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:70px;
    text-align: right;
}

만약 여기서 '요일'의 행 사이즈를 조정하고 싶다면 table 안에 colgroup의 width 값을 넣어주면 된다
<colgroup>
  <col width="20" />
</colgroup>

4. 호버 효과를 넣어보자

칸에 마우스 호버 시 마젠타로 색 변경

table td:hover{
    background-color:magenta;
}

4-1. 추가로 21일에 마우스 오버하면 칸이 커지며 과학의 날 링크가 나오게 하고싶다

html의 21일 영역 --!

<td>21
<br>
<a href="https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=과학의날" target="blank">과학의날</a>
</td>

css --!

table a{
    display:none;
}
table td:hover >a{
    display:block;
}