웹마스터 팁
[펌] HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기
2011.01.11 13:33
<header> <hgroup> <h1>Company Name</h1> <h2>An example of HTML5 and CSS3 in action</h2> </hgroup> </header><nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav><article> <header> <time datetime="2010-01-12" pubdate> <span>Jan</span> 12 </time> <h1> <a href="#" title="Link to this post" rel="bookmark">Article Heading</a> </h1> </header> <p>This is an article that demonstrates some of the new features that HTML5 and CSS3 has to offer. This article contains several sections, each with its own heading, as well as a video element which will play a video without Flash on browsers that support it.</p> <section> <header> <h1>This is a section heading</h1> </header> <p>This is an example of a basic section of a document. A section can refer to different parts of a document, application, or page. According to the draft W3C spec, HTML5 sections usually have headings.</p> </section> </article><footer> <p>© 2009 Company Name. All rights reserved.</p> </footer>
보러가기 : http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/index.html
이게 기본구조라네요.
XE2 는 HTML5에 최적화 되겠죠 ?
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Demo</title> <link rel="stylesheet" href="styles.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk /html5.js"></script> <![endif]--> </head> <body> </body> </html>
1. 시맨틱 요소
HTML5 에서는 div 를 계속 사용하긴 하지만, div 보다 시맨틱요소를 권장한다고 합니다.
기존에 방식은 div 에 id 나 class 를 줘서 사용했는데
HTML5 부터는 이름이 정해져서 나온다는~
<article></article>
<aside></aside>
<hgroup></hgroup>
<nav></nav>
<section></section>
<audio></audio>
<canvas></canvas>
<video></video>
이런식으로 말이죠.
2. input type 폼양식의 변화
기존의 input type submit select 등의 태그에 변화가 있습니다.
color date number tel time month week url email 과 같이 한눈에 보기 쉽게 바뀐다는
<section> <header> <h1>This is a feedback form</h1> </header> <p><form> <label for="contact_name">Name:</label> <input id="contact_name" placeholder="Enter your name" autofocus><br /> <label for="contact_email">E-mail:</label> <input type="email" id="contact_email" placeholder="Enter your email address"><br /> <label for="contact_phone">Phone:</label> <input type="tel" id="contact_phone" placeholder="Enter your phone number"><br /> <label for="contact_callback">Callback on:</label> <input type="datetime" id="contact_callback"><br /> <label for="contact_priority">Priority:</label> <input type="range" min="1" max="5" value="1" id="contact_priority"><br /><br /> <input type="submit" value="Request Call"> </form></p> </section>
3. 새로운 기능
location 이라는 태그로 지리정보를 받을 수 있습니다. 위성위치인 위도/경도 형태로 나타난다는..
자바스크립트를 사용하지 않고도 , 끌어놓기를 할 수 있습니다.
다양한 TTF 폰트를 적용할 수 있습니다.
동영상 음악등의 음성/배경음악 강조효과
.
.
자세한건 위 링크에...
* HTML5 는 IE 6,7,8 에선 작동하지 않아요.
* 첨부파일에 예제 올렸습니다.
댓글 6
-
misol
2011.02.05 11:52
-
날개!
2011.03.22 22:52
폼태그에서 필드셋과 레전드요소는 없어진건가요? -
EveR™
2011.03.23 21:58
IE6, IE7, IE8 버전에서 HTML5가 안된다는건....
XP사용자들은 HTML5 못 써먹는단 뜻이네요. ㅎㅎ
참 이래 저래 MS는 사람 골치아프게 하는 제주가 있어요 ㅋㅋㅋ -
Apollos2304
2011.05.02 02:54
참으로 머리아플찌고,,,,,
HTML5나 CSS3를 강제로 사용하게끔 하는 뭔가가 있다고는 하는데
IE6, 7, 8에서 사용도 못하는걸 왜,,,,, IE9에서만 쓸수 있게 만들어놨는지
ㄷㄷㄷㄷㄷㄷ -
익멍
2011.10.26 01:39
인터넷 브라우져가 IE밖에 없다는 그렇겠지만....
인터넷 브라우져라는게 참많습니다. -
웹엔진
2013.02.12 02:53
아마 IE9도 HTML5와 CSS3를 모두 지원하는게 아니라서 완벽히 작동될지 안될지는 모르겠네요.
제목 | 글쓴이 | 날짜 |
---|---|---|
게시판 스킨에서 조회수, 추천수, 최근 수정일 외 항목도 정렬가능하게 하기 | SMaker | 2009.06.11 |
로그인 페이지 만드는 방법 [5] | 산토 | 2009.06.12 |
외부문서에서 mms:// 태그 사용하기 [11] | 아고라 | 2009.06.12 |
에디터 컴포넌트 목록이 안 나올 때 해결법 [2] | SMaker | 2009.06.14 |
layout.html에 접근 못하게막기. [8] | Habile | 2009.06.15 |
업데이트 후 Rewrite mod 사용이 안돼는 경우 [2] | 겨우리851 | 2009.06.18 |
XE용 query xml 방식으로 일반 테이블도 접근 처리 하기 [1] | 라르게덴 | 2009.06.18 |
확장변수 폼 디자인 하기 [14] | Diver | 2009.06.21 |
게시판 메뉴에 새글 알림 표시 띄우기 [13] | 보거스내친구 | 2009.06.21 |
개인쪽지발송!~ | noirzo | 2009.06.23 |
로그인 후 그룹별로 다른 페이지로 가기 - 업데이트판 v1.5 [19] | 무대포2 | 2009.06.24 |
쪽지 답글 보내기 원본 내용 삭제 | 절망린 | 2009.06.24 |
보낸 쪽지함에서 쪽지 내용 안에 회원 아이콘이 제대로 표시 되지 않을때.. | 절망린 | 2009.06.24 |
페이지 제일 위로 바로가는 Top 버튼 [5] | 개돌 | 2009.06.26 |
로그인 & 파일 첨부 문제 [3] | peter99 | 2009.06.29 |
이미지 리사이즈 적용이 안되는 경우 [4] | 아고라 | 2009.06.30 |
확장변수에 회원정보를 넣어보자 [10] | 개돌 | 2009.06.30 |
지오피아 게임 제로보드 XE 연동 [5] | 다른사람 | 2009.06.30 |
달력형 리스트 입니다. [5] | 착한악마 | 2009.07.01 |
제로보드 매뉴얼 version 0.63 입니다. [16] | 윈매니아 | 2009.07.03 |
http://www.ibm.com/developerworks/kr/library/x-think45/index.html
도 읽을만해요.. 이 카테고리 전부 읽어두면 좋을것 같아요 ㅋ