1 HTML5 개요.

Presentation on theme: "1 HTML5 개요."— Presentation transcript:

1 1 HTML5 개요

2 강의 목차 웹의 역사 – HTML5 등장 배경 HTML5 특징 HTML5 주요 태그 HTML5 컨텐츠 작성 태그

3 웹의 역사 (1) 월드 와이드 웹(World Wide Web: WWW) 인터넷의 시작 웹의 시작
웹은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간으로 1991년에 등장 인터넷은 통신망이고 웹은 그 위에서 작동하는 서비스 인터넷의 시작 ARPA(Advanced Research projects Agency)가 1969년에 웹의 모태가 되는 ARPANET 개발 시간이 지나며 군사용과 민간용으로 구분되었고 민간에서 사용되던 네트워크가 현재의 인터넷이 된다. 웹의 시작 1989년 유럽 공동 원자핵 연구소(CERN)의 팀 버너스리가 하이퍼링크 를 포함하는 문서의 개념을 제안 1991년에 월드 와이드 웹을 개발해 배포 1993년 웹 표준 단체 W3C 창설

4 웹의 역사 (2) 웹 표준 W3C(World Wide Web Consortium) 재단에서는 웹 표준을 제정
현재 HTML5는 작성 중인 표준

5 웹의 역사 (3) 웹 브라우저 전쟁 넷 스케이프의 넷 스케이프 웹 브라우저와 마이크로소프트의 인터넷 익스플로러 웹 브라우저 사이에서 발생한 기술 전쟁 1994년부터 1998년까지 진행 웹 발전 계기

6 웹의 역사 (4) 플러그인 W3C 재단이 웹 브라우저 전쟁 때에 발생한 기술을 제대로 표준화 하 지 못하여 불만을 느낀 기업들이 개발한 기술 웹 브라우저와 연동되는 특정 프로그램을 사용자 PC에 추가로 설치해 웹 브라우저의 기능을 확장하는 방법 대표적으로 액티브엑스(ActiveX) 또는 플래시(Flash)가 있음

7 웹의 역사 (5) WHATWG 마이크로소프트와 W3C 재단은 플러그인에 만족, 하지만 가장 많이 사 용되는 액티브엑스 플러그인은 인터넷 익스플로러를 제외한 웹 브라 우저에서 작동하지 않음 2004년에 다른 웹 브라우저 제조사(애플, 모질라, 오페라 소프트웨어) 는 새로운 표준 제정 그룹(WHATWG)을 자체적으로 설립 참고적으로 구글 크롬은 2008년에 등장 WHATWG는 Web Application 1.0 표준을 작성

8 웹의 역사 (6) HTML 5 표준 2009년에 W3C 재단과 마이크로소프트가 함께 제정하던 XHTML 2.0 표준이 붕괴하면서 대체안으로 Web Application 1.0 표준을 사용 Web Application 1.0 표준을 현재 HTML5 표준이라고 부름

9 HTML5 추가 기능 (1) 멀티미디어 그래픽 플래시와 같은 별도의 플러그인 없이 음악과 동영상을 재생할 수 있음
하드웨어 가속을 받아 2차원 그래픽과 3차원 그래픽을 구현할 수 있음

10 HTML5 추가 기능 (2) 통신 장치 접근 오프라인 및 저장소 기존에는 요청과 응답 기반의 단 방향 통신
웹 브라우저가 서버와 양 방향 통신이 가능해짐 장치 접근 장치와 관련된 정보(배터리 정보, CPU 사용량)는 물론 장치에 직접적 으로 접근해서 카메라와 GPS, 진동 벨을 사용할 수 있음 오프라인 및 저장소 인터넷이 연결되지 않은 상태에서도 애플리케이션이 동작

11 HTML5 추가 기능 (3) 시멘틱 태그 CSS3 스타일시트 성능 및 통합 시멘틱(Semantic) 웹을 구현
시멘틱 웹은 검색 엔진과 같은 프로그램이 정보의 의미를 분석하고 자 료를 검색 및 처리하여 제공하는 지능형 웹을 의미 CSS3 스타일시트 CSS3 스타일시트를 완벽하게 지원 성능 및 통합 HTML5는 기존의 웹 표준보다 빠르다 추가 기능을 사용해 웹의 성능을 극대화

