이전 글에서 FootNote 플러그인을 포함한 ol (ordered list)로 선언된 리스트의 번호들이 나오지 않는지에 대해 적었는데, 문제를 해결한 듯 합니다. 저는 분명히 ol 이나 li 에 대해 따로 선언한 적은 없는데, 어디선가 꼬인 것 같아요. 아직도 정확한 이유는 모르겠습니다. 어쨌든 해결 과정을 보면,


제 스킨들의 경우에는 본문이 article 이라는 클래스 안에 들어있습니다. 물론 태터툴즈에서 제공하는 기본 스킨의 형태를 그대로 유지한 것입니다. skin.html 을 보면 다음과 같은 부분이 있죠.

<div class="article">[ ##_article_rep_desc_## ]</div>

아시다시피 [ ##_article_rep_desc_## ] 는 태터툴즈의 본문 치환자입니다.

그래서, 스타일시트 (style.css)에 다음과 같은 정의를 추가시켰습니다.

.article li { display:list-item; list-style-type:decimal;}

제가 이것저것 다 해본다고 했는데 저건 해보지 않았던 거죠. 어디서도 li 나 ol 전체에 대해 정의한 적이 없으니 이상이 없을 것이다고 생각한 거죠.

IE, 파이어폭스, 오페라에서 모두 제대로 나오는 걸 확인했으니 다른 스킨들에도 추가시켜야겠습니다. => 추가 완료 했습니다.

*

참고로 FootNote를 사용해 주석을 적은 다음 추가되는 코드를 보면 div도 footnotes, ol도 footnotes로 정의되어 있습니다. 이렇게 이름이 같을 경우에는 문제가 있지 않을까 생각해 봅니다.

위의 정의를 스타일시트에 추가한 다음 번호가 제대로 나오는 게 확인이 되면 FootNote의 스타일도 변경할 수 있겠습니다. 예를 들면 이런 식으로 정의가 가능하겠죠.

.footnotes .footnotes li { display:list-item; list-style-type:upper-roman;}

fotenotes라는 클래스가 중복으로 정의되어 있기 때문에 이렇게 해도 작동하더군요.

.footnotes li { display:list-item; list-style-type:upper-roman;}

,
Colorful Waves 1.1 스킨을 공개하고 나서 ataiger님이 이런 요청을 해주셨습니다[각주:1].
Footnote를 사용할 때 번호가 안보이는 걸 보면 본문의 ul CSS 수정이 필요할 듯 합니다.
보통 플러그인을 사용하지 않은 상태에서 스킨을 테스트하기 때문에 뭔가 설정을 해주면 되나보다 싶어서 설치형에서 FootNote 플러그인을 켜니 글입력창에서 FootNote 입력 버튼(링크)이 있더군요.

그런데, 티스토리에서는 아무리 플러그인을 켜도 입력 버튼(링크)가 안나오더라고요. 왜 안나오지? 하며 한참을 고민했는데, 본문에 직접 [ footnote ], [ / footnote ]를 입력하니 표현이 되는군요.

그런데, FootNote를 포함하여 <ol>로 표시된 내용의 번호가 안보이는 문제는 해결하지 못했습니다.

.article ol {list-style:decimal;} 혹은
.article ol {list-style-type:decimal;}

왜  이런 식으로 선언해줘도 안나올까요? ;;;

.
.
.

그런데, 재밌는(?) 건 인터넷 익스플로러에서는 번호가 잘 나온다는 것입니다. -_-* 이유를 잘 모르겠네요. @.@


위의 내용은 처리되었습니다. 다음 글을 봐주세요.
  1. 테스트 한번 해봅니다. [본문으로]
,
스킨을 배포합니다.

Colorful Waves 1.1 스크린샷

Colorful Waves 1.1의 모양은 이렇습니다.


스킨명

Colorful Waves 1.1


개요

컨텐츠 영역이 중앙 정렬되는 가변폭 스킨입니다. 좌우측에 각각 상반되는 색감의 파도 혹은 구름 모양의 배경들이 레이어로 쌓여있는 느낌이 나도록 했습니다. 사이드바는 통째로 하단으로 내려가 있습니다. 좌우측 파도 배경에 쓰인 붉은색과 파란색 계열의 색상은 컨텐츠 영역에서도 어느 정도 역할을 분담하고 있습니다.


내용

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

- 블로그 로고 이미지를 보여줍니다.
  단, 가로 250px 에 최적화되어 있습니다. 주의해주세요.

- 컨텐츠가 들어가는 영역의 폭이 브라우저의 크기에 따라 변하는 변동폭 스킨입니다.
  하지만, 브라우저가 작아진다고 해서 무한정 줄어들 수는 없겠지요.
  컨텐츠 영역의 최소폭은 500px 입니다. 브라우저가 커지면 자연스럽게 늘어나지요.

- 여러 브라우저에서 중앙정렬 및 레이아웃 유지 등을 구현하기 위해
   불가피하게 table 태그라든지 투명 이미지 등을 skin.html에 넣었습니다만,
   대부분의 경우 - 폰트 크기라든지 색깔, 사용된 이미지 등은
   style.css 파일을 수정하는 것만으로 가능합니다.

예를 들어 제목이 표시되는 폰트는 Trebuchet MS 입니다.
영문에는 잘 어울리는데, 한글 제목일 경우에는 좀 어색한 감도 있습니다.
이럴 때 style.css 를 열여서
h1 { font-size:1.8em; font-family:"Trebuchet MS" Georgia Verdana Tahoma Gulim; font-weight:bold;}
부분을 찾아서 변경해주면 됩니다.

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

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


다운로드 받으러 가기

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


그밖에.

- FootNote 플러그인으로 작성한 후 각주의 번호가 표시되지 않는다고 합니다. 물론 각주의 내용은 잘 표시되고요. 참고로 이 현상은 파이어폭스와 오페라에서 생기는 걸 확인했습니다. 인터넷 익스플로러에서는 잘 표시되네요. @.@ 처리 완료했습니다.

,
한님은 잡학편식에서 "0380. 가변폭 스킨(테마), 튼튼하십니까?"라는 글을 읽었습니다. 마침 제가 가변폭 스킨을 공개하려고 있던 참이라 눈에 들어오는군요.

CSS2 스탠다드에서 규정한 속성들 중 매우 단순하면서도 막강한 기능을 가지고 있는 것들이 있습니다. 바로 min-width, max-width, min-height, max-height 이죠.

예를 들어 <div style="min-width:250px;">가나다라마</div> 이렇게 적으면  div 안에 내용이 아무리 적어도 크기를 최소한 250px 으로 맞춰줍니다. 물론 내용이 많아지면 자연스럽게 늘어납니다. 그게 최소-넓이, min-width 지요. 반대로 내용이 아무리 많아져도 최대폭을 결정시켜주는 값은 max-width 겠지요. 두 값을 동시에 이용할 수도 있습니다. 이런 식으로 말이죠. <div style="min-width:250px; max-width:500px;">가나다라마</div>

문제는 이 편리한 속성을 인터넷 익스플로러 (이하 IE)가 알아듣지 못한다는데 있습니다. 적어도 IE 6 는 그렇습니다. IE 7 은 아직 써보지 않아서 잘 모르겠고요. 이 중에 특히 min-width, min-height 가 문제입니다. 브라우저의 가로폭이 줄어들다 보면 사이트의 기본적인 레이아웃이 망가질 수 있기 때문이지요. 구글링을 하면 이 문제로 고통받는 수많은 인민들이 보일 겁니다. 나무아비타불…

이 문제를 해결하기 위한 몇 가지 hack이 존재하기는 하지만 제 경험으로는 어떤 경우에는 제대로 작동하고, 또 어떤 경우에는 작동하지 않는 경우가 있습니다. 엄밀히 따지면 그 hack을 제대로 적용시키려면 디자인을 해체하고 다시 구성해야 되는 일이 생기는가 하면 레이아웃이 복잡하게 정의되어 있을 때는 다른 요소들과 충돌하는 경우도 생긴다는 것이지요.

하지만, 이 hack에 대해서도 간단하게 설명하고 넘어가자면 expression 이라는 걸 이용하는 겁니다. 이건 또 IE 만 알아듣는다죠. (나중에 따로 설명할게요.)

다른 브라우저에서는 이와 같이 적으면 되는 정의를

.box {min-width:350px;}

IE를 위해서는 이런 식으로 추가하는 겁니다.

.box {width:expression(document.body.clientWidth < 1024? "350px": "auto" );}

클라이언트 브라우저의 화면 가로 사이즈가 1024px 보다 작으면 350px 을 유지하라는 뜻이죠.


결국 제가 내린 결론은 레이아웃과 관련된 모든 문제를 CSS로 처리할 필요는 없다는 것입니다. 아니, 완벽하게 처리할 수 없다가 더 맞는 말이겠지요.

그렇다면 IE 에서 min-width와 max-height를 구현하는 가장 쉬운 방법은요? 이미지를 사용하는 겁니다. min-width를 예로 들죠. 어떤 영역이 커지면 커졌지 350px 이하로는 줄어들지 말아야 할 어떤 영역이 있다고 한다면,

1. 가로 세로 1px 짜리 투명 gif 이미지 하나를 준비합니다. 이름을 spacer.gif 라고 하죠.

2. 필요한 영역 안에 간단하게 다음과 같이 적어주세요.
   
<img src="spacer.gif" border=0 width="350px" height="1px">

3. 끝

간단한 원리지요. 가로폭이 350px인 이미지가 영역 안에 들어있으니 해당 영역은 절대 그 이하로 표시되지 않을 겁니다. 게다가 어차피 투명 이미지이기 때문에 세로 1px 이 남아있어도 큰 지장은 없겠지요. 보이지 않으니까요. 물론 나중에 디자인을 수정하면 스타일시트 말고도 문서를 직접 손봐야 하는 번거로움이 생겼지만 그래도 뭐, 어쩌겠어요.

간단하죠? IE 쪽에서는 언제쯤 이 문제를 수정할까요? 혹시 벌써 수정했나요? Hey, IE! Can you speak CSS2?



p.s. 하지만 이 방법 역시 문제가 있습니다. 바로 width를 em으로 지정했을 때이지요. 이건 위의 방법으로는 불가능합니다. img 태그 안의 width를 em으로 줄 수 없는 걸로 알고 있어요.

,
스킨을 만들면서 태터툴즈의 기본스킨을 보니 스타일시트가 두 개 설정되어 있었다.

<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<link rel="stylesheet" media="print" type="text/css" href="./images/print.css" />

media 라는 파라미터와 screen, print 라는 값이 굉장히 낯설었는데, print.css 를 열어놓고 브라우저에서 인쇄 미리보기를 해 보니 한눈에 알 수 있었다. 한마디로 이야기하면, media="print"를 적어주면 해당 스타일은 프린트를 위한 스타일로 지정된다는 것.

스타일시트에서 해당 영역을 display:none; 으로 지정하면 그 안에 내용이 들어있어도 화면에 보이지 않게 만들어주는 역할을 하는데, 이걸 적절히 이용해서 프린트 쪽 스타일시트에 적용하면 프린트를 할 때 꼭 필요없는 요소들 - 각종 사이드바의 내용들, 이미지로 만들어진 제목과 메뉴들, 트랙백 표시 등을 보이지 않게 만들어 줄 수 있는 것이다.

예1 - 화면을 위한 스타일시트

사이드바 등 각종 설정이 보이던 화면을,


예2 - 프린트를 위한 스타일시트

이처럼 출력해서 읽기에는 불필요한 요소를 빼고 프린트를 할 수 있다.


처음 만든 스킨은 이걸 제대로 처리하지 못했는데, 두번째 스킨은 이걸 잘 처리했다. 작지만 참으로 유용한 기술이다. 종이도 아끼고 잉크도 아끼는, 인간을 위한 기술. :)
,