너에게제공의 XE 초보 강의

지금까지 경험으로 XE를 첫 시작하는 분도 이해 할 수 강의록이 되도록 노력합니다.

전문적인것 보다 XE사용법 위주으로 내용으로 게시합니다.

rhymix 기본 메뉴얼 강좌
  • 목록
  • 아래로
  • 위로
  • 쓰기
  • 검색

[3] 제로보드4 스킨 XE에 적용하기 - 게시판 적용하기

너에게제공 너에게제공
863 0 0

[3] 제로보드4 스킨 XE에 적용하기 - 게시판 적용하기


앞 전에 메인화면 적용하기와 방식을 동일 합니다.

한번해보셔서 좀 더 쉽게 따라 오실 수  있을 것입니다.


20140727_165215.jpg


1. 제로보드4의 게시판 소스파일이다. 

   게시판 index을 예로 들어서 과정을 설명을 할 것이다.




<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>touch my body</title>

<style>
body {
    background-image: url(../01/img/i_top.jpg);
    background-repeat: repeat-x;
}
a:link { text-decoration:none }
a:visited { text-decoration:none }
a:active { text-decoration:none }
a:hover { text-decoration:none }
</style>
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table border="0" width="1120" cellpadding="0" cellspacing="0" align="center" height="810">
    <tr>
        <td width="180" height="150" align="left" valign="top">
            <p style="margin-top:50; margin-bottom:0;"><span style="font-size:26pt;"><a href="../01/main.html"><font face="Oswald" color="white">touch my body</font></a></span></p>
            <p style="line-height:100%; margin-top:0; margin-bottom:0;"> </p>
            <p style="line-height:100%; margin-top:0; margin-bottom:0;"><span style="font-size:9pt;"><font  color="white"><b</b></font></span><b></b><font ></font></p>
            <p style="line-height:100%; margin-top:0; margin-bottom:0;"><span style="font-size:9pt;"><font  color="white"><b></b></font></span><font ></font></p>
        </td>
        <td width="920" height="150" align="right" valign="bottom" colspan="8"></td>
    </tr>
    <tr>
        <td width="180" height="51" align="left" valign="bottom">
<p style="line-height:150%; margin-top:0; margin-bottom:0;"><span style="font-size:9pt;"><b><a href="../bbs/zboard.php?id=notice" target="_self"><font  color="white">NOTICE</font></a><font  color="white"> / </font><a href="../bbs/admin.php" target="_self"><font  color="white">ADMIN</font></a></b></span></p>
</td>
        <td width="705" height="51" align="right" valign="bottom"></td>
        <td width="50" height="51" align="right" valign="bottom" bgcolor="#FF4B3E" style="cursor:hand;" onClick="location.href='../bbs/zboard.php?id=index'"></td>
        <td width="5" height="51" align="right" valign="bottom"></td>
        <td width="50" height="51" align="right" valign="bottom" bgcolor="#4DD2EE" style="cursor:hand;" onClick="location.href='../bbs/zboard.php?id=memo'"></td>
        <td width="5" height="51" align="right" valign="bottom"></td>
        <td width="50" height="51" align="right" valign="bottom" bgcolor="#3ACFC0" style="cursor:hand;" onClick="location.href='../bbs/zboard.php?id=photo'"></td>
        <td width="5" height="51" align="right" valign="bottom"></td>
        <td width="50" height="51" align="right" valign="bottom" bgcolor="#5F6DCD" style="cursor:hand;" onClick="location.href='../bbs/zboard.php?id=video'"></td>
    </tr>
    <tr>
        <td width="180" height="32" align="left" valign="top"> </td>
        <td width="920" height="32" align="right" valign="bottom" colspan="8"></td>
    </tr>
    <tr>
        <td width="180"> </td>
        <td width="920" height="75" colspan="8" rowspan="3" style="border-top-width:3; border-right-width:3; border-bottom-width:2; border-left-width:3; border-color:rgb(29,29,29); border-top-style:none; border-right-style:none; border-bottom-style:solid; border-left-style:none;"></td>
    </tr>
    <tr>
        <td width="180" height="50" bgcolor="#FF4B3E" align="center" valign="middle"><span style="font-size:14pt;"><font face="Open Sans Condensed" color="white">touch my body</font></span></td>
    </tr>
    <tr>
        <td width="180" style="border-bottom-width:2; border-bottom-color:rgb(29,29,29); border-bottom-style:solid;" align="right" valign="top"> </td>
    </tr>
    <tr>
        <td width="180" height="3" style="border-top-width:3; border-top-color:rgb(29,29,29); border-top-style:double;" align="right" valign="top"> </td>
        <td width="920" height="3" colspan="8" style="border-top-width:3; border-top-color:rgb(29,29,29); border-top-style:double;"> </td>
    </tr>
    <tr>
        <td width="180" height="400" align="right" valign="top" style="border-top-width:3; border-right-width:1; border-top-color:rgb(29,29,29); border-right-color:rgb(29,29,29); border-top-style:none; border-right-style:solid;">
    <p style="line-height:100%; margin-top:30; margin-right:10;"><b><i><span style="font-size:14pt;"><font color="#999999">.site menu</font></span></i></b></p>
            <p style="line-height:100%; margin-top:30; margin-right:10;"><span style="font-size:9pt;"><b><a href="../bbs/zboard.php?id=notice" target="_self"><font  color="#1D1D1D">notice</font></a></b></span></p>
            <p style="line-height:100%; margin-top:30; margin-right:10;"><span style="font-size:9pt;"><b><a href="../bbs/zboard.php?id=index" target="_self"><font  color="#1D1D1D">index</font></a></b></span><font color="#1D1D1D"></font></p>
            <p style="line-height:100%; margin-top:30; margin-right:10;"><span style="font-size:9pt;"><b><a href="../bbs/zboard.php?id=memo" target="_self"><font  color="#1D1D1D">memo</font></a></b></span><font color="#1D1D1D"></font></p>
            <p style="line-height:100%; margin-top:30; margin-right:10;"><span style="font-size:9pt;"><b><a href="../bbs/zboard.php?id=photo" target="_self"><font  color="#1D1D1D">photo</font></a></b></span><font color="#1D1D1D"></font></p>
