HTML5, HTML5 API   HTML5 구성 요소

(2023-10-02)

HTML 5, html5, History API


1. HTML 5

  ㅇ 2014년10월 표준안 확정 발표된 이래로,

  ㅇ WHATWG에서, 웹 어플리케이션 1.0 이라는 명칭으로, 계속 개발되고 반영되고 있음
     - 즉, 규격 자체가 바뀌면서 진화중 임


2. HTML 5의 주요 특징

  ㅇ 기존 HTML 버전들과는 달리, SGML에 기반을 두지 않음
  ㅇ HTML 5는, 간단명료하게,
     - 맨처음에, <!DOCTYPE html> 으로 시작 (심지어 이 없이도 유효한 HTML 5로써 사용 가능)
  ㅇ 시각적 효과 이외에도 의미적인 문서의 구조화 도모
     - 例) header 요소, section 요소, article 요소 등 지원
  ㅇ 그래픽,동영상,음악 등을 위한 웹 어플리케이션의 구현 가능 플랫폼
     - 따로 별도의 플러그인(플래시,Silverlight 등) 없이도, 다양한 멀티미디어 감상 가능
     - 例) audio 요소, video 요소, canvas 요소 등
  ㅇ HTML5 API 제공 (for Javascript)
     - 기존 HTML과는 달리, 규격화된  응용 서비스들의 모음
        . 例)  폼,비디오/오디오,캔버스,SVG,위치정보, DB, 소켓 등의 API 제공
  ㅇ 한편, 기존 HTML에서 지원이 중단된(퇴화된) HTML 구성 요소속성들
     - 지원 중단 요소들 例) 
        . acronym, applet, basefont, big, center, dir, font, frame, frameset, noframes,
          strike, tt, u 등
     - 지원 중단된 속성들 例)
        . a 요소의 name 속성, img 요소의 border/hspace/vspace 속성, ul 요소의 type 속성3. HTML 5의 API

  ※ 주로, 자바스크립트로 호출,제어되는 API
     - 웹브라우저가 지원하는 외부 객체 형태로 제공되며,
        . 해당 API 객체속성들과 메소드들을 통해 이용 가능
     - 단, 이미지,오디오,비디오 데이터들은,
        . html 문서 내 해당 요소로의 직접 접근도 가능
        . 즉, API 없이도 (audio 요소, video 요소, svg 요소 등)로도 가능

  ㅇ Geolocation
     - 웹브라우저 사용자의 위치를 알아냄
     - 웹브라우저 BOM 객체인 navigator.geolocation 객체를 통해 제공됨

  ㅇ 히스토리 관리 (History API)
     - window.history.pushState(state, title, url)
     - window.history.replaceState(state, title, url)
        . state : 후에 사용할 수 있도록, 현재 상태를 기록해 두는 객체
           .. 후에 history.state로 불러올 수 있음
        . title : 웹브라우저 상단 타이틀
        . url : URL 문자열        
     - window.onpopstate : 뒤로가기나 앞으로가기를 했을 때, 이벤트 발생
     - window.history.state : popstate 이벤트 발생 후, 
                              history.state에 접근하여 이전 state를 가져옴 

  ㅇ 교차 출처 간 메세지 전달
     - 서로 다른 출처의 문서 사이에 메세지를 전달할 수 있게 하는 기능

  ㅇ Canvas (캔버스)
     - 웹페이지자바스크립트프로그래밍이 가능한 그림 화폭 API
        . SVG와 유사하게 웹페이지 내 동적인 그래픽 처리 요소를 만들 수 있으나,
        . 벡터 그래픽 형식이고 XML로 정의되는 SVG와는 달리, 
        . 픽셀 단위이미지 정보를 처리하고, 이를 자바스크립트로 읽도록 함

  ㅇ Web Storage
     - 웹브라우저의 내부 스토리지 구현

  ㅇ Blob 객체
     - 대용량 이진 데이터를 다루는 기능

  ㅇ File 객체
     - 로컬 파일을 참조하는(읽고 쓰는) 기능

  ㅇ Drag and Drop API
     - HTML 요소 또는 로컬 파일을, 마우스로 끌어 다른 요소로 이동시킬 수 있는 데이터 전달 기능

  ㅇ Web Worker
     - 여러 프로그램멀티스레드병렬 처리할 수 있게하는 기능

  ㅇ Indexed Database
     - 로컬에 키-값(key-value) 쌍 타입의 관계형 데이터베이스 기능

  ㅇ Web Socket
     - 서버와의 양방향 통신 제공 기능
        . 송수신 간에 양방향 연결 확립 필요
        . 서버/클라인언트 간에 일대일 통신 수행
        . 프레임 단위 전송

HTML5
   1. HTML5   2. Drag and Drop   3. 웹 워커   4. Blob 객체   5. File 객체   6. 웹 스토리지   7. 캔버스  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"