HTML 5+ 자바스크립트 발표자 : 20091903 김동한 7주차
HTML5 HTML이란? HTML5는 W3C(world Wide Web Consortium)가 사양을 책정 중인 차세대 마크업 언어입니다. Adobe Flash, Microsoft Silverlight와 같은 애드온(프로그램을 보강 하기 위한 프로그램)을 표준사양으로 들어가 있습니다. 동영상, 게임, 고기능 웹 애플리케이션
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>
HTML5의 특징(2/2) 문자코드 시맨틱 웹 HTML 문서에는 문자의 부호화 형식(문자 코드)을 지정하지 않으면 웹 브라 우저가 문자코드를 잘못 인식하여 웹 페이지의 문자가 깨지는 일이 있음. HTML5 : <meta charset=“UTF-8”> HTML4.0 : <meta http-equiv =“content-type”content=“text/html; EUC-KR”> 시맨틱 웹 사용자가 작성한 HTML의 내용을 웹 브라우저에게 이해시키는 일은 어려움. 데이터의 의미를 분명히 하고 웹 브라우저에서 활용할 수 있도록 하는 것.
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>
HTML5의 새로운 태그 (2/3) 텍스트에 의미를 부여하는 태그 그룹화하는 태그 태 그 기 능 작성 예 텍스트에 의미를 부여하는 태그 그룹화하는 태그 태 그 기 능 작성 예 <time> Datetime 속성을 지정한 날짜를 사용 <time datetime=“2013-05-28> 화요일 </time> 태 그 기 능 작성 예 <figure> 도표를 나타냄 <img src=“photo.jpg”> <figcaption> 기념 사진 </figcaption> </figure> 도표의 제목을 붙이는 데 사용 Figure 요소 안에서 사용
HTML5의 새로운 태그 (3/3) 텍스트의 기능 - 태 그 기 능 작성 예 표시 예 <ruby> 루비(읽는 법)를 붙일 텍스트를 지정함. 루비 자체는 rt요소로 함 JavaScript <rp>(</rp> <rt>자바스크립트</rt> <rp>)</rp> </ruby> 자바스크립트 <rt> 루비를 지정합니다 <rp> 루비를 표시할 수 없는 환경을 위한 문자열을 지정함 <mark> 텍스트의 일부를 하이라이트 표시 이것은 <mark>HTML5</mark> 로 작성했습니다. 이것은 HTML5 <wbr> 읽기 편하게 하기 위해 줄을 바꿔도 좋은 장소 지정, 종료태그 없음 -
CSS3 CSS3란? CSS의 특징 HTML4.0과 HTML5의 특징과 통일(업그레이드 버전) JavaScript를 사용하지 않고도 애니메이션을 만들거나 변형 가능 단락이나 배치를 세세하게 정의 할 수 있음 이미지를 사용하지 않아도 되기 때문에 웹 페이지의 데이터량을 절약가능
8주차 : CSS3의 특징 Thank you