너에게제공의 XE 초보 강의

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

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

조회 수 593 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

[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에 있는 회원정보,게시물 글 등 데이터를 이전을 하는 방법이 설명 할 것이다.



List of Articles
번호 제목 글쓴이 조회 수 날짜
공지 [제로보드XE 강좌] - 네에게제공의 XE 초보 강의 안내 1 너에게제공 989 2016.03.27
25 제로보드XE강좌 - [5] 제로보드XE 설치하기 file 너에게제공 482 2014.12.21
24 제로보드XE 강좌 - [4] FTP 다운로드 및 실행 file 너에게제공 309 2014.12.08
23 제로보드XE 강좌 - [3] 웹호스팅 신청하기 file 너에게제공 277 2014.11.25
22 제로보드XE 강좌 - [2] 제로보드XE를 이용하기전에 알아야 용어 file 너에게제공 347 2014.11.24
21 제로보드XE 강좌 - [1] 제로보드XE 이란 무엇인가? file 너에게제공 348 2014.11.24
20 [5] 제로보드4 스킨 XE에 적용하기 - 게시판 스킨 적용 후 마무리 1 file 너에게제공 795 2014.07.28
19 [4] 제로보드4 스킨 XE에 적용하기 - 제로보드4에서 XE으로 데이터이전하기 file 너에게제공 928 2014.07.27
» [3] 제로보드4 스킨 XE에 적용하기 - 게시판 적용하기 file 너에게제공 593 2014.07.27
17 [2] 제로보드4 스킨 XE에 적용하기 - 메인 화면 적용하기 file 너에게제공 549 2014.07.27
16 [1] 제로보드4 스킨 XE에 적용하기 - XE 게시판 생성 및 레이아웃 준비 file 너에게제공 438 2014.07.26
15 [0] 제로보드4 스킨 XE에 적용하기 - 개요 , 목적 , 준비 , 주의 할 점 너에게제공 346 2014.07.25
14 네트워크솔루션(networksolutions)에서 타 기관 도메인이전 file 너에게제공 229 2014.07.19
13 [12] 데스크탑 PC서버만들기 -ApmSetup PHP버전 업그레이드 file 너에게제공 295 2014.07.16
12 [11] 데스크탑 PC서버만들기 - 제로보드4설치하기 file 너에게제공 237 2014.07.16
11 [10] 데스크탑 PC서버만들기 - 그누보드5설치하기 file 너에게제공 286 2014.07.16
Board Pagination Prev 1 2 3 4 Next
/ 4