|
|
|
동네 사람들의 정담이 오고가는 대청마루입니다. 무슨 글이든 좋아요. |
.........
기본 레이아웃 스킨을 이용해서 사용자 편의에 맞게 수정합니다.
수정은 default.css 파일을 이용하여 수정합니다.
(레이아웃 수정은 css 파일 수정만으로 변경할 수 있습니다.)
1. 본문 기본 정렬
기본 센터 정렬입니다.
왼쪽편에 붙이고자 하시면
default.css 파일 11번째 줄 ,
#bodyWrap { position:absolute; width: 980px; margin:0 auto; padding:0 0 0 0;}
position : absolute 로 고칩니다.
※ 기타 참고
width : 넓이
margin : 마진값
padding : 여백 (상 우 하 좌 순서, 순서는 마진값도 동일함)
2. 윗쪽 메뉴, 로고 부분의 높이 조정하기
14번째 줄,
#header { width:980px; height:60px; background:url() no-repeat right top; margin-bottom:10px; z-index:99;}
height : 120px 가 기본입니다. 알맞게 수정하세요. 저는 보시다시피 60px로 고쳤습니다.
여기서 넓이, 배경그림, 배경그림 위치, 여백 등을 수정할 수 있습니다.
※ 주의하실 점은 여기서 height 값은 윗쪽 메뉴 부분의 높이까지 포함하는 높이이므로
'로고 + 메뉴 높이' 까지 생각하셔서 수정하십시오.
※ 배경그림 역시 마찬가지입니다. 상위 메뉴 부분의 배경은 따로 처리하는 레이어가 없으므로,
#header 에서 메뉴 부분의 배경까지 처리할 수 있도록 상위 메뉴 부분의 높이까지 고려하여
배경그림을 만들어서 삽입하십시오.
※ 관리자 레이아웃 설정에서도 배경그림을 삽입할 수 있습니다.
이 때 설정한 배경그림은 가장 밑 바닥에 깔리고
css에서 설정한 배경그림이 그 위에 우선하게 됩니다.
이를 주의하여 배경을 처리해야할 것입니다.
3. 로고 위치 조정하기
15번째 줄,
#header h1 { position:absolute; top:0px; left:25px;}
top, left 값을 이용하여 수정할 수 있습니다.
4. 전체검색 및 언어 변경 부분 수정하기
4-1 언어 변경 레이어
언어 변경 레이어의 이름은 #language 입니다.
필요하신 분은 이 값을 찾아서 수정하면 됩니다.
#header 바로 아래 16번째 줄 부터입니다.
그런데 보통은 언어 변경 부분이 필요없으므로
저는 보이지 않게 설정하였습니다.
#language { position:absolute; top:18px; right:19px; z-index:100; display : none;}
display : none 만 추가하면 됩니다.
(visibility : hidden; 해도 됩니다. )
4-2. 전체 검색 폼 위치 수정하기
검색 폼의 이름은 #isSearch 입니다.
(첨에 #language 아래 24번째 줄에 있는 #it_search_form 인 줄 알고 혼동을 좀 했습니다. 저 같은 착각 하지 마시길 ^^; )
#isSearch { position:absolute; top:35px; right:15px; width:214px; text-align:right;}
저는 top: 48px 를 35px 정도로 수정했습니다.
사용자 입맛에 맞게 다른 부분을 수정하시면 됩니다.
ps. #it_search_form 은 뭔지 모르겠군요. -_-;
5. 상위 메뉴 위치 등 수정하기
현재 제로보드 사이트에서 HOME 제로보드XE 제로보드4 .. 이 부분입니다.
레이어명은 #gnb 입니다.
#gnb { position:absolute; top:60px; left:0; height:30px; overflow:hidden; white-space:nowrap; margin-bottom:10px;background:#000;}
원하시는 입맛에 맞게 위치 및 색상을 수정하면 됩니다.
#gnb li a { display:block; float:left; padding:8px 15px 0 15px; height:25px; color:#e8e8e8; white-space:nowrap; text-decoration:none; font-family:"Arial", "Verdana", "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;font-size:11px;}
메뉴 부분의 색상이나 크기 등의 스타일시트는 이 항목에서 수정하면 됩니다.
※ 다시 주의할 점, 여기서 각각 메뉴 하나의 배경은 처리할 수 있습니다만
전체 한 줄을 가득 메우는 배경은 위에 2번에서 말했다시피 #header에서 처리하거나
관리자 설정에서 배경그림 부분에서 설정해주어야 합니다.
(방법이 아주 없지는 않겠습니다만 일반적으로 이렇습니다. 그러니 이를 주의하여 배경을 #header에서 처리하십시오.)
6. 이제 상단 레이아웃 디자인은 이렇게 수정이 가능하니 이 것으로 마치고,
나머지 회원정보 부분, 하위메뉴, 본문 스타일시트 가 남아있는데
이는 이 정도면 CSS 파일을 보면서 수정하면 될 듯 합니다.
☞ http://zbxe.springnote.com/pages/392227
스킨 제작 메뉴얼입니다. 아직 작성되지 않았기에 제가 기초의 기본 부분만 설명해두었습니다.
나중에 위 페이지가 완성되면 위 링크에서 나머지 내용을 살펴보시면 될 듯 하네요.
☞ 소스 출처 : http://eond.com/
'초보 레이아웃 스킨 고치기 1 - CSS 편'에서는 CSS 파일을 이용하여 간단히 위치며 스타일, 감추기 등을
알려드렸는데 좀 더 나아가서 레이아웃 파일을 한 번 건드려보겠습니다.
zb4 마이그레이션 작업 후에 디자인 작업을 하려고 했더니 카테고리 하나씩 글을 옮겨와야되고 DQ갤러리 스킨에서의
마이그레이션 작업이 도저히 엄두가 나지 않아서 나중에 제로님 다음 주 휴가 끝나고 오시면 뭔가 방법을 내놓으실 것 같다는
기대만을 안고 우선 레이아웃부터 손봅니다.
설명 번호는 이전글에 이어서 나가겠습니다.
7. 레이아웃 수정하기
7-1. 똑띠님의 레이아웃 만들기 메뉴얼
우선 똑띠님의 글을 먼저 읽고 7-2 번을 읽을 때 참조하세요.
http://zbxe.springnote.com/pages/396868
아래 제 설명을 보충하는 것인데, 7-1을 먼저 읽고 왜 제가 아래와 같이 했는 것인지 이해가 갈 겁니다.
7-2 레이아웃 편집은 관리자화면에서
레이아웃은 CSS 파일과는 달리 에디터로 수정 후 FTP로 업로드하면 안됩니다. 이미 수정을 한 번 했다면 말이죠.
(이에 대한 설명은 7-1에서..)
초반 레이아웃 모듈 만들 때야 이미 만들어놓고 모듈을 만들면 수정한 레이아웃이 모듈이 되버리는 것인데
이미 레이아웃 모듈까지 만든 상태라면 관리자 화면에서 수정작업을 해야합니다.
레이아웃 디렉토리가
/home/xynex/public_html/zbxe/layouts/xe_official/
여기라고 해서
이 아래있는 layouts.html 파일을 수정해서는 이미 만들어진 모듈을 사용하고 있는 레이아웃에서는
수정한 작업이 나타나지 않는다는 말입니다.
그러므로 이미 만들어진 모듈은 에디터로 다시 수정하는 것이 아니라
관리 > 레이아웃 > 레이아웃 편집 에서 해야합니다.
물론, 모듈이 만들어지기 전의 레이아웃은 아는 방법대로 에디터로 수정 후 업로드하면 됩니다.
그럼 본격적으로 설명 들어갑니다.
이전 설명 보면 아시다시피 내용은 별 것 아니지만 조금이나마 삽질을 줄이고 아직 메뉴얼이 완성되지 않았기 때문에
메뉴얼이 완성되기 전까지는 이렇게나마 사용자끼리 정보를 주고 받았으면 좋겠네요.
8. 메뉴 보여지는 형식 수정하기
메뉴는 이미지, url 등으로 표시할 수 있습니다.
아래 링크는 '메뉴 관리에서 이미지 버튼은 어떻게 삽입하나요? ' 라는 게시물입니다.
http://www.zeroboard.com/3999303
관리자화면 메뉴 모듈을 통해서도 메뉴를 단순히 텍스트 뿐만 아니라 이미지로도 표시할 수 있다는 것을 알 겁니다.
윗글 코멘트에서 제로님이 메뉴를 이미지버튼으로 대체하여 쓸 수 있는 방법에 대해서 적어놨는데
레이아웃 제작 입장에서 어떻게 해야지 그 것이 적용되는지에 대해서는 자세히 알려주지 않아서 저도 모르겠습니다만
아래의 위치에서 명령어를 달리 넣으면 될 것 같기에 우선 참고식으로 적어놓겠습니다.
위에서 말했다시피 관리 > 레이아웃 모듈 > 레이아웃 편집 메뉴로 들어갑니다.
#GNB 클래스를 찾습니다. Ctrl + F 눌러서 #gnb 로 검색하면 됩니다.
참고로, 이 레이아웃 편집에서는 한 번 수정하면 띄어쓰기가 다 무시되어버리더군요..난감하게시리
<!--GNB-->
<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>
<!--//GNB-->
여기서 볼드체로 처리한 부분이 메뉴를 나타내는 형식입니다.
img_btn, image, images 해봐도 별 다른 변화가 없는 것 보면 img..로는 이미지버튼이 안되는가봅니다.
해본 것이 url, href 인데 이렇게 하면 http://..로 시작되는 텍스트가 메뉴명으로 들어갑니다.
이거 뭘 넣어야지 이미지버튼이 되는 건지 아는 분은 좀 알려주세요.
9. 이미지 추가하기
어떤 레이어에 배경을 추가한다는 것은 css 파일에서 수정이 가능하지만,
레이아웃에 <img src 태그를 이용하여 이미지를 추가하기 위해서는 레이아웃 파일(레이아웃 편집)을 수정해야합니다.
그냥 http:// 로 시작하는 url 을 img src=" ..에 넣으면 안됩니다.
만약 img src="http://.. " 이렇게 넣었다 해도 보여지는 이미지의 주소는
img src="http://eond.com/zbxe/layouts/xe_official/http://eond.com/2007/img/title_tintedpixel_h.gif"
이런 식으로 http://eond.com/zbxe/layouts/xeoffcial/ 이 뒤에 또 http:// 로 시작하는 아까 입력한 주소가 놓여지게 되는 것입니다.
[부가설명]
http://eond.com 도메인주소
/zbxe zbxe가 설치된 주소
/layouts/xeoffcial 레이아웃 폴더
그렇기 때문에 이미지를 넣을 때는 꼭! 레이아웃 폴더에 넣은 후에 링크를 해야합니다.
여기서 주의할 것이 있는데 FTP를 이용하여 이미지를 업로드할 때는 layouts/xeofficial 폴더에 넣으면 안됩니다.
아래 예제를 통하여 업로드 위치를 알려드리겠습니다.
올바른 링크 방법은 아래와 같습니다.
<img src="./images/{$layout_info->colorset}/title_tintedpixel_h.gif" style="margin-right:10;" align=absbottom>
{$layout_info->colorset} 는 무엇이냐하면 바로 업로드 위치입니다.
/home/xynex/public_html/zbxe/layouts/xeoffcial/images/eond_rosso/title_tintedpixel_h.gif
[부가설명]
/home/xynex/public_html 가 http://eond.com
/zbxe/layouts/xeoffcial 레이아웃 폴더
/images/eond_rosso 가 바로 {$layout_info->colorset} 컬러셋 폴더
/title_tintedpixel_h.gif 가 업로드하는 이미지 파일입니다.
바로 비교해서 본다면 아래와 같습니다.
/home/xynex/public_html/zbxe/layouts/xeoffcial/images/eond_rosso/title_tintedpixel_h.gif <-- 실제주소
http://eond.com/zbxe/layouts/xeoffcial/title_tintedpixel_h.gif <-- 웹에서 보여지는 주소
/images/eond_rosso 는 {$layout_info->colorset} 이므로 실제 웹에서는 표시되지 않습니다.
글로 써서 복잡한데 실제로 해보시면 별 것 아닙니다.
자, 그럼 차차 삽질하다가 도움될 내용이 있으면 정리되면 다시 추가해서 올리겠습니다.
별 내용이 없긴 하네요. 그 외에는 css와 html 수정만 할 줄 알면 되는 것이니 여기서 이만 줄입니다.
덤으로,
10. 또 다른 레이아웃 편집에 대한 메뉴얼입니다.
우선 블로그 레이아웃 편집에 대해서 설명해놓은 페이지입니다.
http://zbxe.springnote.com/pages/400507
도저히 도움이 되질 않는군요. 단순히 보면 알 수 있는 내용을 메뉴얼의 전부라고 적어놓으셨는데
메뉴얼 실명제라도 도입되었으면 좋겠습니다.
아래의 메뉴얼이 완성되어지길 기대하면서도 위와 같이 저런 식의 메뉴얼 완성이라면 실망이네요.
그리고 본격적인 레이아웃 편집 메뉴얼인데 어서 완성되기를 바랍니다.
마이그레이션 쪽에 노가다가 사라지길 기대하며 3편 들어가 봅니다.
여기서는 3단 레이아웃을 꾸며보도록 하죠.
초보분들이 많아서 별 부담이 안 가네요. 첨에는 이것도 도움되나 싶어서 올렸다가 지울까 말까 했는데 말이죠.
이번에 3단 레이아웃하면 페이지에서 다단을 나눌 수가 있습니다.
레이아웃 수정하는 방법은 여러분들이 css를 잘 모르셔서 그런데 알면 간단합니다.
내용도 별 거 없습니다. 이번 편에서는 css 설명도 같이 해드리겠습니다.
이제 본격적으로 들어가서,
관리 > 페이지 모듈에서 페이지를 하나 생성했다면 페이지 수정을 누르세요. 그리고
컨텐트메인
컨텐트라이트
라고 우선 입력한 후에
컨텐트메인 아래부터 가운데 부분에 들어갈 최근게시물 등을 위젯을 이용하여 삽입합니다.
위젯의 넓이는 대개 100% 로 하시면 됩니다.
그리고 우측 부분에 들어갈 내용도 컨텐트라이트아래에 죽 나열합니다.
그리고 위지윅에디터 좌측 상단에 있는 html 의 체크박스에 체크한 후 html 수정으로 들어갑니다.
컨텐트메인 위에 <div id="contentMain">이라고 입력합니다.
그럼 아래와 같이 되겠죠.
<div id="contentMain">
컨텐트메인
....그리고 메인에 들어가는 최근게시물 등
그리고 난 다음 컨텐트라이트를 찾아서 이렇게 입력합니다.
</div>
<div id="contentRight">
컨텐트라이트
...그리고 우측에 들어가는 내용 등
그리고 맨 마지막에 div를 닫아줍니다.
</div>
이렇게 하면 페이지 수정은 끝이 납니다. 별 거 아니죠? 간단합니다.
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;}
#gnb li 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는 사이트빌더로써 작은 노력으로 큰 변신을 줄 수 있는 것이라고 생각되어집니다.
수정은 default.css 파일을 이용하여 수정합니다.
(레이아웃 수정은 css 파일 수정만으로 변경할 수 있습니다.)
1. 본문 기본 정렬
기본 센터 정렬입니다.
왼쪽편에 붙이고자 하시면
default.css 파일 11번째 줄 ,
#bodyWrap { position:absolute; width: 980px; margin:0 auto; padding:0 0 0 0;}
position : absolute 로 고칩니다.
※ 기타 참고
width : 넓이
margin : 마진값
padding : 여백 (상 우 하 좌 순서, 순서는 마진값도 동일함)
2. 윗쪽 메뉴, 로고 부분의 높이 조정하기
14번째 줄,
#header { width:980px; height:60px; background:url() no-repeat right top; margin-bottom:10px; z-index:99;}
height : 120px 가 기본입니다. 알맞게 수정하세요. 저는 보시다시피 60px로 고쳤습니다.
여기서 넓이, 배경그림, 배경그림 위치, 여백 등을 수정할 수 있습니다.
※ 주의하실 점은 여기서 height 값은 윗쪽 메뉴 부분의 높이까지 포함하는 높이이므로
'로고 + 메뉴 높이' 까지 생각하셔서 수정하십시오.
※ 배경그림 역시 마찬가지입니다. 상위 메뉴 부분의 배경은 따로 처리하는 레이어가 없으므로,
#header 에서 메뉴 부분의 배경까지 처리할 수 있도록 상위 메뉴 부분의 높이까지 고려하여
배경그림을 만들어서 삽입하십시오.
※ 관리자 레이아웃 설정에서도 배경그림을 삽입할 수 있습니다.
이 때 설정한 배경그림은 가장 밑 바닥에 깔리고
css에서 설정한 배경그림이 그 위에 우선하게 됩니다.
이를 주의하여 배경을 처리해야할 것입니다.
3. 로고 위치 조정하기
15번째 줄,
#header h1 { position:absolute; top:0px; left:25px;}
top, left 값을 이용하여 수정할 수 있습니다.
4. 전체검색 및 언어 변경 부분 수정하기
4-1 언어 변경 레이어
언어 변경 레이어의 이름은 #language 입니다.
필요하신 분은 이 값을 찾아서 수정하면 됩니다.
#header 바로 아래 16번째 줄 부터입니다.
그런데 보통은 언어 변경 부분이 필요없으므로
저는 보이지 않게 설정하였습니다.
#language { position:absolute; top:18px; right:19px; z-index:100; display : none;}
display : none 만 추가하면 됩니다.
(visibility : hidden; 해도 됩니다. )
4-2. 전체 검색 폼 위치 수정하기
검색 폼의 이름은 #isSearch 입니다.
(첨에 #language 아래 24번째 줄에 있는 #it_search_form 인 줄 알고 혼동을 좀 했습니다. 저 같은 착각 하지 마시길 ^^; )
#isSearch { position:absolute; top:35px; right:15px; width:214px; text-align:right;}
저는 top: 48px 를 35px 정도로 수정했습니다.
사용자 입맛에 맞게 다른 부분을 수정하시면 됩니다.
ps. #it_search_form 은 뭔지 모르겠군요. -_-;
5. 상위 메뉴 위치 등 수정하기
현재 제로보드 사이트에서 HOME 제로보드XE 제로보드4 .. 이 부분입니다.
레이어명은 #gnb 입니다.
#gnb { position:absolute; top:60px; left:0; height:30px; overflow:hidden; white-space:nowrap; margin-bottom:10px;background:#000;}
원하시는 입맛에 맞게 위치 및 색상을 수정하면 됩니다.
#gnb li a { display:block; float:left; padding:8px 15px 0 15px; height:25px; color:#e8e8e8; white-space:nowrap; text-decoration:none; font-family:"Arial", "Verdana", "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;font-size:11px;}
메뉴 부분의 색상이나 크기 등의 스타일시트는 이 항목에서 수정하면 됩니다.
※ 다시 주의할 점, 여기서 각각 메뉴 하나의 배경은 처리할 수 있습니다만
전체 한 줄을 가득 메우는 배경은 위에 2번에서 말했다시피 #header에서 처리하거나
관리자 설정에서 배경그림 부분에서 설정해주어야 합니다.
(방법이 아주 없지는 않겠습니다만 일반적으로 이렇습니다. 그러니 이를 주의하여 배경을 #header에서 처리하십시오.)
6. 이제 상단 레이아웃 디자인은 이렇게 수정이 가능하니 이 것으로 마치고,
나머지 회원정보 부분, 하위메뉴, 본문 스타일시트 가 남아있는데
이는 이 정도면 CSS 파일을 보면서 수정하면 될 듯 합니다.
☞ http://zbxe.springnote.com/pages/392227
스킨 제작 메뉴얼입니다. 아직 작성되지 않았기에 제가 기초의 기본 부분만 설명해두었습니다.
나중에 위 페이지가 완성되면 위 링크에서 나머지 내용을 살펴보시면 될 듯 하네요.
☞ 소스 출처 : http://eond.com/
'초보 레이아웃 스킨 고치기 1 - CSS 편'에서는 CSS 파일을 이용하여 간단히 위치며 스타일, 감추기 등을
알려드렸는데 좀 더 나아가서 레이아웃 파일을 한 번 건드려보겠습니다.
zb4 마이그레이션 작업 후에 디자인 작업을 하려고 했더니 카테고리 하나씩 글을 옮겨와야되고 DQ갤러리 스킨에서의
마이그레이션 작업이 도저히 엄두가 나지 않아서 나중에 제로님 다음 주 휴가 끝나고 오시면 뭔가 방법을 내놓으실 것 같다는
기대만을 안고 우선 레이아웃부터 손봅니다.
설명 번호는 이전글에 이어서 나가겠습니다.
7. 레이아웃 수정하기
7-1. 똑띠님의 레이아웃 만들기 메뉴얼
우선 똑띠님의 글을 먼저 읽고 7-2 번을 읽을 때 참조하세요.
http://zbxe.springnote.com/pages/396868
아래 제 설명을 보충하는 것인데, 7-1을 먼저 읽고 왜 제가 아래와 같이 했는 것인지 이해가 갈 겁니다.
7-2 레이아웃 편집은 관리자화면에서
레이아웃은 CSS 파일과는 달리 에디터로 수정 후 FTP로 업로드하면 안됩니다. 이미 수정을 한 번 했다면 말이죠.
(이에 대한 설명은 7-1에서..)
초반 레이아웃 모듈 만들 때야 이미 만들어놓고 모듈을 만들면 수정한 레이아웃이 모듈이 되버리는 것인데
이미 레이아웃 모듈까지 만든 상태라면 관리자 화면에서 수정작업을 해야합니다.
레이아웃 디렉토리가
/home/xynex/public_html/zbxe/layouts/xe_official/
여기라고 해서
이 아래있는 layouts.html 파일을 수정해서는 이미 만들어진 모듈을 사용하고 있는 레이아웃에서는
수정한 작업이 나타나지 않는다는 말입니다.
그러므로 이미 만들어진 모듈은 에디터로 다시 수정하는 것이 아니라
관리 > 레이아웃 > 레이아웃 편집 에서 해야합니다.
물론, 모듈이 만들어지기 전의 레이아웃은 아는 방법대로 에디터로 수정 후 업로드하면 됩니다.
그럼 본격적으로 설명 들어갑니다.
이전 설명 보면 아시다시피 내용은 별 것 아니지만 조금이나마 삽질을 줄이고 아직 메뉴얼이 완성되지 않았기 때문에
메뉴얼이 완성되기 전까지는 이렇게나마 사용자끼리 정보를 주고 받았으면 좋겠네요.
8. 메뉴 보여지는 형식 수정하기
메뉴는 이미지, url 등으로 표시할 수 있습니다.
아래 링크는 '메뉴 관리에서 이미지 버튼은 어떻게 삽입하나요? ' 라는 게시물입니다.
http://www.zeroboard.com/3999303
관리자화면 메뉴 모듈을 통해서도 메뉴를 단순히 텍스트 뿐만 아니라 이미지로도 표시할 수 있다는 것을 알 겁니다.
윗글 코멘트에서 제로님이 메뉴를 이미지버튼으로 대체하여 쓸 수 있는 방법에 대해서 적어놨는데
레이아웃 제작 입장에서 어떻게 해야지 그 것이 적용되는지에 대해서는 자세히 알려주지 않아서 저도 모르겠습니다만
아래의 위치에서 명령어를 달리 넣으면 될 것 같기에 우선 참고식으로 적어놓겠습니다.
위에서 말했다시피 관리 > 레이아웃 모듈 > 레이아웃 편집 메뉴로 들어갑니다.
#GNB 클래스를 찾습니다. Ctrl + F 눌러서 #gnb 로 검색하면 됩니다.
참고로, 이 레이아웃 편집에서는 한 번 수정하면 띄어쓰기가 다 무시되어버리더군요..난감하게시리
<!--GNB-->
<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>
<!--//GNB-->
여기서 볼드체로 처리한 부분이 메뉴를 나타내는 형식입니다.
img_btn, image, images 해봐도 별 다른 변화가 없는 것 보면 img..로는 이미지버튼이 안되는가봅니다.
해본 것이 url, href 인데 이렇게 하면 http://..로 시작되는 텍스트가 메뉴명으로 들어갑니다.
이거 뭘 넣어야지 이미지버튼이 되는 건지 아는 분은 좀 알려주세요.
9. 이미지 추가하기
어떤 레이어에 배경을 추가한다는 것은 css 파일에서 수정이 가능하지만,
레이아웃에 <img src 태그를 이용하여 이미지를 추가하기 위해서는 레이아웃 파일(레이아웃 편집)을 수정해야합니다.
그냥 http:// 로 시작하는 url 을 img src=" ..에 넣으면 안됩니다.
만약 img src="http://.. " 이렇게 넣었다 해도 보여지는 이미지의 주소는
img src="http://eond.com/zbxe/layouts/xe_official/http://eond.com/2007/img/title_tintedpixel_h.gif"
이런 식으로 http://eond.com/zbxe/layouts/xeoffcial/ 이 뒤에 또 http:// 로 시작하는 아까 입력한 주소가 놓여지게 되는 것입니다.
[부가설명]
http://eond.com 도메인주소
/zbxe zbxe가 설치된 주소
/layouts/xeoffcial 레이아웃 폴더
그렇기 때문에 이미지를 넣을 때는 꼭! 레이아웃 폴더에 넣은 후에 링크를 해야합니다.
여기서 주의할 것이 있는데 FTP를 이용하여 이미지를 업로드할 때는 layouts/xeofficial 폴더에 넣으면 안됩니다.
아래 예제를 통하여 업로드 위치를 알려드리겠습니다.
올바른 링크 방법은 아래와 같습니다.
<img src="./images/{$layout_info->colorset}/title_tintedpixel_h.gif" style="margin-right:10;" align=absbottom>
{$layout_info->colorset} 는 무엇이냐하면 바로 업로드 위치입니다.
/home/xynex/public_html/zbxe/layouts/xeoffcial/images/eond_rosso/title_tintedpixel_h.gif
[부가설명]
/home/xynex/public_html 가 http://eond.com
/zbxe/layouts/xeoffcial 레이아웃 폴더
/images/eond_rosso 가 바로 {$layout_info->colorset} 컬러셋 폴더
/title_tintedpixel_h.gif 가 업로드하는 이미지 파일입니다.
바로 비교해서 본다면 아래와 같습니다.
/home/xynex/public_html/zbxe/layouts/xeoffcial/images/eond_rosso/title_tintedpixel_h.gif <-- 실제주소
http://eond.com/zbxe/layouts/xeoffcial/title_tintedpixel_h.gif <-- 웹에서 보여지는 주소
/images/eond_rosso 는 {$layout_info->colorset} 이므로 실제 웹에서는 표시되지 않습니다.
글로 써서 복잡한데 실제로 해보시면 별 것 아닙니다.
자, 그럼 차차 삽질하다가 도움될 내용이 있으면 정리되면 다시 추가해서 올리겠습니다.
별 내용이 없긴 하네요. 그 외에는 css와 html 수정만 할 줄 알면 되는 것이니 여기서 이만 줄입니다.
덤으로,
10. 또 다른 레이아웃 편집에 대한 메뉴얼입니다.
우선 블로그 레이아웃 편집에 대해서 설명해놓은 페이지입니다.
http://zbxe.springnote.com/pages/400507
도저히 도움이 되질 않는군요. 단순히 보면 알 수 있는 내용을 메뉴얼의 전부라고 적어놓으셨는데
메뉴얼 실명제라도 도입되었으면 좋겠습니다.
아래의 메뉴얼이 완성되어지길 기대하면서도 위와 같이 저런 식의 메뉴얼 완성이라면 실망이네요.
그리고 본격적인 레이아웃 편집 메뉴얼인데 어서 완성되기를 바랍니다.
마이그레이션 쪽에 노가다가 사라지길 기대하며 3편 들어가 봅니다.
여기서는 3단 레이아웃을 꾸며보도록 하죠.
초보분들이 많아서 별 부담이 안 가네요. 첨에는 이것도 도움되나 싶어서 올렸다가 지울까 말까 했는데 말이죠.
이번에 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;}
/* Site Layout - Content */
#contentMain {position:absolute;width:550px;overflow:hidden;}
#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;}
#contentMain {position:absolute;width:550px;overflow:hidden;}
#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;}
이 부분입니다. 그럼 설명 들어갑니다.
#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;}
#gnb li 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는 사이트빌더로써 작은 노력으로 큰 변신을 줄 수 있는 것이라고 생각되어집니다.
최신댓글