html-35 HTML5 란 무엇인가?

html-35 HTML5 란 무엇인가? HTML5란 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTML(hypertext markup language)의 최신규격 입니다.HTML5를 사용하면 별도 프로그램을 깔지 않아도 인터넷 브라우저상에서 화려한 그래픽 효과를 구현할 수 있고, 음악이나 동영상을 자유롭게 감상할 수 있습니다.간단히 이야기 하자면 기존 HTML에선 불가능 했던 것들, 즉 ActiveX나 플래시플레이어 등이 설치되어 있어야 가능했던 것들이 HTML5로 구현하면 ActiveX나 플래시플레이어 등의 설치 없이 가능하다는 겁니다.또한 운영체제에 상관없이 다양한 기기.. 스마트폰이나 태블릿에서 일반 APP과 같은 기능을 구현할 수 있습니다.세계적으로 대표적인 IT기업들.. 구글, 애플 등이 HTML5에 대한 깊은 관심을 표현했죠.특히 구글에서는 최근 모든광고에서 플래시를 제외하고 HTML5로 대체한다고 발표를 했습니다.그만큼 HTML5는 가볍지만 강력해서 떠오르는 차세대 웹기반 언어라고 말할 수 있겠습니다. HTML5의 특징 및 기능 HTML5의 주요 특징과 기능을 한번 살펴보도록 하겠습니다.이러한 것들이 있구나~~ 라고 한번쯤 읽어보고 넘어가면 될 듯 합니다.차후에 테스트를 통해 다시 접하게 될것입니다. Web Form - 입력 형태를 보다 다양하게 제공Video - 동영상 재생을 위한 API 제공Audio - 음성 재생을 위한 API 제공Offline Web - 인터넷 연결이 되지 않은 상태에서도 정상적인 기능을 지원하는 애플리케이션 API 제공Web Database - 표준 SQL을 사용해 질의할 수 있는 DB 기능 제공Web Storage - 웹 애플리케이션에서 데이터를 저장할 수 있는 기능 제공Canvas - 2차원 그래픽을 그리기 및 객체에 대한 각종 효과를 주는 기능 제공SVG - XML 기반의 2차원 벡터 그래픽을 표현하기 위한 SVG 언어 지원Geolocation - 디바이스의 지리적 위치 정보를 얻은 기능 제공Web Worker - 웹 애플리케이션을 위한 스레드 기능 제공Web Socket - 웹 애플리케이션과 서버간의 양방향 통신 기능 제공CSS3 - 웹 애플리케이션의 다양한 스타일 및 효과를 나타내기 위한 CSS3 지원 HTML5 지원 브라우저 다양한 브라우저 중에서 HTML5을 기능별로 지원을 하기도, 혹은 못하기도 합니다.예를 들면 HTML5의 캔버스 기능은 익스플로러 9.0에서 가능합니다.하지만 웹 데이터베이스 기능은 10.0 이상에서 가능합니다.크롬브라우저에선 HTML5의 멀티미디어 기능을 3.2에서 지원합니다.그런데 위치정보 기능은 최소 4.1 이상에서 가능하죠.그렇다면 우리는 어떤 브라우저를 사용하고 어떤 버전을 사용해야 할까요?복잡하게 생각하실 필요 없습니다.본인 사용할 수 있는 브라우저에서 최신버전으로 업데이트를 하여 사용하면 되겠죠?저는 크롬브라우저를 사용해 테스트를 하겠습니다. 시맨틱웹 시맨틱웹이란 HTML5에서 의미있는 구조를 나타내기 위해 추가된 태그입니다.어떠한 것들이 추가됐는지 한번 살펴보겠습니다.<header> 머리말을 나타내는 태그<hgroup> 제목과 부제목을 묶는 태그<nav> 메뉴 부분을 나타내는 태그<article> 개별 콘텐츠를 나타내는 태그<section> 제목별로 나눌 수 있는 태그<aside> 좌우측의 사이드바를 나타내는 태그<footer> 제작자의 정보나 저작권의 정보를 나타내는 태그이 태그들 역시 외우려고 하지 마시고요.테스트를 많이 하다보면 익숙해질 테니까요. HTML5의 기본구조 기존 HTML 4.0이나 XHTML에 비해 간단해졌습니다.먼저 DOCTYPE 선언을 보겠습니다.(1)HTML 4.01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">(2)XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">(3)HTML5<!DOCTYPE html>정말 간단해졌죠?메타태그에서 캐릭터셋 선언 역시 심플해졌습니다.(1)기존<meta http-equiv="content-type" content="text/html; charset=UTF-8">(2)HTML5<meta charset="UTF-8"> <img src="https://t1.daumcdn.net/cfile/cafe/2273ED40583FE8F00D" class="txc-image" width="489" style="clear: none; float: none;" border="0" vspace="1" hspace="1" data-filename="html5-1.jpg" exif="{}" actualwidth="489" id="A_2273ED40583FE8F00DB88B"/> 그리고 중요한것이 하나 있습니다.바로 문서의 캐릭터셋에 대한 부분입니다.실제로 실무를 접하면서 개발자들이나 퍼블리셔들이 종종 하는 실수입니다.바로 문서의 실제 캐릭터셋과 문서에서 선언한 캐릭터셋에 대한 일치 여부입니다.문서의 하드웨어는 ANSI(euc-kr) 인데 소프트웨어는 utf-8 이라면 충돌이 나겠죠?그래서 캐릭터셋을 선언해줄 경우에는 항상 문서자체의 캐릭터셋도 확인을 해야 합니다.저는 에디트플러스를 사용하므로 에디트플러스에서 확인하는 방법을 알려드리겠습니다 <img src="https://t1.daumcdn.net/cfile/cafe/274FD343583FE91D21" class="txc-image" width="761" style="clear: none; float: none;" border="0" vspace="1" hspace="1" data-filename="html5-2.jpg" exif="{}" actualwidth="761" id="A_274FD343583FE91D21C0D1"/> 위와같이 파일 -> 새이름으로 버튼을 누르면 다음과 같이 파일명을 저장하는 창이 나옵니다. <img src="https://t1.daumcdn.net/cfile/cafe/255C8642583FE94E20" class="txc-image" width="940" style="clear: none; float: none;" border="0" vspace="1" hspace="1" data-filename="html5-3.jpg" exif="{}" actualwidth="940" id="A_255C8642583FE94E204654"/> 위와같이 인코딩 방식을 문서와 동일하게 셋팅을 하고 저장을 하면 됩니다.다른 편집기들도 비슷한 방식입니다.