Develop/JPA16 반응형 CSS 추가하기 (9) 어느정도 큰 기능들은 끝났고최초보고 피드백 반영하려고 반응형으로 CSS를 추가하는 작업을 했다. 반응형 웹 CSS가 뭔지 아무것도 모르는 상태에서 시작하려니까 살짝 막막했지만바로 구글링 시작! ☑️ CSS Media Query CSS Media Query는 뷰포트가 x 보다 넓다. 라고 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공한다고 한다. 미디어쿼리 구문은 이런식으로 제공이 되고 있었다.@media media-type and (media-feature-rule) { /* CSS rules go here */} 유형에는 all, print, screen이 있고 min-width, max-width, orientation, resolution 등.. 2024. 11. 19. 카카오 길찾기 API (8) 저번 작업내용✅ 길찾기 네비게이션 1000m 단위 km로 변환✅ 도착 시간 시/분으로 표시✅ 자동완성 CSS✅ 자동완성시 해당 지역 아이콘 추가하기 오늘 작업내용☑️자동완성에 아이콘 추가☑️지역 검색, 초기화 시 마커, 검색 데이터 초기화☑️충전소 길 찾기 스왑버튼, 초기화버튼☑️네비게이션 CSS 정리 시작!!! ☑️자동완성에 아이콘 추가 저번에 자동완성 시 아이콘 영역 정해놨었고 오늘은 해당하는 아이콘 하나하나 찾아가면서 추가하는 작업을 했다. // category_group_code에 따른 아이콘 URL을 반환하는 함수function getIconUrl(categoryCode) { switch (categoryCode) { case 'MT1': return .. 2024. 11. 18. 전기차 충전소 길찾기 (7) 오늘의 작업내용 ✅ 길찾기 네비게이션 1000m 단위 km로 변환✅ 도착 시간 시/분으로 표시✅ 자동완성 CSS✅ 자동완성시 해당 지역 아이콘 추가하기 까지 하고 SQLD 공부하기! ✅ 길찾기 네비게이션 1000m 단위 km로 변환 + 도착 시간 시/분 표시 작업 전 사진! 길 찾기 시 제공되는 정보에 m로 표시가 되어있어서 1000m 단위를 km로 바꾸고89분 이렇게 표시되던 것들도 시간/분 단위로 바꿨다. 1시간 이상이면 1시간 + 분 으로1시간 미만이면 분 으로 표시되게 완료!// 총 예상 이동 시간 계산const totalDurationInSeconds = routeData.routes[0].summary.duration;const totalHours = Math.floor(totalD.. 2024. 11. 16. 전기차 충전소 API (6) 마지막 작업 내용 : 팝업창에 나온 전기차 충전소 위치를 충전소 길 찾기로 전달해서 도착지점 설정하기 오늘 작업 내용 : ✅리스트 불러올 때 지도에 마커 전부 표시, 해당 마커 클릭시 팝업창 뜨게하기 오늘 오전엔 팀원들 작업 내용 다 합치고 다시 배포하느라 한게 많이 없다! ✅ 리스트 불러올 때 지도에 마커 전부 표시, 해당 마커 클릭시 팝업창 뜨게하기 기존에 사용하던 코드에서 약간 수정했다.// 마지막으로 생성된 마커를 추적할 전역 변수let lastMarker = null;// displayResults 함수에서 전역 매핑 객체 사용function displayResults(items) { const resultList = document.querySelector(".searchlist u.. 2024. 11. 14. 전기차 충전소 길찾기 (5) 오늘의 작업내용!오늘은 오전에 이 정도로 끝내고,시간 되면 네이티브 하고 안되면 sqld에 집중...! ✅팝업창에 나온 전기차 충전소 위치를 충전소 길 찾기로 전달해서 도착지점으로 설정하기 기존에 리스트를 클릭하면 해당 충전소의 정보를 stationData에 저장해둔걸 최대한 활용했다. kakao map에 도착지 선택시 처리 코드// 도착지 선택 시 처리function selectDestinationPlace(place) { document.getElementById("destinationInput").value = place.place_name; document.getElementById("destinationCoords").value = `${place.x},${place.y}`; .. 2024. 11. 13. 전기차 충전소 API 상세 정보 팝업 (4) 오늘도 돌아온 작업 내용 정리 시간! 오늘은 리스트 클릭 시 해당 지역에 마커가 찍히면서 충전소 상세정보 팝업이 뜨게 하기! ✅ 리스트 클릭 시 해당 지역 마커 + 상세정보 팝업 마지막까지의 작업 내용 ↓ 여기에 이어서 리스트 클릭 시 카카오 지도에 마커를 전달하면서 해당 위치로 이동하게 한 후 팝업창이 나오게 구현했다. 리스트를 만들때 사용했던 lat, lng (위도,경도)를 이용해서 kakaomap에 전달했고 전달받은 값에 마커가 찍히게 했다.위도와 경도 + 각종 팝업창에 띄울 필요한 값들을 생각해서 클릭 시 같이 전달하게 했다.listItem.addEventListener("click", function () { const stationData = { name: displa.. 2024. 11. 12. 이전 1 2 3 다음
