HTML5, HTML5 API   HTML5 구성 요소

(2020-03-21)

HTML 5, html5, History API

1. HTML 5

  ㅇ 2014년10월 표준안 확정 발표
     - WHATWG에서 웹 어플리케이션 1.0 이라는 명칭으로 계속 개발되고 반영되고 있음
        . 즉, 규격 자체가 진화중 임


2. HTML 5 특징

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


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
     - 웹페이지 내에 자바스크립트프로그래밍이 가능한 그림 화폭 APIWeb 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. 캔버스

 
        최근수정     요약목록     참고문헌