오늘은 Reset CSS에 대해서 알아보자.
근데 왜 CSS를 Reset 하려는 것인가?

User Agent Stylesheet

user agent stylesheet (사용자 에이전트 스타일시트) 이 녀석 때문에 CSS를 Reset 해줘야 한다.

페이지를 디자인 할 때, 아무리 배경을 크게하려고 해도 꽉 채워지지 않을 때가 있고, 내가 원하지 않는 디자인이 적용될 때가 있다. 그 이유가 user agent stylesheet 때문이다.

화면이 맞지 않아 고생했었다

user agent stylesheet는 모든 문서에 기본 스타일을 제공하는 기본 스타일시트이다. 태그별로 기본적인 디자인이 되어있는 규칙이라고 생각하면 된다.

페이지를 마음대로 디자인 하고 싶다면, 이 user agent stylesheet를 reset 시켜주면 된다.

Reset CSS

Reset CSS는 {margin: 0; padding: 0}을 만드는 등 모든 디자인을 초기화 시킨다고 생각하면 된다.

⚠ Reset CSS를 적용할 거라면 CSS 작성 전에 적용하자. 프로젝트를 진행하는 도중에 적용하면 많이 곤란할 수도 있다.

가장 유명한 Reset CSS는 에릭 마이어의 Reset CSS이다.
https://meyerweb.com/eric/tools/css/reset/

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

Reset CSS 하는 방법

CSS를 Reset 하는 방법은 매우 간단하다.

index.html에 위의 Reset CSS를 복사 붙여넣기 하면 된다.

혹은

새로 폴더를 만들어서 reset css를 만들고, app.css에 reset css가 들어간 폴더를 import 해주면 된다.

Reset CSS 이외..

Reset CSS를 사용해보면, 디자인이 없어진다. 정말 모든게 초기화된다.

가장 기본적인 h1 h2 등등.. 모든게 초기화돼서 크기, 폰트 모두 동일해진다.

그래서 기본적으로 브라우저들의 디자인을 통일시켜 줄 수 있는 stylesheet들이 있다.

Normalize.css

모두 초기화시키지 않고, 기본적인 디자인은 내장하며 다른 브라우저로 보더라도 일정한 디자인을 볼 수 있게 정규화 시켜준다고 생각하면 된다.

https://necolas.github.io/normalize.css/

Nomarlize.css는 터미널에서 install을 해서 사용할 수도, Reset CSS의 예시처럼 적용할 수도 있다고 한다.

마무리

그래서 어떻게 해야하는데? Reset CSS? Normalize.css?

마음에 드는 것, 개발의 형태에 따라 정하면 될 것 같다.
개인적으로 추천하자면
모든 디자인을 내가 다 직접 하겠다! ▶ Reset CSS
기존 디자인에 +@만 하면 되겠다! ▶ Normalize.css를 고르면 좋을 것 같다.

실전에서도 기업별로 reset의 방법이 다르나, 비슷한 형태를 띄고 있다고 한다. 찾아본다면 css를 reset하는 방법이 이 두가지만이 아닐 것이기 때문에, 자신에게 맞는 걸 찾아서 적용시켜보는 게 좋을 것 같다.

그리고 만약 페이지를 디자인하게 된다면.... 모르면 일단 적용하고 보는게 맞는 것 같다.