일별 글 보관함: 2011-08-05

HTML/CSS

Reset CSS

4 댓글

1. Reset CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

/* reset CSS
---------------------------------------------------------------- */
	html, body {
		margin:0; padding:0; 
		font-family:Arial, "굴림", Gulim,"돋움", Dotum; 
		font-size: 12px; 
		color:#000; 
		height: 100%;
	}
	dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,tbody,tfoot,thead,th,td {
		margin:0; padding:0;
	}
	input,textarea,select,td,th {
		font-size: 12px;
	}
	table { 
		border-spacing: 0; border-collapse: collapse;
	}
	ol,ul ,li { 
		list-style: none; 
	}
	h1,h2,h3,h4,h5,h6 { 
		font-size: 100%; 
	}
	abbr,acronym { 
		border:0; 
	}
	hr,legend, caption{
		position:absolute;top:0;left:-3000px;
		visibility:hidden;overflow:hidden;
		line-height: 0.1%;
		font-size: 0.1%;
		width:0.1%;height:0.1%;
	}
	img, fieldset{border:0 none;}
	label{cursor:pointer;}
 
	a{color:#000;text-decoration:none;}
	a:link,a:visited{color:#686868;text-decoration:none;}
	a:hover{text-decoration:none;}
	a:active{text-decoration:none;}

 (본 리셋은 최소의 버전으로 제작한 것입니다. 본인에 맞게 추가 하셔서 사용하시기 바랍니다. 개성적인 reset보다는 여러명이 사용해도 문제 없는 리셋을 제작하셔야합니다.
마이그레이션이나 특수한 목적으로 페이지를 삽입하였을때  reset으로 인하여 깨지는 경우가 생기면 후임자가 더 힘들어질수 있으니깐요)

2) 제작 목적

브라우저별로 엔진이 다르기 때문에 페이지 랜더링도 다르게 표현이 된다. 다르게 표현되는 padding과 margin등을 초기화 시켜 크로스 브라우징을 쉽게 한다.

3) 제작시 주의 사항

1. 리셋이 필요 없는 요소는 리셋을 적용하지 마라

다음은 Eric Meyer’s CSS와 yahoo에서 제공되는 CSS이다 붉은색 부분을 참조하라

Eric Meyer’shtml, body, div, span, applet, object, iframe, table, caption, tbody,tfoot,thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0; }
기타등등 -_-;;

yahoo

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; }

위의 reset은 padding과 margin이 존재 하지 않은 녀석들은 리셋을 할필요 없는데 Eric Meyer’s의 같은경우에는 * {padding: 0; margin: 0; } 과 다를게 없고 오히려 * {margin: 0; paddnig:0;} 이 글자수가 적어서 용량면에서 더 좋을지 모른다.

2. 재 리셋을 하게 하지말라

th, dt, hn 태그의 디자인이 bold형태가 많을 경우 reset css를 제작 할 때 font-weight: normal; 의 선언을 피해야한다. 그 이유는 reset선언 보다 font-weight: bold; 의 선언이 더 많아 질수있기 때문이다.
hn 태그에 css를 설정할경우

수정전
h1 { width: 200px; height: 100px; background: url(‘aa.gif’) 0 0 no-repeat; padding: 20px 10px; font-weight: bold;}
h1.title01 { width: 100px; background: none; padding: 10px; font-weight: normal; }
h1.title02 { width: auto !important; height: auto !important; background: url(‘bb.gif’) 0 0 no-repeat; padding: 10px; font-weight: normal; }
수정후
.h1_title01 { width: 200px; height: 100px; background: url(‘aa.gif’) 0 0 no-repeat; padding: 20px 10px; font-weight: bold;}
.h1_title02 { width: 100px; height: 100px; padding: 10px; }
.h1_title03 { background: url(‘bb.gif’) 0 0 no-repeat; padding: 10px; }

input 태그에 css를 설정할경우

수정전
input {border: 1px solid #ddd; width: 100px; height: 20px; padding: 2px 5px 0; }
.input_radio, input_checkbox{ width: 13px; height: 13px; border: 0; padding: 0; }
수정후
.input_text {border: 1px solid #ddd; width: 100px; height: 20px; padding: 2px 5px 0; }
.input_radio, input_checkbox{width: 13px; height: 13px; }