반응형
Intro
CSS의 기본 설정값이 브라우저마다 상이하기 때문에, 같은 코드를 입력해도 브라우저에 따라 결과가 달라집니다.
이런 현상을 방지하기 위해 브라우저의 기본 설정값을 초기화 해줘야 하는데, 이러한 초기화 코드가 작성된 파일을 RESET CSS 라고 합니다.
RESET CSS 적용법은 다음과 같습니다.
- 프로젝트에 CSS 파일 직접 추가
- CDN을 사용한 실시간 다운로드
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;
}
해당 CSS 파일을 다른 CSS 파일에 import 시켜주거나, html에 직접 link 해줍니다.
@import "reset.css";<html>
<head>
<link rel="stylesheet" href="reset.css" />
</head>
<body>
</body>
</html>CDN 사용
HTML에 CSS 파일 대신 URL을 link 하여 웹 페이지가 로딩될 때 자동으로 CSS 파일을 다운로드하여 적용시키는 방법입니다.
이 방법도 다른 CSS 파일에서 import 하는 방법과, HTML에서 직접 link 하는 방법 2가지가 있습니다.
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
</head>
<body>
</body>
</html>
반응형
'Study > HTML & CSS' 카테고리의 다른 글
| [CSS] CSS에서 전역변수 추가하기 (0) | 2022.01.12 |
|---|---|
| [CSS] BEM (Block Element Modifier) 방법론 (0) | 2022.01.12 |
| [HTML] Head에 들어가는 태그들 (0) | 2022.01.08 |
