PowerPoint Presentation

Size: px

Start display at page:

Download "PowerPoint Presentation"

진성 저
6 years ago
Views:

1 웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 1

2 05 웹페이지의작성 05 Web Page Creation - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 2

3 차례 5.1 홈페이지와 HTML 문서 HTML 의역사 HTML 문서의구조와텍스트관련태그 하이퍼링크및멀티미디어포함하기 다양한형식의내용구성하기 5.2 동적웹페이지 동적 HTML 의특징 스타일시트의개념및 CSS 자바스크립트 (JavaScript) 및 DOM 의작동원리 5.3 서버연동페이지 CGI 원리와 Form 요소 CGI 프로그래밍 웹서버프로그램 PHP 웹서버프로그램 ASP 와 JSP 5.4 웹문서교환표준 XML XML 의개요 XML 문서작성원리 5.5 새로운문서표준 HTML HTML5 의탄생배경및특징 HTML5 에서변경된엘리먼트 애플리케이션개발을위한다양한 API 모바일웹 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 3

4 HTML 의역사 _1 HTML(HyperText Markup Language) 팀버너스리가웹 (WWW; World Wide Web) 방식제안 웹에서하이퍼텍스트를구현하기위해 HTML 언어제시 웹페이지를위한마크업언어 활자인쇄시대의마크-업에서유래 문서의속성을설정하기위한마크업을태그 (Tag) 로표시 HTML 언어는 SGML 표준에따라정의 확장자는 *.htm, *.html - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 4

5 HTML 의역사 _2 마크업언어? 태그등을이용하여데이터의구조를명기하는언어 SGML, HTML, XML, XHTML, SVG, MathML 등 SGML(Standard Generalized Markup Language) 다양한전자문서의구조 / 내용기술을위한방법의국제표준 1986년 ISO에서국제표준으로제정 가장큰특징은메타언어 문서의내용을기술하는것이아니라문서의유형을만드는역할 HTML은 SGML로정의된문서형식중의하나 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 5

6 HTML 의역사 _3 HTML 의발전 간단하여배우기쉽고사용편리하여인터넷의대중화에큰기여 1994, HTML 2.0, 웹컨소시엄 (W3C) 결성 1997, HTML 3.2 & HTML 4.0 동적 HTML(Dynamic HTML) : HTML + CSS + JavaScript 1998, SGML 을간소화한 XML 제정 문서나자료의교환이위해새로운언어의요구가대두 2000 년 XHTML 로발전 HTML5 2006, 웹브라우저개발사 WHATWG 결성 2007, W3C 와 WHATWG 공동워킹그룹 2014, HTML5 최종표준안 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 6

7 HTML 문서구조와텍스트관련태그 _1 HTML 문서의요소 (Element) 시작태그, 내용, 끝태그로구성 < 태그이름속성 1=" 값 " 속성 2=" 값 "> 문서의내용 </ 태그이름 > HTML 문서의구조 <!DOCTYPE> <html> <head> <title>,<meta> 등의태그포함 <body> 문서의내용을표현하는부분 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 7

8 HTML 문서구조와텍스트관련태그 _2 텍스트관련태그 제목줄 <h1>~<h6>, 문단 <p>, 줄바꾸기 <br>, 수평선 <hr > 문자속성 <strong>, <sub>, <sup>, <small> 특수문자 & 이름 ; 예, & < > ( 공백 ) 은 & < > " 로표기 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 8

9 하이퍼링크및멀티미디어포함하기 _1 하이퍼링크태그 <a href=" 연결하려는문서의주소혹은장소의 #ID">... </a> 멀티미디어관련태그 <img src=" 이미지파일 " width=" 가로 " height=" 세로 > : 이미지 <embed src=" 비디오 / 오디오파일주소 "> : 비디오 / 오디오파일 <video controls src=" 비디오파일주소 "> : HTML5 비디오파일 <audio controls src=" 오디오파일주소 "> : HTML5 오디오파일 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 9

10 하이퍼링크및멀티미디어포함하기 _2 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 10

11 하이퍼링크및멀티미디어포함하기 _3 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 11

