CSS Reset

CSS 초기화에 대하여

  • 브라우저마다 요소(태그)의 기본 css속성이 조금씩 틀리다.
    각 브라우저마다 속성을 통일하거나 일일히 속성을 지정해주는 번거로움을 피하기위해 주로 html요소(태그)에다 기본적인 속성을 지정해준다. 이를 CSS Reset이라고 한다.
  • default가 되는 css에 재정의를 시키거나 따로 파일을 만들어서 import 시키는 방법이 있다. (각자의 취향에 맞게 사용하면된다.)
  • css Reset은 선택사항이지 필수사항은 아니다.

참조사이트

CSS Reset 예제

Basic

CSS 소스

/* ==========================================================================
   CSS RESET
   ========================================================================== */

/* Correct `block` display not defined in IE 8/9. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block; margin: 0; padding: 0;
}

/* elements */
body {
	margin: 0; padding: 0; min-width: 320px;
	font-size: 13px; color: #333; line-height: 1.42857;
	-webkit-text-size-adjust: none;
	-ms-interpolation-mode: bicubic;
}
body, h1, h2, h3, h4, h5, h6, p, div, li, dt, dd, input, textarea {
	font-family: sans-serif;
}
img, video, audio, object, embed, iframe {
	max-width: 100%;
}
img {
	border: 0 none;
	-ms-interpolation-mode: bicubic;
	-webkit-image-rendering: optimizeQuality;
}
ul, ol {list-style: none;}
form {margin: 0;}
table {border-collapse: collapse; border-spacing: 0;}
th, td {padding: 0;}
a {color: #0075d9; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
input[type=text], input[type=password],input[type="reset"], input[type="submit"] {font-size: 13px}
textarea{overflow-y: auto;}

/* ==========================================================================
   //CSS RESET
   ========================================================================== */

normalize.css

CSS 소스

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
/* Base */
html {
	font-family: sans-serif; /* 1 */
	-ms-text-size-adjust: 100%; /* 2 */
	-webkit-text-size-adjust: 100%; /* 2 */
}
body { margin: 0; }
a { background: transparent; }
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }
h1 { font-size: 2em; margin: 0.67em 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
mark { background: #ff0; color: #000; }
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
pre { white-space: pre-wrap; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }
button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ }
button, input { line-height: normal; }
button, select { text-transform: none; }
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button; /* 2 */
	cursor: pointer; /* 3 */
}
button[disabled],
html input[disabled] { cursor: default;}
input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
}
input[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box; /* 2 */
	box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ }
table { border-collapse: collapse; border-spacing: 0; }

reset.css

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

HTML5 Doctor

reset.css

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body { line-height:1; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
top