웹마스터 팁
브라우저 크기에 따라 본문 가로 크기 자동 조절
2009.03.18 15:14
XE를 사용하면서 불편한 것 중 하나가 고정 사이즈입니다.
980px에 본문은 770px로 고정 되어있죠.
그러다 보니 와이드 모니터나 해상도가 높은 모니터를 사용하면 1/3 에서 1/2의 화면은 그냥 하얀 바탕만 보여 버려지는 화면이 됩니다.
브라우저의 창크기가 커지면 본문의 가로 영역도 길어지고 브라우저를 작게하면 같이 작아지면 좋겠죠.
삽질에 삽질을 거듭해 수정을 해봤습니다.
사용한 레이아웃은 XE_Official 레이아웃을 기준으로 사용하였습니다.
버젼은 1.2입니다.
IE6, IE7, 파폭에서 테스트 해봤습니다.
IE8은 사이즈가 좀 고정으로 나오는 것 같습니다. // 다른 사람 PC에서 잠깐 본 정도라;;
1. /xe/layouts/xe_official/css/default.css
#bodyWrap { width:980px; margin:1.5em auto 0 auto; }
-> #bodyWrap { width:99%; margin:10px auto; } // 크기는 좌우 여백 만들기 위해 99% margin은 상하 10px 좌우 auto로 했습니다.
#header { position:relative; width:980px; height:120px; background:url(../images/default/bgHeader.jpg) no-repeat right top; margin-bottom:10px; z-index:99;}
-> #header { position:relative; width:100%; height:85px; background:url(../images/default/bgHeader2.jpg) no-repeat right top; margin-bottom:10px; z-index:99;} // header의 width 는100%로 바꾸고 배경이미지는 따로 하나 만들었습니다.
#contentBody { position:relative; width:980px; padding-bottom:30px; overflow:hidden; background:url(../images/default/bgContentBody.gif) repeat-y left top; border-bottom:1px solid #dddddd;}
->#contentBody {width:100%; padding-bottom:30px; overflow:hidden; background:#FFFFFF;}
// width는 100% 배경은 그냥 단색으로 했습니다.
#columnRight { width:770px; float:right; overflow:hidden;}
-> #columnRight {margin:10px 10px 10px 210px; overflow:hidden;}
// width는 설정하지 않았고 margin 왼쪽 margin을 210을 줬습니다. 왼쪽 로그인 폼 + 왼쪽 메뉴의 사이즈가 201px이라 210px을 마진을 줬습니다.
===============================================================================
요기까지 하시면 기본 레이아웃 에서는 정상적으로표시가 됩니다.
다만 IE6 에서 게시판 사용시 게시판의 header 아래 부분이 밑으로밀리는 현상이 있어 추가 수정을 하였습니다.
2. /xe/modules/board/skins/xe_board/css/common.css
.boardInformation { width100%; clear:both; margin:5px 0 2px 0; overflow:hidden; color:#666666;}
->.boardInformation { width:99%; margin:5px 0 2px 0; overflow:hidden; color:#666666;}
.boardRead { margin:10px 0 10px 0; }
->.boardRead {width:99%; margin:10px 0 10px 0; }
.boardList { width:100%; border:1px solid #e0e1db; border-top:none; overflow:hidden; }
->.boardList { width:99%; border:1px solid #e0e1db; border-top:none; overflow:hidden; }
상단부분과 내용보기, 내용리스트의 길이를 99%로 수정해주니 제대로 올라가더군요.
아무튼 MS는 IE6,7,8 이 왜 다 설정이 다른건지 미치겠네요 ㅡㅡ;;
IE6,7과 FF만 테스트 해본 내용입니다.
(코더가 아니라 레이어로 코딩하기 힘드네요ㅠ .ㅠ)
// 추가 :
WIKI와 ISSUETRACKER도 board 모듈처럼 별도로 css를 수정해야 되는 것 같습니다.
근데 나는 왜 ... 왜 추가 앞에 //로 주석처리를 하는거지 ㅡㅡ??
제목 | 글쓴이 | 날짜 |
---|---|---|
EXIF 메타정보 필요하신 분 있으시면 | forest535 | 2018.04.09 |
게시판 본문읽기에서 컨텐츠 이미지와 텍스트 분리하여 출력하기 | forest535 | 2018.04.09 |
관리권한 없이도 특정그룹에게 비밀글 열람 및 댓글작성 권한 부여하는 방법 ( 부운영자등을 위해) | sejin7940 | 2018.04.26 |
[PHP] 이름 및 연락처 마스킹 처리 [1] | ppumweb | 2018.05.21 |
단축url API 사용하시는 분들... | 미스터강 | 2018.06.01 |
게시판글 엑셀 파일 보내기 php7용 | 황금날개 | 2018.06.05 |
도메인 변경 또는 설치 폴더 변경시 이미지 주소변경하기 | 해피정닷컴 | 2018.06.08 |
XE용 CKEditor v4.9.2 (다크 스킨 수정) [4] | 큰돌♡ | 2018.07.04 |
DB를 손쉽게 관리 [1] | EISOFT | 2018.07.15 |
Code-Highlighter 3.0.83 가로 스크롤바를 어디론가 보내 버리고 싶으신 분. | 달빛늑대 | 2018.07.16 |
Google 스프레드시트에서 구글 번역으로 XE 다국어 내용 만들기(Lang.xml 용도) | 달빛늑대 | 2018.07.17 |
act로 다른 페이지 보여주기 [1] | 이온디 | 2018.07.25 |
다른 서버 간 서브도메인 쿠키 공유 | 에이트 | 2018.08.04 |
썸네일 방식으로 이미지 원본 주소 가져오기 | 에이트 | 2018.08.22 |
PHP 뮤텍스 락 설치법(memcached 활용) [1] | 에이트 | 2018.09.03 |
PHP 뮤텍스 락 설치법(redis 활용) | 에이트 | 2018.09.11 |
무료 psd, html 탬플릿, 아이콘 사이트공유합니다. | 허허길드짱 | 2018.11.27 |
file 모듈 insertFile() manual_insert 시 디렉토리생성 에러 문제 해결 방법 | onTrust | 2019.01.02 |
트윗버튼, 페어스북 좋아요 버튼, 카카오스토리 좋아요 버튼 태그 | elancer | 2019.03.11 |
무료이미지 다운 받을 수 있는 곳 | elancer | 2019.03.19 |
// 좋은 습관 아닌가요? ㅋㅋㅋ "//" 이것 말고 다른것 뭐로 할까요...없는것 같은데요...가장 좋은 표식인것 같습니다.
저도 // 자주 사용해야 겠습니다...소스튜닝...감사하게 잘 보았습니다...