티스토리 뷰

skin.zip

FROSTEYe v6.0 (Eyes only)

 

이 블로그의 스킨입니다.

 

1. 소스코드 참고용으로 배포하는 것이지 블로그에 쓰시라고 배포하는 것이 아닙니다.

절대경로나 기타 광고코드 및 잡다한 코드가 제 블로그에 최적화되어 있는 상태로 들어가 있으며, 일부 치환자나 텍큐닷컴이 제공하는 기능이 빠져있습니다.

때문에 그대로 블로그에 덮어씌우시면 곤란합니다.

 

2. 따라서 다른 블로그에 이 스킨을 사용하실 수는 없습니다.

수정해서 사용하시는 것도 금지합니다.

배포판은 현재 계획만 하고 있으나 언제가 될지는 모릅니다.

만약 배포판을 만들게 된다면 현재 보시는 스킨 모양과는 다른 모양과 구조가 될 것입니다.

 

3. IE8과 구글 크롬에서 테스트하였으며 두 브라우저 간의 크로스브라우징이 지원됩니다.

1%빼놓고는 IE8과 크롬에서 똑같은 화면을 보실 수 있습니다만, 사파리나 IE6 그리고 파이어폭스에서는 테스트해보지 않았기 때문에 레이아웃이 깨져보일 수 있습니다.

테스트는 해 보지 않았으나 사파리나 파이어폭스의 경우에는 잘 보이리라 생각합니다.

웹표준을 준수하여 제작했기 때문에 몇몇 자바스크립트나 광고를 빼고 스킨의 기본뼈대는 "웹표준을 준수하는 브라우저라면" 제대로 표시될 것입니다.

 

4. 1024*768 해상도를 사용하는 사람이 아직도 많기 때문에 가로 950px의 고정폭을 사용했습니다.

구글 광고 때문에 본문의 너비는 730px 정도로 맞추었습니다.

또한 IE6을 사용할 경우 최신 브라우저로 변경하라는 권고문이 뜨게됩니다.

 

5. 주석이 거의 없습니다.

또 텍큐닷컴에서 제공하는 레퍼런스 스킨과는 클래스나 ID명이 거의 모두 다릅니다.

또 저는 웹 디자이너나 코더가 아니기 때문에 전제적인 구조 역시 난잡하고 복잡하며, 모든 스타일이 CSS로 분리되지 않은 부분도 있습니다.

 

6. 스킨에 대한 질문이 있으시거나 이러한 부분의 코딩이 궁금하다는 분들은 이 게시글에 댓글로 문의해 주시면 제 시간과 능력이 허용하는 한 도움을 드리도록 하겠습니다.

 

7. 번호매긴 리스트나 순서없는 리스트 등 제가 거의 사용하지 않는 기능에는 css 스타일이 지정되어 있지 않습니다.

또 표기능에도 스타일이 지정되어 있지 않습니다.

이들 기능은 전혀 고려치 않았으며 테스트도 해보지 않았기 때문에 제대로 표시되지 않을 수 있습니다.

다음 버전업이 언제가 될지는 모르겠지만 다음에는 고려해 보도록 하겠습니다.

 

8. 텍큐닷컴도 블로그를 다섯개 까지 생성 할 수 있습니다.

http://www.textcube.com/account/modify/에서 블로그를 새로 만들거나 폐쇄 할 수 있습니다.

스킨을 테스트해 보실 분은 새로운 블로그를 만들어서 테스트 해보시면 좋을 것 같네요.

 

9. 이미지 사용을 극도로 자제하여 이 블로그에 사용되고 있는 gif 아이콘은 10개 정도입니다.

기타 다른 이미지 아이콘 등은 텍큐닷컴에서 기본 제공하는 기능이나 광고 정도입니다.

스킨 제작하시는 분들에게 참고로 전해드리자면, 텍큐닷컴 서버에서 출력되고 있는 아이콘이나 기타 스크립트는 로딩속도가 아주 늦습니다.

이 블로그에서 로딩이 제일 빠른 것은 구글 광고입니다. 텍큐닷컴 블로그 이미지나 아이콘들은 로딩이 상대적으로 느립니다.

빠른 페이지로딩을 위해서는 이미지 사용을 자제하는 것이 좋습니다.

10개의 gif 이미지파일과, 1개의 프리뷰 이미지 + skin.html + index.xml + style.css로 구성되어 있습니다.

텍스트큐브닷컴(以下 텍큐닷컴) 스킨은 테터툴즈... 아니 설치형 텍스트큐브와 비슷하면서도 어딘가 다르기 때문에 설치형과 비슷한 접근방법을 가지고 스킨을 만들었다가는 실패 할 확률이 높습니다.

 

스킨 삽질 중 알아낸 몇 가지 것들...

http://www.frosteye.net/236

 

스킨 제작에 유용 할지도 모르는 팁들...

http://www.frosteye.net/130

 

그리고 이 블로그의 첫번째 글을 장식하고 있는 푸념...

http://www.frosteye.net/1

 

스킨을 제작하면서 알아낸 것들을 대충 정리해 보면,

 

1. 텍큐닷컴에는 각주 기능이 있습니다. 테터툴즈였을 당시에 플러그인으로 작동하던 것인데 텍큐닷컴에서는 통합(integrated)되어 제공되고 있는 기본 기능이 되었습니다.

모르시는 분들이 아주 많으실텐데, 이런식으로 동작합니다.[각주:1]

삽입하는 방법은 원하는 자리에 '[풋노트]각주[/풋노트]' 이런 식으로 지정해 주면 됩니다. (물론 괄호안의 '풋노트'는 영어-footnote-로 적어야 합니다.)

