티스토리 스킨 demunWhite 2단 스킨

demunWhite 스킨 배포에 대한 글을 수정합니다. 2단과 3단 스킨을 같이 배포해서 글을 분리했습니다.
여기서는 demunWhite 2단 스킨에 대한 소개와 공통적으로 적용된 특징에 대해서 이야기 합니다.

우선 이번 demunWhite 의 스킨은 종류가 3가지 입니다.
그리고 각각 2가지 테마를 가지고 있습니다. 화이트, 블랙

테마는 화이트가 기본입니다. 이름을 정할때 다른 스킨들도 화이트라는 이름이 많아서 저는 구별하기위해 demun 이라는 이름을 붙였습니다.
그래서 기본 이름은 demunWhite 입니다.

demunWhite 의 특징들을 소개합니다. 

1. 가볍습니다.

이미지를 최소화할려고 노력하였고 이미지 없이 제작하려하다보니 너무 밑밑해서 아이콘 이미지를 넣었습니다.
ie6 을 감안해서 모두 gif 이미지로 하였으나 블랙테마로 하니 이미지의 품질이 거슬려서 png 이미지로 했습니다.
 

 
png 파일때문에 ie6만 사용하는 자바스크립트를 주석으로 사용했습니다.

2. 마크업 구조.

성능향상을 위해 스타일 시트는 head 에 자바스크립트는 body 하단에 배치를 했습니다.
자바스크립트는 나눔고딕을 사용하기 위해 딱 하나 삽입이 됐습니다.
마찬가지로 body 하단에 놓여있습니다.

구글광고들 많이들 하실겁니다.
html 마크업상 제일 먼저 나오는 광고가 단가가 제일 높다는 사실을 아시는지요??

그래서 저는 스킨을 제작할때 항상 head 다음에 바로 본문이 오도록 마크업을 합니다.
즉 본문에 있는 첫번째 광고가 단가가 높다는 이야기죠. 
저의 스킨은 본문이 먼저 마크업되도록 했습니다.(3단스킨제외).

3. 스타일 시트 최적화.

되도록이면 가볍게 하려고 동일한 설정을 덮어 쓰도록 했습니다.
아래 이미지를 예로 보시면 많은 선택자들이 하나의 값을 가지고 있습니다.

이렇듯 되도록이면 하나의 값을 같이 사용해서 스타일 시트를 가볍게 만들었습니다.

4. 화이트 테마, 블랙 테마.

이 스킨은 애초에 기획단계부터 다른 테마와 같이 사용할것을 전제로 만들어졌습니다.
기본 테마는 화이트테마로 만들어졌지만 어두운 색을 좋아하는 사람을 위해 블랙테마도 적용할 수 있습니다.
이 또한 스타일을 덮어쓰는 형식을 취했으며 초보자를 위해 간단하게 변경하도록 만들어졌습니다.
아래 그림을 보시면 black.css 한줄이 주석처리 되어 있습니다. 이걸 해제하면 블랙테마로 사용이 되고 주석처리하면 화이트테마로 사용할 수 있습니다.

확장성을 위한 것이죠.
사실 시간만 더 투자하면 다른 테마도 적용이 가능합니다. 

5. 해상도에 따른 스킨 적용.

두개는 1024의 해상도에서 볼수 있도록, 광범위하게 사용하도록 너비가 960px 로 고정이 되어 있습니다.
나머지 한개는 넓은 해상도에 사용할 수 있도록  했으며 해상도 1280에 맞추어서 사용하도록 너비가 1200px 로 고정이 되어 있습니다.
그래서 아래처럼 골라서 사용하고, 테마도 선택적으로 사용할 수 있습니다.

1. 너비 960px, 화이트 테마, 2단 레이아웃. - 본문너비(680px), 사이드바너비(220px)
2. 너비 960px, 블랙 테마, 2단 레이아웃. --- 본문너비(680px), 사이드바너비(220px)

이와 같이 총 3개의 스킨이 있으며 각각 두가지씩 테마를 사용할 수 있습니다. 너비의 기준은 전부 구글 에드센스 광고를 부착하기 좋게 만들어졌습니다.

6. 높이 100%가 유지되는 레이아웃.

스킨을 보면 높이 100%유지하지 않고 그냥 사용하는 경우가 자주 있습니다.
본문이나 컨텐츠 있으면 상관이 없는데, 내용이 없으면 하단의 footer 가 위로 달라붙는 현상이 있습니다.
이 레이아웃을 먼저 잡아주고 스킨을 만들어야하는데 안그런 경우가 많지요.

저도 예전에는 그냥 만들었었는데요..이번에는 높이 100%를 유지한채 스킨을 만들었습니다.
아래 그림은 높이를 유지하지 않은채 만든경우입니다.

 

모든 스킨은 나눔고딕이 기본 글꼴로 되어 있습니다. 
또한 접근성이 않좋으신분을 위해 본문으로 바로가기 링크를 모두 포함하고 있습니다.

이것은 지켜주세요!!

하단에 저작권은 수정하지 말아주세요.
개인 스타일에 맞게 수정해달라고 애프터서비스 신청하지 마세요.(버그나 잘못된 점이 있으면 수정해드릴수 있으나 이미 제작된 스킨을 본인의 스타일에 맞게 자꾸 변경해달라고 하시는 분들이 있습니다)
배포된 스킨을 다른곳에서 배포하지 말아주세요. 다른곳에서 배포는 금지입니다. 링크를 알려주세요.

각각의 해상도와 테마별 스샷을 참고하시기 바랍니다.
아래의 스샷은 전체 스샷을 찍어서 매우 큰 이미지입니다. 
각 제목을 클릭하면 보여지고 , 다시 클릭하면 감쳐집니다.
또 이미지를 클릭하시고 이미지에 마우스를 대시면 확대하는 그림이 나옵니다. 그럼 확대해서 보시면 전체해상도로 보실수 있습니다.

demunWhite 화이트테마 2단 스킨 스샷

demunWhite2Col - White

demunWhite 블랙테마 2단스킨 스샷

demunWhite2Col - Black

참고

스킨 배포는 이메일로만 배포합니다. 라이센스 문의 hjm01@naver.com
원하시는분은 적용하실 블로그 주소 또는 운영하는 블로글 주소를 기재한후 이메일 주시기 바랍니다.
단 적용하신 다음에는 배포글에 트랙백을 날려주세요. 이는 다른분들에게 미리보기를 제공하기 위함입니다. 본인의 방문자수 증가에도 도움이 될겁니다.

티스토리 스킨 demunWhite 1단스킨.
티스토리 스킨 demunWhite 3단스킨.

추가합니다.
2012-1-16
이전에 불필요하게 추가된 코드 정리했습니다. 
#tabbox 와 .taglog 부분 수정했습니다.