묻고답하기

official ver2 레이아웃 가로 사이즈 줄이려면 css 의 어느부분을 손대야 하는지요?

2009.12.07 16:20

유서영895

현재 XE 사이트에서 쓰고 있는 official ver2 스킨을 적용하고 있습니다.

전체 가로사이즈를 800px 정도로 줄이고 싶습니다.

css 를 살펴보고 있는데, 어느부분의 width 손대야 할지 잘 모르겠습니다.

대략 container 부분과 body 부분이라 생각하고 width 값을 임의로 줘봤는데,

오른쪽 사이드메뉴와 검색창이 각각 따로 노는 군요.

전체 가로 사이즈를 줄일 수 없을까요?

더불어 최 상단 타이틀바(배너) 의 세로 사이즈도 조절하려면 어느부분에 손을 대야 할런지요?

이 게시물을

유서영895

2009.12.07 18:11

위 질문에 이어 소스 일부분을 아래 첨부합니다.

주로 width 를 위주로 수정하면 될것 같은데, 어떤 width 를 건드려야 할까요?

/* Skip To Content */
a.skipToContent{ display:block; width:100%; position:absolute; top:0; clear:both; overflow:hidden; height:0; text-decoration:none; text-align:center;}
a.skipToContent:hover,
a.skipToContent:active,
a.skipToContent:focus{ height:auto; margin:0 0 10px 0; padding:5px;}

