묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
official ver2 레이아웃 가로 사이즈 줄이려면 css 의 어느부분을 손대야 하는지요?
2009.12.07 16:20
현재 XE 사이트에서 쓰고 있는 official ver2 스킨을 적용하고 있습니다.
전체 가로사이즈를 800px 정도로 줄이고 싶습니다.
css 를 살펴보고 있는데, 어느부분의 width 손대야 할지 잘 모르겠습니다.
대략 container 부분과 body 부분이라 생각하고 width 값을 임의로 줘봤는데,
오른쪽 사이드메뉴와 검색창이 각각 따로 노는 군요.
전체 가로 사이즈를 줄일 수 없을까요?
더불어 최 상단 타이틀바(배너) 의 세로 사이즈도 조절하려면 어느부분에 손을 대야 할런지요?
위 질문에 이어 소스 일부분을 아래 첨부합니다.
주로 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;}