Rev. 2.73

스킨의 배포를 앞두고 코드를 최적화 작업을 진행 중이다. 이것저것 추가한 것들이 수십개가 되다보니 덩치가 거치고 코드가 지저분하다. 코드를 최적화하기 위해 이곳저곳에서 소스를 파해치던 중 테이블을 전혀 사용하지 않고 CSS만으로 컨텐츠를 구성한 홈페이지들을 보고 도전했다. 마침 jeolee님( http://jeolee.com/tt/index.php )의 태터 스킨들 또한 CSS구조로 되어 있어 응용하는데 많은 도움이 되었다.

테이블을 사용한 스킨구조를 CSS구조로 변경한 결과 약 30 ~ 100 kb를 절약할 수 있었으며, 페이지 로딩속도가 향상 되었다. 기존의 테이블 구조로 이루어진 OldPaper 스킨과 CSS구조로 이루어진 OldPaper 스킨을 비교해보자.

Comments

Got something to add? You can just leave a comment.

  • 정말 테이블이 많이 줄어들었네요. ^^

    reply edit

  • 그러고 보니 CSS로 변경한 목적을 빼먹었군요 ;;
    div 코드를 사용한 사이드바 내비게이션(hide, show)을 위해서 였습니다.
    덕지 덕지 달라붙어있는 사이드바가 왠지 사라지게 하고싶어서 ^^;;

    reply edit

  • Machine Machine

    근데 테이블 큰게 들어가면서 깨지는 현상이 있네요 지금도 옆으로 조금 삐져나왔는데
    익스 5.5에서는 그렇게 보여요 그래서 답글 이라는 링크가 잘 클릭이 안되는 현상도 있고
    6.0에서는 제대로 보이는지 잘모르겠지만 파이어준님 덕에 블로그 시작했답니다.

    reply edit

  • Machine Machine

    주소 아래에 적어놓았습니다. 게임방이라서 비트맵으로 밖에 저장을 못했네요
    위에 링크의 올드페이지는 제대로 보이네요
    http://machine.pstudio.org/june.bmp

    jeolee님이 해결방법을 적어 놓으신거 같은데
    --------------------------------------------------------------------------------------------------------
    사용하시는 스킨디렉토리의 style.css파일을 열어 아랫쪽 부분에 .author부분의 "}"가 닫히기 전에 아래의 내용을 추가해 주세요.

    clear: both;

    블로깅이 처음이라서 허접하게 답글 남기고 갑니다.

    reply edit

  • 불여우와 오페라에서 확인해보고 바로 이상이 없겠다 싶었는데,
    익스5.5에서 깨질줄은 미쳐 몰랐네요..... 스크린샷까지.. 정말 감사합니다.
    감동먹었습니다. 말씀하신데로 수정해 보겠습니다.

    reply edit

Your Reaction Time!

captcha

avatar