(x)html

(x)html 관련된 팁을 공유하는 공간입니다.
관련메뉴 CSS | javascript | jquery
  • 웹미니 한줄 전광판 영역 입니다.
글 수 66

반응형 캘린더 소스

2018.09.16 22:45:53 댓글 바로가기

집중모드 켜기

0

조회 수 : 556 신고 : 0

profile
작성자 : title: [ani]깜빡이는 표정빽짱구
포인트 : 56933 | 레벨 : 25
미리보기 : https://www.webmini.net/calendar_fluid 
css
 
<style type="text/css">
.calendar > p{width:100%;font-size:0px;margin-bottom:10px}
.calendar > p span.Ym{font-size:23px;margin:0px 10px;font-weight:bold}
.calendar > p a{display:inline-block;vertical-align:bottom;line-height:23px;font-weight:bold}
@media only screen and (min-width : 761px){
.calendar > p{text-align:center}
.calendar > ul{display:table;width:100%;font-size:0;margin:0 0 15px;padding:0}
.calendar > ul > li{display:table-row;width:100%}
.calendar > ul > li > div{display:table-cell;width:14%;min-height:80px;height:80px;border-right:1px solid #dfd8c6;border-bottom:1px solid #dfd8c6}
.calendar > ul > li > div:last-child{border-right:0px}
.calendar > ul > li.header > div{height:30px;line-height:30px;min-height:0px;border-top:1px solid #dfd8c6;border-right:1px solid #dfd8c6;border-bottom:1px solid #dfd8c6background:#fbfaf7;color:#777777;font-weight:bold;text-align:center}
.calendar > ul > li.header > div:last-child{border-right:0px}
.calendar > ul > li.header > div.Sun{color:#cc2220}
.calendar > ul > li.header > div.Sat{color:#2453a5}
.calendar > ul > li > div.empty{background:#fbfaf7}
.calendar > ul > li > div > time{display:block;padding:3px 0 3px 3px;font-weight:bold;min-height:15px}
.calendar > ul > li > div > time span{display:none}
.calendar > ul > li > div ul{width:100%;font-size:0px;text-align:right;padding:0 3px;min-height:60px}
.calendar > ul > li > div ul li{margin:0px 3px 3px 0px;padding:3px}
}
@media only screen and (max-width : 760px){
.calendar > p{text-align:left}
.calendar > ul{width:100%;display:block;border-top:2px solid #dfd8c6;margin:0 0 15px;padding:0}
.calendar > ul > li{display:block}
.calendar > ul > li > div{width:100%;border-bottom:1px solid #dfd8c6}
.calendar > ul > li.header{display:none}
.calendar > ul > li > div.empty{display:none}
.calendar > ul > li > div > time{display:table-cell;vertical-align:middle;border-right:1px solid #dfd8c6;width:80px;text-align:right;padding:10px 5px 10px 0;background:#fbfaf7;font-weight:bold}
.calendar > ul > li > div > time span.Ym{font-size:10px;display:block;margin-bottom:5px}
.calendar > ul > li > div > time span.W{margin-left:5px}
.calendar > ul > li > div ul{display:table-cell;padding:5px 10px;vertical-align:middle}
.calendar > ul > li > div ul li{margin:2px 2px 2px 0px;padding:3px}
}
.calendar > ul > li > div.today{background:#fff8cf !important}
.calendar > ul > li > div.Sun > time, .calendar > ul > li > div.Sun > time span{color:#cc2220}
.calendar > ul > li > div.Sat > time, .calendar > ul > li > div.Sat > time span{color:#2453a5}
</style>
 
 
html
 
<div class="calendar">
<p>
<a>&lt;</a>
<span class="Ym">2017. 01</span>
<a>&gt;</a>
</p>
 
<ul>
<li class="header">
<div class="Sun">SUN</div>
<div class="Mon">MON</div>
<div class="Tue">TUE</div>
<div class="Wed">WED</div>
<div class="Thu">THU</div>
<div class="Fri">FRI</div>
<div class="Sat">SAT</div>
</li>
<li>
<div class="Sun"><time><span class="Ym">[2017.01]</span>01<span class="W">(Sun)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>02<span class="W">(Mon)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>03<span class="W">(Tue)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>04<span class="W">(Wed)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>05<span class="W">(Thu)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>06<span class="W">(Fri)</span></time></div>
<div class="Sat"><time><span class="Ym">[2017.01]</span>07<span class="W">(Sat)</span></time></div>
</li>
<li>
<div class="Sun"><time><span class="Ym">[2017.01]</span>08<span class="W">(Sun)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>09<span class="W">(Mon)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>10<span class="W">(Tue)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>11<span class="W">(Wed)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>12<span class="W">(Thu)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>13<span class="W">(Fri)</span></time></div>
<div class="Sat"><time><span class="Ym">[2017.01]</span>14<span class="W">(Sat)</span></time></div>
</li>
<li>
<div class="Sun"><time><span class="Ym">[2017.01]</span>15<span class="W">(Sun)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>16<span class="W">(Mon)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>17<span class="W">(Tue)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>18<span class="W">(Wed)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>19<span class="W">(Thu)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>20<span class="W">(Fri)</span></time></div>
<div class="Sat"><time><span class="Ym">[2017.01]</span>21<span class="W">(Sat)</span></time></div>
</li>
<li>
<div class="Sun"><time><span class="Ym">[2017.01]</span>22<span class="W">(Sun)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>23<span class="W">(Mon)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>24<span class="W">(Tue)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>25<span class="W">(Wed)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>26<span class="W">(Thu)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>27<span class="W">(Fri)</span></time></div>
<div class="Sat"><time><span class="Ym">[2017.01]</span>28<span class="W">(Sat)</span></time></div>
</li>
<li>
<div class="Sun"><time><span class="Ym">[2017.01]</span>29<span class="W">(Sun)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>30<span class="W">(Mon)</span></time></div>
<div><time><span class="Ym">[2017.01]</span>31<span class="W">(Tue)</span></time></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
</li>
</ul>
</div>
 
 
미리보기를 통해 확인하세요.
 
태그
0 0
이 글이 마음에 드셨다면 빽짱구님에게 포인트를 선물 하세요!
profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://web.webmini.net/html/632432/827/trackback
이 게시물을...
목록 이전 다음
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

댓글 '1'

title: 화분6시내고환 (632494)

2018.09.21 16:00:29

감사감사

0 0 신고
List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수sort
공지 모바일 코딩하시는 분들 참고하세요. title: [ani]깜빡이는 표정빽짱구 2014-05-07   2639
65 html 인라인요소와 블록요소 title: [ani]깜빡이는 표정빽짱구 2016-06-03   375
64 반응형 캘린더 소스 [1] title: [ani]깜빡이는 표정빽짱구 2018-09-16   556
63 모바일 키패드 입력창 title: [ani]깜빡이는 표정빽짱구 2016-02-16   646
62 모바일 코딩시 확대 축소(가능, 불가능) title: [ani]깜빡이는 표정빽짱구 2014-07-21   1197
61 아이폰에서 숫자 사이즈 title: [ani]깜빡이는 표정빽짱구 2014-02-06   1916
60 안드로이드에서 placeholder이 적용안될때 [1] title: [ani]깜빡이는 표정빽짱구 2014-02-03   2926
59 모바일에서 position:fixed 문제 title: [ani]깜빡이는 표정빽짱구 2014-01-13   3095
58 html5 (section, article, nav, aside) title: [ani]깜빡이는 표정빽짱구 2012-08-30   3148
57 마퀴 적용 title: [ani]깜빡이는 표정빽짱구 2004-02-17 16 3259
56 아이프레임 title: [ani]깜빡이는 표정빽짱구 2004-02-17 12 3530
55 기본태그 title: [ani]깜빡이는 표정빽짱구 2004-02-17 17 3640
54 회원가입시 나이제한하기 title: [ani]깜빡이는 표정빽짱구 2004-03-29 16 3788
53 타이틀바 꾸미기2 [1] title: [ani]깜빡이는 표정빽짱구 2004-04-18 10 3793
52 상태표시줄을 바꿔보자1 [1] title: [ani]깜빡이는 표정빽짱구 2004-02-07 17 3926
51 움직이는 타이틀바 title: [ani]깜빡이는 표정빽짱구 2004-04-18 10 3973
50 html5 + CSS3 브라우저별 호환성 비교 [1] title: [ani]깜빡이는 표정빽짱구 2011-09-30   4284
49 모바일에서 전화번호,이메일,지도 자동링크 제거하기 [1] title: [ani]깜빡이는 표정빽짱구 2014-03-07   4364
48 새창을 열면 현재창 닫히는소스 title: [ani]깜빡이는 표정빽짱구 2005-11-24 4 4575
47 best of best 노프레임에서 음악 안끈기게 하기 [1] title: [ani]깜빡이는 표정빽짱구 2004-02-06 22 4666
목록