반응형
지난 2013년 2월 NHNCompany에서 학교에 첫 정시 입학이 이루어졌습니다.
그러면서 이번에 (주)맑은커뮤니케이션에서 웹퍼블리싱 작업하게된 부분은 타 사이버 교육기관처럼 교수님들과 학생들의 필요한 웹페이지의 관리 프로그램이었습니다.
그중 이번에 소개할 내용은 멀티 디바이스를 지향하는 달력(캘린더)/스케쥴관리 MarkUp 부분입니다.
현재 정상적으로 관리되고 있는 사이트나 작업 진행중인 사이트들 중 꼭 필요하지않지만 대학교나,정규화된 회사들은 스케쥴표나 달력을 필요로 하고 있습니다. 또한 스케쥴표와 달력을 꼭 필요로한 홈페이지들도 많이 늘어나고있습니다.
그 중심에는 스마트폰을 활용해 PC와 동기화를 가능하게 하여 언제 어디서나 어떤 기기를 사용해 자신의 스케쥴을 관리할수 있게 발전이 되었기 때문입니다.
이런 흐름에 맞춰 작업을 진행하게 되었으며 포스팅 하게될 내용은 PC버전과 어떤 기종의 모바일에서도 출력이가능하고 개발도 용의한 테이블 스케쥴표를 만들게된 과정과 에러사항/해결에 대해서 정리해보겠습니다.

웹퍼블리싱 제작과정

1.테이블 마크업
강의 시간표
 
0교시
(08:00)
           
1교시
(09:00)
           
 
강의 시간표
 
0교시
(08:00)
           
1교시
(09:00)
           

- 여타 다를것 없는 기본 테이블로 월~금요일까지의 칸 입력 후 시간대별 교시를 입력합니다.
클릭시 해당데이터를 입력하거나 다른 폼에서 데이터 입력시 데이터 삽입도 가능하도록 마크업한 상태입니다.

2. 개발시 데이터 출력될 스케쥴 마크업
강의 시간표
 
0교시 (08:00)
자바스크립트 (01반)강의실A - 홍길동
JAVA (02반)강의실B - 홍길동
C++ (03반)강의실C - 홍길동
 
유비쿼터스 (04반)강의실D - 홍길동
 
1교시 (09:00)    
Node.js
Dart.js
강의실E - 홍길동
 
2교시 (10:00)            
강의 시간표
 
0교시 (08:00)
자바스크립트 (01반)강의실A - 홍길동
JAVA (02반)강의실B - 홍길동
C++ (03반)강의실C - 홍길동
 
유비쿼터스 (04반)강의실D - 홍길동
 
1교시 (09:00)  
자바스크립트
jQuery API (01반)
강의실A - 홍길동
 
Node.js
Dart.js
강의실E - 홍길동
 
2교시 (10:00)            

