『 2023.03.08』 - 오류 수정 및 지도 영역 수정

👇👇👇  이전 글 👇👇👇 

『2023.03.06』 - Hi Dust의 시간설정과 여러가지

 

오늘도 힘차게 달려봅시다!  ◠ ̫◠

 

✎ 오늘의 할 일
 
1. react live clock 오류 수정하기
2. svg파일 크기 조정하기

---

1. react live clock 오류 수정하기

어제 발생한 해당 오류...

 

나는 동시시간대를 설정하지 않아서 그런 줄 알았으나 짝꿍님의 휘리릭 한 번에 오류가 없어졌습니다..

 

오류의 이유는  타임존의 국가코드의 오류로 발생한 문제였다. (해결 완!)

 

깨끗한 콘솔창!

국가코드는 위키백과를 참고하세요! 

https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

List of tz database time zones - Wikipedia

 

 

2. svg파일 크기 조정하기

 

SVG파일의 크기 조절에 대한 방법을 찾아보던 중 viewBox에 대한 속성에 대해서 알게 되었다.

viewBox는 SVG 요소 내에서 사용될 수 있는 사각형 영역을 정의한다.. 이 사각형 영역은 SVG 요소 내의 좌표계를 기준으로 지정되며, x, y, width, height 값으로 구성하여 설정한다! (더 자세한 설명은 추 후 포스팅예정!)

 

 

여하튼 viewBox방법으로 대한민국의 전역지도를 줄일 수 있었다!

 

 

처음엔 제주도의 위치가 너무 멀어 위치를 변경하는 것으로 했다.

 

그냥 저렇게 두는 건 위치적으로 저기에 위치하는 것처럼 보이기 때문에 하나의 네모칸을 만들어주기로 했다!

이랗게 잘 구현이 되었다!

 

 

3. 여러 가지 설정 및 수정

 

1. header

header영역의 그림자 속성과 nav의 폰트 두께와 색상을 설정해 주었다.

 

2.footer 설정

간단한 카피라이트가 들어가는 footer 정도는 들어가면 괜찮을 것 같다는 짝꿍님의 의견에  footer 영역을 추가해 주고 간단한 카피라이트를 넣어주었다. (짝꿍님 닉네임도 추가 예정!)

 

 

3. 미세먼지 예보기준과 행동지침 검색

 

초미세먼지와 미세먼지 예보기준에 대해서 검색해 보았다.

출처:서울특별시 대기정책과 

아무래도 조건마다 보이는 화면이 달라야 하기 때문에 조건부 렌더링을 사용해야겠다는 생각이 나왔다.

 

내일 시간까지 알아오기로 해야겠다!

 

---

✎ 내일의 할 일!

 

1. 조건부 렌더링을 사용한 미세먼지 영역 설정하기

2. 조건문을 사용한 js파일 만들기