문제는 이 풋노트의 스타일이 css에 클래스 .footnote로 지정되어 있기는 한데, <div>태그와 <ol>에 중복 적용되어 있어서 footnote에 지정된 스타일이 두번 나타납니다.

예를 들자면, 테두리를 1px 지정했다면 2px로 렌더링됩니다.

 

이를 해결하기 위해서는 .footnote에 지정되어 있는 스타일을 <ol> 태그에서 모두 취소하면 됩니다.

".footnote ol"을 다시한번 지정해서 테두리를 취소하거나 하면 의도했던 대로 각주가 표시됩니다.

 

그리고 IE8에서의 문제인데, 본문안에서 각주는 <sup></sup>태그를 이용해서 번호를 구현합니다.

그런데 IE8은 sup을 고정글꼴로 렌더링하기 때문에 임의로 스타일을 지정해도 거부합니다.

크롬에서는 <sup></sup>에 스타일을 지정하면 그대로 작동하지만 IE8은 무시하기 때문에 각주에 스타일을 지정하시려는 분들은 이를 참고로 하시기 바랍니다.

 

2. 다음뷰 박스는 티스토리의 경우 css에 클래스로 스타일이 따로 지정되어 있고 다양한 플러그인이 지원되며 플러그인들이 저마다 클래스를 가지고 있어서 커스터마이징이 쉽습니다.

텍큐닷컴의 경우 다음뷰 박스는 클래스가 지정되어 있지 않고 본문에 강제로 스타일이 지정되는 형태의 원시적인 형태로 구현됩니다.

 

3. <head></head>에는 현재 meta 태그와 link 태그만 작동합니다.

보안상의 이유라는데, 자바스크립트나 title 태그는 씹어먹습니다. 우적우적...

때문에 title 태그는 그냥 빼버리는 것이 낫습니다.

 

4. 자바스크립트는 텍큐닷컴 글쓰기에서, HTML 편집을 이용해 포스트 본문 안에 삽입은 가능합니다.

하지만 본문 안에서는 <p>나 <div>로 묶어야 작동합니다.

그것도 중간에 넣어야 작동합니다.

이유는 보안 같은 것이겠지만서도, 아무튼 그렇습니다.

 

5. 사실 블로그 내용만 표시하려 한 다면 아주 쉽습니다.

아래의 포스팅을 참조하시기 바랍니다.

http://www.ziwoogae.com/entry/다시-한번-느끼지만-역씨-텍큐닷컴-스킨은

그리고 개발자이신 겐도님의 말을 빌자면,

<s_rp_input_form> </s_rp_input_form> 같은 경우 <s_rp_input_form /> 로 쓰면 됩니다. s_rp 내용 쓰기 귀찮다? 그럼 <s_rp /> 하면 됩니다.
좀 심하게 글 표시 영역, 그닥 안고쳐도 되겠다? <s_article_rep /> 만 쓰면 알아서 채워진답니다.
사실 대충 head와 body, 안에 s_article_rep, s_sidebar, s_paging 정도만 잡아주면 대에충 스킨이 나온다는 소문이?

 그렇습니다.

필수적인 치환자는 s_article_rep, s_sidebar, s_paging 정도이며, 이것만 스킨 안에 있으면 다른 무슨 짓을 해도 잘 작동합니다.

전혀 엉뚱한 모양의 스킨을 만들 수도 있다는 말이겠지요.

사실 처음에는 프레임셋을 사용해서 만들어보려 했지만 능력과 시간이 안 되어 포기하고 텍큐닷컴 레퍼런스의 전통적인 모양을 따라갔습니다.

그 외에도 텍큐닷컴 스킨은 스타일을 지정하지 않아도 치환자만 있으면 자기가 알아서 제꺽제꺽 잘 렌더링합니다.

그런데 왜 스킨 제작이 어렵나?

 

그것은 누구도 이런 사실을 가르쳐 주지 않기 때문입니다.

 

설치형 텍스트큐브닷컴의 경우 스킨 제작 가이드가 잘 정리되어 서비스되고 있는 것과 달리(www.textcube.org),

텍큐닷컴은 정리되어 있는 wiki형태의 문서나 레퍼런스 가이드 등이 없어서 사용자들이 삽질한 결과물에 의존해야 하는 것이 현재 상태라는 것이죠.

빨리 해결되어야 할 과제 같습니다.

  1. 이런 식으로 동작합니다. [본문으로]

'Gossip > Internet' 카테고리의 다른 글

이 블로그의 스킨은...  (0) 2009.09.16
이 블로그의 스킨입니다.  (3) 2009.09.13
아 끝이 보인다  (2) 2009.09.11
블로그 스킨 소스코드입니다. (Proto type)  (9) 2009.09.08
댓글
  • 프로필사진 BlogIcon 회색웃음 4. 권고문 뜹니다. But.. 나중에 컴퓨터를 포맷할 때, 다른 것을 깔아볼랍니다.. ㅋ

    음.. 삽질도 알아야 하는 법! 이 모든 것을 했다는 것에 존경을 표하는 바입니다. :)
    (일하기 싫어서 밍기적거리는 접니다. 핫핫핫.. 이궁~)
    2009.09.13 16:59 신고
  • 프로필사진 BlogIcon FROSTEYe IE6은 문제가 많아요 >.<
    크롬은 엄청 빠르답니다. 한번 사용해 보세요.
    그리고 주말에는 쉬세요~
    2009.09.13 17:07 신고
  • 프로필사진 비밀댓글입니다 2009.09.14 04:37
댓글쓰기 폼