웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
보러가기 : http://www.ibm.com/developerworks/kr/library/tutorial/wa-html5/index.html
[펌] 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
제목 | 글쓴이 | 날짜 |
---|---|---|
[HTML 초보자] 글자 움직이는 폭(넓이) 설정 | ZipShin | 2002.10.28 |
희안한 css [투명한 프레임과 투명한 이미지] [10] | ☜*핑♡크*☞ | 2002.10.30 |
[HTML 초보자] 글자 움직이는 높이 설정 | ZipShin | 2002.11.02 |
입력폼 스타일변경... [2] | 디아릭스 | 2002.11.04 |
링크부분에 밑줄을 없애는 방법 [5] | Kinds | 2002.11.04 |
[HTML 초보자] 일정한 방향으로 스크롤하기(마퀴태그) [5] | ZipShin | 2002.11.08 |
[HTML 초보자] 마퀴태그가 한번 반복 후 화면 끝에서 정지 | ZipShin | 2002.11.08 |
[HTML 초보자] 글자가 좌우 왕복하게 만들기. | ZipShin | 2002.11.14 |
〔Tale〕테일이랑 같이 글상자 이쁘게 만들어요 [1] | TaleB˚ | 2002.11.17 |
[HTML 초보자] 글자가 움직이는 스크롤 지연값 -_- | ZipShin | 2002.11.22 |
[HTML 초보자] 움직이는 글자반복횟수를 정하자... | ZipShin | 2002.11.22 |
[HTML 초보자] 글자움직이는 마퀴태그의 응용(Last) [3] | ZipShin | 2002.11.26 |
흐르는 폼 내용 출력 ㅡ,.ㅡγ [9] | ☆밥동자γ | 2002.11.30 |
허접강의 -_-; 소스보기 금지 푸는방법들 [21] | 허진규 | 2002.12.05 |
[HTML 초보자]iframe대신 사용할수있는 오브젝트-1 [8] | ZipShin | 2002.12.06 |
[HTML 초보자]iframe대신 사용할수있는 오브젝트-2 [12] | ZipShin | 2002.12.06 |
[프레임셋] 1024*768.. 800*600 에서도 화면 제대로 보이기... [5] | hooniv | 2002.12.10 |
[HTML 초보자]동영상을 출력하자-1 [6] | ZipShin | 2002.12.11 |
[HTML 초보자]동영상을 출력하자-2 [3] | ZipShin | 2002.12.12 |
[HTML 초보자]동영상을 출력하자-3(높이와 넓이) | ZipShin | 2002.12.16 |