Hiio.com

출처 : 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;
}

  CSS Reset  

- CSS Reset은 고유 css 속성값들을 초기화 시켜서 다른 브라우저에서도 웹사이트가 똑같이 표시 되게끔 하기위해 초기화 시키는 것입니다.

- CSS 초기화란 각 태그들의 css속성값들(margin, padding, line-weight)들을 0 이나 none값으로 만드는 것입니다.

- reset.css를 통해서 초기화 시킨후 style.css를 통해서 새 속성값을 지정합니다.

  CSS Reset 참고 사이트  

cssreset.com/

Eric Meyer’s “Reset CSS” 2.0
http://meyerweb.com/eric/tools/css/reset/

HTML5 Doctor CSS Reset
http://html5doctor.com/html-5-reset-stylesheet/

Yahoo! (YUI 3) Reset CSS
http://yuilibrary.com/yui/docs/cssreset/

Normalize.css 1.0
https://github.com/necolas/normalize.css

등이 있습니다. 

  Reset CSS code  

- 이중 Eric Meyer’s “Reset CSS” 2.0 을 살펴 보면 

- html 캐그들의 margin /padding / border 값들을 초기화 시켜 놓은 것을 알 수 있습니다.

/* 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 적용  

- reset.css를 적용 하는 방법은 style.css를 링크 시키는 방법과 동일합니다.

- 우선 static -> css 디렉토리에 reset.css를 생성 후 위 코드를 입력하고 저장합니다.

- html 파일들의 head부분에 링크 시켜 줍니다.

<link href="{{ url_for('static', filename='css/reset.css') }}" rel="stylesheet">

- 그런데 , css 하나를 링크 시키기 위해서 모든 html 파일들을 수정해줘야합니다.

- 파일들이 많아지면 각각 수정해 줘야 해 , 시간도 많이 걸리고 유지 보수하기 힘들 수 있습니다.

- 다음 포스팅에서는 템플릿 재사용 / 상속을 이용한 방법을 알아보겠습니다.