메뉴 건너뛰기

XE : Xpress Engine




UI 팁

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

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

번호 제목 글쓴이 날짜 조회 수
1148 css를 이용한 페이지 인식 헤이즈디자인 2014.04.23 51
1147 무한 스크롤 스크립트 [3] 웹빌드 2014.04.16 409
1146 <div>에 ajax html 넣기 [3] 웹빌드 2014.04.10 648
1145 부트스트랩 css 팁 [1] 돼지코구뇽 2014.04.05 220
1144 [javascript] 기초강좌 | 02 산술, 대입, 증감, 비교연산자 hiwebs 2014.04.01 164
1143 [javascript]기초강좌 | 01 자바스크립트개념 hiwebs 2014.04.01 265
1142 여러가지 프로토타이핑 툴 [1] 드래그홈 2014.03.26 316
1141 여러가지 hover effect 모음 [1] 드래그홈 2014.03.26 269
1140 [Jquery] input box border input pell 2014.03.21 224
1139 모바일 화면 사이즈 관련 팁 젤리빈 2014.03.19 252
1138 |웹폰트(네이버 맑은 고딕, 나눔고딕) 적용하기 다큰왕자 2014.03.18 1220
1137 호환성보기 명령어 모음 다큰왕자 2014.03.17 278
1136 66 Beautiful Free Calendar PSD Designs [1] 드래그홈 2014.03.17 218
1135 jquery를 이용하여, 숫자만 입력 가능하도록 하는 스크립트 file 개발개발 2014.03.14 598
1134 모바일 웹 팁 natureweb 2014.03.13 252
1133 css3를 이용한 button 입니다. Ansi™ 2014.03.13 394
1132 사이트접속시 모바일기기 접속이면 설정한 페이지로 이동시키기 홈피닥터 2014.03.09 363
1131 홈페이지 주소창 상세 링크 안보이게 설정 헤이즈디자인 2014.03.09 392
1130 [jQuery] 클릭하면 내용이 사라지는 방법 낮은자 2014.03.07 404
1129 자주 쓰이는 정규표현식 모음 투니페이퍼 2014.03.06 765