12 다양한형식의내용구성하기 _1 목록 (List) 순서없는 (Unordered) 목록 : <ul>... </ul>, <li> 순서있는 (Ordered) 목록 : <ol>... </ol>, <li> 정의목록 (Definition List) <dl>... </dl> <dt>...</dt>, <dd>...</dd> - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 12

13 다양한형식의내용구성하기 _2 테이블 <table> 태그 각줄 : <tr>...</tr> 각칸 : <td>...</td> 칸합치기 : rowspan, colspan 제목 / 주석 <caption> - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 13

14 동적 HTML 의특징 _1 동적상호작용 예제 서버와의상호작용 PHP, JSP, ASP, CGI 등을이용 사용자의입력 => 서버에서처리후 => 다시사용자에게전송 상당한시간과서버의부담 브라우저에서간단한상호작용 동적 HTML : 웹브라우저내에서자체적으로실행 서버에부담이없고이벤트에즉각적인반응 하노이탑게임 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 14

15 동적 HTML 의특징 _2 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 15

16 스타일시트의개념및 CSS_1 스타일시트 (Stylesheet) 웹문서외형의스타일을좀더손쉽고빠르게설정하거나, 일반적인 HTML 태그로는외형을지정할수없었던부분 웹문서구성요소에크기, 색상, 글자간격, 문단간격, 위치등지정 CSS(Cascading Style Sheet) 기능의복잡도에따라레벨 1, 레벨 2, 레벨 3 CSS3 는 2005 년이후모듈별로구분하여작성, 현재개발중 CSS 스타일정의 선택자스타일속성 : 값 ; 스타일속성 : 값 ;... 예 ) h2 { display: block; border-style: double; border-color: red; } 선택자에는일반태그, 혹은 id 이름 (# 로시작 ) - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 16

17 스타일시트의개념및 CSS_2 CSS 정의방법 <style> 태그내 선택자에태그, 혹은 id (# 이름 ) 인라인스타일 태그내에 style 속성 외부 CSS 파일연결 <link> 태그이용 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 17

18 스타일시트의개념및 CSS_3 자주사용되는 CSS 스타일속성 폰트관련속성 : font-family, font-size, font-style, font-weight,... 텍스트관련속성 : letter-spacing, word-spacing, vertical-align, text-align, text-indent, texttransform, text-decoration 배경 / 색상관련 : color, background-color, background-image 목록관련 : list-style-type, list-style-position, list-style-image 박스모델관련 : margin, padding, border-style, border-width, display 속성 block : 줄바꾼다 in-line : 줄안바꾼다 list-item : 목록형태 none : 안보여준다 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 18

19 스타일시트의개념및 CSS_4 박스모델 외부공백 (margin) 및내부여백 (padding) 을조절가능 경계선 (border) 지정도가능 레이어 (Layer) 개념 웹문서의구성요소위치를자유롭게지정하기위하여 <div>, <span> 요소에 id 혹은 class 이름설정하여스타일지정 <div> 요소는원하는부분을블록으로 <span> 요소는인라인형태로설정 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 19

20 스타일시트의개념및 CSS_5 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 20

21 CSS3 에서다양한기능추가 앞의예제 : 박스의모서리처리, 그림자효과, 다단 (Multi-column) 지정, 2D/3D 기하변환, 텍스트의그림자등효과설정 박스관련속성 : border-radius, box-shadow, border-image 폰트지정규칙 문자관련속성 : text-shadow, word-wrap, word-break, text-outline, text-justify 배경 : background-size, background-origin, background-clip 2D/3D 변환속성 : translate(), rotate(), scale(), skew(), matrix() 다단관련속성 : column-count, column-gap, column-rule, column-width 이외장면변환 (Transition), 애니메이션, 사용자인터페이스속성 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 21

22 자바스크립트및 DOM 의작동원리 _1 자바스크립트의역할 웹페이지상에서모든사건을처리및모든문서객체의제어 HTML 문서와사용자사이의상호작용을가능하게하며 멀티미디어자료와애니메이션을효과적으로표현 웹브라우저에서실행 자바스크립트언어 객체기반의 (Object-based) 스크립트언어 넷스케이프사가개발, 유럽표준은 ECMAScript라는명칭 C 및자바언어와문법은유사하지만성격이다른스크립트언어 윈도우, Mac과같이서로다른플랫폼에서도동일한실행이가능 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 22

23 자바스크립트및 DOM 의작동원리 _2 자바스크립트코드작성 <script type="text/javascript"> 자바스크립트코드 </script> - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 23

24 자바스크립트및 DOM 의작동원리 _3 자바스크립트언어문법 변수의선언이간단 데이터유형자동결정 연산자 ( 산술 )+, -, *, /, ++, --, % ( 논리 )&&,,! ( 비교 )==,!=, >, >=, <, <= 제어문및객체제어 if 문, switch 문, for 문, while 문, for...in 문, with 문, new 연산자 이벤트프로그램 함수 이벤트종류 : load, unload, click, mouseover, mouseout, error 등 < 태그이벤트처리기 =" 자바스크립트함수혹은프로그램 "> 예 ) <td onclick="bgchange('cyan')" bgcolor="cyan">c</td> 호출되기이전에정의 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 24

25 자바스크립트및 DOM 의작동원리 _4 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 25

26 자바스크립트및 DOM 의작동원리 _5 자바스크립트객체 (Object) 각객체는다양한속성 (Property) 과메소드 (Method) 보유 시스템내장객체 document, window, history, location, Array, Math, Form, String 등 사용자정의객체 사용자가웹문서에서정의한모든요소, id 지정하여접근가능 문서객체모델 (Document Object Model, DOM) 문서내모든객체에접근하고수정할수있도록 API 규정 HTML 문서및 XML 문서에적용가능 자바스크립트혹은 C/C++ 언어나자바등다양한언어사용가능 웹문서를하나의트리형태로표현하여모든객체를노드로표현 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 26

27 자바스크립트및 DOM 의작동원리 _6 DOM 트리 트리운행방식에따라모든노드를접근할수있도록여러가지속성및함수 API 제공 예제문서에서, 첫번째 <p> 단락에접근하려면 document.documentelement.lastchild.firstchild - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 27

28 CGI 원리와 Form 요소 _1 CGI(Common Gateway Interface) 서버에서정보를검색하거나보안이필요한웹페이지경우필요 웹브라우저, 웹서버, 응용프로그램간의인터페이스 사용자가입력하면브라우저는웹서버에 CGI를통해요청 서버는응용프로그램으로전달하여정보를처리 처리결과는 HTML 페이지로구성하여사용자웹브라우저로전달 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 28

29 CGI 원리와 Form 요소 _2 <form> 요소 HTML 문서에서서버프로그램으로데이터를전달하는데사용 <form action=" 서버프로그램주소 " method="get 또는 POST">... 입력양식... </form> GET 은 CGI 환경변수를통해, POST 는표준입력방법으로데이터전달 입력형식 <input type=" 입력필드형식 " name=" 입력필드이름 " value=" 초기값 "> 입력필드형식 : text( 텍스트 ), password( 암호 ), radio( 라디오버튼 ), chechkbox( 체크박스선택 ), submit( 전송버튼 ), reset( 취소버튼 ), buttom( 일반버튼 ) <textarea name=" 입력필드이름 " rows=" 라인수 " cols=" 폭 ">: 긴텍스트 <select name="" size= ""> <option>... 항목...</option>... </select>: 선택목록 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 29

30 CGI 원리와 Form 요소 _3 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 30

31 CGI 원리와 Form 요소 _4 HTML5 에서개선된입력기능 새로추가된 form 입력유형 type = datetime, date, month, week, time: 달력에서날짜 / 시간입력 type = number, range: 제한된범위의숫자로입력, 스크롤바로입력 type = color, file, search: 색상표색상선택, 파일보기에서파일선택 type = tel, url, 데이터의형식이맞는지유효성확인 <datalist> 요소 스크롤목록이아닌펼침목록을작성 <keygen> 요소 암호키를제공 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 31

32 CGI 원리와 Form 요소 _5 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 32

33 CGI 프로그래밍 _1 CGI 프로그램 웹브라우저로부터의사용자요구를받아들여웹서버와응용프로그램을연결하는프로그램 Perl, C/C++, Python 등의언어를많이사용 HTML 문서에서 CGI 실행방법 <form> 요소에서 submit 버튼으로전송 <a> 요소의 href 속성을이용 <a href=" 서버프로그램주소? 변수명 = 값 & 변수명 = 값 &...">...</a> 예, <a href="/cgi-bin/sample35.cgi">... </a> <a href=" 서버프로그램주소? 다음에 name=value 형식, 2 개이상은 & 로연결, 공백은 + 로, 한글은 % 뒤 16 진수로표현 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 33

34 CGI 프로그래밍 _2 CGI 프로그램실행결과전송 우선헤더정보출력 Content-type: text/html 해당결과를 <html> 파일형식으로출력 CGI 환경변수 CGI 프로그램내에서전달인자전송혹은필요한정보수집 환경변수예 사용자 IP 주소 (REMOTE_ADDR), 서버도메인이름 (SERVER_NAME), CGI 프로그램이름 (SCRIPT_NAME), 전달방식 (REQUEST_METHOD), 데이터길이 (CONTENT_LENGTH), 전달문자열 (QUERY_STRING) 등 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 34

35 CGI 프로그래밍 _3 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 35

36 웹서버프로그램 PHP_1 PHP(Professional Hypertext Preprocessor) 서버측에서실행되는프로그램 HTML 문서안에 PHP 스크립트삽입, PHP 스크립트가서버에서처리 그결과물인 HTML 태그만이클라이언트에서보여줌 사용자는소스코드에접근못하므로소스코드의보안성보장 Aphache 서버에서사용 다양한데이터베이스서버에대해사용하기간편한인터페이스제공 LAMP 환경 : Linux 환경, Apache 서버, PHP와 MySQL을연동 PHP 스크립트코드 HTML 문서내에서 <?php 와?> 사이에위치 스크립트코드들은서버에서실행된후결과가 HTML 문서내에포함 변수는 $ 로시작, 배열은 Array 함수를이용, 출력은 echo 함수이용 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 36

37 웹서버프로그램 PHP_2 <form> 입력값의사용 GET 메소드의경우 : $_GET[" 변수명 "] POST 메소드의경우 : $_POST[" 변수명 "] - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 37

38 웹서버프로그램 PHP_3 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 38

39 웹서버프로그램 ASP 와 JSP_1 ASP(Active Server Page) 윈도우기반웹서버 IIS(Internet Inofrmation Server) 필요 비주얼베이직스크립트 (VBScript) 나자바스크립트사용 HTML 문서내에서 <% 와 %> 태그사이에위치 서버에서처리되어 HTML 태그로변환후사용자에게보여지는부분 출력은 Response.write로수행, 혹은축약형으로 <%= 표기사용 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 39

40 웹서버프로그램 ASP 와 JSP_2 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 40

41 웹서버프로그램 ASP 와 JSP_3 JSP(Java Server Page) ASP와매우유사한점이많은서버측스크립트 JSWDK(Java Server Web Development Kit) 라는자바서버설치하여사용 기존의자바프로그램과연결이가능 자바프로그램은 JDBC 를통해데이터베이스를액세스하고 SQL 문을이용하여데이터베이스를검색 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 41

42 XML 의개요 _1 새로운마크업언어의필요성 웹문서를교환하거나특히원하는정보만을효율적으로검색하기위해서는보다강력한태깅언어가필요 SGML(Standard Generalized Markup Language) 의후속개념 SGML 의특징 마크업언어를정의하기위한메타언어 (Meta Language) 문서의논리적구조, 내용, 출력스타일을각각분리하여표현 HTML SGML 로태그를정의하여개발 사용하기간단하여인터넷의대중화에큰기여 태그가고정되어기능이제한적, 정교한웹페이지출력곤란 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 42

43 XML 의개요 _2 XML(eXtensible Markup Language) 의출현 SGML 보다는훨씬간단하면서 SGML 의장점을가진마크업언어 HTML 은문서를웹환경에서보여주기위해, XML 은웹환경에서문서를저장하고원하는정보를검색 / 교환하기위해 XML 의발전과정 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 43

44 XML 문서작성원리 _1 XML 의특징 문서의구조정의, 내용작성, 스타일지정을분리하여작성 문서형선언부 (DTD: Data Type Definition) 에서구조정의 작성된 XML 문서 : 실제문서 (DI: Document Instance) 출력스타일 : CSS(Cascading Style Sheet) 나 XSL(eXtensible Stylesheet Language) 스타일시트언어로지정 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 44

45 XML 문서작성원리 _2 DTD 로문서구조정의하기 문서구조정의방법 : DTD, Schema, RelaxNG 등 태그는 ELEMENT 로속성은 ATTLIST 로정의 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 45

46 XML 문서작성원리 _3 문서의출력을위한스타일시트작성하기 XSL(eXtensible Stylesheet Language) 또는 CSS(Cascading Style Sheet) 를이용하여문서의스타일지정 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 46

47 XML 문서작성원리 _4 XML 문서의출력과정 응용프로그램개발을위한 API XML 문서를접근, 변경, 처리를원활히수행하도록 API 제공 대표적인 API DOM(Document Object Model) 과 SAX(Simple API for XML) 방식 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 47

48 XML 문서의활용 _1 가장활용되는분야 : 전자상거래와전자문서 전자상거래나의미기반검색등에서의데이터교환분야 전자출판, 디지털콘텐츠의표현및교환을위한문서교환분야 최근오피스문서 docx, pptx - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 48

Multimedia Integration Language) : 멀티미디어정보의동기화 XHTML,