/* Element Reset */
html,
body{ height:100%; width:800px;}
body { margin:0; font-size:12px; background:#fff; color:#000;}
address { font-style:normal;}
img,
fieldset{ border:0; margin:0; padding:0;}
form{ margin:0;}
legend{ position:absolute; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden; z-index:-1;}
hr{ display:none;}
sup,
sub{ font-style:normal; font-weight:normal;}

/* Layout */
div.black{ background:url(../img/bgBlack.gif) repeat-x; border-bottom:37px solid #1a1a1a;}
#xe .black{ border-bottom:0;}
div.blue{ background:url(../img/bgBlue.gif) no-repeat center 120px;}
.sky{ background:url(../img/bgSky.gif) no-repeat center 70px;}
div.cyan{ background:url(../img/bgCyan.gif) no-repeat center 70px;}
div.purple{ background:url(../img/bgPurple.gif) no-repeat center 70px;}
div.orange{ background:url(../img/bgOrange.gif) no-repeat center 70px;}

body.gradBGblack {background:url(../img/gradBGblack.png) repeat-x 0 0;}
body.gradBGblue {background:url(../img/gradBGblue.png) repeat-x 0 0;}
body.gradBGsky {background:url(../img/gradBGsky.png) repeat-x 0 0;}
body.gradBGcyan {background:url(../img/gradBGcyan.png) repeat-x 0 0;}
body.gradBGpurple {background:url(../img/gradBGpurple.png) repeat-x 0 0;}
body.gradBGorange {background:url(../img/gradBGorange.png) repeat-x 0 0;}

#container{ margin:0 20px; width:600px;}
#header{ height:120px; z-index:2;}
#body{ margin:0; padding-top:30px; background:url(../img/bgBody.gif) repeat-y 600px 0; z-index:1;}
.fixed .c #body{ background:none; margin-bottom:30px;}
#body .extension{ margin-bottom:60px;}
.fixed .ce #body #content,
.fixed .ec #body #content{ padding-bottom:60px; width:600px;}
.fixed .ce #body .e1,
.fixed .ec #body .e1{ width:160px;}
#footer{ padding:10px 0; border-top:1px solid #d4d4d4; border-bottom:1px solid #d4d4d4; margin-bottom:60px; font-size:11px;}
div.black #footer{ border:0; margin-bottom:-36px; margin-top:100px;}
#sitemap{ padding:15px 0; margin-bottom:15px; border-top:2px solid #464646;}
div.black #sitemap{ border-bottom:1px solid #d4d4d4;}

/* Header */
#header a{ text-decoration:none;}
#header a:hover,
#header a:active,
#header a:focus{ text-decoration:underline;}

#header h1{ margin:0; position:relative; top:15px;}
#header h1.noMargin { margin:0; position:relative; left:0; top:0; }
#header h1 a{ display:block; margin:0; float:left; text-decoration:none;}
div.black #header h1 a{ background-position:0 0;}
#header h1 span{ position:relative; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden; }

#header .account{ position:absolute; top:40px; right:0; margin:0; padding:0; z-index:2;}
#header .account li{ position:relative; float:left; list-style:none; background-image:url(../img/lineHeaderVr.gif); background-repeat:no-repeat; background-position:left 4px;}
div.black #header .account li{ background-image:url(../img/lineHeaderVrBlack.gif);}
#header .account li *{ vertical-align:top;}
#header .account li li{ float:none; height:auto; background-image:none;}

#header .account li.log{ background-image:none; font-size:0; line-height:0;}
#header .account li.log a{ display:block; padding:5px 8px;}

#header .account li.profile button{ border:0; padding:0; width:53px; height:15px; cursor:pointer; background-color:transparent; background-image:url(../img/buttonProfile.gif); background-repeat:no-repeat; background-position:center -10px; overflow:visible;}
div.black #header .account li.profile button{ background-position:center 5px;}
#header .account li.profile button span{ position:relative; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden; z-index:-1;}

#header .account li.profile .memberProfile{ display:none; position:absolute; top:15px; left:8px; padding:20px; background:#fff; border:2px solid #737373;}
#header .account li.profile .memberProfile.active{ display:block;}
#header .account li.profile .memberProfile .authorName{ margin:0 0 8px 0; font-size:16px; font-weight:bold; color:#333; white-space:nowrap;}
#header .account li.profile .memberProfile ul{ margin:0; padding:15px 15px 5px 15px; list-style:none; border:1px solid #f2f2f2; background:#fcfcfc;}
#header .account li.profile .memberProfile li{ float:none; white-space:nowrap; margin:0 0 10px 0; padding:0 0 0 10px; background:url(../img/bulletB.gif) no-repeat left center;}
#header .account li.profile .memberProfile li a{ background:none; color:#333; text-decoration:none;}
#header .account li.profile .memberProfile li a:hover,
#header .account li.profile .memberProfile li a:active,
#header .account li.profile .memberProfile li a:focus{ text-decoration:underline;}
#header .account li.profile .memberProfile .close{ position:absolute; cursor:pointer; border:0; padding:0; top:0; right:0; width:27px; height:27px; background:transparent url(../img/buttonCloseX.gif) no-repeat center center;}
#header .account li.profile .memberProfile .close span{ position:absolute; font-size:0; line-height:0; width:0; height:.; overflow:hidden; visibility:hidden;}

#header .account li.register a{ display:block; width:43px; height:5px; padding:5px 8px; background-image:url(../img/buttonRegister.gif); background-repeat:no-repeat; background-position:center -10px;}
div.black #header .account li.register a{ background-position:center 5px;}
#header .account li.register a span{ position:relative; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden; z-index:-1;}

#header .account li.language{ position:relative;}
#header .account li.language em{ display:inline-block; height:15px; overflow:hidden; padding:0 8px; font-size:9px; font-style:normal; background-image:url(../img/buttonLanguage.gif); background-repeat:no-repeat; background-position:-92px -10px;}
div.black #header .account li.language em{ background-position:8px -10px;}
#header .account li.language em span{ display:inline-block; overflow:hidden; visibility:hidden;}
#header .account li.language em.ko{ background-position:-92px -10px;}
div.black #header .account li.language em.ko{ background-position:8px -10px;}
#header .account li.language em.en{ background-position:-92px -25px;}
div.black #header .account li.language em.en{ background-position:8px -25px;}
#header .account li.language em.jp{ background-position:-92px -40px;}
div.black #header .account li.language em.jp{ background-position:8px -40px;}
#header .account li.language em.zh-CN{ background-position:-92px -55px;}
div.black #header .account li.language em.zh-CN{ background-position:8px -55px;}
#header .account li.language em.zh-TW{ background-position:-92px -70px;}
div.black #header .account li.language em.zh-TW{ background-position:8px -70px;}

#header .account li.language button{ height:15px; border:0; padding:0; font-size:0; line-height:0; overflow:visible; cursor:pointer; background-image:url(../img/buttonLanguage.gif); background-repeat:no-repeat; background-position:-92px 5px; background-color:transparent;}
div.black #header .account li.language button{ background-position:8px 5px;}
#header .account li.language button span{ font-size:0; line-height:0; width:0; height:0; overflow:hidden; visibility:hidden;}
#header .account li.language .sLanguage{ position:relative; width:100px; text-align:right;}
#header .account li.language .sLanguage span{ font-size:0; line-height:0; letter-spacing:-100px; display:inline-block; visibility:visible; width:100%; height:15px; background-image:url(../img/buttonSelectLanguageToggle.gif); background-repeat:no-repeat; background-position:85px 4px;}
#header .account li.language.open .sLanguage span{ background-position:85px -6px;}
#header .account li.language .languageList{ display:none; width:98px; margin:0; padding:5px 0; position:absolute; top:20px; right:0; background:#fff; border:1px solid #eee;}
#header .account li.language.open .languageList{ display:block; z-index:999;}
#header .account li.language .languageList button{ width:100%;}
div.black #header .account li.language .languageList{ background:#666; border-color:#888;}
#header .account li.language .languageList .ko button{ background-position:-92px -10px;}
div.black #header .account li.language .languageList .ko button{ background-position:8px -10px;}
#header .account li.language .languageList .en button{ background-position:-92px -25px;}
div.black #header .account li.language .languageList .en button{ background-position:8px -25px;}
#header .account li.language .languageList .jp button{ background-position:-92px -40px;}
div.black #header .account li.language .languageList .jp button{ background-position:8px -40px;}
#header .account li.language .languageList .zh-CN button{ background-position:-92px -55px;}
div.black #header .account li.language .languageList .zh-CN button{ background-position:8px -55px;}
#header .account li.language .languageList .zh-TW button{ background-position:-92px -70px;}
div.black #header .account li.language .languageList .zh-TW button{ background-position:8px -70px;}

#header .account li.language .languageList li { display:none;}
#header .account li.language .languageList .ko,
div.black #header .account li.language .languageList .ko,
#header .account li.language .languageList .en,
div.black #header .account li.language .languageList .en,
#header .account li.language .languageList .jp,
div.black #header .account li.language .languageList .jp,
#header .account li.language .languageList .zh-CN,
div.black #header .account li.language .languageList .zh-CN,
#header .account li.language .languageList .zh-TW,
div.black #header .account li.language .languageList .zh-TW { display:block; }

/* GNB */
.gnb{ position:absolute; left:0; bottom:0; margin:0; padding:0; list-style:none;}
.gnb li{ float:left; padding-right:40px;}
.gnb li a{ display:block; height:32px; text-decoration:none !important; color:#fff; font-family:tahoma; float:left;}
.gnb li a span{ display:inline-block; padding-top:10px; }
.gnb li.black a:hover ,
.gnb li.black.selected a { color:#aaa; }
.gnb li.blue a:hover ,
.gnb li.blue.selected a { color:#9884FF; }
.gnb li.sky a:hover ,
.gnb li.sky.selected a { color:#5999E5; }
.gnb li.cyan a:hover ,
.gnb li.cyan.selected a { color:#2ACFCD; }
.gnb li.purple a:hover ,
.gnb li.purple.selected a { color:#C835CA; }
.gnb li.orange a:hover ,
.gnb li.orange.selected a { color:#F0B848; }

/* Search */
#header .search{ position:absolute; right:0; bottom:0; width:158px; height:32px; z-index:1;}
div.black #header .search{ background:url(../img/bgBlackSearch.gif) no-repeat;}
#header .search *{ vertical-align:middle;}
#header .search .inputText{ position:absolute; top:9px; left:20px; border:0; background:#fff; width:110px; height:15px; padding:0; font-size:12px;}
#header .search .inputSearch{ position:absolute; top:9px; left:135px;}

좋아요 댓글 신고

글쓴이	제목	최종 글
XE	공지 글 쓰기,삭제 운영방식 변경 공지 [16]	2019.03.05 _by 남기남
무대포@	제로보드에 감사 짜장면 시켜주기 [1]	2008.09.29 _by 비나무
초보	텍스트큐브처럼 숫자말고 한글이나 영문을 글주소로 할수있나요?? [2]	2008.09.29 _by 라르게덴
아방스	첨부파일 용량 랭킹 위젯?? [1]	2008.09.29 _by 라르게덴
스노클링	게시판이 있는 페이지에서 휠스크롤이 안먹혀요
나나나나난	게시판 작성일 없애기 [3]	2008.09.29 _by 나나나나난
리봄	메뉴 사이 간격을 넓히고 싶은데, 어디 부분을 조절해야 하는지요? [4]	2008.09.29 _by 리봄
웃는기차	document_srl값으로 섬네일 위치를 알려면?
INTROX	회원가입시 추가 정보를 기본정보로 바꾸는 방법이 있나요? [1]	2008.09.29 _by 느까끼
유시몬	페이지 "내용직접추가"시 페이지 크기가 제한되나요 ? [1]	2008.09.29 _by 백성찬
행복한일상	관리자 -> 페이지 메뉴 부분을 들어갈수가 없습니다. [1]	2008.09.29 _by 느까끼
철학박사	이미지 삽입하는 방법? [2]	2008.09.29 _by 느까끼
zeroman	질문은 많이 해봤지만 답은 없는건가요? 눈물뿐입니다. [2]	2008.09.29 _by 느까끼
Juni	상단, 하단 레이아웃 설정에서 인클루드파일.. [1]	2008.09.29 _by 느까끼
김병화999	외부에서 글쓰기 할대는 뭐가 전달되서 쓰기가 가능한거죠?
bsy.myid.net	관리자, 망했어요. [2]	2008.09.29 _by bsy.myid.net
park moo hee	폼메일도 구현이 되나여???
웃는기차	외부페이지에서 document_srl 만가지고 썸네일 출력할려면?
다스베이더	로그인시 존재하지 않는 아이디입니다 이지만 회원목록에 아이디가 있을 때
유성권971	회원가입폼 관련 [3]	2008.09.29 _by 유성권971
yr	플리즈~ 도와주세요~ [꼬리표 목록 출력 위젯 에러]

태그 쓰기

묻고답하기

official ver2 레이아웃 가로 사이즈 줄이려면 css 의 어느부분을 손대야 하는지요?

댓글 1

유서영895

About

Get involved

Blog

Download

Support

Showcase