2023.05.18 - [Project ISL/프론트엔드] - Day 5 : 세계지도 인터랙션, 국가별 호버 이벤트와 법규(?) Day 5 : 세계지도 인터랙션, 국가별 호버 이벤트와 법규(?) 2023.05.17 - [Project ISL/프론트엔드] - Day 4 : 노력하는 자에겐 상이...? Day 4 : 노력하는 자에겐 상이...? 2023.05.16 - [Project ISL/프론트엔드] - Day 3 : SVG와 자바스크립트를 활용한 세계지도 만들기 Day 3 : SVG xpmxf4.tistory.com 위 글을 읽고 오신 다음에 이 글을 읽는 것을 추천 드립니다! 날짜를 보면 아시겠지만... 이 글은 그간과는 다르게 작업을 한지 좀 뒤에 작성하게 되는 글입니다. 핑계를 대자면 최근 코로나에..

2023.05.17 - [Project ISL/프론트엔드] - Day 4 : 노력하는 자에겐 상이...? Day 4 : 노력하는 자에겐 상이...? 2023.05.16 - [Project ISL/프론트엔드] - Day 3 : SVG와 자바스크립트를 활용한 세계지도 만들기 Day 3 : SVG와 자바스크립트를 활용한 세계지도 만들기 이 화면을 틀어두고 방법을 모색하는 데 내 화면이 너 xpmxf4.tistory.com Day 4 글을 읽고 와주시면 다음 글의 내용이 훨씬 잘 이해가 갈 거예요! 어제 각 나라별로 마우스 호버시 색깔이 바뀌도록 하는 이벤트를 설정하고 마무리했고, 오늘은 이제 법규를 날리기 위한 작업 내용을 보여드리도록 하겠습니다 :) 어제 완성된 코드부터 보시죠! window.onload =..

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 하게 되면 그 나라의 도트들만 색깔이 변해야 하기 때문이다. 생..