간단한 CSS Reset

모든 브라우저마다 CSS가 동일하게 적용되는것은 아니다.

CSS Reset 기능은 이러한 각 브라우저마다 동일한 효과를 주기위해 가장 기본이 되는 CSS를 말한다.

보통 구축하는 웹페이지마다 최초 base.css 나  reset.css 를 두어 전체 웹페이지에 적용되는 CSS를 두기 마련인데 이러한 것이 CSS Reset이라고 보면 된다. 특히 웹퍼블리셔들이 여러 프로젝트를 뛰면서 축적된 경험을 바탕으로 항상 가지고 다니는 CSS들이 대부분 이러한 CSS Reset파일들이나 각 요소들, 예를 들어, 테이블, 탭, 버튼 등 프로젝트 특성을 타지 않는 CSS파일들은 어느 프로젝트나 적용시킬수 있다.

일례로 데꾸벅의 경우는 CSS Reset 파일이 항상 base.css로 만들어 놓고 @import 구문을 이용해서 사용한다. 

참고적으로 많이들 사용하는 CSS Mini Reset 파일들을 공개한다.

• Eric Meyer's CSS Reset
• YUI Reset
• Russ Weakley's CSS Reset - a simpler option
• 기타
• emastic - CSS 프레임웍
• The Golden Grid - 각 레이아웃에 대한 CSS 프레임웍 - 화면 분할 및 레이아웃관련 그리드 시스템

이외에 CSS를 인터프리터언어와 같이 프로그래밍언어처럼 사용하는 여러 CSS프레임웍들이 존재하나 아직은 많이 사용되고 있지는 않다.

Eric Meyer's CSS Reset

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, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baseline;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

body {

line-height: 1;

color: black;

background: white;

}

ol, ul {

list-style: none;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: "";

}

blockquote, q {

quotes: "" "";

}

YUI Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

죽여주는(?) CSS Reset 스타일 모음

/*

    Tripoli is a generic CSS standard for HTML rendering. 

    Copyright (C) 2007  David Hellsing

    This program is free software: you can redistribute it and/or modify

    it under the terms of the GNU General Public License as published by

    the Free Software Foundation, either version 3 of the License, or

    (at your option) any later version.

    This program is distributed in the hope that it will be useful,

    but WITHOUT ANY WARRANTY; without even the implied warranty of

    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License

    along with this program.  If not, see <http://www.gnu.org/licenses/>.

*/

* {

text-decoration: none;

font-size: 1em;

outline: none;

padding: 0;

margin: 0;

}

code, kbd, samp, pre, tt, var, textarea, 

input, select, isindex, listing, xmp, plaintext {

white-space: normal;

font-size: 1em;

font: inherit;

}

dfn, i, cite, var, address, em { 

font-style: normal; 

}

th, b, strong, h1, h2, h3, h4, h5, h6 { 

font-weight: normal; 

}

a, img, a img, iframe, form, fieldset, 

abbr, acronym, object, applet, table {

border: none; 

}

table {

border-collapse: collapse;

border-spacing: 0;

}

caption, th, td, center { 

vertical-align: top;

text-align: left;

}

body { 

background: white; 

line-height: 1; 

color: black; 

}

q { 

quotes: "" ""; 

}

ul, ol, dir, menu { 

list-style: none; 

}

sub, sup { 

vertical-align: baseline; 

}

a { 

color: inherit; 

}

hr { 

display: none; 

}

font { 

color: inherit !important; 

font: inherit !important; 

color: inherit !important; /* editor's note: necessary? */ 

}

marquee {

overflow: inherit !important;

-moz-binding: none;

}

blink { 

text-decoration: none; 

}

nobr { 

white-space: normal; 

}

CSS Mini Reset

html, body, ul, ol, li, form, fieldset, legend

{

margin: 0;

padding: 0;

}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }

fieldset,img { border: 0; }

legend { color: #000; }

li { list-style: none; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

table

{

border-collapse: collapse;

border-spacing: 0;

}

caption, th, td

{

text-align: left;

vertical-align: top;

font-weight: normal;

}

input, textarea, select

{

font-size: 110%;

line-height: 1.1;

}

abbr, acronym

{

border-bottom: .1em dotted;

cursor: help;

}