Open GunterOdimm opened 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>
css 스타일은 입맛에 맛게 설정하시면 됩니다.