HTML5 인터넷보충학습자료 (2014) 1 강. HTML5 알아보기 1 강. HTML5 알아보기 1. HTML5 개요 1.1 HTML Ÿ HTML(HyperText Markup Language) 월드와이드웹 (World Wide Web) 에서사용하는마크업언어 인터넷망

Size: px

Start display at page:

Download "HTML5 인터넷보충학습자료 (2014) 1 강. HTML5 알아보기 1 강. HTML5 알아보기 1. HTML5 개요 1.1 HTML Ÿ HTML(HyperText Markup Language) 월드와이드웹 (World Wide Web) 에서사용하는마크업언어 인터넷망"

재량 단
5 years ago
Views:

1 1. HTML5 개요 1.1 HTML HTML(HyperText Markup Language) 월드와이드웹 (World Wide Web) 에서사용하는마크업언어 인터넷망에서사용하는웹페이지구조를표한하기위한언어 마크업 (Markup) 언어마크업 ( 태그, 문서의구조와내용에추가적인정보를부여하기위해삽입되는일련의문자또는기호 ) 의형식과규칙을정의한언어 문서내용자체에대한정보가아닌이들이어떻게배치되고어떠한크기와모양등을가지는지에대한정보를표현하기위한언어 1-2 HMTL5 HMTL5 간단히말하면, 웹문서작성을위한언어로사용되었던 HTML 버전 4.01을웹애플리케이션개발을위한플랫폼으로업그레이드시킨 HTML 버전 5 HTML5 표준안의가장큰목적은과거 HTML의호환성을유지하면서웹개발자들이웹애플리케이션을개발하면서부딪치는한계점을해결하는것웹표준기구인 W3C에서만들고있는차세대웹표준안으로서, 마이크로소프트, 모질라, 애플, 구글, 오페라등모든웹브라우저벤더가참여하고있는산업표준기본적인틀만놓고보면 HTML5는 HTML4와크게차이가없다. 다양한기술을구현하기위해서문서작성을위한마크업의추가 / 삭제가이루어지고, 동작을담당하는다양한자바스크립트 API의추가, 이에맞춰디자인을담당하는 CSS3로의변화가이루어진버전이다

HTML5는아직완성되지않았다. 하지만지금당장중요한것은미완성의명세서를기반으로브라우저제작사가 HTML5의각종새로운특징을활발히지원해나가고있다는점과많은개발자들이이를활용해서지금도활발히웹애플리케이션을개발하고있다는점이다. 따라서 HTML5는이러한실질적인개선을통해차세대웹플랫폼으로빠르게진화하고있다.

2 HTML5는아직완성되지않았다. 하지만지금당장중요한것은미완성의명세서를기반으로브라우저제작사가 HTML5의각종새로운특징을활발히지원해나가고있다는점과많은개발자들이이를활용해서지금도활발히웹애플리케이션을개발하고있다는점이다. 따라서 HTML5는이러한실질적인개선을통해차세대웹플랫폼으로빠르게진화하고있다. HTML5 ~= HTML + CSS + JavaScript 통칭해서 HTML5를사용한다는것은콘텐츠의내용과형식을표현하기위해서단순히 HTML5만을사용하는것을넘어서콘텐츠의표현방법을정의하는 CSS와각종 API를통한동적인기능을구현하기위한 JavaScript를함께사용하는것을의미한다. 1-3 HMTL5 등장배경 1989년 CERN( 유럽입자물리연구소 ) 에있던 Tim Berners-Lee에의해 WWW가처음제안 인터넷을통해하이퍼텍스트문서를이용하는개념에서시작 1991년말에버너스리가처음으로인터넷에서문서를 "HTML 태그 "(HTML tag) 로부르면서시작되었고, NCSA에서개발된 Mosaic 브라우저에의해보편화되기시작 1994년보다체계적으로웹관련주요기술을논의하고웹표준과가이드라인을마련하기위해서 W3C가결성 1995년 11월. IETF(Internet Engineering Task Force) 에의해 HTML 2.0 발표하고, 이후 HTML 3.2, 4.0 버전이발표되고결국 1999년 4.01 버전이발표되어웹환경확산에크게기여 2000년이후웹환경은참여, 공유, 개방의웹 2.0 및검색의확장과이를통한시멘틱웹, 모바일웹등으로빠르게변화해가면서, 이러한상황에서변화된웹환경의다양한애플리케이션을구현하고개발자들이실질적으로이용할수있는프로그래밍언어에대한필요성이제기됨

