HTML Hypertext Markup Language XML e Xtensible Markup
웹 표준 기술 이해 • • • HTML (Hypertext Markup Language) XML (e. Xtensible Markup Language) XHTML (e. Xtensible + HTML) CSS (Cascading Style Sheets) Java. Script DOM (Document Object Model)
웹 표준 기술 이해 #3 • XHTML (e. Xtensible Hypertext Markup Language) – – – HTML을 XML 문서 규칙에 맞게 만든 것 미리 정해진 태그 사용 XML과 같이 문법 규칙이 엄격 XML이 사용되는 모든 툴 사용 가능 브라우저 지원 문제가 걸림돌 <!DOCTYPE html PUBLIC “-//W 3 C//DTD XHTML 1. 1//EN” http: //www. w 3. org/TR/xhtml 11/DTD/xhtml 11. dtd> <html xmlns=http: //www. w 3. org/1999/xhtml“ xml: lang=“ko-KR”> <head> <title>웹 문서입니다. </title> </head> <body>. . </body> </html>
웹 표준 기술 이해 #5 • Java. Script & DOM 사용 예 – bold로 표기된 부분이 DOM API 사용부분, 나머 지는 Java. Script var table = document. get. Element. By. Id(“table”); var table. Attrs = table. attributes; for (var i = 0; i < table. Attrs. length; i++) { if (table. Attrs[i]. node. Name. to. Lower. Case() == “border”) { table. border = “ 1”; } } table. summary = “note : increased border”;
01. HTML 5 개요 1. 1 1. 2 1. 3 1. 4 1. 5 1. 6 HTML 5? HTML 5와 HTML 5의 XHTML과 HTML 5가 HTML 5의 관련 API 새로운 기능 HTML 5 만들어지기까지 현황과 미래
01. HTML 5 개요 1. 1 HTML 5? - HTML? 웹 문서를 작성하기 위해 사용되 는 마크업 언어 - HTML 5? HTML + CSS + Javascript를 기 초로 한 Open Web Platform
01. HTML 5 개요 1. 2 HTML 5와 관련 API 일반적으로 HTML 5라 불리는 범위 Geolocation Web Workers Canvas 오프라인 커뮤니케이션 드래그&드롭 Video&Audio Data Cache API File API Web Storage HTML 5 Server-Sent Events Indexed Database API Web Sockets ……… Web SQL Database
01. HTML 5 개요 1. 4 XHTML과 HTML 5는 여러가지 사양을 하나로 정리! HTML 5 HTML 4. 01 DOM HTML XHTML 1. 0 HTML 5 DOM HTML XHTML 5
02. HTML 5 퀵 스타트 2. 2 HTML 문법 기술 방법 - MIME 타입 : text/html - HTML 5 파일 확장자 : . html 또는. htm - HTML 5 파일의 시작부분에 DOCTYPE 선언 : <!DOCTYPE html> - 문자 인코딩 지정 방법 : <meta charset=“UTF-8”> 또는 <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”> 이용
02. HTML 5 퀵 스타트 2. 2 HTML 문법 기술 방법 - HTML 문법 상세 몇 가지. . 1) 종료 태그를 기술해서는 안되는 요소 : meta, area, base, br, col, command, embed, hr, img, input, keygen, link, param, source - 틀린 예) <meta charset=“UTF-8”></meta> - 맞는 예) <meta charset=“UTF-8”> <meta charset=“UTF-8”/>
02. HTML 5 퀵 스타트 2. 2 HTML 문법 기술 방법 - HTML을 이용한 마크업 예 <!DOCTYPE html> <head> <title>문서의 제목입니다. </title> <meta charset=“UTF-8”> <style type=“text/css”>h 1 {font-size: 2 em; }</style> </head> <body> <h 1>HTML을 이용한 마크업 예제</h 1> <p>단락 1</p> <input type=“text” disabled> </body> </html>
02. HTML 5 퀵 스타트 2. 3 XHTML 문법 기술 방법 - XHTML을 이용한 마크업 예 <? xml version=“ 1. 0” encoding=“UTF-8”? > <html xmlns=http: //www. w 3. org/1999/xhtml> <head> <title>문서의 제목입니다. </title> <meta charset=“UTF-8”> <style type=“text/css”>h 1 {font-size: 2 em; }</style> </head> <body> <h 1>HTML을 이용한 마크업 예제</h 1> <p>단락 1</p> <input type=“text” disabled> </body> </html>
02. HTML 5 퀵 스타트 2. 4 HTML 5의 새로운 요소 - 문서 구조에 관한 것 : section, article, aside, nav, footer, header, hgroup - 외부 콘텐츠의 삽입 : figure, video, audio, source, canvas, embed -폼 : keygen, output, progress, meter - 텍스트 및 기타 : mark, ruby/rt/rp, time, command, details, datalist
02. HTML 5 퀵 스타트 2. 7 HTML 5 코딩 팁 - 오래된 브라우저에서 새로운 요소를 사용하려면. . : 새로운 요소가 의도대로 표시되도록 CSS 이용 예1) 새로운 요소 중 block요소로 표시되는 것 address, article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } 예2) 기본적으로 표시되지 않는 것 [hidden], command, datalist, menu[type=context], rp, source { display: none; }
03. Canvas 3. 2 캔버스 사용 방법 1) canvas 태그 기술 2) canvas DOM 객체 생성 3) get. Context(“ 2 d”) 메소드로 그리기 컨텍스트 생성 4) 그리기 컨텍스트 메소드로 그림 그리기 ※ 그리기 컨텍스트 예) 그림 3. 1 <canvas id="canvas 1" width="300" height="200"></canvas> var canvas = document. get. Element. By. Id("canvas 1"); var context = canvas. get. Context("2 d"); context. fill. Rect(0, 0, 150, 100); context. fill. Text("Hello, Canvas!", 155, 110);
03. Canvas 3. 10 텍스트 삽입 - 캔버스에 문자열 삽입 fill. Text(text, x, y, max. Width) : 채워진 텍스트 stroke. Text(text, x, y, max. Width) : 텍스트의 외곽선만 표시 font 속성 : 글꼴, 글꼴 크기 지정 text. Align 속성 : 문자열 가로방향 위치 left, right, center, start, end - text. Baseline : 텍스트가 표시되는 기준선 top, hanging, middle, alphabetic, ideographic, bottom - measure. Text(text) : 삽입한 문자열의 여러 정보 확인 - 예제) 그림 3. 40
03. Canvas – Sample #1 • Oooze 게임 – http: //www. gamesforthebrain. com/game/oo oze/
03. Canvas – Sample #2 • Flashy Tetris – http: //aduros. emufarmers. com/easel/
03. Canvas – Sample #3 • bomomo – http: //bomomo. com/
03. Canvas – Sample #4 • Canvas Painter – http: //caimansys. com/painter/index. html
03. Canvas – Sample #5 • Mandelbrot Set(프랙탈 뷰어) – http: //www. atopon. org/mandel/
03. Canvas – Sample #6 • Canvas Slideshow – http: //www. lo 2 k. net/v 7/lab/flickr/index/flickr_id/ 28791827@N 00
03. Canvas – Sample #7 • Tilt-Shift photo effect in Canvas – http: //www. p 01. org/releases/Tiltshift_photo_effect_in_Canvas/
03. Canvas – Sample #8 • Canvas Animation – http: //cs. helsinki. fi/u/ilmarihe/canvas_animati on_demo/mozcampeu 09. html • A canvas slippy map – http: //concentriclivers. com/slippymap. html
03. Canvas – 참고 Site • HTML 5 Spec (WD) - HTML 5 Canvas 2 D Context • Canvas Animation 예제 – HTML Canvas Demos – 모질라 개발자 센터
- Slides: 63