49 XML 문서의활용 _2 새로운마크업언어생성 MathML : 수학공식표현 SVG(Scalable Vector Graphics) : 벡터그래픽스 SMIL(Synchronized Multimedia Integration Language) : 멀티미디어정보의동기화 XHTML, HTML5 모바일 SVG 실행예제 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 49

50 HTML5 의탄생배경및특징 1997 년 HTML 4.0 이후큰변화 XML 및 Ajax 등에기반한웹2.0 기술의발전 XHTML의발전은미흡 2006년 WHATWG에서 HTML 후속버전의개발추진 W3C가 WHATWG과의협력하에 HTML5 워킹그룹신설 리치인터넷애플리케이션 (RIA) 개발 리치사용자인터페이스 (Rich User Interface) 구현이필요 어도비플래시나 MS 실버라이트등의플러그인이용 최근에는 XML, CSS, 자바스크립트, Ajax 등웹표준기술사용 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 50

51 HTML5 의사양의특징 마크업에는주로의미를부여, 스타일은가급적 CSS3 활용하도록 플러그인을적게사용하고최대한웹표준을적용하도록 SVG와 MathML 기본지원, 자바스크립트와 HTTP도지원 리치인터넷애플리케이션 (RIA) 의편리한개발위해다양한 API 제공 위치관련및오프라인등모바일환경까지고려한 API를제공 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 51

