Ricky Lee

Ricky Lee

Client Developer


HTML5의 등장

업데이트:

  • 연구주제 : HTML5의 등장
  • 연구목적 : 새로운 웹 표준화 HTML5 이해
  • 연구일시 : 2019년 12월 23일 09:00~17:00
  • 연구자 : 이재환 ljh951103@naver.com
  • 연구장비 : HP EliteDesk 800 G4 TWR, HTML5
  • 관련연구 : HTML4, HTTP, Web, Network

 

서론

1990년대 초반에 문자나 사진과 같이 움직임이 없는 정보를 인터넷을 통해 교환하기 위한 수단으로 등장한 것이 웹이다. 하지만 현재는 움직임이 있는 대화형 애플리케이션이 작동하는 플랫폼으로 이용되고 있다.

그러한 장치를 실현시켜 주는 것이 정보를 보내는 웹 서버와 정보를 표시하는 브라이저, 그리고 정보를 주고받는 수단인 통신 프로토콜이다. 이 조합은 여러개가 될 수 있다. 왜냐하면 HTML이 표준화되어 공통으로 이용할 수 있기 때문이다.

HTML은 1997년 버전 4가 정해지고 지금까지 쭉 사용되었다. 하지만 환경적 요소가 크게 달라짐에 따라 이런 상황에 대응하기 위하여 플러그인이라는 소프트웨어를 추가하여 보안해왔다.

이러한 환경 속에서 차세대를 담당할 HTML5가 서서히 등장하게 된 것이다.

image

image

 

본론

2014년 10월 HTML5는 15년만에 W3C에 의해 정식으로 권고되었다. HTML에는 협의의 의미와 광의의 의미가 있다.

 

협의의 HTML5

좁은 의미로는 W3C가 규격을 책정한 마크업 언어 자체를 가리킨다. 브라우저에서 표시하는 내용의 구성, 레이아웃, 멀티미디어, 2차원 그래픽등을 정하고 있다.

 

광의의 HTML5

image

넓은 의미로는 네트워크에 연결되어 있지 않을 때도 데이터 가공, 편집하기 위한 오프라인 스토리지, 스마트폰 등과 같은 하드웨어에 내장된 센서를 브라우저에서 다루기 위한 디바이스 연계, 3차원 그래픽 등, 브라우저에서 고도의 복잡한 애플리케이션을 작동시키기 위한 기능의 취급까지 포함하고 있다.
한 문장으로 표현하면,

차세대 애플리케이션 플랫폼을 실현하기 위한 방법과 절차를 표준화한 것   이렇게 설명할 수 있다.

또한 HTML5는 특정 업체가 제공하는 기술에 의존하는 것이 아니라 누구나 자유롭게 이용할 수 있는 오픈된 표준으로 실현하는 것 이다.

현재는 HTML5를 웹뿐만 아니라 스마트폰용 애플리케이션이나 기업용 시스템의 개발에도 사용하게 되었으며 멀티디바이스 시대의 애플리케이션 기술로 보급되고 있다.

 

1. 특징

image

  • Device AccessDEVICE ACCESS : 카메라, 동작센서 등의 H/W 기능을 웹에서 직접적으로 제어

  • CONNECTIVITY(Web Socket) : 웹 (클라이언트)에서 서버 측과 직접적인 양방향 통신 가능
  • 3D, GRAPHICS & EFFECTS : 다양한 2차원 및 3차원 그래픽 기능을 지원
  • Styling Effects(CSS3) : 글씨체, 색상, 배경 등 다양한 스타일 및 이펙트 기능 제공
  • MULTIMEDIA : 비디오 및 오디오 기능을 자체적으로 지원
  • OFFLINE & STORAGE : 네트워크 미지원 환경에서도 웹 이용을 가능하게 함
  • Geo-Location: GPS없이도 단말기의 지리적인 위치 정보를 제공
  • SEMANTICS : 웹 자료에 의미를 부여하여 사용자 의도에 맞는 맞춤형 검색 제공

 

2. HTML5 디자인 원칙: 호환성

  • 콘텐츠의 호환성 : HTML5 이전 버전으로 제작한 콘텐츠도 문제없이 이용 가능해야 한다.

  • 이전 브라우저와의 호환성 : HTML5 가 지원되지 않는 이전 버전의 브라우저에서도 이용 - 가능해야 한다.
  • 이용 방법의 호환성 : 기존에 HTML 태그 사용법을 최대한 사용가능하도록 해야 한다.
  • 기능의 재사용 : 각각의 브라우저에서만 사용 가능한 기능들을 통합하여 공통적으로 사용할 수 있어야 한다.
  • 혁신보다는 발전을 우선 : HTML5는 새로운 언어를 구현하는 것이 아니므로 이미 사용 중인 HTML을 보다 사용하기 쉽도록 재구성하도록 한다.

 

3. HTML4 vs HTML5

  • 차이점 1 : Syntax(구문)
    1. DOCTYPE : 기존의 html 문서타입보다 간결해졌다.
    2. Encoding : 인코딩 선언부가 간결해졌다.
    3. 그래픽 언어의 사용 : 수식기술언어(MathML), 그래픽언어(SVG) 등을 사용할 수 있다.
    4. HTML5는 마크업시 TAG는 대소문자를 구분하지 않는다. 하지만 가독성 측면에서 소문자로 작성하는 것을 권장한다.

 

  • 차이점 2 : Language(언어)
    1. Semantic Element가 추가되었다 : Header, Footer, Nav, Section, Article 등등….
    2. 사라진 Element
  • CSS로 처리할 수 있는 Element
  • Frame 관련 Element
  • 거의 사용되지 않는 Element

 

  • 차이점 3 : API
    1. Video/Audio API : Video, Audio Element와 함께 Video, Audio를 재생하는 데 사용된다.
    2. Offline Web Application : Offline을 지원하는 API
    3. Drag & Drop API 등등이 있습니다.

image

 

결론

지금까지 HTML5 에 대해 알아보았고 HTML5와 HTML4와의 차이점에 대해서도 간단히 알아보았다.
사실 HTML5가 등장했던 시기가 지금과는 조금의 차이가 있다.
6년이 지났지만 여전히 HTML5는 대세를 이루는 웹 표준으로써 최고의 기술이라고 생각한다.

 

향후과제

HTML4와 HTML5의 구문, 언어, API의 세부사항 비교 분석해보기  

참고자료

https://www.koreahtml5.kr/front/info/intro.do
https://brenden.tistory.com/43

 

Writer: Jae-Hwan Lee

태그: , ,

카테고리:

업데이트:

댓글남기기

참고