[CSS] html의 css초기화 reset.css 적용방법

 

---

 

1. 들어가며

 

css를 사용하다보면 기본으로 설정된 css값때문에 항상 번거로운일이 생기는데 저같은경우 기본적으로 설정되어 있는 padding값이 가장 불편한것 같습니다.

 

이렇게 기본적으로 세팅되어 있는 css값을 초기화 시켜주는게 reset.css입니다. 하지만 reset.css라는게 딱히 정해진 양식이 있는 것은 아닙니다. 사람에 따라 초기화하고 싶은 값이 각자 다 다를것이고 어떤 사람은 초기화 이외에도 기본적으로 본인이 초기세팅하고 싶은 css속성을 넣는 경우도 있기 때문입니다. 저같은 경우에는 * {box-sizing: border-box;} 같은 값을 reset.css에 포함시켜서 사용하지만 아닌 사람도 있을태니깐요.

 

물론 reset.css가 정해진건 없지만 그래도 기본적으로 많이 사용하는 reset.css양식이 있을 것입니다.

그중에서 괜찮다고 싶은 코드가 있어서 첨부하니 참고하시면 도움이 되리라 생각합니다.

 

 

 

 

 

2. Reset.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;
}

 

 

 

위의 reset.css를 베이스로 하여 필요한 코드들을 추가하다 보면 어느새 본인만의 reset.css가 완성되어 있을 것입니다. 혹시나 처음 css를 배우시는 분들을 위하여 팁을 드리자면 reset.css를 웹페이지의 css에 바로 붙여넣기 하는 것보다는 @import "reset.css"; 이런식으로 reset.css파일을 별도로 만든다음에 reset.css파일의 경로만 추가하는 식으로 운영한다면 좀 더 깔끔하고 관리하기 편한 css환경이 됩니다. 

 

@import "reset.css";

.main{
	padding: 5px;
}