3 하지만, W3C에서는기본 HTML에대한개선논의가이루어지지않은채, 오히려웹표준의초점을웹페이지에엄격한문법을적용하는특징을가진 XML과 XHTML로옮겨갔고, HTML은뒷전으로밀려나면서 HTML은사장될거라는의견이지배적이었다. 2004년 6월, 시맨틱웹커뮤니티대표자와주요브라우저제작사및 W3C가기존 HTML 4.01로웹애플리케이션개발의한계점을극복하고새롭게대두된웹애플리케이션을위한표준을논의하고자캘리포니아산호세에만나, W3C가웹애플리케이션의새로운요구사항에맞춰 HTML과 DOM을확장할지여부를투표했는데, 8명찬성 14 명반대가부결되었고, 결국이틀후주요브라우저제작사 ( 모질라, 애플, 구글, 오페라등 ) 는이문제를해결하기위해 WHATWG(Web Hypertext Application Technology Working Group) 이라는오픈커뮤니티를구성하고, HTML 규격을확장한 Web Applications 1.0을제안. 이때 2004년부터다양한웹브라우저들이시장에쏟아져나오기시작했고, 비IE 브라우저세계점유율이계속증가하고있는추세이다. 이후 2007년 W3C도웹애플리케이션논의와표준정립의필요성을인정하여, Web Application 1.0을기초로 HTML W/G을출범시키고, 이표준안의명칭을 HTML5로바꾸고, 2008년초안을공개했다. 이렇게등장한 HTML5는 MS, Apple, Google, Mozilla, Opera 등의모든웹브라우저벤더들의피드백을받아가며지속적인논의와수정작업을통해표준이개발되고있다. 2009년 7월 W3C에서는 XHTML 2.0 W/G의활동을완전히접었다. 이작업은 XHTML 1.0을더욱발전시키기위해작업해온표준안으로, 가장큰문제점은 HTML4와 XHTML 1.0과전혀다른새로운표준이어서하위호환성에대한보장이거의없다는것이다. 2012년 W3C에서 HTML5를뒤이을 HTML5.1을오는 2016년에내놓기로하고표준화작업이진행중이다. 당장개발중인 HTML5의표준안작업을마치기도전에추가버전작업을진행하는것은단순한이유라고볼수있는데, 이미작업진행날짜가정해진 HTML5 표준안일정을제때 (2014) 마감하고그중못다한구성요소표준화작업을속행하기위해이후버전으로주요이슈들을분리한것이다. 즉. HTML5.1 표준화는 HTML5 개발작업중변경과일정지연을예방하기위한수단으로이해할수있다. 따라서전문가들은 HTML5.1을 HTML5와확연히구별되는새로운내용이라기보다는기존산업표준의연장선에놓인것이라고여긴다. W3C (World Wide Web Consortium) 월드와이드웹을위한표준을개발하고가이드라인을개발하는조직이다. 지속적인교육및개발에참여하고웹에관련된포럼을개최함으로써웹의지속적인성장에많은역할을하였다. 1994년에설립되었으며 W3C가제정한 WWW 관련표준에 HTML도포함되어있다. ( 홈페이지 : ) - 3 -

