JavaScript207 [JavaScript] OpenStreetMap 지도 위에 반경 표현하기 안녕하세요, 오늘은 OpenStreetMap 지도 위에 특정 위경도 기준으로 반경을 표현해보도록 하겠습니다. 아래 코드는 강남역 기준 반경 500m 를 원으로 표현한 예제입니다. DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>지도 위 반경 표현title> link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> style> #map { height: 1000px; width: 100%; } .. 2024. 11. 19. [JavaScript] 동영상 재생하기 안녕하세요.안녕하세요! 오늘은 JavaScript를 사용자가 자신의 컴퓨터에서 동영상 파일을 선택하고, 웹 브라우저에서 직접 미리보기로 재생할 수 있는 기능을 구현해 보겠습니다. 주요 기능을 정리하면 다음과 같습니다.사용자가 파일을 선택하면 동영상을 미리보기로 재생파일 크기 제한: 50MB 이하의 동영상만 업로드 가능파일 정보 표시: 파일 이름, 크기, 형식을 화면에 출력드래그 앤 드롭을 통한 파일 업로드 지원다중 파일 선택 기능으로 여러 동영상을 한 번에 미리보기1. HTML 코드 작성 : index.html먼저 기본적인 HTML 구조를 작성합니다. 동영상 미리보기 여기로 파일을 드래그하거나 클릭하여 동영상을 선택하세요. : 사용자가 동영상 .. 2024. 11. 16. [JavaScript] OpenStreetMap 지도 위에 경로가 그려지는 애니메이션 출력 안녕하세요, 오늘은 OpenStreetMap 지도 위에 원하는 경로를 따라 선이 그려지는 애니메이션을 출력해보도록 하겠습니다. 애니메이션 효과를 주어 특정 경로의 출발점부터 도착점까지 위도, 경도를 따라 선이 그려지도록 하는 예제입니다. DOCTYPE html> html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Leaflet OpenStreetMap 경로 출력 예제title> link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> style>.. 2024. 11. 13. [JavaScript] 웹에서 동작하는 계산기 앱 만들기 안녕하세요.오늘은 자바스크립트를 사용해 웹 기반 계산기 앱을 만들어보겠습니다.목표자바스크립트를 사용해 브라우저에서 동작하는 계산기를 구현합니다.실시간으로 수식을 입력하고 중간 계산 결과를 표시하는 기능을 추가합니다.키보드 입력 및 백스페이스 기능을 지원하여 사용자 경험을 개선합니다. 1. index.html 파일 생성먼저 html을 사용해 계산기 레이아웃을 구성합니다.display 는 계산 결과를 표시하며, 각 버튼에는 자바스크립트 함수를 연결합니다. C ⌫ ÷ × 7 8 .. 2024. 11. 10. [JavaScript] OpenStreetMap 지도 출력하여 특정 경로에 선 그리기 안녕하세요, 오늘은 OpenStreetMap 지도를 출력하여 경로에 선을 그려보도록 하겠습니다. 선을 그릴 경로 정보는 선을 이을 각 지점의 위도, 경도가 필요하며, 경로를 나타낼 위도, 경도의 배열을 따라 선을 출력해보겠습니다. 위도, 경도 배열에 따라 선을 그리는 예제입니다. DOCTYPE html> html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Leaflet OpenStreetMap 경로 출력 예제title> link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist.. 2024. 11. 7. [JavaScript] 세션 스토리지 사용해 간단한 퀴즈 상태 저장하기 안녕하세요! 이번 글에서는 세션 스토리지를 사용하는 방법에 대해 알아보겠습니다.1. 세션 스토리지란?세션 스토리지는 웹 브라우저에 내장된 데이터 저장 공간 중 하나로, 브라우저 세션이 유지되는 동안에만 데이터를 저장할 수 있는 기능입니다. 세션 스토리지에 저장된 데이터는 탭이나 창을 닫으면 사라지기 때문에, 특정 세션 동안만 필요한 데이터를 저장하는 데 매우 유용합니다.주요 특징세션 유지: 세션 스토리지에 저장된 데이터는 브라우저 탭을 종료하면 삭제됩니다. 다른 창이나 탭에는 접근할 수 없습니다.도메인 격리: 세션 스토리지에 저장된 데이터는 현재 도메인과 현재 탭에 한정됩니다. 즉, 한 탭에서 저장한 데이터는 동일한 도메인에서도 다른 탭에서 접근할 수 없습니다.키-값 쌍(Key-Value Pair) 형식.. 2024. 11. 6. [JavaScript] OpenStreetMap 지도 출력하여 특정 위치에 마커 찍기 안녕하세요, 오늘은 OpenStreetMap 지도를 출력하여 특정 위치에 마커를 찍고, 마커 클릭 시 마커 위에 팝업을 여는 예제를 만들어보도록 하겠습니다, 마커를 찍고자 하는 위치는 위도, 경도로 설정해야 합니다. 위도, 경도를 활용한 마커 찍는 예제입니다. DOCTYPE html> html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Leaflet OpenStreetMap Marker 예제title> link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.c.. 2024. 11. 3. [JavaScript] 로컬스토리지 사용해 즐겨찾는 링크 저장하기 안녕하세요!오늘은 로컬 스토리지를 사용해서 즐겨찾는 링크를 저장, 수정, 삭제할 수 있도록 해보겠습니다.1. 로컬 스토리지란?로컬 스토리지는 웹 브라우저에 내장된 저장 공간으로, 사용자가 데이터를 브라우저에 저장하고 이를 이후에도 사용할 수 있도록 하는 기능입니다. 로컬 스토리지는 브라우저와 연동된 웹 애플리케이션에서 데이터를 영구적으로 저장할 수 있도록 도와줍니다.주요 특징영구 저장: 로컬 스토리지에 저장된 데이터는 브라우저를 종료하거나 컴퓨터를 재부팅해도 삭제되지 않고 유지됩니다. 따라서 사용자가 다시 해당 웹 페이지를 방문했을 때, 저장된 데이터를 불러올 수 있어요.도메인 기반 데이터 저장: 로컬 스토리지에 저장된 데이터는 도메인별로 격리됩니다. 즉, 한 웹 사이트에서 저장한 데이터는 다른 웹 사이.. 2024. 10. 31. [JavaScript] Leaflet를 활용한 OpenStreetMap 지도 출력하기 안녕하세요, 오늘은 Leaflet를 활용하여 OpenStreetMap 지도 출력해보도록 하겠습니다. OpenStreetMap은 전 세계의 지리 정보를 누구나 자유롭게 편집하고 사용할 수 있는 오픈소스 지도 서비스 입니다. OSM 데이터는 지도 앱, 연구 프로젝트, 게임, 물류 시스템 등 여러 방면에서 사용되며, Leaflet, Mapbox, QGIS 같은 다양한 지리 정보 시스템(GIS)에서 쉽게 불러와 사용할 수 있습니다. Leaflet는 웹 애플리케이션에 지도를 추가하고 상호작용을 가능하게 해주는 오픈소스 JavaScript 라이브러리입니다. Leaflet는 가볍고 빠르며 직관적인 API를 제공하여, 복잡한 설정 없이도 지도를 쉽게 웹 페이지에 구현할 수 있습니다. Leaflet를 활용하여 지도.. 2024. 10. 28. 이전 1 2 3 4 ··· 23 다음