자, 뭔가 마이그레이션 쪽에 노가다가 사라지길 기대하며 3편 들어가봅니다.
여기서는 3단 레이아웃을 꾸며보도록 하죠.

초보분들이 많아서 별 부담이 안 가네요. 첨에는 이것도 도움되나 싶어서 올렸다가 지울까 말까 했는데 말이죠.

http://eond.com/zbxe
여태까지의 작업물을 따라왔다면 대강 저 정도까지 꾸며집니다. 이번에 3단 레이아웃하면
페이지에서 다단을 나눌 수가 있습니다.

레이아웃 수정하는 방법은 여러분들이 css를 잘 모르셔서 그런데 알면 간단합니다.
내용도 별 거 없습니다. 이번 편에서는 css 설명도 같이 해드리겠습니다.

이제 본격적으로 들어가서,

1단계 페이지 수정하기

관리 > 페이지 모듈에서 페이지를 하나 생성했다면
페이지 수정을 누르세요.
그리고

컨텐트메인
컨텐트라이트

라고 우선 입력한 후에

컨텐트메인 아래부터 가운데 부분에 들어갈 최근게시물 등을 위젯을 이용하여 삽입합니다.
위젯의 넓이는 대개 100% 로 하시면 됩니다.

그리고 우측 부분에 들어갈 내용도 컨텐트라이트아래에 죽 나열합니다.

그리고 위지윅에디터 좌측 상단에 있는 html 의 체크박스에 체크한 후 html 수정으로 들어갑니다.

컨텐트메인 위에
<div id="contentMain">
이라고 입력합니다.

그럼 아래와 같이 되겠죠.

<div id="contentMain">
컨텐트메인
....그리고 메인에 들어가는 최근게시물 등

그리고 난 다음

컨텐트라이트를 찾아서
이렇게 입력합니다.

</div>
<div id="contentRight">
컨텐트라이트
...그리고 우측에 들어가는 내용 등


그리고 맨 마지막에 div를 닫아줍니다.

</div>

이렇게 하면 페이지 수정은 끝이 납니다.
별 거 아니죠? 간단합니다.

2단계 CSS 파일 수정하기

1단계 페이지 수정에서 레이어를 삽입하고 클래스명을 적어주는 것으로 1단계는 간단하게 끝이 났습니다.
그럼 2단계에서는 1단계에서 수정한 클래스명에 알맞는 스타일시트를 만들어주는 것인데요

본인이 사용하는 레이아웃의 css 파일을 ftp를 통하여 열어주세요.

xe기본레이아웃의 흰색 컬러세팅을 사용한다면

/home/xynex/public_html/zbxe/layouts/xe_official/css/white.css

이 파일이 되겠지요.
이 파일에서 /* Site Layout - Column Right */ 부분을 찾아주세요.
그리고 그 아래 부분에 /* Site Layout - Content */ 라고 아래 입력한 소스를 붙여주세요.

/* Site Layout - Column Right */
#columnRight { width:770px; float:right; overflow:hidden;}
#visualArea{ width:770px; height:200px; background:#f5f5f5; margin-bottom:2.5em;position:relative; left:-15px; margin-right:-15px;}
#content { width:100%; overflow:hidden;}


이 부분입니다. 그럼 설명 들어갑니다.

#contentMain 은 메인 부분이고, #contentRight 는 우측 div 부분입니다.

1. position 설명
position 은 위치를 정하는 것입니다. #contentMain 은 absolute 라고 했고, #contentRight 는 relative 라고 했는데
설명하자면,

우선
http://eond.com/zbxe/home
제 홈페이지를 보면 우측 칸의 height가 좀 더 길지 않습니까.

만약에 둘다 absolute 라고 한다면 왼쪽 서브메뉴 height 값에 맞춰서 #contentMain 이나 #contentRight 의 높이를 100% 준다해도
왼쪽 서브 메뉴 높이에 맞춰져서 그 내용이 잘려서 보이지 않게 됩니다.

relative 라고 둘다 표시해버리면 한줄에 #contentMain 이 표시되고
그 다음 줄로 넘어가서 #contentRight 가 표시됩니다. 물론 이 뒤에 float:right 가 붙여졌기 때문에 우측 정렬되서 말이죠.

