HTML5
HTML5는 HTML의 새로운 버전으로 Client Side Technology 기술의 중심이 되는 마크업 언어입니다.
HTML5는 웹 상에서 콘텐츠(content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준입니다.
HTML5는 HTML 4.01, XHTML 1.1 등의 한계점을 극복하는 HTML의 차세대 표준입니다.
HTML5는 오디오, 비디오, 그래픽, 애니메이션 등과 같은 다양한 멀티미디어 요소를 지원합니다. 이전 버전의 HTML은 이러한 요소를 사용할 때 플러그인이나 외부 애플리케이션을 필요로 했지만, HTML5에서는 웹 브라우저 자체에서 이러한 요소들을 지원합니다.
또한, HTML5는 웹 애플리케이션을 오프라인에서도 동작할 수 있게 하는 로컬 스토리지, 웹소켓, 웹워커 등의 기능을 제공합니다. 이러한 기능을 사용하면 웹 애플리케이션이 인터넷에 연결되지 않은 상태에서도 작동할 수 있습니다.
HTML5는 반응형 웹 디자인을 구현하기 위한 기능도 포함하고 있습니다. 반응형 웹 디자인은 다양한 디바이스와 화면 크기에 대응하여 웹 페이지가 자동으로 조정되는 것을 의미합니다.
사용자는 모바일 기기나 태블릿 등에서도 웹 페이지를 편리하게 이용할 수 있습니다. HTML5는 또한 시맨틱 요소를 도입하여 웹 페이지의 구조와 의미를 명확하게 표현할 수 있습니다. 예를 들어, <header>, <nav>, <article>, <section>, <footer>와 같은 태그를 사용하여 웹 페이지의 다양한 부분을 정의할 수 있습니다.
HTML 문법적 특징
HTML5는 다음과 같은 사항들을 모두 문법적으로 허용합니다.
- 태그 이름에 대문자 사용
- 속성값에 따옴표 생략
- 속성값 생략
- 빈 태그의 종료 태그(/) 생략
HTML5 주요기능
- Device AccessDEVICE ACCESS : 카메라, 동작센서 등의 H/W 기능을 웹에서 직접적으로 제어
- CONNECTIVITY(Web Socket) : 웹 (클라이언트)에서 서버 측과 직접적인 양방향 통신 가능
- 3D, GRAPHICS & EFFECTS : 다양한 2차원 및 3차원 그래픽 기능을 지원
- Styling Effects(CSS3) : 글씨체, 색상, 배경 등 다양한 스타일 및 이펙트 기능 제공
- MULTIMEDIA : 비디오 및 오디오 기능을 자체적으로 지원
- OFFLINE & STORAGE : 네트워크 미지원 환경에서도 웹 이용을 가능하게 함
- Geo-Location: GPS없이도 단말기의 지리적인 위치 정보를 제공
- SEMANTICS : 웹 자료에 의미를 부여하여 사용자 의도에 맞는 맞춤형 검색 제공
HTML5 호환성 디자인 원칙
- 콘텐츠의 호환성 : HTML5 이전 버전으로 제작한 콘텐츠도 문제없이 이용 가능해야 한다.
- 이전 브라우저와의 호환성 : HTML5 가 지원되지 않는 이전 버전의 브라우저에서도 이용 가능해야 한다.
- 이용 방법의 호환성 : 기존에 HTML 태그 사용법을 최대한 사용가능하도록 해야 한다.
- 기능의 재사용 : 각각의 브라우저에서만 사용 가능한 기능들을 통합하여 공통적으로 사용할 수 있어야 한다.
- 혁신보다는 발전을 우선 : HTML5는 새로운 언어를 구현하는 것이 아니므로 이미 사용 중인 HTML을 보다 사용하기 쉽도록 재구성하도록 한다.
HTML5 문서의 기본구조
간단해진 Doctype 선언
예시
<!DOCTYPE html>
간단해진 문자셋(character set)의 선언
HTML5에서의 기본 문자 인코딩(character encoding) 방식은 UTF-8입니다.
HTML5 이전
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5
<meta charset="UTF-8">
HTML5에서 추가된 요소 및 타입
- 의미(semantic) 요소 : <header>, <nav>, <main>, <section>, <aside>, <article>, <footer>, <figure>
- 멀티미디어 요소 : <video>, <audio>
- 그래픽 요소 : <canvas>, <svg>
- input 요소의 타입 : number, date, time, calendar, range
'HTML > HTML5' 카테고리의 다른 글
| HTML5 독학하기 HTML5 input 요소와 속성 (0) | 2023.06.10 |
|---|---|
| HTML5 독학하기 HTML5 의미 요소 (0) | 2023.06.01 |
댓글