<p style="line-height:100%; margin-top:30; margin-right:10;"><span style="font-size:9pt;"><b><a href="../bbs/zboard.php?id=video" target="_self"><font  color="#1D1D1D">video</font></a></b></span></p></td>
        <td width="920" height="400" colspan="8" style="border-top-width:3; border-top-color:rgb(29,29,29); border-top-style:none;" align="center" valign="top">



</td>
    </tr>
    <tr>
        <td width="180" height="3" align="right" valign="top"> </td>
        <td width="920" height="3" colspan="8"> </td>
    </tr>
    <tr>
        <td width="180" height="50" style="border-top-width:3; border-top-color:rgb(29,29,29); border-top-style:solid; border-right-style:none; border-bottom-style:none; border-left-style:none;" align="center" valign="top">
            <p style="line-height:100%; margin-top:10; margin-right:0;" align="center"><b><font  color="#1D1D1D"><span style="font-size:13pt;">2014 ⓒ touch my body</span></font></b></p>
        </td>
        <td width="920" height="50" colspan="8" style="border-top-width:3; border-top-color:rgb(29,29,29); border-top-style:solid; border-right-style:none; border-bottom-style:none; border-left-style:none;" align="right" valign="top">
<p style="line-height:100%; margin-top:10; margin-right:0;" align="right"><b><span style="font-size:20pt;"><a href="#" target="_self"><font  color="#1D1D1D">TOP</font></a></span></b></p>
</td>
    </tr>
</table>
</body>

</html>


2.위 소스 제로보드4 index파일 과 foot파일의 소스 코드이다.


20140727_165543.jpg


3. 제로보드4에서는 위와 같은 방법으로 스킨을 적용을 했을 것이다.


<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>touch my body</title>

<style>
body {
    background-image: url(/img/i_top.jpg);
    background-repeat: repeat-x;
}
a:link { text-decoration:none }
a:visited { text-decoration:none }
a:active { text-decoration:none }
a:hover { text-decoration:none }
</style>
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table border="0" width="1120" cellpadding="0" cellspacing="0" align="center" height="810">
    <tr>
        <td width="180" height="150" align="left" valign="top">
            <p style="margin-top:50; margin-bottom:0;"><span style="font-size:26pt;"><a href="/home"><font face="Oswald" color="white">touch my body</font></a></span></p>
            <p style="line-height:100%; margin-top:0; margin-bottom:0;"> </p>
            <p style="line-height:100%; margin-top:0; margin-bottom:0;"><span style="font-size:9pt;"><font  color="white"><b</b></font></span><b></b><font ></font></p>
            <p style="line-height:100%; margin-top:0; margin-bottom:0;"><span style="font-size:9pt;"><font  color="white"><b></b></font></span><font ></font></p>
        </td>
        <td width="920" height="150" align="right" valign="bottom" colspan="8"></td>
    </tr>
    <tr>
        <td width="180" height="51" align="left" valign="bottom">
