오피전용태그를 이용하여 간단한 예제 몇가지 만들어봤습니다.
게시판 타이틀 부분은 텍스트로도 꾸밀 수도 있고 이미지로도 꾸미기도 가능합니다.
첫번째 줄이 텍스트로 꾸민 것이고 두번째 줄이 이미지로 꾸민 예시입니다.
이외에도 게시물 앞의 이미지나 더 세세한 곳까지 자유롭게 꾸밀 수 있습니다.
(소스는 아래 그림 중에 텍스트로 꾸며진 부분만 게시하도록 하겠습니다.)
예시홈페이지 : http://lovecss.ohpy.com/
1.
'홈페이지관리 > 대문' 에서...
'대문구성선택' 중에 'HTML' 또는 'HTML+최근 게시물'을 선택합니다.
2.
'HTML 입력' 에디터에서 'HTML'버전으로 전환한 후, 아래 소스에서 !!!가 붙어있는 곳을 수정한 후 입력합니다.
!!!가 붙어있는 곳은 게시판주소, 게시판제목 등을 입력하시는 곳입니다.
이미지소스는 제 홈페이지에 맞춰진 이미지들인데, 특히 게시판 제목 부분의 이미지는 홈페이지의 넓이에 맞춰서 변경하셔야 합니다.
width가 맞지 않으면 2단설정이 흐트러질 수 있습니다.
<!-- 단설정 -->
<div class="bbs-box-wrap">
<!-- 추출테이블 (왼쪽)-->
<table class="bbs-box bbs-box-left" cellspacing="0" cellpadding="0">
<tr>
<td class="topl" valign="top"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/corner_tl.gif" alt="" width="4" height="4"></td>
<td class="topnone" colspan="2"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
<td class="topr" valign="top"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/corner_tr.gif" alt="" width="4" height="4"></td>
</tr>
<tr>
<td class="midl"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
<td class="titletxt" colspan="2"><a href="!!!게시판링크주소" target="_self">!!!게시판제목</a></td>
<td class="midr"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
</tr>
<tr>
<td class="midl"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
<td class="subject"><RecentPost bbs_no="!!!게시판번호" length="30" is_new="y" group="1"></RecentPost></td>
<td class="date"><RecentPostDate bbs_no="!!!게시판번호" type="Y-m-d" group="1"></RecentPostDate></td>
<td class="midr"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
</tr>
<tr>
<td class="midl"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
<td class="subject"><RecentPost bbs_no="!!!게시판번호" length="30" is_new="y" group="1"></RecentPost></td>
<td class="date"><RecentPostDate bbs_no="!!!게시판번호" type="Y-m-d" group="1"></RecentPostDate></td>
<td class="midr"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
</tr>
<tr>
<td class="midl"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
<td class="subject"><RecentPost bbs_no="!!!게시판번호" length="30" is_new="y" group="1"></RecentPost></td>
<td class="date"><RecentPostDate bbs_no="!!!게시판번호" type="Y-m-d" group="1"></RecentPostDate></td>
<td class="midr"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
</tr>
<tr>
<td class="botl"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/corner_bl.gif" alt="" width="4" height="4"></td>
<td class="botnone" colspan="2"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
<td class="botr"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/corner_br.gif" alt="" width="4" height="4"></td>
</tr>
</table>
<!-- 추출테이블 (오른쪽)-->
<table class="bbs-box bbs-box-right" cellspacing="0" cellpadding="0">
<tr>
<td class="topl" valign="top"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/corner_tl.gif" alt="" width="4" height="4"></td>
<td class="topnone" colspan="2"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
<td class="topr" valign="top"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/corner_tr.gif" alt="" width="4" height="4"></td>
</tr>
<tr>
<td class="midl"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
<td class="titletxt" colspan="2"><a href="링크주소" target="_self">!!!게시판제목</a></td>
<td class="midr"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
</tr>
<tr>
<td class="midl"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
<td class="subject"><RecentPost bbs_no="!!!게시판번호" length="30" is_new="y" group="1"></RecentPost></td>
<td class="date"><RecentPostDate bbs_no="!!!게시판번호" type="Y-m-d" group="1"></RecentPostDate></td>
<td class="midr"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
</tr>
<tr>
<td class="midl"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
<td class="subject"><RecentPost bbs_no="!!!게시판번호" length="30" is_new="y" group="1"></RecentPost></td>
<td class="date"><RecentPostDate bbs_no="!!!게시판번호" type="Y-m-d" group="1"></RecentPostDate></td>
<td class="midr"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
</tr>
<tr>
<td class="midl"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
<td class="subject"><RecentPost bbs_no="!!!게시판번호" length="30" is_new="y" group="1"></RecentPost></td>
<td class="date"><RecentPostDate bbs_no="!!!게시판번호" type="Y-m-d" group="1"></RecentPostDate></td>
<td class="midr"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
</tr>
<tr>
<td class="botl"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/corner_bl.gif" alt="" width="4" height="4"></td>
<td class="botnone" colspan="2"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/none.gif" alt=""></td>
<td class="botr"><img src="http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/corner_br.gif" alt="" width="4" height="4"></td>
</tr>
</table>
</div>
<style>
/*단설정*/
.bbs-box-wrap { clear:both; float:left; width:100%; padding-bottom: 10px;}
/*추출테이블*/
.bbs-box { float:left; width:361px; }
/*추출테이블상단*/
.bbs-box .topl, .bbs-box .topr { width: 4px;}
.bbs-box .topnone { border-top: 1px solid #c8c8c8; }
/*추출테이블중앙 : 게시물추출*/
.bbs-box .midl { border-left: 1px solid #c8c8c8;}
.bbs-box .midr { border-right: 1px solid #c8c8c8;}
.bbs-box .titletxt { padding: 0 4px 3px 4px; }
.bbs-box .titletxt a { float:left; width: 100%; padding: 4px 0; color: #f60; border-bottom: 1px dotted #ccc; font: bold 12px/1.2em 돋움,sans-serif; text-decoration:none; }
.bbs-box .subject { width: 275px; padding: 4px 5px 2px 5px;}
.bbs-box .subject a { float:left; padding: 0 0 0 6px; background: url(http://tplimg1.ohpy.com/up/tplimg/lo/lovecss/bul.gif) no-repeat 0 5px;color: #555; font: normal 12px/1.2em 돋움,sans-serif;}
.bbs-box .date { padding-top: 2px; color: #666; font: normal 11px/1.2em 돋움,sans-serif;}
/*추출테이블하단*/
.bbs-box .botl, .bbs-box .botr { width: 4px; }
.bbs-box .botnone { border-bottom: 1px solid #c8c8c8; }
/*추출테이블 여백 설정 : 오른쪽 테이블에만 설정*/
.bbs-box-right { margin-left:10px; }
</style>
※ CSS는 width에 민감하기 때문에 사용되는 이미지가 크기가 크거나, width가 넓게 설정되어있으면 깨질 수 있으니
홈페이지에 맞게 사이즈를 조절해서 쓰시기 바랍니다.
[참고하세요]
오피전용태그를 이용하면 게시물 글자수 조절, new아이콘 노출여부, 이미지 넣기 등 더욱 섬세한 설정을 할 수 있을 뿐아니라,
좀더 응용하면 전체 홈페이지의 최근게시물을 한곳에 뿌려줄 수도 있습니다.
HTML과 CSS를 조금 아신다면 오피전용태그를 이용해서 메인을 꾸미는 것을 적극 추천합니다.
오피 전용 태그의 자세한 사용법은 http://www.ohpy.com/3/109 이 게시물을 참고하세요.
P.S. 좀 어려울 수도 있으니 잘 안되시는 분은 댓글 남겨주시면 더 연구해서 답변드리겠습니다.
