[CSS] 리셋: reset.css

CSS Logo

---

CSS 기본값 리셋하는 방법

CSS Tools: Reset CSS

 

CSS에는 기본적으로 적용돼 있는 기본값들이 존재하는데, CSS 작업을 하다 보면 이런 기본값들 때문에 원하는 결과물을 곧바로 얻어내지 못하곤 한다. 그럼 프로젝트마다 매번 필요 없는 기본값들을 일일이 리셋해주어야만 하는 불편함을 겪어야 한다. 그런 불편함을 덜어주기 위해 다음 사이트에서 리셋 CSS를 제공한다. 해당 내용을 복사해 reset.css 파일로 만들어준 뒤, html문서로 불러와 연결해주기만 하면 번거로운 작업을 줄여줘 훨씬 수월하게 작업할 수 있다.

 

https://meyerweb.com/eric/tools/css/reset/index.html

CSS Tools: Reset 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, 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;
}
a {
        color: inherit;
        text-decoration: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
}
table {
        border-collapse: collapse;
        border-spacing: 0;
}

 

해당 내용은 기본적으로 위 사이트에서 제공하는 CSS 리셋 정보를 기본으로 따르되, 실제 작업할 때마다 매번 사용하게 되는 a태그에 대한 속성값들을 추가해 보았다. color: inherit;과 text-decoration: none;이 그 예다.