『2023.03.27~28』API연결과 추가 css 적용하기!!

 

 

👇👇👇  이전 글 바로가기! 👇👇👇 

『 2023.03.23』- Open API 공식문서 확인 및 컴포넌트 수정

 

드디어 짝꿍님의 도움으로 공공 API를 연결했다...!

 

시도별 선택 시 뜨는 측정값과 실제 에어코리아 홈페이지와 같은 측정값을 얻는지도 확인했다!

 

 

이제는 정말 막바지 작업을 진행하는 것으로 오늘 기록을 남겨야겠다!

연결에 도움을 준 우리 짝꿍님 짱짱!!

---

✏ 상단 nav 애니메이션 효과 적용

 

상단 nav의 애니메이션 효과를 적용하여 보다 조금은 밋밋함을 개선.

키프레임 속성을 사용하여 깜빡이는 애니메이션 속성을 적용했다.

---

✏ 지도영역 상단 제목 추가

 

대한민국 전역지도 부분에 제목이 없어 해당 지도가 어떤 부분에 대한 설명인지 알기 어렵다는 생각에

 

사용자가 어떤 부분의 지도인지 알 수 있도록 제목을 제작했다!

 

수정 전: 해당 지도가 어떤 영역의 지도인지 알아보기 힘들었다.

 

수정 후 : 상단 제목을 통하여 해당 지도를 알 수 있다.

---

✏  초기화면 제작 (미세먼지현황영역, 행동요령 영역)

 

초기화면을 제작하여 상태값이 넘어오기 전 해당 컴포넌트를 보여주기로 했다.

 

None이라는 컴포넌트를 기본상태값으로 불러온다.

 

 

✏  map 컴포넌트 수정

 

map 컴포넌트 중 수정사항이 있어서 수정해 주었다.

 

1. 지역 위치 수정

인천의 지역명의 위치를 수정하여 다소 상단에 위치한 지역명을 중간부분으로 수정했다.

2. '제주' 영역 위치 수정

상단 제목을 추가하여 밀려난 '제주'의 위치를 수정해주었다.

3. fill 속성 변경

다소 어두워 보이는 지도의 채도를 낮혀주었다.

 

4. hover 색상 변경

hover시 보이는 색상을 비슷한 계열의 색상으로 변경해주었다.

---

수정 전

수정 후

---

╰( ⚆o⚆)╮╰( ⊙o⊙)╮