<p style="line-height:150%; margin-top:0; margin-bottom:0;"><span style="font-size:9pt;"><b><a href="/notice" target="_self"><font  color="white">NOTICE</font></a><font  color="white"> / </font><a href="/admin" target="_self"><font  color="white">ADMIN</font></a></b></span></p>
</td>
        <td width="705" height="51" align="right" valign="bottom"></td>
        <td width="50" height="51" align="right" valign="bottom" bgcolor="#FF4B3E" style="cursor:hand;" onClick="location.href='/index'"></td>
        <td width="5" height="51" align="right" valign="bottom"></td>
        <td width="50" height="51" align="right" valign="bottom" bgcolor="#4DD2EE" style="cursor:hand;" onClick="location.href='/memo'"></td>
        <td width="5" height="51" align="right" valign="bottom"></td>
        <td width="50" height="51" align="right" valign="bottom" bgcolor="#3ACFC0" style="cursor:hand;" onClick="location.href='/photo'"></td>
        <td width="5" height="51" align="right" valign="bottom"></td>
        <td width="50" height="51" align="right" valign="bottom" bgcolor="#5F6DCD" style="cursor:hand;" onClick="location.href='/video'"></td>
    </tr>
    <tr>
        <td width="180" height="32" align="left" valign="top"> </td>
        <td width="920" height="32" align="right" valign="bottom" colspan="8"></td>
    </tr>
    <tr>
        <td width="180"> </td>
        <td width="920" height="75" colspan="8" rowspan="3" style="border-top-width:3; border-right-width:3; border-bottom-width:2; border-left-width:3; border-color:rgb(29,29,29); border-top-style:none; border-right-style:none; border-bottom-style:solid; border-left-style:none;"></td>
    </tr>
    <tr>
        <td width="180" height="50" bgcolor="#FF4B3E" align="center" valign="middle"><span style="font-size:14pt;"><font face="Open Sans Condensed" color="white">touch my body</font></span></td>
    </tr>
    <tr>
        <td width="180" style="border-bottom-width:2; border-bottom-color:rgb(29,29,29); border-bottom-style:solid;" align="right" valign="top"> </td>
    </tr>
    <tr>
        <td width="180" height="3" style="border-top-width:3; border-top-color:rgb(29,29,29); border-top-style:double;" align="right" valign="top"> </td>
        <td width="920" height="3" colspan="8" style="border-top-width:3; border-top-color:rgb(29,29,29); border-top-style:double;"> </td>
    </tr>
    <tr>
        <td width="180" height="400" align="right" valign="top" style="border-top-width:3; border-right-width:1; border-top-color:rgb(29,29,29); border-right-color:rgb(29,29,29); border-top-style:none; border-right-style:solid;">
    <p style="line-height:100%; margin-top:30; margin-right:10;"><b><i><span style="font-size:14pt;"><font color="#999999">.site menu</font></span></i></b></p>
            <p style="line-height:100%; margin-top:30; margin-right:10;"><span style="font-size:9pt;"><b><a href="/notice" target="_self"><font  color="#1D1D1D">notice</font></a></b></span></p>
            <p style="line-height:100%; margin-top:30; margin-right:10;"><span style="font-size:9pt;"><b><a href="/index" target="_self"><font  color="#1D1D1D">index</font></a></b></span><font color="#1D1D1D"></font></p>
            <p style="line-height:100%; margin-top:30; margin-right:10;"><span style="font-size:9pt;"><b><a href="/memo" target="_self"><font  color="#1D1D1D">memo</font></a></b></span><font color="#1D1D1D"></font></p>
            <p style="line-height:100%; margin-top:30; margin-right:10;"><span style="font-size:9pt;"><b><a href="/photo" target="_self"><font  color="#1D1D1D">photo</font></a></b></span><font color="#1D1D1D"></font></p>
<p style="line-height:100%; margin-top:30; margin-right:10;"><span style="font-size:9pt;"><b><a href="/video" target="_self"><font  color="#1D1D1D">video</font></a></b></span></p></td>
        <td width="920" height="400" colspan="8" style="border-top-width:3; border-top-color:rgb(29,29,29); border-top-style:none;" align="center" valign="top">
