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

Slides:



Advertisements
Similar presentations
CI(Continuous Integration) 이학성. C ontinuous I ntegration? 2 지속적으로 품질관리 를 적용하는 과정 개발자가 기존 코드의 수정 작업 을 시작할 때, 코드 베이스의복사본을 받아서 작업을 시작하면서 코드의 변경.
Advertisements

UX, RIA, 그리고 … Silverlight 공도소프트
MobileWeb 시작하기. 디바이스 별 해상도 갤럭시 S : 480*800 ( 옴티머스, 갤럭시, 베가 ) 안드로이드폰 / 아이폰 3G : 320*480 아이폰 4 : 640 *960 아이패드 : 1024*768 갤럭시탭 : 1024*600.
2. 미디어 쿼리 : 다양한 뷰포트의 지원 김은옥 1 학습목표 : 여기서는 미디어 쿼리 작성방법, 뷰포트 지정 방법 등 을 살펴본다.
LOGO Open API 를 이용한 SNS 위젯 개발 프로젝트 최종 발표 4 조 채상혁 윤호선 이재규.
Big Data & Hadoop. 1. Data Type by Sectors Expected Value using Big Data.
1. 기본적인 사용법 2. 다양한 도형 및 스타일 적용 3. SVG 4. 비디오 태그. 캔버스 태그는 HTML5 에서 새로 추가된 엘리먼트로 HTML5 스펙에서 가장 많은 부분을 차지하고 있다. 캔버스라는 개념은 웹 페이지에 그림을 그리는 개념인 캔버스 태그는 애플의.
JSON (JavaScript Object Notation) 인공지능 연구실. Artificial Intelligence Laboratory JSON 소개  JSON( 제이슨, JavaScript Object Notation) 은, 인터넷에 서 자료를 주고받을 때 그.
밥 팀 명 : TTL 조 팀 원 : 김정용 (PM) 서종규 노재현 엄성욱.
1 개요.
난이도 : 초급 제1장 앱 인벤터 소개 및 준비.
2016 유성환 Hybrid MOBILE.
웹 호환성 향상 전략 조 훈 DBDIB DBDIB.
컴퓨터와 인터넷.
컴퓨터 운영체제의 역사 손용범.
Chapter 16 : Struts 프레임워크 2. chapter 16 : Struts 프레임워크 2.
jQuery Mobile을 이해하기 전에 jQuery가 무엇인지 알아야 한다.
CHAPTER 1. 기초 사항.
1. 신뢰할 수 있는 싸이트 등록 인터넷 익스플로러 실행 후 실행
1 HTML5 개요.
Power Java 제3장 이클립스 사용하기.
MS-Access의 개요 1강 MOS Access 2003 CORE 학습내용 액세스 응용 프로그램은 유용한 데이터를
Chapter01 Introduction to HTML5
창의적통합설계 프로젝트 제안서 (LG전자)
운영체제 박상민.
Chapter05 오디오와 비디오 HTML5 Programming.
JSP Programming with a Workbook
4장. 웹로직 서버상에서의 JDBC와 JTA의 운용
소개. 소개 Silverlight, WPF, RIA, UX.... ? Silverlight, WPF, RIA, UX.... ? IT환경의 진화.
Visual Basic .NET 처음 사용하기.
                              데이터베이스 프로그래밍 (소프트웨어 개발 트랙)                               퍼스널 오라클 9i 인스톨.
모바일 자바 프로그래밍 JDBC / WAP Ps lab 오민경.
홈페이지용 그림 활용법 그림 삽입 태그 <IMG> 배경 그림 다루기 그림과 문자열의 어울림
학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
ASP.NET AJAX 비동기 게시판 작성 2007 컴퓨터공학실험( I )
Chapter 03 : 서블릿 ( Servlet ) 개요. chapter 03 : 서블릿 ( Servlet ) 개요.
컴퓨터 프로그래밍 : 실습3 2장 데이터와 식.
제 01 장 인터넷 프로그래밍 개요 학기 인터넷비즈니스과 강 환수 교수.
CHAP 12. 리소스와 보안.
Wireless Java Programming
10강. JSP 본격적으로 살펴보기-II 스크립트릿, 선언, 표현식 지시자 주석 Lecturer Kim Myoung-Ho
인터넷응용프로그래밍 JavaScript(Intro).
1 개요.
7가지 방법 PowerPoint에서 공동 작업하는 다른 사용자와 함께 편집 작업 중인 사용자 보기
2018년 11월 05일 박성진 Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진
HTML5 Canvas 태그 92팸 유승연 안동찬 엄태인 김영재.
HTTP 프로토콜의 요청과 응답 동작을 이해한다. 서블릿 및 JSP 를 알아보고 역할을 이해한다.
Adobe 제품 다운로드 및 설치 방법 안내 Adobe Creative Cloud Adobe License 권한을 받으신 분
ASP.NET AJAX / AJAX Control Toolkit 응용 2008 컴퓨터공학실험( I )
웹디자인
2강_첫번째 안드로이드 프로젝트 에뮬레이터(AVD) 만들기 처음 만들어 보는 프로젝트 전체적인 구성 살펴보기
LabVIEW WiznTec 주임 박명대 1.
데이터 베이스 DB2 관계형 데이터 모델 권준영.
인천대학교 웹과 인터넷 수업 개요 및 내용 소개.
14강. 세션 세션이란? 세션 문법 Lecturer Kim Myoung-Ho Nickname 블스
Cold Spring Harbor Laboratory Press 저널 이용 매뉴얼
암호학 응용 Applied cryptography
3장 JSP프로그래밍의 개요 이장에서 배울 내용 : JSP페이지의 기본적인 개요설명과 JSP페이지의 처리과정 그리고 웹 어플리케이션의 구조에 대해서 학습한다.
12 그리드 시스템.
웹 사이트 분석과 설계 [디자인 리서치] 학번: 이름 : 홍지애.
발표자 : 이지연 Programming Systems Lab.
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
9 브라우저 객체 모델.
슬라이드 쇼의 설정 슬라이드 쇼의 실행 파일과 폴더의 관리 글꼴을 포함해서 저장 웹 페이지로 게시 압축 파일
 6장. SQL 쿼리.
About Html5 모바일인터넷과 이수진.
7 생성자 함수.
6 객체.
JAVA 프로그래밍 16장 JNLP.
20 XMLHttpRequest.
Presentation transcript:

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

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

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

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

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

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

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

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

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

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

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

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

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페이지 표 참고

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

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

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

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

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

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

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

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

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