12 HTML5를 공부해야 하는 이유 웹 애플리케이션 모바일과 태블릿 PC, 스마트 TV에 다양한 운영체제가 등장
모두 각각의 프로그래밍 언어를 사용해서 개발 안드로이드 – 자바, iOS – ObjectiveC 등등 HTML5를 사용하면 모든 운영체제에서 동작하는 애플리케이션을 한번 에 제작할 수 있음

13 HTML5 주요 태그 (1) HTML5의 추가/변경/비사용 권장 태그 및 속성 추가된 태그 변경된 태그 article
aside audio bdi canvas command datalist details embed figcaption figure footer header hgroup keygen mark meter nav output progress rp rt ruby section source summary time track video a b cite hr i input menu meta s small u

14 HTML5 주요 태그 (2) HTML5의 추가/변경/비사용 권장 태그 및 속성 비사용 권장 태그 새롭게 추가된 속성
acronym applet basefont big center dir font frame frameset isindex noframes noscript strike tt 속성명 적용 태그 align caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr alink, link, text, vlink body background bgcolor table, tr, td, th, body border object cellpadding, cellspacing table char and charoff col, colgroup, tbody, td, tfoot, th, thead, tr

15 HTML5 주요 태그 (3) HTML5의 추가/변경/비사용 권장 태그 및 속성 새롭게 추가된 속성 속성명 적용 태그 Clear
br compact dl, menu, ol, ul frame table frameborder iframe height td, th hspace, vspace img, object marginheight, marginwidth noshade th nowrap rules scrolling size hr type li, ol, ul. valign col, colgroup, tbody, td, tfoot, th, thead, tr. width hr, table, td, th, col, colgroup, pre.

16 HTML5 주요 태그 (4) HTML5 API Geolocation API
Geolocation은 지리적인 위치 정보를 제공하는 API이다. 이는 구글, 네이버 등의 포털 사 이트에서 제공하는 지도와 함께 사용하여 현재의 위치정보, 길찾기 등 다양한 프로그램 을 만들 수 있다. Geolocation과 관련된 함수는 window.navigator 객체에 정의되어 있음. Canvas API Canvas는 플래쉬에서 나타내는 효과를 대체할 수 있는 API이다. Canvas는 현재 모든 브라우저에서 제공되고 있으나 IE 브라우저에서는 IE9 버전부터 사용할 수 있다. Canvas API를 이용하면 차트, 그래프 등에도 동적인 효과를 나타낼 수 있음. Drag&Drop Drag&Drop은 naver나 google 등 메일에서 첨부파일을 드래그 하여 가져다 놓을 수 있는 기능을 말한다. Drag&Drop API를 사용하면 보다 손쉽게 다양한 기능을 만들 수 있음.

17 HTML5 주요 태그 (5) HTML5 API Web Storage Web Workers Indexed DB
Web Storage는 키와 값이 한 쌍의 형태로 데이터를 저장한다. 일반적으로 웹의 데이터 를 쿠키로 저장을 하지만 쿠키와는 차이가 있으며, Local Storage와 Session Storage로 구분된다. 현재 Web Storage의 크기는 5MB를 권장하고 있음. Web Workers Web Workers는 동시성으로 야기되는 문제의 해결책으로 볼 수 있다. 즉, 여러 작업이 동시에 이루어지면 CPU에 부하를 많이 주어 속도에 영향을 주는데 이러한 작업들을 여 러 Worker로 나누어 작업을 하게 되면 CPU의 부하가 적어 속도에 영향을 주지 않으며 작업을 할 수 있음. Indexed DB Indexed DB는 데이터를 저장하는 API로 Local에서 사용 가능한 데이터베이스라고 생 각하면 된다. SQL과 개념은 비슷하지만 Query 대신 Index를 사용하며 SQL을 몰라도 간 단한 JavaScript만 으로도 데이터베이스를 조작 할 수 있는 API임.

