티스토리 뷰
Unicorn은 Skin기능을 제공하며 다음과 같이 크게 두개의 디렉토리로 구성되어있습니다
하나는 JSP 소스 디렉토리이며 /jsp/board/skin/ 아래에 위치합니다
다른 하나는 스킨 이미지 디렉토리입니다 /img/skin/ 아래에 위치합니다
만약 red라는 스킨을 다운받았다면 소스는 /jsp/board/skin/red/ 이곳에
이미지는 /img/skin/red/ 에 두면 됩니다
주의할 점은 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입니다 |
스킨 이미지 디렉토리에 꼭 포함되어있어야 합니다
이미지들을 변경할려면 동일한 이름으로 변경 하시면 됩니다
대부분 이미지들은 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 |
frame에 대한 설정은 /jsp/layouts/board_layout.jsp 에서 설정합니다
아래 설정이 디폴트 설정입니다 즉 좌, 우측은 width 0으로 설정하고 가로로 3단계로 나눕겁니다
위와 같이 원하는데로 페이지를 구성하세요
각각은 다음 페이지를 의미합니다
<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는 공통으로 사용되는 부분이며 화면 디자인에 맞게 메뉴등으로 만드시면 편리하게 사용할 수 있습니다