본문 바로가기
HTML CSS

[CSS] map 추가

by jyee 2023. 3. 22.
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title><!-- 구글 사이트 MAP가져옴 -->
<style type="text/css">
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>


<script type="text/javascript" 
		src="//dapi.kakao.com/v2/maps/sdk.js?appkey=1a9697221030afd512e6920be5711983"></script>
<script type="text/javascript">
window.onload=function() {
	var position = new daum.maps.LatLng(37.49950425406456, 127.02910342133228);
	var container = document.getElementById("map"); //지도를 표시할 div
	var options = {
			center: position,
			level: 3, //지도의 확대 레벨
			//draggable: false //마우스 드래그하여 확대/축소가 안된다
	};
	var map = new daum.maps.Map(container, options);
	
	var marker = new daum.maps.Marker({
		position: position //지도 중심 좌표에 마커를 생성
	});//마커 생성
	marker.setMap(map); //마커표시
}
</script>
</body>
</html>


<!-- 
1. 뷰포트 선언
   <meta name="viewport"
2. 컨텐트 선언
   content="width=device-width (디바이스 크기에 맞추겠다고 선언)
            initial-scale=1.0 (초기 크기 스케일 설정)
            minimum-scale=1.0 (최소 크기 설정 / 범위: 0~10.0)
            maximum-scale=1.0 (최대 크기 설정 / 범위: 0~10.0)
            user-scalable=no (사용자 기기 확대기능 사용 유/무 설정, yes/no)
            
Kakao Maps API 
- 다양한 기능과 소스를 알려준다
https://apis.map.kakao.com/web/sample/enableDisableZoomInOut/            
  -->
  
<!-- 
1. 구글 - [위도 경도] 검색 - 위도경도 찾기
http://map.esran.com

2. GPS 좌표
https://coordinates-gps.gosur.com/ko/?ll=37.58017836585978,126.97734714607873&z=16.240494476606926&t=streets
 -->

3월 25일에 배운 내용

분명 수업 했을 때는 엄청 쉽다고 느꼈는데 나는 다른 사람한테 설명 조차 못하는 사람이였을뿐이고...

 

그래서 뷰포트가 뭔데..

뷰포트란

모바일 브라우저들은 viewport로 알려진 가상의 window상에 페이지를 렌더링 합니다. 
즉, 화면 Display상의 표시 영역을 뜻합니다. 
 
뷰포트를 선언하면 때 viewport를 설정하면 다양한 모바일 기기에서도 페이지의 너비나 화면 배율을 설정할 수 있습니다.
그래서 뷰포트를 선언하는 것
사용방법
 
 
head 태그 사이에 다음을 코드로 입력합니다.
 
기본적으로 데스크탑 브라우저에서는 viewport 메타 태그를 사용하지 않기 때문에 무시됩니다.
 
 
 
 
 
 
1. viewport의 속성
 
 
  • width: viewport의 가로 크기를 조정합니다. 일반적인 숫자값이 들어 갈 수도 있고, device-width와 같은 특정한 값을 사용할 수도 있습니다. device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미합니다.
     
  • height : viewport의 세로 크기를 조정합니다.
  • initial-scale : 페이지가 처음 로딩될 때 줌 레벨을 조정합니다. 값이 1일때는 CSS 픽셀과 기기종속적인 픽셀 간의 1:1 관계를 형성합니다.
  • minimum-scale : viewport의 최소 배율값, 기본값은 0.25입니다.
  • maximum-scale : viewport의 최대 배율값, 기본값은 1.6입니다.
  • user-scalable : 사용자의 확대/축소 기능을 설정, 기본값은 yes입니다.
     
 
2. 정의된 속성 값
  • device-width : 기기의 가로 넓이 픽셀 값 (웹페이지의 가로(width) 값은 기기가 사용하는 가로 넓이 값(device-width) 만큼 적용하여 사용하라는 의미)
  • device-height : 기기의 세로 높이 픽셀 값
 
 
3. 주의사항
 
  • content 보다 작은 viewport width/height를 설정하면 무시됩니다.
  • viewport에서 initial-scale을 설정하지 않고 width/height를 설정하면 전체 화면이 표시됩니다.
  • viewport에서 initial-scale도 width/height를 설정하지 않으면 width=980px/height=1091px 이 됩니다.
  • 표시 영역과 contents의 크기가 일치하지 않을때 initial-scale을 설정하면 의도하지 않은 layout이 발생합니다.