4 WHATWG (Web Hypertext Application Technology Working Group) Apple, Mozila, Opera등웹브라우저제조사와관련당사자들이 2004년에공동으로발족한그룹이다. WWW를통해애플리케이션을작성하고전개할수있는새로운기술을개발하기위한오픈커뮤티티로서, Web Applications 1.0이라는이름의표준안제정을진행하였다. ( 홈페이지 : HMTL5 의특징 웹애플리케이션개발을위한플랫폼 기존 HTML은웹브라우저에표현되는웹페이지를만들때주로사용되었으며, 이때다양한기능을위해 Adobe Flash, MS Silverlight 등다양한플러그-인을추가로사용하였다. 하지만 HTML5는추가적인플러그-인이없이도다양한기능을제공할수있게되었다. 즉. 웹문서뿐만아니라웹애플리케이션도만들수있는플랫폼이라는것이다. 시맨틱웹 기존 HTML 문서는단지표현을위한수단이어서, 여러태그를사용하여구조를정의할수있지만정확한의미의태그사용이아닌단순한문서의표현에불과하였다. 따라서 W3C에서는구조화된마크업을위해서 XML을사용하여 XHTML을개발하고발표하였지만널리퍼지지못했고, 결국 HTML5를통해서의미가부여된태그를사용하여의미있는문서구조를표현할수있게되었다. 웹표준화 대부분 IE를사용하였고, 이로인해 MS에서는표준기술보다는 ActiveX와같이 IE 만을위한기술을적용해왔다. 하지만새로운환경 ( 예, 스마트폰 ) 과브라우저에서는해당사이트의이용이불가하다. 따라서웹표준이라는것이중요하고, 어떤브라우저에서든누구든정상적으로동작하는사이트를이용하기위해서는웹표준이지켜져야한다. 지금까지는스크립트언어만으로는원하는기능을충분히구현할수없었기때문에특정브라우저에서만동작하는기술을사용할수밖에없었지만, HTML5의등장으로스크립트만으로도원하는기능을충분히구현할수있고, 이런측면에서보면 HTML5가웹표준에중요한역할을한다고할수있다. 1.5 HTML5 의주요기능 클래스 기능 설명 Semantics Web Form 보다다양한웹입력양식제공 ( 달력, 범위, 이메일, 색상등 ) Multimedia Video 동영상재생을위한 API 제공 Audio 음성재생을위한 API 제공 Offline & Storage Offline Web 인터넷연결이되지않은상태에서도정상적인기능을 지원하는애플리케이션 API 제공 - 4 -

5 3D, Graphics & Effects Web Database 웹브라우저에서 DB 엔진을이용할수있는기능제공 Web Storage Canvas SVG 웹애플리케이션에서데이터를저장할수있는기능제 공 2 차원그래픽을그리기및객체에대한각종효과를 주는기능제공 XML 기반의 2 차원벡터그래픽을표현하기위한 SVG 언어지원 Device Access Geolocation 디바이스의지리적위치정보를제공 Performance & Integration Web Worker 웹애플리케이션을위한멀티쓰레드기능제공 Connectivity Web Socket 웹애플리케이션과서버간의양방향통신기능제공 CSS3 Styling Effect CSS3 웹애플리케이션의다양한스타일및효과를나타내기 위한 CSS3 지원 1.6 아직완성되지않은 HTML5 HTML5 표준은 2014년 9월 16일기준으로 PR( 제안권고안 ) 상태 HTML5 2014년 4분기권고안 (recommendation, 표준화 ) 발표예정 HTML 년 4분기권고안발표예정 W3C HTML W/G이생긴뒤에도함께진행된 WHATWG의작업이 W3C로제때포워딩되지못해서, 최근기능구현에초점을맟춘 리빙 HTML' 개발작업과외부업계의견을수렴해특정시점별로완성표준안을잡아내는작업을병행하는방식이제안. WHATWG에서 Living HTML을담당하고, W3C가외부작업과내부작업을병합해서주기적으로표준안스냅샵을내놓은방식을사용 W3C 권고안추진단계 - 5 -

6 노트 (Note) 초안 (WD, Working Draft) 후보권고안 (CR, Candidate Recommendation) 제안권고안 (PR, Proposed Recommendation) 권고안 (Recommendation) 기술문서로제안하기위해제시된문서. 표준화하기위한구조나사항을기록하여정리한문서 아직완전하지않은 WG의아이디어를담은문서 FPWD(First Publication Working Draft) LCWD(Last Call Working Draft) 심사를거친작업최종안 최종적인권고안이될수있는전단계 W3C에참여하는회원에게동의를얻은표준안. 최종적으로표준화규격을정의한문서 1.7 HTML5 에관심을가져야하는이유 HTML5에대한관심의시작 구글 (Google) 구글 I/O 개발자컨퍼런스에서자사의서비스가아닌 HTML5 데모를시연 HTML5 도입열풍의계기 애플 (Apple) iphone/ipad에플래시지원거부 HTML5 지원발표 어도비 (Adobe) 모바일플래시개발중지 HTML5 지원발표 MS도 2010년부터 HTML5에올인을선언하고실버라이트를 안락사 시키면서차기오피스와윈도8 플랫폼을위한프로그램개발기술로웹표준을채택최근모바일플랫폼이다양해지고, 관련기업들은플랫폼마다애플리케이션개발기술이상이해각각의애플리케이션을개발하는데큰부담을갖고있으며, 이를해결하기위한크로스플랫폼기술에대한요구가증가하고있다. 크로스플랫폼의핵심기술로서의활용가능성 특정플랫폼이나디바이스에종속되지않고다양한정보콘텐츠를표준화된방법으로제공가능 ( one source multi use 하나의코드로서다양한환경에서사용가능 ) 2014년 1사분기를기준으로전세계모바일개발자의 37% 가 HTML5를이용해서브라우저를위한앱을개발중이며, 15% 가하이브리드 HTML5 앱을개발하고있다. ios나안드로이드를최우선을삼는개발자중 19% 가앱안에서웹콘텐츠를보여주기위해 HTML5를사용한다고함

7 1.8 HTML5 관련기술의지원현황 아직까지어떤브라우저도 HTML5를완벽하게지원하고있지못하고있다. 또는

1.9 HTML5 와관련해서참고할만한사이트 http://www.w3.org/tr/html5/ W3C의 HTML5 관련공식홈페이지 http://www.w3.org/tr/html5-diff/ HTML4와 HTML5의차이점소개 http://www.w3.org W3C 홈페이지 http://www.whatwg.org WHATWG 홈페이지 http:.w3c.or.kr/ W3C 대한민국사무국홈페이지 http://webstandards.

8 1.9 HTML5 와관련해서참고할만한사이트 W3C의 HTML5 관련공식홈페이지 HTML4와 HTML5의차이점소개 W3C 홈페이지 WHATWG 홈페이지 W3C 대한민국사무국홈페이지 한국웹표준프로젝트홈페이지 HTML5 & CSS3 관련질문과답변 HTML5 직용사례및활용예제 온라인웹튜토리얼 A resource for open web HTML5 developers HTML5 Demos and Examples 브라우저별 HTML5 기능의지원여부 A showcase of sites using HTML5 markup 모질라개발자네트워크 HTML5, CSS3 등의브라우저별지원여부 2. HTML5 문서의기본구조 2.1 HTML 문서의구성요소 - 8 -

구성요소 요소 (Elements) 태그 (Tag) 설명시작과종료를나타내는태그로이루어진모든명령어 ex) <title> 문서의제목 </title> < 과 > 로둘러싸인요소의일부시작태그 (< >) 와종료태그 (</ >) 로이루어져있지만일부요소는종료태그가없는것도있음 ex) <title> 문서의제목 </title>

