반응형 달력을 만들어 보자

월간 달력은 큰 화면에서 보기 좋으나 모바일 화면에서는 보기가 어렵다. 모바일에서도 최적화 하는 방법이 몇개 있지만 그 중 스타일을 다르게 하는 방법을 소개한다. 너비 1000px 이하는 주간, 이상은 월간 달력으로 만들어 보자.

//잠깐 table에서 block 으로 변경!
.calTable{width:100%;}
.calTable th, 
.calTable td{display:block;width:100%;height: 82px;padding: 10px 0;border-bottom:1px solid #cdcdcd;}
.calTable th{line-height:82px;text-align:center;background:#556279;color:#fff;}
.calTable td{padding-left:5%;position:relative;font-size: 14px;overflow: auto;}
.calTable thead{float:left;width:15%;}
  //요일을 왼쪽, 너비 15%
.calTable tbody{float:left;width:80%;}
  //내용을 요일 오른쪽으로 너비 80%
.calTable thead>tr{display:block;}
  //table의 tr의 기본값은 display:table-row를 버리고 한 줄 씩 표출
.calTable tbody>tr{display:none;}
  //주간만 필요하므로 나머지 tr은 숨김처리
.calTable .current{display:block;}
  //현재 주간만 표출
.calTable .current .on{background:rgba(253, 184, 19,.5)}
  //오늘의 날짜 표시
.calTable i{color:royalblue;position:absolute;top:40%;left:0}
.calTable ul{margin:0;padding:0;}
.calTable li{line-height:1.4;list-style: none}
.calTable li a:before{content:"\2022"}
.calTable li a{display: block;text-indent:-10px;padding-left:20px}

@media all and (min-width:1000px){
//다시 table로 만들어 준다.
.calTable{border-top:1px solid #000;table-layout:fixed;}
.calTable th,
.calTable td{display:table-cell;vertical-align:middle;width:auto;height:auto;line-height:1.5}
.calTable th{padding:15px 0;background-color:#556279;border:1px solid #d7d7d7;border-top:0;}
.calTable thead,
.calTable tbody{float:none;width:auto}
.calTable thead>tr,
.calTable tbody>tr,
.calTable .current{display:table-row;}
.calTable td{position:relative;height:100px;border:1px solid #d7d7d7;padding:15px 0;}
.calTable i{position:absolute;top:5px;left:5px;}
.calTable ul{padding:10px 0 0;}
.calTable li{line-height:1.5;}
.calTable li a{text-indent:10px;}
}

<table class="calTable">
	<caption>행사일정표</caption>
	<thead><!--이 얘들은 모바일에서 왼쪽으로 갈 예정이다.-->
		<tr>
			<th scope="row">일</th>
			<th scope="row">월</th>
			<th scope="row">화</th>
			<th scope="row">수</th>
			<th scope="row">목</th>
			<th scope="row">금</th>
			<th scope="row">토</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td>
				<i>1</i>
			</td>
		</tr>
		<tr>
			<td>
				<i>2</i>
			</td>
			<td>
				<i>3</i>
			</td>
			<td>
				<i>4</i>
			</td>
			<td>
				<i>5</i>
			</td>
			<td>
				<i>6</i>
			</td>
			<td>
				<i>7</i>
			</td>
			<td>
				<i>8</i>
				<ul>
					<li><a href="">박팽년, 최항, 신숙주, 성삼문, 강희안, 이개, 이선로</a></li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>
				<i>9</i>
			</td>
			<td>
				<i>10</i>
			</td>
			<td>
				<i>11</i>
			</td>
			<td>
				<i>12</i>
				<ul>
					<li><a href="">박팽년, 최항, 신숙주, 성삼문, 강희안, 이개, 이선로</a></li>
				</ul>
			</td>
			<td>
				<i>13</i>
			</td>
			<td>
				<i>14</i>
			</td>
			<td>
				<i></i>
			</td>
		</tr>
		<tr class="current"><!--모바일에서 표출될 이번 주간이다-->
			<td>
				<i>15</i>
				<ul>
					<li><a href="">박팽년, 최항, 신숙주, 성삼문, 강희안, 이개, 이선로</a></li>
					<li><a href="">박팽년, 최항, 신숙주, 성삼문, 강희안, 이개, 이선로</a></li>
					<li><a href="">박팽년, 최항, 신숙주, 성삼문, 강희안, 이개, 이선로</a></li>
					<li><a href="">박팽년, 최항, 신숙주, 성삼문, 강희안, 이개, 이선로</a></li>
				</ul>
			</td>
			<td>
				<i>16</i>
			</td>
			<td>
				<i>17</i>
			</td>
			<td class="on"><!--오늘의 날짜를 표시한다.-->
				<i>18</i>
				<ul>
					<li><a href="">박팽년, 최항, 신숙주, 성삼문, 강희안, 이개, 이선로</a></li>
					<li><a href="">집현전 학자들</a></li>
				</ul>
			</td>
			<td>
				<i>19</i>
			</td>
			<td>
				<i>20</i>
			</td>
			<td>
				<i>21</i>
			</td>
		</tr>
		<tr>
			<td>
				<i>22</i>
			</td>
			<td>
				<i>23</i>
			</td>
			<td>
				<i>24</i>
			</td>
			<td>
				<i>25</i>
			</td>
			<td>
				<i>26</i>
			</td>
			<td>
				<i>27</i>
			</td>
			<td>
				<i>28</i>
			</td>
		</tr>
		<tr>
			<td>
				<i>29</i>
			</td>
			<td>
				<i>30</i>
			</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>