문제 및 해결

• 1. 스크롤 할 때 svg가 그려지는 효과

    스크롤을 내리면 특정 위치에서 svg가 그려지는 효과를 적용해야 하는 부분이 많았습니다. 한 번도 구현해 보지 않아서 어떻게 해야 할지 고민이 많았는데 여러 자료를 찾아보면서 해결할 수 있었습니다.

    피그마에서 디자인 한 요소들을 svg로 변환시킨 후 HTML에 넣고 getTotalLength(); 속성을 통해 svg의 stroke-dasharray 값을 구해주었습니다. 그 후 scrollTop 속성으로 섹션의 높이 값을 구한 뒤에 원하는 위치에 도달했을 때 svg가 그려지도록 구현하였습니다.

• 2. hover 했을 때 마우스 포인터 변경

    마우스 포인터를 변경하고 커스텀 하는 방법은 알고 있었지만 특정 요소에 hover 했을 때
  마우스 포인터를 변경하는 방법은 알지 못했습니다. 그러던 중 수업 시간에 배웠던 mousemove와 mouseenter 속성이 떠올라 적용시킬 수 있었습니다.

    hover 했을 때 변경되었으면 하는 요소들에게 id 값을 부여해 주고 addClass와 removeClass를 활용하여 mousemove 되었을 때와 mouseenter 되었을 때 각각 다른 css가 적용될 수 있도록 하였습니다.

• 3. 섹션마다 위로가기 버튼, 마우스 포인터 색상 변경

    이번에 제작한 사이트는 섹션마다 배경 색상이 바뀌어서 위로 가기 버튼과 마우스 포인터의 색상이 하나로 지정되어 있으면 특정 섹션에서는 색상이 보이지 않는 경우가 있었습니다.

     이를 해결하기 위해 scrollTop 속성으로 각 섹션의 높이를 구하고 특정 위치에 도달하면 원하는 색상으로 바뀔 수 있도록 하였습니다.