'ie6,7에서 사이드뷰가 게시판 목록에서 아래 사이드뷰에 가려지는 현상 수정' 주석에 해당하는 내용 때문입니다.
먼저 이 스크립트가 사용된 이유를 간단하게 설명드리자면, ie6,7 에서는 나중에 랜더링 된 테이블 셀이, 보다 먼저 랜더링 된 테이블 셀 보다 개념 상으로 더 낮은 'z-index 값'을 갖는 것으로 여겨집니다.
그래서 보통은 아랫 줄이 윗 줄보다 높은 z-index 값을 갖는다고 가정하는 것인데요. 이런 상태가 되면 윗 줄의 사이드뷰가 나타났을 때 아랫 줄의 사이드뷰보다 낮은 z-index 값으로 가려지는 현상이 생기게 됩니다. 당연히 가려진 영역만큼은 클릭할 수 없게 됩니다.
이런 현상은 ie6,7 에서만 보고되었으며, 해당 현상에 대해 대응하기 위해 스크립트로 윗 줄의 z-index 값을 아랫 줄의 z-index 값보다 높게 바꿔주고 있습니다. 이 과정에서 td 에 position:relative 속성을 부여하게 되는데, 이 속성이 부여되는 순간 지금 올려주신 캡쳐 이미지 같은 증상이 나타나는 것입니다.
다른 제목셀 등에 position:relative 값을 부여해보시면 이해가 한결 쉬우실 것입니다.
다양한 방법으로 올려주신 증상의 해결을 위해 노력하겠습니다만, 현재까지는 뚜렷한 방법이 없습니다. 죄송합니다.
170 라인
.basic_tbl {margin-bottom:10px;width:100%;border-collapse:collapse !important;border-collapse:separate;border-spacing:0} 로 대체
177 라인
.basic_tbl td {padding:8px 5px 6px;border-top:1px solid #e9e9e9 !important;border-top:0;border-bottom:1px solid #e9e9e9;line-height:1.5em;word-break:break-all} 로 대체
CSS 초기화 및 일부 공통 스타일 정의 때문에 개별 스킨 css 에서 완벽하게 독립되도록 구성하기가 꺼려집니다.
예를 들어, btn_admin class 같은 경우, 게시판 스킨에서도 쓰지만 설문조사 등 다른 영역에서도 쓰입니다. 굳이 각각의 스타일시트에 매번 정의할 필요가 없겠죠. ^^;;
아실만한 팁이지만, 사이트 안정화 이후 스킨을 자주 교체하지 않으신다면 각 스킨 폴더의 css 내용을 default.css 혹은 이에 준하는 공통 css 파일 하나로 합쳐서 운영하시면 성능면에서 더 좋으실 겁니다. 그리고 이렇게 하나로 합칠 때 지금의 구조가 더 빛을 발하리라 생각합니다.
g4s 초기 개발 때는 default.css 하나만 사용을 하다가, 스킨 제작 등의 편의를 위해 지금의 구조로 css 를 나눠 놓은 것입니다.
그리고 원본파일을 수정하지 않는 방법이 없는 것은 아닙니다.
앞서 언급한 btn_admin 을 예로 든다면,
default.css 의 .btn_admin {} 에서 !important 를 모두 해제(삭제)하시고,
skin/board/basic/style.css 에 .btn_admin {} 을 추가, 속성에 !important 를 넣어주시면 원본을 수정하지 않고 개별 스킨마다 원하는 스타일을 만들어내실 수 있습니다.
댓글 7개
'ie6,7에서 사이드뷰가 게시판 목록에서 아래 사이드뷰에 가려지는 현상 수정' 주석에 해당하는 내용 때문입니다.
먼저 이 스크립트가 사용된 이유를 간단하게 설명드리자면, ie6,7 에서는 나중에 랜더링 된 테이블 셀이, 보다 먼저 랜더링 된 테이블 셀 보다 개념 상으로 더 낮은 'z-index 값'을 갖는 것으로 여겨집니다.
그래서 보통은 아랫 줄이 윗 줄보다 높은 z-index 값을 갖는다고 가정하는 것인데요. 이런 상태가 되면 윗 줄의 사이드뷰가 나타났을 때 아랫 줄의 사이드뷰보다 낮은 z-index 값으로 가려지는 현상이 생기게 됩니다. 당연히 가려진 영역만큼은 클릭할 수 없게 됩니다.
이런 현상은 ie6,7 에서만 보고되었으며, 해당 현상에 대해 대응하기 위해 스크립트로 윗 줄의 z-index 값을 아랫 줄의 z-index 값보다 높게 바꿔주고 있습니다. 이 과정에서 td 에 position:relative 속성을 부여하게 되는데, 이 속성이 부여되는 순간 지금 올려주신 캡쳐 이미지 같은 증상이 나타나는 것입니다.
다른 제목셀 등에 position:relative 값을 부여해보시면 이해가 한결 쉬우실 것입니다.
다양한 방법으로 올려주신 증상의 해결을 위해 노력하겠습니다만, 현재까지는 뚜렷한 방법이 없습니다. 죄송합니다.
아울러 버그를 알려주셔서 감사합니다.
/css/default.css 의 각 라인을 다음 내용으로 대체해보세요.
170 라인
.basic_tbl {margin-bottom:10px;width:100%;border-collapse:collapse !important;border-collapse:separate;border-spacing:0} 로 대체
177 라인
.basic_tbl td {padding:8px 5px 6px;border-top:1px solid #e9e9e9 !important;border-top:0;border-bottom:1px solid #e9e9e9;line-height:1.5em;word-break:break-all} 로 대체
이렇게 하면 올려주신 증상은 해결할 수 있지만 셀 간격은 떨어지는 단점이 있습니다. ㅠㅠ
PS: 게시판 스킨 css가 분리되지 않고 상당부분 "/css/default.css" 이 파일의 영향을 받도록 제작하신 이유가 있으신가요?
그냥 궁금해서요...ㅡ.,ㅡ;
예를 들어, btn_admin class 같은 경우, 게시판 스킨에서도 쓰지만 설문조사 등 다른 영역에서도 쓰입니다. 굳이 각각의 스타일시트에 매번 정의할 필요가 없겠죠. ^^;;
아실만한 팁이지만, 사이트 안정화 이후 스킨을 자주 교체하지 않으신다면 각 스킨 폴더의 css 내용을 default.css 혹은 이에 준하는 공통 css 파일 하나로 합쳐서 운영하시면 성능면에서 더 좋으실 겁니다. 그리고 이렇게 하나로 합칠 때 지금의 구조가 더 빛을 발하리라 생각합니다.
g4s 초기 개발 때는 default.css 하나만 사용을 하다가, 스킨 제작 등의 편의를 위해 지금의 구조로 css 를 나눠 놓은 것입니다.
답변해 주셔서 감사합니다...(--)(__)
그리고 원본파일을 수정하지 않는 방법이 없는 것은 아닙니다.
앞서 언급한 btn_admin 을 예로 든다면,
default.css 의 .btn_admin {} 에서 !important 를 모두 해제(삭제)하시고,
skin/board/basic/style.css 에 .btn_admin {} 을 추가, 속성에 !important 를 넣어주시면 원본을 수정하지 않고 개별 스킨마다 원하는 스타일을 만들어내실 수 있습니다.
의견 감사합니다.
스킨 작업하다 원본("/css/default.css") 수정 없이 배포하려니 번거로워서...ㅡ.,ㅡㅋ
답변해 주셔서 감사합니다...(--)(__)