티스토리 뷰
HTML5 두번째 시간이 돌아왔습니다.
이번 시간에는 HTML5인지 아닌지 어떻게 구분할 수 있는지와
기존 HTML 버전과 무엇이 다른지 알아보도록 하겠습니다.
첫번째 HTML5인지 아닌지 알아보는 방법에 대해서 알아보도록 하겠습니다.
HTML 페이지를 만들 때 일반적으로
DOCTYPE이라는 것을 문서의 처음 부분에 지정하도록 되어 있는데
아래의 내용과 같이 쓰곤 했었죠.
이걸 ... 외우지도 못하고 그냥 어디에 적어두었다가 복사해서 넣곤 했었던 코드였습니다.
어느 프로그램에서는 자동으로 붙여넣어 쓸 수 도 있었죠.
이번 시간에는 HTML5인지 아닌지 어떻게 구분할 수 있는지와
기존 HTML 버전과 무엇이 다른지 알아보도록 하겠습니다.
첫번째 HTML5인지 아닌지 알아보는 방법에 대해서 알아보도록 하겠습니다.
HTML 페이지를 만들 때 일반적으로
DOCTYPE이라는 것을 문서의 처음 부분에 지정하도록 되어 있는데
아래의 내용과 같이 쓰곤 했었죠.
HTML5 이전에 사용했던 버전의 DOCTYPE!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
이걸 ... 외우지도 못하고 그냥 어디에 적어두었다가 복사해서 넣곤 했었던 코드였습니다.
어느 프로그램에서는 자동으로 붙여넣어 쓸 수 도 있었죠.
HTML5에서의 새로운 문서 형식 (DOCTYPE)
HTML5는 이전 버전의 HTML과는 다르게
간단하고 새로운 문서형식(DOCTYPE)을 제공하고 있는데요.
위에 보이는 코드들은 복잡해서 외우기 어렵지만
HTML5에서는 이렇게 한 줄만 써주면 됩니다.
참 쉽죠잉~~!!
<!doctype html>
이렇게 써주면 웹브라우저에서는
아 이건 HTML5 문서구나! 라고 인식하여 그에 맞게 보여주게 됩니다.
HTML5는 OOO이 다르다!
HTML5는 어떤 기능들이 추가되었을까 궁금하시죠?
HTML4나 XHTML와 비교해서
HTML5가 무엇이 다른지 한번 알아보도록 하겠습니다.
1. 확장된 태그의 지원 |
특히 문서 구조를 적합하게 header, footer, nav, section 같은 구조화 태그도 추가되었습니다.
HTML5 이전에는
아래 그림의 왼쪽에서는 header, side-bar, content, post, footer 등의
각 부분부분을 id로 지정해서 적용을 했는데요
HTML5에서는 각각의 태그로 지정해서 편하게 사용할 수 있어요^^
(자세한 내용은 다음에 다루도록 하겠습니다.)
HTML5의 새 구조적 마크업 - 출처 : http://html5doctor.com/designing-a-blog-with-html5/
더욱 편리해진 폼(form) |
HTML5에서의 새로운 변화는 바로 새로운 폼(form)의 속성이 추가된 것인데요.
기존의 HTML 환경에서는 기본적으로 지원되지 않아서
자바스크립트를 이용해서 구현했던 기능들이 추가가 되었습니다.
달력, 스크롤바, 웹사이트 목록, 이메일, 색상표 등의 타입이 추가가 되었어요.
또 Form 양식에 대해서 유효성 검증 기능도 추가로 지원해서
각각의 폼 양식마다 유효성 검증 기능을 켜고 끌 수 있도록 했으며
정규식 표현의 사용을 통해 더 빨리 작업을 할 수 있게 되었어요.
이제 HTML5를 사용하면 자바스크립트의 양이 많이 줄어들 것 같네요.
리치 웹 애플리케이션 |
웹 어플리케이션을 만드는데 도움이 되는 많은 API를 제공하는데요.
전에는 웹 페이지에서 그림을 그리거나 비디오 및 오디오를 처리하려면
별도의 플러그인(실버라이트, 플래시 등)을 사용해서 처리를 했는데
HTML5에서는 이를 기본적으로 지원한다는 사실!
2차원 그래픽을 그릴 수 있는 canvas 요소와 내장 비디오 및 오디오 재생을 위한 요소를 통해
멀티미디어 기능을 강화할 수 있어요. 그래서 일부에서는 HTML5이 플래시나 실버라이트의 기능을 대체할 것이라는 이야기도 많이 나오고 있죠.
이것으로 HTML5 두번째 강의를 마치겠습니다.
두번째 강의를 마치며
이것으로 두번째 강의를 마쳤네요.
궁금하신 부분이 있다면 댓글로 남겨주시면 답변해 드릴게요^^
글 잘 보셨나요? 잘 보셨다면 아래에 손가락 모양을 꾹 눌러주세요 1초도 안걸려요^^ |
'IT 이야기 > 프로그래밍' 카테고리의 다른 글
[HTML 쉽게 이해하기 강좌] - <head> 태그에 대해서 (0) | 2011.12.02 |
---|---|
[HTML 쉽게 이해하기 강좌] - HTML 문서의 기본 구조 (0) | 2011.12.02 |
[HTML 쉽게 이해하기 강좌] - 주석문 (0) | 2011.12.02 |
[HTML 쉽게 이해하기 강좌 #1] - HTML의 기본 (2) | 2011.12.02 |
[HTML/CSS] 마우스 커서 모양(스타일) 바꾸기 (1) | 2011.11.30 |
[강의] HTML5란? HTML5 자세하게 알아보기 (2) | 2011.10.23 |
C언어 강좌 - 함수 fopen()의 모든 것! (5) | 2011.10.19 |
POST 방식과 GET 방식의 차이 (0) | 2011.10.17 |
모바일 홈페이지로 자동 이동시키는 소스 (2) | 2011.09.21 |
[HTML 쉽게 이해하기 강좌] 2단 레이아웃 한 방에 만들기 (4) | 2011.07.04 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
- W3Schools Online Web Tutorials
- 구차니의 잡동사니 모음
- [IT]블로거팁닷컴
- 비앤아이님의 블로그
- Blog Suspect
- 즐거운하루 blog
- zinicap의 검색엔진 마케팅(SEM)
- 머니야머니야님의 블로그
- [Friend] AtinStory
- [기타배우기]해브원 박스
- [웹표준] SINDB.com
- 해커 C 이야기
- [애드센스] 길라잡이
- 정순봉의 IT SCHOOL
- 씨디맨의 컴퓨터이야기
- 2proo Life Story
- 못된준코의 세상리뷰
- [IT강좌] 정보문화사
- IN 대전
- 에우르트는 나쁜남자 -_-
- 씬의 싱크탱크
- 엔돌슨의 IT이야기
- 진이늘이
- 'Cooltime'의 블로그
- 후이의 Tistory
- Soulstorage
- 앤드&엔드의 블로그
- June Blog
- 노지의 소박한 이야기
- gbWorld
- 인터넷 속 나의 생각
- HarshNix
- ART of WEB
- 녹두장군 - 상상을 현실로
TAG
- MBTI
- 인터넷 익스플로러
- 프로그래밍
- C언어
- php
- 소스코드
- 예제 소스
- 안드로이드 어플
- JavaScript
- 안드로이드 어플 추천
- MBTI 강좌
- HTML
- 모토로이
- MBTI 테스트
- 프로그래밍 문제
- 스마트폰
- C
- MBTI 검사
- MBTI 자료
- It
- C언어 문제
- 강좌
- 안드로이드
- 효과음
- 리뷰
- 인터넷
- C언어 소스
- 소스
- 강의
- 성공
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
글 보관함