DAY #22
- 문제
👉 문제 바로가기
Fitness Tracker: Don't sit on your chair all day long. Get up, jump, run, exercice and burn some calories.
난 지금껏 이런 그래프는 chart.js 같은 라이브러리를 사용해서 구현했었는데,
그냥 CSS만 사용해서 이런 도넛 그래프모양을 만들수가 있다니요~~
사실상 데이터값을 실제로 넣으려면 라이브러리를 사용해야겠지만, 모양만 만들어 보는 문제니까!
문제를 보니 이번에도 svg 가 사용된 것 같았다.
이번에도 stroke-dasharray, stroke-dashoffset 을 사용하는 듯!
- 문제 구조 확인
어떻게 만드나~ 봤더니 이번엔 circle 두개를 겹쳐놓고,
stroke-width 를 사용해서 도넛모양을 만든듯 하다. (하나는 배경, 하나는 그래프)
그래프를 잘 보면 끝 모양이 둥글게 되어있는걸 볼 수 있는데,
svg 의 stroke-linecap: round 속성을 이용해서 둥글게 처리해 줄 수 있다!
🍩도넛 그래프 영역 만들기
일단 도넛 그래프의 위치를 잡아주기 위해서 svg 의 너비높이를 정해 범위를 잡아주고,
그 안에서의 circle 위치를 잡아 주어어야 한다!
svg {
width: 114px;
height: 114px;
...
}<svg>
<circle class="bg" cx="57" cy="57" r="52"></circle>
<circle class="ring" cx="57" cy="57" r="52"></circle>
</svg>요렇게 하면 두 원의 중심점이 가운데로 가도록 (114 / 2 = 57) 할수있다!
그리고 r 은 반지름길이 이다.
그렇다면 왜 중심점과 반지름의 길이가 차이가 나냐 ❗❓
왜냐하면 stroke-width 를 10px 로 정해줄거기 때문 ❗❗
그러면 선 가운데를 중심으로 5px 씩 늘어나서 원의 지름이 52 + 5 = 57px 이 된다~
.
.
작은 원모양은 크기에 맞게 다시 조정해 주면 그래프 영역 준비 완료!
💫그래프 3개 정렬하기
의외로 문제에서 제일 공을 들였던 부분은, 그래프 위치 정렬이다 ㅋㅋ
이번엔 다행히 input 을 사용하지 않는 ^^ 문제여서 ^^
마크업 하는덴 문제가 없었다고 한다~~
일단 div.center 를 정중앙배치 한 다음 (grid 중앙정렬)
.circle_wrap 을 만들고 그 안에서 영역을 나누었다.
큰 그래프 부분은 .circle_top, 작은 그래프 두 영역은 .circle_bottom 이라고 한 다음
.circle_wrap {
display: flex;
flex-wrap: wrap;
...
.circle_top {
width: 100%;
margin-bottom: 20px;
...
}
.circle_bottom {
width: 50%;
...
}
}요렇게 flex로 배치하고, 그 안에 있는 text 요소들을 가운데 정렬하기위해서
@mixin center {
display: grid;
place-items: center;
}
.circle_top {
@include center;
...
}
.circle_bottom {
@include center;
...
}마찬가지로 grid 중앙정렬을 이용해서 나름대로 쉽고 빠르게 배치 한 것 같다!
📊 그래프 값 나타내기
이제 만들어둔 영역에서 값만 잘 나오게 하면 된다!
요런 발굽? 모양을 어떻게 만드느냐~~
아까 말한대로 stroke-width 를 10px 로 정해준 다음에!
색을 정해주고, stroke-dasharray, stroke-dashoffset 을 이용해서 선을 끊어주면 된다.
stroke-dasharray: (52 * 2 * 3.14);
stroke-dashoffset: 60;dasharray 는 반지름 x 2 x 원주율 해주면 나오고 (약 326)
dashoffset 은 끊긴 길이를 나타내는데,
326의 1 / 6 이 약 54니까, 보다 조금 더 길게 60정도로 하면 저정도의 길이가 나온다.
(이 방법을 보고 실제 그래프를 구현할땐 이렇게 하면 절대 안된다는걸 깨달았다........)
그리고 여기서! 끊긴 부분을 둥글게 해주는 stroke-linecap: round 사용하기~!
.
.
나머지 작은원들도 마찬가지로 값 조정해주면 된다!
🌠 그래프 값 스르륵 효과
이부분은 앞 문제 등등에서 계속 설명했었던 것 같다~~
from {
stroke-dashoffset: (52 * 2 * 3.14); // 반지름 * 2 * 파이 = 원 둘레
}
to {
stroke-dashoffset: 60;
}이렇게 stroke-dashoffset = 원 둘레 길이 로 맞춰서 안보이는 상태에서 시작 (from),
끊긴 길이로 가게 (to) 만들면! 값이 스르륵 그려지면서 나오는 효과 완성~
- 내가 만든 CSS Code
- 결과물
이렇게도 그래프를 만들수 있다고?! 하고
나름 기대하면서 풀었던 문제인데 ㅋ_ㅋ
역시나 그냥 하드코딩된ㅠ 껍데기만 그래프였던 것이었다!
실무에선 chart.js 같은 라이브러리 쓰세용~~
끝
