复杂日历

  2007년 9월 

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

CSS Code

01	/* UI Object */

02	.ly_popup{position:absolute;z-index:100}

03	.ly_popup .shadow{width:100%;background:url(http://imgnews.naver.com/image/news/2007/new_section/shadow.png);_background:none;_filter:progid:dximagetransform.microsoft.alphaimageloader(src='http://imgnews.naver.com/image/news/2007/new_section/shadow.png', sizingmethod='scale')}

04	.ly_popup .shadow_side{position:relative;top:-3px;left:-3px}

05	.ly_popup .shadow2{width:100%;background:url(http://imgnews.naver.com/image/news/2007/new_section/shadow02.png);_background:none;_filter:progid:dximagetransform.microsoft.alphaimageloader(src='http://imgnews.naver.com/image/news/2007/new_section/shadow02.png', sizingmethod='scale')}

06	.ly_popup .shadow_side2{position:relative;top:-1px;left:-1px}

07	.ly_popup .border_type{padding:9px 0 5px;border:2px solid #777;background-color:#fff;text-align:center}

08	.ly_popup .close{position:absolute;top:9px;right:9px}

09	.cal_simple{margin:0 auto;padding:0;border:0}

10	.cal_simple caption{margin:0 auto;padding:0 0 8px 3px;color:#000;font-family:'돋움',dotum;font-size:11px;font-weight:bold;text-align:left}

11	.cal_simple caption strong{margin:0 5px;*margin:0}

12	.cal_simple tr{border:none}

13	.cal_simple th{width:21px;height:19px;border:none;color:#000;font-family:'돋움',dotum;font-size:11px;font-weight:normal}

14	.cal_simple td{width:21px;height:19px;border:none;font-family:tahoma;font-size:11px;text-align:center}

15	.cal_simple td a{color:#999}

16	.cal_simple td a em{color:#000;font-style:normal}

17	.cal_simple td a strong{color:#ed432a;font-weight:bold;text-decoration:underline}

18	/* //UI Object */

HTML Code

view source

print ?

01	<!-- UI Object -->

02	<div style="position:relative;height:200px">

03	<div class="ly_popup" style="left:10px;top:10px;width:175px">

04	<div class="shadow">

05	<div class="shadow_side">

06	<div class="shadow2">

07	<div class="shadow_side2">

08	<div class="border_type">

09	<a href="#" class="close"><img src="http://imgnews.naver.com/image/news/2007/new_section/btn_close.gif" alt="달력 레이어 닫기" width="15" height="14"></a>

10	<table border="1" cellspacing="0" summary="2007년 9월 달력" class="cal_simple">

11

<caption>

12	<a href="#"><img src="https://i-blog.csdnimg.cn/blog_migrate/58efa617c3b31f0df220dad8d6b72ea6.gif" width="6" height="7"alt="이전달"></a>

13	<strong>2007년 9월</strong>

14	<a href="#"><img src="https://i-blog.csdnimg.cn/blog_migrate/2b36e0199460676dcf456ff61673a841.gif" width="6" height="7"alt="다음달"></a>

15	</caption>

16

<thead>

17

<tr>

18	<th scope="col">일</th>

19	<th scope="col">월</th>

20	<th scope="col">화</th>

21	<th scope="col">수</th>

22	<th scope="col">목</th>

23	<th scope="col">금</th>

24	<th scope="col">토</th>

25

</tr>

26

</thead>

27

<tbody>

28

<tr>

29

<td></td>

30

<td></td>

31

<td></td>

32

<td></td>

33

<td></td>

34

<td></td>

35	<td><a href="#" title="2007-09-01">1</a></td>

36

</tr>

37

<tr>

38	<td><a href="#" title="2007-09-02">2</a></td>

39	<td><a href="#" title="2007-09-03">3</a></td>

40	<td><a href="#" title="2007-09-04"><em>4</em></a></td>

41	<td><a href="#" title="2007-09-05">5</a></td>

42	<td><a href="#" title="2007-09-06">6</a></td>

43	<td><a href="#" title="2007-09-07"><em>7</em></a></td>

44	<td><a href="#" title="2007-09-08">8</a></td>

45

</tr>

46

<tr>

47	<td><a href="#" title="2007-09-09">9</a></td>

48	<td><a href="#" title="2007-09-10">10</a></td>

49	<td><a href="#" title="2007-09-11"><em>11</em></a></td>

50	<td><a href="#" title="2007-09-12">12</a></td>

51	<td><a href="#" title="2007-09-13">13</a></td>

52	<td><a href="#" title="2007-09-14">14</a></td>

53	<td><a href="#" title="2007-09-15"><em>15</em></a></td>

54

</tr>

55

<tr>

56	<td><a href="#" title="2007-09-16"><em>16</em></a></td>

57	<td><a href="#" title="2007-09-17"><em>17</em></a></td>

58	<td><a href="#" title="2007-09-18"><em>18</em></a></td>

59	<td><a href="#" title="2007-09-19">19</a></td>

60	<td><a href="#" title="2007-09-20">20</a></td>

61	<td><a href="#" title="2007-09-21"><em>21</em></a></td>

62	<td><a href="#" title="2007-09-22"><em>22</em></a></td>

63

</tr>

64

<tr>

65	<td><a href="#" title="2007-09-23"><em>23</em></a></td>

66	<td><a href="#" title="2007-09-24"><em>24</em></a></td>

67	<td><a href="#" title="2007-09-25"><em>25</em></a></td>

68	<td><a href="#" title="2007-09-26">26</a></td>

69	<td><a href="#" title="2007-09-27"><strong>27</strong></a></td>

70	<td><a href="#" title="2007-09-28">28</a></td>

71	<td><a href="#" title="2007-09-29">29</a></td>

72

</tr>

73

<tr>

74	<td><a href="#" title="2007-09-30">30</a></td>

75

<td></td>

76

<td></td>

77

<td></td>

78

<td></td>

79

<td></td>

80

<td></td>

81

</tr>

82

</tbody>

83

</table>

84

</div>

85

</div>

86

</div>

87

</div>

88

</div>

89

</div>

90

</div>

91	<!-- //UI Object -->