answer-code/2-3.html at main · Code-with/answer-code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            table{
                width: 500px;
                height:500px;
                margin:100px auto;
                border-spacing: 0;
            }
            .col {
                background-color: paleturquoise;
            }
            td {
                border: 1px solid black;
                text-align:center;
            }
            .sun {
                color: red;
            }
            td:hover {
                color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <table class="tg">
            <thead>
              <tr>
                <th colspan="7">7월</th>
              </tr>
            </thead>
            <tbody>
              <tr class="col">
                <td>일</td>
                <td>월</td>
                <td>화</td>
                <td>수</td>
                <td>목</td>
                <td>금</td>
                <td>토</td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td>2</td>
                <td class="sat">3</td>
              </tr>
              <tr>
                <td class="sun">4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td class="sat">10</td>
              </tr>
              <tr>
                <td class="sun">11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td class="sat">17</td>
              </tr>
              <tr>
                <td class="sun">18</td>
                <td>19</td>
                <td>20</td>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td class="sat">24</td>
              </tr>
              <tr>
                <td class="sun">25</td>
                <td>26</td>
                <td>27</td>
                <td>28</td>
                <td>29</td>
                <td>30</td>
                <td class="sat">31</td>
              </tr>
            </tbody>
            </table>

            <script>
                var obj = document.querySelectorAll('.sat');
                for (let i = 0; i < obj.length ; i++) {
                   obj[i].style.color="blue";
               }
           </script>
    </body>
</html>