css 막대 그래프 (대박)

8월 08, 2018

프로젝트를 하면서 그래프가 필요한 상황이 많이 발생하는데 상용 그래프를 사서하기에는 Money 때문에 고민하는 경우가 많습니다. 이럴 때 css만으로 간단하게 막대 그래프를 만들수 있다면 믿으시겠습니까? 무려 이미지도 필요 없습니다.

CSS만으로 위와 같이 그래프를 만들어 볼수 있습니다.
저도 그렇지만 아마도 많은 분들이 필요로 하지 않을까 싶어 오늘은 css 막대 그래프에 대해서 알아보겠습니다.

소스는 아래와 같습니다.
먼저 수직 막대 그래프 소스 입니다.

<meta charset="UTF-8">
<style type="text/css">
@charset "utf-8";
/* Vertical Bar Graph */
.vGraph{ padding:20px 0;}
.vGraph ul{ margin:0; padding:0; height:200px; border:1px solid #ddd; border-top:0; border-right:0; font-size:11px; font-family:Tahoma, Geneva, sans-serif; list-style:none;}
.vGraph ul:after{ content:""; display:block; clear:both;}
.vGraph li{ float:left; display:inline; width:8%; height:100%; margin:0 3%; position:relative; text-align:center; white-space:nowrap;}
.vGraph .gTerm{ position:relative; display:inline-block; width:100%; height:20px; line-height:20px; margin:0 -100% -20px 0; padding:200px 0 0 0; vertical-align:bottom; color:#767676; font-weight:bold;}
.vGraph .gBar{ position:relative; display:inline-block; width:100%; margin:-1px 0 0 0; border:1px solid #ccc; border-bottom:0; background:#e9e9e9; vertical-align:bottom;}
.vGraph .gBar span{ position:absolute; width:100%; top:-20px; left:0; color:#767676;}
</style>
<h1>수직 막대 그래프(Vertical Bar Graph)</h1>
<div class="vGraph">
<ul>
<li>SUN0%</li>
<li>MON20%</li>
<li>TUE30%</li>
<li>WED40%</li>
<li>THU50%</li>
<li>FRI60%</li>
<li>SAT100%</li>
</ul>
</div>

----------------------------------------------------------------------------------------------------------------------
다음으로 수평 막대 그래프 소스 입니다.

<meta charset="UTF-8">
<style type="text/css">
/* Horizontal Bar Graph */
.hGraph ul{ margin:0 50px 0 50px; padding:1px 0 0 0; border:1px solid #ddd; border-top:0; border-right:0; font-size:11px; font-family:Tahoma, Geneva, sans-serif; list-style:none;}
.hGraph li{ position:relative; margin:10px 0; white-space:nowrap; vertical-align:top;}
.hGraph .gTerm{ position:absolute; width:40px; top:0; left:-50px; line-height:20px; text-align:right; color:#767676; font-weight:bold;}
.hGraph .gBar{ position:relative; display:inline-block; height:20px; border:1px solid #ccc; border-left:0; background:#e9e9e9;}
.hGraph .gBar span{ position:absolute; width:40px; line-height:20px; top:0; right:-50px; color:#767676;}
</style>
<h1>수평 막대 그래프(Horizontal Bar Graph)</h1>
<div class="hGraph">
<ul>
<li>SUN0%</li>
<li>MON20%</li>
<li>TUE30%</li>
<li>WED40%</li>
<li>THU50%</li>
<li>FRI60%</li>
<li>SAT100%</li>
</ul>
</div>

----------------------------------------------------------------------------------------------------------------------
그리고 제목이 있는 막대 그래프 소스 입니다.

<meta charset="UTF-8">
<style type="text/css">
/* Inline Bar Graph */
.iGraph{ white-space:nowrap; line-height:normal;}
.iGraph .gBar{ display:inline-block; width:250px; height:14px; margin:0 5px 0 0; border:1px solid #ccc; background:#e9e9e9; font-size:11px;}
.iGraph .gAction{ display:inline-block; height:14px; border:1px solid #8c9bac; background:#99a6b6; margin:-1px;}
.iGraph .gPercent{ font:16px Arial, Helvetica, sans-serif; color:#ccc;}
.iGraph .gPercent strong{ font-size:18px; color:#e88b30;}
</style>
<h1>제목이 있는 막대 그래프 (Inline Bar Graph)</h1>
<h2>Paragraph Inline</h2>
무궁화 꽃이

 
 50%

피었습니다.
<h2>Unordered List</h2>
<ul>
<li class="iGraph">
 
 10%
</li>
<li class="iGraph">
 
 20%
</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li class="iGraph">
 
 10%
</li>
<li class="iGraph">
 
 20%
</li>
</ol>

----------------------------------------------------------------------------------------------------------------------
마지막으로 별로 점수를 표현하는 그래프 소스 입니다.
<meta charset="UTF-8">
<style type="text/css">
@charset "utf-8";
/* Star Rating */
.starRating,.starRating span{ display:inline-block; height:14px; height:14px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTcQgkAzqXNasIyMy8ywo1rN37bb9etdaY47jrjFI7J8K7tX2G2M3R18SmMvO5b6QDFl14aafj2QW2nq-0Jyy9jN1Rf_cnb8YkISCSw949_PPMQRv8AaIzgLjESCqloQ6xck3_8wlOwlY/s1600/icoFiveStar.gif) no-repeat; overflow:hidden;}
.starRating{ width:79px; vertical-align:middle;}
.starRating span{ font-size:0; line-height:0; vertical-align:top; text-indent:-100px; *text-indent:0; background-position:0 -14px;}
</style>
<h1>별 점수 그래프(Star Rating)</h1>
1점
2점
3점
4점
5점
6점
7점
8점
9점
10점

어떠신가요? 감탄이 절로 나옵니다.
사실 위의 소스는 제가 만든것이 아니고 http://naradesign.net/wp/2010/03/17/1233/ 여기서 퍼왔습니다.

저도 필요해서 찾다가 알게되었고 한번에 쓸수있게 샘플을 만들어 공유 드리는 것입니다.

오늘도 좋은 하루되시길 바랍니다.^^

이 블로그 검색

BamTolLove

css 막대 그래프 (대박)

댓글

댓글 쓰기

이 블로그의 인기 게시물

껌 떼는 법 (완벽 제거)

학점 계산기 (백분위 환산) 완벽 정리

[엑셀] 셀에 수식 적용하는 모든 것 완벽 정리