Reset CSS
Reset CSS의 필요성
웹 페이지를 만들 때 크롬, 엣지, 사파리 등 각 웹 브라우저는 자체적인 스타일을 가지고 있습니다.
대표적으로 동일한 HTML, CSS 코드를 사용했을 때 크롬과 사파리에서는 <button> 요소의 기본 스타일이 다르게 표시됩니다.
이렇게 각 브라우저마다 다른 스타일을 가지고 있기 때문에 같은 HTML, CSS 코드를 사용하더라도 웹페이지가 브라우저마다 다르게 표시될 수 있습니다.
이러한 브라우저 간 불일치를 최소화하기 위해 Reset CSS를 사용합니다.
Reset CSS란?
Reset CSS는 여러 브라우저 간의 스타일 차이를 최소화하기 위해 사용되는 CSS 코드로, 브라우저의 기본 스타일을 초기화하는 역할을 합니다.
이를 통해 바깥 여백(Margin), 안쪽 여백(Padding), 글자 크기 등 기본 스타일이 초기화되어 브라우저 간 일관된 디자인과 레이아웃을 표시할 수 있습니다.
자주 사용되는 Reset CSS
자주 사용되는 Reset CSS는 다음과 같습니다.
코드 예시
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;
}
이 reset CSS는 많은 HTML 요소의 기본 마진, 패딩, 보더를 0으로 설정해서 일관된 레이아웃을 만듭니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!