[CSS] CSS 작업시에 꼭 거쳐야하는 필수 과정 :: CSS Reset, HTML 요소 초기화, 리셋 css

오늘은 웹 개발에서 CSS 파트를 작업할 때 거쳐야하는 필수 과정인 *Reset Css *에 대해서 알아보려 한다.

CSS Reset

css reset은 HTML Element의 Default 값들을 없애주는 작업이다.

 

일반적으로 margin, font, padding, line, size등등과 같은 속성의 값들을 0 또는 none으로 만들어야 한다.

Stackoverflow

위에서 보이다 싶이 Firefox3와 IE7이 보여지는 방식이 달라 개발자가 의도한 대로 웹이 보여지지 않을 때가 있다.

 

이 경우 위에서 말한 듯이 모든 Element의 속성 값들을 없애야 한다.

왜?

웹 표준을 지키며 작업해야 하는 현대 개발 환경에서 IE가 아닌 다른 여러 브라우저에서 개발자가 의도한 대로 보여져야 한다는 요구사항은 선택 사항이 아닌 필수 사항이 되었다.

 

예를 들어 누군가는 Chrome에서 웹을 보거나 Android, IOS 와 같은 모바일 환경에 독자적인 웹 브라우저, 혹은 Firefox를 사용하는 사용자들이 늘어남에 따라 개발자들이 모든 환경을 동일시 하기 위한 작업을 했었는데, 이를 하나의 코드로 편리하게 할 수 있는 코드가 웹 상에 나와있다.

어떻게?

CSS Reset을 시키는 방법은 간단하다.
위에서 이야기 했듯 관련된 모든 요소의 값들을 none 또는 0으로 만들면 된다.

말 그대로 초기화 과정이다.

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

위와 같은 코드를 reset.css라는 파일로 복사 붙여넣기를 하고 reset을 원하는 main css 파일에 @import 해주면 된다.