Snippet 본문

레이어 달력형

등록
신예호 (등록일 : 2012/01/12    최종수정일 : 2013/05/29)
Type
PC
설명
미리보기
Html
<div class="calendar_comm">
	<div class="date_calendar">
		<strong class="screen_out">년도선택</strong>
		<span class="opt_years">
			<a href="#none" class="img_sample btn_prev">이전년도</a>
			<em class="date_g">2012</em>
			<a href="#none" class="img_sample btn_next">다음년도</a>
		</span>
		<strong class="screen_out">달선택</strong>
		<span class="opt_month">
			<a href="#none" class="img_sample btn_prev">이전달</a>
			<em class="date_g">01</em>
			<a href="#none" class="img_sample btn_next">다음달</a>
		</span>
	</div>
	<table class="tbl_calendar">
		<caption class="screen_hide">월별달력</caption>
		<colgroup>
			<col class="col_width">
			<col class="col_width">
			<col class="col_width">
			<col class="col_width">
			<col class="col_width">
			<col class="col_width">
			<col class="col_width">
		</colgroup>
		<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 class="td_sun"></td>
				<td></td>
				<td></td>
				<td></td>
				<td>
					<a href="#none" class="link_date">1</a>
				</td>
				<td>
					<a href="#none" class="link_date">2</a>
				</td>
				<td>
					<a href="#none" class="link_date">3</a>
				</td>
			</tr>
			<tr>
				<td class="td_sun">
					<a href="#none" class="link_date">3</a>
				</td>
				<td>
					<a href="#none" class="link_date">4</a>
				</td>
				<td>
					<a href="#none" class="link_date">5</a>
				</td>
				<td>
					<a href="#none" class="link_date">6</a>
				</td>
				<td>
					<a href="#none" class="link_date">7</a>
				</td>
				<td>
					<a href="#none" class="link_date">8</a>
				</td>
				<td>
					<a href="#none" class="link_date">9</a>
				</td>
			</tr>
			<tr>
				<td class="td_sun">
					<a href="#none" class="link_date">10</a>
				</td>
				<td>
					<a href="#none" class="link_date">11</a>
				</td>
				<td>
					<a href="#none" class="link_date">12</a>
				</td>
				<td class="td_today">
					<a href="#none" class="link_date">13</a>
				</td>
				<td>
					<a href="#none" class="link_date">14</a>
				</td>
				<td>
					<a href="#none" class="link_date">15</a>
				</td>
				<td>
					<a href="#none" class="link_date">16</a>
				</td>
			</tr>
			<tr>
				<td class="td_sun">
					<a href="#none" class="link_date">17</a>
				</td>
				<td>
					<a href="#none" class="link_date">18</a>
				</td>
				<td>
					<a href="#none" class="link_date">19</a>
				</td>
				<td>
					<a href="#none" class="link_date">20</a>
				</td>
				<td>
					<a href="#none" class="link_date">21</a>
				</td>
				<td>
					<a href="#none" class="link_date">22</a>
				</td>
				<td>
					<a href="#none" class="link_date">23</a>
				</td>
			</tr>
			<tr>
				<td class="td_sun">
					<a href="#none" class="link_date">24</a>
				</td>
				<td>
					<a href="#none" class="link_date">25</a>
				</td>
				<td>
					<a href="#none" class="link_date">26</a>
				</td>
				<td>
					<a href="#none" class="link_date">27</a>
				</td>
				<td>
					<a href="#none" class="link_date">28</a>
				</td>
				<td>
					<a href="#none" class="link_date">29</a>
				</td>
				<td>
					<a href="#none" class="link_date">30</a>
				</td>
			</tr>
			<tr>
				<td class="td_sun">
					<a href="#none" class="link_date">31</a>
				</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
	</table>
</div>
CSS
.img_sample {overflow:hidden;background:url(/snippet/image?idx=307) no-repeat;text-indent:-9999px}

.calendar_comm {width:173px;padding-bottom:6px;border:1px solid #999;font-family:verdana,sans-serif;background-color:#fff}
.calendar_comm .date_calendar {overflow:hidden;padding:11px 0 8px;border-bottom:1px solid #eee}
.calendar_comm .date_calendar .img_sample {float:left;width:15px;height:15px}
.calendar_comm .btn_prev {background-position:3px 3px}
.calendar_comm .btn_next {background-position:6px -17px}
.calendar_comm .date_calendar .date_g {float:left;line-height:14px;font-weight:bold;letter-spacing:-1px}
.calendar_comm .opt_years {float:left;margin-left:31px}
.calendar_comm .opt_month {float:right;margin-right:31px}
.calendar_comm .tbl_calendar {width:154px;margin:9px auto 0;border-collapse:collapse;border-spacing:0}
.calendar_comm .tbl_calendar .col_width {width:22px}
.calendar_comm .tbl_calendar th {display:block;overflow:hidden;position:absolute;left:-9999px;width:1px;height:1px;font-size:0;line-height:0;text-indent:-9999px}
.calendar_comm .tbl_calendar td {height:18px;text-align:center}
.calendar_comm .link_date {display:block;height:20px;font-size:11px;color:#555;line-height:17px;text-decoration:none}
.calendar_comm .td_sun .link_date {color:#f92d32}
.calendar_comm .td_holiday .link_date {color:#f92d32}
.calendar_comm .td_today .link_date {height:18px;border:1px solid #68a8d4;font-weight:bold;color:#fff;background-color:#78bceb}

안내 : 해당 Snippet을 사용하기 위해서는 Daum에서 사용하는 reset.css(global classname포함)를 사용 하셔야 합니다.
※ [ CSS Convention ] 바로가기