[CSS] CSS 초기화(CSS Reset)

jjee·2025년 8월 25일

CSS || 초기화

CSS

목록 보기

14/24

썸네일

CSS 초기화

CSS의 초기화에 대해 알아보자.

브라우저 기본 스타일

각 브라우저에는 HTML 요소에 대해 기본적으로 적용되는 스타일이 있다.
즉, 브라우저마다 여백, 색상, 크기 등 기본적으로 적용되는 스타일이 다 다르다.

이러한 이유로 브라우저 기본 스타일을 생각하지 않고 작업할 경우, 브라우저마다 미묘하게 다른 화면이 되기도 한다.

CSS 초기화(CSS Reset)

위와 같은 이유로 사용하는 방법이 바로 CSS 초기화다.
각 브라우저에서 제공하는 기본 스타일을 없애는 것으로, 다양한 브라우저에 동일한 스타일을 적용하기 위한 방법이다.

에릭 마이어의 Reset CSS

가장 널리 알려진 CSS 초기화 방법으로, 모든 요소의 마진, 패딩을 0으로 만들고 기본 서식을 제거한다.
브라우저에서 제공하는 모든 스타일을 제거하는 것이 목표이며, 2011년 이후 업데이트가 중단되었다.
에릭 마이어 Reset css

Normalize.css

완전한 초기화보다는 일관성에 초첨을 맞춘 방식으로, 브라우저간의 차이를 나타내는 스타일은 지우지만 유용한 스타일은 남겨둔다.
HTML5 요소에 대한 디스플레이 설정,폼 요소의 일관된 스타일링 등을 제공한다.
Normalize.css

sanitize.css

Normalize.css를 기반으로하며, Normalize.css보다 더 많은 요소와 속성을 다룬다.
현대적인 웹 개발 트렌드와 접근성을 반영한 초기화 방법으로폼 요소의 더 나은 기본 스타일, 더 엄격한 박스 모델 등을 제공한다.
sanitize.css

CSS Remedy

모던 CSS 기능을 활용한 최신 브라우저 대상의 초기화 방식이다.
Jen Simmons가 주도한 프로젝트로, "브라우저가 처음부터 이렇게 구현했어야 했던" 기본값을 설정한다.
CSS Remedy

사용자 지정 Reset CSS

위의 누군가가 만들어둔 초기화 파일을 사용하기도 하지만, 작업을 하는 사람들이 스스로의 상황에게 맞게 사용자 지정 Reset CSS를 직접 작성하기도 한다.

/* 기본적인 사용자 지정 Reset CSS 예시 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  color: #333;
}
 
img {
  max-width: 100%;
  height: auto;
}
 
a {
  text-decoration: none;
  color: inherit;
}
 
ul,
ol {
  list-style: none;
}
 
button {
  cursor: pointer;
  padding: 5px 10px;
}