HTML5의 새로운 기능들 소개

HTML5는 웹 개발자들에게 다양한 새 기능을 제공합니다. 상세 내용은 아래와 같습니다.

 

향상된 멀티미디어 지원

HTML5에서는 비디오와 오디오를 쉽게 삽입하고 재생할 수 있는 태그를 제공합니다.

• <video> 태그: 비디오 파일을 직접 삽입할 수 있습니다.

<video src="video.mp4" controls></video>

 

• <audio> 태그: 오디오 파일을 삽입하고 재생할 수 있습니다.

<audio src="audio.mp3" controls></audio>

 

이러한 멀티미디어 태그들은 추가적인 플러그인 없이도 브라우저에서 바로 재생 가능하며, 다양한 포맷을 지원합니다.

 

그래픽과 애니메이션

HTML5는 2D 그래픽과 애니메이션을 지원합니다.

 

• <canvas> 태그: 자바스크립트와 결합하여 동적인 그래픽을 그릴 수 있는 도구를 제공합니다.

<canvas id="myCanvas"></canvas>

 

• SVG(Scalable Vector Graphics): XML 기반의 벡터 그래픽을 지원합니다. (해상도에 영향을 받지 않아서, 이미지 깨짐 현상이 없음)

 

새로운 폼 요소

HTML5에서는 form의 기능이 향상되었습니다.

• 새로운 입력 타입 추가: email, date, url, number 등등..
• placeholder 속성 제공

<input type="text" placeholder="Enter your name">

 

• 자동 완성 property: autocomplete과 같이 자동 완성 속성을 제공해줍니다.

<input type="text" autocomplete="on">

 

저장공간(Storage)

기존의 쿠키보다 더 많은 데이터를 브라우저에 저장할 수 있는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)를 제공해줍니다.

 

• Local Storage: 영구적으로 데이터를 저장해주는 저장소입니다. (따라서, 브라우저를 닫았다가 다시 열어도 데이터가 남아있음)

localStorage.setItem('key', 'value');
localStorage.getItem('key');

 

• Session Storage: 세션이 종료될 때까지 데이터 저장하는 저장소입니다. (탭을 닫으면 session storage의 데이터는 모두 삭제됨)

sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');

 

새로운 구조적 요소

HTML5는 컨텐츠의 구조를 명확히 하기 위해 새로운 시맨틱 태그들이 추가되었습니다.

• <header>: 문서나 섹션의 머리글을 정의할 때 사용합니다.
• <footer>: 문서나 섹션의 바닥글을 정의할 때 사용합니다.
• <article>, <section>: 독립적인 콘텐츠를 정의할 때 사용합니다.
• <nav>: 내비게이션 링크를 정의할 때 사용합니다.
• <aside>: 주 콘텐츠와 관련된 콘텐츠를 정의할 때 사용합니다.

 

웹 애플리케이션 API

HTML5는 다양한 API를 통해 웹 애플리케이션 개발을 용이하게 합니다.

• Geolocation API: 사용자의 위치 정보를 가져올 수 있습니다.

navigator.geolocation.getCurrentPosition((pos) => {
    alert("현재 위치: " + pos.coords.latitude + ", "+ pos.coords.longitude);
});

 

• Web Worker API: 백그라운드 스크립트를 실행하여, 페이지 성능을 향상시키거나 다양한 작업을 수행할 수 있습니다..
• Web Sockets: 웹 소켓 서버와 양방향 통신을 가능하게 해줍니다.

 

결론

HTML5는 웹 개발자들에게 더 나은 도구와 기능을 제공합니다. 멀티미디어, 그래픽, 데이터 저장, 구조적 요소 및 다양한 API 지원을 통해 더욱 동적이고 상호 작용할 수 있는 웹 애플리케이션을 구축할 수 있게 도와줍니다.