스킨) 강좌 - 제로보드와 연동하여 방명록 만들기(수정)

질문자 : 인형의버릇 (2006/06/14)

와우.. 놀랍습니다..
이런 방명록 시스템 어떻게 하신거에요;ㅁ;
저도 스킨이랑 이런거
하고싶은데.. 어떻게 안될까요?
혹시몰라서 이멜주소 드리고갑니다;ㅁ;
w******@hotmail.com
아 그리고 링크걸고갑니다!

제 방명록에 인형의버릇님께서 남기신 내용입니다.
그리하여, 첫 강좌부터 매우 어려운 내용을 다루게 되버렸군요.
그래도 최대한 쉽게, 그래도 제로보드를 쓸줄 아는 분들을 기준으로 쓰겠습니다.

뭐든 어떤 원리로 이루어지는지를 파악해야 이해가 쉽겠죠.

간단히 설명하자면, 제로보드 게시판 상단과 하단에 불러올 파일을
이글루스 스킨을 반으로 쪼개서 위아래 각각 지정해주는 것입니다.
마치 이글루스의 일부인것처럼 보이게 하는게 핵심입니다.

* 6월26일 추가 수정합니다. 스타일시트 하나를 빼먹었었습니다.

자 그럼 시작해볼까요.

1. 일단 제로보드에서 적당한 스킨을 구해서 게시판을 하나 생성하세요.

이때 스킨을 직접 수정하시는게 가능하다면 이야기가 빠르겠습니다만,
힘들겠지요. 제로보드 스킨은 대부분이 웹표준을 무시하기때문에
무척이나 난잡하게 코드가 이루어져 있습니다.

대부분 style.css 파일이 있을텐데요.
여기서 body 태그를 망라해서 스타일을 지정해놓은게 가끔 있습니다.
스킨의 전체적인 모습을 유지할수있는선에서 그런 전체지정된 태그는
살살 삭제해주는게 전체적인 모양을 다듬는데 더 도움이 됩니다.

자세한것은 제로보드 스킨 제작과 관련되므로 언급을 피하겠습니다.

2. 상단과 하단에 들어갈 파일을 만듭니다.

이글루 스킨 편집에 들어가세요.
[html 편집하기]를 보시면 html 코드가 나옵니다.
거기서 <div id="content"> 라고 된곳을 찾으세요.
그리고 이 div를 닫는 바로 아래쯤에 있을 </div>의 위치도 확인해두세요.
예를들면 이렇습니다.

<div id="body">
<div id="container">
<!-- header start -->
<div id="header">
<h1><$header$></h1>
<p class="url"><$egloourl$></p>
<p class="usermenu"><$adminmenu type=11$>&nbsp;&nbsp;</p>
</div>
<!-- header end --><hr class="line" />
<!-- content start -->
<div id="content">
<$post$>
<p class="page">
<$prepage$>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<$nextpage$></p>
</div>
<!-- content end --><hr class="line" />
<!-- sidebar start -->
<div id="sidebar">
<p class="logoimage"><$logoimage$></p>
<p class="description"><$description$></p>
<p class="nick"><$nick$></p>
<$calendar type=1$>
<div class="menu">
<$menuleft$>
</div>
<$banner type=1$>
<$xml$>
</div>
<!-- sidebar end --><hr class="line" />
<!-- footer start -->
<div id="footer">&nbsp;</div>
<!-- footer end -->
</div>
</div>

파란색으로 칠한곳을 복사해서 메모장에 붙여넣으신뒤
header.htm 으로 저장합니다.

그리고 빨간색으로 칠한부분은 마찬가지로 메모장에 복사하여 붙여넣으신뒤
footer.htm 으로 저장하세요.

색칠하지 않은 중앙부분은 버립니다.
어떤 스킨이든 저 <div id="content"> </div> 부분은 존재할껍니다. 찾아보세요.

3. 이글루스 자체 태그를 알맞게 수정합니다.

이제 문제가 되는것은 <$header$>와 같이 <$ ?? $> 이런식으로 되어있는 태그들입니다.
header.htm 과 footer.htm 파일안의 이런 태그들을 다음과 같이 바꾸세요.

<$header$> : 현재 이글루 네임 예) PerhapsSPY SYSTEM

<$egloourl$> : 현재 이글루 주소 예) perhapsspy.egloos.com

<$description$> : 현재 이글루 설명 예) 즐거운 파이글루입니다~

<$nick$> : 당신의 닉네임 예) PerhapsSPY

