[HTML5 & CSS3] Chapter 1. HTML5 개요

이 포스팅은 모던 웹 디자인을 위한 HTML5+CSS3 입문 (한빛미디어)의 내용을 요약한 것으로 저작권법상 소스코드는 기입하지 않습니다. 개인적인 공부를 위한 요약이므로 상세하게 공부하기 위해서는 여기를 눌러 책을 구입하는것을 추천드립니다.

Chapter 1에 들어가기에 앞서 HTML5을 공부하는 것은 다음 세가지를 공부하겠다는 이야기입니다.

1. HTML5 기본 태그

2. CSS3 선택자 및 속성

3. 자바스크립트

특히 이 책에서는 자바스크립트를 다루지 않으므로 자바스크립트 수업을 병행하는것을 추천드립니다.

현재 진행하고 있는 페이스북 스터디 그룹(클릭하시면 연결됩니다)에 동참하여 다른 분들과 함께 자바스크립트를 공부하실수 있습니다. 또는 생활코딩 홈페이지에서 이고잉님께서 자바스크립트 강의를 제작중이십니다. 여기를 눌러 강의를 시청하실수도 있습니다.

또한 사용하는 개발도구는 대표적으로 Microsoft Visual Studio 2013 웹개발도구, sublime text, brackets.io 등의 프로그램들이 존재하지만 저의 경우에는 Bracket.io를 통하여 공부를 진행하도록 하겠습니다. 무엇보다 Visual Studio보다 가볍기도 하고 무료이며 부가적으로 제공하는 기능들이 상당히 쓸만합니다.

여기에서 다운로드 가능합니다. http://brackets.io/

1.1 웹의 역사

- WWW는 1991년 처음 등장하였다.

- W3C에서 HTML표준을 제정하지만 표준을 강제하지는 않는다.

1.1.2 제 1차 웹 브라우저 전쟁

- 넷스케이프와 Internet Explorer의 전쟁 결과적으로는 IE가 승리하게되고 넷스케이프는 붕괴되었다.

1.1.3 플러그인

- 웹브라우저와 연동되는 특정 프로그램을 사용자 PC에 추가로 설치해 웹 브라우저 기능을 확장하는 방법

- 가장 유명한 플러그인으로는 어도비 플래시와 Microsoft의 Active-X가 있다.

1.1.4 웹 2.0 시대

- 엑티브엑스를 기반으로 기업의 웹 애플리케이션이 제작되기 시작

- 플래시 기반의 일반 사용자를 위한 프로그램들이 개발됨

- 서로 다른 사용자가 함께 새로운 콘텐츠를 창조할 수 있게 된 시대를 웹 2.0 시대라 한다.

1.1.5 WHATWG

- Internet Explorer가 사실상 W3C의 표준 웹 브라우저가 되면서 엑티브엑스 플러그인의 활성화로 웹 사이트가 무거워지기 시작하였고 이를 막고자 W3C회의에서 모질라 재단과 오페라 소프트웨어는 새로운 HTML 표준 제안서를 제출 하였지만 거절당했다. 이에 IE를 제외한 웹 브라우저 제공 기업은 독자적으로 새로운 웹 표준 기관을 설립하는데 이것이 WHATWG이다.

너무 텍스트 위주로 하면 흥미가 떨어질것같아서 넘치는 잉여로움으로 WHATWG의 로고를 하나 넣어보았다. 

1.1.6 제 2차 웹 브라우저 전쟁

- 마이크로소프트와 W3C가 함께한 XHTML2.0이 붕괴하면서 IE 기능 문제가 대두되었는데 다른 웹 브라우저는 모두 최신 표준을 지원하는데 IE는 지원하지 못하는 역현상이 발생하였다.

1.2 HTML5 추가 기능

- 이제 웹에서 평상시에 사용하는 프로그램들 (동영상, 게임, 문서작업) 등이 가능해지면서 무서운 속도로 영역을 확장시키고 있다.

