reset CSS

시중에서 사용 중인 다양한 브라우저 (엣지, 크롬, 파이어폭스 등)은 각자 다른 디폴트 스타일을 가지고 있다.

 

기본적으로 가진 태그들끼리의 간격이 다르다든지 하는 등의 문제가 있다.

 

결국 개발을 할 때 한 가지 브라우저를 중심으로 개발을 하는데, 만약에 이러한 부분을 고려하지 않았다면 다른 브라우저를 통해 내가 만든 웹 사이트를 접속했을 때 조금씩 디자인이 어긋나게 된다.

 

이를 방지하기 위해 미리 이러한 요소들을 초기화를 통해 통일해주는 것이 Reset CSS다.

 

즉 각 브라우저 별로 다른 값들을 본격적으로 코드를 짜기 전에 CSS를 통해 초기화 시켜 통일 시켜주는 것이다.

 

아래와 같이 미리 CSS 값을 초기화해줌으로써 브라우저 별로 다를 수 있는 값들을 통일 시켜준다.

 

이를 통해 자신이 설정한 디자인적인 부분이 다양한 브라우저에서 동일하게 나타나게 만들 수 있다.

 

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