티스토리 뷰

유니콘

Unicorn Skin

wewin 2009.08.19 08:58


1. Unicorn Skin 구조

Unicorn은 Skin기능을 제공하며 다음과 같이 크게 두개의 디렉토리로 구성되어있습니다
하나는 JSP 소스 디렉토리이며 /jsp/board/skin/ 아래에 위치합니다
다른 하나는 스킨 이미지 디렉토리입니다 /img/skin/ 아래에 위치합니다
만약 red라는 스킨을 다운받았다면 소스는 /jsp/board/skin/red/ 이곳에
이미지는 /img/skin/red/ 에 두면 됩니다

주의할 점은 JSP 스킨 디렉토리와 이미지 스킨 디렉토리 이름이 동일해야 합니다
2. Skin 소스 설명 스킨소스에는 모두 18개의 JSP 소스가 있습니다
스킨소스를 크게 게시판 스킨공통부분 스킨으로 구분됩니다
게시판 스킨은 관리자 메뉴의 게시판관리 > 게시판별 설정 > 화면설정에서 설정하며 게시판 관련 스킨입니다
공통스킨은 게시판관리 > 게시판 공통부분 설정 > 공통스킨설정에서 설정하며
회원가입 페이지, 로그인 페이지, 고급검색 페이지,회원 리스트 페이지, 비밀번호 찾기 페이지, 에러메세지 페이지, 외부로그인페이지와 관련된 스킨입니다
게시판 스킨만 만들어 배포할 수 있으며 혹은 공통부분 스킨만 만들어 배포할 수도 있습니다

게시판 스킨
JSP Comment
board_edit.jsp 게시물 새글작성 / 글수정 / 답글작성등에 공통으로 쓰는 JSP입니다
board_list.jsp 게시판 제목을 표현합니다
list.jsp를 포함하고 있습니다
board_read.jsp 게시물 상세조회 JSP입니다
list.jsp 실질적인 게시물 목록 JSP입니다
board_list.jsp와 board_read.jsp에서 list.jsp를 include하고 있습니다


공통부분 스킨
JSP Comment
board_login.jsp 게시판 로그인 JSP입니다
board_outlogin.jsp 게시판 외부로그인 JSP입니다 (로그인상태)
board_outlogout.jsp 게시판 외부로그인 JSP입니다 (로그아웃상태)
board_search.jsp 게시물 고급검색 JSP입니다
board_error.jsp 에러메세지 출력 JSP입니다
board_outlogin.jsp 외부로그인 JSP 입니다 (로그인상태)
board_outlogout.jsp 외부로그인 JSP입니다 (로그아웃상태)
member_join.jsp 회원가입 및 수정 JSP입니다
member_list.jsp 회원 리스트입니다
포인트가 높은 회원 TOP 100입니다
member_password.jsp 비밀번호 찾기 JSP입니다
message_edit.jsp 쪽지쓰기 JSP입니다
message_getlist.jsp 받은쪽지함 리스트 JSP입니다
message_putlist.jsp 보낸쪽지함 리스트 JSP 입니다
message_list.jsp 보낸/받은 쪽지함에서 보여지는 쪽지목록 JSP 입니다
message_view.jsp 보낸/받은 쪽지함에서 쪽지내용 JSP 입니다
popup_error.jsp 팝업창에서 에러가 발생한 경우 이동하는 JSP입니다
popup_icon.jsp 회원 가입/수정 페이지에서 회원 아이콘 입력 팝업창 입니다
popup_member.jsp 회원 상세보기 팝업창 입니다
popup_photo.jsp 회원 가입/수정 페이지에서 회원 사진 입력 팝업창입니다
popup_post.jsp 회원 가입/수정 페이지에서 우편번호 검색 팝업창입니다
post_list.jsp 우편번호 검색 리스트 JSP입니다
3. 디폴트 이미지 목록 이 이미지들은 Unicorn에서 디폴트로 사용하는 이미지 파일들입니다
스킨 이미지 디렉토리에 꼭 포함되어있어야 합니다
이미지들을 변경할려면 동일한 이름으로 변경 하시면 됩니다
대부분 이미지들은 taeyo게시판에 있는것을 활용했습니다

Image name Image
i_10minus_blue.gif
i_10minus_gray.gif
i_10plus_blue.gif
i_10plus_gray.gif
i_allsee.gif
i_best.gif
i_content_on.gif
i_content_off.gif
i_content_on.gif
i_doc.gif
i_file.gif
i_loading.gif
i_memo.gif
i_memo_x.gif
i_name_off.gif
i_name_on.gif
i_new.gif
i_next_blue.gif
i_next_gray.gif
i_notice.gif
i_nox.gif
i_okx.gif
i_poll_l.gif
i_poll.gif
i_poll_c.gif
i_poll_r.gif
i_prev_blue.gif
i_prev_gray.gif
i_re.gif
i_search.gif
i_search_x.gif
i_secret.gif
i_subject_off.gif
i_subject_on.gif
i_sum_up.gif
i_sum_down.gif
i_title.gif
i_write.gif
b_line.gif
4. Unicorn frame 설정 Unicorn은 Tiles를 이용하였기 때문에 자유로운 frame설정 및 화면구성이 가능합니다
frame에 대한 설정은 /jsp/layouts/board_layout.jsp 에서 설정합니다
아래 설정이 디폴트 설정입니다 즉 좌, 우측은 width 0으로 설정하고 가로로 3단계로 나눕겁니다

<table border=0 width=780 height=100% cellspacing=0 cellpadding=0>
  <tr>
    <td><tiles:insert attribute="header"/></td>
  </tr>
  <tr>
    <td>
      <table border=0 width=100% cellspacing=0 cellpadding=0>
        <tr>
          <td width=0><tiles:insert attribute="left"/></td>
          <td><tiles:insert attribute="body"/></td>
          <td width=0><tiles:insert attribute="right"/></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td><tiles:insert attribute="footer"/></td>
  </tr>
</table>


위와 같이 원하는데로 페이지를 구성하세요
각각은 다음 페이지를 의미합니다
<tiles:insert attribute="header"/> -> /jsp/layouts/board/board_header.jsp
<tiles:insert attribute="left"/> -> /jsp/layouts/board/board_left.jsp
<tiles:insert attribute="body"/> -> 프로그램에서 쓰는 페이지입니다
<tiles:insert attribute="right"/> -> /jsp/layouts/board/board_right.jsp
<tiles:insert attribute="footer"/> -> /jsp/layouts/board/board_footer.jsp

board_header.jsp, board_left.jsp, board_right.jsp, board_footer.jsp는 공통으로 사용되는 부분이며 화면 디자인에 맞게 메뉴등으로 만드시면 편리하게 사용할 수 있습니다
댓글
댓글쓰기 폼
공지사항
Total
43,406
Today
2
Yesterday
6
링크
«   2018/06   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함