Snippet 본문

막대그래프 이미지형

등록
신예호 (등록일 : 2011/08/30    최종수정일 : 2013/05/29)
Type
PC
설명
미리보기
Html
<div class="graph_comm">
    <div class="txt_point">활동점수 <em class="num_count">2040000</em></div>
    <div class="img_sample box_graph"><div class="img_sample bg_bar" style="width:55%;">55%</div></div>
</div>
CSS
.img_sample {background:url(/snippet/image?idx=97) 0 0 no-repeat}

.graph_comm {position:relative;width:210px;height:18px;font-size:11px;letter-spacing:-1px}
.graph_comm .box_graph {float:left;width:108px;height:8px;margin-top:3px;font-size:0px;background-position:0 0;line-height:0px}
.graph_comm .box_graph .bg_bar {height:8px;background-position:0 -8px}
.graph_comm .txt_point {float:right;color:#777}
.graph_comm .num_count {font:bold 11px tahoma;color:#333;font-style:normal;letter-spacing:0px}

안내 : 해당 Snippet을 사용하기 위해서는 Daum에서 사용하는 reset.css(global classname포함)를 사용 하셔야 합니다.
※ [ CSS Convention ] 바로가기