[CSS] CSS 초기화 코드

CSS 초기화 코드

웹 브라우저에는 Default Style이 존재한다. (브라우저가 내장하고 있는 기본 스타일)

(웹브라우저에 따라 디폴트 스타일이 상이하고 지원하는 tag나 style도 제각각.)

불필요한 속성이나 의도하지 않은 값이 적용되는 것을 방지하거나

각 페이지 마다 동일한 형태를 표시하기 위해 Style Sheet에 초기화 코드를 넣는 경우가 존재한다.

 

한편으로는 웹 브라우저 내장된 스타일 시트를 사용하지 않으므로

서버 요청에 따른 성능 저하가 있을 수 있으며,

사용자는 웹 브라우저를 한 종류만 이용하므로 브라우저간 모양을 힘들게 잡을 필요 없을 수 있다.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,
input,textarea,p,blockquote,th,td{margin:0;padding:0;}
img{border:none;vertical-align:top;}
fieldset{border:none};
li{list-style: none;}
input,select,button{vertical-align: middle;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}
address,caption,cite,code,
dfn,em,strong,th,var{font-style: normal;font-weight: normal;}

 

또 다른 초기화 코드 예시

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

 

※ 그 밖에 알려진 Reset Code

- Eric Meyer's Reset CSS

- HTML5 Doctor CSS Reset

- YUI 3 Reset CSS