CSS reset과 normalize

Reset CSS란?

브라우저마다 각 태그에 대한 속성들이 약간씩 다르기 마련인데,

이를 초기화 시키고 작업해 모든 브라우저에서 동일하게 작동하도록 만드는 방법

즉, 크로스 브라우징 이슈에 대응하기 위한 방법 중 하나이다.

직접 코드를 작성할 수도 있지만, 다른 사람들이 만들어 놓은 보일러 플레이트 중에 유명한 것을 가져옴

Eric Meyer’s “Reset CSS” 2.0

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

위의 설정에 추가적으로 개인적으로 쓰는 설정

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

 

Normalize CSS

normalize는 무작정 초기화 시키는것이 아닌,
브라우저의 기본 스타일을 통일시켜주는 방법이다.
자주 쓰이고 npm package로도 제공되는 보일러플레이트이다.
내용은 길어 따로 불러오지는 않았고 링크를 첨부했음

 

마무리

작업에 리소스가 더 많이 들어가는 것은 reset이지만,
섬세하게 하나하나 핸들링하기엔 더 좋은 방법이다.
reset과 normalize를 비교해보고 현재 프로젝트에 맞는 방법을 택하는 것이 중요함

개인적으로 공부한 내용을 정리한 것이기 때문에 반말을 사용한 점 양해 부탁드립니다.
잘못된 부분이나 피드백이 있으시다면, 댓글에 남겨주시면 감사하겠습니다!