Jeonghwan's Blog
CSS Reset과 크로스 브라우징, 왜 신경 써야 할까요?

CSS Reset과 크로스 브라우징, 왜 신경 써야 할까요?

#CSS

목차

웹 페이지를 개발하다 보면, 같은 코드를 작성했는데도 브라우저마다 다르게 보이는 걸 경험해본 적 있으실 거예요. 인풋의 스타일이 다르거나, 리스트의 여백이 제각각이거나, 심지어 폰트 크기까지도 살짝씩 달라 보이기도 하죠. 이런 문제의 원인은 바로 브라우저가 각자 다르게 설정한 기본 스타일 때문이에요.

이처럼 브라우저마다 화면이 달라지는 문제를 해결하기 위해 등장한 개념이 바로 크로스 브라우징(Cross-Browsing) 그리고 이를 해결하기 위한 방법이 CSS Reset 이에요.

크로스 브라우징(Cross-Browsing)이란?

크로스 브라우징은 Chrome, Safari, Firefox, Edge 등 다양한 브라우저에서도 동일한 UI와 기능이 동작하도록 만드는 것을 의미해요.

모든 브라우저는 HTML 태그에 대해 자체적인 기본 스타일을 적용하는데, 이 값들이 서로 조금씩 달라서 디자인이 어긋나거나 기능이 깨지는 현상이 생기는 거죠.

예를 들어 <ul> 태그는 어떤 브라우저에선 padding-left가 있고, 어떤 브라우저는 좀 더 넓게 적용되기도 해요. <input>은 브라우저마다 기본 테두리 스타일이나 그림자가 다르기도 하죠.

크로스 브라우징

CSS Reset이란?

CSS Reset은 이러한 브라우저 기본 스타일의 차이를 없애기 위해, HTML 요소에 기본으로 적용되어 있는 스타일을 초기화(reset) 하는 CSS 코드예요.

쉽게 말해, 브라우저가 미리 입혀놓은 "기본 스타일 옷"을 벗기고 완전히 동일한 출발선에서 스타일링을 시작할 수 있도록 도와줘요.

왜 CSS Reset이 중요할까요?

  • 🔁 크로스 브라우징 문제를 줄일 수 있어요. 즉 브라우저마다 제각각인 스타일을 통일할 수 있죠.
  • 🎨 불필요한 여백과 스타일을 제거하여 예측 가능한 스타일을 구현할 수 있어요.

대표적인 CSS Reset 방식

CSS를 기본 스타일로 초기화하기 위한 대표적인 두 가지 방식이 있어요.

바로 reset.css 방식과 normalize.css 방식이 있어요.

둘 다 브라우저마다 다른 기본 스타일을 통일시키기 위한 목적이 있지만, 접근 방식에는 큰 차이가 있어요.

reset.css – "모두 없애고 다시 시작”

reset.css는 HTML 태그에 기본으로 부여된 스타일 속성을 전부 제거하는 방식이에요.

  • ✅ 장점: 스타일 출발점이 완전히 동일
  • ⚠️ 단점: 의미 있는 기본 스타일도 사라짐

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

HTML 파일에 link 태그를 이용한 적용 방법

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />

normalize.css – "차이를 보완하며 기본을 유지”

normalize.css는 브라우저마다 다른 기본 스타일의 차이만 보완하고, 의미 있는 기본 스타일은 유지하는 방식이에요.

CSS 파일을 이용한 적용 방법

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
/* Document
   ========================================================================== */
 
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
 
/* Sections
   ========================================================================== */
 
/**
 * Remove the margin in all browsers.
 */
 
body {
  margin: 0;
}
 
/**
 * Render the `main` element consistently in IE.
 */
 
main {
  display: block;
}
 
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
 
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
 
/* Grouping content
   ========================================================================== */
 
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
 
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
 
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
 
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
 
/* Text-level semantics
   ========================================================================== */
 
/**
 * Remove the gray background on active links in IE 10.
 */
 
a {
  background-color: transparent;
}
 
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
 
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}
 
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
 
b,
strong {
  font-weight: bolder;
}
 
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
 
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
 
/**
 * Add the correct font size in all browsers.
 */
 
small {
  font-size: 80%;
}
 
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
 
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
 
sub {
  bottom: -0.25em;
}
 
sup {
  top: -0.5em;
}
 
/* Embedded content
   ========================================================================== */
 
/**
 * Remove the border on images inside links in IE 10.
 */
 
img {
  border-style: none;
}
 
/* Forms
   ========================================================================== */
 
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
 
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
 
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
 
button,
input { /* 1 */
  overflow: visible;
}
 
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
 
button,
select { /* 1 */
  text-transform: none;
}
 
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
 
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
 
/**
 * Remove the inner border and padding in Firefox.
 */
 
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
 
/**
 * Restore the focus styles unset by the previous rule.
 */
 
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
 
/**
 * Correct the padding in Firefox.
 */
 
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
 
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
 
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
 
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
 
progress {
  vertical-align: baseline;
}
 
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
 
textarea {
  overflow: auto;
}
 
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
 
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
 
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
 
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
 
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
 
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
 
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
 
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
 
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
 
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
 
/* Interactive
   ========================================================================== */
 
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
 
details {
  display: block;
}
 
/*
 * Add the correct display in all browsers.
 */
 
summary {
  display: list-item;
}
 
/* Misc
   ========================================================================== */
 
/**
 * Add the correct display in IE 10+.
 */
 
template {
  display: none;
}
 
/**
 * Add the correct display in IE 10.
 */
 
[hidden] {
  display: none;
}

HTML 파일에 link 태그를 이용한 적용 방법

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css" />

reset.css vs normalize.css 요약 비교

항목reset.cssnormalize.css
목적기본 스타일 전체 제거브라우저 간 차이 보정
기본 스타일모두 제거의미 있는 것 유지
커스터마이징필수 (스타일 재정의 필요)선택적 (필요 시만 추가)
접근성직접 설정해야 함기본 접근성 유지
추천 사용 시점디자인 시스템 시작 시빠르게 브라우저간 UI 통일하고 싶을 때

언제 어떤 방식을 써야 할까?

  • 디자인 시스템을 구축 중이라면 → reset.css
  • 기본 스타일을 유지하면서 브라우저 차이만 줄이고 싶다면 → normalize.css

마무리

CSS Reset은 단순한 스타일 초기화 설정이 아니라, 웹 개발의 시작점이라고 할 수 있어요. 브라우저마다 스타일 기준이 다르기 때문에, 이를 통일하는 초기화 작업은 UI의 일관성과 디자인 완성도에 직접적인 영향을 미쳐요. 그리고 프로젝트 특성을 고려해 적절한 CSS 초기화 방식을 선택하고, 필요에 맞게 커스터마이징해 보세요.ㄴ

참고 자료