-
시중에서 사용 중인 다양한 브라우저 (엣지, 크롬, 파이어폭스 등)은 각자 다른 디폴트 스타일을 가지고 있다.
기본적으로 가진 태그들끼리의 간격이 다르다든지 하는 등의 문제가 있다.
결국 개발을 할 때 한 가지 브라우저를 중심으로 개발을 하는데, 만약에 이러한 부분을 고려하지 않았다면 다른 브라우저를 통해 내가 만든 웹 사이트를 접속했을 때 조금씩 디자인이 어긋나게 된다.
이를 방지하기 위해 미리 이러한 요소들을 초기화를 통해 통일해주는 것이 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; }
'프론트엔드 > CSS' 카테고리의 다른 글
트랜지션 (transition) (0) 2020.09.16 CSS 속성값 단위(px, rem, em) (0) 2020.09.15 플렉스 박스: 'align-content' (0) 2020.08.27 플렉스 박스: 'flex-wrap ' (0) 2020.08.27 플렉스 박스: 'align-items ' (0) 2020.08.26