URL https://koreanhamster.github.io/calendar/4:5/index.html
소스코드 https://github.com/Koreanhamster/calendar
HTML
|
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calendar</title>
<link rel="stylesheet" href="/calendar.css" />
</head>
<body>
<h1>2022</h1>
<main class="wrapper">
<table class="April">
<caption>
4
</caption>
<tr>
<th scope="col">Sun</th>
<th scope="col">Mon</th>
<th scope="col">Tue</th>
<th scope="col">Wed</th>
<th scope="col">Thur</th>
<th scope="col">Fri</th>
<th scope="col">Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table>
<table class="May">
<caption>
5
</caption>
<tr>
<th scope="col">Sun</th>
<th scope="col">Mon</th>
<th scope="col">Tue</th>
<th scope="col">Wed</th>
<th scope="col">Thur</th>
<th scope="col">Fri</th>
<th scope="col">Sat</th>
</tr>
<tr>
<td>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>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Jun">
<caption>
6
</caption>
<tr>
<th scope="col">Sun</th>
<th scope="col">Mon</th>
<th scope="col">Tue</th>
<th scope="col">Wed</th>
<th scope="col">Thur</th>
<th scope="col">Fri</th>
<th scope="col">Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="holiday">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
</tr>
</table>
</main>
</body>
</html>
|
cs |
CSS
|
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
|
@import url("https://fonts.googleapis.com/css2?family=Grape+Nuts&family=Roboto:ital,wght@0,300;0,400;1,300&display=swap");
.holiday {
color: red;
}
body {
background: url(background.avif);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
h1 {
text-align: center;
font-family: grape nuts;
margin-top: 50px;
font-size: 50px;
color: azure;
}
caption {
margin-bottom: 15px;
font-size: 25px;
}
td:nth-child(1),
th:nth-child(1) {
color: red;
}
.wrapper {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
font-family: grape nuts;
}
table {
margin-right: 20px;
color: azure;
}
|
cs |
부딪힌 문제점
문제 :
일요일에 해당하는 열만 빨간색으로 색깔을 변경하고싶어서, <colgroup>을 만들어 안에 <col span="1"> 을 줘서 일요일 열을 지정해주고 CSS로 color="red" 로 색깔을 지정해줬는데 먹히지 않았다.
왜 안되었나? :
table에 계층이 있는데 각 cell은 row(tr)의 자식이지 column의 자식이 아니라 column의 속성을 상속받지 않는다.
지정한 열에는 border, background, width, visibility만 스타일링을 해줄 수 있다.
https://www.w3.org/TR/CSS2/tables.html#columns W3C의 설명 참고
해결책 :
psudo class를 사용해서 td와 th의 첫 번 째 자식들을 선택해준 뒤
스타일링을 해 주었다.
|
1
2
3
4
|
td:nth-child(1),
th:nth-child(1) {
color: red;
}
|
cs |
나머지 예외적인 holiday에 대해서만 따로 class를 줘서 색깔을 변경했다.
|
1
2
3
|
.holiday {
color: red;
}
|
cs |
'Front-End Developer > Project' 카테고리의 다른 글
| 오직 Tailwind만을 사용해서 이력서 만들어보기 challenge (0) | 2022.04.27 |
|---|---|
| Vending machine(콜라 자판기 만들기) (0) | 2022.04.26 |
| 미디어쿼리를 이용한 반응형 웹 구현하기 (0) | 2022.04.21 |
| 위니브 로그인페이지 클론코딩(멋쟁이사자처럼 지원과제) (0) | 2022.04.14 |
| CSS로 캐릭터 만들기 - 멋사 WEB 캐릭터경진대회 우수상 수상 (0) | 2022.04.13 |