[CSS] Reset CSS란?

Reset CSS?

브라우저마다의 기본 default 스타일이 아니라 동일한 css 스타일을 보여주기 위해 default 값을 초기화해주어야 한다.
즉, 브라우저의 기본요소의 다지안을 모두 없애는 것이다.

 

 

 

 

 

3대 브라우저 별 UserAgent Style

• Chromium(Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css

blink/renderer/core/html/resources/html.css - chromium/src/third_party - Git at Google

• Gecko (Firefox): https://searchfox.org/mozilla-central/source/layout/style/res/html.css

html.css - mozsearch

• WebKit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

 

이런 식으로 브라우저별로 style이 다르기 때문이 같은 모양으로 보여주기 위한 작업이 필요했다.

이 작업을 크로스 브라우징(Cross Browsing)이라고 부른다.

 

 

 

 

 

 

 

Reset.css 사용하기

보통 나는 Reset.css를 검색한 후 가장 상단에 뜨는 것들 위주로 참고하여 사용한다.

 

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

CSS Tools: Reset CSS

위 사이트가 사람들이 가장 많이 사용하는 파일이다.

물론 꼭 필수인 사항들은 아니고, 편의에 의해 임시로 설정하는 것이긴 하다.

 

 

 

 

 

실제 프로젝트에 적용하기

Reset.css 라는 파일을 프로젝트에서 생성하고 위의 사이트의 코드를 복사해서 붙여넣기 한다.

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

 

그리고 style.css 나 스타일 파일에 import 해서 사용해주면 된다.

@import 'reset.css'

 

 

 

 

 

 

Normalize (정규화)

브라우저마다 스타일이 표준 브라우저의 스타일과 동일하게 보이는 방식
정규화를 통해 스타일을 통일하려는 것이다

 

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

위의 사이트를 통해 들어가면 normalize.css 파일을 복사하여 적용할 수 있다.

 

표준은 아니지만 더 나은 default 값을 쓰기 위해 Normalize + New Default Style을 만드는 방식이 쓰이기도 한다.

 

 

 

 

 

 

 

 

 

 

---

Reset.css는 오늘 내가 사이드 프로젝트 Globalstyle 만들다가 생각난 건데...

적용시키지는 않고 그냥 styled-components의 GlobalStyle을 사용했지만 추후에 사용할 것 같아서 정리해봤다.

맨날 구글링해서 찾아서 적었었는데....ㅋㅋㅋ 역시 기록은 참 중요하다는 생각이 든다.