웹마스터 팁

일단 내컴에 있는 오토셋으로 서버를 돌려 ZbXE를 설치해서 대강의 공부를 하고,

저번에 Zb5베타시 cafe24에서 임시로 사용허가가 난 http://qnrl1346.cafe24.com 으로 정식 설치를 했다.

[ 대강 설치 순서 ]

1. 모듈분류에서 먼저 분류생성함 
   - home, blog, data, zbxe

2. 레이아웃에서 스킨들을 등록함
   - home(default), data(white)등

3. 메뉴에 가서 상단, 하단으로 일단 구분
    - up, down

4. 페이지에 가서 메뉴별 대문 페이지 생성
    - home, data, zbxe

5. 게시판에 가서 2차 메뉴들 생성
    - 공지, 방명록, 유틸리티, 드라이브 등등

6. 다시 메뉴에 가서 상단에 트리 만들어 페이지와 게시판등 연결

7. 블로그 하나 만들어 메뉴트리에 연결하니 지금끗 설정 했던 레이아웃이며, 게시판 설정이 블로그로 변한다.
    일일이 다시 설정
    (Tip : 블로그를 만들 예정이면 1번전에 블로그를 하나 만들어 모든 셋팅을 완료한 후 작업하면 7번 같은 경우 방지)

8. 에드온 활성화 시키고 OpenID설정

9. 위젯들 확인함 - 위젯이 zb5에서 플러그인 역활을 합니다. 근데 만들기는 zb5보다 어려울 듯.

10. 위지윅 에디터들 활성화 시킨다.

여기까지가 1차로 틀을 만들어 봤습니다.

그런데 문제점들이 보이더군요.

문제1. 레이아웃 편집에 들어가서 편집을 하고 나면 모든 문구가 붙어 버려 다음 편집이 어려워 지더군요.

            근데 내컴의 오토셋에서는 편집을 해도 정상적으로 보입니다.(서버의 차이인가?)
 
            (팁) 관리 > 레이아웃 > 레이아웃 편집 에서 하지않고 ftp로 하는 방법
                    ../zbxe/files/cache/layout/
                   에 가면 숫자.html 파일이 보입니다. 그 파일을 수정하면 편집이 됩니다.

문제2. 페이지 수정에 들어가 윗젯을 왼쪽, 오른쪽 추가하다 보니 정렬이 잘 맞지를 않더군요.
 
            그건 두번째에 깔고 해결 했습니다. 이글 아래에 팁 있습니다.

그래서 폴더 싹 지우고, DB들어거서 싹 지우고,

다시 깔아 봤습니다.

그래도 같은 증상이더군요, 괜히 노가다 했죠. *.*
 
그래도 그 중간에 zbxe에 대해 조금씩 알아갔습니다.

다시 깔고 틀 만들고,
 
레이아웃 색깔을 바꾸어 볼려고 일단 오렌지색을 포삽으로 하나 만들어 보았습니다. 

근데 그게 생각 만큼 쉽지가 않더군요,

색깔 추가를 어떻게 하는지 여러번의 폴더 이해와 편집을 해 보아도 추가가 되지를 않더군요.
아.... 초보의 비애!!!!!
(만져본 파일들이 하도 많아 생각도 안 남)

그래서 머리굴려 검정색 자체를 오렌지색으로 바꾸어 버렸습니다. 그것도 간단한 일은 아니더군요.

먼저 ../zbxe/layouts/xe_official/images/ 에 가서 black폴더 안에 오렌지색깔 덮어 씌우고

../zbxe/layouts/xe_official/css/ 에 가서 black.css
black.css

