1. HTML5란? 2. HTML5의 역사와 흐름 3. HTML5와 CSS의 브라우저 지원

Presentation on theme: "1. HTML5란? 2. HTML5의 역사와 흐름 3. HTML5와 CSS의 브라우저 지원"— Presentation transcript:

1 1. HTML5란? 2. HTML5의 역사와 흐름 3. HTML5와 CSS의 브라우저 지원

2 1. HTML5란? HTML5는 HTML 4.01과 XHTML 1.0, XHTML 1.1을 계승하는 차세대 웹 기술로 HTML 마크업이 1990년대 초 인터넷에 소개된 이래로 계속적으로 진화를 거듭해 왔다. 기존에 존재하던 HTML의 한계를 극복하고, 기존 기술들의 설계를 개선하기 위해 W3C에서 HTML5라는 새로운 기술이 정의되었다. 마이크로소프트, 모질라, 애플, 구글, 오페라 등 모든 웹브라우저 벤더가 참여하고 있는 산업 표준이기도 하며, 현재 파이어폭스, 크롬, 오페라, 사파리 등 브라우저의 최신 버전에서 많은 HTML5 태그가 지원되고 있다.

3 1. HTML5란? 시맨틱 태그 지원 HTML5에 시맨틱 태그가 도입됨으로써 기존 <div> 태그를 사용하여 페이지를 구조화 하던 대신 문서 구조에 적합하게 header, footer, nav, section 같은 구조화 마크업을 사용하여 웹 페이지를 보다 잘 설계할 수 있도록 하였다. 웹 개발자들이 구조적으로 웹 페이지를 재사용 가능하게 만들어준다던지, 더 나아가 보이는 화면뿐만 아니라 그 화면을 구성하는데 사용되는 소스 레벨을 재사용할 수 있게 해준다. 그림은 HTML5 웹 페이지를 구성하는 영역을 표현한 것이다. 기존 HTML4에서는 각 영역들을 <div id="footer">와 같이 일일이 <div> 태그에 id를 부여하여 구현하였지만, HTML5에서는 시맨틱 태그 자체로 정의하여 사용한다.

4 1. HTML5란? HTML5 웹 페이지를 구성하는 각 영역 요소
<header> 요소는 웹 페이지의 머리글을 정의하며, 전체 페이지에서도 사용되지만 일부 <article>,<aside> 태그의 머리말로도 정의 가능하다. <nav> 요소는 웹 페이지의 탐색 링크를 위해 문서 전체 혹은 섹션의 네비게이션 영역을 표현하는 웹 페이지의 기본 탐색 링크를 위한 영역이다. <section> 요소는 실제 문서 내용을 담은 문서의 주요 영역을 정의한다. <article> 요소는 문서에서 독립적으로 하나의 컨텐츠로 구분되어 독립적으로 배치된 내용을 담는 영역이다. <aside> 요소는 주로 페이지 내용보다는 관련된 링크, 광고 배너와 같은 보조 컨텐츠를 위해 배치된 영역이다. <footer> 요소는 웹 페이지의 바닥글을 정의한다.

5 1. HTML5란? 웹 폼 기능 지원 HTML5에서는 사용자의 입력 정보를 받기 위한 보다 손쉬운 웹 폼 기능을 지원한다.
웹 폼 기능은 기존 HTML4에 이미 존재했던 <input> 태그를 통해 구현할 수 있는데, HTML5에서는 여기에 각종 타입 속성들을 새로 추가하여 range, number, date, search, tel, url, color 등의 기능을 지원한다. 현재 <input> 태그의 속성으로 총 12가지 형태의 각종 타입이 제공되고 있으며, 개발자는 해당 기능을 속성으로 정의하기만 하면 브라우저는 기능별 데이터 타입의 유효성까지 검증 해준다.

6 1. HTML5란? 리치 웹 미디어 기술 지원 HTML5에서는 리치 웹 미디어 기술을 위해 캔버스 및 SVG, Video 등의 태그를 제공한다. 캔버스 태그는 웹에서 2차원 그래픽을 그리기 위한 도구를 제공하며, 도형을 회전 및 변환하기도 하고 그라디언트 등 각종 효과를 적용할 수도 있다. 벡터 기반의 Scalable한 그래픽을 지원하는 SVG 태그 및 내장 비디오 및 오디오를 재생하는 Video 태그를 통해 리치한 웹 미디어 페이지를 손쉽게 구현 가능하다.

