search

GunterOdimm / HTML-Study

0 stars 0 forks source link

chart css 를 이용해 그래프를 표현하기 #28

Open GunterOdimm opened 5 years ago

GunterOdimm commented 5 years ago 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>Movie Title</title>
  <link rel="stylesheet" type="text/css" href="css/MonthOfficeStyle.css" />
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.rawgit.com/theus/chart.css/v1.0.0/dist/chart.css" />

</head>
<body>
  <div id="container">
    <div id="header">
    </div>
    <div id="content" class="clear">
        <div id="body">
            <ul id="gallerytitle">
                <li>
                <span id="font">BOX OFFICE BY TYPE</span>
                </li>
            </ul><!--
            --><table class="motherBox">
              <thead>
                <td class="childBox">
                  <div class="charts">
                    <span>chart--default</span>
                    <div class="charts__chart chart--p100 chart--default" data-percent></div><!-- /.charts__chart -->
                    <span>chart--blue</span>
                    <div class="charts__chart chart--p80 chart--blue" data-percent></div><!-- /.charts__chart -->
                    <span>chart--green</span>
                    <div class="charts__chart chart--p60 chart--green" data-percent></div><!-- /.charts__chart -->
                    <span>chart--red</span>
                    <div class="charts__chart chart--p40 chart--red" data-percent></div><!-- /.charts__chart -->
                    <span>chart--yellow</span>
                    <div class="charts__chart chart--p20 chart--yellow" data-percent></div><!-- /.charts__chart -->
                    <span>chart--grey</span>
                    <div class="charts__chart chart--p5 chart--grey" data-percent></div><!-- /.charts__chart -->
                  </div><!-- /.charts -->
                  </td>
                <td class="childBox">
                  <div class="charts charts--vertical">

                    <div class="charts__chart">
                      <span class="charts__percent"></span>
                    </div><!-- /.charts__chart -->

                    <div class="charts__chart chart--p80">
                      <span class="charts__percent"></span>
                    </div><!-- /.charts__chart -->

                    <div class="charts__chart chart--p60">
                      <span class="charts__percent"></span>
                    </div><!-- /.charts__chart -->

                    <div class="charts__chart chart--p100                chart--hover">
                      <span class="charts__percent"></span>
                    </div><!-- /.charts__chart -->

                    <div class="charts__chart chart--p80  chart--blue    chart--hover">
                      <span class="charts__percent"></span>
                    </div><!-- /.charts__chart -->

                    <div class="charts__chart chart--p60  chart--green   chart--hover">
                      <span class="charts__percent"></span>
                    </div><!-- /.charts__chart -->

                    <div class="charts__chart chart--p40  chart--red     chart--hover">
                      <span class="charts__percent"></span>
                    </div><!-- /.charts__chart -->

                    <div class="charts__chart chart--p20  chart--yellow  chart--hover">
                      <span class="charts__percent"></span>
                    </div><!-- /.charts__chart -->

                    <div class="charts__chart chart--p5   chart--grey    chart--hover">
                      <span class="charts__percent"></span>
                    </div><!-- /.charts__chart -->

                    <div class="charts__chart chart--p100 chart--xs">
                      <span class="charts__percent"></span>
                    </div><!-- /.charts__chart -->

                    <div class="charts__chart chart--p80 chart--sm">
                      <span class="charts__percent"></span>
                    </div><!-- /.charts__chart -->

                    <div class="charts__chart chart--p60">
                      <span class="charts__percent"></span>
                    </div><!-- /.charts__chart -->

                    <div class="charts__chart chart--p40 chart--lg">
                      <span class="charts__percent"></span>
                    </div><!-- /.charts__chart -->

                    <div class="charts__chart chart--p20 chart--xl">
                      <span class="charts__percent">Title</span>
                    </div><!-- /.charts__chart -->

                  </div><!-- /.charts --> 
                </td>
              </thead>
              <br/>

            </table>
              <li class="boxFoot">
                <span class="grendChildBox">택스트 박스입니다.</span>
              </li>
            </ul>
        </div>
    </div>
</body>
</html>
GunterOdimm commented 5 years ago

css 스타일은 입맛에 맛게 설정하시면 됩니다.