html5 요소 + IE핵

HTML5 기본 레이아웃 구성

<!DOCTYPE html>

<head>

<title>title name</title>

</head>

<body>

<h2>Think Slowly</h2>

</hgroup>

<nav>

<ul>

<li><a href="#">GlobalNav</a></li>

</ul>

</nav>

</header>

</section>

</div>

<nav>

<ul>

<li><a href="/local">ローカルナビ</a></li>

</ul>

</nav>

</header>

<aside>

</aside>

<aside>

</aside>

</div>

</header>

<ul>

</ul>

</article>

</div>

</div>

<ul>

</ul>

</footer>

</body>

</html>

HTML5 기본 요소 설명

header요소

1. header는 페이지당 여러번 사용해도 된다

2. 로고부분 / 웹페이지 단일 섹션소개 / 섹션내의 내비게이션 소개

section 요소

1. section 요소의 콘텐츠은 한가지 주제와 연관

예 :

1) 단락 향식의 인터페이스의 개별 섹션

2) 소개페이지를 구성하는 부분

3) 서비스약관 페이지의 각 단락부분

4) 온라인 뉴스의 다양한 섹션

article 요소

1. article 요소는 문서,페이지,사이트의 독립적인 글을 나타낸다

2. 이론상 독립적으로 배포하거나 재사용할수 있다.

3. 스스로 독립할수 있는 단일한 부분의 콘텐츠

4. article 요소는 다른 article 요소를 내부에 둘 수 있다

예 :

1) 게시판 글

2) 잡지나 신문의 기사

3) 블로그 글

4) 댓글

nav 요소

1. 핵심적인 내비게이션 그룹

2. 한 페이지에 nav요소를 중복 사용가능

aside 요소

1. 타 콘텐츠와 거의 관계가 없다

2. 컨텐츠에서 분리되었다고 여겨질 수 있는 페이지의 일부

3. article 이나 section 을 감쌀 수 있음

예 :

1) 사이드바

2) 보조컨텐츠

3) 보조 링크 리스트

4) 광고란

footer 요소

1. 보통 저작권 정보나 관련 링크 목록

2. 저자 정보

3. 일반적인 콘텐츠 블록의 가장 마지막

HTML5 메타태그 정리

메타태그 종류

메타태그 참고

<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=utf-8">문자인코딩

<META HTTP-EQUIV="Refresh" CONTENT="60"> 60초 마다 새로고침

<META HTTP-EQUIV="Refresh" CONTENT="3;url=http://stepo.tistory.com/"> 주소로 3초후 이동

<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 캐쉬가 저장 되지 않게 함

<META HTTP-EQUIV="Expires" CONTENT=" Mon, 08 Sep 2011 12:00:00 GMT"> 캐쉬 만료일

이미지 마우스 오버시 이미지툴바 표시 안함

페이지 장면 전환 효과

페이지 나갈 때 장면 전환 효과

HTML5 각종 IE핵 (자바스크립트)

IE9이하 버젼에서 HTML5 요소 적용 스크립트

<!--[if IE]>

<![endif]-->

직접 코딩으로 IE에서 HTML5 태그인식 시키는 방법

document.createElement(‘header’);

document.createElement(‘nav’);

document.createElement(‘article’);

document.createElement(‘section’);

document.createElement(‘aside’);

document.createElement(‘footer’);

</script>

또다른 방법

<!-- [if It IE9]>

var e = ("addr,article,aside,audio,canvas,datalist,details,"+

"figure,footer,header,hgroup,mark,menu,meter,nav,output," +

"progress,section,time,vidio").split(',');

for(var i = 0; i < e.length ; i ++){

document.createElement(e[i]);}

</script>

<![endif]-->

html5.js 에서 IE를 위해 지원하는 HTML5 태그

artcle,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,

progress,section,summary,time,video

IE7이하의 브라우저를 위한 IE8.js :

IE6 에서 투명처리가 되지 않는 문제 등 웹표준 향상을 위한 기능 제공

<!--[if IE 7]>

<![endif]-->

IE9 이하에서 <canvas>사용하는 방법

https://code.google.com/p/explorercanvas/

<!--[if IE]>

<![endif]-->

https://code.google.com/p/canvas-text/

<!--[if IE]>

<![endif]-->

IE8이하의 CSS3 핵

http://fetchak.com/ie-css3/ie-css3.htc

.sample { behavior:url(ie-css3.htc); }

파이어폭스 CSS3 핵

-moz-

크롬,사파리 CSS3 핵

-webkit-

오페라 CSS3 핵

-o-

CSS3 기본 셋팅

@charset "utf-8";

/* ===================================================================

style info :HTML5

=================================================================== */

html, body, div, span, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

abbr, address, cite, code,

del, dfn, em, img, ins, kbd, q, samp,

small, strong, sub, sup, var,

b, i,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, summary,

time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

body {line-height: 1; background: #fff; color: #000;}

article, aside, canvas, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, summary { display: block;}

nav ul { list-style: none;}

blockquote, q { quotes: none;}

blockquote:before, blockquote:after,

q:before, q:after { content: ''; content: none;}

a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

ins { background-color: #ff9; color: #000; text-decoration: none;}

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold;}

del { text-decoration: line-through;}

abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help;}

table { border-collapse: collapse; border-spacing: 0;}

hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0;}

input, select { vertical-align: middle;}

기타 팁

<link rel=”stylesheet” href=””>

type=”text/css” 속성 표기 삭제

id 속성의 중복 아이디를 한페이지에 사용하지 않는다.

유효성 검사에서 문제가 생긴다.

<script src=”js/script.js”></script>

type=”text/javascript” 속성표기 삭제

페지이의 로딩속도를 위해 대부분의 script를 웹 페이지 맨 하단에 두어야 한다.

내용을 먼저 로딩한 후 스크립트 분석하도록

SCSS (0)	2019.06.13
스마트폰에서 pre 문자 자동 단락조절 CSS (0)	2014.05.01
CSS 폰트사이즈 정리 (1)	2013.06.06
실전에서 유용하게 쓰이는 CSS 코드 -2- (1)	2013.06.06
실전에서 유용하게 쓰이는 CSS 코드 -1- (1)	2013.06.06

ABOUT ME

디자인101 디자인101

'Front-End' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'Front-End' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바