HTML5, HTML5 API   HTML5 구성 요소

(2018-12-13)

HTML 5, Canvas, Web Storage, 웹 스토리지, History API

1. HTML 5

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


2. HTML 5 특징

  ㅇ 기존 HTML 버전들과는 달리 SGML에 기반을 두지 않음
  ㅇ 시각적 효과 이외에 의미적인 문서의 구조화 도모
     - 例) header, section, article 등 태그 지원
  ㅇ 그래픽,동영상,음악 등을 위한 웹 어플리케이션의 구현 가능 플랫폼
     - 따로 별도의 플러그인 없이도, 다양한 멀티미디어 감상 가능
  ㅇ 기존 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 없이도 (img 요소, audio 요소, video 요소)로도 가능

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

  ㅇ 히스토리 관리 (History API)
     - window.history.pushState(데이터 객체, 제목, URL)
     - window.history.replaceState(데이터 객체, 제목, URL)
     - window.onpopstate : 뒤로가기나 앞으로가기를 했을 때, 이벤트 발생
     - window.history.state : popstate 이벤트 발생 후, 
                              history.state에 접근하여 이전 state를 가져옴 

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

  ㅇ Canvas
     - 웹페이지 내에 자바스크립트프로그램이 가능한 그림 화폭 API
     - API 특징 : 즉시 실행형 저수준(선,원,사각형 등) API 
     - 구현 가능 : 2 차원 그래픽, WebGL을 사용한 3 차원 그래픽
     - 기본 크기 : 300 x 150 픽셀

  ㅇ Web Storage
     - 웹브라우저의 내부 스토리지
     - 구분
        . localStorage   : origin 별로 지속되는 내부 스토리지
        . sessionStorage : 현재 세션 동안 만 유지되는 내부 스토리지

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

  ㅇ File
     - 로컬 파일 시스템을 읽고 쓰는 기능

  ㅇ Drag and Drop
     - HTML 요소 또는 로컬 파일을 마우스로 끌어서, 움직이거나 다른 HTML 요소로 이동시킬 수
       있는 데이터 전달 기능
     - draggable 속성에 "true" 또는 "false" 지정하면 됨
         <div draggable="true">드래그 가능</div>
        . href 속성 있는 a 요소, src 속성 있는 img 요소는 기본적으로 드래그 가능
     - 관련 이벤트
        . dragstart : 드래그를 시작할 때 발생
        . drag : 드래그 동안 발생
        . dragend : 드래그가 끝날 때 발생
        . dragenter : 마우스가 드롭 요소 안에 지입할 때 발생
        . dragover : 마우스가 드롭 요소 위에 있는 동안 발생
        . dragleave : 마우스가 드롭 요소 밖으로 나갈 때 발생
        . drop : 요소에 드롭할 때 발생

  ㅇ Web Workers
     - 여러 개 프로그램멀티스레드병렬 처리하는 기능

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

  ㅇ Web Socket
     - 서버와의 양방향 통신 제공 기능


[HTML] 1. HTML 2. HTML 용어 3. DHTML 4. HTML5
[HTML 요소]
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
        1. 통신 이란?
        2. 신뢰적 통신
    1.   통신이론
    2.   선로/전송
    3.   통신망 일반
    4.   회선교환(PSTN)
    5.   무선/이동통신
    6.   광통신
    7.   인터넷/데이터통신
          1. 데이터통신망
          2. 인터넷
          3. 데이터 네트워크 설계
      1.   데이터 단위
      2.   프로토콜/계층
      3.   데이터 링크
      4.   TCP/IP
      5.   라우팅
      6.   인터넷 QoS
      7.   인터넷 관리
      8.   인터넷 응용
        1.   NetBIOS
        2.   DNS
        3.   가상단말
        4.   FTP
        5.   전자메일
        6.   VoIP
        7.   웹기술
              1. 웹 이란?
              2. 하이퍼텍스트
          1.   웹 구성
          2.   HTTP
          3.   웹 페이지
            1.   마크업 언어
                  1. 마크업 언어
                  2. SGML
                  3. DTD
              1.   HTML
                    1. HTML
                    2. HTML 용어
                    3. DHTML
                    4. HTML5
                1.   HTML 요소
              2.   XML
            2.   DOM,BOM
            3.   기능 요소
            4.   웹 디자인
          4.   웹 식별
          5.   웹 서비스
          6.   차세대 웹
          7.   웹기술 기타일반
        8.   VPN
        9.   무선인터넷
        10.   전자상거래
        11.   개인 컨텐츠
        12.   인터넷 기타 응용
      9.   인터넷 기타
      10.   패킷교환(PSN)
      11.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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