7 1. HTML5란? HTML5에서 리치한 웹 페이지를 위해 지원되는 주요 특징 2차원 그래픽 API에 사용하는 캔버스 요소
내장 비디오 및 오디오 재생을 위한 video, audio 요소 키/값이나 SQL 기반 데이터베이스 지원을 위한 내장 저장소 기능 오프라인 웹 애플리케이션 기반 API 웹 애플리케이션이 독립적으로 특정 프로토콜 및 미디어 형식을 등록할 수 있는 API 드래그 앤 드롭 제스쳐를 지원할 수 있는 API

8 2. HTML5의 역사와 흐름 웹 기술은 쉬운 마크업 언어를 사용하여 정보를 표현하고 다양한 디바이스의 브라우저에서 데이터를 효과적으로 풍부한 UX 기반으로 활용할 수 있다는 점에서 계속적으로 발전되어 왔다. HTML은 1993년 HTML 1.0이 팀 버너스리(Tim Berners-Lee)에 의해 고안되어 발표된 이후 해를 거듭하며 HTML은 발전에 발전을 거듭하였다. 그리고 1997년 HTML 3.2 및 HTML 4.0을 개발하면서 W3C에서 HTML의 버전을 관리하기 시작하였다. XHTML은 HTML이 갖는 단순함이라는 단점을 극복하기 위해 나온 표준임에도 불구하고 오히려 너무 복잡하다는 평을 받았다. 이는 XML 기반의 제한된 문서 구조를 개발자들에게 요구했기 때문이다.

9 2. HTML5의 역사와 흐름 WHATWG는 Apple, Mozilla, Opera가 공동으로 창립한 단체로, 다양한 웹 어플리케이션에 효과적으로 사용할 수 있고 보다 단순하면서도 다양한 확장성을 갖는 HTML5의 스펙을 정의하는 워킹그룹이다. 2007년 W3C에서 구성한 HTML 워킹그룹과 공동으로 지금의 HTML5의 규격을 정의하기 시작하였으며 2008년 1월 그 작업 초안을 발표하기에 이르렀다. HTML5의 주요 기능들은 이미 세계 주요 IT 기업들이 발 빠른 적용을 준비하고 있다. 구글은 최근까지 주력하여 개발하였던 구글 기어스(Google Gears) 대신 HTML5에 집중하고 있으며, 유튜브의 경우에도 기존의 방식인 플래시 플레이어를 사용하지 않고 내장 비디오 태그를 사용하여 동영상을 재생하도록 하고 있다.

10 2. HTML5의 역사와 흐름 HTML5에서 새로 정의하는 기능들은 모바일 환경에서 요구하는 웹 앱(Web App)의 요구사항에 적합하며, 앞으로도 관련 표준들이 추가적으로 보강될 예정이다. 웹 앱은 안드로이드, 아이폰과 같이 각기 다른 모바일 OS에 대해 대응하는 네이티브 앱을 개발하지 않고 대신 HTML5의 웹 지원 기능을 이용하여 여러 가지 디바이스를 지원할 수 있어 기존 네이티브 앱(Native App)에 비해 훨씬 비용을 절감할 수 있는 효율적인 접근방법을 제공한다. 웹 앱이 향후 멀티 플랫폼을 대처할 수 있는 중요한 솔루션이라는 데는 이의가 없다. 따라서 HTML5를 공부하면서 웹 앱을 개발하는 것을 함께 공부해보는 것도 최신 기술을 대응하는 좋은 방법이다.

11 3. HTML5와 CSS의 브라우저 지원 HTML와 CSS로 웹 페이지를 구현할 때 웹 개발자가 주의해야 할 점이 있다. 바로 웹 페이지가 모든 사용자들의 환경(OS, 브라우저 종류, 해상도 등)을 완벽하게 지원할 수 없다는 점이다. 브라우저별 설정 메뉴를 보면 언어 인코딩 및 글자 크기 등을 조절할 수 있는 옵션을 내장하고 있는데, 이것은 개발된 웹 페이지가 보여지는 방식이 서로 다를 수 있다는 것을 보여주는 한 예이다. 웹 페이지 개발자는 자신의 컴퓨터에서 최적의 화면으로 완벽하게 보여지는 것으로 작업을 끝내서는 안 되고, 주요 브라우저별, 해상도별로 사용자들에게 최적화된 페이지를 제공해주어야 한다.