9 구성요소 요소 (Elements) 태그 (Tag) 설명시작과종료를나타내는태그로이루어진모든명령어 ex) <title> 문서의제목 </title> < 과 > 로둘러싸인요소의일부시작태그 (< >) 와종료태그 (</ >) 로이루어져있지만일부요소는종료태그가없는것도있음 ex) <title> 문서의제목 </title> 속성 (Attributes) 요소의시작태그내에사용하며, 명령어를구체화시키는역할 을함 ex) <p align= center > 문서의내용 </p> 변수 (Arguments) 속성과관련된값 ex) <p align= center > 문서의내용 </p> 2.2 HTML 의기본구조 기존 HTML 의기본구조 - 9 -

10 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html charset=utf-8"> 5 <link rel="stylesheet" type="text/css" href=".css"> 6 <script type="text/javascript" src=".js"></script> 7 <title> 문서의제목 </title> 8 </head> 9 <body> 10 문서의본문내용 11 </body> 12 </html> 1 : 문서가어떠한문서인지문서형식을선언하는부분이다. 2 : HTML 문서의시작을나타낸다. 3~8 : 문서자체에대한설명을넣는부분이다. 이부분에는 title, meta, link, script 등의요소등이포함된다. 4 : 콘텐츠유형을나타내는부분으로일반텍스트로구성된 HTML 문서이며 UTF-8 문자인코딩을사용한다는것을나타내고있다. 5 : 외부 CSS 파일 (*.css) 을링크시켜사용한다는것을나타낸다. 6 : 외부자바스크립트파일 (*.js) 을불러사용한다는것을나타낸다. 7 : 문서의제목을나타내는부분이다. 결과화면을보면브라우저의제일상단에해당제목이표시된다. 9~11 : 문서의본문내용을넣는부분이다. <head> 에들어가는내용을제외한모든내용을포함한다고할수있다. 12 : HTML 문서의끝을나타낸다. HTML5의기본구조 HTML5 기본템플릿은기존의 HTML4.01, XHTML1.0의형식과크게다르지않으며, 거의완벽하게호환된다. ( 어떤방식의코딩을사용해도무관 태그명 / 속성명을대문자나소문자를모두써도되고, 짝이없는태그의경우 /> 를사용해서닫아도되고닫지않아도됨 ) 1) HTML5의 DOCTYPE 선언 DOCTYPE은브라우저에게어떤렌더링모드를사용하고페이지유효성을검증할때어떤규칙을사용해야하는지알려줌

