❏ css - 기본 세팅 css (Reset css)

안녕하세요!
오늘은 css의 기본 세팅 코드를 가져왔습니다!
이모저모 잘 사용하는 css 기본 세팅에 대해서 알아보겠습니다!

---

🤔 css 기본 세팅은 왜 사용할까요?

여기 아무것도 없은 빈 뷰포트가 있습니다!

<h1> 태그로 '안녕하세요'라고 적어보았습니다.
그리고 <F12>를 눌러 개발자 도구를 좀 살펴보겠습니다!

저는 분명 넣지도 않은 magin값이 야무지게 들어가 있는 것을 확인할 수 있었습니다.
이렇게 기본 세팅을 하지 않은 뷰포트에는 수많은 속성들이 기본적으로 들어가 있는 것을 확인할 수 있었습니다.

그렇기에 새로운 페이지를 만들기 전 css를 기본적인 속성을 전부 없애고 시작해야겠지요??
아래에 있는 코드를 긁어가신 후 새로운 css파일에 reset.css라고 하나 만들어 두시는 것도 좋습니다!
그럼 적용된걸 확인해볼까요?

magin값이 사라지고 따로 들어있던 font-weght와 같은 다른 속성도 사라진 걸 확인할 수 있었습니다.

---

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

■ css 적용시키는 방법!

이제 저 파일을 hrml에 적용시킨 후 시작해봐야겠지요?

<link> 태그를 사용하여 적성하신 후 head부분에 넣어주시면 됩니다!

<link rel="stylesheet" href="reset.css">

만약 폴더가 있다면 폴더명을 앞에 적어주시면 되겠지요?

<link rel="stylesheet" href="css/reset.css">

reset.css

0.00MB

 

---

혹시 몰라서 css파일로도 올려드립니다!
오늘도 읽어주셔서 감사합니다!
◠‿◠