웹마스터 팁

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

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

이 게시물을
좋아요
목록
제목 글쓴이 날짜
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] file CoolUnit 2004.03.01
그림위에 마우스를 올렸을때 그림저장 버튼 안나타나게 하기... [17] file PHASE 2004.01.19
스크롤바 색상을 아름답게. [17] file 해리포터포에버 2003.12.16
마우스 커서에 대해서... [16] file impre 2003.09.20
노프레임 홈페이지에서 상하좌우에 원하지 않는 간격이 생길때... [9] file PHASE 2003.09.08
벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (수정 #1) [31] file 토끼군 2003.08.20
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기 [27] file @kihwa 2003.07.26
노프레임 홈만들기 (2) - 로그인, 최근게시물 설치 [31] file @kihwa 2003.07.26
노프레임 홈만들기 (1) - 표로 레이아웃 만들고 그림 삽입하기 [45] file @kihwa 2003.07.11
쭘's식 홈페이지 만들기 No.5 - (미리보기 포함) [18] file 쭘's 2003.07.07
쭘's식 홈페이지 만들기 No.4 - (미리보기 포함) [26] file 쭘's 2003.06.16
쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [37] file 쭘's 2003.06.07
css3 안쪽과 바깥쪽 그림자 만들기 입니다 file 낮은자 2014.03.06
[펌] HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 [6] file 999 2011.01.11
노프레임 홈페이지 만들기 강좌 file H.N커뮤니티 2009.02.28
메뉴에 마우스오버시 레이어서브메뉴창 뜨게하기 (나모웹) file H.N커뮤니티 2009.02.22
css 정리 파일(한글) [3] file 미곰탱 2009.01.22
스크립트 모음 [1] file *이종민* 2008.11.29
계산기 [1] file *이종민* 2008.11.29
바탕화면에 바로가기 만들기 file *이종민* 2008.11.29
태그 쓰기