eyeball's Life(Old)

오랫동안 귀차니즘으로 인하여 미뤄왔던 스킨 개편을 갑자기 그분께서 강림하시어 귀차니즘을 이기고 샤샤샥 해버렸다. 그리고 스킨 개편 도중 갑자기 텍스트큐브 1.7이 정식 발표되었기에 하는 김에 텍스트큐브도 업그레이드 했다.

현재 쓰고 있는 스킨은 태터툴즈 1.0.6때부터 쓰고 있는 YROTS님의 S1T3가 기반이다. 커버 페이지는 커녕 블로그 관리자 자체에서 사이드바 모듈이 지원하지 않던 시절에 만들어진 스킨인데다가 무려 Table로 레이아웃이 코딩 된 스킨인지라 레몬팬이나 기타 위젯들이 제대로 작동하지 않는 등 구조적인 문제가 많은 스킨이였다.

때문에 이번 기회에 기본 디자인은 그대로 두고 Table구조를 Div구조로 바꾸고 불필요한 이미지들을 줄여서 트래픽 및 로딩속도를 향상시키고 웹표준에 근접하도록 코딩하였다. 이 과정에서 다소 모양이 변하긴 했지만 오히려 더 깔끔하게 변했다고 생각한다. 그렇게 해서 4일에 걸쳐 개편한 모습이 바로 현재 모습이다. 이전과 별반 다를 것은 없지만...

아무튼 개편 후 가장 큰 이득은 바로 레몬팬이 정상 작동한다는 점이다. 이전 Table구조일 때는 레몬팬을 설치한 뒤 파이어폭스에서 블로그 내의 공백등을 클릭하면 레이아웃이 깨지는 문제가 발생 했는데 그 문제가 해결되었다. 그 당시 레몬팬에 버그리포팅도 올렸었지만 원인을 못 찾았는지 답변조차 달리지 않았다.

그 다음으로 이득은 Windows Live Writer에서 글 작성 시 웹 레이아웃이 정상적으로 작동하는 점이다. 내 입장에서는 이점이 가장 큰 이득이라고 할 수 있겠다. 개편 전에는 WLW가 본문 구조를 제대로 읽어오지 못해 일반이나 웹 레이아웃이나 차이가 없었지만, 지금은 이렇게 정상적으로 작동한다. 때문에 글을 쓸 때 줄내림이나 이미지 배치 등을 훨씬 편하게 할 수 있게 되었다.

스킨을 수정하면서 가장 머리아팠던 것은 역시 IE문제였다. 일단 기본 작업은 파이어폭스2를 기준으로 했다. 파폭에만 맞춰도 사파리 등 IE를 제외한 다른 브라우져에서도 똑같이 나오기 때문이다. 그렇게 다 만들고 나서 IE7로 확인해보니... 역시나 몇군데 치명적인 문제점이 발생했다. 덕분에 편법으로 파폭과 IE에서 모두 제대로 나오도록 하다보니 몇군데는 웹표준을 무시하고 코드를 짜야했다. IE7에서도 이정도인데 IE6은 정말 확인 해 볼 엄두가 나질 않는다. 실제로 IE6이 깔린 시스템이 주변에 없다는 이유로 확인해 보지도 않았다..;;

그래도 묵혀뒀던 한 건을 해결하고 나니 왠지 모를 이 뿌듯함..
앞으로 최소 6개월 동안은 스킨에 손대는 일은 없을듯 싶다.

현재 내 테터툴즈 블로그에 적용중인 스킨은 이로츠님의 S1T2스킨이다. 깔끔하면서도 적당히 화려한 느낌의 상당히 괜찮은 스킨이라고 생각한다.
이 스킨에 예전부터 귀차니즘에 생각만 하고있던 베너달기를 마침내 실천하게 되었는데 시작부터 다시 귀차니즘과 싸워야했다. 다른 부분은 대부분 이미지가 모듈형식의 조립식인데 반해 카운터링크 부분은 카운터부분과 링크부분이 통이미지의 완제품으로 구성되어있어 이미지 수정의 압박이 대기중이었다.
따로 베너메뉴를 추가해볼까도 생각해봤지만 베너도 몇개 없고 무엇보다 귀찮았기 때문에 카운터링크 부분을 수정하기로 했다.(서론이 너무 길다...)

