#26 : CSS (3)

1. 랜딩페이지 CSS 마무리

미로로 랜딩페이지를 약간 엎어서 디자인을 새로 했다. 그리고 각자 다시 수정을 한 후 현수님과 줌으로 만나서 진행했는데 새벽까지 했다...처음 만들었을 때보다 너무 깔끔하고 이뻐서 만족스럽게 마무리했다. 가장 많이 바꾼 부분은 랜딩페이지의 맨 위 부분이었던 것 같다. 처음엔 이미지로 시작했는데 지도 GIF를 넣고 글씨를 옆에 띄우는 걸로 바꾸었다.

---

2. 스크롤 애니메이션

랜딩페이지에 애니메이션이 없다보니 밋밋하다는 생각이 들어서 스크롤을 내리면 대상객체가 나타나도록 하고 싶었다. 그러던 중 검색을 통해 AOS라는 라이브러리를 알게 되어 사용했다. 아래 사이트인데 쉽게 사용할 수 있어서 좋았다.

https://michalsnik.github.io/aos/

우선 라이브러리 설치를 하고 html 파일에서 소스를 넣어주었다. AOS.init()을 넣은 후에 사용할 대상에 data-aos="fade-up"을 넣었다.

npm install aos --save

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> // JS
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> // CSS

useEffect(() => {
  AOS.init({
  duration: 3000,
  });
});

---

3. 지도페이지 마커 & 오버레이 색상 수정

랜딩페이지를 디자인하다보니 전반적인 컬러가 블루라서 지도페이지의 마커도 블루 계열로 맞추면 좋을 것 같다고 생각했고 오버레이까지 블루로 맞춰서 바꿔주었다. 마커랑 오버레이 색이 아예 똑같아도 이상하고 생각보다 고르기 힘들었다ㅠㅠ