[html] 평점(점수)를 그림으로 표현하기

이런식으로 숫자를 이미지로 표현해야 한다고 칩시다!
어떻게 하실래요?

일반적인 프돌이들은 생각합니다.
5개가 100%면 한개당 20%를 뜻하고,

 
_______________________________________
public static String Number2Img(int num) {
    int last = num / 20;
    String str = "";
    for (int i=0; i <= last; i++) {
       str = "<img src='

... 생략 ....
_______________________________________

머릿속에 이런게 지나가지 않았나요?
사실 이건 C프로그래밍에서나 맞는것이지.
웹프로그래밍에서는 센스 10점짜리 코딩입니다.

사실 이건 스타일로 해결가능한 문제입니다.

10% 설정   <div style="CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(icon_star2.gif) 0px 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 90px; PADDING-TOP: 0px; HEIGHT: 18px;">  <p style="WIDTH: 10%; PADDING-RIGHT:0px; PADDING-LEFT:0px; BACKGROUND: url(icon_star.gif) 0px 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; HEIGHT: 18px;">  </p>  </div>

보시면 알겠지만, 개념적으로 소스로 간략화 시키면 다음과 같습니다.

<div background="회색별" width = "200px">    <p background="활금별" width = "10%"></p> <div>

즉 div레이어에는 회색별로 배경을 쭉 깔고,
p태그에는 황금색별로 그 위에 덮어 버리는 겁니다. (아래는 샘플용으로 만든 파일)

num2img.zip

 

이렇게되면 11% 13% 같은 표현도 자유로워 집니다. (스타일상 크기 변경되는것이니깐요)
사실 for문 노가다로 한다면
그림 3개 (회색별, 반별, 황금색별) 식으로 반올림내림해서
매우 제한된 표현밖에 안되지요.


저도 처음에 for문으로 만들었다가...
최근에 이런방법으로 처리하고 있습니다. ㅡ,,ㅡ