1. 문제의 시작. 너무 많은 브라우저들. 각자 다른 스타일.

브라우저 제작사들마다 각각 브라우저가 제공하는 요소의 기본 스타일이 모두 다릅니다.

위의 그림을 살펴보겠습니다. (누르면 확대됩니다.)

브라우저에 따른 <input> 요소의 스타일 정보입니다. 왼쪽 그림은 사파리, 오른쪽 그림은 크롬의 스타일입니다.

이렇듯 브라우저마다 요소의 기본 스타일이 다르다보니 개발자들은 디자이너에게 받은 웹디자인을 구현하기 위해 각각의 브라우저에 따라 다른 스타일을 부여 해야한다는 문제가 생깁니다. 이건 무척이나 비효율적이기 때문에 아래와 같은 해결방법이 나타나게됩니다.

2. 에릭 마이어의 reset CSS

(https://meyerweb.com/eric/tools/css/reset/)

매우 오래전부터 널리 사용된 방법입니다. 브라우저의 모든 기본적인 스타일 속성들을 완전히 초기화 시켜서 모든 스타일을 처음부터 만들도록 합니다. reset.css 코드를 그대로 사용할 수도 있고, 여기에 여러분이 만들 프로젝트만을 위한 커스텀 스타일을 추가해서 사용하기도 합니다. 슬프게도 2011년 이후로 업데이트가 중단되었습니다.

/* 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;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

3. normalize.css