위즈군의 라이프로그
Reboot... Search /

xpak 1.0 스킨 사용법

2006.06.28 16:54

0. 스킨을 공개하면서

좀 심플한 스킨을 찾다가 그냥 하나 만들자 해서 만들게 됐습니다. 가급적 XHTML 표준에 맞추려고 노력 했습니다. 현재 IE, FF 테스트에서는 특별한 문제 없었고요.
기타 다른 문제는 엔트리의 내부에서 지원되지 않는 태그에 대해서는 어떻게 표준에 맞출 수가 없다는 것입니다. 이 부분은 코어에서 지원을 해줘야 하는 부분이라 넘어가겠습니다.
그리고 테마 방식으로 만들려고 하다 보니 조금 지저분하게 만들어진 것 같네요.
그나마 테마라고 들어 있는 것도 부끄러울 따름 입니다. (저는 미적 감각이라고는 없는 프로그래머라) 프로젝트 때문에 시간도 별로 없어서 대충 마무리 지어 이렇게 공개 합니다. 제가 시간 끄는 것 보다 많은 분이 도와 주시면 더 좋은 스킨이 될 수 있을 거라는 생각입니다.

좋은 테마 만드시면 올려 주시고요. 더 좋은 스킨으로 만들어 주세요.
참고로 SsemiSsemi 님의 스킨을 참고로 "태터 클래식 스킨" 참고로 만들었습니다.



다운로드는 요기

1. 기본구성

스킨 디렉터리를 보시면 왼쪽과 같은 파일들이 존재합니다.
skin.html 파일은 스킨 템플릿 파일이고, 기타 css 파일들은 테마별로 구성해놓은 것입니다.

2. 스킨 테마 선택

우선 왼쪽 그림에 나오는 파일들 중 style.css 파일을 편집기를 이용해 오픈 하세요.
그럼 아래와 같은 내용이 출력 됩니다. 기본 설정되어 있는 테마 중 하나를 선택하시려면 xpak_테마이름.css 파일을 선택하세요. 기본은 xpak_blue.css 로 선택 되어 있습니다.


기타 xpak_define.css 태터툴즈에서 기본적으로 설정되어 있는 스타일시트 입니다. 가급적 수정 하지 않는 편이 좋습니다.
xpak_layout.css 기본 레이아웃에 대한 설정이 되어 있는 파일 입니다.
xpak_define.css, xpak_layout.css  파일은 항상 import 되어 있어야 하구요.
테마를 위한 각각의 스타일시트는 색상과 기타 모양과 관련된 설정이 되어 있습니다.

3. 스킨 테마 수정 및 추가

xpak_blue.css, xpak_pink.css, xpak_green.css, xpak_puple.css 중 테마 파일 하나를 복사해서 이름을 수정합니다. 그리고 style.css 에서 설정된 테마를 제외 하고 import 합니다.

예)
@import "xpak_define.css";
@import "xpak_layout.css";
@import "my_theme.css"; /* 새로 만든 테마 파일 */
그리고 나서 이 테마 파일을 편집기를 이용해 열면 아래와 같은 내용이 출력 됩니다.


주석을 참고해서 수정하시면 됩니다.

4. 플래시카운트 활성화

skin.html 파일을 열어서 라인 83의 카운트 부분을 지우고, 라인 84의 주석 처리된 부분을 살려 주시면 됩니다.

5. 추가하는 말

모두 공개된 스킨입니다. 마음 것 사용하시고, 수정 되고 더 좋게 만들어지면 알려 주세요. 저도 더 예쁜 스킨을 사용 하고 파요.

Milak 님이 요청하신 수정 스킨:
신고
多多 2006.06.28 18:47 신고 E / R
깔끔하네요. 수고하셨습니다^^
wiz 2006.06.29 11:47 신고 E
감사합니다.
railyn 2006.06.29 10:28 신고 E / R
가운데 정렬이 안됩니다. OTL
wiz 2006.06.29 11:53 신고 E
기본적으로 왼쪽 정렬을 사용했습니다.
가운데 정렬 하시려면..
약간 수정을 해야 할 것 같습니다.^^ㅋ
swakiss 2006.06.30 01:42 신고 E / R
이쁜 스킨 만들어 주셔서 잘 쓰고 있습니다. 그런데, location 에 트리가 없어서 엑박으로 뜹니다. 실력이 안되서 고치지도 못하고 -_-;; 그리고 굴림 이외에 영문글꼴을 따로 지정하는 경우 어떤 파일에 어떤 부분을 수정해야 하는지 알 수 있을까요?
wiz 2006.06.30 09:50 신고 E
우선 글꼴은 xpak_layout.css 파일의 가장 위에 일괄 적용을 해놓은 상태 입니다. (body, td, div, p, span) 태그에요.
요부분을 수정하시면 전체 폰트가 수정됩니다.
그리고 각각의 요소별로 알려 드리자면.

