성별 통계 CSS 디자인 및 SASS

✈ 성별 통계 CSS 디자인 및 SASS

성별 통계 CSS 디자인 및 SASS

성별 차트 플러그인이 딱 디자인에 맞는게 없어서 아래와 같이 만들어봤다.

원리 자체는 간단하다.

그냥 막대그래프에서 퍼센트 통계 그려주는 것과 같다.

다만 다른 점은 BG가 필요한 것 뿐이다.

기본적으로 채워져 있지 않은 테두리만 있는 성별 BG를 부모 객체에 background로 준다.

이후 데이터를 표시하는 엘레먼트는 색을 가진 BG를 background로 받는다.

색이 머리에서부터 칠해진다면 background position은 top이겠지만 보통 이런 차트는 다리부터 색이 칠해져 올라가야 하므로 bottom을 준다. 관련 BG는 아래에 첨부해 두도록 하겠다.

bg.zip

0.01MB

소스코드는 다음과 같다.

html

              <ul class="chartSex">
                <li>
                  <dl>
                    <dt>여성</dt>
                    <dd class="stat-cs-data1 female">
                      <div class="data-bar" style="height:73%"></div>
                    </dd>
                    <dd class="stat-cs-percent">73%</dd>
                    <dd class="stat-cs-count">7300</dd>
                  </dl>
                </li>
                <li>
                  <dl>
                    <dt>남성</dt>
                    <dd class="stat-cs-data1 male">
                      <div class="data-bar" style="height:27%"></div>
                    </dd>
                    <dd class="stat-cs-percent">27%</dd>
                    <dd class="stat-cs-count">2300</dd>
                  </dl>
                </li>
              </ul>

SASS

.chartSex {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: space-around;

  &>li {
    flex: 0 1 50%;

    &:nth-child(1) {
      padding-left: 50px;
    }

    &:nth-child(2) {
      padding-right: 50px;
    }

    dl {
      dt {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
      }

      dd {
        &.stat-cs-data1 {
          width: 68px;
          height: 136px;
          margin: 0 auto 20px auto;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;

          .data-bar {
            display: block;
            margin-bottom: 0;
            width: 100%;
          }

          &.female {
            background: url(/assets/images/bg/stat_female.png) center bottom no-repeat;

            .data-bar {
              background: url(/assets/images/bg/stat_female_on.png) center bottom no-repeat;
            }
          }

          &.male {
            background: url(/assets/images/bg/stat_male.png) center bottom no-repeat;

            .data-bar {
              background: url(/assets/images/bg/stat_male_on.png) center bottom no-repeat;
            }
          }
        }

        &.stat-cs-percent {
          font-size: 14px;
          font-weight: 500;
          color: $color-blk;
          margin-bottom: 5px;
        }

        &.stat-cs-count {
          font-size: 11px;
        }
      }
    }
  }
}

슬랜더 니트원피스 피팅모델