@charset "utf-8";
/*
NHN UIT Lab. WebStandardization Team (
http://html.nhndesign.com/)
Jeong, Chan Myeong 070601~070630
*/
/* black Skin - Start */
/* Site Layout - Body Wrap - 배경무늬*/
body { background:url(../images/black/bgBody.gif) repeat-x;}
#bodyWrap { position:relative; width:980px; margin:0 auto; padding:1.5em 0 0 0;}
/* Site Layout - Header - 상단메뉴배경*/
#header { position:relative; width:980px; height:120px; background:url(../images/black/bgHeader.jpg) no-repeat right top; margin-bottom:10px; z-index:99;}
#header h1 { position:absolute; top:10px; left:25px;}
#language { position:absolute; top:18px; right:19px; z-index:100;}
#language strong { color:#ffffff; 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:#de4332;}
#language ul li { list-style:none; }
#language ul li a { display:block; width:61px; padding:3px 8px; font:9px Tahoma; color:#ffffff; text-decoration:none;}
#language ul li a:hover { background:#bc4032;}
#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; }
#gnb { position:absolute; top:82px; left:0; height:38px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
#gnb li { float:left; list-style:none; background:url(../images/black/bgGnbVr.gif) no-repeat left center; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}
#gnb li a { display:block; float:left; padding:13px 15px 0 15px; height:25px; color:#FFFFFF; white-space:nowrap; text-decoration:none; font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
#gnb li a:hover,
#gnb li a:focus { color:#330000;}
#gnb li.on a { font-weight:bold; color:#FFFF00; background:url(../images/black/bgGnbOn.gif) no-repeat center top;}
#isSearch { position:absolute; top:48px; 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/black/bgSearchTerm.gif) no-repeat; font:11px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#ffffff; line-height:normal;}
#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:-1px; padding:3px 3px 1px 3px; width:94px; height:15px; color:#ffffff; border:none; background:url(../images/black/bgSearch.gif) no-repeat;}
#isSearch .inputText:hover,
#isSearch .inputText:focus { background:url(../images/black/bgSearchOn.gif) no-repeat;}
*:first-child+html body#black #isSearch .inputText { position:relative; top:-1px;}
#isSearch .submit { vertical-align:middle; _position:relative; _top:-1px;}
*:first-child+html body#black #isSearch .submit { position:relative; top:-1px;}
/* Site Layout - Content Body - 바닥선색*/
#contentBody { position:relative; width:980px; padding-bottom:30px; overflow:hidden; background:url(../images/black/bgContentBody.gif) repeat-y left top; border-bottom:1px solid #ffffff;} 
/* Site Layout - Column Left - 로그인 아래선색*/
#columnLeft { position:relative; width:201px; float:left;}
#columnLeft .mask { width:201px; height:5px; background:#ffffff; display:block;}
#lnb { border-top:1px solid #ff6600; padding:4px 5px; width:190px;}
#lnb li { padding-bottom:4px;}
#lnb li a { padding:6px 5px 6px 13px; width:170px; display:block; border:1px solid #ff6600; background:url(../images/black/bgLnbOff.gif) repeat-x; color:#FF0000; position:relative; z-index:99; text-decoration:none;}
#lnb li a:hover,
#lnb li a:focus { color:#ffffff; background:#de4332; border:1px solid #000000;}
#lnb li.on a { color:#ffffff; background:#de4332; border:1px solid #de4332;}
#lnb li.on a:hover,
#lnb li.on a:focus { font-weight:bold;}
#lnb li ul { display:none; position:relative; width:184px; padding:0 3px; position:relative; border-top:1px solid #ffffff; overflow:hidden;}
#lnb li.on ul { display:block;}
#lnb li ul li { padding:0; border-top:1px solid #f2f2f2; position:relative; top:-1px;}
#lnb li ul li a { padding:6px 5px 6px 10px; width:169px; color:#818181 !important; border:none; background:none !important; border:none !important;}
#lnb li ul li a:hover,
#lnb li ul li a:focus { font-weight:normal !important; color:#de4332 !important;}
#lnb li.on ul li.on a { color:#ff1a00 !important; font-weight:bold !important; background:url(../images/black/bulletLnb.gif) no-repeat 175px center  !important;}
/* 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 - Footer - 바닥선색*/
#footer { border-top:3px solid #ff6600; text-align:center; padding:2em 0 4em; clear:both;}
#footer li { display:inline; padding:0 .6em 0 1em; background:url(../images/black/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; }
/* black Skin - End */

