Download presentation
Presentation is loading. Please wait.
1
HTML 5+ 자바스크립트 발표자 : 김동한 7주차
2
HTML5 HTML이란? HTML5는 W3C(world Wide Web Consortium)가 사양을 책정 중인
차세대 마크업 언어입니다. Adobe Flash, Microsoft Silverlight와 같은 애드온(프로그램을 보강 하기 위한 프로그램)을 표준사양으로 들어가 있습니다. 동영상, 게임, 고기능 웹 애플리케이션
3
HTML5의 특징(1/2) 문서형 정의의 간략화 HTML5에서는 문서의 맨 앞에 쓰는 DOCTYPE 선언의 표기를 간략화 하고
있습니다. HTML5 = <!DOCTYPE html> HTML4.0 = <!DOCTYPE HTML PUBLIC “-//W3C//DTD//HTML4.0//EN”> HTML5에서는 표준 스타일을 CSS, 표준 스크립트를 JavaScript로 정하 고 있습니다. Type속성을 생략하고 CSS나 JavaScript를 그대로 이용가능 CSS HTML5 = <Style></Style> HTML4.0 = <style type =“text/css></style> JavaScript HTML5 = <Script></script> HTML4.0 = <Script type =“text/javascript”></Script>
4
HTML5의 특징(2/2) 문자코드 시맨틱 웹 HTML 문서에는 문자의 부호화 형식(문자 코드)을 지정하지 않으면 웹 브라
우저가 문자코드를 잘못 인식하여 웹 페이지의 문자가 깨지는 일이 있음. HTML5 : <meta charset=“UTF-8”> HTML4.0 : <meta http-equiv =“content-type”content=“text/html; EUC-KR”> 시맨틱 웹 사용자가 작성한 HTML의 내용을 웹 브라우저에게 이해시키는 일은 어려움. 데이터의 의미를 분명히 하고 웹 브라우저에서 활용할 수 있도록 하는 것.
5
HTML5의 새로운 태그 (1/3) 태 그 기 능 작성 예 <section> <article>
일반적인 섹션을 나눔. 제목을 붙여도 좋을 만한 문장의 모음에 대해 사용 <h2>오늘의 날씨</h2> <div>맑음</div> </section> <article> 독립된 콘텐츠를 나타냄. 뉴스 기사나 게시판, 블로그의 투고에 사용 <header> <h1>그림책 정리</h1> </header> <div>동한은 책갈피를 모티브로 한 캐릭터 입니다</div> </article> 헤더가 되는 콘텐츠를 나타냄. 섹션의 목차나 검색 폼 등에 사용 <footer> 푸터(각주)가 되는 콘텐츠를 나타냄. 저작권과 관련된 정보나 관련 페이지의 링크등에 사용 책 내용의 무단 전재를 금합니다. </footer> <nav> 웹 페이지의 내비게이션이 되는 콘텐츠를 나타냄. 페이지의 목차나 항목 리스트 등에 사용 목차 일람 <u1> <li>HTML5란</li> <li>CSS란</li> </u1> </nav> <aside> 메인 콘텐츠와는 관계가 약한 보충적인 콘텐츠에 사용 유미나는 그림책별로 캐릭터가 다릅니다. </aside> <hgroup> 제목을 그룹화하여 모음. 태그 안에는 h1~h6의 요소를 지정 <h1>그림책의 종류</h1> <h2>C가 보이는 그림책</h2> </hgroup>
6
HTML5의 새로운 태그 (2/3) 텍스트에 의미를 부여하는 태그 그룹화하는 태그 태 그 기 능 작성 예
텍스트에 의미를 부여하는 태그 그룹화하는 태그 태 그 기 능 작성 예 <time> Datetime 속성을 지정한 날짜를 사용 <time datetime=“ > 화요일 </time> 태 그 기 능 작성 예 <figure> 도표를 나타냄 <img src=“photo.jpg”> <figcaption> 기념 사진 </figcaption> </figure> 도표의 제목을 붙이는 데 사용 Figure 요소 안에서 사용
7
HTML5의 새로운 태그 (3/3) 텍스트의 기능 - 태 그 기 능 작성 예 표시 예 <ruby>
루비(읽는 법)를 붙일 텍스트를 지정함. 루비 자체는 rt요소로 함 JavaScript <rp>(</rp> <rt>자바스크립트</rt> <rp>)</rp> </ruby> 자바스크립트 <rt> 루비를 지정합니다 <rp> 루비를 표시할 수 없는 환경을 위한 문자열을 지정함 <mark> 텍스트의 일부를 하이라이트 표시 이것은 <mark>HTML5</mark> 로 작성했습니다. 이것은 HTML5 <wbr> 읽기 편하게 하기 위해 줄을 바꿔도 좋은 장소 지정, 종료태그 없음 -
8
CSS3 CSS3란? CSS의 특징 HTML4.0과 HTML5의 특징과 통일(업그레이드 버전)
JavaScript를 사용하지 않고도 애니메이션을 만들거나 변형 가능 단락이나 배치를 세세하게 정의 할 수 있음 이미지를 사용하지 않아도 되기 때문에 웹 페이지의 데이터량을 절약가능
9
8주차 : CSS3의 특징 Thank you
Similar presentations