18 HTML5 주요 태그 (6) 웹 문서의 기본 구조 웹 페이지의 기본적인 구조를 나타낸 것이다.
웹 페이지를 만들려면 우선 어떤 유형으로 만들었는지를 선언해야 함. 선언하는 방법은 문서의 제일 위에 DOCTYPE을 선언 기존의 HTML버전에서는 Strict, Transitional, Frameset과 같이 크게 세 가지 로 나누어 정의하였으나 HTML5에서는 <!DOCTYPE html>과 같이 간단하 게 선언해 주면 됨. <!DOCTYPE html> <html> <head> <title>웹 문서의 기본 구조</title> </head> <body> 웹 콘텐츠가 들어가는 영역 </body> </html>

19 HTML5 주요 태그 (7) 웹 문서의 기본 구조 웹 페이지 기본 구조의 태그
➊ <!DOCTYPE html> 태그 : 문서의 작성 유형 선언 태그로 위의 설명과 같이 HTML5에서는 간단히 문서의 맨 윗줄에 선언하면 된다. ➋ <HTML> 태그 : HTML 언어를 사용하여 문서가 작성됨을 알리는 HTML시작 태그 ➌ <HEAD> 태그 : 문서에 대한 설명이 들어가는 시작태그 ➍ <TITLE> 태그 : 문서의 제목을 부여하는 시작태그 ➎ </TITLE> 태그 : 문서의 제목에 대한 종료태그 ➏ </HEAD> 태그 : 문서의 설명에 대한 종료태그 ➐ <BODY> 태그 : 본문 내용을 나타내는 시작태그 ➑ </BODY> 태그 : 본문 내용에 대한 종료태그 ➒ </HTML> 태그 : HTML 문서의 작성에 대한 종료태그

20 HTML5 주요 태그 (8) Head 부분 태그 – meta 태그 <!DOCTYPE html>
<meta name="Generator" content="editor3.0"> <meta name="Author" content="lee keun wang"> <meta name="Keywords" content="html5 css3 javascript"> <meta name="Description" content="html의 기본 구조"> <meta charset="euc-kr"> <meta http-equiv="refresh" content="7"> <meta http-equiv="default-style" content="css1"> <title>웹 문서의 기본 구조</title> </head> <body> 웹 콘텐츠가 들어가는 영역 </body> </html>

21 HTML5 주요 태그 (9) Head 부분 태그 – meta 태그
웹의 정보들을 제공하는 태그로 <head></head> 태그 사이에 작성되 어져야 하며 종료태그는 없음. 태그의 속성에는 name, http-equiv, content, charset이 있음. 화면상에 보이지는 않지만 웹 제작에 관한 정보를 남기고자 할 때 사 용함. 예제에 있는 meta 태그는 전부 사용할 필요는 없으며 필요한 것만 사 용하면 된다. meta 태그에 사용할 종류를 name에 정의 하고 content에 제공 정보 를 작성하면 됨.

22 HTML5 주요 태그 (10) Head 부분 태그 – meta 태그 name, charset, http-equiv 속성
➊ Generator는 문서를 제작한 툴을 정의하는 속성 값으로 content의 값에 넣어주면 됨. ➋ Author는 웹사이트의 제작자에 대한 정보를 담는 속성 값이다. 웹사이트 제작자 명을 content의 값에 정의. ➌ Keywords는 포털사이트 등의 검색기가 검색을 하기 위한 속성 값으로 content의 값에 따라 검색 상위에 링크될 수 있음. ➍ Description은 웹사이트 해당 페이지의 요약 내용이 들어가는 속성 값으로 검색된 결과를 보여줄 때 content의 값이 보여지게 된다. 검색기 마다 차이는 있으나 보통 150자 이하로 요약하여 작성. ➎ charset은 현재 웹페이지 문서가 어떤 종류의 언어로 작성되었는지를 정의하는 속성으로 html5에서 위와 같이 정의가 간결해 졌음. ➏ refresh는 http-equiv 속성의 값으로 content 값의 시간 후에 자동으로 웹 페이지를 refresh 하는 기능을 가지고 있다. 또한 content 값에 content=“7; url= 이렇게 정의를 해주면 7초 후에 해당 url로 이동함. ➐ default-style는 http-equiv 속성의 값으로 content 값과 일치하는 link 태그의 title 속성 값과 일치하는 스타일을 우선 적용하는 기능임.

