HTML5는 웹 브라우저를 단순한 문서 뷰어가 아닌 강력한 애플리케이션 플랫폼으로 만들어주는 다양한 표준 HTML5 API를 내장하고 있습니다.
1. 드래그 앤 드롭 (Drag and Drop) API
HTML 요소를 마우스로 끌어다 다른 구역에 놓는 인터페이스입니다.
<!-- draggable="true" 속성 지정 -->
<div id="drag-item" draggable="true">나를 끌어다 놓으세요</div>
<div id="drop-zone">여기에 드롭하세요</div>
<script>
const item = document.querySelector('#drag-item');
const zone = document.querySelector('#drop-zone');
item.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
});
zone.addEventListener('dragover', (e) => e.preventDefault()); // 드롭 허용
zone.addEventListener('drop', (e) => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
zone.appendChild(document.getElementById(id));
});
</script>
2. 위치 정보 (Geolocation) API
사용자의 동의를 얻어 현재 장치의 위도(Latitude)와 경도(Longitude) 위치 정보를 파악합니다.
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(
(position) => {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log("위도: " + lat + ", 경도: " + lng);
},
(error) => {
console.error("위치 정보를 가져올 수 없습니다:", error.message);
}
);
}
3. HTML5 API 활용 시 보안 주의사항
- HTTPS 필수 정책: Geolocation 위치 정보 등 사용자의 개인정보와 연관된 최신 HTML5 API는 보안 연결인 HTTPS 환경에서만 작동하도록 제한됩니다.
4. 자주 묻는 질문 (Q&A)
Q. Geolocation API는 위치를 어떻게 알아내나요? A. 스마트폰 등 GPS 장치가 탑재된 기기는 GPS 신호를 이용하고, PC 환경에서는 주변 Wi-Fi 신호와 IP 주소를 기반으로 대략적인 위치 정보를 측정합니다.