heenam
HTML5 위치 정보와 드래그 드롭 본문
SVG
HTML5는 인라인 SVG를 지원한다. SVG는 XML-기반의 벡터 이미지 포맷이다. SVG는 웹에서 벡터-기반의 그래픽을
정의하는데 다용된다. SVG는 상호작용과 애니메이션도 지원한다.
SVG 이미지와 관력된 동작은 XML 텍스트 파일에 저장된다. 이것은 SVG파일이 검색, 인덱싱, 압축이 가능하다는 것을
의미한다.
SVG의 장점
그래픽은 픽셀이 모여서 그림을 이루는 방식이다. 간단하고 직관적이지만 확대/ 축소 시에 품질이 나빠지는 결정적인
약점이 있다. 벡터 그래픽은 직선이나 곡선, 원, 사각형과 같은 도형을 이용하여 그래픽을 정의하는 방법이다.
벡터 그래픽은 그리는 데 시간이 많이 걸리지만 확대, 축소해도 품질의 저하가 없다.
JPEG나 GIF 같은 이미지 형식에 비하여 SVG의 장점을 정리하여 보면 다음과 같다.
+ SVG그래픽은 확대되거나 크기가 변경되어도 품질이 손상되지 않는다.
+ SVG파일에서 모든 요소와 속성은 애니메이션이 가능하다.
+ SVG 이미지는 어떤 텍스트 에디터로도 생서하고 편집할 수 있다.
+ SVG이미지는 검색이 가능하고 인덱싱, 스크립트화, 압축이가 능하다.
+ SVG 이미지는 크깁 녀경이 가능하다.
+ SVG 이미지는 어떤 해상도의 프린터에도 고품질로 출력될 수 있다.
+ SVG 이미지는 품직의 저하 없이 확대할 수 있다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="red">
</svg>
</body>
</html>
SVG 코드는 <svg> 태그로 시작한다. xmlns 속성은 SVG이름 공간을 정의한다.
공통 속성
stroke, stroke-width = 도형의 윤곽선이 표시
fill = 도형을 채우는 색상
<circle>= 원 태그
cx, cy = 원의 중심 좌표
r = 원의 반지름 좌표
<rect> = 사각형 태그
width, height = 사각형을 그릴때 가로 세로를 나타냄
<ellipse> = 타원형 태그
cx, cy = 원의 중심 좌표
rx, ry = 원의 반지름 좌표
<line> = 직선 태그
x1, y1 = 시작 좌표
x2, y2 = 끝 좌표
<polyline> = 선을 여러게 그리는 폴리라인 태그
points = 원하는 선의 개수많은 x, y 좌표를 숫자로만 적는다. ex) points="x1 y1 x2 y2 x3 y3 ..."
<polygon> = 다각형 태그
points = polyline 과 동일하게 입력
<text> = 텍스트 태그
x, y = 박스길이
font-family = 폰트이름
font-size = 글자 사이즈
맨 마지막 텍스트 태그 끝나기 전에 입력할 텍스트 적기!
SVG 애니메이션
SVG는 XML-기반이기 때문에 SVG의 모든 요소가 SVG DOM 안에 있다. 따라서 요소에 이벤트 처리를 붙일 수 있고,
각 요소에 애니메이션을 지정할 수도 있다.
SVG를 이용한 애니메이션은<animate> 욧를 통하여 구현된다. 단 인터넷 익스플로러에서는 아직 지원하지 않는다.
구글에서 실행하여 보자.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="100" height="100" style="fill: red">
<animate attributeName="height" from="0" to="100" dur="10s"
</svg>
</body>
</html>
앞의 코드에서 우리는 <rect> 요소 안에 <animate>를 추가하였다. <animate> 요소는 다음과 같은 속성을 포함한다.
+ attributeName - 이 속성은 애니메이션에서 변화되는 속성을 지정한다.
+ from - 속성이 시작되는 값을 지정한다.
+ to - 속성이 끝나는 값을 지정한다. 이 예제에서 사각형의 높이는 증가된다.
+ dur - 이 속성은 애니메이션의 지속 시간을 지정한다. 예를 들어, 01:30은 1분 30초 동안을 나타낸다.
2s는 2초, 2h은 2시간을 의미한다.
만약 2개 이상의 속성을 동시에 변화시키려면 다음과 같이 한다.
드래그와 드롭
드개르와 드록은 애플 컴퓨터나 윈도우에서 아주 많이 사용하는 사용자 인터페이스 중의 하나이다.
사용자는 객체를 마우스로 끌어서 다른 애플리케이션에 놓을 수 있다.
HTML5는 드래그와 드롭 기능을 HTML5 표준의 일부로 지원한다. HTML5에서는 어떤 객체도 드래그할 수 있다.
HTML5에서는 자바스크립트를 이용해 드래그와 드롭 과정에서 발생하는 이벤트를 처리하게 된다.
끌어다 놓기 과정
끌어다 놓기 과정에서는 많은 이벤트가 발생한다. 이들 이벤트를 전부 이해하였으면 드래그와 드롭을 전부 이해한
것이다.
제일 먼저 해야 할 작업은 드래그 되는 요소의 속성 draggable을 true로 설정하는 일이다.
graggalble 속성이 false로 되어 있으면 드래그할 수 없다. 따라서 요소를 정의할 때, draggable을 true로 설정해야 한
다. 이미지 요소 같으면 다음과 같이 설정한다.
<img id="img1" src="tv.png" draggable="true">이후부터는 이벤트만 처리해주면 된다. 이벤트를 발행하는 순서대로 살펴보자.
dragstart 이벤트
dragstart 이벤트는 사용자가 드래그를 시작할 때, 발생한다. 이때 해야 하는 가장 중요한 작업은 dataTransfer 객체에
setData() 호출을 통하여 데이터를 설정하는 작업이다. 즉 어떤 형식의 어떤 데이터가 이동되는지를 설정하는 것이다.
dataTransfer 객체가 이동되는 데이터를 가지고 간다. 만약 텍스트 형식의 id를 보낼 거라면 다음과 같이 작성한다.
function handleDragStart(e)
{
e.dataTransfer.setDate("Text", e.target.id);
}이 경우 데이터 형식이 "Text"이고 이동되는 데이터는 드래그되는 요소의 id이다.
drag 이벤트
드래그 하는 도중에 계속해서 발생하는 이벤트이다. 사용자가 마우스 버튼을 누른 상태에서 계속 이동시키면 드래그
소스 객체에서 drag 이벤트가 발생한다. 이 이벤트가 발생했을 때 반드시 수행해야 하는 작업은 없다.
dragenter 이벤트
마우스로 드래그하다가 새로운 요소 안으로 들어가면 dragenter 이벤트가 발생한다.
이 이벤트가 발생하면 새로운 요소가 타켓 요소인지를 검사해서 타겟 요소이면 drop 이벤트를 처리하는 콜백 함수를
설정할 수 있다. 만약 미리 설정하였다면 이 이벤트에서도 할 일은 없다.
dragleave 이벤트
마우스로 드래그하다가 요소를 빠져나가면 dragleave 이벤트가 발생한다. 역시 특별한 경우가 아니면 처리할 필요는
없다.
dragover 이벤트
dragover 이벤트는 드래그 동작 도중에 마우스가 다른 요소 위에 있다는 것을 의미한다. 이 이벤트는 마우스가 현재
놓여 있는 요소에서 발생한다. 만약 타켓 요소에서 dragover 이벤트가 발생하였다면 드롭을 허용하는 처리를 해야
한다. 디폴트로 요소 위에서 다른 요소가 드롭될 수 없다. 따라서 드롭을 허용하려면, 이러한 디폴트 처리를 방지해야
한다. 디폴트 처리를 방지하려면 event.preventDefault() 메서드를 호출하면 된다.
function allowDrop(e) {
e.preventDefault();
}drop 이벤트
반드시 처리해야 하는 drop 이벤트는 사용자가 마우스 버튼을 놓았을 때, 발생한다. dataTransfer 객체에서 getData()
메서드를 이용해 필요한 데이터를 꺼내면 된다.
웹 페이지 위에 상품을 드래그하여 쇼핑 카트에 넣을 수 있도로 웹 페이지를 작성하여 보자.\
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<style media="screen">
#shopping_cart {
width: 450px;
height: 100px;
padding: 10px;
border: 1px dotted red;
}
</style>
<script>
function allowDrop(e) {
e.preventDefault();
}
function handleDragStart (e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData("Text", e.target.id); <-드래그에 id를 싣는다.
}
function handleDrop(e) {
e.preventDefault();
var src = e.dataTransfer.getData("Text"); <- 드래그에서 데이커를 꺼내서
e.target.appendChild(document.getElementById(src)); 자식노드로 추가한다.
}
</script>
</head>
<body>
<p>원하는 물건을 끌어서 옮기세요.</p>
<div id="shopping_cart"
ondrop="handleDrop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="img1" src="computer.jpg" draggable="true" ondragstart="handleDragStart(event)" width="150" height="100">
<img id="img2" src="computer2.jpg" draggable="true" ondragstart="handleDragStart(event)" width="150" height="100">
<img id="img3" src="computer3.jpg" draggable="true" ondragstart="handleDragStart(event)" width="150" height="100">
</body>
</html>
HTML5 위치 정보
위치 정보는 자신의 위치를 웹 사이트와 공유하는 것이다. 우리가 위치를 공개하면 지도에서 자신의 위치를 볼 수 있으
며, 현재 지역의 날씨, 유명한 맛집 등의 정보를 제공받을 수 있다. 스마트폰에서는 GPS가 있어서 더욱 정확한 위치 정
보를 받을 수 있으며 이것을 바탕으로 내비게이션 애플리케이션도 얼마든지 작성할 수 있다.
위치 정보는 navigator 객체가 가지고 있는 geolocation 객체를 통하여 얻을 수 있다. 위치 정보를 가지고 있는 변수는
다음과 같이 생성할 수 있다.
var geolocation = navigator.geolocation;getCurrentPosition() 메서드
getCurrentPosition() 메서드는 위치 정보를 가져올 때 사용하는 메서드이다. 위치 정보를 처리하는 함수를 인수로 전달
된다. 예를 들어 다음과 같이 사용할 수 있다.
function getLocation() {
var geolocation = navigator.geolocation;
geolocation.getCurrentPosition(showLocation, errorHandler);
}여기서 showLocation()은 위치 정보를 처리하는 콜백 메서드이고 errorHandler()는 오류를 처리하는 콜백 메서드이다.
오류를 처리하는 메서드는 옵션이므로 없어도 된다. 위치 정보를 추출하는 데 상당히 시간이 걸리기 때문이다.
콜백 메서드 showPosition()은 다음과 같이 정의 할 수 있다.
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
}여기서 position 인수가 결국은 위치 정보를 가지고 있는 객체이다. position 인수는 Position 객체의 변수이다.
사용자의 위치 정보 얻기
HTML5에서는 GetCurrentPosition() 메서드를 사용하여 사용자의 위치를 얻을 수 있다.
아래의 예제는 사용자 위치의 경도 및 위도를 반환하는 간단한 지리적 위치 예제이다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="getGeolocation()">위치 정보 얻기</button>
<div id="target"></div>
<script>
var myDiv =document.getElementById('target');
function getGeolocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showLocation);
}
}
function showLocation(location) {
myDiv.innerHTML = "(위도: " + location.coords.latitude +", 경도: "+ location.coords.longitude +")"
}
</script>
</body>
</html>
지도에 위치 표시하기
지도에 결과를 표시하기 위해서는 구글 맵처럼 위도 및 경도를 사용할 수 있는 지도 서비스에 대한 액세스가 필요하다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="getGeolocation()">지도보이기</button>
<div id="target"></div>
<script>
var myDiv =document.getElementById('target');
function getGeolocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showGeolocation);
}
}
function showGeolocation(position) {
var pos = position.coords.latitude +","+ position.coords.longitude;
var url = "http://maps.googleapis.com/maps/api/staticmap?center="+pos+"&zoom=14&size=500x300&sensor=false";
window.open(url);
}
</script>
</body>
</html>
HTML5 웹 워커
웹 워커는 자바스크립트에 백그라운드에서 실행되는 스레드를 도입한 것이다. 웹 워커는 페이지의 성능에 영향을 주지
않고 백그라운드에서 실행되는 자바 스크립트이다. 시간이 많이 걸리는 작업을 웹 워커에게 위임한다면 사용자는 웹
페이지에서 자신이 우너하는 작업을 계속할 수 있다.
웹 워커 예제
웹 워커의 가장 간단한 사용은 사용자 인터페이스를 방해지 않고 계산-중심적인 작업을 하는 것이다.
예를 들어 가장 큰 소수를 지속적으로 찾는 작업을 웹 워커로 작성하여 보자. 일반적으로 웹 워커는 별도의 자바스크립
트 파일로 작성한다. 먼저 worker.js 파일을 다음과 깉이 작성한다.
var n = 1;
search: while (true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
postMessage(n);
}
이제는 웹 워커를 사용하는 웹 페이지를 작성하여 보자
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>웹 워커 예제</title>
</head>
<body>
<button onclick="startWorker()">웹 워커 시작</button>
<button onclick="stopWorker()">웹 워커 종료</button>
<p>현재까지 발견된 가장 큰 소수는
<output id="result"></output>
</p>
<script>
var w;
function startWorker() {
if (typeof (Worker) !== "undefined") {
if (typeof (w) == "undefined") {
w = new Worker("worker.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
else {
document.getElementById("result").innerHTML = "웹 브라우저가 웹 워커를 지원하지 않음";
}
}
function stopWorker() {
w.terminate();
}
</script>
</body>
</html>
웹 워커 용도
영상 처리 - 캔버스나 비디오 요소에서 추출된 데이터를 사용해 어떤 영상 처리를 수행할 수 있다.
대용량 데이터 처리 - XMLHTTPRequest 호출 후에 파싱해야 할 대용량 데이터가 존재하는 경우에 사용할 수 있다.
텍스트 분석 - 사용자가 입력하는 즉시 텍스트를 사전에서 검색한다. 자동적인 오류 수정등이 가능하드.
데이터베이스 요청 동시 수행 - 로컬 데이터베이스에 대한 요청을 동시에 수행한다.
'Wep Programming > HTML5' 카테고리의 다른 글
| 3. HTML5 멀티미디어와 입력 양식 (0) | 2020.05.22 |
|---|---|
| 2. HTML5 기본 요소 (0) | 2020.05.14 |
| 1. 기초사항 (0) | 2020.05.14 |