[CSS] css 초기화 파일 방법

방법 1. Css 초기화 파일 공유 사이트

https://cdnjs.com/libraries?q=reset

reset.min.css 는 줄바꿈과 공백이 없는 압축파일로 좀 더 가볍다

reset.css 는 줄바꿈과 공백이 있어서 보기 편하지만 min파일에 비해 무겁다.

수정해서 쓸거면  reset.css로 가져오고

수정 안할거면 reset.min.css 압축파일 사용한다. 

 

가운데 아이콘을 누르면 복사된다. 

 

html의 head 부분에 reset.min.css 파일 복사해주면 css가 초기화된다. 

*초기화 파일이 작성할 css 파일보다 위에 올라와 있어야한다. 

 

---

방법 2. < css 초기화 파일 2번째 방법 /  따로 리셋 파일을 만들어서 (추가할 수 있는) 연결하는 법 >

https://meyerweb.com/eric/tools/css/reset/

위의 링크에서 복사해놓은 css 초기화 파일 ↓

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
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;
}
a {
  text-decoration: none;
}

복붙으로 가져와서 

reset.css 파일 만들어서 넣어주고 윗줄에 @charset "utf-8"; 적어준다. 

a {

  text-decoration: none;

}

필요에 따라 a태그 초기화 추가해주기/  a태그 글자 색상은 따로 css 파일에서 불러와서 설정해준다. 

*항상 css 초기화 파일이 css 파일보다 먼저 위에 연결되어야한다*

---

초기화 파일 css파일에 연결하기

reset 파일을 따로 만든 다음에 css 파일에 아래와 같이 @import '리셋파일명'; 으로 가져오면 reset 파일이 css 파일에 연결되어 html에 css 파일만 연결해주면 간편하게 사용 가능하다.  

@charset "utf-8";

@import "reset.css";