이 상황은 IE에서 이렇다는 것이고 불여우에서는 무리없이 잘 보입니다. 우리는 크로스브라우징을 목표로 하기 때문에
어떤 브라우저에서도 같게 보여져야합니다.

왜 한 쪽은 relative 라고 하고 다른 쪽은 absolute 라고 했냐면
이 것은 IE 문제인데, IE에서는 relative 의 높이에 따라가주더군요.

설명하자면, #contentMain 의 100%의 높이가 실제로 재어보면 500px이고,
#contentRight 의 100%의 높이가 실제로 재어보면 700px 라고 할 때,

relative의 높이인 700px에 맞춰진다는 말입니다.


반대로 #contentMain의 높이가 1000px이고 #contentRight의 높이가 200px라면
css는 이렇게 적어줘야겠죠.

#contentMain {position:relative;}
#contentRight {position:absolute;}

이렇게 위와 반대로 말이죠.


2. #contentMain

그럼 하나씩 떼서 다시 설명 드리겠습니다.
#contentMain {position:absolute;width:550px;overflow:hidden;}

이렇다면 position은 위에서 설명 드렸고 width는 넓이값이고, overflow:hidden은 안 넣어도 되지 싶습니다만
제가 소스에 넣은 거니깐 설명드리죠. 여기서 크게 쓰임새는 없습니다만
overflow 는 http://eond.springnote.com/pages/422287 여기 설명으로 대신하겠습니다. (__);


3. #contentRight

#contentRight {position:relative;float:right;right:0px;top:-10px;background:#F3F3EF;height:100%;width:200px;text-align:center;padding-left:5px;padding-right:5px;overflow:visible;display:block;white-space:nowrap;text-decoration:none;}

float 는 정렬입니다.
float 는 설명이 좀 깁니다만 설명은 링크로 대신합니다.

http://ilmol.com/wp/2005/06/09/25/
일모리님의 테이블은 이제 그만 쉬어야 할 때 라는 글입니다.
윗 글을 읽으면 float 에 대해서 감이 어느 정도 올 겁니다.
zbxe에서는 zb4의 헤더,푸터와 달라 css를 배우셔야 수정이 가능합니다.
또 그게 편하고요.

계속 나머지 설명..

right : 0px는 우측에 딱 붙인다는 겁니다.
top : -10px 는 위로 10px 더 올라간다는 뜻입니다.
left : 나 bottom : 역시 같은 용도로 사용됩니다.
background는 배경색상입니다
background:#F3F3F3 url(../images/bg.gif) no-repeat right bottom 이런 식으로 사용해줄 수도 있습니다.
text-align은 텍스트 정렬입니다. 테이블에서 align 과 같습니다.
padding 은 안쪽 여백입니다. padding-top, padding-right, padding-bottom, padding-left 처럼 사용해줄 수도 있습니다.
padding:0 5 0 5; 라고 쓴다면 상 우 하 좌의 순서대로 여백을 준다는 뜻입니다. 이는 padding:0 5; 라고도 쓸 수 있습니다.
white-space 는 줄바꿈 강제로 막기 입니다.
이 것은 어디에 쓰이냐... http://eond.com/zbxe 에 보면 최근댓글목록이라고 타이틀 붙여진 부분 있지 않습니까.
만약에 white-space:nowrap 을 쓰지 않으면 현재 1줄로 보이는 것이 2줄로 표시되어져버립니다. 그럼 좀 보기 싫으니깐 넣어줘봤습니다. 빼도 상관 없죠. 개인 맘입니다.
text-decoration 은 글자 스타일입니다. 여기서는 레이아웃에 꼭 쓰는 것은 아닙니다. 때문에 아래 링크에서 설명하겠습니다.
http://eond.springnote.com/pages/422333

4. 메인메뉴, #gnb

위 소스에서는 다루지 않았는데 마지막으로 메인 메뉴에 대해서 살펴보고 가겠습니다.

http://eond.com/zbxe/
여기 메뉴 위에 마우스를 올려놔보세요. 살짝 배경이 바뀌지요?
css로 이런 것도 가능하답니다. 설명은 아래 페이지에서 잘 해놨네요.

http://miniwini.com/miniwinis/bbs/index.php?bid=share&m=search&mode=read&id=6090&p=1&keyword=css&scale=1&op=and&idx=1

강좌 1편에서 #gnb 클래스가 메인메뉴라고 말씀드린 적이 있습니다.

