안동민 개발노트

지금까지 우리는 HTML 문서의 기본적인 구조를 이해하고, 웹 페이지의 뼈대를 만드는 핵심 태그들을 학습했습니다. 특히 지난 장에서는 웹 페이지의 의미론적 구조와 접근성의 중요성에 대해 깊이 있게 다루었죠.

이제 2장의 마지막 절로, HTML의 최신 표준인 HTML5에서 새롭게 추가되거나 개선된 요소와 강력한 API(Application Programming Interface)를 살펴보겠습니다.

HTML5는 단순히 HTML의 새 버전이 아니라, 웹이 정적인 문서에서 동적인 웹 애플리케이션 플랫폼으로 진화하는 데 결정적인 역할을 했습니다. 이 장에서 소개할 기능들은 여러분이 더욱 풍부하고 상호작용적인 웹 경험을 제공하는 데 도움을 줄 것입니다.

HTML5의 주요 신규 시맨틱 요소

4장에서 시맨틱 HTML에 대해 다루면서 일부 HTML5의 새로운 시맨틱 태그들을 미리 살펴보았습니다. 여기서는 다시 한번 중요성을 상기하고 몇 가지 추가적인 시맨틱 요소를 소개하겠습니다.

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>: 이 태그들은 웹 페이지의 각 영역에 의미를 부여하여 검색 엔진 최적화(SEO)와 웹 접근성(Accessibility)에 크게 기여합니다.

<figure>, <figcaption>: 이미지, 코드 블록, 비디오 등 독립적인 콘텐츠를 묶고 캡션을 추가할 때 사용합니다.

<figure>
    <img src="diagram.png" alt="시스템 아키텍처 다이어그램">
    <figcaption>그림 1. 웹 애플리케이션의 기본 아키텍처</figcaption>
</figure>

<mark>: 텍스트의 특정 부분을 강조하거나 하이라이트할 때 사용합니다. (주로 노란색 배경으로 표시됩니다.)
```
<p>이 문장에서 <mark>가장 중요한 부분</mark>은 바로 이것입니다.</p>
```
<time>: 날짜와 시간을 의미론적으로 표현합니다. 검색 엔진이 시간 정보를 정확히 파악할 수 있도록 돕습니다.
```
<p>이 이벤트는 <time datetime="2025-12-25">크리스마스</time>에 시작합니다.</p>
<p>게시물 작성 시간: <time datetime="2025-06-14T23:00">오늘 밤 11시</time></p>
```
- datetime 속성은 기계가 읽을 수 있는 형식으로 날짜와 시간을 지정합니다.

멀티미디어 요소: 비디오와 오디오 다루기

HTML5 이전에는 웹 페이지에서 비디오나 오디오를 재생하기 위해 Flash와 같은 플러그인이 필요했습니다. HTML5는 이러한 미디어 콘텐츠를 웹 표준만으로 직접 삽입하고 제어할 수 있는 <video>와 <audio> 태그를 도입하여 웹의 가능성을 크게 확장했습니다.

비디오 요소: `<video>`

<video> 태그는 웹 페이지에 비디오를 삽입합니다.

<video src="my_video.mp4" controls width="640" height="360" poster="poster.jpg" autoplay loop muted>
    죄송합니다. 귀하의 브라우저는 비디오 태그를 지원하지 않습니다.
    <a href="my_video.mp4">비디오 다운로드</a>
</video>

src: 비디오 파일의 경로를 지정합니다.
controls: 브라우저의 기본 재생 컨트롤러(재생/일시정지, 볼륨, 진행바 등)를 표시합니다.
width, height: 비디오 플레이어의 너비와 높이를 지정합니다. (CSS로 제어하는 것이 더 유연합니다.)
poster: 비디오가 로드되거나 재생되기 전에 표시될 이미지의 경로를 지정합니다.
autoplay: 페이지 로드 시 비디오가 자동으로 재생되도록 합니다. (사용자 경험을 고려하여 신중하게 사용해야 합니다. 많은 브라우저가 자동 재생을 기본적으로 차단할 수 있습니다.)
loop: 비디오가 끝까지 재생된 후 자동으로 다시 시작되도록 합니다.
muted: 비디오의 오디오를 기본적으로 음소거합니다. (자동 재생 시 거의 필수)

<source> 태그: 여러 형식의 비디오 파일을 제공하여 브라우저 호환성을 높일 수 있습니다. 브라우저는 지원하는 첫 번째 소스를 선택하여 재생합니다.

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    브라우저가 비디오를 지원하지 않습니다.
</video>

오디오 요소: `<audio>`

<audio> 태그는 웹 페이지에 오디오 파일을 삽입합니다.

<audio src="background_music.mp3" controls loop autoplay muted>
    오디오 태그를 지원하지 않는 브라우저입니다.
    <a href="background_music.mp3">오디오 파일 다운로드</a>
</audio>

