100 DAYS CSS CHALLENGE #DAY5

DAY #5

- 문제

👉 문제 바로가기
Statistic: In a world of numbers, it is important to be able to interpret them correctly. Beautiful statistics help to capture these data.

통계: 숫자의 세계에서는 숫자를 올바르게 해석하는 것이 중요합니다. 아름다운 통계는 이러한 데이터를 포착하는 데 도움이 됩니다.

이건 뭐지...??
갑자기 꺾은선 그래프가 생겼다.
심지어 꼭지점에 마우스를 올리면 값이 스윽- 하고 표시되어야 한다.

앞서 풀었던 문제들과 결이 다르다...!! 일단 풀어보자.

---

우선 꺾은선 그래프의 라인을 만드는 방법을 알아야 한다.
저 그래프를 어떻게 만들 것이냐,

1. 태그를 이용해 line을 직접 만들어서 transform rotate로 각도를 맞추는 방법

   • 너무 복잡하고 손이 많이가는 작업임
   • 선이 이어져있지 않고 끊겨있는 느낌이 들 수 있음

   아무리 생각해도 이거슨 너무 바보같은 작업이라 Pass....

2. 무엇인가 다른 방법이 있겠지!!! 서치한다😊

   나는 이 방법을 선택했다^__^!!

찾아보니 꼭지점이 꺾이는 도형을 만들때는 svg polyline태그를 이용하는 듯 했다.
꺾은선 그래프 그리기에 딱이었다...!!😲


나는 svg를 .svg형태의 이미지로만 사용했었다.
그래서 직접 코드를 작성해서 사용한적은 없었기 때문에... w3schools 에서 공부를 좀 함!

✨SVG polyline 이란?✨

The "polyline" element is used to create any shape that consists of only straight lines (that is connected at several points):

"polyline" 요소는 직선(여러 점에서 연결됨)으로만 구성된 모양을 만드는 데 사용됩니다.

출처: w3schools

<svg height="200" width="500">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

이런식으로 points를 잡아 모양을 만드는 것이다.

• fill 을 이용해 모양 안쪽에 색을 채울수도 있고,
• stroke 를 이용해 테두리 색상을 변경할수도 있다.
• stroke-width 를 사용해 테두리의 굵기도 변경할 수 있다.

이를 이용해서 꺾은선 그래프를 만들었다!!
▽▽

<svg width="264" height="80">
  <polyline class="red" points="9,46 50,12 90,23 130,11 171,38 211,48 251,19"></polyline>    
</svg>
<svg width="264" height="80">
  <polyline class="blue" points="9,61 50,50 90,65 130,55 171,61 211,74 251,64"></polyline>
</svg>

위치 잡는 포인트는 눈대중으로 접근이 불가해서 정답에서 가져왔다 ㅋㅋ

이제 그래프 모양을 만들었으니 꼭지점을 만들 차례!!

꼭지점은 생각보다 원시적인 방법으로 만들어야 했다.
원 7개를 모두 만든다음 각각의 위치에 하나하나 찍어줘야 한다 ㅋㅋ

그래도 여기까진 괜찮았는데, 여기서 문제..!! 😲

꼭지점에 마우스를 갖다 대면(:hover), 툴팁(tooltip)이 나와서 꼭지점이 가진 값을 띄워줘야 한다!!

그래서 나는

.tooltip {
  ...
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: all ease-out 0.4s;
}
...

.red_dots, .blue_dots { //(꼭지점 클라스명)
  &:hover .tooltip {
    bottom: 14px;
	opacity: 1;
	visibility: visible;
  }

}

이렇게 bottom 과 opacity 를 이용해서 위치가 아래에서 위로 투명도 0 ~ 1 로 스-윽 하고 올라오는 효과를 주었다.

visibility는 tooltip이 띄워지지 않았을때 차지하는 영역을 제거하기 위해 사용했다.
display로 주지 않은 이유는 display는 transition이 먹지 않기 때문이다. (이유가 궁금하다면 여기로!!)

그런데 이렇게 만드니 무엇인가 이상했다!
꼭지점에 마우스가 애매~ 하게 걸쳐져 있을때 tooltip이 오류난것처럼 '덜그럭덜덜덜'하고 띄워지는 것이다🙄

transition이 문제였다.

transition: bottom ease-out 0.4s, opacity ease-out 0.4s; 

이렇게 바꿔주어야 했다! 아무래도 all을 사용해서 다른 요소들도 다 transition을 먹어버려서 그런것 같았다.
저렇게 bottom 과 opacity 에만 주니까 오류같은 효과가 사라졌다! 🥳

---

- 내가 만든 CHALLENGE Code

- 결과물

야호!! 문제 완성!! 🥳🎉

이번 문제는 눈으로 보다시피 간단한 문제는 아니었다!
지금까지 푼 5개의 문제중에 코드가 가장 길다 ㅋㅋ

svg와 같은 내가 사용하지 않았던 태그와 몰랐던 속성들에 대해서 깊이 찾아보고 사용해 볼 수 있는 것이 이 챌린지의 장점인 것 같다. 👍

끝