CSSLOOK의 별점주는 UI가 불편하다는 의견이 있어서 수정했다. 기존의 UI는 h3 박스 안에서 한줄의 코드로 처리했었는데, 현재 네티즌의 평점과 당신의 평점의 구분이 안된다는 것이다.

과거의 별점주기 UI :

1차 수정한 UI : (별점의 크기만 키움)

크기만 키우니, 별로 맘에 안들어서, 이곳저곳 위치를 바꿔봤지만 역시 맘에 안들었다. 야후 개발자 네트워크에서 디자인패턴도 참고했지만, 현재 레이아웃에서 마땅한 위치를 찾을 수 없었다.

수정 완료한 UI :

그래서 결국 의견(답글) 숫자를 표기하는 부분을 삭제하고, 그자리에 별점주는 것으로 체워버렸다. 현재로썬 의견도 별로 없을 뿐더러, 앞으로도 갤러리 부분에선 의견보단 별점 평가가 더 많을 것으로 예상되기 때문이다.

마지막으로 별점줄 때 사용되는 이미지의 크기가 글씨보다 크기때문에, CSS를 조금 손봤다.

손 본 CSS :

#rating img {
	vertical-align:text-top;
	position:relative;
	top:-5px;
}

#rating img {vertical-align:text-top;position:relative;top:-5px;}

사용한 CSS :

• vertical-align:text-top : 이 방법을 통해서 li의 상하 간격을 흩뜨리지 않게 함.
• position:relative, top:-5px : 이 방법을 통해서 img의 위치를 위쪽으로 5px 높힘.

결론 : 위치제어(positioning)는 CSS의 디자인의 꽃이다~!

의견을 남겨boa요~