Css (아래의 에러사항들의 문제를 주석으로 처리)

 
.bbs_table{width:100%;border:1px solid #d0d4d9;line-height:16px;/* IE7 수정 */*border-right:0/* IE7 수정 */}
.bbs_table th:first-child,.bbs_tbl_type2 td:first-child{border-left:0}
.bbs_table th{padding:10px 9px 7px;border-width:0 0 0 1px;border-color:#dcdee2;border-style:solid;text-align:center;background-color:#eff0f2;color:#333}
.bbs_table td{padding:10px 9px 7px;border-width:1px 0 0 1px;border-color:#edeef0 #dcdee2;border-style:solid;text-align:center;line-height:33px;color:#666;/* IE7 수정 */*border-left:0;*border-top:0;*border-bottom:1px solid #edeef0;*border-right:1px solid #dcdee2;/* IE7 수정 */}
.bbs_table td input[type=text],.bbs_tbl_type2 td select,.bbs_tbl_type2 td a.fron{margin:-6px 0 -2px}
.bbs_table td:hover{border:1px solid #666 !important}
.bbs_table tr:first-child td{border-top:1px solid #dcdee2}
.bbs_table tr:first-child td:hover{border-top:1px solid #666 !important}
.schu_line_bg{border:1px solid #999 !important;background-color:#f9fafa}
.schedule_area_v1{position:relative;/* IE7 수정 */*top:3px;/* IE7 수정 */padding:18px 5px 16px;line-height:18px;font-size:12px}
.schedule_area_v1 a{display:block;position:relative;color:#333}
.schedule_area_v1 a:hover{font-weight:bold}
.schedule_close{display:block;position:absolute;top:2px;right:2px;width:15px;height:15px;cursor:pointer;border:0;background-color:#f9fafa;color:#333}

* 옵션사항

- 테이터 출력되면 해당 컬럼에 필요 문구가 입력됩니다.

- 데이터 출력시 빈 컬럼과 구분하기위해 백그라운드 색과 보더 라인을 입혀줍니다.

- 데이터 출력반환시 X(이미지로 대체가능)표시를 클릭합니다

 

제작후 데이터 입력시 에러사항들

첫째. 각 컬럼별 테이터입력시 위,아래,양옆 사방으로 보더라인 두줄표현문제
둘째. 최상단 컬럼과 타이틀 컬럼부분 보더라인 겹침문제 (IE7)
셋째. 타이틀 컬럼 제외 데이터가 출력될 모든 컬럼 '행'의 내용이 길어진 만큼 컬럼높이값이 같이 늘어나야하는 문제



에러사항과 해결방안

첫째. 각 컬럼별 테이터입력시 위,아래,양옆 사방으로 보더라인 두줄표현문제
 1. 컬럼 td 안에 div섹션을 구현 absolute 위치값을 상단으로 겹치도록 올림. 
 2. 위,아래,양옆 데이터가 입력되어도 겹쳐보이도록표현해 라인이 한줄로 표현.
 3. 컬럼 td에는 보더값만 지정, 나머지 부속성들은 div섹션에 삽입. 
 4. IE7에서는 우측,하단 부분의 라인이 겹쳐지는 문제가 발생. 
 5. absolute의 위치값이 적용되지 않고 그대로 배출하여 정상처럼 두줄로 표현하지않고 밑쪽으로 내려감.
 6. 해결책은 td의 반대 좌측,상단 보더를 없애 겹침을 유지시켜 줍니다
 
둘째. 최상단 컬럼과 타이틀 컬럼부분 보더라인 겹침문제 (IE7)
 - 해당 타이틀컬럼(thead)부분의 하단 보더라인 삭제와 컬럼의 제일 첫번째 컬럼만 상단 보더를 넣어주면 문제가 해결됩니다.
 
셋째. 월~금요일에 해당하는 교시의 내용이 길어진 만큼 컬럼높이값이 같이 늘어나야하는 문제
 - 보더라인을 IE7버그로 최초 div섹션이 주었으나 섹션별로 높이값이 데이터별로 일정하지않아, 어쩔수없이 상위클레스 td에 주었으며, 위사항들의 보더라인의 해결로 인해 자연적으로 해결.




작업완성/작업평

최초 컨펌후 작업진행 되었을때는 기존 달력들과 스케줄 소스를 조그만 수정해서 쓰면 된다는 식으로 작업하였으나, 생각외로 에러사항이 많이 생겼고(IE7) 시대의 흐름에 맞게 PC뿐만아니라 멀티 디바이스도 신경써야했기 때문에 해결방안을 찾는데도 너무 많은 시간을 투자했습니다. 언제나 그렇듯이 PSD상에서는 가볍게 느껴지는 작업도 개발로 이뤄지면 항상 생각지도 못한 에러사항이 발생합니다. 이 소스를 보고 조금이나 도움이 되는 부분이 있었으면 좋겠습니다.
감사합니다.



스케줄표 다운로드

schedule.html
다운로드

 

 

반응형

+ Recent posts