demun.skin.No.11 스킨을 배포합니다(대문스킨 11번째 버젼-티스토리용 스킨)

수정합니다. 현재의 스킨은 이제는 배포하지 않습니다.

이글은 배포 겸 소개 페이지 입니다.
사실 제작을 하고도 배포를 안한 것도 있습니다. 그래서 이번 버젼이 No.11 번째 입니다.
이전에 글을 남겼듯 이왕이면 좀더 좋은 스킨, 이왕이면 좀더 완변한 코딩, 이왕이면 Cross Browsing(상호호환성) 에 초점을 맞추어서 제작을 하고 싶어서 그렇게 했습니다.

매번 그렇듯 완벽하게 한다고해도 완벽하지가 않군요^^; .... 수정을 거듭하고 또다시 수정을 해도 눈에 안차는 부분이 있군요...
이번 스킨의 이름은 demun.skin.No.11 입니다.
대문스킨 11번째 버젼의 큰 특징은 아래와 같습니다.

demun.skin.No.11 의 특징

  • 웹표준 가이드,네이버 코딩 가이드에 되도록 맞추어서 작업을 했습니다.
  • 되도록 CSS를 속성 우선순위에 맞추어서 제작을 했습니다.
  • 되도록 HTML을 웹표준에 맞추어서 제작을 해서 W3C에 통과를 했습니다.확인하기
  • Cross Browsing(크로스 브라우징)에 맞추어서 많은 브라우져에서 정상적으로 보이도록 했습니다. 여기에 테스트된 브라우져는 IE6, IE7, IE8, Chrome, Firefox, Opera, Safari 입니다.
  • IE6에서도 둥근형태의 박스와 이미지 png파일을 정상적으로 보이도록 했습니다.
  • 저처럼 확장성있게 사용하는 분들을 위해 사이드바,본문아래 사이드바,배너영역을 만들었고, 사이드바 설정에서 수정할 수 있도록 했습니다.
  • 본문 제목을 흐르는 플래시로 하였습니다.(출처:http://minsangk.com)
  • css 파일을 분리했습니다.(차후 확장 가능성때문) - color.css 파일은 배경과 컬러만 설정할수 있어, 분위기를 바꿀때 사용하면 좋습니다.
  • 나눔고딕 글꼴 사용과 나눔고딕 웹폰트를 사용을 할수있게끔했습니다.로컬컴퓨터에 나눔고딕이 설치되어있지 않아도 나눔글꼴로 사용할수 있습니다.(코딩은 그렇게 했지만 아직 완전하지는 않은것 같습니다. 여하튼 대표글꼴은 나눔고딕입니다.)
스킨은 현제 제가 적용하고 있는 버젼입니다.전 약간 수정을 한것도 있기에 완전하게 적용된 버젼은 여기를 참고해서 보세요.
위의 특징은 스샷을 첨부해서 올립니다.


스샷 첨부합니다.



기타 소소한 특징을 몇가지 더 알려드리겠습니다.
  • 마우스 hover 기능을 되도록이면 가능하도록 구현했습니다.(검은색화살->빨강색화살)....이것도 특징^^;
  • 검색부분을 상단으로 올렸으며, 기타 쇼설 아이콘을 더 추가할수 잇으며 그럴경우 검색부분을 우측으로 밀어서 사용하면 됩니다.
  • 메뉴부분(스킨-메뉴설정)을 사용할 수 있게 했습니다.
  • 메뉴부분에 body id 를 사용해 현재 위치에 리본메뉴가 올라오도록 했습니다.
  • 구글광고를 본문위에 삽입을 미리 해놓았습니다. 본인의 코드로 변경해주시고, 사용안하시면 삭제하시면 됩니다.
  • 상단에 올블릿 광고를 넣을수 있는 공간을 만들어 놨습니다.
  • 1024해상도에서도 무리없이 볼수 있게 했습니다.

단점

모두 완벽하게 작성하면 좋으련만 그렇지는 못합니다.
ie6으로 접속시 초기에 잠깐 png파일이 상단에 보여줬다가 없어집니다.

ie6 때문에 해더상단에 핵이 두개 들어갑니다. 아~~~ 좀더 신경을 신경을 썻더라면 핵없는 코드를 짰을텐데....아깝습니다.ㅎㅎㅎㅎㅎㅎ
여하튼 이렇습니다.

한가지 더

간단하게 두가지의 이미지 파일만 업로드하면 전체적으로 분위기를 바꿀수 있도록 여분의 이미지 파일과 psd파일을 공유합니다.
분위기를 변경하실려면 여기를 클릭하셔서 글을 참고하세요.
대문 스킨 분위기 변경하기 => http://demun.tistory.com/1831

demun.skin.no.11 을 사용하시는분은 반드시 아래 글을 참고해주세요.

참고링크
대문스킨에서 변경해야하는 부분.
대문스킨에서 하단부분 수정하기.
스킨 적용하는 방법.


배포에 대해서

이번에 배포하는 대문스킨 11버젼은 상당이 시간도 오래 걸리고 나름대로 공부도 많이 했습니다.
내공이 워낙 없어서리.....죄송....
사용하시는 분들이 그냥 심심 풀이로 적용해보고, 또 다시 다른 스킨 적용해보고,,,안되면 물어보고....또 다시 다른 스킨 적용하고.....

이런것이 나쁘다는것은 아닙니다. 다 개인의 자유이니까요. 그점도 존중합니다. 저도 그랬으니까요....
하지만 이번 부터는 좀 안그런 분들이 사용을 했으면 좋겠습니다.

나름 스킨이 좋다 ....
이걸 사용해봐야겠다.....
하시는분이 사용을 하셨으면 좋겠습니다.
간단 적용법...
압축을 푸시면 images 폴더안에 모든 파일을 스킨편집에서 업로드합니다.
그다음 html 과 css 를 각각 코드편집창에 붙여넣기하면 됩니다.

수정사항.


기존의 파일을 받으신분은 아래처럼 수정해주세요.style.css와 color.css 파일 모두 수정해줘야합니다. 트랙백 부분이 정상적으로 나오지 않아서 수정합니다.

/* .style.css에서 tagWrap을 아래처럼 수정했습니다 */
.tagWrap{clear:right;padding:0;margin-bottom:10px;border:1px solid #ccc}
.tagTrail,.actionTrail{display:block;width:600px;height:20px;padding-left:15px;margin:5px}
.actionTrail{margin-bottom:10px}
.trackback{overflow:hidden;margin:0;padding:0}
.trackback li{height:1%}
.trackback h3{font:1em/160% Georgia bold;padding-left:5px}
.trackback h4{margin:0;padding:5px;font-size:12px}
.trackback .from{padding:5px;border-bottom:1px solid #ccc}
.trackback p{padding:10px}

/* .color.css에서 tagWrap을 아래처럼 수정했습니다. */
.tagTrail,.actionTrail{background:url(arr_black.png) no-repeat 0 7px}
.tagTrail:hover,.actionTrail:hover{background:url(arr_red.png) no-repeat 0 7px}
.trackback h4{background-color:#ddd}
.actionTrail a{color:#333}
.actionTrail .cnt{color:#FF3333}


다운로드가 안된다고 해서 위의 파일을 다운로드 받아서 확인후 다시 업로드 합니다.
윗파일과 같은겁니다.
winrar로 압축해서 그런가 알집으로도 올립니다.
똑같은 거니 하나만 받으면 됩니다.

개    개