[CSS] Reset CSS

아주 근원적인 질문을 해보자! 왜 h1 요소는 브라우저 상에 굵고 큰 글씨로 나타나는 것일까? 

 

개발자 도구를 열어 h1 요소에 적용되는 스타일의 근원을 살펴보자!

개발자 도구 - 요소

hello world!를 살펴보면 h1 요소에 적용된 스타일은 "사용자 에이전트 스타일시트"이다. 

 

자! 그러면 "이 사용자 에이전트 스타일시트(User Agent Style Sheet)는 어디에서 온 것인가?"라는 질문으로 자연스럽게 이어지게 된다.

 

정답은 "웹 브라우저" 이다! 즉, 필자의 경우, 크롬에서 지정해준 기본 스타일이 적용된 것이다.

 

여기서 한 가지 유의할 점은 사용자가 속한 나라별로 사용자 스타일 시트는 달라질 수 있다는 점이다. 즉, 사용자의 국가에서 가장 보편적으로 사용되는 스타일 시트를 웹 브라우저가 자동으로 제공해준다는 점이다!

 

그런데... 내가 만든 웹 페이지의 스타일이 사용자의 웹브라우저에 따라 제멋대로 변경되면 안되지 않겠는가?

 

따라서 이때 필요한 것이 바로 Reset CSS이다.

 

하지만, 각각의 요소들에 대해 모두 초기화할 수는 없는 노릇이다. 따라서 Reset CSS를 적용시키기 위해 다음의 소스코드를 가장 많이 이용한다.

[에릭 마이어의 Reset CSS]

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

위에서 살펴본 에릭 마이어의 Reset CSS를 많이 사용하였지만, 요즘 새로 떠오르는 대세는 Normalize CSS 이다.

 

[Normalize.css]

Normalize는 "표준화 하다"의 뜻을 가진 영어 단어이다. 이 단어의 뜻과 같이 normalize.css는 기존의 UA Style Sheet를 모두 제거하지 않고, 기존의 브라우저 스타일에 몇가지 추가적인 스타일을 덧붙여 어떤 웹브라우저에서든 비슷하게 나타낼 수 있도록 해주는 방법을 택하고 있다.

 

해당 소스코드는 아래의 링크로 들어가면 확인할 수 있다.

https://github.com/necolas/normalize.css/blob/master/normalize.css

GitHub - necolas/normalize.css: A modern alternative to CSS resets

 

요즘 가장 핫하게 떠오르는 Reset CSS 방법이기는 하나, 아직 대중적으로 사용되지는 못하다는 점에서 그래도 아직까지는 에릭 마이어의 reset css가 가장 보편적으로 사용되고 있기는 하다. 그러나 css의 기류 변화에 대응하기 위해서는 알아두는 것이 좋다고 생각한다.

 

[CSS Remedy]

CSS Remedy는 CSSWG에서 CSS를 제작하는 개발자의 입장에서 고민하여 만들어진 reset css 프로젝트이다.

따라서 단순히 스타일만 생각하는 것이 아닌, 하위 브라우저 호환 걱정 없이 CSS가 브라우저에서 효율적으로 작동하도록 하는 것에 그 프로젝트 의의가 있다.

 

보다 자세한 사항은 아래의 링크를 방문하여 살펴보길 바란다.

https://github.com/jensimmons/cssremedy

GitHub - jensimmons/cssremedy: Start your project with a remedy for the technical debt of CSS.

참고로 CSS Remedy 프로젝트는 아직도 현재 진행중인 사항이므로 아직 실무에 적용하기는 어렵다.