원래는 심플하게 만들려고 노력하던 스킨인데, 날짜 표시를 조금 다르게 해보고, 배경에 색깔을 깔고, 사이드바 기능을 테스트하다 보니 하나도 심플하지 않습니다. (물론 보이기는 심플하지만요. ^^)
'심플'의 이유 중의 하나는 설치형 태터툴즈와 티스토리를 따로 배포하는 게 힘들어서 한번에 모두 만족시키는 스킨을 만들고자 함도 있었는데 자바스크립트를 사용한 날짜 표시가 티스토리에서는 제한적으로 되는 바람에 결국 따로 만들어야 할 것 같고, (어차피 미디어로그랑 키로그도 있고)
색깔 몇 가지 지원해주면 좋겠지 하는 생각에 이것저것 하다 보니 결국 원클릭으로 테마를 고를 수 있게 되었고 (하다 보니 어느덧 이것까지 하고 있더군요-_- 오른쪽 요다 마크 아래 박스들을 클릭하면 테마를 고를 수 있습니다.), 여기저기 스타일시트를 나눠 저장하는 작업까지 했는가 하면,
이상하게 사이드바 쪽에 문자열 중 마지막 즈음에 있는 것들이 IE 에서 요상스럽게 보여서 div 만 사용하는 걸 포기하고, 테이블로 한번 감싸게 되었죠; (제가 뭔가 태그를 잘 못 쓴 걸까요? 아무리 봐도 모르겠어요. ㅜ.ㅡ)
각설하고,
스킨이 대충 완성되어가는데, 큰 문제가 없나 보고 배포하려고 합니다. 그런데, 아직 이름을 정하지 못했거든요. 그래서 의견을 구하고자 합니다. 이 스킨 이름을 뭘로 할까요? 여기 오시는 분도 얼마 안 계시는데 콕콕 찍어주세요. 반영해서 정하겠습니다. (의견이 없으면 뭐, 제 맘대로~. 역시 스킨 이름 정할 때가 제일 재밌습니다. ^^)
1번 - Very Formal Or Not 2번 - Basic Simple 3번 - Simply Formal
아르님이 포스팅한 글을 재밌게 읽었습니다. 저도 마루 디자인이나 팔글의 디자인을 보면서 "어, 비슷하네?", "그런데, 스킨 제작자가 티스토리네?" 이런 생각들을 했었거든요.
그런데 사실 저도 비슷한 스킨을 만들고 있었습니다. 해외 사이트들을 둘러보다 보니 사이드바 두 개가 우측에 나란히 있는 디자인들이 재밌더라고요. 생각보다 그리 혼란스러워 보이지도 않고, 디자인에 따라 심플하기도 한 형태가 좋았습니다. 그래서 만들어봤죠.
괜히(?) 몇 가지 시도를 하는 바람에 테스트를 더 해야 하는 관계로 아직 공개는 못 하겠습니다만, 한가지 말씀드릴 수 있는 건 스킨에 사용되는 이미지가 거의 없는 심플한 디자인이라는 것입니다. 보시다시피요. :)
몇 가지 궁금한 게 있는데 어떻게 해결해야 할지 잘 모르겠습니다. 나중에 포럼 등에 질문을 해야할까 봐요. 혹시 이유를 아시는 분들은 알려주시면 감사하겠습니다.
하나. 이 스킨은 날짜 데이터를 조금 손 봐서 아래와 같이 날짜를 표현합니다. (자바스크립트를 이용해서 다른 거 필요없고 그냥 스킨만으로 가능해요.) 날짜판에 마우스를 대면 시간도 볼 수 있지요.
날짜판은 이런 식으로 보여집니다.
저런 형태의 출력을 댓글과 트랙백에도 똑같이 적용했는데 티스토리에 올려놓으니 아예 나오지가 않습니다. 설치형 태터툴즈는 아래처럼 잘 나오는데 말이죠.
설치형 태터툴즈에서는 트랙백과 댓글에서도 되거든요.
티스토리는 댓글과 트랙백 창을 여는 방식이 태터툴즈와는 다른가 봐요. 되면 좋은데;;;
=> 맞는 듯 합니다. 댓글과 트랙백을 기본으로 펼쳐놓으니 제대로 표시가 됩니다.
둘. 아래처럼 블로거들마다 자신들의 문구를 직접 적어넣을 수 있게 만들려고 합니다. 그냥 skin.html을 열어서 적으면 되는데요, 이게 언제나 표현되는 게 아니라 메인 화면에서만 나오게 하고 싶은데 그게 잘 안되는군요. (지금 이 스킨에 나오는 문구는 그냥 예로 집어넣어 본 거예요. ^^)
body-id를 사용해서 위치로그나 태그, 키로그, 방명록 등에서는 안 보이게 했는데, 글을 하나씩 볼 때는 안 보이게 못했습니다. 리스트가 주룩 나오는 화면에서만 보이고, 개별 포스트에서는 안 보이면 좋을텐데 말이죠.
커스텀 영역을 지원합니다.
어? 이건 티스토리에서 되는군요. 신기해라.알고 보니 /entry/ 가 들어간 주소는 먹는데, 주소 뒤에 그냥 숫자로 붙는 주소에서는 제대로 작동하지 않는 것이었군요.
아, 그리고 원래는 이렇게 배경색이 있는 형태가 아니라 깨끗한 흰 바탕 버전이었는데 아르님의 글을 보고 색깔이 있어도 괜찮겠다 싶어서 배경색을 넣어 본 것입니다. 그냥 흰바탕의 스킨도 공개할려고요. (레이아웃이 색깔 있을 때와는 살짝 달라서 각각 따로 공개할 생각입니다.)
태터툴즈의 스킨을 제작하는데 아주 유용한 도움을 주는 레퍼런스가 있습니다. 바로 태터툴즈 스킨제작 레퍼런스 입니다. 총 5단계로 잘 설명이 되어 있죠. 이 레퍼런스를 보면서 제가 생각했던 걸 천천히 적어 볼 생각입니다. 초보자의 마음으로. :)
태터툴즈 뿐만 아니라 여러 블로그툴에서 가장 쉽게 볼 수 있는 구조는 바로 중앙의 본문과 그 옆에 각종 정보가 표현되는 형태가 아닐까 합니다. 메인 컨텐츠도 읽을 수 있고 사이트의 현황도 바로 파악할 수 있는 구조라서 그러겠지요. 그리고 위에는 블로그 정보, 아래에는 저작권 등의 정보가 포함되겠죠.
출처는 태터툴즈 스킨제작 레퍼런스 step02
레퍼런스에서도 바로 이런 구조를 기본으로 삼고 있습니다.
자, 그럼 skin.html에 들어갈 코드를 간단하게 적어보겠습니다.
skin.html
<div id="container"> <div id="header"> <!-- 각종 헤더에 들어갈 내용들. 예를 들면 블로그 제목, 메뉴 등이 있겠지요. --> </div> <div id="content"> <!-- 실제 내용이 들어갑니다. 기본 포스트들 이외에도 위치로그, 태그, 방명록 등 본문 영역에 표현 될 여러 내용이 모두 이 안에 포함되지요. -->
</div>
<div id="sidebar">
<!--
사이드바 내용이 들어갑니다. 블로그 설명, 최근글, 댓글, 트랙백, 카운터 등 각종 추가 정보들이 들어갑니다. 위 그림에서는 sideinfo 라는 영역이겠죠.
-->
</div>
<div id="footer">
<!--
저작권 표시라든지 사이트 정보 등을 위한 영역이겠죠. 기본 스킨에는 이곳에 블로그 메뉴가 한 번 더 반복되고 있습니다.
-->
</div> </div>
대부분의 스킨이 저 구조를 따르고 있습니다. 제 스킨들도 대부분 그렇죠. 그럼 이렇게 적어주면 위의 그림처럼, 기본형의 형태로 표현이 될까요? 아닙니다. 이런 식으로 표현이 되지요.
아니, 위와 다르잖아-!
(실제로는 각 영역을 구분하는 선도 없고, div 끼리 저렇게 공간도 없고 딱 붙어있지요. 이 그림들은 이해를 돕는 방법으로 표현된 것입니다.) div 태그에 스타일 정의가 하나도 되어 있지 않기 때문입니다. div란 division marker 즉, 영역을 구별하는 태그인데, 쉽게 설명하자면 div는 기본적으로 영역을 위, 아래로만 구분하거든요.div의 가로 영역은 화면의 왼쪽 끝에서 오른쪽 끝까지 입니다.
그럼 우리가 원하는 레퍼런스에 나오는 스타일을 만들어주기 위해 스타일시트를 만들어야 합니다. 기본 스킨이 style.css 를 이용하니 거기에 정의를 해주면 되겠지요. 꼭 필요한 것만 적어보도록 하겠습니다.
이렇게 적어주면 대충 제일 위의 이미지처럼, container 안에 header가 시작되고, 그 아래 content와 sidebar가 사이좋게 영역을 차지하고, 그 아래 footer가 깔리게 됩니다.
여기서, width, height는 말 그대로 넓이와 높이를 선언해주는 것이죠. 쉽습니다. 쉬운 건 넘어가고 핑크색으로 되어 있는 것만 설명해보죠.
#container의 margin:0px auto;
사실 margin도 여백이라는 뜻이니 쉬운데, 뒤에 붙은 auto가 특이합니다. 결론만 말하면 margin에 auto를 붙이면
가운데 정렬이 됩니다. 화면의 가로폭이 1024px인데 container가 의 가로폭이 800px이고, 좌우 여백을 auto로
맞추려면 가운데 정렬되는 수 밖에 없겠죠.
container가 다른 div를 모두 감싸고 있기 때문에 전체 레이아웃이 가운데 정렬이 됩니다. 만약 좌측 정렬하고 싶으면?
auto를 지워주면 됩니다. margin:0px; 이렇게 적어주면 좌측 정렬되겠지요. 모든 html 요소들은 좌측부터
시작하니까요.
#content의 float:left
이건 div를 띄워서 좌측에 위치시키라는 뜻입니다. 결과에 입각해 말하자면, 가로폭은 500px이면서 띄워서 왼쪽에 붙이니 여기까지만 적는다면 이런 모양이 되겠지요.
자, content가 떴습니다.
예, 공중에 떴습니다. 즉 화면에 붙는 공간을 잡아먹지 않고 떴기 때문에 sidebar와 footer가 header 바로 아래에 달라 붙었군요. 그리고, 분명히 content 영역은 sidebar와 footer가 있든 말든 그 위에 떠있습니다.
#sidebar의 float:left
자, 이젠 sidebar 영역도 띄우라고 했군요. float 속성은 서로 같은 속성이 반복될 경우 차근차근 순서대로 달라붙습니다. (float:left가 반복되면 왼쪽에서 오른쪽으로 순서대로 달라붙고, float:right가 반복되면 오른쪽에서 왼쪽으로 달라붙겠죠.) content 영역도 띄웠고, sidebar 영역도 띄운다면… 상상이 되십니까? 맞습니다. 이렇게 되지요.
sidebar도 떴습니다.
두 개의 div가 떴기 때문에 footer 영역이 header 영역 바로 아래로 달라붙었습니다.
그렇다면 sidebar를 float:right 시키면 어떻게 될까요? 맞습니다. 이렇게 됩니다. 오른쪽에 가서 달라붙게 되지요.
뜨긴 뜨는데, 오른쪽에 달라붙겠지요.
#footer의 clear:both
그런데, 이래선 곤란합니다. content와 sidebar는 사이좋게 옆으로 붙어서 좋은데, footer가 그 아래로 겹쳐서 표현되면 안되겠지요. (물론 어떤 레이아웃들은 의도적으로 겹쳐 놓지만 이 경우는 각자 보이는 게 목표니까요.) 그래서, footer 영역이 자리잡을 위치를 초기화시켜줍니다.
clear:left; 는 위에 float:left 한 게 있다면 그 영역을 존중(^^)해주고 겹치지 않게 그 아래에 표시하라는 뜻입니다. clear:right; 는 float:right 한 것의 영역을 존중(^^)해주라는 뜻이겠지요.
clear:both는 float:left 든 float:right든지 상관없이 모두 존중하라는 뜻입니다. 따라서, 이렇게 표현이 됩니다.
Letter To You 1.1 스킨을 만들면서 수신인 부분 (저 위에 보면 그대에게. 라고 써있는 부분 말이죠.) 이 원하는 대로 표시되지 않아서 고심을 한 적이 있습니다.
수신인 부분은 div 태그로 영역을 정하고 float:left; 로 띄운 다음 margin-left: 로 적당한 거리만큼 우측으로 보냈는데 파이어폭스와 오페라에서는 원하는 거리 만큼 적당히 떨어졌는데 유독 인터넷 익스플로러 (이하 IE)에서만 엄청나게 멀리 떨어지는 거예요. ㅠ.ㅠ
블로그 제목은 margin-left 값이 얼마 되지 않아 차이가 나도 그리 크지 않아서 내버려뒀는데, 수신인 부분은 영역을 벗어나서 아예 화면에 나타나지 않기 때문에 어쩔 수 없이 !ie를 이용한 IE hack을 썼습니다.
예를 들어 이런 식으로 적어주면 IE를 제외한 다른 브라우저는 위의 정의를 따르고, IE만 아래의 정의를 따릅니다. 즉 !ie 를 적어주면 IE만 알아듣는다는 뜻이죠.
그러다가 IE에 이와 관련된 버그가 있다는 걸 알게 되었습니다. 파이닷넷 (positioniseverything.net)의 글에 의하면 float:left 한 것에 margin-left 값을 주게 되면 IE에서는 margin-left 값의 두 배가 설정된다는 것이죠.
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}
위와 같이 설정되었을 때의 경우를 그림으로 나타내면 다음과 같습니다. 그림 출처는 역시 파이닷넷.
보통의 브라우저에서 margin-left:100px; 인 경우
IE는 두 배가 떨어. 오마이갓!
이런 !@##$@$#@!!# 같은 IE 같으니라고. 그것도 모르고 열심히 삽질했던 거죠. ㅠ.ㅠ
여기서 또 한가지 알아둬야 할 사실은 첫번째로 float된 객체만 이처럼 두 배로 떨어지게 되며, 그 이후에 float된 객체들에는 문제가 없다고 합니다.
해결책은? 다행이 있습니다. float으로 띄우는 객체 (대부분은 div겠죠)가 대부분 display:block;으로 정의되어 있을텐데 이를 display:inline; 으로 정의하면 된다고 합니다. 직접 해보니 아주 잘 됩니다. :)
정리하면 다음과 같습니다.
float:left; 로 띄운 객체에 margin-left 값을 주게 되면 IE에서는 그 값의 두 배만큼 떨어진다.
그럴 때는 해당 객체를 display:inline; 으로 정의해주면 해결된다.
IE 7 에서는 이 버그가 고쳐졌을까요? 배포한 Letter To You 1.1 스킨에는 아직 반영하지 않았지만, 제 블로그 위의 수신인 부분 (To. 그대에게.)을 우선 고쳐놨습니다. 어떻게 보이나요? 적당한 위치에 보이나요? (예전엔 안보였거든요.) IE 7으로 접속하시는 분들이 알려주시면 고맙겠습니다. ^^