<div>{$content}</div>
</td>
    </tr>
    <tr>
        <td width="180" height="3" align="right" valign="top"> </td>
        <td width="920" height="3" colspan="8"> </td>
    </tr>
    <tr>
        <td width="180" height="50" style="border-top-width:3; border-top-color:rgb(29,29,29); border-top-style:solid; border-right-style:none; border-bottom-style:none; border-left-style:none;" align="center" valign="top">
            <p style="line-height:100%; margin-top:10; margin-right:0;" align="center"><b><font  color="#1D1D1D"><span style="font-size:13pt;">2014 ⓒ touch my body</span></font></b></p>
        </td>
        <td width="920" height="50" colspan="8" style="border-top-width:3; border-top-color:rgb(29,29,29); border-top-style:solid; border-right-style:none; border-bottom-style:none; border-left-style:none;" align="right" valign="top">
<p style="line-height:100%; margin-top:10; margin-right:0;" align="right"><b><span style="font-size:20pt;"><a href="#" target="_self"><font  color="#1D1D1D">TOP</font></a></span></b></p>
</td>
    </tr>
</table>
</body>

</html>


4. 위 소스는 XE에 적용 하기위하여 수정을 한 것이다.


기본적으로 이미지 및 링크 경로를 상대경로 맞추어 줍니다.


제로보드4에서 i_head.html 파일 소스코드 맨 마지막에 <div>{$content}</div> 를 꼭 추가한다.

<div>{$content}</div> 이것이 게시판을 불러오는 콘텐츠이다.


바로 이어서 foot.html파일의 소스를 붙여 주면 됩니다.


핵심은 경로를 수정을 해주고 , <div>{$content}</div> 를 추가하는 것이 필수이다.


20140726_135446.jpg


5. 앞 전에 메인을 작업을 했던 것을 반복을 해주시면 됩니다.

   index 레이아웃에 편집으로 이동을 합니다.


20140726_234558.jpg


6. 기본 레이아웃 소스를 모두 삭제를 해주십니다.


20140726_234644.jpg


7. 위 수정한 소스코드를 복사를 해서 넣어주시고 저장을 한다.


20140727_170054.jpg



8.zb.d2d2.kr/index 이런식으로 해당 게시판을 들어간다.

  게시판 오른쪽에 톱니바퀴 모양을 눌러 이동한다.


20140727_170113.jpg


9. 레이아웃을 수정한 index(user_layout)선택을 후 저장을 한다.


20140727_174108.jpg


10. 위 와 같이 게시판에도 수정한 레이아웃이 적용이 된 것을 확인을 할 수 있습니다.


   제로보드4에서 게시판 스킨이 여러 종류가 있을 것이다. XE에도 게시판 스킨이 많이 있으니 설정 후 통하여 변경이

  

 가능합니다. 추후 설명에서도 변경하는 방법을 설명을 할 것이다.


*위와 같은 방법으로 나머지 게시판에도 레이아웃을 적용을 하시면 됩니다.

  

  다음 설명에서는 제로보드4에 있는 회원정보,게시물 글 등 데이터를 이전을 하는 방법이 설명 할 것이다.


작성된 댓글이 없습니다.
신고공유스크랩

댓글 0

댓글 쓰기
권한이 없습니다. 로그인
에디터 모드

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

이 댓글을 삭제하시겠습니까?

공유

퍼머링크
태그 : 제보로드4스킨XE에적용하기
번호 제목 글쓴이 조회 수 날짜
공지 [제로보드XE 강좌] - 네에게제공의 XE 초보 강의 안내 1 너에게제공 2188 16.03.27.17:46
6
image
[5] 제로보드4 스킨 XE에 적용하기 - 게시판 스킨 적용 후 마무리 1
너에게제공 1277 14.07.28.12:20
5
image
[4] 제로보드4 스킨 XE에 적용하기 - 제로보드4에서 XE으로 데이터이전하기
너에게제공 1274 14.07.27.22:59
image
[3] 제로보드4 스킨 XE에 적용하기 - 게시판 적용하기
너에게제공 863 14.07.27.17:44
3
image
[2] 제로보드4 스킨 XE에 적용하기 - 메인 화면 적용하기
너에게제공 796 14.07.27.00:13
2
image
[1] 제로보드4 스킨 XE에 적용하기 - XE 게시판 생성 및 레이아웃 준비
너에게제공 780 14.07.26.21:25
1
normal
[0] 제로보드4 스킨 XE에 적용하기 - 개요 , 목적 , 준비 , 주의 할 점
너에게제공 571 14.07.25.21:57
검색 취소 쓰기
1

검색