2023.05.16 - [Project ISL/프론트엔드] - Day 3 : SVG와 자바스크립트를 활용한 세계지도 만들기 Day 3 : SVG와 자바스크립트를 활용한 세계지도 만들기 이 화면을 틀어두고 방법을 모색하는 데 내 화면이 너무 구려보이는 것이다. 뭔가 허전하달까...? 원래는 그래서 오늘 다른 디자인을 찾다가 보니 다음 사이트를 찾을 수 있었다. https://simplemaps.co xpmxf4.tistory.com 이 전글도 보고 와주시면 감사하겠습니다!!! 오늘도 꾸준히 1시간, ISL 에 투자했습니다. 어제의 글처럼 simplemaps.com 에서의 svg는 그대로 사용하지만 위 사이트에서 제공하는 기능은 일일히 구현을 하기로 독한 마음먹고 svg 코드를 분석하는 와중에 특이한 점을 ..

이 화면을 틀어두고 방법을 모색하는 데 내 화면이 너무 구려보이는 것이다. 뭔가 허전하달까...? 원래는 그래서 오늘 다른 디자인을 찾다가 보니 다음 사이트를 찾을 수 있었다. https://simplemaps.com/world HTML5/JavaScript Interactive World Map | Simplemaps.com Fully Customizable Almost every aspect of the map can be customized. Colors, descriptions, links, labels, locations, regions and much more. simplemaps.com 해당 사이트는 정확히 내가 원하는 모양과 기능들을 모두 탑재한 svg 및 자바스크립트 기능까지 지원하는 사..

대략적인 기획이 끝나고 실제로 UI 를 보고 나서 필요해보이는 기능이 더 있을 거 같다고 판단, 어제 기획 이후에 바로 세계지도를 코드를 가져와 작성했다. https://codepen.io/Paulie-D/pen/vXzjmr SVG Dotted World Map ... codepen.io 도트형 이라는 단어 답게, 코드를 일일히 찍어야 겠다라는 생각을 하고 있었지만 예제 코드를 보니 svg 안에 태그가 무려 2,500 줄이나 있었다... // 2,500 줄 더... 역시 세계는 넓구나... 도트형 세계 지도를 찍는 거 까지는 해결. 다음 과제는 썸네일에서 나와 있듯이 바로 영역을 구분해야 한다. 왜냐하면 각 나라의 영역에 마우스를 hover 하게 되면 그 나라의 도트들만 색깔이 변해야 하기 때문이다. 생..