[웹 UI 개발] 표 - 4 / 달력 제작
2023. 3. 24. 12:23
앞서 설명한 표의 특성을 잘 이해하고 테이블 태그로 만드는 가장 대표적인 UI인 달력을 만들어 보자.
이번 달이 아닌 날에는 dimmed 처리 한다.
기념일은 다른 색으로 표현한다.
휴일은 빨간 색으로 표현한다.
음력 1일과 15일은 우측 상단에 dimmed 처리해서 나타낸다.
오늘에 해당하는 날짜에는 border를 다른 색으로 처리하고 background 컬러도 다른 색으로 처리한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>달력</title>
<link rel="stylesheet" href="css/table2.css">
</head>
<body>
<table>
<caption class="blind">달력</caption>
<thead>
<tr>
<th scope="col">일</th>
<th scope="col">월</th>
<th scope="col">화</th>
<th scope="col">수</th>
<th scope="col">목</th>
<th scope="col">금</th>
<th scope="col">토</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="inner">
<span class="date dimmed">30</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">1</span>
<em class="text anniversary">국군의 날</em>
</div>
</td>
<td>
<div class="inner">
<span class="date">2</span>
</div>
</td>
<td>
<div class="inner">
<span class="date holiday">3</span>
<em class="text holiday">개천절</em>
</div>
</td>
<td>
<div class="inner">
<span class="date">4</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">5</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">6</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="inner">
<span class="date holiday">7</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">8</span>
</div>
</td>
<td>
<div class="inner">
<span class="date holiday">9</span>
<em class="text holiday">한글날</em>
<span class="lunar">음 9.1</span>
</div>
</td>
<td class="today">
<div class="inner">
<span class="date">10</span>
<strong class="blind">오늘</strong>
</div>
</td>
<td>
<div class="inner">
<span class="date">11</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">12</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">13</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="inner">
<span class="date holiday">14</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">15</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">16</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">17</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">18</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">19</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">20</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="inner">
<span class="date holiday">21</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">22</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">23</span>
<span class="lunar">음 9.15</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">24</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">25</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">26</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">27</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="inner">
<span class="date holiday">28</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">29</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">30</span>
</div>
</td>
<td>
<div class="inner">
<span class="date">31</span>
</div>
</td>
<td>
<div class="inner">
<span class="date dimmed">1</span>
</div>
</td>
<td>
<div class="inner">
<span class="date dimmed">2</span>
</div>
</td>
<td>
<div class="inner">
<span class="date dimmed">3</span>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
@charset "UTF-8";
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
table, th {
border-collapse: collapse;
border: 1px solid #eaedef;
}
td {
border-top: 1px solid #eaedef;
border-left: 1px solid #eaedef;
}
table {
width: 590px;
table-layout: fixed;
font-size: 12px;
}
th {
height: 25px;
color: #777;
border-bottom: 0;
}
.inner {
position: relative;
height: 80px;
padding: 5px;
box-sizing: border-box;
}
.date {
font-weight: bold;
}
.text {
display: block;
margin-top: 3px;
font-style: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.date.dimmed {
color: #e7e7e7;
}
.date.holiday {
color: #f44e4e;
}
.text.holiday {
color: #f44e4e;
}
.text.anniversary {
color: #00c;
}
.lunar {
position: absolute;
top: 4px;
right: 4px;
font-size: 11px;
color: #bababa;
}
.today {
border: 1px solid #e0e0bf;
background-color: #ffffd9;
}
내용 셀(td) 안에 들어가야하는 요소들이 많다면 내용 셀 안에 div를 생성해서 그 안에서 처리하는 것이 좋다.
그리고 내용 셀의 border를 top과 left에만 설정한 이유는 오늘에 해당하는 날의 border가 온전히 보이게 하기 위해서이다.
평범하게 내용 셀의 border를 설정하게 되면 아래와 같이 표현된다.
표의 렌더링 방식 때문에 오늘에 해당하는 td의 top, left border가 가려지게 된다.
모든 td들에 right, bottom border를 없애면 이 문제를 해결할 수 있다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/web344
웹 UI 개발
부스트코스 무료 강의
www.boostcourse.org
'공부 > 웹 UI 개발' 카테고리의 다른 글
| [웹 UI 개발] 팝업 -1 / 레이어 팝업 + 딤드 배경 제작 (0) | 2023.03.27 |
|---|---|
| [웹 UI 개발] 팝업 - 0 (0) | 2023.03.27 |
| [웹 UI 개발] 표 - 3 / 표의 border 속성 (0) | 2023.03.23 |
| [웹 UI 개발] 표 - 2 / 표와 position (0) | 2023.03.23 |
| [웹 UI 개발] 표 - 1 / 표 접근성 (0) | 2023.03.23 |