1.2.1 멀티미디어

- 기존에는 웹페이지가 스스로 동영상이나 음악을 재생할 수 없었지만 (유튜브의 경우 플래시를 사용, 최근에는 HTML5 플레이어도 지원) HTML5 멀티미디어를 지원하는 브라우저에서는 영상을 브라우저에서 재생가능하다.

1.2.2 그래픽

- HTML5에서는 하드웨어의 가속을 받아 2차원 그래픽과 3차원 그래픽을 구현 할 수 있다.

- HTML5는 2차원 그래픽 구현을 위하여 다음 두가지 방법을 추가하였다

1. SVG태그를 사용한 2차원 백터 그래픽 구현 (이 책에서는 이것을 다룬다)

2. 자바스크립트 캔버스를 사용한 2차원 래스터 그래픽 구현

- 3차원 그래픽 구현에는 CSS3, 자바스크립트 WebGL을 사용하여 구현이 가능하다.

1.2.3 통신

- HTML5는 서버와 소켓 통신 가능, 전에는 단 방향 통신만 가능하였으나 HTML5 부터는 실시간으로 서버와 양방향 통신이 가능해졌다.

1.2.4 장치 접근

- HTML5는 장치에 접근해 장치의 정보와 기능을 활용 가능하다.

- 예로들어 HTML5는 스마트폰의 배터리 잔량, GPS, 진동 등의 기능을 사용할 수 있다.

1.2.5 오프라인 및 저장소

- HTML5는 인터넷이 연결되지 않은 상태에서도 애플리케이션이 동작 할 수 있다.

1.2.6 ~1.2.8 HTML5 주요기능

- 시멘틱 태그는 지능형 웹을 위해 만들어진 태그이다.

- HTML5는 CSS3을 완벽히 지원한다. 이는 애니메이션 효과를 적용할 수 있게해준다.

- HTML5는 추가 기능을 사용해 웹의 성능을 극대화 할 수있다.

1.3 HTML5를 공부해야 하는 이유

- 개발자 입장에서는 운영체제의 제약에서 자유로워질수 있다.

- 크롬북과 마이크로소프트의 윈도8의 기본 내장 애플리케이션은 모두 HTML5을 사용해 개발되어있다.

- 최근 삼성에서 개발하고 있는 타이젠OS도 HTML5 기반의 운영체제이다.

1.4 개발도구 설치와 부가 프로그램 설치

- 설치 방법에 대해서는 설명하지 않겠습니다. 앞에서 언급한대로 개발도구에는 Visual Studio등의 프로그램이 존재하며 이용자가 원하는 개발도구를 이용하여 공부하시면 됩니다.

- 구글 크롬 기준으로 진행되므로 구글 크롬의 최신 버전을 설치하시는것이 좋습니다.

- IE와의 호환성이 걱정되시면 IE Tester를 설치하여 호환성을 확인하실 수 있습니다.

* 정리후기

- HTML5를 다시 공부하기 시작했다. 한번 공부를 했던 내용이지만 블로그에 저장함으로서 다른 사람에게도 공유를 하면서 공부를 하는것이 자극이 될것 같기도 하였고 최근에 자바스크립트도 다시 공부를 시작함으로서 필요한 내용이라 다시 공부하게되었다. 사실 HTML5만으로 보자면 단기간에 공부가 가능하지만 정리한다는 마음으로 정리를 하게되었다. 군대가기 전까지는 실제로 사용 가능한 서비스를 하나 제작해볼 생각이다. 추가로 개인적인 공부를 위하여 정리를 하는 것이므로 책의 상당 부분 (아는 내용에 한해) 생략할 생각이다. 참고로만 이 포스팅을 사용하고 실공부를 위해서는 책구입을 권한다.(책 구입 링크는 포스트 상단에 있다) 그리고 책을 구입하는게 책이 아까워서라도 공부하는데(?) 자극을 준다..