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

0

조회 수 : 546 신고 : 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>
 
 
미리보기를 통해 확인하세요.
 
태그
profile 글쓴이 빽짱구

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

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

댓글 '1'

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

2018.09.21 16:00:29

감사감사

List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수
공지 모바일 코딩하시는 분들 참고하세요. title: [ani]깜빡이는 표정빽짱구 2014-05-07   2633
65 반응형 캘린더 소스 [1] title: [ani]깜빡이는 표정빽짱구 2018-09-16   546
64 html 인라인요소와 블록요소 title: [ani]깜빡이는 표정빽짱구 2016-06-03   374
63 모바일 키패드 입력창 title: [ani]깜빡이는 표정빽짱구 2016-02-16   644
62 모바일 코딩시 확대 축소(가능, 불가능) title: [ani]깜빡이는 표정빽짱구 2014-07-21   1196
61 모바일에서 전화번호,이메일,지도 자동링크 제거하기 [1] title: [ani]깜빡이는 표정빽짱구 2014-03-07   4359
60 아이폰에서 숫자 사이즈 title: [ani]깜빡이는 표정빽짱구 2014-02-06   1914
59 안드로이드에서 placeholder이 적용안될때 [1] title: [ani]깜빡이는 표정빽짱구 2014-02-03   2917
58 모바일에서 position:fixed 문제 title: [ani]깜빡이는 표정빽짱구 2014-01-13   3079
57 html5 (section, article, nav, aside) title: [ani]깜빡이는 표정빽짱구 2012-08-30   3147
56 모바일 코딩시 손가락으로 확대/축소 가능하게 할려면? title: [ani]깜빡이는 표정빽짱구 2012-08-06   6414
55 html5 + CSS3 브라우저별 호환성 비교 [1] title: [ani]깜빡이는 표정빽짱구 2011-09-30   4283
54 글자 중간에 선을 그어주는 del 태그 [1] title: [ani]깜빡이는 표정빽짱구 2011-07-13   5802
53 셀렉트박스 (selectbox) 세로크기 file title: [ani]깜빡이는 표정빽짱구 2011-05-12   7511
52 스크립트 한 줄로 IE6 죽이기 [2] 이병준 2010-05-27   5352
51 브라우저 리셋 CSS [2] 이병준 2010-05-27 1 5815
50 찾아보기 버튼모양 바꾸기 이병준 2010-05-27   7840
49 정규식 실시간 웹테스터 입니다 컴센스 2010-05-27   5535
48 한글기본폰트 영문명 [3] 뉴클리어 2010-03-07   8819
47 html5의 모든 것 [3] title: [ani]깜빡이는 표정빽짱구 2010-02-04   8833