icon
2장 : HTML 기초와 심화

HTML5 신규 요소와 API

지금까지 우리는 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의 개념만 간략히 소개하고, 자세한 사용법은 추후 자바스크립트 장에서 다룰 예정입니다.

  1. Geolocation API (위치 정보 API):

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

  2. Web Storage API (웹 스토리지 API):

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

  3. Canvas API:

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

  4. Drag and Drop API (드래그 앤 드롭 API):

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

  5. Web Workers API:

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

  6. 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="https://via.placeholder.com/640x360?text=Video+Placeholder">
                <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://yourwebsite.com">
                </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의 광범위한 활용 가능성을 엿볼 수 있었습니다.

시맨틱 HTML과 접근성

Previous Page

SVG와 캔버스 기초

Next Page