<$adminmenu type=11$>
이 부분은 어드민 메뉴부분입니다.
내 이글루, 벨리, 이글루 관리, 새글쓰기 등과 같은 메뉴가 뜨는곳이죠
자신의 이글루로 가서 그 메뉴부분을 마우스로 블럭지정해서 복사한뒤에
새글쓰기로 들어가셔서 [에디터 입력] 상태에서 붙여넣으세요.
그리고 [HTML입력]으로 바꿔서 보면 소스가 있을겁니다.
그걸 통체로 복사해서 바꿔버리면 됩니다.

<$logoimage$>
이글루 로고 그림 부분입니다, 역시 어드민메뉴와 마찬가지로
그림부분을 블럭지정하여 복사하여 소스로 바꿔치기 하시면됩니다.

<$banner type=1$>
이글루 배너 부분입니다. 역시 위와 마찬가지 방법으로 소스로 바꿔치기합니다.

<$xml$>
아래 작게 RSS 라고 써있는 아이콘부분입니다. 위와 마찬가지 방법으로
소스 바꿔치기를 하세요.

<$menuleft$>
이 부분은, 최근 트랙백, 코맨트, 기타등등 사이드바 매뉴가 나오는 부분입니다.
일단 지워주세요. 제로보드상에서 호환되게 할 방법은 제 능력밖에 일인지라.
저는 그냥 이 위치에 방명록 설명을 적어놨습니다.

이 부분에, 뭔가 추가하시려면, '메뉴관리->메뉴별설정->메모장' 설정하는 방법과
동일한 방식으로 추가해서 넣으시면 됩니다.
(메모장과 관련한 이글루스 활용팁을 읽어보세요.)

아. 방명록과 이글루를 왔다갔다 할 메뉴가 필요하겠군요.
제로보드 게시판 주소와 이글루 주소를 링크한 메뉴 두개쯤을 이곳에 적던가
하시면 됩니다. 혹은 스킨자체의 상단부분에 메뉴를 만들어 넣으세요.

예) 이글루 바로가기, 방명록 바로가기 라고 적고 각각 주소를 <a>태그로 링크 하시면됩니다.

자 이렇게 header.htm 과 footer.htm 파일안의 <$ ?? $> 들을 적절하게 바꾸셨다면
거의다 한겁니다.

4. 중요한 스타일 시트를 적용해야합니다.

이글루에서 쓰는 스타일 시트를 그대로 불러와서 이글루 스킨 모습 그대로를
보여주게 하는것입니다.

자신의 이글루로 가서 마우스 오른쪽 버튼을 클릭해서 나오는 메뉴를 보시면
[소스보기]가 있으실겁니다. 그걸 선택하시거나, 익스플로러 메뉴에
[보기]->[소스]를 누르셔도 됩니다.
그러면 메모장이 뜨면서 거기에 이글루스 html 코드가 뜰겁니다.
거기서 이런부분을 찾으세요. 이글루 마다 다를껍니다.

<style type="text/css">
@import url("http://md.egloos.com/skn/pub/tp/css/template_p002.css");
@import url("http://md.egloos.com/skn/pub/tp/css/template_s001.css");
@import url("http://md.egloos.com/skn/pub/tp/css/template_c001.css");
@import url("http://md.egloos.com/skn/pub/tp/css/template_f000.css");
@import url("http://md.egloos.com/skn/pub/tp/css/template_system.css");
</style>

<link type="text/css" rel="stylesheet" href="http://logo.egloos.com/skin/css/c/004/94/c0049469_4.css" title="layout" />

이 부분을 통체로 복사해서
header.htm 파일의 맨 위에 추가해 넣으시고 저장하세요.

5. 제로보드에 상단과 하단에 파일을 적용합니다.

제로보드가 깔린 계정에 header.htm 과 footer.htm 파일을 업로드 하시고
제로보드 게시판 설정으로 가신뒤 그 주소를 각각
[게시판 상단에 불러올 파일] 과 [게시판 하단에 불러올 파일] 부분에 넣어주세요.

예)
게시판 상단에 불러올 파일 : ../header.htm
게시판 하단에 불러올 파일 : ../footer.htm

이제 끝입니다.

6. 잘 작동하는지 확인해보세요 ㅇ_ㅇ;

혹시나 제로보드 게시판이 모양이 이상하게 뜨거나 할 경우가 있습니다.
제로보드 스킨 문제인데, 스킨을 뜯어서 수정을 하거나,
이글루 스킨과 최대한 어울릴만한 스킨을 찾으시는게 좋습니다.

7. 마치면서

스킨강좌는 느리지만 계속될겁니다.
옆에 스킨강좌안내를 읽어보시고 질문을 남겨주시면
성의있는 답변 및 포스팅을 약속드립니다.
물론. 제 귀차니즘의 한계 안에서 말이죠 -_-);