39줄 .EntryTitle {font-family:[글꼴];} 엔트리 제목
41줄 .EntryBody : 엔트리 내용
20줄 #MenuCont .Title : 메뉴 제목
22줄 #MenuCont .Items .Item :메뉴 아이템

각각 원하시는 부분을 수정 하시면 됩니다.

위부분 까지는 모두 xpak_layout.css 파일이구요.
기타 내용은 사용하시는 xpak_테마.css 파일에서 주석 보시고 수정 하시면 됩니다.

위치 로그는 제가 사용을 하지 않아서 확인을 않해봤는데. 확인 해보고 조금더 깔끔 하게 정리 해서 올리도록 하겠습니다.
wiz 2006.06.30 10:08 신고 E
위치로그 이미지 깨짐 수정해서 테터에 올려놨습니다.
이리도 허접한 스킨을 사용해주시다니 감사합니다.^^
그럼 좋은 하루 되세요..
swakiss 2006.06.30 20:28 신고 E / R
답변 대단히 감사합니다. 허접하지 않습니다. 태터 1.x 버전에서 첫눈에 띈 스킨은 이게 처음이에요 ^^
wiz 2006.07.02 13:23 신고 E
네..감사합니다.
죠죠 2006.07.04 12:36 신고 E / R
스킨에 문제가 있는 것 같습니다. 다른 분이 hidden으로 방명록에 작성한 글에 관리자로 로그인하여 reply를 달 경우 이 글의 수정과 삭제가 불가능 합니다. 글 정렬도 강제로 좌측 정렬만 되네요,.
wiz 2006.07.04 22:36 신고 E
네...
거기까지는 테스트를 못해봤습니다.
수정하는데로 올려놓도록 하겠습니다.^^
오늘은 너무늦어서.
무대포 2006.07.11 15:36 신고 E / R
1024*768 해상도에 맞게 하려면 어느부분을 어떻게 수정해야하는지 좀..
화면 넓이부분을 전체하고 메인 넓이를...
전체 : 1024px 메인넓이 : 764px로 수정하였는데..
좌우로 스크롤이 생기네요...
꼭 써보고 싶습니다... ㅠㅠ
wiz 2006.07.12 09:16 신고 E
xpak_blue.css 등 사용하시는 테마 스타일 파일의 상단에 (위에 코드그림 참조) 라인 11 이 전체 넓이 구요..
라인 12가 메뉴쪽 넓이 입니다. 라인 13이 메인 화면의 컨텐츠 내용 부분의 넓이 입니다.
이 부분을 원하시는 사이즈로 수정 해주시면 됩니다.

좋은 하루 되세요.
Milak 2006.07.20 16:07 신고 E / R
안녕하세요^_^ 이쁜 스킨 감솨드려용>_<♡ 그런데~ Comment에 Name이미지를 wiz님이 지정하신 이미지가 아니라 그냥 TT에서 쓰던 이미지로 사용하고 싶어요~!! skin.html의 Comment 부분에서 <img src="img/ ~~~ 이부분을 고쳐주면 될 것 같은데 어떻게 고쳐야 할지는 잘 모르겠어서요 ;_;(테터입문한지 일주도 채 안된 초짜랍니다) 좀 알려 주실 수 있을까용? 좋은 하루 보내세요:9
wiz 2006.07.21 14:27 신고 E
스킨에 관심을 가져 주셔서 감사합니다.
수정한 내용 위에 링크 걸어놨습니다.
좋은 하루 되세요.
Milak 2006.07.21 18:26 신고 E
고맙습니다~>ㅁ<♡
서브 블로그에 잘 사용하고 있어요+_+♥
플밍하시는 분이라 그러신지 소스를 참 깔끔하게 짜놓으셨더군요+_+ 건드리기도 편하고 너무 멋지세요~!
wiz 2006.07.24 11:23 신고 E
감사합니다.^^
궁금이 2006.09.12 01:32 신고 E / R
스킨이 너무 깔끔하고 예쁘네요. 제 개인적인 느낌으로는 현재 나와있는 태터 스킨중 베스트 5안에 들듯 합니다. ^^ 근데 궁금한 점이 하나 있는데요, 글 중간에 소스 코드 신택스 하일라이팅은 어떻게 처리하신 건가요? 아직 태터 쓰는 법을 잘 몰라서 질문드립니다...
2006.09.12 16:34 E / R
비밀댓글입니다
Name : Password : Blog : ( )

위즈군의 라이프로그

Category

전체 (569)
개발 (0)
정보 (0)
일상 (0)
정리중 (569)
Total:2,056,027
Today:16 / Yesterday:120
Daum 코드
Powered by Tistory / Skin by 위즈 / Copyright Click Here 라이센스정책 rss 2.0