텍스트큐브의 전신 태터툴즈 시절부터 작성되어져 왔던 스킨 매뉴얼을 텍스트큐브의 최신버전에 맞춰 내용을 업데이트 하였습니다. 텍스트큐브 설치형 스킨제작에 조금이나마 도움이 되어 더욱 더 다양한 텍스트큐브를 볼 수 있었으면 하는 사용자의 한사람으로 노가다좀 했습니다. ^^

User image


User image


설명 및 스크린샷은 플라이투 스킨을 예로 만들어졌습니다.

티스토리 스킨 매뉴얼은 "티스토리 스킨가이드"를 이용하시면 됩니다.
텍스트큐브 버전업에 따라 업데이트된 내용을 제외한 거의 모든 내용이 동일합니다.

플라이투 스킨은 ClearType을 지원하는 맑은고딕체를 기본으로 사용하고 있습니다. 먼저 맑은고딕체(비스타(Vista), MS 오피스 2007의 한글 공식 글꼴이라고 하네요)를 다운로드 받아 C:\Windows\Fonts에 복사해둡니다. 이렇게 설치된 맑은고딕체를 부드럽고 깔끔하게 보려면 ClearType속성을 이용해야 합니다.

ClearType이란 텍스트에 포토샵으로 작업한것과 같은 효과를 주어 텍스트를 좀 더 고급스럽게 보이도록 Anti Aliasing을 적용시켜 주는 기능입니다. 참고로 굴림이나 돋움체는 ClearType을 지원하지 않습니다.

ClearType을 적용하는 방법에 대하여 알아보겠습니다.

  1. 바탕화면에서 마우스 오른쪽 버튼을 클릭하여 "속성"을 선택한 후 "화면 배색"탭으로 이동하여 "효과"버튼을 클릭합니다
    디스플레이 등록정보 - 화면배색
  2. "화면 글꼴의 가장자리를 다음는데 다음 방법 사용"에서 ClearType을 선택합니다.
    효과

참고로 ClearType을 좀 더 정교하게 설정할 수 있는 ClearType Tuner라는 것도 있습니다.

플라이투 스킨은 사이드바 230pixel, 본문영역이 500pixel이고, 여기에 여백등을 고려하면 스킨의 전체 사이즈가 820pixel 입니다. 여기에서 본문 영역을 넓게 쓰고자할때 어떤 부분을 어떻게 수정하면 되는지 알아보도록 하겠습니다.

step 01. style.css 파일을 편집하겠습니다.
  1. "Layout"이라고 주석처리 되어 있는 곳으로 이동하면, container, content, sidebar 에 각각 width속성이 지정 되어 있습니다. 본문 영역을 200pixel 더 넓혀서 700pixel로 쓰고 싶다면, content의 width를 700px로 수정합니다. 이렇게 되면 스킨 전체 사이즈가 늘어 났기 때문에 container도 200pixel더해서 1020pixel로 수정해야 합니다.
  2. "Article Basic Style"라고 주석처리 되어 있는 부분으로 이동하면 article 레이어에도 width가 지정되어 있습니다. 역시 700px로 수정합니다.
    * article의 width부분을 삭제하셔도 무방합니다. 다만, overflow:hidden; 을 content 레이어로 옯겨주시면 됩니다.
  3. "Content Part" 라고 주석처리 되어 있는 부분으로 이동하면, writeForm 레이어에 textarea와 textField라는 클래스명을 가진 input폼의 가로 사이즈를 각각 200pixel 넓혀 주시면 됩니다. (* 방명록과 댓글이 writeForm이라는 동일한 클래스명을 사용하고 있기 때문에 한번만 수정해 주시면 두곳 모두 수정이 됩니다. )
