웹호스팅 디스크 사용량 그래프로 보여주기

웹 호스팅을 받아 사용하다 보면 내가 얼만큼의 용량을 사용하고 있는지 알고 싶을때가 있는데 소개하는 것은 몇 년 전 태터와 쌍벽(?)을 이루던 조그에서 만들어 사용하던 것을 일반 홈페이지에서 사용할 수 있도록 한 간단한 스크립트다.



추가.
모양1은 그래프바가 좌측에서 숨겨진 상태에서 사용량 만큼 우측으로 나오는 방식입니다. 좌측에 넘치는 부분은 overflow:hidden;으로  숨겨진 상태이다.

모양2는 그래프바가 배경으로 깔려 있는 상태에서 백색 부분이 그래프를 완전히 덮여있는 상태에서 우측으로 사용량 만큼 폭이 줄어드는 방식이다.

두가지로 나누게된 이유는 뭐 만들때 실수 ^^;
모양1 같은 경우 좌측이 붉은색 우측이 푸른색인 그라데이션 이미지를 사용한다. 처음엔 푸른색이지만 사용할수록 좌측에 붉은색이 보이게 되는데 뭔가 안맞는다는 생각이 들어서 그라데이션 방향을 바꿔 보지만 처음 부터 붉은색이 보여서 그것도 뭔가 이상하고..
모양2 같은 경우 처음엔 푸른색이고 사용량이 증가할수록 붉은색으로 점차 바뀌게 되는 그래프 모양으로 원하던 결과를 얻을 수 있었다.

개인적으로 사용한다면 모양2를 추천하고 싶지만 처음에 만들었던 코드를 버리기 좀 그래서 냠겨둔다.

컨텐츠 컨테이너의 폭이 좁다 보니 이런 결과가... 친절히 주석 넣는다는게 더 지저분해 보이니..
스킨의 폭을 좀더 넓혀야겠다. 정 못보겠는 사람은 사용된 이미지와 함게 첨부하니 참고하시길..

참고로 텍스트등의 스타일은 직업 수정하기 바라고 상황에 따라 스타일을 바꿔 가며 보여주려 했기때문에 인라인 스타일을 사용했으니 알아두기 바라고 고쳐쓰길 원한다면? 맘대로..


추가.
스킨폭도 1024px로 넓혔고 코드하일라이터도 수정했는데 그래도 어색하고 코드가 맘에 들지 않는군요

090411 추가.
스킨폭을 화면 전체로 넓혔습니다.
Posted by TheBits

댓글을 달아 주세요

  1. 좋은 글 잘 보고 갑니다.
    저같은 경우 모양2는 이상하게 나오지만, 모양1은 잘 나와서 쓰고 있습니다.

    • 이제서야 봤네요..
      모양이 이상하다니 확인해봐야겠군요 ^^; 만든지 오래된것이라...
      아무튼 방문해주셔서 감사합니다..