나인테일님의 홈페이지에 들렀다가 제가 작업하려고 했던 기본 형태인 메뉴가 최상단에 가는 레이아웃을 사용하시는 것을 보고,
동의를 얻어 받았습니다.
그 파일을 기준으로 layout.html, css 파일을 수정하여 제가 원하는 형태의 레이아웃을 만들었습니다.
처음에는 기본 형태만 만들고, 칼라셋을 여러 개 추가해서 사용하려고 했는데 작업하다 보니 쓸데없는 욕심이 나서 하나의 레이아웃을 이용해 다양하게 만들고자 노력하다가 쫄딱 밤을 세워버렸습니다.... ㅠ.ㅠ;;;;
CSS에 거의 초보(제로보드XE 클베회원으로 참가한 뒤 XE를 설치해 보고 웹표준과 CSS에 관해서 공부를 해야겠다고 느껴지더군요... 그래서 3권의 책을 사서 한달 내내 틈나는 대로 공부했습니다.)에 가까운 제가 수정을 하려다 보니 희안한 오류들이 나는데, 환장을 하겠더군요... ㅠ.ㅠ;;;;
그래서 밤새 책 다시 뒤지고, 또 이것 저것 하면서 부딪혀 본 결과 나온 작품(?)입니다...... ㅠ.ㅠ;;; (감격의 눈물 찍!!)
그냥 일반적인 형태로 만들었다면 이렇게나 고생은 안 했을텐데...
제 귀차니즘(칼라셋 여러 개 만들기 싫다는 단 한 가지 이유였습니다... 쩝...)으로 XE 공식 사이트 레이아웃 파일을 이모 저모 뜯어본 결과 XML을 이용(허~~ 저 사실 XML 파일 이번에 처음 다뤄봅니다.. 그런데 정말 환상이더군요..)해서 성공했습니다...
만세~~~~~~~~~~!!! (혼자 잘 논다... 이해하십시오.. 저 지금 비몽사몽이라.. ㅠ.ㅠ;;;)
이제 본격적으로 설명을 드리겠습니다.
먼저 아래의 이미지를 보시죠.. (이미지가 크므로 클릭해서 보시고 마우스로 드래깅 하면서 살펴보세요.. ^^;;;;;)



레이아웃 설정 부분입니다.
기본적인 것은 XE 공식 사이트 레이아웃과 동일합니다.
다만, 제가 추가한 것 보이시죠???

1. 본문 배경색
2. 메뉴 배경색
3. 메뉴 글자색

위 3부분입니다.
이 레이아웃은 로고 이미지(배너 역할), 배경 이미지 기본 두 가지와 제가 추가한 3가지가 함께 조화를 이루어 다양한 느낌의 홈페이지를 만들어 냅니다.
이 5가지만으로도 참 다양한 느낌이 나더군요...
그리고 제가 추가한 위 3가지는 위의 이미지 캡쳐에서도 보시듯이 모두 색상코드를 입력하셔야 합니다.
실제 적용한 화면을 먼저 보시고 더 설명을 하겠습니다.


위 다섯 가지 값만을 변경해서 만들어진 홈페이지 디자인입니다.(사용한 이미지는 샘플로 넣은 것입니다. 시간 관계상 웹에서 구한 것들입니다. 혹시 저작권이 있는 이미지의 경우 단지 샘플화면을 만들기 위해 사용된 것이므로 이해바랍니다. 저작권 관계로 태클 들어오면 바로 레이아웃 내리겠습니다... ^^;;;;;;;)

참!!!!
이 레이아웃 제작하다 보니 로그인 부분이 안 어울려서 디자인에 맞게 로그인 부분도 새로 추가했습니다. (로그인은 전체 투명화 작업과 색상만 맞게 수정한 것이라 저작권은 그대로 뒀습니다.. ^^)

이 레이아웃 사용하실 때 주의하실 점은...
본문 배경색은 적용해 보시면 알겠지만, 추가되어 있는 게시판 때문에 현재로는 #FFFFFF(흰색)값을 추천합니다.
현재 배포된 두 기본 게시판 스킨이 일부분 투명화가 안 되어 있어서 색을 마음대로 적용하니 영 보기 싫더군요.
나중에 게시판 스킨 완전 투명으로 적용된 버전이 나오면 색을 마음대로 쓰셔도 되겠죠??? ^^;;;;;;;;;;;
(그래도 뭐 색을 마음대로 쓰시겠다면 그렇게 하십시오.. 하하하 저는 나중을 위해 저렇게 만들어 둔 것입니다. 정 안되면 제가 수정해 버릴 수도 있어요.. 또 잠 안 자고.. 흑흑흑... 저 쓰러지기 전에 다른 분들이 그 작업은 해주세요... ㅠ.ㅠ;;;;;;;;)

배포된 압축파일 안에는 아래와 같은 폴더가 모두 들어있습니다.

그러므로 파일 다운로드 받아서 압축을 푸시고, 통째로 제로보드XE를 설치한 폴더에 쏟아부어 주세요...
덮어쓰겠냐고 물어도 안심하시고 "예" 하셔도 됩니다.
폴더가 같은 이름이어서 그렇게 묻는 것일 뿐, 파일은 중복되는 것 하나도 없습니다.. ^^;;;;;;;;

또 참!!!!!!

추가되는 레이아웃의 이름은 "비나무 레이아웃"입니다.

이 자리를 빌려서 기본틀이 되는 레이아웃을 보내주신 나인테일님께 다시 한번 감사의 말씀을 드립니다.

실제 적용되는 사이트를 직접 보시려면 아래의 사이트로 오세요...
(링크된 사이트의 서브메뉴들을 클릭해 보시면 다양하게 변하는 레이아웃을 볼 수 있습니다.)

http://edu.binamu.com/bbs/?mid=test01