23 HTML5 주요 태그 (11) Head 부분 태그 – link 태그 시작태그는 반드시 있어야 하지만 종료태그는 없음.
속성에는 href, rel, hreflang, media, type, sizes 등이 있음. Link 태그의 속성 ➊ href 속성은 링크의 대상이 되는 url을 지정한다. 앞, 뒤의 공백은 허용하나 비어있으면 안됨. ➋ type은 MIME 타입을 지정하는 속성으로 반드시 유효한 MIME 타입 값을 사용. ➌ hreflang는 링크의 대상이 되는 url의 언어를 정의하는 속성이다. 속성에 지정되는 코드는 IETF BCP47 “Matching of Language Tags”를 따라야 한다. 그 예로 해당 url의 언어가 한국어라면 ko, 영 어라면 en, 일본어라면 ja로 명시. ➍ media는 href로 지정된 문서가 어떠한 매체를 가정하고 있는지를 설명하며 이속성에 지정된 값에 따라 의미가 달라진다. 이속성이 생략되어져 있으면 기본적으로 all 값을 가짐. ➎ sizes는 html5에 새롭게 추가된 속성으로 rel 속성에 icon 값이 지정되어있어야만 사용할 수 있는 것으로 icon의 가로, 세로 값을 지정할 수 있음. ➏ rel은 해당 link url의 종류를 정의하는 속성으로 대소문자를 구분하지 않으며 그 종류는 alternate, author, bookmark, icon, license, stylesheet 등이 자주 사용. 그 밖에 종류를 자세히 알고 싶다면 사이트를 참조.

24 HTML5 주요 태그 (12) Head 부분 태그 – link 태그 <!DOCTYPE html>
<meta name="Generator" content="editor3.0"> <meta name="Author" content="lee keun wang"> <meta name="Keywords" content="html5 css3 javascript"> <meta name="Description" content="html의 기본 구조"> <meta charset="euc-kr"> <meta http-equiv="refresh" content="7"> <meta http-equiv="default-style" content="css1"> <link rel="stylesheet" media="screen" href="style.css" type="text/css" title="css1" /> <link rel="stylesheet" media="screen" href="style1.css" type="text/css" title="css2" /> <link rel="icon" href="image/icon.gif" size="12x12" type="image/gif" /> <title>웹 문서의 기본 구조</title> </head> <body> 웹 콘텐츠가 들어가는 영역 </body> </html>

25 HTML5 주요 태그 (13) Head 부분 태그 – base 태그
base 태그를 사용하려면 반드시 href, target 속성 중 하나는 정의를 해 야 하며 종료 태그는 없음. 한 문서에 하나만 정의하여 사용할 수 있으며 2개 이상 넣을 경우 최 초의 하나만 적용되고 나머지는 무시됨. 현재 문서의 하이퍼링크에 영향을 주며 이전의 문서에는 영향을 주지 않음.

26 HTML5 주요 태그 (14) Head 부분 태그 – base 태그 <!DOCTYPE html>
<meta name="Generator" content="editor3.0"> <meta name="Author" content="lee keun wang"> <meta name="Keywords" content="html5 css3 javascript"> <meta name="Description" content="html의 기본 구조"> <meta charset="euc-kr"> <meta http-equiv="refresh" content="7"> <meta http-equiv="default-style" content="css1"> <link rel="stylesheet" media="screen" href="style.css" type="text/css" title="css1" /> <link rel="stylesheet" media="screen" href="style1.css" type="text/css" title="css2" /> <link rel="icon" href="image/icon.gif" size="12x12" type="image/gif" /> <base href=" target="_blank" /> <title>웹 문서의 기본 구조</title> </head> <body> <a href="">웹 콘텐츠가 들어가는 영역</a> </body> </html>

