2-4. HTML5의 등장

 HTML5는 브라우저와 디바이스에서 사용되고 보다 직관적인 시멘틱 마크업이 추가된 것뿐만 아니라 추가적인 플러그인 없이 많은 웹 애플리케이션을 가능하게 하는 것을 합니다. HTML5의 기술은 W3.org에서 확인 가능합니다.

https://www.w3.org/html/logo/

 

1. HTML5의 기술들과 개발단계
1-1. SMANTICS
 "의미론적: 마크업은 HTML5에서 새로 정의 되었습니다. 새로 추가된 요소들도 있지만, 이제 태그의 분류도 "블록"과 "인라인" 레벨이 아닌 "의미구조"에 맞게 분류합니다. 세부항목은 메타데이타 켄텐츠(metadata content), 플로우 컨텐츠(flow contents), 색셔닝 컨텐츠(sectioning content), 헤딩 컨텐츠(heading content), 프레이징 컨텐츠(phrasing content), 임베디드 컨텐츠(imbedded content), 인터랙티브 컨텐츠(interactive content), 트랜스패어런트 컨텐츠(transparent content) 등으로 나워지는데, 마크업 예제에서 상세히 다뤄 보겠습니다.

 

1-2. OFFLINE & STORAGE
 "오프라인 및 저장소: 기능은 인터넷에 연결되지 않은 환경에서도 응용프로그램을 동작할 수 있게 해주고, 인덱스 DB 및 파일 API 사양이 없는 경우에도 웹 응용프로그램을 빠르게 시작하고 작업할 수 있습니다.

 

1-3. DEVICE ACCESS

 HTML5에서는 "연결성"을 위해서 웹 소켓을 지원합니다. 이는 웹 응용프로그램이 서버측 프로세스와 직접적인 양방향 통신을 할 수 있도록 고안된 것으로, 이를 통하여 HTML5 체계 상에서 더 빠른 게임이나 시리간 채팅이 가능합니다.

 

1-4. MULTIMEDIA

 프로그인 없이 동영상이나 사운드를 재생할 수 있습니다. <audio>, <vidio> 요소는 소스를 연결하는 것만으로도 바로 실행될 수 잇도록 해 줍니다. 위쉬운 점은 브라우저마다 같은 파일을 적용하지 않는다는 점입니다.

 

1-5. 3D, GRAPHICS, EFFECTS

 2차원 및 3차원 그래픽을 처리하기 위해 SVG, CANVAS, WebGL, CSS3 3D 기능을 사용할 수 있습니다.

 

1-6. PERFORMANCE & INTEGRATION

 "웹 워커:를 사용하면 복잡한 프로그램을 수행하느라 컴퓨터가 잠시 멈춰버리는 경우를 피할 수 있습니다. 또한, XMLHttpRequest2와 같은 기술로 AJAX를 대체할 수 있습니다.

 

1-7. CSS3

 CSS3를 완벽하게 지원합니다. CSS3는 그라데이션, 애니메이션, 3D 등 다양한 표현을 가능하게 하는데 이전 CSS와는 개발 방식부터 차이가 있습니다. 이전 CSS는 각각의 항목 별로 개발되었다면 CSS3는 모듈 단위로 개발되고 있다는 점입니다. 모듈이란 예하 항목들을 포함하는 독립적인 작동 개페로 볼 수 있는데, 덕분에 항목이 모두 개발되기를 기다릴 필요 없이 하나의 모듈만 완료되면 바로 적용할 수 있다는 장점이 있습니다.

 

※ 언어의 개발 단계는 보통 5단계를 따릅니다.

1. 작업 초안 Working Draft	스펙접수, 의견수렴, Work in progress상태
2. 최종 작업 초안 Last Call Work Draft	워킹그룹에서 이슈를 해결한 상태
3. 권고 후보 Candidate Recommendation	구현 및 경험을 통해 스펙 재정의
4. 권고 체안 Proposed Recommendation	두 개의 구현 경험 및 테스트 통과
5. 권고 Recommendation	스펙 정식 승인

 

 HTML5는 아직 "권고" 단계에까지 이르진 못햇으며 그 일정도 이전의 마크업 언어들처럼 지켜지지 않고 있습니다. 측이한 점은 HTML5의 경우 데스크탑의 웹 브라우저 뿐 아니라 모바일과 태블릿 등을 포함한 많은 디바이스에서 채용하고 있는 관계로 비교적 빠른 개발 속도를 보이고 있는 것입니다.

 

2. HTML5로 작성하는 마크업

 HTML5를 활용하면 좀 더 시멘틱한 마크업이 가능하며 이 팩에서는 HTML5를 기본으로 다루게 됩니다. 마크업을 작성할 때 문법을 XHTML 형식으로 작성하는 경우와 HTML의 형식으로 작성하는 경우가 있는데, HTML5에서는 두 가지의 코딩형식을 모두 수용하고 있습니다. 특히 빈 요소의 경우 <br>처럼 표현하는 XHTML 형식과 <br>처럼 표현하는 HTML의 형식 모두 가능하며 전적으로 작성자의 의도에 달렸습니다.

 

3. 모더나이저(Modernizr)를 이용한 브라우저의 지원여부 확인하기

 웹 브라우저는 지속적으로 업그레이드되고 있습니다. 지금 사용하는 브라우저에서 지원되지 않는 HTML5기능이 업그레이드 후에는 지원될 수 있습니다. 물론 모든 기능이 업그레이드되지는 않을 수도 있습니다. 현재 사용하는 브라우저에서 지원여부를 확인하기 위해 모더나이저를 활용합니다.