작업을 하다보단 다른 분들이 작업한 내용을 수정할 때 가 있습니다. 하지만 수정하는 것이 좋을지 뒤집어엎는 것이 좋을지 고민을 할 때가 있습니다. 그럴 땐 아무 생각하지 말고 뒤집어엎으세요. 지금 몸과 마음이 조금 힘들어도 시간이 지나면 잘했다고 생각하게 됩니다.
이때 아래 코드 한번 사용해 보세요.
CSS 리셋은 각 브라우저의 기본 스타일을 재설정하여 동일한 시작점에서 스타일을 적용하기 위한 방법입니다. 이를 통해 브라우저 간의 일관성을 유지하고 예기치 않은 스타일 차이를 줄일 수 있습니다. 가장 널리 사용되는 CSS 리셋 중 하나는 Eric Meyer's Reset CSS입니다. 아래는 간단한 버전의 Eric Meyer's Reset CSS입니다.
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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;
}
이 코드는 웹 페이지의 모든 요소의 마진, 패딩, 테두리를 0으로 설정하고, 글꼴 크기를 상속받고, 줄 높이를 1로 설정합니다. 또한 HTML5 요소에 대한 디스플레이 속성을 설정하고, 목록 및 인용문에 대한 스타일을 제거합니다.
이 CSS 리셋은 모든 스타일을 제거하고 처음부터 시작하므로 주의하여 사용해야 합니다. 종종 프로젝트의 특정 요구 사항에 맞게 조정해야 할 수 있습니다.