52 HTML5 에서변경된엘리먼트 _1 의미를부여할수있는구조적마크업 문서형선언 <!doctype html> 추가된구조적마크업 <header> 머리글부분 <footer> 꼬리말부분 <nav> 메뉴의내비게이션 <section> 본문내용 <hgroup> 제목줄 <article> 세부내용 <aside> 별도의내용을분리된위치에 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 52

53 HTML5 에서변경된엘리먼트 _2 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 53

54 HTML5 에서변경된엘리먼트 _3 다양하고편리한웹폼 (WebForm) 입력기능 <input> 태그에추가된 type 속성 type = datetime, date, month, week, time: 달력에서날짜 / 시간입력 type = number, range : 제한된범위의숫자로입력, 스크롤바입력 type = color, file, search : 색상표에서선택, 파일보기에서파일선택 type = tel, url, 데이터의형식이맞는지유효성확인 콤보박스를작성할수있는 <datalist> 암호키를선택하는 <keygen> 등의태그 웹미디어기능의강화 <video> 태그와 <audio> 태그추가 <source> 태그를사용하여미디어소스파일을지정 <canvas> 태그추가 : 래스터그래픽스기반각종도형및조작 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 54

55 HTML5 에서변경된엘리먼트 _4 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 55

56 HTML5 에서변경된엘리먼트 _5 의미 (Semantics) 를가지는요소 향후검색엔진에서이를활용하면많은도움예상 비디오 / 오디오포함한그림은 <figure>, 캡션은 <figcaption> <time> 은시간을표현, <mark> 는별도로표시한콘텐츠를표시 방점등루비텍스트를표현 <ruby>, <rt>, <rp> 태그사용 사용중단엘리먼트 CSS 로완전대체가능한스타일기반요소는많이배제 <basefont>, <center>, <big>, <font>, <s>, <strike>, <tt>, <u> 등 웹접근성에많은지장을초래하고있는 <frame> 다른엘리먼트와사용법에서혼란을주는 <applet>, <acronym> - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 56