기존 HTML DOCTYPE은 SGML 기반이었기때문에 DTD를명시할필요가있었다.

11 기존 HTML DOCTYPE은 SGML 기반이었기때문에 DTD를명시할필요가있었다. 하지만 HTML5에서는그럴필요가없다. HTML5에서 DOCTYPE은브라우저가표준호환모드로작동하게하는역할만하면되기때문에아주간소해졌다. 이전 HTML이나 XHTML에서처럼복잡한선언이필요없이 <!DOCTYPE html> 만써주면된다. 2) HTML5 의문자인코딩 문자인코딩을위한선언도매우간단해졌다. 문자인코딩선언을위해간단한캐릭 터셋만선언하면된다. 3) CSS 를위한 <link> 및자바스크립트를위한 <script> 태그사용

<link> 와 <script> 태그사용시 HTML5 에서는 type 속성을사용하지않아도무방하다. HTML5 의기본구조 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href=".css"> <script src=".

12 <link> 와 <script> 태그사용시 HTML5 에서는 type 속성을사용하지않아도무방하다. HTML5 의기본구조 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href=".css"> <script src=".js"></script> <title> 문서의제목 </title> </head> <body> 문서의본문내용 </body> </html> 2.3 HTML5 문서의협업관계 HTML5로웹사이트를제작한다는것은 웹문서의내용을 HTML5에서언급한다양한요소 / 속성들을이용하여웹문서 (HTML 파일 ) 을만들고, 웹문서의디자인과같은부분은 CSS3로처리하고, 웹문서의이벤트처리같은상호작용을담당하는부분은자바스크립트로작성하는것을모두포함한다

13 2.4 HTML5 콘텐츠모델 HTML5의각요소들은특성에따라분류된다. 한요소가어떤분류에속하지않을수도있고, 여러분류에속해있을수도있다. metadata 콘텐츠 flow 콘텐츠 sectioning 콘텐츠 heading 콘텐츠 phrasing 콘텐츠 embedded 콘텐츠 interactive 콘텐츠 palpable 콘텐츠 script-supporting elements 콘텐츠의모양, 동작을설정하거나다른문서와의관계를나타낼때사용 body 요소내에서사용되는대부분의요소들이포함됨 header/footer 요소의범위를정의할때사용 section 요소의헤더 ( 제목 ) 를정의할때사용 문서의텍스트를정의할때사용 문서안에동영상, 사진, 오디오등을포함할때사용 사용자와의상호작용을위해사용 구체적으로보여지고이해할수있는콘텐츠를포함하는경우 어떤정보를표현하지않고스크립트를지원하는데사용 2.5 HTML5 에추가된요소와속성 (2강) 레이아웃을위한시맨틱요소 header, footer, hgroup, nav, section, article, aside (2강) 텍스트레빌의시맨틱요소 a (download 속성 ), a (ping 속성 ), strong, time, mark, ruby(rt, rp, rb, rtc), bdi, wbr (2강) 그룹핑콘텐츠요소 main, figure, figcaption, ol(reversed 속성 ) (2강) 상호작용요소 details, summary, menu, command, dialog (3강) 폼요소 datalist, keygen, output, meter, progress <form> 속성 autocomplete, novalidate <input> 속성 autocomplete, novalidate, form, formaction, formenctype, formmethod, formnovalidate, formtarget, minlength, height, width, min, max,

placeholder, required, list, multiple, step, pattern, dirname 속성 <input type= > 속성값 : month, week, date, datetime, datetime-local, time, color, email, number, range, search, tel, url (3강) 적용의미가변경된요소

14 placeholder, required, list, multiple, step, pattern, dirname 속성 <input type= > 속성값 : month, week, date, datetime, datetime-local, time, color, , number, range, search, tel, url (3강) 적용의미가변경된요소 address, b, cite, dl, hr, i, label, menu, noscript, s, script, small, strong, u (10강) 캔버스요소 canvas (13강) 미디어요소 audio, video, source, track 전역속성 contenteditable, contextmenu, data-*, draggable, dropzone, hidden, inert, aria-*, role, spellcheck, translate, microdata, tab-index [ 실습 ] HTML5 문서의기본구조이해하기 실행결과와같이출력되도록 HTML5 문서를작성해보자. [ 실행결과 ] [ 실행코드 ] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Welcome to HTML5 </title> </head> <body> <h3> HTML5의특징 </h3> 1. 웹애플리케이션개발을위한플랫폼 <br> 2. 시맨틱웹 <br> 3. 웹표준 <br> </body> </html>

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년