위와 같은 달력의 UI를 만들어보자. 실질적으로 작동하는 달력은 아니다. 하지만 접근성에 따라 제작하였고 FE나 퍼블리셔를 꿈꾸거나 공부하시는 분은 꾸미는 방법을 알아야하니 시작하자.
전체코드 html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>calendar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<table class="calendar">
<caption class="blind">calendar</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>
<!-- 1 - 6 -->
<tr>
<td>
<div class="inner">
<span class="day holiday outDay">30</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">1</span>
<span class="special_day">국군의 날</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">2</span>
</div>
</td>
<td>
<div class="inner today">
<span class="day holiday">3</span>
<span class="national_holiday">개천절</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">4</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">5</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">6</span>
</div>
</td>
</tr>
<!-- 7 - 13 -->
<tr>
<td>
<div class="inner">
<span class="day holiday">7</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">8</span>
</div>
</td>
<td>
<div class="inner">
<span class="day holiday">9</span>
<span class="lunar">음 9.1</span>
<span class="national_holiday">한글날</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">10</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">11</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">12</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">13</span>
</div>
</td>
</tr>
<!-- 14 - 20 -->
<tr>
<td>
<div class="inner">
<span class="day holiday">14</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">15</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">16</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">17</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">18</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">19</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">20</span>
</div>
</td>
</tr>
<!-- 21 - 27 -->
<tr>
<td>
<div class="inner">
<span class="day holiday">21</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">22</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">23</span>
<span class="lunar">음 9.15</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">24</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">25</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">26</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">27</span>
</div>
</td>
</tr>
<!-- 28 - 3 -->
<tr>
<td>
<div class="inner">
<span class="day holiday">28</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">29</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">30</span>
</div>
</td>
<td>
<div class="inner">
<span class="day">31</span>
</div>
</td>
<td>
<div class="inner">
<span class="day outDay">1</span>
</div>
</td>
<td>
<div class="inner">
<span class="day outDay">2</span>
</div>
</td>
<td>
<div class="inner">
<span class="day outDay">3</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>css
.blind{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px 1px 1px 1px); /* IE6, IE7 */ clip:rect(1px, 1px, 1px, 1px);}
.calendar{border-collapse: collapse; width: 590px; box-sizing: border-box; margin: 100px auto; table-layout: fixed;}
.calendar tbody > tr{margin-top: -1px;}
.calendar > thead > tr > th{height: 25px; border: 1px solid #e3e3e3; box-sizing: border-box; vertical-align: middle;}
.calendar tbody > tr > td {height: 80px; border: 1px solid #e3e3e3; box-sizing: border-box; position: relative;}
.calendar tbody > tr > td::after{content: ''; display: block; clear: both;}
.inner{position: absolute; width: 100%; height: 100%; box-sizing: border-box; padding: 8px; font-size: 13px;}
.national_holiday, .special_day{float: left; padding: 7px 0 0 1px; text-overflow: ellipsis; white-space: nowrap; width: 100%; overflow: hidden; font-size: 11px;}
.holiday, .national_holiday{color: red;}
.today{background-color: lightgoldenrodyellow;}
.special_day{color: blue;}
.outDay{color: #aaa5a5 !important;}
.day{font-weight: bold; float: left; font-size: 13px;}
.lunar{float: right; font-size: 10px; line-height: 13px; color: #aaa5a5;}
물론 달력을 만들 때는 자바스크립트 Date객체로 뿌려주면서 달력을 만들어야 한다.
그리고 이게 정확하고 깔끔한 코드라고 보기에는 어렵다. 하지만 구현에는 무리가 없었다.
살펴볼 주요코드는 아래와 같다.
border-collapse: collapse
position
display: table-cell / display: table
text-overflow: ellipsis
white-space: nowrap
달력에서 벗어나는 이전/다음 달 : outDay
일요일 휴일 : holiday
국군의 날과 같은 행사의 날 : special_day
개천절과 같은 국가공휴일 : national_holiday
음력 : lunar
일반적인 날짜 : day
위 와 같이 클래스명을 지정하여 진행하였습니다.
728x90
'HMTL & CSS' 카테고리의 다른 글
| 체크박스 예시 소스 코드 (0) | 2020.09.01 |
|---|---|
| 레이어팝업 만들기 [ Layer Popup ] (0) | 2020.09.01 |
| 썸네일 이미지 목록 - 2 (0) | 2020.08.24 |
| 썸네일 이미지 목록 (0) | 2020.08.22 |
| 2단 배열 메뉴 (0) | 2020.08.21 |