CSS Reset
- CSS Reset은 고유 css 속성값들을 초기화 시켜서 다른 브라우저에서도 웹사이트가 똑같이 표시 되게끔 하기위해 초기화 시키는 것입니다.
- CSS 초기화란 각 태그들의 css속성값들(margin, padding, line-weight)들을 0 이나 none값으로 만드는 것입니다.
- reset.css를 통해서 초기화 시킨후 style.css를 통해서 새 속성값을 지정합니다.
CSS Reset 참고 사이트
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 파일들을 수정해줘야합니다.
- 파일들이 많아지면 각각 수정해 줘야 해 , 시간도 많이 걸리고 유지 보수하기 힘들 수 있습니다.
- 다음 포스팅에서는 템플릿 재사용 / 상속을 이용한 방법을 알아보겠습니다.