CSS Reset ์ด๋?
์น ๋ธ๋ผ์ฐ์ ๋ง๋ค ๊ธฐ๋ณธ ์ ๊ณตํ๋ CSS ์คํ์ผ(์ฌ๋ฐฑ, ๊ธ์ ํฌ๊ธฐ, ํ
์ด๋ธ ๊ฐ๊ฒฉ ๋ฑ)์ด ์กฐ๊ธ์ฉ ๋ค๋ฅด๊ธฐ ๋๋ฌธ์, ๊ฐ์ HTML์ ์์ฑํด๋ ํฌ๋กฌ·ํ์ด์ดํญ์ค·์ฌํ๋ฆฌ ๋ฑ์์ ๋ชจ์์ด ๋ฌ๋ผ์ง๋๋ค.
์ด๋ฅผ ํต์ผํ๊ธฐ ์ํด CSS Reset์ ์ ์ฉํฉ๋๋ค.
๋ํ์ ์ผ๋ก ๋ง์ด ์ฐ์ด๋ ๊ฒ์ด Eric Meyer์ Reset CSS์ ๋๋ค.
์ ์ฉ๋ฐฉ๋ฒ
1. ์ง์ ํ์ผ๋ก ๋ฃ๊ธฐ
- ํ๋ก์ ํธ css ํด๋์ reset.css ์ ์ฅ
- HTML <head>์ ๋งํฌ ์ถ๊ฐ
Eric Meyer’s Reset CSS (v2.0)
https://meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
/* 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;
}
2. CDN์ผ๋ก ์ฐ๊ฒฐํ๊ธฐ
์ง์ ํ์ผ์ ๋์ง ์๊ณ , ์ธ๋ถ CDN ๋งํฌ๋ฅผ ๋ถ๋ฌ์ ๋ฐ๋ก ์ ์ฉํ ์ ์์ต๋๋ค.
<!-- Eric Meyer Reset CSS CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/filipelinhares/ress/dist/ress.min.css">์ฐธ๊ณ : Meyer์ ์๋ณธ reset.css๋ ๊ณต์ CDN์ด ์์ง๋ง, ress.css (reset+normalize ์ฑ๊ฒฉ) ๋ฑ ๋์ฒด์ฌ๋ฅผ CDN์ผ๋ก ๋ง์ด ์ฌ์ฉํฉ๋๋ค. ๋จ์ํ Reset๋ง ํ์ํ๋ค๋ฉด ์ ress.min.css๋ฅผ ์ฐ๋ฉด ๋ฉ๋๋ค.
Reset vs Normalize ์ฐจ์ด
- Reset CSS: ๋ชจ๋ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ ์คํ์ผ์ ๋ ๋ ค๋ฒ๋ฆฌ๊ณ , ์์ ํ ์ด๊ธฐํ → ๊ฐ๋ฐ์๊ฐ ์คํ์ผ์ ์ฒ์๋ถํฐ ์ ๋ถ ์ ์ํด์ผ ํจ.
- Normalize CSS: ๋ธ๋ผ์ฐ์ ๊ฐ ์ฐจ์ด๋ฅผ ์ค์ด๋ ๋ฐฉํฅ์ผ๋ก ๊ธฐ๋ณธ ์คํ์ผ์ ์กฐ์ → ์ข ๋ ํ์ค์ ์ธ ์ ๊ทผ.