적용된 샘플은 멀리 갈 필요도 없이 이 블로그 왼쪽 맨 밑 메뉴인 카운터링크부분이다. 원래 붙어있던 RSS 및 테터툴즈 베너와 이로츠님의 카피라잇(?)을 분리 시키고 그 사이에 공간을 만들었으며 이 공간은 베너의 높이에 따라 유동적으로 변할 수 있도록 해두었다.
이같이 하려면 이미지파일과 소스를 수정해야하는데 먼저 편집한 이미지 파일은 다음과 같다.


파일 이름은 미관상 이로츠님의 방식을 그대로 적용했다.
아래는 skin.html과 style.css파일의 수정부분이다.

skin.html파일 118번줄부터 {}는 []로 수정 <div id="counter">     <table cellpadding="0" cellspacing="0" width="100%" class="tl_fx">     <col width="100%" />     <tr><td class="title"></td></tr>     <tr><td class="area"><B>{##_count_today_##}</B><br />{##_count_yesterday_##}<br />{##_count_total_##}</td></tr>     <tr><td class="trbanner">         <table cellpadding="0" cellspacing="0" width="100%" class="tl_fx">         <col width="1" /><col width="57" /><col width="1" /><col width="140" /><col width="1" />         <tr><td></td><td class="link_rss"><a href="https://eyeball87.tistory.com/rss" target="_blank"><img src='./images/yrots_left_cl_image.gif' width='57' height='35' alt="RSS FEEDBACK"></a></td><td></td><td class="link_tattertools"><a href="http://www.tattertools.com/" target="_blank"><img src='./images/yrots_left_cl_image.gif' width='140' height='35' alt="TATTERTOOLS"></a></td><td></td></tr>        </table>     </td></tr>    <!-- //사용자 베너 주석 시작     <tr><td class="dvline"></td></tr>     <tr><td class="userbanner">         <table cellpadding="0" cellspacing="0" width="100%" class="tl_fx">         <!-- 원하는 형식의 표를 만들어 베너 삽입(베너 폭 제한 198) -->         이 부분에 적당히 태그 짜서 베너 넣으면 됩니다.         베너크기는 198px를 넘지 않도록 주의하세요.         <!-- 베너 삽입 끝 -->         </table>     </td></tr>    //사용자 베너 주석 끝 -->     <tr><td class="bottom">         <table cellpadding="0" cellspacing="0" width="100%" class="tl_fx">         <col width="1" /><col width="198" /><col width="1" />         <tr><td colspan="3" class="mline"></td></tr>         <tr><td></td><td class="link_yrots"><a href="http://www.yrots.com/" target="_blank"><img src='./images/yrots_left_cl_image.gif' width='198' height='32' alt="YROTS-STORY"></a></td><td></td></tr>        <tr><td colspan="3" class="mline"></td></tr>         </table>     </td></tr>     </table> </div>

style.css파일 169번줄부터 #item_left #counter .title            { width: 100%; height: 30px; background: url('./images/yrots_left_cl_title.gif') no-repeat; } #item_left #counter .area             { width: 100%; height: 81px; background: url('./images/yrots_left_cl_ground.gif') repeat; vertical-align: top; text-align: left; font: 9px tahoma, verdana; padding-left: 67px; line-height: 27px; } #item_left #counter .link_rss         { width: 57px; height: 35; } #item_left #counter .link_tattertools { width: 140px; height:35; } #item_left #counter .link_yrots       { width: 198px; height: 32px; } #item_left #counter .mline            { height: 1px; } #item_left #counter .dvline           { height: 1px; background: url('./images/yrots_left_cl_dvline.gif') no-repeat; } #item_left #counter .userbanner       { width: 100%; background: url('./images/yrots_left_cl_bannerbg.gif') repeat; padding-top: 3px; padding-bottom: 3px; } #item_left #counter .trbanner         { width: 100%; height: 35px; background: url('./images/yrots_left_cl_trbanner.gif') no-repeat; } #item_left #counter .bottom           { width: 100%; height: 34px; background: url('./images/yrots_left_cl_bottom.gif') no-repeat; }

위의 소스를 해당 파일의 해당부분에다가 있던내용 지우고 붙여넣고 주석을 제거하면 된다. 이로츠님이 소스 정리를 아이템별로 띄워놓으셔서 금방 찾을 수 있을 것이다.
위 내용은 S1T2기준으로 작성되었지만 이로츠님의 다른 스킨에도 적용될 것이라 생각한다.
혹여 본인과 같은 스킨을 사용중인 분들중에 이미지 편집이 귀찮은 사람은 위의 이미지 4개를 저장해서 그대로 이미지 디렉토리에 덮어씌워도 된다.(1px짜리 2개는... 재량껏...)