• HTML
  • CSS

DIV 태그를 활용하여 막대 그래프 만들기

2019-07-24 343

설명

  • 카카오톡 링크

DIV 태그를 활용하여 막대 그래프 만드는 소스입니다 :D

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	.dib {display:inline-block}
	.wd25 {width:25%}
	.wd100 {width:100%}
	.box {position:relative; width:100%; height:500px; box-sizing:border-box; border:1px solid #dfdfdf; padding:15px; overflow:hidden  }
	.box > div.dib {height:100%; vertical-align:top}
	.top_line {position:absolute; left:0; width:100%; border-top:1px dashed #ae1919; z-index:1; }

	.top_graph {position:relative; height:80%;}
	.top_graph ul {height:100%}
	.top_graph ul li {display:inline-block; width:33.333%; height:100%; box-sizing:border-box; padding:0 10px; }
	.top_graph ul li > div {display:inline-block; width:100%; vertical-align:bottom}
	.top_graph ul li div.top {box-sizing:border-box; border:1px dashed #a1a1a1; background:#dfdfdf}
	.top_graph ul li div.bottom {background:#ae1919}
	.bottom_graph {text-align:center}
	.bottom_graph ul li {display:inline-block; width:33.333%}
</style>
<div class="box">
	<div class="dib wd25">
		<div class="top_graph">
			<div class="top_line" style="bottom:38%"></div>
			<ul>
				<li>
					<div class="blank" style="height:37%">
					</div>
					<div class="top" style="height:48%">
					</div>
					<div class="bottom" style="height:15%">
					</div>
				</li><!--
				--><li>
						<div class="blank" style="height:17%">
						</div>
						<div class="top" style="height:35%">
						</div>
						<div class="bottom" style="height:48%">
						</div>
					</li><!--
				--><li>
					<div class="blank" style="height:78%">
					</div>
					<div class="top" style="height:10%">
					</div>
					<div class="bottom" style="height:12%">
					</div>
				</li>
			</ul>
		</div>
		<div class="bottom_graph">
			<ul>
				<li>
					<span>테스트1</span>
				</li><!--
				--><li>
					<span>테스트2</span>
				</li><!--
				--><li>
					<span>테스트3</span>
				</li>
			</ul>
			<span class="dib wd100">오마나</span>
			<span class="dib wd100">세상에</span>
		</div>
	</div><!--
	--><div class="dib wd25">
		<div class="top_graph">
			<div class="top_line" style="bottom:38%"></div>
			<ul>
				<li>
					<div class="blank" style="height:37%">
					</div>
					<div class="top" style="height:48%">
					</div>
					<div class="bottom" style="height:15%">
					</div>
				</li><!--
				--><li>
						<div class="blank" style="height:17%">
						</div>
						<div class="top" style="height:35%">
						</div>
						<div class="bottom" style="height:48%">
						</div>
					</li><!--
				--><li>
					<div class="blank" style="height:78%">
					</div>
					<div class="top" style="height:10%">
					</div>
					<div class="bottom" style="height:12%">
					</div>
				</li>
			</ul>
		</div>
		<div class="bottom_graph">
			<ul>
				<li>
					<span>테스트1</span>
				</li><!--
				--><li>
					<span>테스트2</span>
				</li><!--
				--><li>
					<span>테스트3</span>
				</li>
			</ul>
			<span class="dib wd100">오마나</span>
			<span class="dib wd100">세상에</span>
		</div>
	</div><!--
	--><div class="dib wd25">
		<div class="top_graph">
			<div class="top_line" style="bottom:38%"></div>
			<ul>
				<li>
					<div class="blank" style="height:37%">
					</div>
					<div class="top" style="height:48%">
					</div>
					<div class="bottom" style="height:15%">
					</div>
				</li><!--
				--><li>
						<div class="blank" style="height:17%">
						</div>
						<div class="top" style="height:35%">
						</div>
						<div class="bottom" style="height:48%">
						</div>
					</li><!--
				--><li>
					<div class="blank" style="height:78%">
					</div>
					<div class="top" style="height:10%">
					</div>
					<div class="bottom" style="height:12%">
					</div>
				</li>
			</ul>
		</div>
		<div class="bottom_graph">
			<ul>
				<li>
					<span>테스트1</span>
				</li><!--
				--><li>
					<span>테스트2</span>
				</li><!--
				--><li>
					<span>테스트3</span>
				</li>
			</ul>
			<span class="dib wd100">오마나</span>
			<span class="dib wd100">세상에</span>
		</div>
	</div><!--
	--><div class="dib wd25">
		<div class="top_graph">
			<div class="top_line" style="bottom:38%"></div>
			<ul>
				<li>
					<div class="blank" style="height:37%">
					</div>
					<div class="top" style="height:48%">
					</div>
					<div class="bottom" style="height:15%">
					</div>
				</li><!--
				--><li>
						<div class="blank" style="height:17%">
						</div>
						<div class="top" style="height:35%">
						</div>
						<div class="bottom" style="height:48%">
						</div>
					</li><!--
				--><li>
					<div class="blank" style="height:78%">
					</div>
					<div class="top" style="height:10%">
					</div>
					<div class="bottom" style="height:12%">
					</div>
				</li>
			</ul>
		</div>
		<div class="bottom_graph">
			<ul>
				<li>
					<span>테스트1</span>
				</li><!--
				--><li>
					<span>테스트2</span>
				</li><!--
				--><li>
					<span>테스트3</span>
				</li>
			</ul>
			<span class="dib wd100">오마나</span>
			<span class="dib wd100">세상에</span>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(document).ready(function() {
		
	});
</script>