1. CSS 리셋 소개

어떤 브라우저에서든 사용자들이 동일한 경험을 할 수 있도록 크로스 브라우징 원칙을 지켜서 코딩해야 한다.

리셋 CSS는 정해진 형식이나 코드가 없다.

사용하지도 않는 태그들을 초기화 할 필요도 없으며 프로젝트 성격에 맞추어 작성하면 된다.

모든 브라우저에서 동일한 뷰를 보여주기 위해 기본값을 초기화한다는 점을 기억하기!

2. reset.css 제작

주요 태그 및 속성

• HTML
  헤딩, 리스트, 폼, 테이블 등 주요 태그
• CSS
  margin, padding, border, font-styleborder-collapse, text-decorationlist-style

🔵 PREVIEW

before

after

1) body, h1, h2, h3, h4, h5, h6

body,
h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

2) ul, ol dl

ul, ol, dl, dd {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

3) table

table {
	border-collapse: collapse;
}

4) p, em, strong, a, img

p {
	margin: 0;
	padding: 0;
}

em {
	font-style: normal
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	vertical-align: top;
}

5) form

fieldset, legend {
	margin: 0;
	padding: 0;
}

body, input, textarea, select, button {
	font-size: 14px;
	font-family: Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif;
}

fieldset {
	border: 0;
}

3. 요약 정리

• 브라우저마다 태그를 렌더링하는 기본 스타일이 다르다.

• 모든 브라우저에서 동일한 화면을 볼 수 있도록 기본값을 초기화한다.

• reset CSS는 각 프로젝트에 맞춰서 사용한다.