문제 및 해결

• 1. 메인페이지 첫 번째 섹션 위로 사라지는 텍스트들의 위치값 조정

    첫 번째 섹션에 정해진 틀 안에서 글자만 바뀔 수 있도록 구현하였는데 사이트의 가로 크기가 줄어들 때마다 위치값과 폰트 사이즈가 달라져서 어긋나는 문제가 있었습니다.

    해결이 될 때까지 많은 방법을 생각해 보고 적용해 보았는데 텍스트를 감싸는 요소에도 vw값을 적용하고 폰트 사이즈도 px과 rem이 아닌 vw를 적용하였더니 창이 줄어들어도 문제없이 보였습니다.

• 2. 첫 번째 섹션을 지나고 나서부터 위로 가기 버튼 나오게 하기

     첫 번째 섹션을 지나고 나서부터 위로 가기 버튼이 나올 수 있도록 구현하였습니다.

     JavaScript의 scrollHt 속성을 이용하여 높이 값을 구한 후 첫번째 섹션을 지나기 전에는
  opacity값 0을 주어 보이지 않도록 하고, 첫 번째 섹션을 지난 후에는 opacity값 1을 주어 보일 수 있도록 하였습니다.

• 3. 마우스 포인터 커스텀

    포트폴리오 디자인에 어울리는 마우스 포인터로 커스텀을 하였습니다.

     hover 했을 때와 아닐 때의 차이점을 주고 싶어서 JavaScript의 querySelectorAll 속성을 활용하여 html 안의 'a'를 찾아주고 mousemove와 mouseenter 속성으로 hover 했을 때와 아닐 때 디자인을 다르게 구현하였습니다.

• 4. 공통 JavaScript 파일로 코드 최적화

    서브페이지의 경우 모든 페이지의 JavaScript 코드가 동일했습니다.
  

    코드의 최적화를 위해 common 파일에 공통 js파일을 만든 후 각각의 서브페이지에 연결해주었습니다.