src: 오디오 파일의 경로를 지정합니다.
controls: 브라우저의 기본 오디오 컨트롤러를 표시합니다.
autoplay: 페이지 로드 시 오디오가 자동으로 재생되도록 합니다.
loop: 오디오가 끝까지 재생된 후 자동으로 다시 시작되도록 합니다.
muted: 오디오를 기본적으로 음소거합니다.
<source> 태그: 여러 형식의 오디오 파일을 제공하여 브라우저 호환성을 높일 수 있습니다.

폼 요소의 새로운 `type` 속성 및 속성들

HTML5는 <input> 태그에 다양한 새로운 type 속성을 추가하여, 사용자 입력의 종류를 더욱 세분화하고 클라이언트 측 유효성 검사를 강화했습니다.

type="email": 이메일 주소 입력 (기본 유효성 검사, 키보드에 @ 표시)
type="url": URL 입력 (기본 유효성 검사)
type="tel": 전화번호 입력 (모바일에서 숫자 키패드 제공)
type="number": 숫자 입력 (min, max, step 속성 사용 가능)

type="range": 슬라이더 형태의 숫자 범위 선택

<label for="volume">볼륨:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">

type="date": 날짜 선택 (달력 UI 제공)
type="time": 시간 선택
type="datetime-local": 날짜 및 시간 선택
type="color": 색상 선택 (컬러 피커 UI 제공)
type="search": 검색 입력 필드 (브라우저별로 특수 아이콘 제공)

새로운 input 속성

