본문으로 건너뛰기

Reset CSS

Reset CSS

The Need for Reset CSS

When creating web pages, each web browser such as Chrome, Edge, Safari, etc., has its own default styles.

For example, if you write text in a browser without specifying any styles, each browser will display this text slightly differently.

This can be thought of as if you bought the same piece of furniture and placed it in your room; it may look different depending on the lighting or the wallpaper of each room.

To reduce these browser inconsistencies, we use Reset CSS.


What is Reset CSS?

Reset CSS is a set of CSS rules used to minimize styling differences across multiple browsers.

It creates a consistent styling starting point for applying uniform styles across browsers.


Commonly Used Reset CSS

Let's take a look at some of the most commonly used Reset CSS.

The frequently used Reset CSS options include:


Code Example

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

This reset CSS sets the default margins, paddings, and borders of many HTML elements to 0 to create a consistent layout.

Using Reset CSS allows you to display consistent designs and layouts across various browsers such as Chrome, Safari, and Edge.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!