HTML5 - HTML5의 개념과 특징

HTML5

HTML5의 개념

• HTML5는 기존 텍스트와 하이퍼링크로만 표시되던 HTML에서 다양한 웹어플리케이션으로 진화한 차세대 웹표준 웹 프로그래밍 언어
• HTML5는 W3C를 중심으로 하여 애플, 마이크로소프트, 구글, 모질라 등의 메이저 웹브라우저 벤더사가 참여하고 있는 산업 표준이기도 하다.

HTML5 특징

• 원소스 멀티 플랫폼
  

• 플러그인 불필요
  

• 2D/3D 그래픽

  • HTML5에서는 SVG, 캔버스, WebGL을 통해 다양한 2D/3D 그래픽 기능을 제공
    ** WebGL은 오픈 그래픽 라이브러리인 OepnGL에 기반한 웹 표준 그래픽 라이브러리

웹 소켓(Web Socket)

• 웹 소켓(Web-Socket)의 가장 큰 의미는 웹 소켓을 통해 서버와 클라이언트 간에 양방향 통신이 가능해졌다는 것
• 양방향 통신을 사용하게 되면 네트워크의 부하 시간을 줄일 수 있기 때문에 성능 상 매우 효율적

웹 스토리지(Web Storage)

• 쿠키의 단점을 보완하고 데이터를 관리하기 위한 새로운 웹 스토리지 매커니즘이 HTML5 표준에 추가
• 서버로 전송이 되지 않으므로 쿠키에 비해 보안성이 더 높고, 개수나 용량 제한이 없으므로 쿠키에 비해 다량의 데이터를 저장할 수 있음

HTML5에서 제공하는 다양한 기능들하는 다양한 기능들

캔버스

캔버스란

사전적 의미로는 '유화를 그릴 때 쓰는 천'인데, 웹페이지에서 캔버스라는 용어가 사용된다면, 웹페이지상에서 그림을 그릴 수 있도록 기능을 제공한다는 뜻

<canvas id="mytcanvas" width="600" height="400" sytle="border:3px;"></canvas>

과 같이 엘레멘트를 작성하면 그림을 그릴 수 있는 공간이 생성되고 그림을 그릴 수 있다.

캔버스 좌표 설정

• 캔버스 좌표의 원점은 좌상단 지점
• 원점이 좌상단이므로 x축으로는 가장 왼쪽을 기준으로 오른쪽으로 갈 수록 x축의 값은 증가하고, 왼쪽으로 갈 수록 y축의 값은 감소한다.
  

1. 사각형 그리기

• fillRect(x, y, width, height): 색으로 채운 사각형
• strokeRect(x, y, width, height): 선만 있는 사각형
• clearRect(x, y, width, height): 사각형의 영역을 지움

2. 선그리기

• beginPath() / closePath()
• moveTo() / lineTo()
• stroke() / fill()

3. 원그리기

• arch() 메소드: 원이나 호를 생성할 때 사용하는 메소드
• 6개의 전달인자:
  • x, y: 원의 중심 좌표
  • radius: 원의 반지름
  • startAngle: 라디안(호도법)에서의 호의 시작점
  • endAngle: 라디안(호도법)에서의 호의 끝점
  • anticlockwise: 불값으로 true이면 호를 시계 반대방향으로, false이면 시계 방향으로 그리며 기본값은 false

위치정보

1. getCurrentPosition(): 현재 나의 위치나 내 주변에 무엇이 있는지 확인하는 함수로, 주로 움직이지 않는 정적인 대상을 조사하는 경우에 사용

getCurrentPosition(successCallback, errorCallback, options)

// 전달인자 
- coords.longitude: 위도
- coords.altitude : 경도
- coords.latitude: 표고
- coords.altitudeaccuracy: 위도, 경도의 오차
- coords.heading: 표고의 오차

2. watchPosition(): 변경되는 위치의 정보를 계속해서 알고 싶을 때 사용하는 함수로 장치의 위치가 변경될 때 마다 계속 호출되므로 위치의 변화를 지속적으로 감시 할 수 있다

watchPosition(successCallback, errorCallback, option)