묻고답하기
해커다님 레이아웃 수정 문의
2009.02.27 15:57
홈 페이지 만들어 보려고 배우는 중인데요
해커더님의 "자주와" 레이아웃이 직관성이 좋은 것 같아 적용해 보려고 하는데
아래 그림에서 1, 2, 3, 란에 원하는 위젯이나 배너매뉴를 넣으려면
레이아웃 어느 곳에 삽입(수정)해야 하는지 알려 주실 수 있는지 부탁 드려 봅니다
바쁘시겠지만, 초보자 눈 높이로 알려 주신다면 넘넘 감사하겠습니다.
상세 설명이 어려우면 힌트라도 주셨으면 감사하겠습니다.
해커다님 홈페이지에 같은 질문 글 올렸는데 바쁘신지 아직 답변을 못 얻어 동일한 질문을 다시 한 번
올려 봅니다.
해당 레이아웃
<!--// js 파일 import -->
<!--%import("js/xe_official.js")-->
<!--// 레이아웃과 연동될 css 파일 import -->
<!--@if($layout_info->colorset == "white")-->
<!--%import("css/white.css")-->
<!--@elseif($layout_info->colorset == "black")-->
<!--%import("css/black.css")-->
<!--@else-->
<!--%import("css/default.css")-->
<!--@end-->
<!--@if($layout_info->background_image)-->
<style type="text/css">
body { background:#FFFFFF url({getUrl()}{$layout_info->background_image}) repeat-x left top; }
</style>
<!--@end-->
<!--@if(!$layout_info->colorset)-->
{@$layout_info->colorset = "default"}
<!--@end-->
<div id="bodyWrap">
<div id="header">
<h1><a href="{$layout_info->index_url}"><!--@if(!$layout_info->logo_image)--><img src="./images/{$layout_info->colorset}/zeroBoardXE.png" alt="ZeroBoard™ XE" class="iePngFix" /><!--@else--><img src="{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /><!--@end--></a></h1>
<!-- 언어 선택 자리 -->
<div id="language">
<a href=# onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.zazuwa.com');"><img border="0" src="./images/default/tlwkr.gif" /></a>
</div>
<!-- 언어 선택 자리 끝 -->
<!-- 최상단 메뉴 시작페이지로 -->
<div id="uplink">
<!--@foreach($upmenu->list as $key => $val)-->
<li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
<!--@end-->
</div>
<!-- 최상단 메뉴 끝 -->
<!-- 상단 메뉴 -->
<div id="top_link">
<!--@foreach($top_menu->list as $key => $val)-->
<li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
<!--@end-->
</div>
<!-- 상단 메뉴 끝 -->
<!-- 메뉴바 좌측 이미지 -->
<div id="manu_a">
<a href="{$layout_info->manu_url_a}" target="_blank" ><!--@if(!$layout_info->manu_a_image)--><img src="./images/{$layout_info->colorset}/zeroBoardXE.png" alt="ZeroBoard™ XE" class="iePngFix" /><!--@else--><img src="{$layout_info->manu_a_image}" alt="logo" border="0" class="iePngFix" /><!--@end--></a>
</div>
<!-- 메뉴바 좌측 이미지 끝 -->
<!-- 메뉴바 우측 이미지 -->
<div id="manu_b">
<a href="{$layout_info->manu_url_b}" target="_blank" ><!--@if(!$layout_info->manu_b_image)--><img src="./images/{$layout_info->colorset}/zeroBoardXE.png" alt="ZeroBoard™ XE" class="iePngFix" /><!--@else--><img src="{$layout_info->manu_b_image}" alt="logo" border="0" class="iePngFix" /><!--@end--></a>
</div>
<!-- 메뉴바 우측 이미지 끝 -->
<!-- GNB -->
<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['+ 'href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
<!--@endif--><!--@endforeach-->
</ul>
<!-- 검색기능 -->
<form action="{getUrl()}" method="post" id="isSearch">
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input name="search_target" type="radio" value="title" id="search_target" class="searchOrder" checked="checked" title="search option" />
<label for="search_target" class="checked" id="search_target_label" onclick="showHide('selectOrder'); return false">통합검색</label>
<ul id="selectOrder">
<li>
<input type="radio" name="search_target" value="title" id="search_target1" />
<label for="search_target1" onclick="chkIsKind(1, '{$lang->title}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='+
'none'">{$lang->title}</label>
</li>
<li>
<input type="radio" name="search_target" value="content" id="search_target2" />
<label for="search_target2" onclick="chkIsKind(2, '{$lang->content}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->content}</label>
</li>
<li>
<input type="radio" name="search_target" value="title_content" id="search_target3" />
<label for="search_target3" onclick="chkIsKind(3, '{$lang->title}+{$lang->content}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->title}+{$lang->content}</label>
</li>
<li>
<input type="radio" name="search_target" value="comment" id="search_target4" />
<label for="search_target4" onclick="chkIsKind(4, '{$lang->comment}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->comment}</label>
</li>
<li>
<input type="radio" name="search_target" value="tag" id="search_target5" />
<label for="search_target5" onclick="chkIsKind(5, '+
'{$lang->tag}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->tag}</label>
</li>
</ul>
<input name="is_keyword" type="text" class="inputText" id="username_bg" title="keyword" />
<input type="image" src="./images/{$layout_info->colorset}/buttonSearch.gif" alt="{$lang->cmd_search}" class="submit" />
</form>
</div>
<div id="contentBody">
<div id="columnRight">
<!-- 컨텐츠 시작 -->
{$content}
</div>
</div>
<ul id="footer">
<!-- 원래 제로보드 아래 부분 로고가 있던곳 -->
<!-- 않보이게 <li class="first-child">
<address>
<a href="http://www.zeroboard.com" onclick="window.open(this.href);return false;"><img src="./images/{$layout_info->colorset}/powerdByZeroboard.gif" alt="Powered By ZeroBoard" width="106" height="5" /></a>
</address>
</li> 않보이게 끝 -->
<!-- 원래 제로보드 아래 부분 로고가 있던곳 끝 -->
<!--@foreach($bottom_menu->list as $key => $val)-->
<li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
<!--@endforeach-->
</ul>
</div>
<!-- 아래부분 내용 시작 -->
<div id="Copyright">Copyright <a href="http://www.zazuwa.com" >zazuwa.com</a> ALL Rights Reserved. Designed by *** zazuwa
</div>
============================================================================================
해당 CSS
@charset "utf-8";
/*
NHN UIT Lab. WebStandardization Team (http://html.nhndesign.com/)
Jeong, Chan Myeong 070601~070630
*/
/* Default Skin - Start */
#selectLang { margin:0; padding:0; }
#gnb { margin:0; padding:0; }
#lnb { margin:0; padding:0; }
#lnb ul { margin:0; padding:0; }
/* 배경 */
body { background:#FFFFFF url(../images/default/bgBody.gif) repeat-x left top; }
/* 전체 넓이 설정 믿 헤더 높이 설정 */
#bodyWrap { width:790px; margin:60px auto 0 auto; }
/* 헤더 자리(헤더랑내용부분 사이에 10px공간을 없앴음 margin-bottom:0px; */
#header { position:relative; width:790px; height:120px; background:url(../images/default/bgHeader.gif) no-repeat right top; margin-bottom:0px; z-index:99;}
/* logo자리 */
#header h1 { margin:0; padding:0; position:absolute; top:-43px; left:300px;}
/* 언어 선택자리 다른 용도로 사용할려고 비워둠 */
#language { position:absolute; top:-50px; right:0px; z-index:100;}
#it_search_form { position:absolute; top:50px; right:15px;}
#it_search_form .input { border:1px solid #bc4032; height:17px; width:120px; color:#888888; font-size:.9em;}
#it_search_form .submit_button { width:1px; height:1px; visibility:hidden; }
/* 1차메뉴 부분 모든 설정 */
#gnb { position:absolute; top:15px; left:250px; height:38px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
#gnb li { float:left; list-style:none; background:url(../images/default/bgGnbVr.gif) no-repeat left center; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
/* 메인 메뉴부분 그림자효과사용, 해당소스 filter: DropShadow(Color=green, OffX=1, OffY=1, Positive=1); clip: rect( ); */
#gnb li a { filter: DropShadow(Color=#527900, OffX=1, OffY=1, Positive=1); clip: rect( ); display:block; float:left; padding:10px 8px 0 8px; height:25px; color:#ffffff; white-space:nowrap; font-weight:bold; text-decoration:none; }
#gnb li a:hover,
#gnb li a:focus { color:#FFF79D; text-decoration:underline; }
#gnb li.on a { font-weight:bold; color:#ffffff;}
/* 최상단 메뉴 */
#uplink { margin:0; padding:0; position:relative; width:200px; height:10px; top:-25px; Left:20px; clear:both; }
#uplink a { text-decoration:none; vertical-align:middle; color:#000000; font:12px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
#uplink a:hover, {text-decoration:underline; color:#000000}
#uplink li { display:inline; padding:0 0em 0 0em; }
#uplink li a { text-decoration:none; color:#555555; font:12px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
#uplink li a:hover, {text-decoration:underline; color:#214972}
#uplink li address { display:inline; }
/* 상단 메뉴 */
#top_link { margin:0; padding:0; position:absolute; width:200px; height:10px; top:-25px; right:-20px; clear:both; }
#top_link a { text-decoration:none; vertical-align:middle; color:#000000; font:12px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
#top_link a:hover, {text-decoration:underline; color:#000000}
#top_link li { display:inline; padding:0 0em 0 0em; }
#top_link li a { text-decoration:none; color:#555555; font:12px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
#top_link li a:hover, {text-decoration:underline; color:#214972}
#top_link li address { display:inline; }
/* 메뉴바 좌측 이미지 */
#manu_a { margin:0; padding:0; position:absolute; top:0px; left:20px;}
#manu_b { margin:0; padding:0; position:absolute; top:0px; right:20px;}
/* 검색부분 모든 설정 */
#isSearch { position:absolute; top:80px; right:210px; width:310px; text-align:right;}
#isSearch .searchOrder { display:none;}
/* 검색 분류선택 설정 */
#isSearch .checked { position:absolute; left:-70px; top:2px; text-align:left; display:block; padding:4px 0 0 8px; width:80px; height:14px; background:url(../images/default/bgSearchTerm.gif) no-repeat; font:12px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#666666; line-height:normal;}
*:first-child+html #isSearch .checked { top:1px; }
#isSearch ul { display:none; position:absolute; left:-110px; top:18px; padding:2px 0 3px 0; text-align:left; border:1px solid #A0C521; background:#ffffff;}
#isSearch ul li { width:67px; height:18px; list-style:none; }
#isSearch ul li input { display:none;}
#isSearch ul li label { display:block; padding:4px 0 0 4px; width:65px; height:15px; font:11px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#333333;}
#isSearch ul li label.on { background:#A0C521; }
#isSearch ul li label:hover,
#isSearch ul li label:focus { background:#A0C521; }
#isSearch .inputText { vertical-align:middle; position:relative; top:; _top:1px; left:1px; width:250px; height:14px; font:12px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; font-weight:bold; color:#333333; border:0px solid #ffffff; }
#isSearch .inputText:hover,
#isSearch .inputText:focus
*:first-child+html body#default #isSearch .inputText { position:relative; top:0px;}
#isSearch .submit { vertical-align:middle; _position:relative; _top:-1px;}
*:first-child+html body#default #isSearch .submit { position:relative; top:0px;}
/* 하단 분계선 css */
#contentBody { position:relative; width:790px; padding-bottom:30px; overflow:hidden; border-bottom:1px solid #dddddd;}
/* 내용부분 */
#columnRight { width:790px; float:right; overflow:hidden;}
#content { width:100%; overflow:hidden;}
/* 하단 내용부분 */
#footer { margin:0; padding:0; border-top:3px solid #f4f4f4; text-align:center; padding:2em 0 1em; clear:both;}
#footer li { display:inline; padding:0 .0em 0 1em; background:url(../images/default/vrType1.gif) no-repeat left center;}
#footer li.first-child { background:none;}
#footer li a { color:#999999; font:.9em "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
#footer li address { display:inline; }
/* 카피라이트 부분 */
#Copyright { margin:0; padding:0; border-top:0px solid #f4f4f4; text-align:center; padding:0em 0 0em; clear:both; color:#999999; font:.9em "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
/* 메인 로그인 하단 지역선택 부분 css */
.STYLE3 { font-size: 12px; color: #555555;}
.STYLE3 a { text-decoration: none; color: #555555;}
.STYLE3 a:hover { text-decoration:underline; }
그럼 레이아웃에 직접 삽입을 하던지 메뉴로 빼와야 하는데 메뉴로 빼오는 방법은 너무길어서 여기다 다 못올리겠지만
간단하게 삽입할 수 있는 방법은...
레이아웃 소스코드 적절한 곳에
<div style="float:right; position:absolute; right:227px; bottom:230px;">
<img srd="배너주소" alt="광고" />
</div>
style속성값을 위치에 맞게 적절히 조정하시면 되겠죠