<Table>을 이용하여 달력을 만들어보자!
오늘 배운 <table>을 이용하여 달력을 만들어보았다.
현재 일 수를 하나하나 적어넣는 방식으로 만들었다.
3월 부터 일수를 하나하나 지정하는 것이 너무 불필요한 것처럼 느껴져서 작업하지 않았다.
나중에 JS나 React를 이용하면 훨씬 쉽게 달력을 만들 것 같으니, 테이블을 HTML Tag로 만들 수 있는지에 집중하는 것이 효율적일 듯 하다.
HTML코드
더보기
<!DOCTYPE html>
<html lang="ko">
<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>달력</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header class="header">
<h1>2022</h1>
<div class="word">
<p>Act as if it were impossible to fail</p>
<p>실패가 불가능한 것처럼 행동하라</p>
</div>
</header>
<main class="main">
<table class="jan">
<thead>
<caption>
1
</caption>
<tr>
<th scope="row">SUN</th>
<th scope="row">MON</th>
<th scope="row">TUE</th>
<th scope="row">WED</th>
<th scope="row">THU</th>
<th scope="row">FRI</th>
<th scope="row">SAT</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="feb">
<thead>
<caption>
2
</caption>
<tr>
<th scope="row">SUN</th>
<th scope="row">MON</th>
<th scope="row">TUE</th>
<th scope="row">WED</th>
<th scope="row">THU</th>
<th scope="row">FRI</th>
<th scope="row">SAT</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>`</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="mar">
<thead>
<caption>
3
</caption>
<tr>
<th scope="row">SUN</th>
<th scope="row">MON</th>
<th scope="row">TUE</th>
<th scope="row">WED</th>
<th scope="row">THU</th>
<th scope="row">FRI</th>
<th scope="row">SAT</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="apr">
<thead>
<caption>
4
</caption>
<tr>
<th scope="row">SUN</th>
<th scope="row">MON</th>
<th scope="row">TUE</th>
<th scope="row">WED</th>
<th scope="row">THU</th>
<th scope="row">FRI</th>
<th scope="row">SAT</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="may">
<thead>
<caption>
5
</caption>
<tr>
<th scope="row">SUN</th>
<th scope="row">MON</th>
<th scope="row">TUE</th>
<th scope="row">WED</th>
<th scope="row">THU</th>
<th scope="row">FRI</th>
<th scope="row">SAT</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="jun">
<thead>
<caption>
6
</caption>
<tr>
<th scope="row">SUN</th>
<th scope="row">MON</th>
<th scope="row">TUE</th>
<th scope="row">WED</th>
<th scope="row">THU</th>
<th scope="row">FRI</th>
<th scope="row">SAT</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="jul">
<thead>
<caption>
7
</caption>
<tr>
<th scope="row">SUN</th>
<th scope="row">MON</th>
<th scope="row">TUE</th>
<th scope="row">WED</th>
<th scope="row">THU</th>
<th scope="row">FRI</th>
<th scope="row">SAT</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="aug">
<thead>
<caption>
8
</caption>
<tr>
<th scope="row">SUN</th>
<th scope="row">MON</th>
<th scope="row">TUE</th>
<th scope="row">WED</th>
<th scope="row">THU</th>
<th scope="row">FRI</th>
<th scope="row">SAT</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="sep">
<thead>
<caption>
9
</caption>
<tr>
<th scope="row">SUN</th>
<th scope="row">MON</th>
<th scope="row">TUE</th>
<th scope="row">WED</th>
<th scope="row">THU</th>
<th scope="row">FRI</th>
<th scope="row">SAT</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="oct">
<thead>
<caption>
10
</caption>
<tr>
<th scope="row">SUN</th>
<th scope="row">MON</th>
<th scope="row">TUE</th>
<th scope="row">WED</th>
<th scope="row">THU</th>
<th scope="row">FRI</th>
<th scope="row">SAT</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="nov">
<thead>
<caption>
11
</caption>
<tr>
<th scope="row">SUN</th>
<th scope="row">MON</th>
<th scope="row">TUE</th>
<th scope="row">WED</th>
<th scope="row">THU</th>
<th scope="row">FRI</th>
<th scope="row">SAT</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table class="dec">
<thead>
<caption>
12
</caption>
<tr>
<th scope="row">SUN</th>
<th scope="row">MON</th>
<th scope="row">TUE</th>
<th scope="row">WED</th>
<th scope="row">THU</th>
<th scope="row">FRI</th>
<th scope="row">SAT</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</main>
</body>
</html>CSS코드
더보기
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap");
table {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
height: 400px;
margin: 10px;
border: none;
}
table caption {
font-family: "Noto Sans KR", sans-serif;
font-size: 50px;
}
.header {
width: 1000px;
height: 200px;
margin: 0px auto;
}
.header > h1 {
font-family: "Noto Sans KR", sans-serif;
font-size: 150px;
color: rgb(191, 30, 46);
}
.word {
position: relative;
bottom: 200px;
left: 700px;
}
.main {
width: 1000px;
display: grid;
grid-template-columns: auto auto auto;
margin: 0 auto;
}
배운점
달력의 레이아웃: display:grid; grid-template-columns: auto auto auto;
연도 우측의 좋은 글귀 레이아웃: position: relative 및 bottom,left값을 주어 원하는 곳에 배치.
'멋쟁이사자처럼FE 2기 > 일일과제' 카테고리의 다른 글
| 22.04.06_css 문제풀이 과제 (4) | 2022.04.06 |
|---|---|
| 22.04.05_문제풀이 과제 (0) | 2022.04.05 |
| GIt과 GIthub란? (3) | 2022.03.31 |
| Grouping Content란? (1) | 2022.03.29 |
| HTML Living Standard란? (0) | 2022.03.29 |