1. HTML5 정의와 배경
**HTML5(HyperText Markup Language version 5)**는 웹 문서의 구조와 의미를 정의하는 마크업 언어로, W3C와 WHATWG에서 표준화했습니다.
주요 목표는 다음과 같습니다:
-
표준화와 호환성 강화
- 기존 HTML4.01과 XHTML의 제한과 브라우저별 호환성 문제를 해결.
<div>와<span>중심의 비의미적 구조에서 벗어나 의미 기반 구조 제공.
-
멀티미디어 지원
<audio>와<video>태그로 플러그인(Flash 등) 없이 미디어 재생 가능.- WebM, MP4 등 다양한 코덱 지원.
-
웹 애플리케이션 강화
- Canvas, SVG, WebGL 등 그래픽 렌더링 기능 내장.
- LocalStorage, SessionStorage, IndexedDB로 클라이언트 측 데이터 저장 가능.
-
모바일 친화적 설계
- 반응형 웹, 터치 이벤트, 웹앱 기능을 기본 지원.
<meta viewport>와 CSS3 미디어 쿼리와 결합 가능.
2. 구조적 변화와 시맨틱 태그
HTML5는 **의미 기반 구조(Semantic Web)**를 지향합니다.
| 태그 | 역할 |
|---|---|
<header> | 문서 또는 섹션의 머리말 |
<nav> | 내비게이션 링크 모음 |
<main> | 문서의 핵심 콘텐츠 |
<section> | 주제별 콘텐츠 블록 |
<article> | 독립적 재사용 가능한 콘텐츠 단위 |
<aside> | 보조 콘텐츠, 사이드바 |
<footer> | 문서/섹션 하단 정보 |
<figure> / <figcaption> | 이미지 + 설명 |
<mark> | 강조 표시 |
<time> | 날짜와 시간 표기 |
장점:
- SEO(Search Engine Optimization) 향상
- 스크린 리더, 접근성(ARIA) 개선
- CSS 및 JS와 결합 시 DOM 구조 이해도 증가
3. 멀티미디어와 그래픽 처리
3.1 오디오/비디오
<video controls autoplay loop>
<source src="movie.mp4" type="video/mp4">
브라우저가 비디오 태그를 지원하지 않습니다.
</video>- 속성:
controls,autoplay,loop,muted,preload - JavaScript API:
play(),pause(),currentTime,volume제어 가능.
3.2 Canvas
- 픽셀 단위 2D 그래픽 렌더링
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);- 애니메이션, 게임, 데이터 시각화 활용
- WebGL과 결합 시 3D 렌더링 가능
3.3 SVG
- 벡터 기반 그래픽, 확대/축소 시 품질 손실 없음
- DOM과 결합 가능 → JS를 통한 동적 제어 가능
4. 폼(Forms)과 입력 강화
HTML5는 사용자 입력 검증과 데이터 타입을 브라우저에서 직접 처리하도록 확장했습니다.
| 입력 타입 | 기능 |
|---|---|
email | 이메일 형식 검사 |
url | URL 형식 검사 |
number | 숫자 입력, 최소/최대 값 지정 가능 |
range | 슬라이더 UI 제공 |
date, time, datetime-local | 날짜/시간 선택 UI 제공 |
color | 컬러 피커 제공 |
- 폼 속성:
required,pattern,min,max,step - 장점: JS 의존도 감소, UX 향상
5. API 및 클라이언트 기능 강화
5.1 웹 저장소
- LocalStorage: 영구 저장, 5~10MB 용량
- SessionStorage: 세션 종료 시 삭제
- IndexedDB: 대규모 구조화 데이터 저장
5.2 Geolocation API
navigator.geolocation.getCurrentPosition(
position => console.log(position.coords.latitude, position.coords.longitude)
);5.3 Web Workers
- 백그라운드 스레드에서 JS 실행 → UI 블로킹 방지
5.4 WebSocket
- 클라이언트-서버 양방향 실시간 통신
- Ajax보다 효율적이며 이벤트 기반 처리 가능
6. 보안 및 접근성 고려
- **CSP(Content Security Policy)**와 결합 가능 → XSS 방지
- HTTPS + Secure Context → Geolocation, Service Worker 동작
- ARIA(role, label, hidden 등) → 스크린 리더 접근성 강화
7. HTML5의 최신 활용 트렌드
- Progressive Web App(PWA): 오프라인 동작, 설치 가능
- **Single Page Application(SPA)**와 통합: React, Angular, Vue
- WebRTC: 브라우저 간 실시간 미디어 스트리밍
- WebAssembly: 고성능 계산, Rust/Python 연동 가능
핵심 요약
- HTML5는 단순 마크업이 아닌 웹 플랫폼의 핵심 기술
- 시맨틱 태그, 멀티미디어, 클라이언트 저장소, 실시간 API, 보안/접근성 기능을 통합
- 웹 앱, 모바일, IoT, PWA까지 확장 가능
DevSecOps ⚙️ + Pentest 🚩