Snippet 본문

막대그래프 일반형

등록
김인희, 신예호 (등록일 : 2012/03/23    최종수정일 : 2013/05/29)
Type
PC
설명
미리보기
Html
<div class="graph_comm">
	<div class="bg_graph">
		<span class="graph_g">
			<span class="bar_g" style="width:80.0%"><span class="inner_g"></span></span>	
		</span>
	</div>
	<span class="txt_graph"><span class="num_g">40</span>/56 (80%)</span>
</div>
CSS
.graph_comm {float:left}
.graph_comm .bg_graph {float:left;margin:5px 6px 0 6px;border-top:1px solid #bbb}
.graph_comm .graph_g {display:block;width:143px;height:5px;border:1px solid #d4d4d4;background-color:#e1e1e1}
.graph_comm .bar_g {display:block;height:7px;margin:-2px 0 0 -1px;border-left:1px solid #a1342d;border-top:1px solid #a1342d;background-color:#d4443b}
.graph_comm .inner_g {display:block;height:5px;margin-left:-1px;border:1px solid #bc3c35}
.graph_comm .txt_graph {font-size:11px;font-family:tahoma;color:#666}
.graph_comm .num_g {color:#d4443b}

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