TIL 09_CSS Reset(초기화)

CSS Reset(초기화)?

HTML 요소에 내장된 CSS 스타일 속성을 초기화 시켜서 크로스브라우징(브라우저마다 동일한 모양을 갖게끔 만드는 것) 구현할 때 유용하게 사용한다.
각각의 브라우저(IE,Chorme,Firefox …)에는 기본으로 제공하는 스타일이 있다. 예를 들면 margin, padding, font 등의 입력 양식들의 차이를 줄이고자 사용한다.

CSS Reset 코드 예시

/* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/



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

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

a, abbr, acronym, address, big, cite, code,

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

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

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

fieldset, form, label, legend,

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

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

    display: block;

}

body {

    line-height: 1;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

 

마치며!

하지만 글을 읽어보니 리셋 스타일 기반으로 제작된 CSS에서 나중에 문제가 발생했을때, 리셋 스타일 부분만 수정하거나 지울 수가 없다고 한다.
리셋 스타일을 그대로 가져가 쓰지않고 나만의 기본 스타일 설정을 개발하는 것이 가장 바람직하다!