#gnb{ position:absolute; top:107px; left:0px;right:0px;width:100%;height:30px; overflow:hidden; white-space:nowrap;margin-bottom:10px;background:#000;text-align:center;}
#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;}
#gnbli a { display:block; float:left; padding:8px 15px 0 15px; height:25px;color:#e8e8e8; white-space:nowrap;text-decoration:none;font-weight:bold; font-family:"Arial", "Verdana","돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;font-size:10px;}
#gnb li a:hover {border-top:0px solid #B41D0C;background: url(../images/eond_rosso/eond_title_bg.png) bottom;font:bold 10px Arial;},
#gnb li a:focus { color:#ffffff;}
#gnb li.on a { font-weight:bold; color:#ffffff; background:url(../images/default/bgGnbOn.gif) no-repeat center top;}

a:hover 라는 것은 마우스를 위로 올렸을 때 어떻게 변한다 라는 뜻입니다.

위에 미니위니 설명과 제가 설명드린데로라면 원하시는대로 꾸밀 수가 있을 겁니다.


마치면서..

어떤 분께서 zbxe는 레이아웃이 똑같아서 이 홈피도 저 홈피도 모두 똑같아보일 것이다라고 하셨고
헤더,푸터로 직접 수정하는 것이 아니라 레이아웃 스킨 자체를 업로드 하기 때문에
레이아웃 마저 모두 비슷비슷해서 결국에는 홈페이지가 모두 똑같이 보여질 것이다ㅡ라고 하셨는데

물고기를 잡아주는 것과 잡는 방법을 가르쳐주는 것의 차이처럼

올려놓은 스킨을 그냥 가져다가 사용하는 것이 아니라
그 스킨의 수정방법을 이렇게 조금이나마 알려드리면 누구나가 개성있는 홈페이지를 만들 수 있을 겁니다.

zbxe는 사이트빌더로써 만드는데 편리함을 주는 도구이지 모든 홈페이지를 똑같이 만드는 도구가 아니거든요.

스킨 종류의 다양성도 중요하지만 요즘 올려지는 레이아웃 스킨은 색상과 이미지만 살짝이 다를 뿐이지
레이아웃 형태는 똑같다고 봅니다. 그렇기 때문에 이런 수정방법만 알면 굳이 올려진 스킨을 다운받아 사용하지 않아도
본인 스스로 간단하게 수정이 가능합니다.

지금 zbxe는 메뉴얼이 빈약해서 사용방법과 그 수정방법에 대해서 많이 궁금해하실 것 같은데요
제 의견은 색상만 다르고 모양만 마냥 비슷비슷한 스킨의 업로드 보다는 그런 스킨을 만드는 데 필요한
작은 지식의 메뉴얼과

너무 간단하고 보기만 해도 알 수 있는 직관적인 사용방법에 대한 질문 방식 보다는
찾아보고 없는 질문을 올리는 것이 필요하다고 생각됩니다.

여기저기 모르면 찾아보고 글도 읽어보고 하셔야지 무턱대고 질문만 하는 분들이 엔지오에는 너무 많네요.

사람이 많아서이기도 한데, 그럴수록 자정능력이라고 하나요.
관리자가 한 사람 있다면 그걸 다 통제 관리할 수는 없잖아요.

스스로 규칙이나 예의를 지키면서 너무 간단한 것이나 딱 제로보드가 아니래도 알 수 있는 팁 등
별다른 관계없는 팁은 좀 자제하는 게 맞지 않나 싶은 생각입니다.

제가 올린 css 사용방법도 다른 레퍼런스를 보고 공부하면 다 알 수 있는 것인데
그런 것은 너무들 안하시니까..

제가 따로 딱 필요하지 않을까 하는 것만 대강 몇 개 추려서 제로보드 공식레이아웃 클래스명에 따라서
수정하기 간편하도록 알려드리는 것입니다.

클래스명도 공식레이아웃에 있는 것인데 다른 클래스명을 쓴다거나 하면 나중이 되면
초보분들은 더 알아보기 힘들어지지 않을까 하는 생각이거든요.

제로보드XE는 사이트빌더로써 작은 노력으로 큰 변신을 줄 수 있는 것이라고 생각되어집니다.
그럼 이만 잘 수정해봅시다~!!