12 3. HTML5와 CSS의 브라우저 지원 3.1 브라우저별 HTML5 지원 여부
따라서 페이지를 로딩하는 동적인 시점에 주요 태그별로 지원 여부를 확인하고 대체 코드를 삽입하는 것이 정확한 방법이다.

13 3. HTML5와 CSS의 브라우저 지원 3.1 브라우저별 HTML5 지원 여부
현재까지 조사된 브라우저별 주요 태그 지원 여부 조사 비교 Trident : IE, Windows Internet Explorer에서 사용하는 레이아웃 엔진 Gecko : Firefox, Mozilla에서 사용하는 레이아웃 엔진 Webkit : Google Chrome, Safari(Desktop & Mobile), 안드로이드 브라우저에서 사용하는 레이아웃 엔진 Presto : Opera, Opera Mobile, 닌텐도 DS 등에서 사용하는 레이아웃 엔진 세부사항 20~21페이지 표 참고

14 3. HTML5와 CSS의 브라우저 지원 3.1 브라우저별 HTML5 지원 여부

15 3. HTML5와 CSS의 브라우저 지원 3.2 폴백 컨텐츠(Fallback Contents) 작성
브라우저는 웹 페이지를 로딩한 후 페이지의 HTML 엘리먼트들을 표현한 객체 모음인 DOM(Document Object Model)을 생성한다. 모든 엘리먼트는 다른 객체로 DOM에 표현되고 window, document와 같은 전역 객체들도 포함된다. 웹 페이지를 로딩한 후, 웹 페이지 DOM 객체에 내가 원하는 태그가 제대로 파싱되어 포함되어있는지 여부를 확인하면 브라우저가 HTML5의 태그를 지원하는지 여부를 쉽게 확인할 수 있다.

16 3. HTML5와 CSS의 브라우저 지원 3.2 폴백 컨텐츠(Fallback Contents) 작성
HTML5 태그별 Modernizr 속성의 매핑 테이블

17 3. HTML5와 CSS의 브라우저 지원 3.2 폴백 컨텐츠(Fallback Contents) 작성
Modernizr를 추가한 문서는 HTML5의 지원 사항을 확인할 수 있는 boolean형 속성들의 집합인 Modernizr 객체를 생성한다.

18 3. HTML5와 CSS의 브라우저 지원 3.2 폴백 컨텐츠(Fallback Contents) 작성
경우에 따라 태그의 지원 여부 뿐 아니라 한 단계 더 들어가 태그 내부의 속성값을 확인해야 할 때도 있다. 예를 들어 캔버스 태그의 경우 텍스트 API는 뒤늦게 스펙으로 정의되었기 때문에 캔버스 태그는 지원하더라도 텍스트 API는 지원하지 않을 수 있기 때문이다.

19 3. HTML5와 CSS의 브라우저 지원 3.2 폴백 컨텐츠(Fallback Contents) 작성
어떤 태그는 태그 내부에 타입과 같은 속성이 또 있어서 한 번 더 체크를 요하는 경우도 있다. 예를 들면 비디오 태그 같은 것인데, 이를 확인하기 위해서는 먼저 사용하는 브라우저에서 비디오 태그 자체의 지원하는지 여부를 확인하고, 재생하려는 동영상 타입의 지원 여부도 함께 확인해야 한다.

20 3. HTML5와 CSS의 브라우저 지원 3.2 폴백 컨텐츠(Fallback Contents) 작성
Modernizr의 자바 스크립트 파일을 <script> 태그로 추가하는 것은 동일하다. HTML5 태그의 지원 여부를 확인하는 방법과 크게 다르지는 않으나 다만 아래와 같이 <html> 태그에 'class="no-js"'를 추가해야 한다.

21 3. HTML5와 CSS의 브라우저 지원 3.2 폴백 컨텐츠(Fallback Contents) 작성
CSS3의 Modernizr 속성 매핑 테이블은 아래와 같다.

22 3. HTML5와 CSS의 브라우저 지원 3.2 폴백 컨텐츠(Fallback Contents) 작성
'multi-column layout' 태그의 지원 여부를 확인해보자. 만약에 해당 속성을 지원하지 않을 때를 대비해 폴백 컨텐츠를 작성하려면 위 Modernizr 속성 앞에 'no-'라는 접두어를 붙이면 된다.