57 애플리케이션개발을위한다양한 API_1 드래그앤드롭 (Drag & Drop) API 웹브라우저내에서다양한요소를드래깅 (Dragging) 하는 API 해당하는엘리먼트에드래그속성을 draggable="true" 로설정 드래깅이벤트에는 dragstart, drag, drop, dragend, dragover, dragenter, dragleave 등 오프라인웹애플리케이션 (Offline Web Applications) API 인터넷에접속할수없을때에도계속해서웹애플리케이션이나웹문서들을사용할수있도록하는 API 관련리소스를애플리케이션캐시 (Application Cache) 에보관 매니페스트 (Manifest) 파일 : 캐시에저장할리소스목록을나열 자바스크립트인터페이스 : 캐시된파일의실행 / 관리를위한 API 제공 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 57

58 애플리케이션개발을위한다양한 API_2 웹스토리지 (Web Storage) API 사용자입력데이터를클라이언트쪽의로컬스토리지에저장 키 (Key)- 값 (Value) 의형태로저장 세션스토리지 (Session Storage): 브라우저종료시데이터삭제 로컬스토리지 (Local Storage): 세션이끝나도계속데이터저장 로컬데이터베이스 (Indexed Database) API 클라이언트에데이터베이스를저장하자는목적 초기에는웹SQL 개발을추진, 최근에는 Indexed DB로방향변경 오브젝트스토어 (ObjectStore) 라는저장공간에데이터를저장하고인덱스를통하여검색 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 58

