반응형
<사진 html 파일 생성>
1. 무료 html 이미지 파일 생성 사이트 활용
무료 이미지 호스팅 / 이미지 업로드
이미지를 업로드 하고공유해보세요. 원하는 곳 어디든 끌어놓기로 이미지를 바로 업로드해보세요.(이미지당 32 MB 가능) 다이렉트 링크, BBCode 및 HTML 미리보기등을 제공해드립니다.
imgbb.com
2. 360도 사진 업로드
3. html 생성
이미지 자동삭제 기간 설정 후 업로드 클릭
퍼가기에서 'HTML 원본 이미지 링크'로 보기
이중에서 파랑색으로 표기되어 있는 부분 발췌
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A simple example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
<style>
#panorama {
width: 600px;
height:400px;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
"type": "equirectangular",
"panorama": "https://i.ibb.co/pWz7qW0/IMG-20230818-103403-00-056-Pure-Shot.jpg",
"autoLoad": true
});
</script>
</body>
</html>
빨강색으로 표기되어 있는 부분에 붙여넣기 하여 사용하기
메모장으로 저장한 다음 '파일 > 다른이름으로 저장' 후 파일이름 .html 확장자로 작성하고 파일형식은 '모든 문서'로 저장
반응형
'LIFE > How to do' 카테고리의 다른 글
| Fn키 고정 해제하는 방법 (0) | 2024.03.19 |
|---|---|
| 교보문고 ebook 무료로 대출하기! (0) | 2023.12.29 |
| 인스타360 편집 프로그램 다운로드 (1) | 2023.09.10 |
| 앱으로 환전하기. 국민은행 환전 우대 90% (0) | 2023.08.23 |
| 통신판매업 변경 신고 방법 (2) | 2023.07.21 |
