html5 Reset Stylesheet - html5용 재설정 스타일시트

html4 도 마찬가지지만 html5에서도 브라우져 호환성을 위해 스타일 시트를 초기화합니다.
이는 초기화보다도 재설정이라고 해야 맞는 표현인것 같습니다.

이전에 소개했던 html5 사이트에서 제공하는 스타일시트를 그대로 사용하면 됩니다.
http://html5boilerplate.com/  에서 제공하는 스타일 시트

style.css


코드를 읽을줄 알면 모든 주석을 제거하고 스타일 시트를 분기해서 사용하면 좋겠습니다.

또 한군데는 html5용 재설정 스타일코드를 제공합니다. 
HTML5 Reset Stylesheet - html5doctor.com 에서 제공하는 코드입니다.

reset.css


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;
}


일반 html 에서는 에릭마이어를 사용하고 html5에서는 html5doctor 이나 html5bolilerplate 에서 제공하는 스타일 시트를 이용하면 좋을것 같습니다.
티스토리 스킨을 만들때 저도 사용해봤지만 괜찮습니다.
tag , , , ,
트랙백 0 개    댓글 1 개

댓글

  1. 2012.12.07 17:15 신고 BlogIcon 권오경  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 덕분에 걱정이 줄었네요.