(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/de1/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

댓글 '1'

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

2018.09.21 16:00:29

감사감사

List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수sort
공지 모바일 코딩하시는 분들 참고하세요. title: [ani]깜빡이는 표정빽짱구 2014-05-07   2633
66 hit html 특수문자 코드표 [1] title: [ani]깜빡이는 표정빽짱구 2009-02-10   39942
65 hit best of best Span 태그와 Div 태그 (HTML) [2] title: [ani]깜빡이는 표정빽짱구 2007-01-21 70 16641
64 hit iframe대신 div를 응용해보자 [4] title: [ani]깜빡이는 표정빽짱구 2007-12-17   16320
63 hit 글자위에 마우스 오버시 툴팁띄우기 file title: [ani]깜빡이는 표정빽짱구 2007-11-08   15177
62 hit DIV를 이용한 Display 핸들링 title: [ani]깜빡이는 표정빽짱구 2007-12-17   12661
61 hit 마우스 드래그 금지태그 [2] title: [ani]깜빡이는 표정빽짱구 2006-04-26 16 11931
60 hit 클릭시 현재 페이지에서 원하는곳으로 위치이동 title: [ani]깜빡이는 표정빽짱구 2008-04-30   11848
59 hit th 태그와 td 태그의 차이점 [2] title: [ani]깜빡이는 표정빽짱구 2005-12-07 7 11507
58 hit png 으로 저장시 IE6에서 투명안될때 [2] title: [ani]깜빡이는 표정빽짱구 2007-12-12   11098
57 hit 메일링 코딩시 이미지맵 [4] title: [ani]깜빡이는 표정빽짱구 2009-04-21   10493
56 hit HTML과 XHTML의 차이 [4] title: [ani]깜빡이는 표정빽짱구 2007-12-07   10444
55 hit best of best input 태그를 이미지버튼으로하기 title: [ani]깜빡이는 표정빽짱구 2006-04-22 20 10331
54 hit 익스7에 잘보이던 사이트가 익스8에서 제대로 안보일때 title: [ani]깜빡이는 표정빽짱구 2009-05-13   10007
53 best of best CHECKBOX클릭시 지정된 내용 보여주기 title: [ani]깜빡이는 표정빽짱구 2006-10-17 42 9972
52 best of best onfocus="this.blur()" 익스,파이어폭스에도 적용 title: [ani]깜빡이는 표정빽짱구 2007-02-21 33 9715
51 best of best input 에 마우스 오버/아웃시 배경바꾸기 title: [ani]깜빡이는 표정빽짱구 2006-07-25 20 9172
50 textarea 나 input 안에 글자 안써지게 하기 title: [ani]깜빡이는 표정빽짱구 2006-05-12 19 9052
49 html5의 모든 것 [3] title: [ani]깜빡이는 표정빽짱구 2010-02-04   8833
48 한글기본폰트 영문명 [3] 뉴클리어 2010-03-07   8819
47 best of best 아이디 입력란에 탭키 눌렀을때 순서정하기 [2] title: [ani]깜빡이는 표정빽짱구 2006-09-28 25 8491