웹마스터 팁

  2. Support
  3. 웹마스터 팁

[펌] HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기

2011.01.11 13:33

999 

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

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

이 게시물을
좋아요
목록
제목 글쓴이 날짜
[HTML 초보자]동영상을 출력하자-2 [3] ZipShin 2002.12.12
[HTML 초보자]동영상을 출력하자-1 [6] ZipShin 2002.12.11
[프레임셋] 1024*768.. 800*600 에서도 화면 제대로 보이기... [5] hooniv 2002.12.10
[HTML 초보자]iframe대신 사용할수있는 오브젝트-2 [12] ZipShin 2002.12.06
[HTML 초보자]iframe대신 사용할수있는 오브젝트-1 [8] ZipShin 2002.12.06
허접강의 -_-; 소스보기 금지 푸는방법들 [21] 허진규 2002.12.05
흐르는 폼 내용 출력 ㅡ,.ㅡγ [9] ☆밥동자γ 2002.11.30
[HTML 초보자] 글자움직이는 마퀴태그의 응용(Last) [3] ZipShin 2002.11.26
[HTML 초보자] 움직이는 글자반복횟수를 정하자... ZipShin 2002.11.22
[HTML 초보자] 글자가 움직이는 스크롤 지연값 -_- ZipShin 2002.11.22
〔Tale〕테일이랑 같이 글상자 이쁘게 만들어요 [1] TaleB˚ 2002.11.17
[HTML 초보자] 글자가 좌우 왕복하게 만들기. ZipShin 2002.11.14
[HTML 초보자] 마퀴태그가 한번 반복 후 화면 끝에서 정지 ZipShin 2002.11.08
[HTML 초보자] 일정한 방향으로 스크롤하기(마퀴태그) [5] ZipShin 2002.11.08
링크부분에 밑줄을 없애는 방법 [5] Kinds 2002.11.04
입력폼 스타일변경... [2] 디아릭스 2002.11.04
[HTML 초보자] 글자 움직이는 높이 설정 ZipShin 2002.11.02
희안한 css [투명한 프레임과 투명한 이미지] [10] ☜＊핑♡크＊☞ 2002.10.30
[HTML 초보자] 글자 움직이는 폭(넓이) 설정 ZipShin 2002.10.28
뽀유의 스타일시트 특별강좌 [28] 뽀유♡ 2002.10.25
태그 쓰기