스킨의 배포를 앞두고 코드를 최적화 작업을 진행 중이다. 이것저것 추가한 것들이 수십개가 되다보니 덩치가 거치고 코드가 지저분하다. 코드를 최적화하기 위해 이곳저곳에서 소스를 파해치던 중 테이블을 전혀 사용하지 않고 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
근데 테이블 큰게 들어가면서 깨지는 현상이 있네요 지금도 옆으로 조금 삐져나왔는데
익스 5.5에서는 그렇게 보여요 그래서 답글 이라는 링크가 잘 클릭이 안되는 현상도 있고
6.0에서는 제대로 보이는지 잘모르겠지만 파이어준님 덕에 블로그 시작했답니다.
reply edit
주소 아래에 적어놓았습니다. 게임방이라서 비트맵으로 밖에 저장을 못했네요
위에 링크의 올드페이지는 제대로 보이네요
http://machine.pstudio.org/june.bmp
jeolee님이 해결방법을 적어 놓으신거 같은데
--------------------------------------------------------------------------------------------------------
사용하시는 스킨디렉토리의 style.css파일을 열어 아랫쪽 부분에 .author부분의 "}"가 닫히기 전에 아래의 내용을 추가해 주세요.
clear: both;
블로깅이 처음이라서 허접하게 답글 남기고 갑니다.
reply edit
불여우와 오페라에서 확인해보고 바로 이상이 없겠다 싶었는데,
익스5.5에서 깨질줄은 미쳐 몰랐네요..... 스크린샷까지.. 정말 감사합니다.
감동먹었습니다. 말씀하신데로 수정해 보겠습니다.
reply edit
Your Reaction Time!