CSS Reset에 대한 이해: reset.css의 필요성과 사용법

CSS Reset하기!

reset.css는 웹 개발에서 사용되는 스타일 시트 중 하나로, 브라우저의 기본 스타일을 초기화하여 각 브라우저 간의 일관성을 유지하고 일부 요소의 스타일을 표준화하는데 도움을 줍니다. 일반적으로 웹 페이지가 동일한 모양을 가지도록 만드는 데 사용됩니다.

 

주로 CSS의 브라우저 간 호환성 문제를 해결하기 위해 만들어졌습니다. 다른 브라우저는 기본적으로 각각 다른 스타일을 가지고 있기 때문에, 이를 통일시키기 위해 리셋 스타일을 사용합니다.

 

/* reset.css */

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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}

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 속성의 기본값이 다를 수 있습니다. 
그렇기 때문에 속성들의 스타일들을 초기화하여 브라우저간의 차이를 최소화합니다.

 

여러 가지 주요 속성들에 대한 리셋 이유

1. margin 및 padding 초기화

 - 브라우저는 일부 요소에 대해 기본적으로 마진과 패딩을 설정합니다. 이를 초기화하지 않으면 각 요소간에 예상치 못한 공간이 발생할 수 있습니다.

 

2. 텍스트 스타일 초기화

 - 텍스트 요소들은 기본적으로 브라우저에 따라 폰트 크기나 간격 등이 다르게 설정될 수 있습니다. 리셋을 통해 일관된 텍스트 스타일을 적용합니다.

 

3. List 스타일 초기화

 - 순서 리스트 (<ol>)와 비순서 리스트 (<ul>)의 마커 스타일이 브라우저에 따라 다를 수 있습니다. 이를 초기화하여 커스텀 스타일을 적용할 때 일관성을 유지합니다.

 

4. 링크 스타일 초기화

- 기본적으로 링크에는 브라우저마다 다르게 적용되는 스타일이 있습니다. 초기화하면 링크에 일관된 스타일을 적용할 수 있습니다.

 

5. 표 스타일 초기화

 - 표 관련 요소들은 각 브라우저에서 다르게 스타일이 지정될 수 있습니다. 표 스타일을 초기화하여 동일한 표 형식을 보장합니다.

이렇게 리셋을 통해 기본 스타일을 초기화하면, 개발자는 필요한 스타일을 직접 지정하면서 브라우저 간의 호환성을 개선할 수 있습니다. 하지만, 주의해야 할 점은 일부 요소들의 기본 스타일을 완전히 초기화하면 디자인에 불편함이 있을 수 있으므로 적절한 리셋 스타일을 선택하는 것이 중요합니다.