step 02. index.xml 파일을 편집하겠습니다.
가장 아랫부분으로 이동하면 contentWidth를 지정하는 곳이 나옵니다. 이곳을 700으로 수정해 주어야 합니다. 이 부분이 스킨에 직접적인 영향을 미치는 것은 아닙니다. 다만 글을 작성할때 텍스트 입력폼의 사이즈를 이 수치로 반영하게 됩니다. 또한 본문에 이미지를 삽입할때도 이곳의 수치를 참고하여 이미지의 기본 가로 사이즈를 반영하게 됩니다.

요약하자면...

style.css의 Layout 에서
#container { width:820px;} → #container { width:1020px;}
#content { width:500px;} → #content { width:700px; overflow:hidden;}
style.css의 Article Basic Style 에서
.article { width:500px; overflow:hidden;} → .article { }
style.css의 Content Part 에서
#content .writeForm .textField { width:250px;} → #content .writeForm .textField { width:450px;}
#content .writeForm textarea { width:330px;} → #content .writeForm textarea { width:530px;}
index.xml에서
<contentWidth>500</contentWidth> →<contentWidth>700</contentWidth>

텍스트큐브가 진화(?)하면서 티스토리에서 사용하지 않는 치환자들이 많이 생겨 났습니다. 텍스트큐브용으로 만들어진 스킨에서 다음의 치환자들만 제거하면 티스토리에서도 사용할 수 있습니다.

<head> 영역안

