2022.04.06 Today I Learned📚

CSS를 왜 Reset 해야할까?

브라우저마다 제공하는 기본 스타일이 각기 다르다. 만약 어떤 디자인을 구현해야 한다면, 각 브라우저에 따라 다른 스타일을 부여해야하는 문제가 생긴다. 뿐만 아니라, 같은 스타일값을 적용하여도 각 브라우저마다 구현되는 디자인이 다를 수 있다. 그렇기 때문에 브라우저의 기본 CSS값들을 초기화시켜 모든 브라우저에서 똑같은 화면이 구현되도록 해야한다.

에릭 마이어의 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;
}

normalize.css

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

브라우저의 기본적인 스타일 속성들을 모두 제거하지 않는다. 대신 브라우저 스타일을 기반으로 하고 거기에 추가적인 스타일을 덧붙여 어떤 브라우저에서든 비슷하게 보이도록 통일합니다. (하지만 완전히 똑같이 만드는것은 아님!)

CSS Remedy

https://github.com/jensimmons/cssremedy

차세대 CSS reset 프로젝트이다. 단순히 스타일만 생각하는것이 아닌, 하위 브라우저 호환 걱정없이 CSS가 브라우저에서 효율적으로 작동하도록 하는 것이 목표이다.
이 프로젝트는 아직 진행중이며, 완전한 메이저 버전은 언제 나올지 아직 알 수 없다.