ㄴ
  1. 카카오 개발자 페이지 접속하기
    1) 카카오 개발자사이트 (https://developers.kakao.com) 접속
    2) 오른쪽 상단 로그인 버튼을 클릭해 카카오 계정으로 로그인 합니다.
    카카오 계정이 없는 경우 새롭게 계정을 생성합니다.
  2. 내 애플리케이션 만들기
    1) 상단 메뉴에서 내 애플리케이션을 클릭합니다.
    2) 서비스 이용 동의 페이지가 나타나는 경우 필수 항목에 동의하고, 개발자 이름을 입력한 다음
    회원가입 버튼을 클릭해 다음 단계로 넘어갑니다.
    (기존에 서비스 이용 동의한 경우 표시되지 않을 수 있습니다.)
    3) 전체 애플리케이션 페이지가 나타나면, 애플리케이션 추가하기를 클릭합니다.
    4) 앱 아이콘(로고)을 업로드하고, 앱 이름, 회사 이름을 작성합니다.
    5) 저장 버튼을 클릭합니다.
  1. 플랫폼 설정하기
    1) 전체 애플리케이션 목록으로 돌아가면, 새로 추가한 앱을 클릭합니다.
    2) 플랫폼 항목에서 플랫폼 설정하기를 클릭합니다.
    3) Web 항목의 Web 플랫폼 등록 버튼을 클릭합니다.
    4) 운영 중인 사이트 주소(URL)를 입력합니다.
    여러 개의 도메인을 사용하고 계신 경우 모두 입력합니다.
    (예: http://localhost:8080)
    5) 저장 버튼을 클릭해 적용합니다.
  1. 발급 받은 Javascript 키 복사하기
    1) 왼쪽 탭 메뉴에서 앱 키를 클릭합니다.
    2) JavaScript 키 오른쪽 복사 버튼을 클릭합니다.

1. 뷰포트 선언<meta name="viewport">

2. 컨텐트 선언

content="width=device-width (디바이스 크기에 맞추겠다고 선언)

initial-scale=1.0 (초기 크기 스케일 설정)

minimum-scale=1.0 (최소 크기 설정 / 범위: 0~10.0)

maximum-scale=1.0 (최대 크기 설정 / 범위: 0~10.0)

user-scalable=no (사용자 기기 확대기능 사용 유/무 설정, yes/no)

Kakao Maps API

- 다양한 기능과 소스를 알려준다

https://apis.map.kakao.com/web/sample/enableDisableZoomInOut/

-->

 

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; }
</style>
</head>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3161.9576269208715!2d126.974846951133!3d37.5796154640495!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca2c74aeddea1%3A0x8b3046532cc715f6!2z6rK967O16raB!5e0!3m2!1sko!2skr!4v1679454944184!5m2!1sko!2skr" 
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
</html>

<!--

1. 구글 - [위도 경도] 검색 - 위도경도 찾기

http://map.esran.com

 

위도경도 찾기

위도경도 찾기, 미국기준 미세먼지 측정지도, IP 주소확인, 일출일몰 시간, 방문자 위치 분석, 설치 안내

map.esran.com

2. GPS 좌표

https://coordinates-gps.gosur.com/ko/?ll=37.58017836585978,126.97734714607873&z=16.240494476606926&t=streets

 

GPS 좌표

 

coordinates-gps.gosur.com

<!--

1. [구글 맵] 검색 https://www.google.co.kr/maps/?hl=ko

2. 사이트에서 원하는 위치 검색

3. 왼쪽 상단 三 모양을 클릭

4. 지도 공유 또는 퍼가기 클릭

5. 지도퍼가기에서 ifram~으로 시작되는 html 링크 복사

-->

728x90
반응형

'HTML CSS' 카테고리의 다른 글

[tailwind css] 사용법  (0) 2024.07.03
HTML 폼 태그  (1) 2024.01.14
리액트 인강- 자바스크립트  (0) 2023.10.21
[HTML/CSS] 관련 사이트 정보  (0) 2023.03.22

관련글

티스토리툴바