27 HTML5 주요 태그 (15) Head 부분 태그 – base 태그
base 태그의 target 속성값에는 _self, _parent, _top, _blank, 사용자 정 의가 있다. ➊ _self는 현재 문서에 하이퍼링크 대상이 열리며 target 속성 값을 지정하지 않으면 기본적으로 적 용이 된다. ➋ _parent는 현재 문서의 부모창이 있다면 그 부모 문서에 하이퍼링크 대상이 열린다. ➌ _top은 최상위 문서(브라우저)에서 해당 하이퍼링크 대상이 열린다. ➍ _blank는 새로운 창에서 해당 하이퍼링크 대상이 열린다. ➎ 사용자 정의는 설정값이 하이퍼링크가 열릴 대상의 이름이 되는 텍스트라면 해당 텍스트의 이름 을 가진 콘텍스트에서 페이지가 열린다. 예로 한 문서에서 iframe을 적용하여 Id 값 혹은 name 값을 설정했다면 사용자 정의에 그 값을 설정하면 해당 프레임에서 페이지가 열린다. 사용자 정 의의 값은 한문자 이상이여야 하며 “_”로 시작 할 수 없다.

28 HTML5 주요 태그 (16) Head 부분 태그 – base/noscript 태그
속성에는 src, async, defer, type, charset 등이 있음. 작성된 스크립트가 유효하지 않거나 사용할 수 없을 경우에 noscript 에 작성된 내용이 표시됨. 정상적으로 script가 실행이 되면 noscript의 내용은 무시되어 아무것 도 표시되지 않는음 ➊ src는 작성된 스크립트 파일을 불러올 때 사용, 불러올 스크립트 파일의 url을 작성하여 사용한다. ➋ async는 script 태그에 작성된 스크립트를 이용할 수 있게 되면 바로 스크립트를 실행할 수 있도록 정의해주는 속성 ➌ defer는 문서가 로딩된 후에 스크립트가 실행될 수 있도록 정의해주는 속성으로 onload 이벤트 핸들러 대신 사용 ➍ type 속성은 스크립트 언어 및 데이터 포맷의 MIME 타입을 정의 ➎ charset은 src로 불러온 스크립트 파일의 인코딩을 정의

29 HTML5 주요 태그 (17) Head 부분 태그 – base/noscript 태그 <!DOCTYPE html>
<title>웹 문서의 기본 구조</title> </head> <body> <script> var str = "script 예제입니다."; document.body.write(str); </script> <noscript> 스크립트가 동작하지 않아 대체 표시되는 콘텐츠 내용입니다. </noscript> </body> </html>

30 HTML5 태그 - 글자 태그 (1) 글자 태그는 웹 페이지에서 가장 많은 비중을 차지하는 태그 제목 글자 태그
제목 글자 태그는 제목을 입력할 때에 사용하는 태그

31 HTML5 태그 - 글자 태그 (2) 다음과 같이 사용한다.

32 HTML5 태그 - 글자 태그 (3) 본문 태그 본문 글자 태그 기타 본문 태그

33 HTML5 태그 - 글자 태그 (4) 다음과 같이 사용한다.

34 HTML5 태그 - 글자 태그 (5) 다음과 같이 출력한다.

35 HTML5 태그 - 글자 태그 (6) 앵커 태그 서로 다른 웹 페이지 사이 또는 웹 페이지 내부에서 특정한 위치로 이 동할 때에 사용하는 태그 href 속성을 사용해 이동할 경로를 정한다.

36 HTML5 태그 - 글자 태그 (7) 글자 형태 태그 글자에 형태와 의미를 부여할 때에 사용하는 태그

