XE를 내것으로, DIV? 레이어 주무르기 1편 >> http://www.zeroboard.com/zbxe_user_tip/16392078
XE를 내것으로, 레이아웃을 손수 내손으로 - 1편 준비하기 >> http://www.zeroboard.com/zbxe_user_tip/16417978
우선 앞으로 만들게될 레이아웃은
제로보드 공식홈을 모티브(?)로 비슷하게 제작해보도록 하겠습니다.
물론 모두 마스터 하게 되신다면, 얼마든지 응용은 가능하겠죠?!
시작하겠습니다.
제작에 들어가기 전, 자신이 만들고 있는 레이아웃이 재대로 되어가는가 확인이 필요합니다.
그러기위해서 우선 xe와 연동을 시켜두어야 겠지요.?
먼저 빈 페이지를 하나 생성해줍니다.
그런다음 메뉴를 생성해 주지요.
테스트를 위해 임시로 생성하는것이니 처음부터 복잡하게 구성하지 않으셔도 됩니다.
상단메뉴는 재대로 뜨는지, 서브메뉴는 또 어떻게 구현되는지 알아보기 위함이니까요.
이제 레이아웃을 생성해 줍시다.
1편에서 다루었던 info.xml을 생성/수정 하셨다면 아래와 같이 뜹니다.
나만의 홈이지롱.. -_-
제목을 적어주고..
빈칸없이 꽉꽉 채워주세요.
로고이미지는 당장 자신의 로고가 아니어도 좋습니다. 대강의 형태를 잡아놓고 나중에 디테일하게 정리를 해주면 되니,
대략적인 자신의 로고사이즈에 맞추어 이미지만 넣어주시면 되겠습니다..
별탈없이(?) 성공적으로 생성을 해주셨다면, 접속을 해볼까요?
페이지생성시 기본페이지로 설정을 해주셨다면.. 계정주소/zbxe 로 바로 접속이 가능하지만,
이전에 미리 만들어놓은 사이트가 있는데 테스트겸 하시는분들은 zbxe/mid?=생성한 페이지 mid값..
으로 접속을 해주시면 되겠습니다.. 아시겠지만 뭐...
휑.. 하니 버튼3개만 뜨겠죠? 당연한겁니다. 아무것도 해준게 없으니까요..
이렇게 뜨신다면 xe와 연동은 성공하신겁니다.
이제 본격적으로 레이아웃을 만들어보죠.
이번엔 일단 헤드부터 꾸며보도록 하겠습니다.
레이아웃은 크게 3덩어리로
Header, Content, Footer 로 나누어 주겠습니다.
나누지 않고 바로 들어갈수도 있지만, 정리도 해줄 겸, 계속하다 보시면 왜 나누어주어야 하는지 아시게 될거에요..
시작합시다.
layout.html 파일과 css/style.css 파일 2개를 열어줍니다.
layout.html
<!--%import("css/style.css")-->
<div id=Body_Layer>
<div id=Header></div>
<div id=Content></div>
<div id=Footer></div>
</div>
가장 상단에 css와 연동을 시켜주는 소스를 삽입해주고 레이아웃 구성에 들어갑니다.
근데 가만보니, Header와, Content, Footer 를 Body_Layer 라는 레이어가 감싸고 있네요?
Body_Layer의 마진값을 주어 사이트의 위치를 지정해 줄 수가 있습니다.
좌측에 놓을지, 우측에 놓을지, 아니면 중앙에 놓을것인지를 Body_Layer의 마진으로 설정이 가능합니다.
당췌 무슨말인지..
css/style.css
@charset "utf-8";
#Body_Layer { width:920px; margin:20px auto 0 auto;background:#999999; }
Body_Layer에 너비를 920px(사이트의 가로길이), 마진에 20px, auto 0 auto 를 주고, div는 배경값이 없기때문에 구분을위해 임시로 #999999 값을 줘보겠습니다.
이와같이 작성을 하시고, 확인을 해보시면 브라우져의 정가운데에 920px의 레이어가 들어가 있을 겁니다.
margin에 값을 주는 방법은, 상단, 우측, 하단, 좌측 순으로 값을 기입해 주면됩니다.
즉 위 소스는 상단 20px, 하단엔 값이 없이 좌우측에 auto 값을 가지고 있습니다.
auto는 920px의 남은여백들을 알아서 채워주는 역할을 하는데, 좌우측에 auto 값을 주면 레이어가 중앙에 들어가게 되는것이지요.
단, 좌우측에는 auto가 적용이 되지만, 상하단에는 auto가 적용이 되지않습니다. 아마 되었다면 테이블처럼 화면의 정중앙정렬등..
꾀 유용했을텐데 말이죠. 아쉽네요.
주저리가 너무..
이제 헤더를 꾸며봅시다. 자신의 사이트의 가로길이를 정하셨다면, 상단에 쓰일 이미지가 필요합니다.
공식홈을 보시면 상단에 zeroboardXE 라는 로고와 뒷배경에 블랙톤의 박스가 보이실겁니다.
저게 하나의 이미지로 되어있는거거든요.
우리도 해볼까요?
전 헤더의 높이를(상단메뉴까지 포함)180px로 잡겠습니다.
너무 대강..
이해를 돕기위해 임시로 만드는 레이아웃이니 괜찮..겠죠?
css/style.css
@charset "utf-8";
#Body_Layer { width:920px; margin:20px auto 0 auto;background:#999999; }
#Header { width:920px; height:180px; position:relative; background:url(../images/header_bg.gif) no-repeat right top;z-index:99; }
position:relative ??
div의 포지션은 2가지의 속성이 있습니다.
relative와 abolute 가 있는데, relative는 상대적인 위치, absolute는 절대적 위치를 지정해 줄 수 있습니다.
relative는 정확한 좌표를 입력해 주지 않는다면 블럭처럼 차곡차곡쌓이게 됩니다. 일반 레이어와 동일하죠.
그렇다면 absolute는? 자신의 정확한 위치를 알지 못한다면 레이어는 최상단으로 이동하게 됩니다.
레이아웃을 Header, Content, Footer 로 나누어 준이유가 여기있습니다.
Header 레이어는 레이아웃의 상단부분을 묶어주는 레이어 입니다.
이 Header라는 레이어안에 어떠한 레이어를 넣고, 포지션을 absolute로 주게되면, 이 레이어는 헤더라는 틀에서 벗어나지를 못합니다.
좌표를 아무리 크게크게 주어도 헤더안에만 갖히게 된다지요. 이러한 특징덕에 absolute를 사용하게 되지요.
그렇다면 relative는? 헤더를 초과하는 좌표를 입력해주면 그 레이어는 헤더를 벗어나버려요..
왜궂이 relative와 absolute를 나누어 쓰는지는 직접 해보면서 여러차례 경험?을 해보셔야 알게될거에요..ㅋㅋ
background:url(경로) 반복여부 시작위치; 를 지정해줍니다.
경로를 지정해주실때 주의할것은.. style.css 파일은 css폴더안에 들어있고, 이미지는 images 라는 폴더에 들어있습니다.
여기서 바로 /images/header_bg.gif 를 적용해주면 인식하게되는 경로는 css/images/header_bg.gif 가 되어버립니다.
../ 사용하시는거 잊지마세요.
z-index 는 레이어의 겹쳐진 위치? 를 의미하는데,
포토샵을 해보신 분이라면 아실겁니다. 레이어의 위치에따라 보여지는 이미지는 각각 다르게 되지요.
Header는 중요한 녀석이니, z-index를 99로 놓아줍니다.
layout.html
<!--%import("css/style.css")-->
<div id=Body_Layer>
<!-- 헤더시작 -->
<div id=Header></div>
<!-- 헤더끝 -->
<!-- 컨텐츠시작 -->
<div id=Content>컨텐츠</div>
<!-- 컨텐츠끝 -->
<!-- 푸터시작 -->
<div id=Footer>푸터</div>
<!-- 푸터끝 -->
</div>
구분을 쉽게하기 위해 인용구를 중간중간에 놓아주었습니다.
이쯤에서 레이아웃이 어떻게 나올지, 확인을 해볼까요?
헤더 레이어에 너비 920px, 높이 180px 이 적용되고 배경이미지 역시 잘 깔려있군요.
본문과 푸터부분의 배경은 아까 Body_Layer에 임시로 준 배경값때문에 그렇습니다. 이상한거 아니에요~
이제 로고, 메뉴, 검색창, 언어선택창도 넣어볼까요.
우선 로고부터 차근차근~
layout.html
<!--%import("css/style.css")-->
<div id=Body_Layer>
<!-- 헤더시작 -->
<div id=Header>
<div id=Logo><a href="{$layout_info->index_url}"><img src="{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /></a></div> </div>
<!-- 헤더끝 -->
<!-- 컨텐츠시작 -->
<div id=Content>컨텐츠</div>
<!-- 컨텐츠끝 -->
<!-- 푸터시작 -->
<div id=Footer>푸터</div>
<!-- 푸터끝 -->
</div>
Logo 레이어를 추가해주었습니다.
이제 Logo의 위치를 지정해 주어야 겠지요..
css/style.css
@charset "utf-8";
#Body_Layer { width:920px; margin:20px auto 0 auto;background:#999999; }
#Header { width:920px; height:180px; position:relative; background:url(../images/header_bg.gif) no-repeat right top;z-index:99; }
#Logo { width:200px; position:absolute; top:30px; left:20px; }
포지션은 absolute로, top과 left 값은 계속 확인해가면서 각각 넣어줍니다.
로고는 레이아웃 등록을 하실때 지정해준 이미지가 뜨게됩니다. 이미지가 뜨지 않는분은 다시 확인해 보세요.
이번엔 메뉴차례입니다.
메뉴는 제로보드 공식사이트의 소스를 살짝..
공식홈의 레이아웃파일 layout.html 의 37~48번째줄입니다.
layout.html
layout.html의 파일은 소스만 그대로 퍼오시면 됩니다.
중요한건 자신의 홈에맞는 스타일설정이겠지요?
역시 기본소스는 공식홈에서 퍼오도록 하겠습니다.
css/style.css
@charset "utf-8";
#Body_Layer { width:920px; margin:20px auto 0 auto;background:#999999; }
#Header { width:920px; height:180px; position:relative; background:url(../images/header_bg.gif) no-repeat right top;z-index:99; }
#Logo { width:200px; position:absolute; top:30px; left:20px; }
#gnb { position:absolute; top:138px; left:3px; height:38px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
#gnb li { float:left; list-style:none; background:url(../images/bgGnbVr.gif) no-repeat left center; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
#gnb li a { display:block; float:left; padding:14px 15px 0 16px; height:25px; color:#000000; white-space:nowrap; text-decoration:none; }
#gnb li a:hover,
#gnb li a:focus { color:#ff0000;}
#gnb li.on a { font-weight:bold; color:#000000; background:url(../images/bgGnbOn.gif) no-repeat center top;}
나름대로 레이아웃에 맞게 수정을 해주었습니다.
수정해주어야 할부분은 하이라이트 처리 해드렸구요..ㅋㅋ
#gnb li a
gnb 에 포함되는 li 의 a(링크) color:일반링크의 컬러
#gnb li.a:focus {color:마우스오버시 컬러}
#gnb li.on a {(해당메뉴에 들어갔을때,) color, background}
여기서 이용된 bgGnbVr.gif 와 bgGnbOn.gif 는 기본홈의 images 에서 따왔습니다.
bgGnbVr.gif 는 메뉴와 메뉴사이를 구분해줄때 사용되고, bgGnbOn.gif는 공식홈의 상단을보시면 제로보드XE 메뉴윗부분에
빨갛고파란 이미지가 놓여있는게 보이실겁니다. 해당파일을 변경/수정해주시면 되구요..
bgGnbVr.gif 의 800배 확대한 이미지입니다..
앞줄은 메뉴가 들어갈 부분의 배경보다 조금진한색, 뒷줄은 배경보다 조금연한색으로 칠하시면 됩니다.
여태까지 만들어진 레이아웃을 한번 살펴보죠.
헤더의 배경, 메뉴부분도 정상적으로 보이구요. 상단메뉴2는 구분을위해 하나 더 추가해 주었습니다..
공식홈과 같은 bgGnbOn.gif 도 보이구요. bgGnbVr.gif는 레이아웃에 맞게 수정해주었습니다. 그럴듯한가요?
여기까지 오는데 수고하셨습니다.. 힘들어요..
이제 검색창, 언어선택창도 달아줍시다.
언어선택창입니다.
우선 언어선택창을 달아주시려면 공식홈에서 몇가지 가져오셔야 합니다.
images/buttonLang.gif
js/xe_official.js
layout.html
css/style.css
@charset "utf-8";
#Body_Layer { width:920px; margin:20px auto 0 auto;background:#999999; }
#Header { width:920px; height:180px; position:relative; background:url(../images/header_bg.gif) no-repeat right top;z-index:99; }
#Logo { width:200px; position:absolute; top:30px; left:20px; }
#gnb { position:absolute; top:138px; left:3px; height:38px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
#gnb li { float:left; list-style:none; background:url(../images/bgGnbVr.gif) no-repeat left center; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
#gnb li a { display:block; float:left; padding:14px 15px 0 16px; height:25px; color:#000000; white-space:nowrap; text-decoration:none; }
#gnb li a:hover,
#gnb li a:focus { color:#ff0000;}
#gnb li.on a { font-weight:bold; color:#000000; background:url(../images/bgGnbOn.gif) no-repeat center top;}
#language { position:absolute; top:18px; right:19px; z-index:100;}
#language strong { color:#000000; font:.75em Tahoma; margin-right:3px;}
#language a img { vertical-align:-5px;}
#language ul { position:absolute; top:15px; right:0px; display:none; border:1px solid #b23628; background:#ffffff;}
#language ul li { list-style:none; }
#language ul li a { display:block; width:61px; padding:3px 8px; font:9px Tahoma; color:#000000; text-decoration:none;}
#language ul li a:hover { background:#ff0000;}
css에서 수정해주셔야 할부분은 color 부분만 수정해주시면 될것같아요.
대충 볼줄 아시는분은 수정이 금방금방이겠지만, 모르시는분은 하나하나바꾸어가면서 알아보시면 될것같네요.
잘 들어왔나 확인해봅시다.
button_Lang.gif 파일 수정해주었구요, css부분도 모두 수정해준 화면입니다.
이제 검색창 하나남았네요~
후우..
역시 공식홈에서 따옵니다.
역시 이미지 몇개가 필요해요.
botton_Search.gif
bg_Search.gif
bg_Search_On.gif
bg_Search_Term.gif
layout.html
<!--%import("css/style.css")-->
<!--%import("js/xe_official.js")-->
<div id=Body_Layer>
<!-- 헤더시작 -->
<div id=Header>
<div id=Logo><a href="{$layout_info->index_url}"><img src="{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /></a></div>
<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['text'])-->
<!--@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['text']}</a></li>
<!--@end--><!--@end-->
<!-- main_menu 1차 끝 -->
</ul>
<div id="language">
<strong title="{$lang_type}">{$lang_supported[$lang_type]}</strong> <a href="#selectLang" onclick="showHide('selectLang');return false;"><img src="./images/buttonLang.gif" alt="Select Language" width="87" height="15" /></a>
<ul id="selectLang">
<!--@foreach($lang_supported as $key => $val)--><!--@if($key!= $lang_type)-->
<li><a href="#" onclick="doChangeLangType('{$key}');return false;">{$val}</a></li>
<!--@end--><!--@end-->
</ul>
</div>
<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">{$lang->title}</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" title="keyword" />
<input type="image" src="./images/buttonSearch.gif" alt="{$lang->cmd_search}" class="submit" />
</form>
</div>
<!-- 헤더끝 -->
<!-- 컨텐츠시작 -->
<div id=Content>컨텐츠</div>
<!-- 컨텐츠끝 -->
<!-- 푸터시작 -->
<div id=Footer>푸터</div>
<!-- 푸터끝 -->
</div>
css/style.css
@charset "utf-8";
#Body_Layer { width:920px; margin:20px auto 0 auto;background:#999999; }
#Header { width:920px; height:180px; position:relative; background:url(../images/header_bg.gif) no-repeat right top;z-index:99; }
#Logo { width:200px; position:absolute; top:30px; left:20px; }
#gnb { position:absolute; top:138px; left:3px; height:38px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
#gnb li { float:left; list-style:none; background:url(../images/bgGnbVr.gif) no-repeat left center; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
#gnb li a { display:block; float:left; padding:14px 15px 0 16px; height:25px; color:#000000; white-space:nowrap; text-decoration:none; }
#gnb li a:hover,
#gnb li a:focus { color:#ff0000;}
#gnb li.on a { font-weight:bold; color:#000000; background:url(../images/bgGnbOn.gif) no-repeat center top;}
#language { position:absolute; top:18px; right:19px; z-index:100;}
#language strong { color:#000000; font:.75em Tahoma; margin-right:3px;}
#language a img { vertical-align:-5px;}
#language ul { position:absolute; top:15px; right:0px; display:none; border:1px solid #b23628; background:#ffffff;}
#language ul li { list-style:none; }
#language ul li a { display:block; width:61px; padding:3px 8px; font:9px Tahoma; color:#000000; text-decoration:none;}
#language ul li a:hover { background:#ff0000;}
#isSearch { position:absolute; top:147px; right:15px; width:214px; text-align:right;}
#isSearch .searchOrder { display:none;}
#isSearch .checked { position:absolute; left:0; top:0; text-align:left; display:block; padding:5px 0 0 5px; width:64px; height:14px; background:url(../images/bgSearchTerm.gif) no-repeat; font:11px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#ffffff; line-height:normal;}
*:first-child+html #isSearch .checked { top:1px; }
#isSearch ul { display:none; position:absolute; left:0; top:18px; padding:2px 0 3px 0; text-align:left; border:1px solid #919898; background:#536c6d;}
#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:63px; height:15px; font:11px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#ffffff;}
#isSearch ul li label.on { background:#455a5b; }
#isSearch ul li label:hover,
#isSearch ul li label:focus { background:#455a5b;}
#isSearch .inputText { vertical-align:middle; position:relative; top:0; _top:-1px; left:1px; padding:3px 3px 1px 3px; width:94px; height:13px; color:#ffffff; border:1px solid #8E8E8D; background-color:#857C79; }
#isSearch .inputText:hover,
#isSearch .inputText:focus { border:1px solid #B0B0AF; background-color:#A9A4A3; }
*:first-child+html body#default #isSearch .inputText { position:relative; top:-1px;}
#isSearch .submit { vertical-align:middle; _position:relative; _top:-1px;}
*:first-child+html body#default #isSearch .submit { position:relative; top:-1px;}
검색창까지 달아보았습니다.
확인해보죠.
헤더구성이 완료되었습니다..
여기까지 오느라 수고들 많으셨습니다.
설명을 조리있게 잘 못해서.. 이해가 되시려나 모르겠네요..
단 한분에게라도 도움이 되었으면 하는 바램..? 이..
다음엔 컨텐츠구성에 들어가도록 하겠습니다. 수고하셨습니다.
![[레벨:15]](./modules/point/icons/default/15.gif "포인트:22145point (96%), 레벨:15/30"){kind=icon}
느까끼
![[레벨:1]](./modules/point/icons/default/1.gif "포인트:355point (98%), 레벨:1/30"){kind=icon}
지우빠![[레벨:3]](./modules/point/icons/default/3.gif "포인트:1215point (84%), 레벨:3/30"){kind=icon}
![[레벨:2]](./modules/point/icons/default/2.gif "포인트:405point (50%), 레벨:2/30"){kind=icon}
젤르
뭘까요..