스킨을 배포합니다.

Three Layers Black 1.1

Three Layers Black 1.1 입니다.


스킨명

Three Layers Black 1.1


개요

매우 단순한 형태의 스킨입니다. 특징이라면 전체적으로는 좌측 정렬, 사이드바가 두 개. 검은 계열의 스킨이라는 것이죠.


내용

- 3단형 스킨입니다. 태터툴즈의 사이드바 기능을 지원합니다.
  (관리자 모드에서 바로 넣었다 뺐다 할 수 있어요.)

- 블로그 로고 이미지를 보여줍니다.
   단, 너무 큰 이미지는 넣지 말아주세요.
  자동으로 리사이즈하는 태그를 넣지 않았습니다.
  (가로 사이즈 160px에 맞춰져 있습니다.)

- 스킨을 다운 받아 압축을 풀면 2개의 폴더가 있습니다.
  예, 하나는 설치형 태터툴즈용이고 다른 하나는 티스토리용이죠.
  폴더명 끝에 표시가 되어 있으니 선택해서 사용하시면 됩니다.

- 두 스킨의 표면적 차이는,
   미디어로그가 있느냐 없느냐의 차이입니다.
   아, 스킨 하단부에 태터툴즈 아이콘이 있느냐 티스토리 아이콘이 있느냐의 차이도 있군요.

- 컨텐츠가 들어가는 부분의 가로폭은 500px 에 맞춰져 있습니다.
  이론상으로는 컨텐츠의 폭을 수정하는 게 어렵지 않지만
  전체적인 레이아웃을 배경이미지 하나로 처리했기 때문에
  images 폴더 안의 bg.gif 를 수정해야 합니다.

- 자유롭게 수정이 가능하며, 저작권 표시하에 재배포 가능합니다.

- 테스트 환경은 윈도우XP + 파이어폭스 2.0.0.1, 인터넷 익스플로러 6.0, 인터넷 익스플로러 7.0, 오페라 9.10 입니다.
  태터툴즈 1.1과 티스토리 1.1에서 잘 작동합니다.


간단하게 스킨 구조를 표시하면 다음과 같습니다



<div id="header"></div>
<div id="content"></div>
<div id="sidebar1" class="sidebar"></div>
<div id="sidebar2" class="sidebar"></div>
<div id="footer"></div>




다운로드 받으러 가기

▶ (클릭) 태터툴즈 스킨 자료실 [TT 1.1 & 티스토리 1.1] Three Layers Black 1.1

,
font 를 제어하는 속성은 정말 다양합니다. 그 중에 영문 폰트를 사용할 때 유용한 속성 중의 하나가 바로 small-caps 죠. 풀어쓰자면 small capital letters 정도 되겠죠. 즉, 소문자를 모두 대문자로 만드는 속성입니다. 단, 크기가 작은 대문자로 만들어주죠.

백문이 불여일견, 예를 들어보죠.


[1]

font-variant:small-caps를 이용해 아래와 같이 출력시키는 건 쉽죠.



이렇게 하면 됩니다.



(font-size는 그냥 큼직하게 보이려고 줬습니다.) 분명히 코드 상으로는 H만 대문자이고, 나머지는 소문자인데, 전부 대문자로 나오고, 소문자였던 영문자들은 대문자였던 영문자보다 작게 표현되지요. 고유명사나 약어 등을 표기하는 방식으로 주로 쓰입니다. 이처럼 font-variant:small-caps는 널리 알려진, 매우 유용하고 효과적인 속성이지요.


[2]

이걸 first-letter 라는 걸 사용해 똑같이 만들 수 있습니다.



어떻게 하면 될까요?



예, 이렇게 하면 됩니다. 가상 엘리먼트 (pseudo element)인 first-leftter 를 사용하여 small-caps와 비슷한 효과를 낼 수 있었습니다. first-letter라는 게 뭔지는 자세히 설명하지 않아도 알겠지요? 해당 영역의 첫번째 문자입니다.


[3]

그렇다면 이걸 응용해보죠. 보시다시피 출판물에 자주 쓰이는 레이아웃이군요.



자, 우리는 이러한 형식도 귀찮은 테이블 따위 없이, 문장의 첫 문자만 따로 영역을 설정할 필요 없이, 쉽게 할 수 표현할 수 있는 겁니다. 바로 first-letter 라는 가상 엘리먼트 (슈도 엘리먼트)를 사용해서 말이죠.



.pdiv 의 가로 크기 100px은 어떻게 보이는지를 표현하기 위해 설정한 것입니다. 그거 말고는 이해가 되죠? 문장의 첫 문자에 따로 효과를 줄 수 있는 것입니다. float:left; 같은 것까지 먹다니, 정말 편리하군요. 게다가 보시다시피 한글도 된다는 거~!

참고로 이 first-letter 에 적용되는 속성들은 background, border, clear, color, float, font, line-height, margin, padding, text-decoration, text-transform, text-shadow, vertical-align 가 있습니다.


더 깊게 나가면 머리 아파지니 일단 이 정도로 끝내도록 하죠. ^^ 매우 유용하게 사용될 수 있는 스타일이라 생각합니다.

,
사이드바가 두 개인 스킨들을 만들면서 느낀 건데, 이게 의외로 안정감이 있더라고요. 이제껏 복잡할 것 같아서 사이드바는 한 개로만 만들어왔는데 말이죠.

그래서, 한번 더 만들어 봤습니다. 이 스킨도 '심플!'을 강조하며 시작했건만 많이 심플한 것 같지는 않군요;;; 하지만, 제 스킨들이 다 그렇듯 좀 투박해 보이기도 하고, 어느 정도 튜닝이 가능한 (^^) 뭐 그런 측면으로 볼 때는 썩 나쁘지는 않은 듯 해요.

흰색 바탕에 검은 글씨라는 기본형을 벗어난 스킨은 많이 없는 게 사실이예요. 하지만, 특정 색깔을 강조하기도 애매하죠. 결국 사이트의 성격별로 특성에 맞는 색을 강조해야 할텐데 배포용 스킨에서는 그런 게 어렵기도 하고요.

어쨌든 배경 하나 달랑 깔고 (^^), 메뉴 아이콘 간단하게 만들어서 해봤습니다. 처음에 마진을 잘못 잡고 시작해서 수정을 조금 해야 할 것 같아요. 언제나 느끼지만 가독성이 좋은 페이지를 만든다는 건 참 어려운 것 같습니다. 스킨 잘 만드시는 분들 보면 정말 대단해요.

어쨌든 이 스킨 역시 조금 더 만져서 공개하려고 합니다. ^^
,