콩바구니 스킨 2008년 10월 ver 9.0

1968924 콩바구니 스킨 2008년 10월 ver 9.0 882168 2008-10-21T18:30:37Z http://kongbaguni.springnote.com/pages/1968924 2008-10-21T15:58:30Z <p><img title="screen.jpg" class="attachment" src="/pages/1968924/attachments/881648" height="189" alt="screen.jpg" width="208" style="margin: 0pt 1em 0pt 0pt; float: left;" />오랬만에 새로운 <strong>스킨</strong>을 만들었습니다. 저번스킨에서, 스크립트 이곳저곳을 뜯어고치고, 디자인을 조금 손본 것입니다.</p> <p>이 스킨의 특징은 다음과 같습니다.</p> <h3>스킨의 특징</h3> <p><strong>웹표준</strong>을 준수합니다. 따라서, <a href="http://www.mozilla.or.kr/ko/products/firefox/">파이어폭스</a>, <a href="http://www.apple.com/safari/">사파리</a>, <a href="http://www.opera.com/">오페라</a>, <a href="http://www.google.com/chrome/">구글크롬</a> 등의 브라우저로 접속하시면, 제가 의도한 기능이 <strong>100%</strong> 구현 됩니다.<br /> <strong>익스플로러</strong>는 조금 깨집니다... (그나마 <strong>익스플로러8</strong>은 좀 났더군요.그래도 완벽하지는 않습니다.)</p> <p>이번 스킨에서 <em class="underline"><strong>익스플로러 6</strong> 지원을 포기했습니다.</em> 그렇더라도 <strong>익스플로러 6</strong>에서 접속이 불가능한것은 아닙니다. 컨탠츠로 접근에 무리없습니다. 단지 그뿐입니다.</p> <h4>자동목차 생성기능</h4> <ul class="list-type-2"> <li>지원 브라우저 : (ie6 50%, ie7, ie8, firefox, safari, opera, chrome)</li> </ul> <p>오른쪽 상단을 보면 <img title="open-content.jpg" class="attachment" src="/pages/1968924/attachments/881652" height="20" alt="open-content.jpg" width="67" /> 요로코롬 생긴 버튼이 있습니다. 제목태그인 <strong><H1>~<H6></strong> 까지의 태그에 대한 정보를 자바스크립트에서 읽어들어서, 그 <strong>INDEX</strong> 를 생성하는 기능입니다. 이 버튼을 누르면 페이지 전채의 구조를 한눈에 볼수 있습니다.</p> <p><img title="content.jpg" class="attachment" src="/pages/1968924/attachments/881660" height="54" alt="content.jpg" width="59" style="margin: 0pt; float: none;" /> <- 이런식의 목차가 생성됩니다. 목차안의 내용은 전부 책갈피 기능을 하는 하이퍼링크라서, 원하는 위치로 바로 이동할수 있습니다.</p> <p>익스플로러6이상 작동합니다. </p> <h4>Color Theme</h4> <ul class="list-type-2"> <li>지원 브라우저 : (ie8, firefox, safari, opera, chrome)</li> </ul> <p>5가지 색상의 태마로 변신합니다.</p> <p><img title="color-Theme.jpg" class="attachment" src="/pages/1968924/attachments/881664" alt="color-Theme.jpg" /></p> <p>오랜지, 청색, 분홍색, 회색, 녹색, 무작위 선택의 6가지 옵션이 있습니다.</p> <p><strong>익스플로러8</strong> 이상에서 정상작동합니다.</p> <h4>풍선도움말 </h4> <ul class="list-type-2"> <li>지원 브라우저 : (ie7 50%, ie8 80%, firefox, safari, opera, chrome)</li> </ul> <p><strong>alt</strong> 나 <strong>title</strong> 속성을 읽어와서 말풍선으로 나타납니다. 팬시툴팁 이라고 할까요.</p> <p><img title="풍선도움말01.jpg" class="attachment" src="/pages/1968924/attachments/881688" alt="풍선도움말01.jpg" /></p> <p><strong>title</strong> 이 있으면 이렇게 나오고,</p> <p><img title="풍선도움말02.jpg" class="attachment" src="/pages/1968924/attachments/881690" alt="풍선도움말02.jpg" /></p> <p><strong>alt</strong> 가 있으면 이렇게 나옵니다.</p> <p><strong>익스플로러7</strong>이상 동작합니다. <strong>익스플로러 7</strong>에서는 말풍선의 레이아웃이 조금 깨지는 현상이 보입니다. 좌표도 많이 어긋납니다. <strong>익스플로러8</strong>에서는 가로좌표가 어긋나는 현상이 있습니다.</p> <h4>자동각주 기능</h4> <ul class="list-type-2"> <li>지원 브라우저 : (ie6 80%, ie7, ie8, firefox, safari, opera, chrome)</li> </ul> <p><abbr title="<em>용어설명</em>"><em>전문용어</em></abbr></p> <p>본문중에 이러한 마크업이 있으면, 그것을 정리하여 하단에 각주를 그 위치로 가는 하이퍼링크와 함깨 생성합니다. 이 기능은 익스플로러 6에서도 작동합니다.</p> <p><img title="자동각주.jpg" class="attachment" src="/pages/1968924/attachments/881686" height="287" alt="자동각주.jpg" width="245" /></p> <h4>사이드바 접는 기능</h4> <ul class="list-type-2"> <li>지원 브라우저 : (ie7, ie8, firefox, safari, opera, chrome)</li> </ul> <p><img title="사이드바-접는-버튼.jpg" class="attachment" src="/pages/1968924/attachments/881692" alt="사이드바-접는-버튼.jpg" /> 이렇게 생긴 버튼을 눌러서 사이드바를 접거나 펼칠수 있습니다. <strong>익스플로러7</strong>에서는 잘 작동하지만, <strong>익스플로러8</strong>에서는 한번접히면 다시 안펴지는 버그가 있습니다. 아마 배타버전이라서 그런듯 합니다. 호환성뷰모드로 가서 펼치면 접혀진 사이드바를 다시 펼칠수 있긴 합니다. 이 기능은 <strong>익스플로러6이하는 지원하지 않습니다.</strong></p> <h4>미투데이 포스팅 지원</h4> <ul class="list-type-2"> <li>지원 브라우저 : (ie6, ie7, ie8, firefox, safari, opera, chrome)</li> </ul> <p>미투데이에서 블로그로 보내온 글에 포함된 하이퍼링크의 대상을 동적으로 생성된 IFRAME에 담아서 띄우는 기능이 있습니다.</p> <p><strong>익스플로러6이상</strong> 지원합니다.</p> <h4>테이블 정렬</h4> <ul class="list-type-2"> <li>지원 브라우저 : (ie6, ie7, ie8, firefox, safari, opera, chrome)</li> </ul> <p>스프링노트에서 만들어진 테이블 (class 값이 "datatable"인 colspan, rowspan 이 없는 table)을 TD의 값에따라 오름차순 혹은 내림차순으로 정렬하는 기능이 있습니다. <strong>익스플로러6이상</strong> 지원합니다. (관련글 : <a href="http://kongbaguni.com/tc/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%A0%95%EB%A0%AC" class="external" title="http://kongbaguni.com/tc/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%A0%95%EB%A0%AC">자바스크립트 테이블 정렬</a>)</p> <h3>다운로드</h3> <ul class="list-type-5"> <li>택스트큐브용 : <a href="/pages/1968924/attachments/881854" title="kongbaguniSkin9.zip" class="attachment">kongbaguniSkin9.zip</a></li> </ul> http://kongbaguni.myid.net/ http://kongbaguni.myid.net/ 110 택스트큐브,블로그,스킨,웹표준,css,Javascript,xhtml