HTML/CSS/JS 팁

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

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

제목 글쓴이 날짜
웹페이지에서 ICQ 번호 자동으로 추가하기... [1] 잔디 2001.01.05
이미지가 차츰 변하게 하는 자바스크립트.. [3] 잔디 2001.01.05
스크롤바 색깔 바꾸는 스타일... [8] 잔디 2001.01.05
^^사용자 해상도알아내는 스크립트~ onjjang 2001.01.13
블라인드 효과 스크립트~ [2] 박규진 2001.01.14
자바에서도 쿠키를 구워야할때 [4] Kritz 2001.01.15
[자바스크립트]새창띄우기의 변종.. (별로 중요하지않음.. =_=;;) [2] Adios 2001.01.15
[자바스크립트] 전체로 창을 띄우는 자바~ 김정함 2001.01.21
환상적인 무지개 빛 링크 자바스크립입니다. 마우스만 대면 그냥... [8] 은하수w 2001.03.24
[Tip] 페이지 이동중이라고 표시해보자~ ^_^ [10] BiHon 2001.03.28
DHTM 을 이용한 마우스 오른쪽의 메뉴 만들기.. [11] 허진규 2001.03.30
웹사이트 로딩속도 높혀주는 10가지 방법 [32] 2001.07.25
주소치면 이동하는 스크립트 gain.ne.kg 2001.07.27
오늘 날짜 보여주기 스크립트 [3] 정후니 2001.08.31
(table)에서 HTML 태그를 적용시켜 보기 [16] 정후니 2001.08.31
페이지마다 타이틀 변경하기 [3] WOWpc 2001.10.10
익스플로러의 자동완성 기능 off 하기 [7] WOWpc 2001.10.23
글씨를 세로로 써봅시다...^_^ [6] 술도짱 2001.11.14
글입력상자에서 자동으로 한글, 영문 바뀌게 하기 [6] 이경두 2001.11.15
새로운필터를 적용한 칼라버튼.[ie5.5 sp2이상] [26] 술도짱 2001.11.15