개요
이 문서는 XE의 게시판 모듈의 스킨을 만드는 방법을 설명합니다.
이 글 하나에는 그 내용을 모두 다 담지 못하여 몇개의 글을 올리면서 연작으로 올릴 생각입니다.
많은 성원과 관심 부탁드립니다.
※참고 : 글의 목적에 따라 XE 게시판 모듈의 설치 방법은 작성하지 않았습니다.
참조 문서
이 문서는 아래 링크의 문서를 참조합니다.
- XE 스킨 제작 메뉴얼 v.1.0 (http://doc.xpressengine.com/manual/XE-Skin_Manual-ko(v1.0).pdf)
- https://xe1.xpressengine.com/manual/XE-Skin_Manual-ko(v1.0).pdf
- https://xe1.xpressengine.com/manual/XE-Skin_Manual-ko(v1.1).pdf
- 예제파일
http://doc.xpressengine.com/manual/user_board.zip - 더 있으면 좋겠다능(..)
목차
- 개요
- 참조문서
- XE 게시판 모듈 스킨의 종류
- 스킨별 사용되는 파일의 목록
- xe_board의 파일 구조
- xe_default의 파일 구조
- xe_official의 파일 구조
- xe_v3_default의 파일 구조
- user_board의 파일 구조
- 파일별 용도 간략설명
- 예제로 살펴보는 게시판 모듈 스킨의 구조
- user_board 의 구조
- 새로 만들 게시판 모듈 스킨의 구조
- eond_board2(가제)
준비물
3. XE 게시판 모듈 스킨의 종류
게시판 모듈의 스킨을 만들기 위해서는 만들 게시판 스킨의 뼈대가 될 재료가 필요합니다.
현재 XE에서 제공하고 있는 게시판 모듈의 스킨은 아래와 같습니다.
- xe_board
- xe_official
- xe_v3_default
- xe_v3_gallery
- user_board
게시판 모듈 스킨명 | 제작자 | 만든 시기 | 비고 |
xe_board | 정찬명 | 2007-10-22 |
|
xe_default | NHN | 2008-10-27 |
|
xe_official | 정찬명 | 2009-06-01 | XE 공식사이트에 적용된 스킨 |
xe_v3_default |
| 2010-12-24 | XE 공식사이트 버전3에 적용된 스킨 |
xe_v3_gallery |
| 2010-12-24 | XE 공식사이트 버전3에 적용된 스킨 |
user_board |
| 2010-12-24 | 메뉴얼 파일 첨부된 예제 스킨 |
4. 스킨별 사용되는 파일의 목록
기본적으로 사용되는 스킨 파일은 다음과 같습니다.
파일 | 설명 | 파일명 및 위치 변경 |
skin.xml | 스킨의 정보를 담고 있는 기본 파일입니다. | 고정 |
list.html | 게시판 목록을 보여주는 파일입니다. | 고정 |
write_form.html | 게시판 글쓰기 화면을 보여주는 파일입니다. | 고정 |
comment.html | 게시판 코멘트창을 보여주는 파일입니다. | 고정 |
message.html | 알림 메세지를 보여주는 파일입니다. | 고정 |
input_passwor_form.html | 비밀번호 입력화면을 출력하는 파일입니다. | 고정 |
delete_form.html | 게시판 글삭제 화면을 보여주는 파일입니다. | 고정 |
delete_comment_form.html | 코멘트 삭제창을 출력하는 파일입니다. | 고정 |
delete_trackback_form.html | 트랙백을 삭제하는 화면을 출력하는 파일입니다. | 고정 |
user_board.css | 스킨에 사용되는 스타일시트 파일입니다. | 가능 |
user_board.js | 스킨에 사용되는 자바스크립트 파일입니다. | 가능 |
_header.html | 헤더 파일입니다. | 가능 |
_footer.html | 푸터 파일입니다. | 가능 |
_read.html | 글읽기 화면을 출력하는 파일입니다. | 가능 |
_comment.html | 댓글을 출력하는 파일입니다. | 가능 |
_trackback.html | 트랙백을 출력하는 파일입니다. | 가능 |
- xe_board
- xe_official
- xe_v3_default
- xe_v3_gallery
- user_board
4.1. user_board 의 파일 구조
4.2. 파일별 용도 간략설명
skin.xml
4.3. 예제로 살펴보는 게시판 모듈 스킨의 구조
본문
글전체 리스트
- 스킨 레이아웃 및 목록 스타일
1. list.html
1. header.html
1. footer.html
1. common.css
글보기 화면
- 글보기 화면에 나타나는 스타일
2. view_document.html
7.1. eond_board(2)의 구조
※스킨에 사용되는 기본적인 파일[표1과 같음]
파일 | 설명 | 파일명 및 위치 변경 |
skin.xml | 스킨의 정보를 담고 있는 기본 파일입니다. | 고정 |
list.html | 게시판 목록을 보여주는 파일입니다. | 고정 |
write_form.html | 게시판 글쓰기 화면을 보여주는 파일입니다. | 고정 |
comment.html | 게시판 코멘트창을 보여주는 파일입니다. | 고정 |
message.html | 알림 메세지를 보여주는 파일입니다. | 고정 |
input_passwor_form.html | 비밀번호 입력화면을 출력하는 파일입니다. | 고정 |
delete_form.html | 게시판 글삭제 화면을 보여주는 파일입니다. | 고정 |
delete_comment_form.html | 코멘트 삭제창을 출력하는 파일입니다. | 고정 |
delete_trackback_form.html | 트랙백을 삭제하는 화면을 출력하는 파일입니다. | 고정 |
user_board.css | 스킨에 사용되는 스타일시트 파일입니다. | 가능 |
user_board.js | 스킨에 사용되는 자바스크립트 파일입니다. | 가능 |
_header.html | 헤더 파일입니다. | 가능 |
_footer.html | 푸터 파일입니다. | 가능 |
_read.html | 글읽기 화면을 출력하는 파일입니다. | 가능 |
_comment.html | 댓글을 출력하는 파일입니다. | 가능 |
_trackback.html | 트랙백을 출력하는 파일입니다. | 가능 |
./css/user_board.css
./js/user_board.js
./modules/
./modules/
./modules/
./modules/
./modules/
./
※빨리 작성해라고 독촉댓글을 남겨주시면 남겨주시는대로 틈틈히 작성해나가겠습니다. (__);