#4 HTML5의 새로운 기능

HTML5는 웹 개발의 혁신을 이끈 강력한 도구입니다. 기존 HTML의 단점을 보완하고 새로운 기능을 추가하여 웹 페이지를 더욱 풍부하고 동적으로 만들 수 있도록 해줍니다.

1. 멀티미디어 지원 강화

HTML5 이전에는 웹 페이지에 동영상이나 음악을 삽입하려면 플러그인이 필요했습니다. 하지만 HTML5에서는 <video>와 <audio> 태그를 통해 별도의 플러그인 없이 웹 페이지에서 바로 멀티미디어 콘텐츠를 재생할 수 있습니다.

HTML

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

 

 

 

2. 캔버스 (Canvas)

캔버스는 HTML5에서 새롭게 추가된 요소로, 자바스크립트를 이용하여 동적인 그래픽을 그릴 수 있는 공간을 제공합니다. 게임, 데이터 시각화, 이미지 편집 등 다양한 분야에서 활용됩니다.

 

<canvas id="myCanvas" width="200" height="100"></canvas>

 

 

3. 웹 저장소 (Web Storage)

웹 저장소는 쿠키를 대체하여 웹 페이지에서 데이터를 저장하고 불러올 수 있는 기능입니다. 로컬 스토리지(localStorage)는 데이터를 영구적으로 저장하며, 세션 스토리지(sessionStorage)는 브라우저를 닫으면 데이터가 삭제됩니다.

JavaScript

localStorage.setItem("username", "coder");
let username = localStorage.getItem("username");

 

 

4. 지오로케이션 (Geolocation)

지오로케이션을 이용하면 사용자의 위치 정보를 얻어 맞춤형 서비스를 제공할 수 있습니다. 예를 들어, 사용자의 위치를 기반으로 주변 맛집을 추천하거나 지도를 표시할 수 있습니다.

JavaScript

navigator.geolocation.getCurrentPosition(success, error);

 

 

5. 오프라인 애플리케이션 캐시 (Application Cache)

오프라인 애플리케이션 캐시를 이용하면 웹 애플리케이션을 오프라인 상태에서도 실행할 수 있습니다. 사용자가 한 번 웹 페이지에 접속하면 필요한 파일들이 캐시되어 다음부터는 인터넷 연결 없이도 웹 페이지를 이용할 수 있습니다.

6. 새로운 시맨틱 태그

HTML5에서는 <header>, <nav>, <section>, <article>, <footer> 등과 같은 새로운 시맨틱 태그를 도입하여 웹 페이지의 구조를 더욱 명확하게 표현할 수 있도록 했습니다. 이러한 시맨틱 태그는 검색 엔진 최적화(SEO)에도 도움이 됩니다.

7. 폼 요소 개선

HTML5에서는 <input> 태그의 type 속성을 다양하게 활용하여 이메일, URL, 날짜, 시간 등 다양한 형식의 입력을 받을 수 있습니다. 또한, 입력 값을 검증하는 기능도 강화되었습니다.

8. 웹 워커 (Web Worker)

웹 워커는 메인 스레드와 별도로 실행되는 스크립트로, 복잡한 계산이나 네트워크 요청과 같은 작업을 백그라운드에서 처리하여 웹 페이지의 응답성을 높일 수 있습니다.