HTML 5 6 HTML 5 DOCTYPE DOCTYPE HTML

HTML 5 페이지의 간결한 태그 6 HTML 5의 <!DOCTYPE> : 문서 선언 � <!DOCTYPE

HTML 5 태그의 변화 8 CSS로 대체 가능해서 더 이상 사용하지 않는 속성 align,

WAI-ARIA로 사이트에 웹 접근성 추 가 12 Web Accessibility Interactive-Accessible Rich Internet Application 의

멀티미디어 엘리먼트 17 플러그인 없이 멀티미디 어를 재생 audio � 오디오를 재생. <audio controls>

반응형 비디오 18 Fit. Vids 사용 방법 � 구글 콘텐츠 전송 네트워크 사 용

웹폼 HTML 5에서 웹폼을 구성하는 방법 � <fieldset>태그를 <fieldset > 사용해 관련된 태그를 그룹화

웹폼 HTML 5에서 웹폼을 구성하는 방법 <form id=“tform” action=“a. jsp” method=“post”> <fieldset > <legend>취미</legend>

웹폼 <input>태그의 기존 타입 <input � <input � type=“text”> : 텍스트 필드 type=“password”> :

웹폼 폼태그에서 새로 추가된 속성 � list, max, min, pattern, placeholder, valid, invalid, required,

Slides: 26

Download presentation

HTML 5 페이지의 간결한 태그 6 HTML 5의 <!DOCTYPE> : 문서 선언 � <!DOCTYPE HTML 5의 문자 인코딩 � <meta charset="UTF-8"> HTML 5의 <link>태그 � <link html> href="css/rwtest. css" rel="stylesheet"/> HTML 5의 <script>태그 � <script src=". . /js/jquery-1. 11. 0. min. js"></script>

HTML 5 태그의 변화 8 CSS로 대체 가능해서 더 이상 사용하지 않는 속성 align, background, border, cellpadding, cellspacing, frame, height, width, size, type, valign등등

WAI-ARIA로 사이트에 웹 접근성 추 가 12 Web Accessibility Interactive-Accessible Rich Internet Application 의 약자 RIA 또는 Ajax에 대한 웹 접근성 표준 � Ajax : Asynchronous Javascript and XML, 비동기 적 요청 사용목적 �웹 접근성 보장을 위해 동적 콘텐츠를 만들 때 생기는 문제를 해결

멀티미디어 엘리먼트 17 플러그인 없이 멀티미디 어를 재생 audio � 오디오를 재생. <audio controls> <source src="play 1. mp 3" type="audio/mpeg"> </source> </audio> video � 비디오를 재생. <video width="320" height="240" controls> <source src="movie. mp 4" type="video/mp 4"> </source> </video>

반응형 비디오 18 Fit. Vids 사용 방법 � 구글 콘텐츠 전송 네트워크 사 용 � <script src="http: //ajax. googleapis. c om/ajax/libs/jquery/1. 10. 2/j query. min. js"></script> fitvids. js파일을 [js]폴더에 저장 후 <script>링크 연결 <script src=“js/jquery. fitvids. js"></ script> � 비디오가 있는 영역에 제이쿼리 사용 <script> $(document). ready(function() { $("#content"). fit. Vids(); }); </script>

웹폼 HTML 5에서 웹폼을 구성하는 방법 � <fieldset>태그를 <fieldset > 사용해 관련된 태그를 그룹화 <legend>취미</legend> <input type=“checkbox” name=“h 1” id=“h 1”/> <lable for=“h 1” >낮잠</label> <input type=“checkbox” name=“h 2” id=“h 2”/> <lable for=“h 2” >TV시청</label> </fieldset> 22

웹폼 HTML 5에서 웹폼을 구성하는 방법 <form id=“tform” action=“a. jsp” method=“post”> <fieldset > <legend>취미</legend> <input type=“checkbox” name=“h 1” id=“h 1”/> <lable for=“h 1” >낮잠</label> <input type=“checkbox” name=“h 2” id=“h 2”/> <lable for=“h 2” >TV시청</label> </fieldset> </form> 23

웹폼 <input>태그의 기존 타입 <input � <input � type=“text”> : 텍스트 필드 type=“password”> : 패스워드 필드 type=“checkbox”> : 체크박스 type=“radio”> : 라디오 버튼 type=“file”> : 파일 선택기 type=“submit”> : [submit]버튼 type=“reset”> : [reset]버튼 type=“button”> : [button]버튼 24

웹폼 폼태그에서 새로 추가된 속성 � list, max, min, pattern, placeholder, valid, invalid, required, autocomplete, autofocus등등 26