1 HTML5 개요
1.1 웹의 역사 월드 와이드 웹(World Wide Web: WWW) 인터넷의 시작 웹의 시작 웹은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간으로 1991년에 등장 인터넷은 통신망이고 웹은 그 위에서 작동하는 서비스 인터넷의 시작 ARPA(Advanced Research projects Agency)가 1969년에 웹의 모태가 되는 ARPANET 개발 시간이 지나며 군사용과 민간용으로 구분되었고 민간에서 사용되던 네트워크가 현재의 인터넷이 된다. 웹의 시작 1989년 유럽 공동 원자핵 연구소(CERN)의 팀 버너스리가 하이퍼링크 를 포함하는 문서의 개념을 제안 1991년에 월드 와이드 웹을 개발해 배포 1993년 웹 표준 단체 W3C 창설
1.1 웹의 역사 웹 표준 W3C(World Wide Web Consortium) 재단에서는 웹 표준을 제정 현재 HTML5는 표준안 확정되었음. HTML 5.1 논의 중.
1.1 웹의 역사 웹 브라우저 전쟁 넷 스케이프의 넷 스케이프 웹 브라우저와 마이크로소프트의 인터넷 익스플로러 웹 브라우저 사이에서 발생한 기술 전쟁 1994년부터 1998년까지 진행 웹 발전 계기
1.1 웹의 역사 플러그인 W3C 재단이 웹 브라우저 전쟁 때에 발생한 기술을 제대로 표준화 하 지 못하여 불만을 느낀 기업들이 개발한 기술 웹 브라우저와 연동되는 특정 프로그램을 사용자 PC에 추가로 설치해 웹 브라우저의 기능을 확장하는 방법 대표적으로 액티브엑스(ActiveX) 또는 플래시(Flash)가 있음
1.1 웹의 역사 WHATWG 마이크로소프트와 W3C 재단은 플러그인에 만족, 하지만 가장 많이 사 용되는 액티브엑스 플러그인은 인터넷 익스플로러를 제외한 웹 브라 우저에서 작동하지 않음 2004년에 다른 웹 브라우저 제조사(애플, 모질라, 오페라 소프트웨어) 는 새로운 표준 제정 그룹(WHATWG)을 자체적으로 설립 참고적으로 구글 크롬은 2008년에 등장 WHATWG는 Web Application 1.0 표준을 작성
1.1 웹의 역사 HTML 5 표준 2009년에 W3C 재단과 마이크로소프트가 함께 제정하던 XHTML 2.0 표준이 붕괴하면서 대체안으로 Web Application 1.0 표준을 사용 Web Application 1.0 표준을 현재 HTML5 표준이라고 부름
1.2 HTML5 추가 기능 멀티미디어 그래픽 플래시와 같은 별도의 플러그인 없이 음악과 동영상을 재생할 수 있음 하드웨어 가속을 받아 2차원 그래픽과 3차원 그래픽을 구현할 수 있음
1.2 HTML5 추가 기능 통신 장치 접근 오프라인 및 저장소 기존에는 요청과 응답 기반의 단 방향 통신 웹 브라우저가 서버와 양 방향 통신이 가능해짐 장치 접근 장치와 관련된 정보(배터리 정보, CPU 사용량)는 물론 장치에 직접적 으로 접근해서 카메라와 GPS, 진동 벨을 사용할 수 있음 오프라인 및 저장소 인터넷이 연결되지 않은 상태에서도 애플리케이션이 동작
1.2 HTML5 추가 기능 시멘틱 태그 CSS3 스타일시트 성능 및 통합 시멘틱(Semantic) 웹을 구현 시멘틱 웹은 검색 엔진과 같은 프로그램이 정보의 의미를 분석하고 자 료를 검색 및 처리하여 제공하는 지능형 웹을 의미 CSS3 스타일시트 CSS3 스타일시트를 완벽하게 지원 성능 및 통합 HTML5는 기존의 웹 표준보다 빠르다 추가 기능을 사용해 웹의 성능을 극대화
1.3 HTML5를 공부해야 하는 이유 웹 애플리케이션 모바일과 태블릿 PC, 스마트 TV에 다양한 운영체제가 등장 모두 각각의 프로그래밍 언어를 사용해서 개발 안드로이드 – 자바, iOS – ObjectiveC 등등 HTML5를 사용하면 모든 운영체제에서 동작하는 애플리케이션을 한번 에 제작할 수 있음
1.4 Visual Studio 2013 Express 설치 Visual Studio 2013 Express for Web 현재 무료로 제공되는 통합 개발 환경에서 HTML5를 가장 완벽하게 지원하는 통합 개발 환경 윈도 XP 이하의 버전에서는 사용할 수 없는 단점 존재 http://goo.gl/VbGmQc에서 다운
1.5 HTML 페이지 생성 파일 생성 파일 > 새 파일을 눌러 새 파일 대화 상자 실행
1.5 HTML 페이지 생성 파일 저장 파일 > HTMLPage.html 저장 또는 Ctrl + S 버튼을 눌러 저장
1.5 HTML 페이지 생성 파일 실행 다음 코드를 입력한다. File > View in Browser를 눌러 실행
1.6 구글 크롬 설치 구글 크롬 설치 크롬은 가장 많은 HTML5 특징을 제공하는 웹 브라우저 https://www.google.com/chrome/browser/에서 다운 및 설치
1.7 구글 크롬 개발자 도구 개발자 도구 웹 페이지를 개발하는 데 유용한 기능을 제공하는 도구 구글 크롬을 실행하고 F12 또는 마우스 오른쪽 버튼을 누르고 요소 검 사를 선택 태그가 차지하는 영역과 속성 확인 가능