HTML5 - HTML5

HTML5 

TML5는 웹 상에서 콘텐츠를 구조화하고 표현하기 위한 마크업 언어입니다. HTML5는 이전의 HTML 버전들과 비교하여 새로운 기능과 요소를 도입하며, 기존의 기능을 개선하거나 제거하는 등의 변화가 있었습니다.

 

HTML5의 가장 큰 특징은 멀티미디어 처리를 위한 <video>, <audio>, <canvas> 요소를 포함하여 네이티브적으로 멀티미디어와 그래픽 콘텐츠를 처리할 수 있다는 점입니다. 이전의 HTML 버전에서는 CSS나 JavaScript에 의존하여 구현되던 기능들이 <summary>...</summary>와 <details>...</details> 요소를 통해 네이티브적으로 확장 가능한 섹션으로 구현되었습니다.

 

또한, HTML5는 상호 운용 가능한 구현을 촉진하기 위해 상세한 처리 모델을 포함하고 있으며, 문서에 사용 가능한 마크업을 확장하고 개선하며 복잡한 웹 애플리케이션을 위한 마크업과 응용 프로그래밍 인터페이스(API)를 도입했습니다.

 

기존의 HTML과의 차이점으로는 다음과 같습니다:

 

새로운 요소와 기능: HTML5는 <video>, <audio>, <canvas>와 같은 새로운 요소들을 도입하여 멀티미디어 처리와 그래픽 콘텐츠 구현이 간편해졌습니다.

상호 운용성 개선: HTML5는 구현 간의 상호 운용성을 높이기 위해 처리 모델을 상세하게 정의하여 일관성을 확보하였습니다.

복잡한 웹 애플리케이션 지원: HTML5는 복잡한 웹 애플리케이션을 위한 새로운 마크업과 API를 도입하여 풍부한 기능을 제공합니다.

플랫폼 호환성: HTML5는 저전력 장치 등을 고려하여 개발된 기능들을 포함하고 있어 크로스 플랫폼 모바일 애플리케이션에 적합합니다.

---

HTML5 문법 특징

• 태그 이름에 대문자 사용
• 속성값에 따옴표 생략
• 속성값 생략
• 빈 태그의 종료 태그(/) 생략

---

HTML5 추가된 자바스크립트 API

• Geolocation(위치 정보) : 사용자의 현재 위치 정보를 가져올 수 있는 기능입니다. 이를 활용 하여 지도, 위치 기반 서비스 등을 구현할 수 있습니다.
• Drag and Drop : 요소를 마우스로 끌어다가 다른 위치로 이동시킬 수 있는 기능입니다. 이를 활용하여 사용자 친화적인 인터페이스를 구현하거나 파일 업로드. 드래그 앤 드롭 게임 등을 만들 수 있습니다.
• Web Storage (웹 저장소) : 클라이언트 측에서 데이터를 저장할 수 있는 기능입니다. 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)로 구분되며, 이를 활용하여 웹 애플리케이션 상태나 사용자 데이터를 임시 또는 영구적으로 저장할 수 있습니다.
• Application Cache : 웹 애플리케이션의 자원을 로컬에 저장하여 오프라인 상황에서도 접속할 수 있도록 해주는 기능입니다. 사용자가 처음 접속한 후에는 인터넷 연결이 없어도 웹 애플리케이션을 이용할 수 있습니다.
• Web Worker : 백그라운드 스레드에서 스크립트를 실행할 수 있는 기능입니다. 이를 활용하여 메인 스레드에서 실행 중인 작업과 별개로 긴 시간이 걸리는 작업을 처리할 수 있습니다.
• Server Sent Events(서버 전송 이벤트) : 서버에서 클라이런트로 실시간 이벤트를 전송하는 기능입니다. 이를 활용하면 서버의 업데이트나 알림 등을 실시간으로 클라이언트에게 전달 할 수 있습니다.

---

HTML5 추가된 요소 및 타임

• 의미(semantic) 요소 : HTML5에서 추가된 요소들로, 콘텐츠의 의미와 구조를 명확하게 정의하는 역할입니다.종류에는 <header>, <nav>, <article>, <section>, <footer> 등이 있으며, 이를 사용하여 웹 페이지의 구조를 표현하고 검색 엔진이나 스크린 리더 등에서 콘텐츠를 잘 이해하도록 도와줍니다.
• 멀티미디어 요소 : HTML5는 멀티미디어 콘텐츠를 쉽게 삽입할 수 있는 다양한 요소를 제공합니다. <audio> 요소는 음악이나 오디오 클립을 재생하고, <video> 요소는 동영상을 <img> 요소를 사용하면 이미지도 삽입할 수 있습니다. 이러한 요소들은 웹 페이지에서 멀티미디어 콘텐츠를 표현하고 다양한 브라우저에서 호환성을 제공합니다
• 그래픽 요소 : 그래픽 요소는 웹 페이지에 그래픽 콘텐츠를 표현하는데 사용됩니다. HTML5에서는 <canvas> 요소를 사용하여 그래픽을 그릴 수 있고, Scalable Vector Graphics(SVG)를 지원하기 위해 <svg> 요소도 추가되었습니다. <canvas>를 사용하면 JavaScript로 <svg>를 사용하면 XML 기반의 벡터 그래픽을 생성할 수 있습니다.
• input 요소의 타입 : HTML5에서는 다양한 입력 요소를 지원합니다. <input> 요소의 type 속성을 통해 텍스트 입력, 비밀번호 입력. 숫자 입력. 날짜 선택. 이메일 입력 등을 구현할 수 있습니다. 이를 통해서 사용자로부터 데이터를 입력 받을 수 있고, 입력받은 데이터의 유효성을 검증하는 기능도 제공합니다.