Html5 API 입문(1)

Html5 API 입문(1)

 

html5는 마크업 언어라 불린다. 태그의 괄호가 열고 닫히는 속성 때문에 마크업이라는 이름이 붙여진 것 같다. 대략 프론트 개발에 마크업 개발이 포함돼 있다는 정도로 생각하고, 그냥 '뼈대'개발이라고 생각하자.

 

만일 자동차를 만든다고 한다면, 엔진은 '자바스크립트', 자동차 뼈대(프레임)는 'html',

디자인은 'css'이다. API는, 뼈대를 쉽게 만들 수 있도록 조립식 주택과 같은 개념이다.

 

주택을 A부터 Z까지 직접 지으려면 시공비와 시간, 인력이 많이 소모된다. 그러나 조립식 이동형 주택은 공장에서 기본뼈대와 디자인을 모조리 만든 후에 트럭에 실어서 장소만 옮긴 후에 조립하면 끝난다. 조립식 주택 이용률이 높아지고, 만족도도 높아지고 있는 것처럼, API는 시대적 흐름이다.

 

웹 프로그래밍 세계에서는 누가 API를 잘 활용하느냐 싸움이 돼 버렸다. API를 들어가기 앞서 html5 뼈대를 어떻게 만드는지 기본을 알아보자.

1 『 html5 주요기능 』

1) Structural Elements and Attributes

-> 웹 앱의 뼈대와 구성을 제공한다. 

 

2) Media Elements

-> 사운드,동영상과 같은 미디어 기능을 제공한다.

 

3) Form Types

-> 웹2.0의 핵심, 유저와 양방향을 위한 연결고리 '폼'을 제공한다.

 

4) 2D/3D Graphics & Animation (With Javascript)

-> 2D Canvas나 3D Webgl과 같은 그래픽을 제공한다.

5) Geolocation (With Javascript)

-> 구글이 제공하는 맵 API를 활용해서 위치기능을 활용할 수 있다.

6) Local Storage

-> 세션과 같이 단기적으로 사용자 정보를 저장할 수 있다.

7) Local SQL Storage

-> 향후 발전성이 큰 분야로, 웹 브라우저 자체적으로 DB를 구축할 수 있다.

 

향후 웹 프로그래밍의 전성시대가 될 수 밖에 없는 이유로는 4번과 7번을 꼽을 수 있다.

웹 브라우저 자체적으로 DB를 제공하고, 2D,3D 그래픽 기능을 향상시킨다면, 설치형 프로그램을 반응형 웹 프로그램이 대신할 수 있다. 웹 브라우저의 용량이 계속 커지고, DB구축이 가능해진다면, 개발자는 저렴하고 효율적으로 3D와 같은 고성능 웹 프로그램을 제작할 수 있다. 

2 『 로컬서버 구성 』

Node.js Express 프레임워크로 로컬 서버를 시작한다. 

 

3 『 프레임(뼈대) 작성 』

html5의 뼈대는 <div id="header"></div>와 같은 과거 방식보다 아래사진과 같은 방식을 사용해주길 W3C에서 요구한다. 난무하는 div태그들과 id, class와 달리 가시성이 있고, 검색도 빨라지는 효과가 있다. 상단 nav영역과 메인 article영역 그리고 가장자리의 aside영역을 지정할 수 있다.