Day 7 : 왜 굳이 웹 서버 프레임워크를 사용해야 하나? 2023.05.24 - [Project ISL/프론트엔드] - Day 6 : 첫걸음은 '레이아웃 설계'로부터 Day 6 : 첫걸음은 '레이아웃 설계'로부터 2023.05.18 - [Project ISL/프론트엔드] - Day 5 : 세계지도 인터랙션, 국가별 호버 이벤트 xpmxf4.tistory.com 이전 글을 읽고 와주시면 감사하겠습니다 :) 오늘의 WORK 오늘은 3 가지의 작업을 완료했습니다. world-map.html 에 존재하는 나라들의 국가코드(ISO 3166-1 alpha-2)를 모으기 해당 국가코드들의 풀네임을 매핑한 json 생성 이렇게 생성한 json 파일을 JavaScript로 DB에 넣기 world-map.html 에서..

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