1. HTML 5.0이란?
- 마크업 언어(여러 플랫폼 환경에서 동일하게 적용되는 언어) / 개발 언어(HTML 5로 오면서 생긴 것)
- 개발의도
> HTML 5.0 이전에는 웹 페이지에서 멀티미디어 콘텐츠를 구현하기 위해서는 Plug-in(플러그인)을 설치해야 함
> 이러한 것(플러그인)에서 자유로운 웹을 만들자는 것이 HTML5.0의 태동이 되었다.
- 아직 정식 권고안이 나오지 않음(2012년 예정)
- 웹 애플리케이션
2. 웹 애플리케이션이란?
- 웹 자체가 하나의 애플리케이션 처럼 동작
- 웹 환경이 지원된다면, 어느한 플랫폼에서도 사용이 가능하고, 업데이트에 요으이 하다
- H/W장치를 현재는 사용이 불가능하다.(현재라는 단어에 주목! 차후 개발중)
- 웹 애플리케이션의 반대 개념으로 네이티브 애플리케이션이 있다.
- 네이티브 애플리케이션이란?
> 컴퓨터에 설치후 실행하는 애플리케이션
> 실행 속도가 빠르고, 장치하드웨어 사용이 가능하다.
> OS마다 따로 설치하는 프로그램이 있어야 한다.
3. 플래시 vs HTML 5.0
- 플러그인이란 역시 플래시와 직접적인 영향이 있으며,
현재 HTML 5.0에서는 플래시를 브라우져에서 제거 하려고 한다.
- 플래시 플러그인이 한번 설치 되면 지속적인 이용이 가능하다.
- 플래시를 PC상에서 사용한다면 화려하고 멋있겠지만, 이것을 모바일로 가져 온다면??
> 트래픽이 다수 발생(사용자 요금 증대)
> 전력 소모량 증가
- HTML 5.0은 웹상에 플래시에서 제공하는 요소를 그냥 보여주는 형식으로 하기로 한다.
- 즉, 비디오나 음악 컨텐츠를 바로 보일수 있게 하는 Tag를 가지고 있다.
4. HTML 5.0과 HTML 4.0과의 문서구조 비교
- HTML 4에서는 웹 문서의 레이아웃을 구성하기 위해 <div>를 이용 하였다.
> 수 많은 div는 각각에 id값이 주워져서 사용되었다.
> div라는 아무 의미없이 사용되고 id로 관리됨에 따라 다른 사람이 이해하기/읽기가 힘듬 ( 가독성↓)
- HTML 5 에서는 태그만 보아도 의미가 다가오는 시맨틱(Semantic)요소/태그가 도입
- HTML 5 에서의 시맨틱요소
ⓐ <header> : 사이트 소개 정보/메인메뉴, 사이트 로고등이 포함됨.
ⓑ <nav> : 메뉴나 링크 같은 내비게이션 요소들이 포함됨.
ⓒ <section> : 실제 문서 내용이 들어간다. 만약 문서내용이 많다면 아래의 태그를 사용하고, section으로 묶음
ⓓ <article> : <section>, 즉, 문서내용이 많을시 article로 나눈다.
ⓔ <aside> : 주요 내용외에 내용들이 추가 표현된다.
ⓕ <footer> : 문서의 최하단에 붙으며, 문서 링크 정보나 저작권 정보들이 들어있다.
5. HTML 5.0의 DTD
- <!DOCTYPE html>
------------------------------------------------------------------------------------------------------
HTML 5.0에 대한 공부를 시작했습니다.
여러가지 다른 것으로 바뻐서 자주는 못하겠지만 지속적으로 하려고 노력합니다.
- 마크업 언어(여러 플랫폼 환경에서 동일하게 적용되는 언어) / 개발 언어(HTML 5로 오면서 생긴 것)
- 개발의도
> HTML 5.0 이전에는 웹 페이지에서 멀티미디어 콘텐츠를 구현하기 위해서는 Plug-in(플러그인)을 설치해야 함
> 이러한 것(플러그인)에서 자유로운 웹을 만들자는 것이 HTML5.0의 태동이 되었다.
- 아직 정식 권고안이 나오지 않음(2012년 예정)
- 웹 애플리케이션
2. 웹 애플리케이션이란?
- 웹 자체가 하나의 애플리케이션 처럼 동작
- 웹 환경이 지원된다면, 어느한 플랫폼에서도 사용이 가능하고, 업데이트에 요으이 하다
- H/W장치를 현재는 사용이 불가능하다.(현재라는 단어에 주목! 차후 개발중)
- 웹 애플리케이션의 반대 개념으로 네이티브 애플리케이션이 있다.
- 네이티브 애플리케이션이란?
> 컴퓨터에 설치후 실행하는 애플리케이션
> 실행 속도가 빠르고, 장치하드웨어 사용이 가능하다.
> OS마다 따로 설치하는 프로그램이 있어야 한다.
3. 플래시 vs HTML 5.0
- 플러그인이란 역시 플래시와 직접적인 영향이 있으며,
현재 HTML 5.0에서는 플래시를 브라우져에서 제거 하려고 한다.
- 플래시 플러그인이 한번 설치 되면 지속적인 이용이 가능하다.
- 플래시를 PC상에서 사용한다면 화려하고 멋있겠지만, 이것을 모바일로 가져 온다면??
> 트래픽이 다수 발생(사용자 요금 증대)
> 전력 소모량 증가
- HTML 5.0은 웹상에 플래시에서 제공하는 요소를 그냥 보여주는 형식으로 하기로 한다.
- 즉, 비디오나 음악 컨텐츠를 바로 보일수 있게 하는 Tag를 가지고 있다.
4. HTML 5.0과 HTML 4.0과의 문서구조 비교
- HTML 4에서는 웹 문서의 레이아웃을 구성하기 위해 <div>를 이용 하였다.
> 수 많은 div는 각각에 id값이 주워져서 사용되었다.
> div라는 아무 의미없이 사용되고 id로 관리됨에 따라 다른 사람이 이해하기/읽기가 힘듬 ( 가독성↓)
- HTML 5 에서는 태그만 보아도 의미가 다가오는 시맨틱(Semantic)요소/태그가 도입
- HTML 5 에서의 시맨틱요소
ⓐ <header> : 사이트 소개 정보/메인메뉴, 사이트 로고등이 포함됨.
ⓑ <nav> : 메뉴나 링크 같은 내비게이션 요소들이 포함됨.
ⓒ <section> : 실제 문서 내용이 들어간다. 만약 문서내용이 많다면 아래의 태그를 사용하고, section으로 묶음
ⓓ <article> : <section>, 즉, 문서내용이 많을시 article로 나눈다.
ⓔ <aside> : 주요 내용외에 내용들이 추가 표현된다.
ⓕ <footer> : 문서의 최하단에 붙으며, 문서 링크 정보나 저작권 정보들이 들어있다.
5. HTML 5.0의 DTD
- <!DOCTYPE html>
------------------------------------------------------------------------------------------------------
HTML 5.0에 대한 공부를 시작했습니다.
여러가지 다른 것으로 바뻐서 자주는 못하겠지만 지속적으로 하려고 노력합니다.