[WEB] HTML5란? 개념 및 특징 정리

HTML5란? 개념 및 특징

---

 

이어서 개념부터 설명드리면  HTML5는 (HyperText Markup Language) 다음 버전으로, HTML처럼 웹 페이지와 웹 애플리케이션을 개발하기 위한 표준 마크업 언어입니다. HTML5는 기존의 HTML을 향상시켜 웹 표준을 높이고, 다양한 디바이스에서 효과적으로 작동하며 더욱 풍부한 웹 경험을 제공하는 데 기여하고 있습니다.

 

HTML5는 기존의 HTML4를 대체하고, 웹 표준과 웹 응용프로그램 개발을 위한 다양한 기능과 API를 도입하여 더 풍부한 웹 경험을 제공합니다. 바로 아떤 특징이 있는지 알아보도록 하겠습니다.

 

 

 

 

 

HTML5의 주요 특징:

1.  HTML5는 구조적 요소를 도입하여 페이지의 구조를 더 명확하게 정의합니다. <header>, <nav>, <section>, <article>, <footer> 등 새로운 요소들을 활용하여 더 SEMANTIC (의미 있는 웹 문서)를 작성할 수 있습니다. 간단한 예시로 기본 테그르 사용해보자면: 

<header>
   <h1>Title Here </h1>
</header>
<nav>
   <ul>
      <li><a href="#"> Menu 1</a></li>
      <li><a href="#"> Menu 2</a></li>
   </ul>
</nav>
<section>
   <article>
      <h2> Blog Theme </h2>
      <p> Blog Paragraph </p>
   </article>
</section>
<footer>
   <p> Content of Footer </p>
</footer>

 

 

2. HTML5에서는 오디오와 비디오를 위한 <audio>와 <video> 멀티미디어 요소들 제공합니다. 이를 통해 멀티미디어 콘텐츠를 웹 페이지에 쉽게 삽입할 수 있습니다.

 

 

3. HTML5 제일 중요한 태그 중  <canvas> 요소를 사용하여 그래픽 및 애니메이션을 렌더링할 수 있습니다. JavaScript와 함께 사용하여 동적인 그림을 그리거나 게임을 개발할 수 있습니다.

 

 

4. HTML5에서는 사용자의 위치를 가져오기 위한 지오로케이션 API를 도입했습니다. 이를 사용하여 위치 기반 서비스를 개발할 수 있습니다. 위치 공유 기능 활용한 간단한 예시입니다. 

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

   function showPosition(position) {
      console.log("Latitude: " + position.coords.latitude + 
                  " Longitude: " + position.coords.longitude);
   }
</script>

 

 

 

5. HTML5는 클라이언트 측에서 데이터를 저장하기 위한 localStorage와 sessionStorage를 도입하였고, localStorage와 sessionStorage는 클라이언트 측 웹 스토리지 옵션으로, 브라우저에서 데이터를 로컬에 저장하는 데 사용됩니다. 이들은 서버와의 통신 없이 데이터를 유지할 수 있는 장점이 있습니다.  일반적으로 잘 사용하지 않아서 소스코드는 어떻게 구현하는지 알아봤더니 생각보다 간단해서 locaStorage과 sessionStorage 이용한 간단한 코르를 정리해보겠습니다.

 

a) localStorage 이용한 간단한 예시

<script>
   // 데이터 저장하기=> setItem();
   localStorage.setItem("username", "Prime");

   // 데이터 가져오기 => getItem();
   const storedUsername = localStorage.getItem("username");
   console.log("Stored Username:", storedUsername);
   
</script>

 

 

b) sessionStorage 예시

<script>
   sessionStorage.setItem("userStatus", "loggedIn");

   const userStatus = sessionStorage.getItem("userStatus");
   console.log("User Status:", userStatus);
   
</script>

 

 

개념부터 주요 특징까지 정리해봤더니 내용이 좀 글었네요. 이어서 HTML과 HTML5 서로 차이첨으로 알아보도록 하겠습니다. 

 

 

 

 

 

---

 

 

HTML5 =>  로컬 캐싱을 통한 오프라인 상태에서도 웹 애플리케이션을 사용할 수 있게 함

 

 

12. 웹 워커(Web Workers):
HTML5 => 백그라운드에서 스크립트를 실행하여 웹 애플리케이션의 성능을 향상시킬 수 있는 웹 워커를 지원

 

---

 

 

 

 

 

 

 

---

 

 

[프론트엔드 면접] HTML과 HTML5의 차이점은?

[프론트엔드 면접] HTML과 HTML5의 차이점은?

 

 

티스토리 수익 현실, 하루 100명 방문자수 수익 공개

티스토리 수익 현실, 하루 100명 방문자수 수익 공개