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

“Reset CSS”에 대한 4개의 생각

  1. 안녕하세요 ^^

    잘 봤어용 ~ 앞으로 종종 아니아니 한달에 한번만 들어오도록 할께요 ^^

    앞으로 좋은 tip 부탁드립니다~~~

    ps. reset-css에서 font-family:Arial, “굴림”, Gulim,”ë��ì��”, Dotum;

    한글이 깨지네욤 ^^;

  2. Hello Web Admin, I noticed that your On-Page SEO is not that great, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at. WordPress Seo Plugin

댓글 남기기