편집하고,

(참고) 저같이 디폴트,흰색,오랜지 다 사용하면 모든 .css 파일을 손 봐야 합니다.
그리고 로고들어가는 부분
#header h1 { position:absolute; top:10px; left:25px;} //15번째줄
에서 top을 줄이면 로고가 위로 올라가 중앙에 배치됩니다.
그리고 저는 로고이미지를 210*70 정도 크기로 만드니 딱 들어 맞더군요.

../zbxe/layouts/xe_official/conf/ 안에 info.xml 을 열어 블랙을 오렌지로 편집하고,

이젠 로그인 모양새 바꾸기 위해

../zbxe/widgets/login_info/skins/xe_official/images/ 에 가서 black폴더 안에 그림들 변경하고

../zbxe/widgets/login_info/skins/xe_official/css/black.css 
black.css

#login { border:2px solid #ff6600; width:196px; position:relative; _padding-top:2px; display:block;} // 로그박스 테두리색
*:first-child+html body #login { padding-top:2px;}
#login legend { display:block; width:0; height:0; overflow:hidden; font-size:0;}
#login form { position:relative; border:1px solid #cacaca; padding:11px 11px 7px 11px; width:172px;}
#login form .idpwWrap { overflow:hidden; clear:both; width:172px;}
#login form .idpw { float:left;}
#login form .idpw input { border:1px solid #ff6600; color:#282828; width:105px; background:#fbfbfb; padding:1px 5px; margin-bottom:2px; font:.9em Tahoma;}
#login form .login { float:right;}
#login form p.save { clear:both; padding:.3em 0;}
#login form p.save input { vertical-align:middle; _margin:-3px;}
*:first-child+html body #login form p input { margin:-3px; }
#login form p.save label { font:.9em "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#999999;}
#login form ul.help { border-top:1px solid #e4e4e4; overflow:hidden; padding:.5em 0 0 0; white-space:nowrap;}
#login form ul.help li { float:left; display:block; padding:0 3px 0 7px; background:url(../images/black/vrType1.gif) no-repeat left center;}
#login form ul.help li.first-child { background:none; padding-left:0;}
#login form ul.help li a { color:#999999; font:.9em "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; white-space:nowrap; text-decoration:none; }
#login form ul.help li.first-child a { color:#54564b; text-decoration:none;}
#login form ul.help li a:hover { text-decoration:underline; }
#login form .userName { width:172px; overflow:hidden; border-bottom:1px solid #e4e4e4; padding:0 0 6px 0; margin-top:-5px;}
#login form .userName strong { color:#282828; float:left; padding:4px 0 0 2px; font:bold .9em Tahoma;}
#login form .userName a { float:right;}
#login form ul.userMenu { padding:0 0 6px 4px; overflow:hidden; margin-top:10px;}
#login form ul.userMenu li { list-style:none; padding-left:10px; background:url(../images/default/bulletFF1A00.gif) no-repeat left 4px; height:18px; }
#login form ul.userMenu li a { color:#54564b; text-decoration:none;}
#login form ul.userMenu li a:hover { text-decoration:underline;}
#login form p.latestLogin { color:#999999; font:.9em "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
#login form p.latestLogin span { font:1em Tahoma;}
img.login_mask { width:201px; height:5px; background:#ffffff; display:block;}
#openid_login { border:2px solid #d9d9d9; width:196px; position:relative; _padding-top:2px; display:block; }
*:first-child+html body #openid_login { padding-top:2px;}
#openid_login legend { display:block; width:0; height:0; overflow:hidden; font-size:0;}
#openid_login form { position:relative; border:1px solid #cacaca; padding:11px 11px 7px 11px; width:172px; }
#openid_login form .idpwWrap { overflow:hidden; clear:both; width:172px;}
#openid_login form .idpw { float:left;}
#openid_login form .idpw p { margin-bottom:5px; background: url(../images/openid_login_bg.gif) left no-repeat; padding-left:18px; font-size:.9em Tahoma;color:#999999}
#openid_login form .idpw input { border:1px solid #c9c9c9; color:#282828; width:105px; background:#fbfbfb; padding:1px 5px; margin-bottom:2px; font:.9em Tahoma; }
#openid_login form .login { float:right;}
#openid_login form p.save { clear:both; padding:.3em 0;}
#openid_login form p.save input { vertical-align:middle; _margin:-3px;}
*:first-child+html body #openid_login form p input { margin:-3px; }
#openid_login form p.save label { font:.9em "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#999999;}

열어 편집기로 편집 하니,
 
대강 모양새가 오렌지색을 띄네요.

다시 깔고 사진들 넣어 보다가 세번째 문제 발견

문제3, 사진을 첨부해서 갤리리로 올리면 이상하게 제일 마지막에 사진이 제일 위로 올라가 버려

            사진의 순서가  틀어져 버린다. 이것도 약간의 노가다 필요. 올린후 제일 위에 파일 지우고

            그 파일을 다시 올리면 아래로 갑니다.

그리고 저만 그런지 모르겠는데, 한번씩 홈피가 잘 열리질 않고 죽어 버리는 경우가 종종 있네요.
저는 WebMa사용자 입니다. 

이상 1주일 정도 zbxe주물러 본 사용기 입니다.

p.s 당장 궁금한 것 몇가지
1. 위에서 이야기 했듯이 색깔 추가부분
2, 게시판 생성시 밑에 있는 확장 변수 사용법등 입니다.
고수님들의 댓글 부탁합니다.

추가: 최근댓글 위젯 - 소스가 보이는 군요...
태그 연관 글
  1. [2015/09/07] 웹마스터 팁 자신에게 맞는 웹호스팅 선정과 기본 설정 팁 by 뭐야왜안돼 *11
  2. [2009/06/18] 웹마스터 팁 XE용 query xml 방식으로 일반 테이블도 접근 처리 하기 by 라르게덴 *1
제목 글쓴이 날짜
XE이전 작업순서 elancer 2019.03.28
1.11.3 업로드 패치 이후 업로드 오류 관련 우소푸 2019.04.21
로그인 실패시 실패내역 쪽지와 메일 발송 되는걸 발송 안 되게 하려면.. sejin7940 2019.05.21
스케치북5 게시판 사용자정의에 색상 적용하기 file 아데나 2019.05.31
관리자페이지의 회원목록에서 타회원들의 비밀번호 찾기 질문/답변 수정 가능하도록 하려면.. sejin7940 2019.07.03
VSCODE에서 PRETTIER-PHP 사용하기 (중급자용) reactux 2019.07.29
관리자 아이디/비번을 잃어버렸을때, 관리자페이지 접속을 못할 때 TIP [1] file 플레이웹 2019.08.13
회원가입품 연락처항목 공백잇을시 질문입니다. 해운거사2 2019.08.16
xe 기본회원가입품 연락처항목 공백&숫자 유효성검사 질문입니다. 해운거사2 2019.08.25
코드 이미지 생성해주는 사이트 [2] file reactux 2019.10.06
대부분 쉬운설치로 인해 홈페이지 빈 페이지가 뜨는 에러는.. CJM 2019.10.24
ZB게시판에 구글광고 달수 없나요? [2] 손주사랑 2019.11.23
AI 개발에 적합한 5가지 프로그래밍 언어 ppumweb 2020.01.06
커뮤니션 쪽지 보내기 기능을 모바일 에서 실행시 로그인 풀림 현상 인천한량 2020.04.14
XE를 다른디렉토리에 설치후 리다이렉트하기 디자인플렉스 2020.04.24
content 위젯에서 태그로 글 뽑기 날아올라 2021.02.07
XE 1.4에서 HTML5 에디터 사용하기 (Flash 없는) [3] file Toby 2021.02.24
불법광고 댓글 greentown 2021.05.18
검색엔진 네이버 사이트 순위 SEO 검색엔진 최적화 작업해도 안 올라간다면.. [1] file CJM 2022.05.16