html5 Reset Stylesheet - html5용 재설정 스타일시트
- 퍼블리셔/html
- 2012. 1. 19. 06:00
html4 도 마찬가지지만 html5에서도 브라우져 호환성을 위해 스타일 시트를 초기화합니다.
이는 초기화보다도 재설정이라고 해야 맞는 표현인것 같습니다.
이전에 소개했던 html5 사이트에서 제공하는 스타일시트를 그대로 사용하면 됩니다.
http://html5boilerplate.com/ 에서 제공하는 스타일 시트
코드를 읽을줄 알면 모든 주석을 제거하고 스타일 시트를 분기해서 사용하면 좋겠습니다.
또 한군데는 html5용 재설정 스타일코드를 제공합니다.
HTML5 Reset Stylesheet - html5doctor.com 에서 제공하는 코드입니다.
html 이나 xhtml 에서는 에릭마이어의 스타일 초기화 코드를 사용해도 좋습니다.
저는 이걸 사용하거든요.
Eric Meyer’s CSS reset
일반 html 에서는 에릭마이어를 사용하고 html5에서는 html5doctor 이나 html5bolilerplate 에서 제공하는 스타일 시트를 이용하면 좋을것 같습니다.
티스토리 스킨을 만들때 저도 사용해봤지만 괜찮습니다.
이는 초기화보다도 재설정이라고 해야 맞는 표현인것 같습니다.
이전에 소개했던 html5 사이트에서 제공하는 스타일시트를 그대로 사용하면 됩니다.
http://html5boilerplate.com/ 에서 제공하는 스타일 시트
코드를 읽을줄 알면 모든 주석을 제거하고 스타일 시트를 분기해서 사용하면 좋겠습니다.
또 한군데는 html5용 재설정 스타일코드를 제공합니다.
HTML5 Reset Stylesheet - html5doctor.com 에서 제공하는 코드입니다.
html 이나 xhtml 에서는 에릭마이어의 스타일 초기화 코드를 사용해도 좋습니다.
저는 이걸 사용하거든요.
Eric Meyer’s CSS reset
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
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;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
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;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
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;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
티스토리 스킨을 만들때 저도 사용해봤지만 괜찮습니다.