37 HTML5 태그 - 글자 태그 (8) 루비 문자 루비 문자는 문장 내의 임의의 문자에 대해 읽는 법을 알려주는 글자
한국어와 일본어에서 한자 음을 표기할 때에 많이 사용

38 HTML5 태그 - 글자 태그 (9) 루비 문자 각각의 태그는 다음과 같은 형식으로 사용한다.

39 HTML5 태그 - 목록 태그 (1) 목록 태그는 목록을 생성할 때에 사용하는 태그
웹 페이지의 내비게이션 메뉴를 생성할 때에 자주 사용 기본 목록 기본 목록을 생성할 때는 다음 태그를 사용

40 HTML5 태그 - 목록 태그 (2) 각각의 목록은 다음과 같은 형태로 사용한다.

41 HTML5 태그 - 목록 태그 (3) 정의 목록 정의 목록을 생성할 때는 다음 태그를 사용
정의 목록은 다음과 같은 용어를 설명할 때 사용하는 태그이지만 실제 로 자주 사용하지는 않음

42 HTML5 태그 - 테이블 태그 (1) 테이블 태그는 표를 생성할 때에 사용하는 태그
표를 생성할 때는 table 태그와 다음 태그를 사용

43 HTML5 태그 - 테이블 태그 (2) 테이블 태그는 다음과 같이 사용한다.

44 HTML5 태그 - 테이블 태그 (3) 이미지를 생성할 때는 img 태그를 사용한다.
다음과 같이 사용한다.

45 HTML5 태그 - 오디오 태그 (1) 오디오 태그는 HTML5에서 추가된 기능
웹 브라우저에서 음악을 재생할 수 있게 해준다.

46 HTML5 태그 - 오디오 태그 (2) 오디오 태그는 다음 속성을 갖는다. Source 속성
웹 브라우저마다 지원하는 음악 파일 형식이 다름으로 사용한다.

47 HTML5 태그 - 오디오 태그 (3) source 태그는 다음과 같은 형식으로 사용한다.

48 HTML5 태그 - 비디오 태그 (1) 비디오 태그는 HTML5에서 추가된 기능
웹 브라우저에서 영상을 재생할 수 있게 해준다. 웹 브라우저 별로 지원하는 동영상 파일 형식이 다르다.

49 HTML5 태그 - 비디오 태그 (2) 다음과 같은 형식으로 사용한다.

50 HTML5 태그 - 입력 양식 태그 (1) 입력 양식 태그는 서버와 통신하고자 사용한다. 기본 입력 양식 태그
input 태그를 사용한다.

51 HTML5 태그 - 입력 양식 태그 (2) type 속성에는 다음을 입력한다.

52 HTML5 태그 - 입력 양식 태그 (3) textarea 태그
다음과 같은 방법으로 사용한다. 코드를 실행하면 다음과 같다.

53 HTML5 태그 - 입력 양식 태그 (4) select 태그
다음과 같이 사용한다.

54 HTML5 태그 - 입력 양식 태그 (5) 코드를 실행하면 다음과 같이 출력한다.

55 HTML5 태그 - 공간 분할 태그 (1) 공간 분할 태그는 레이아웃을 생성할 때에 사용한다. 기본 공간 분할 태그
div 태그: 블록 형식으로 공간 분할

56 HTML5 태그 - 공간 분할 태그 (2) 시멘틱 태그 span 태그: 인라인 형식으로 공간 분할
시멘틱 웹: 기계적인 검색 엔진은 어떠한 태그가 어떠한 기능을 하는 지 분별할 수 없고 웹 페이지 에서 데이터를 효율적으로 추출할 수 없 다. 이를 해결하고자 특정한 태그에 의미를 부여해 서 웹 페이지를 만 드는 시도가 시작된다. 이를 시멘틱 웹이라고 표현한다. HTML5는 시멘틱 태그를 사용해 시멘틱 웹을 구현한다.

57 HTML5 태그 - 공간 분할 태그 (3) HTML5는 다음과 같은 시멘틱 공간 분할 태그를 가지고 있다.

58