개발자분들은 연일 죽어나고 계시지만, 디자인은 비교적 회사일에 여유가 생기면서
이런 강좌를 쓸 시간도 주어지네요~
(특별히 칼님께서 휴일도 없이 해피빈기부와 올블릿 적립금 관련 개발하시느라 고생많으셨어요~ 토닥토닥~)
요번 강좌에서는 곧 마이올블에서 사용될 미니캘린더를 디자인 해볼까합니다.
테이블도 웹표준이 아닌건 아니란걸 아시리라 믿고~
테이블로 레이아웃을 짜지마라고는 많이들 들으셨을거에요~
하지만.. 테이블은 여전히 표형식의 데이터 출력물에는 매력적인 도구랍니다.
달력 역시 테이블방식의 코딩이 좋겠죠^^?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
<title>미니 캘린더 디자인</title>
</head>
<body>
<div class="cal_wrap">
<div class="cal">
<div class="nowcal">
<div class="prev_month">
<a href="#">
<span>이전달</span>
</a>
</div>
<div class="currunt_month">
July 2007
</div>
<div class="next_month">
<a href="#">
<span>다음달</span>
</a>
</div>
</div>
<table>
<tr class="week">
<td class="sunday">일</td>
<td>월</td>
<td>화</td>
<td>수</td>
<td>목</td>
<td>금</td>
<td>토</td>
</tr>
<tr>
<td class="sunday another_month">30</td>
<td>1</td>
<td>2</td>
<td class="today">3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td class="sunday">7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td class="sunday">14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td class="sunday">21</td>
<td>22</td>
<td>23</td>
<td class="selectDay">24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td class="sunday">28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="another_month">1</td>
<td class="another_month">2</td>
<td class="another_month">3</td>
</tr>
</table>
</div>
</div>
</body>
</html>
레이어 형식으로 필요시 작게 띄워서 사용할 예정이므로, 테이블 바깥에 div 를 감싸줍니다.
div 의 클래스이름은 cal_wrap입니다. css에서는 얘만 호출해서 하단의 태그를 호출할수 있습니다. 일단 테이블을 구성할 기본 HTML 파일을 작성하였습니다.
저장 방식은 utf-8 이고, 메타태그에서도 utf-8 언어셋을 지정합니다.
연결되는 스타일시트 파일은 style.css 입니다.
일요일은 빨간색으로 표현할 예정입니다. 일요일에 해당하는 셀에는 클래스명 sunday 를 모두 주었고, 오늘 날짜에는 today 클래스를, 그리고 유저가 임의로 선택한 날짜를 표현하기 위해 selectDay 클래스를 주었습니다.
그리고 가장 상위에 요일을 표시하는 부분을 한번에 컨트롤 하기 위해서 tr 에 week 클래스를 주었습니다. thead를 써도 되지만 우선 이번에는 이렇게 사용하겠습니다.
style.css 작성
@charset "utf-8";
* { margin: 0; padding: 0; }
/* 미니 캘린더 디자인 */
.cal_wrap { padding: 10px; color: #000; border: 1px solid #000; width: 127px; }
.cal_wrap .cal { width: 100%; }
.cal_wrap .nowcal { font: normal 11px/20px 돋움,Dotum; }
.cal_wrap .prev_month { float: left; }
.cal_wrap .currunt_month { float: left; font-weight: bold; }
.cal_wrap .next_month { float: right }
.cal_wrap table { clear: both; font: normal 9px/18px tahoma; text-align: center; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-collapse: collapse; }
.cal_wrap td { border-right: 1px solid #ccc; border-top: 1px solid #ccc; padding: 0 3px; color: #777; cursor: pointer; }
.cal_wrap td:hover { background-color: #f1f1f1; }
.cal_wrap .week { font: normal 11px/18px 돋움, Dotum; color: #00324B; background-color: #F1F6FA; }
.cal_wrap .sunday { color: #ff0000; }
.cal_wrap .another_month { color: #ccc; background-color: #f5f5f5; }
.cal_wrap .today { background-color: #00324B; color: #fff; }
.cal_wrap .selectDay { background-color: #FF7A00; color: #fff; }
.cal_wrap .prev_month a { background: url(calprev.gif) 0 0 no-repeat; width: 9px; height: 9px; display: block; }
.cal_wrap .next_month a { background: url(calnext.gif) 0 0 no-repeat; width: 9px; height: 9px; display: block; }
.cal_wrap a:hover { background-position: -9px 0; }
.cal_wrap span { display: none; }
.cal_wrap .currunt_month { text-align: center; width: 109px; }
CSS는 뒤에 오는 구절을 최근 디자인으로 갱신합니다.
지난달 혹은 다음달 일요일의 경우 another_month 클래스와 sunday 클래스가 겹칩니다. 지이번달이 아닌 날짜는 전부 회색으로 표현할 예정이므로, sunday 클래스를 another_month 보다 상단에 위치시킵니다. 이렇게 하면 빨간색이 입혀있던 일요일은 다음 클래스에서 바꾸라는 색으로 바꿔버립니다.
이전달, 다음달 넘어가는 버튼은 gif 이미지 하나에 마우스가 올라갔을 때 모양을 함께 붙여놓았습니다. 즉, 실제 9x9 사이즈의 버튼에 사용된 gif 는 18x9 사이즈이고, 마우스가 올라가면 background position 을 가로 -9px 시켜서 작동시켰습니다.
자세한 설명은 링크로 대체합니다.
소스를 분석해 보시고.. 어려운점 있으시면 질문주세요~
실제 동작모습보기
* 퍼가시거나 인용하실 때는 꼭 출처를 남겨주세요~ 쏭군 올림 ^-^
댓글을 달아 주세요
오오..점점 비밀 메뉴얼을 풀어주시는건가요?^^
실력이 미천하여.. 비밀이랄것도 없지만^^;
종종 시간나는대로~ 한 번씩 올려보겠습니당^^;
위의 예제의 table 요소에서 thead, tbody, th같은 기본적인 요소들이 빠져있네요.
물론 필수 요소들은 아닙니다만 의미론적인 부분에서 봤을 때 있는 쪽이 더 좋겠죠.
게다가 저런 요소들을 추가함으로써 불필요한 class의 사용을 막을 수 있습니다.
맞습니다. 정확한 지적이십니다^^
페리스님의 말씀대로, thead, tbody, th, caption 등을 사용하면 불필요한 클래스의 사용을 막고, 조금더 코드크기를 줄일 수 있습니다~
물론 테이블의 컨트롤도 더 편리해집니다^^
의미론적으로 보았을 때 반드시 이 처럼 코딩해야합니다^^
본 소스에서는 쉬운 이해를 돕기 위해서
thead 등을 사용하지 않고.. 바로 class 명을 지정하여
디자인 하였습니다~
좋은 의견 감사합니다^^
웹쪽은 해보고싶다 생각만하고 실천을 못하고있네요. 책도 사놨는데..
제 일이 안정되는대로 꼭 해봐야겠습니다 ^^
아이공^^ 바쁘신가보네요~
일정이 안정되시면 꼭 도전해보세요~
어렵진 않으니까 금방 터득하실 수 있을거에요~