placeholder: 입력 필드에 아무것도 입력되지 않았을 때 표시되는 힌트 텍스트.
required: 필드를 필수로 채워야 함을 명시합니다. 폼 제출 시 자동으로 유효성 검사.
autofocus: 페이지 로드 시 자동으로 해당 필드에 커서가 위치하도록 합니다.
min, max, step: number나 range 타입에서 최소값, 최대값, 증감 단위를 지정합니다.
pattern: 정규 표현식을 사용하여 입력 값의 형식을 제한합니다. (예: pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"로 전화번호 형식 지정)

list와 <datalist>: 입력 필드에 자동 완성 기능을 제공합니다. <datalist>의 id를 input의 list 속성 값으로 연결합니다.

<label for="browser">선호하는 브라우저:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

HTML5 Web API: 웹의 기능 확장 (개념 소개)

HTML5는 단순히 새로운 태그를 추가하는 것을 넘어, 웹 브라우저가 사용자 기기의 하드웨어 및 운영체제와 상호작용하거나, 웹 애플리케이션의 기능을 확장할 수 있도록 하는 강력한 Web API(Application Programming Interface)들을 제공합니다. 이 API들은 주로 자바스크립트를 통해 제어되며, HTML에 직접적인 태그 형태로 나타나기보다는 개발자가 코드를 통해 접근하여 기능을 구현하는 방식입니다.

여기서는 몇 가지 주요 Web API의 개념만 간략히 소개하고, 자세한 사용법은 추후 자바스크립트 장에서 다룰 예정입니다.

Geolocation API (위치 정보 API)

사용자의 현재 위치 정보(위도, 경도)를 얻을 수 있도록 합니다. 지도 서비스, 위치 기반 서비스 등에 활용됩니다.
주의: 사용자 동의 없이는 위치 정보를 얻을 수 없습니다.

Web Storage API (웹 스토리지 API)

웹 브라우저 내에 데이터를 저장할 수 있도록 합니다. localStorage와 sessionStorage 두 가지가 있습니다.
localStorage: 브라우저를 닫아도 데이터가 유지됩니다. 로그인 상태 유지, 사용자 설정 저장 등에 활용됩니다.
sessionStorage: 브라우저 탭/창이 닫히면 데이터가 제거됩니다. 임시 세션 데이터 저장 등에 활용됩니다.
주의: 민감한 정보(비밀번호 등)는 저장하지 않아야 합니다.

Canvas API

HTML <canvas> 태그와 함께 사용되어 자바스크립트를 통해 2D 그래픽, 애니메이션, 게임 등을 동적으로 그릴 수 있도록 합니다.
예: 데이터 시각화 차트, 그림판 애플리케이션, 간단한 게임 등

Drag and Drop API (드래그 앤 드롭 API)

웹 페이지 내에서 요소를 마우스로 끌어다 놓는(드래그 앤 드롭) 기능을 구현할 수 있도록 합니다. 파일 업로드, UI 요소 재정렬 등에 사용됩니다.

Web Workers API

웹 페이지의 스크립트를 백그라운드에서 실행하여, 복잡한 계산이나 작업을 수행하는 동안에도 사용자 인터페이스가 멈추지 않고 반응성을 유지하도록 돕습니다.
무거운 자바스크립트 연산으로 인해 웹 페이지가 먹통이 되는 것을 방지할 수 있습니다.

Fetch API

서버로부터 데이터를 비동기적으로 가져오거나(요청), 서버로 데이터를 전송(응답)하는 데 사용되는 현대적인 웹 API입니다. 기존의 XMLHttpRequest를 대체하며, 더 강력하고 유연한 네트워크 통신 기능을 제공합니다.
데이터를 가져와 웹 페이지를 새로고침하지 않고 업데이트하는 데 필수적으로 사용됩니다. (이는 나중에 JavaScript와 백엔드 통신에서 매우 중요하게 다루어질 것입니다.)

이 외에도 Offline Web Applications (Service Worker), Web Sockets, Geolocation API 등 수많은 HTML5 Web API들이 존재합니다. 이들은 웹 브라우저의 기능을 단순한 문서 뷰어에서 강력한 애플리케이션 플랫폼으로 확장시켰습니다.

실습: 비디오와 새로운 폼 입력 타입 활용하기

HTML5의 신규 요소와 폼 입력 타입을 활용한 간단한 페이지를 만들어 봅시다. web-dev-practice 폴더에 html5_features.html 파일을 만들고 아래 코드를 작성해 보세요.

html5_features.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 신규 요소와 API</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        h1, h2 {
            color: #007bff;
            text-align: center;
            margin-bottom: 30px;
        }
        video, audio {
            display: block;
            margin: 20px auto;
            max-width: 100%;
            border-radius: 8px;
            box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        }
        form {
            margin-top: 40px;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
            background-color: #fdfdfd;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="number"],
        input[type="date"],
        input[type="time"],
        input[type="color"],
        input[type="range"] {
            width: calc(100% - 22px); /* 패딩, 보더 고려 */
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1em;
            box-sizing: border-box;
        }
        input[type="range"] {
            padding: 0;
            height: 25px; /* 높이 조정 */
        }
        datalist {
            /* datalist는 직접 스타일링하기 어려움. input 요소에 적용되는 스타일을 참고 */
        }
        button {
            background-color: #28a745;
            color: white;
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            font-size: 1.1em;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-top: 20px;
        }
        button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML5의 새로운 기능 탐색</h1>

        <section>
            <h2>멀티미디어 콘텐츠</h2>
            <p>HTML5는 플러그인 없이도 비디오와 오디오를 쉽게 삽입할 수 있게 되었습니다.</p>

            <h3>예시 비디오</h3>
            <video controls width="100%" poster="/docs/common/fallback-image.svg">
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
                <p>죄송합니다. 귀하의 브라우저는 비디오를 지원하지 않습니다.</p>
            </video>

            <h3>예시 오디오</h3>
            <audio controls>
                <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
                <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
                <p>죄송합니다. 귀하의 브라우저는 오디오를 지원하지 않습니다.</p>
            </audio>
            <p><small>(* 비디오/오디오 소스는 W3Schools 예시를 참조했습니다.)</small></p>
        </section>

        <section>
            <h2>새로운 폼 입력 타입</h2>
            <p>사용자로부터 더욱 다양한 종류의 정보를 쉽게 입력받을 수 있습니다.</p>

            <form action="#" method="get">
                <div class="form-group">
                    <label for="userEmail">이메일:</label>
                    <input type="email" id="userEmail" name="userEmail" placeholder="your@example.com" required>
                </div>

                <div class="form-group">
                    <label for="phoneNumber">전화번호:</label>
                    <input type="tel" id="phoneNumber" name="phoneNumber" placeholder="010-1234-5678" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}">
                </div>

                <div class="form-group">
                    <label for="websiteUrl">개인 웹사이트:</label>
                    <input type="url" id="websiteUrl" name="websiteUrl" placeholder="https://my-portfolio.dev">
                </div>

                <div class="form-group">
                    <label for="favColor">선호하는 색상:</label>
                    <input type="color" id="favColor" name="favColor" value="#4285F4">
                </div>

                <div class="form-group">
                    <label for="eventDate">이벤트 날짜:</label>
                    <input type="date" id="eventDate" name="eventDate">
                </div>

                <div class="form-group">
                    <label for="meetingTime">회의 시간:</label>
                    <input type="time" id="meetingTime" name="meetingTime">
                </div>

                <div class="form-group">
                    <label for="quantity">수량 (1-10):</label>
                    <input type="number" id="quantity" name="quantity" min="1" max="10" value="1">
                </div>

                <div class="form-group">
                    <label for="satisfaction">만족도 (0-100):</label>
                    <input type="range" id="satisfaction" name="satisfaction" min="0" max="100" value="75">
                </div>

                <div class="form-group">
                    <label for="searchQuery">검색어:</label>
                    <input type="search" id="searchQuery" name="q" placeholder="검색어를 입력하세요..." list="searchSuggestions">
                    <datalist id="searchSuggestions">
                        <option value="HTML5">
                        <option value="CSS3">
                        <option value="JavaScript API">
                    </datalist>
                </div>

                <button type="submit">폼 제출</button>
            </form>
        </section>
    </div>
</body>
</html>

이번 장에서는 HTML5에서 웹 개발의 가능성을 확장시킨 주요 신규 요소와 강력한 Web API들에 대해 알아보았습니다. <video>와 <audio> 태그로 멀티미디어 콘텐츠를 직접 다루는 방법을 배웠고, 새로운 폼 입력 타입과 속성들을 통해 더욱 정교한 사용자 입력을 받을 수 있게 되었습니다. 또한, Geolocation, Web Storage, Canvas 등 HTML5 API의 광범위한 활용 가능성을 엿볼 수 있었습니다.

HTML5 신규 요소와 API