웹마스터 팁

 <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>&copy; 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 에선 작동하지 않아요.

* 첨부파일에 예제 올렸습니다.

제목 글쓴이 날짜
ie6에서 css를 일부 불러들이지 못할때 대처법 아쮸 2011.01.04
게시판모듈 글목록에서 분류명(카테고리)를 이미지로 표현하기 [4] nalireco 2011.01.06
[펌] HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 [6] file 999 2011.01.11
"서버에 요청중..." 메세지 없애기 [3] SeoSeungHyun 2011.01.11
xe에 모바일 업로드 하기(api 이용, 파일첨부 업로드 해결) [4] 천민수 2011.01.12
Content위젯에서 분류명(카테고리)를 이미지로 표현하기 [1] nalireco 2011.01.12
텍스타일 블로그 메인페이지 만들기 [1] designm 2011.01.13
탈퇴회원 아이디 재사용 막는 법 [5] 한꼬마 2011.01.18
XE에서 레이아웃이나 기타의 페이지에 include 사용에 대한 오해??? [3] DuRi 2011.01.18
[ 도움요청 ] 게시판 리스트에서 작성한 사람만 작성한 리스트가 보이는 방법 ?? 잘살아서복수!! 2011.01.20
[왕초보팁] 2차 메뉴를 레이아웃 스킨에 넣을 때 [2] HolyJohn 2011.01.21
좋은 레이아웃 찿으시는 분들 선우님이 새로 또 하나의 좋은 레이아웃을 만드 셨네요... [2] 유샤인 2011.01.21
PHP 5.3.x DEPRECATED 에러 해결하기 [2] 난다날아 2011.01.21
'대표도메인'연결후 '로그인'이 안될때,,(먹통) moonlight994 2011.01.24
XE 게시판에 소셜댓글 라이브리 적용하기 [6] [1] file 미자503 2011.01.26
외부에서 단독으로 xe게시판에 글 올리기, blogapi 기능 사용하여, [6] file 김기철980 2011.01.27
PHP의 끝을 닫지 않아도 실행됩니다. [2] SMaker 2011.01.29
홈페이지 브라우저 크기 고정시키기 코아 코스튬 2011.01.30
메뉴에서 채팅방 띄우기 용도로 쓰는 스크립트 코아 코스튬 2011.01.30
랜덤 이미지 롤링위젯스킨에서 컬러셋이 적용되지 않는분은 필독! file xemall 2011.02.02