메타 데이터 (삭제)
<meta http-equiv="Keywords" content="[##_meta_http_equiv_keywords_##]" />
RSS 활성화 (삭제)
<link rel="alternate" type="application/rss+xml" title="[##_title_##] : comments" href="[##_comment_rss_url_##]" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##] : trackbacks" href="[##_trackback_rss_url_##]" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##] : comments + trackbacks" href="[##_response_rss_url_##]" />
브라우저 타이틀 (수정)
<title>[##_title_##] <s_page_title> :: [##_page_post_title_##]</s_page_title></title>
수정 -->
<title>[##_title_##] :: [##_page_title_##]</title>

menu 영역

표지 (삭제)
<li id="menuCover"><a href="[##_blog_link_##]cover">Cover</a></li>

content 영역

표지 출력 부분 (삭제)
<s_cover> ... </s_cover>
검색결과 트랙백 리스트 (삭제)
<s_tblist> ... </s_tblist>
키워드 설명 출력 부분 (삭제)
<s_keylog_rep> ... </s_keylog_rep>
에러 페이지 출력 (삭제)
<s_page_error> ... </s_page_error>
방명록 - 오픈 아이디 사용 부분 (삭제)
<s_guest_input_form_openid_only> ... </s_guest_input_form_openid_only>
댓글 - 오픈 아이디 사용 부분 (삭제)
<s_rp_input_form_openid_only> ... </s_rp_input_form_openid_only>

sidebar 영역

저자 출력 부분 (삭제)
<s_sidebar_element><!-- 저자 모듈 --> <s_author_rep> ... </s_author_rep></s_sidebar_element>

footer 영역

표지 메뉴 부분 (삭제)
<a href="[##_blog_link_##]cover">Cover</a>
카피라잇 부분 (수정)
<a href="[##_blog_link_##]"> [##_blogger_##]</a>’s Blog is powered by
<a href="http://www.textcube.org" onclick="window.open(this.href); return false">[##_textcube_name_##] [##_textcube_version_##]</a>
수정 -->
<a href="[##_blog_link_##]"> [##_blogger_##]</a>'s Blog is powered by <a href="http://daum.net" onclick="window.open(this.href); return false">Daum</a>

수정이 힘드신 분들은 아래 파일을 다운로드 받아 교체해 주시면 되겠습니다.

잘못된 부분 있으면 신고 바랍니다. 신고는 아래 댓글로 부탁드립니다.
태터툴즈 블로그 스킨을 사용하다보면 가운데로 정렬되어 있는 스킨을 왼쪽 정렬로 바꾸고 싶을때가 있습니다. 혹은 그 반대의 경우도 있을 수 있겠지요..

스킨의 정렬을 바꾸기 위해서는 구조를 살짝 들여다볼 필요가 있습니다.
제일 바깥쪽을 둘러싸고 있는 레이어의 클래스명을 찾아서 이 레이어의 정렬을 지정해 주면 블로그 전체의 정렬을 내 마음대로 할 수 있겠지요. ^^

예를 들어 tistory(태터툴즈 기본스킨)스킨의 skin.html 파일을 살펴보면...

<body>
<s_t3>
  <div id="container">
   .
   .
   .

코드가 이런식으로 시작하고 있습니다.
이제 제일 바깥쪽 레이어의 이름이 container 라는 것을 알아냈습니다.

container 레이어를 왼쪽으로 정렬시키기 위해서는... style.css 파일에서
#container {
이렇게 시작하는 부분을 찾습니다.
이 레이어의 속성중에 레이어 바깥쪽의 여백값을 설정해 주는 부분이 있습니다.

margin:0 auto;
바로 이 부분이지요..

이걸 해석해 보면... 블로그의 위와 아래 여백을 0으로 하고,
왼쪽과 오른쪽 여백을 적당히 배분해서 레이어를 가운데로 위치시킨다.... 모 이런뜻이 되겠습니다. ^^

왼쪽으로 정렬 시키려면
#container {
  margin:0 20px;
}

이런식으로 작성해 주면 됩니다.
왼쪽과 오른쪽 여백을 20px로 준 이유는 0으로 해버리면 너무 왼쪽으로 딱 붙어 버리기 때문입니다.  위와 아래에도 여백을 주고 싶다면

#container {
  margin:10px 20px;
}

이렇게 하면 되구요..
위, 아래, 왼쪽, 오른쪽 모두 다른 값을 주고 싶다면.

#container {
  margin:10px 0 20px 30px ;
}

각각의 값은
margin : 위 오른쪽, 아래, 왼쪽;
에 대응됩니다.


이바닥에서 아는 사람은 다~~~ 아는 상식이겠지만..
물어보는 분이 종종 계셔서... 포스팅합니다.
사실 '웹표준'따위는 전혀 신경쓰지 않고 코딩하는 웹디자이너들도 모르는 상식이랄까요.- -;;
레이아웃을 테이블로 만들게 되면 전혀 필요없는 팁이지요.. ^^

내 블로그에 올린 글을 프린트할 일이 생겼을때 잉크값도 아까운데 프린트 되지 않아도될 영역까지 프린트가 됩니다. 이를태면 사이드바, 댓글, 트랙백 등등이 붙을테죠.

이제는 내가 프린트하고 싶은 요소만 프린트 해보려고 합니다.
"타이틀, 카테고리, 글쓴 날짜, 본문 내용" 이렇게 네가지 요소만 프린트 하고자 한다면 어떻게 하면 될까요?

지금까지 이런식으로 screen에 대한 스타일만 지정했다면
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
더불어 print를 위한 스타일을 지정해 주면 됩니다
<link rel="stylesheet" media="print" type="text/css" href="print.css" />

그럼 print.css를 작성해 보겠습니다.
프린트하지 않을 영역은 모두 사라지게 합니다.
예를 들면
sidebar { display:none;}

이렇게 하면 사이드바 영역은 사라지게 됩니다.
이런식으로 프린트하지 않을 영역을 모두 display:none를 시켜줍니다.

다 되었다면 프린트 해 보세요.
불필요한 요소는 모두 사라지고 내가 원하는 것들만 프린트 됩니다.
제블로그의 http://plyfly.net/2629980 글을 "인쇄 미리보기"로 본 스크린샷입니다.



테스트 페이지

Skin story/Skin Tip | 2006.04.22 17:15 | leezche
웹표준을 위한 테스트 페이지 입니다
스킨에 대한 유효성 검사시에 이 포스트를 이용할것!