(CSS) 만 가지고 차트 만들기

✅ 요약
1. 목표한 것 : CSS만 가지고 차트 만들기
2. 아쉬운 점 : Y축 눈금을 강제이동시킨 관계로 나중에 전체 중앙배치할때 조금 좌우균형이 안맞을 수도 있겠다.

 

구글링한 게 더 어려워서 내가 직접 만들고야 만 CSS로 차트 만들기

 

 

 

 

<div id="chart" class="chart col-lg-8">                
    <ul>
        <div class="chart-Xaxis"></div>
        <div class="chart-Yaxis"><span>1</span><span>2</span><span>3</span></div>
        <li><span class="chart-column-data">10</span><div class="chart-column" style="height: 10px;"></div><div class="chart-col-name">1번</div></li>
        <li><span class="chart-column-data">20</span><div class="chart-column" style="height: 20px;"></div><div class="chart-col-name">2번</div></li>
        <li><span class="chart-column-data">30</span><div class="chart-column" style="height: 30px;"></div><div class="chart-col-name">3번</div></li>
        <li><span class="chart-column-data">40</span><div class="chart-column" style="height: 40px;"></div><div class="chart-col-name">4번</div></li>
        <li><span class="chart-column-data">50</span><div class="chart-column" style="height: 50px;"></div><div class="chart-col-name">5번</div></li>
        <li><span class="chart-column-data">60</span><div class="chart-column" style="height: 60px;"></div><div class="chart-col-name">6번</div></li>
        <li><span class="chart-column-data">70</span><div class="chart-column" style="height: 70px;"></div><div class="chart-col-name">7번</div></li>
    </ul>
</div>

    .chart{
        width: 100%; /*차트 전체 가로너비*/
    }
    .chart>ul{
        /*목록 기본 레이아웃 지우기*/
        list-style-type: none; 
        padding: 0px; margin: 0px;

        /*내부 요소 정렬*/
        display: flex; /*본래 행 단위로 만들어지는 li요소를 열 단위로 정렬*/
        justify-content: center; /*메인축(여기서는 열)에 대한 정렬 기준 : 중앙 정렬*/

        position: relative; /*축의 위치 조정을 위한 기준 설정*/
    }

    .chart li{
        /*각 그래프 구성요소 전체를 의미*/
        margin: 0px 10px; /*구성요소(차트 막대)간 좌우 여백*/
        height: 150px; /*최고 높이*/
        
        width: 10%; /*전체 너비에 대한 비율*/
        
        
        display: flex; /*내부 요소 정렬방식 - 열 단위로 배치되는 상황*/
        flex-wrap: wrap; /*자식요소의 너비 줄이지 않기 - 이걸 처리해야만 상/하 구조 레이아웃이 잡힘*/
        justify-content: center; /* 메인축(여기서는 열)에 대한 정렬 기준 : 중앙 정렬*/
        align-content: flex-end; /*반대축의 정렬방식(여기서는 행) - 끝자락(아래)부터 배치돼야 하기에 end*/
    }
    .chart span.chart-column-data{
        /*차트 막대 위의 숫자 데이터*/
        display: block; /*블록화*/
        width: 100%; /*너비 잡기 : 이래야 막대요소 위에 위치함*/
        text-align: center; /*중앙 정렬*/
        font-size: 0.8em;  /*폰트 크기 자유 조정*/
    }

    .chart div.chart-column{
        /*차트 막대 요소*/
        width: 80%; /*막대 너비*/

        /*트랜지션 적용*/
        height: 0px;
        transition: height 2s; /*추후 js로 높이 적용시 천천히 올라가는 효과*/
        
        /*막대 디자인*/
        font-size: 0.6em;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background-color: lightgray; /*막대 색깔*/
    }
    .chart div.chart-column:hover{
        /*차트 막대 요소 : hover*/
        background-color: grey;
    }

    .chart div.chart-col-name{
        /*각 차트막대 이름*/
        display: block; /*블록화*/
        width: 100%;  /*너비 잡기 : 이래야 막대요소 아래 위치함*/
        text-align: center; /*중앙 정렬*/
        
        font-size: 0.8em; /*폰트 사이즈*/
        margin-top: 10px; /*막대와의 여백*/
        height: 20px;
        font-weight: 700; /*폰트 굵기*/
    }

    .chart div.chart-Xaxis{
        width: calc( 70% + 140px );  /*(각 li요소의 너비+좌우여백)* li요소 갯수 - 복잡하면 그냥 100%하기*/
        height: 30px; /*차트막대 이름에서 막대와의 여백+본래높이*/
        
        position: absolute; /*절대높이 지정 후 바닥에 딱 붙게 설정*/
        bottom: 0px;

        border-top: 1px solid black;
        background-color: rgba(255,255,255,0); /*축 아래 배경색 넣고싶을때 설정*/
    }

    .chart div.chart-Yaxis{
        width: calc( 70% + 140px );  /*(각 li요소의 너비+좌우여백)* li요소 갯수 - 복잡하면 그냥 100%하기*/
        height: calc( 100% - 30px ); /*전체 높이에서 */

        position: absolute; /*절대높이 지정 후 위에 딱 붙게 설정*/
        top: 0px;

        border-left: 1px solid black;
        background-color: rgba(255,255,255,0); /*사분면에 배경색 넣고싶을때 설정*/

        display: flex; /*내부 눈금 자유정렬화*/
        flex-direction: column-reverse; /*작은 수가 아래부터 올라오는 <행> 단위 정렬*/
    }

    .chart div.chart-Yaxis>span{
        /*Y축 눈금*/
        display: block; /*블록화*/
        height: calc(100% / 3); /*전체에서 각 요소 갯수만큼 나눠 배치*/
        transform: translateX(-20px); /*X축 음의방향으로 강제 이동 (내용 길이에 따라 추후 조정)*/

        font-size: 0.8em; /*폰트 사이즈*/
        font-weight: 700; /*폰트 굵기*/
    }