59 애플리케이션개발을위한다양한 API_3 파일 (File) API 로컬파일에접근하여내용을읽고쓸수있는기능을제공 파일업로드, 파일의이름, 경로, 크기등파일정보제공 웹워커 (Web Workers) API 여러프로그램이동시실행되는멀티스레드 (Multi-thread) 기능 웹소켓 (Web Sockets) API 서버와브라우저사이에양방향통신채널을제공해주는기술 서버와브라우저가연결을유지한상태에서양방향통신 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 59

60 애플리케이션개발을위한다양한 API_4 웹메세징 (Web Messaging) API 여러창에서실행되는애플리케이션간에메시지를주고받게해주는기능 브라우저내에서통신을하는효율적인애플리케이션개발가능 지오로케이션 (Geo-Location) API 사용자 PC 혹은모바일단말기에서현재위치를파악하는기능 모바일기기의경우단말기에부착된 GPS 센서로부터정보제공 기본적으로위도 / 경도좌표가포함, 이외에정확도, 고도, 방향, 속도등의추가적인데이터가제공 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 60

61 모바일웹 모바일환경 일찍부터 HTML5를지원하는웹브라우저를탑재 화면의미세한크기차이외에는동등하게 HTML5 실행이가능 모바일환경에서중요한 HTML5 기능 HTML 은못하였지만몇가지새로운기능이모바일환경을고려 플래시보다는 <video>,<audio>, <canvas> 와 SVG등표준화된방법 다양한입력폼을지원하여사용자인터페이스개발및사용이용이 지오로케이션 API로위치정보를활용하는애플리케이션개발가능 오프라인애플리케이션 API로인터넷접속이끊기는경우를대비 오프라인이될경우로컬스토리지, 웹데이터베이스, 애플리케이션캐시등이유용하게활용 - 웹과인터넷활용및실습 (Web & Internet) - 05 웹페이지의작성 61

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을 동 향 제 23 권 5호 통권 504호 HTML5가 웹 환경에 미치는 영향 이 은 민 * 16) 1. 개 요 구글(Google)은 2010년 5월 구글 I/O 개발자 컨퍼런스에서 HTML5를 통해 플러 그인의 사용이 줄어들고 프로그램 다운로드 및 설치가 필요 없는 브라우저 기반 웹 플랫폼 환경이 점차 구현되고 있다고 강조했다. 그리고 애플(Apple)은 2010년