[HTML] HTML5의 새로운 기능과 태그들

HTML5는 HTML의 다음 버전으로, 웹 페이지 구조와 콘텐츠를 더 명확하고 의미론적으로 표현할 수 있도록 새로운 기능과 태그들을 도입했습니다. HTML5의 주요 새로운 기능과 태그들을 살펴보겠습니다.

---

시맨틱 태그

HTML5에서 도입된 시맨틱 태그는 웹 페이지의 구조와 의미를 명확하게 표현하는데 사용됩니다. 이미 앞서 설명한 <header>, <nav>, <main>, <article>, <footer> 태그들이 여기에 해당합니다. 시맨틱 태그를 사용하면 웹 페이지의 구조가 명확해지고, 검색 엔진 최적화와 웹 접근성이 향상됩니다.

---

영상과 오디오 태그

HTML5에서는 <video>와 <audio> 태그를 도입하여 비디오와 오디오를 쉽게 웹 페이지에 삽입할 수 있게 되었습니다. 다양한 브라우저에서 지원하는 비디오와 오디오 포맷들을 <source> 태그를 이용하여 지정할 수 있습니다.

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support the audio tag.
</audio>

---

canvas 태그

<canvas> 태그를 사용하면 JavaScript를 활용하여 그래픽이나 애니메이션을 그릴 수 있습니다. 웹 기반의 그래픽 작업에 유용하게 사용됩니다.

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 150, 80);
</script>

---

폼 태그 개선

HTML5에서 폼 태그가 크게 개선되었습니다. 새로운 입력 타입과 속성들이 추가되어 웹 폼을 다양하게 커스터마이징할 수 있게 되었습니다.

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input type="date" name="birthdate">
    <button type="submit">Submit</button>
</form>

---

지오로케이션 API

HTML5에서는 지오로케이션 API를 제공하여 웹 애플리케이션에서 사용자의 위치 정보를 받아올 수 있습니다. 이를 활용하여 위치 기반 서비스를 개발할 수 있습니다.

<button onclick="getLocation()">Get Location</button>

<script>
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            alert("Geolocation is not supported by this browser.");
        }
    }

    function showPosition(position) {
        alert("Latitude: " + position.coords.latitude + "\nLongitude: " + position.coords.longitude);
    }
</script>

위의 예제에서는 사용자의 위치 정보를 얻어오기 위해 navigator.geolocation API를 사용하고 있습니다.

---

HTML5에서 도입된 새로운 기능과 태그들에 대해 설명해보았습니다. 시맨틱 태그를 사용하여 웹 페이지의 의미를 명확하게 표현하고, 비디오, 오디오 등 멀티미디어를 쉽게 삽입할 수 있게 되었습니다. 또한 폼 태그의 기능이 개선되어 사용자와의 상호작용을 더욱 편리하게 만들 수 있습니다. HTML5의 다양한 기능을 활용하여 웹 페이지와 웹 애플리케이션을 더욱 풍부하고 효율적으로 개발할 수 있기를 바랍니다.