WeniVooks

CSS 초기화

웹 개발을 시작하면서 많은 초급 개발자들이 "저는 아직 CSS를 적용하지 않았는데요? 왜 스타일이 자동으로 지정되어 있죠?"라는 의문을 가집니다. 이는 각 브라우저가 HTML 요소에 대해 기본적으로 제공하는 스타일 때문입니다. 이러한 기본 스타일은 브라우저마다 조금씩 다르며, 이로 인해 동일한 HTML이 브라우저별로 다르게 렌더링될 수 있기 때문에 일관된 디자인을 구현하기 위해 CSS 초기화(CSS Reset) 방법을 사용합니다.

크롬	사파리

여백, 색상, 크기 등이 조금씩 다르다 보니 웹디자이너의 디자인을 모든 브라우저에 구현하는 것은 무척 힘든 일입니다. CSS 초기화는 이러한 브라우저 간 차이를 최소화하고, 개발자가 의도한 대로 스타일을 구현할 수 있는 일관된 기반을 제공합니다.

1. 에릭 마이어의 Reset CSS

• 가장 널리 알려진 CSS 초기화 방식 중 하나입니다.
• 모든 요소의 마진, 패딩을 0으로 만들고, 기본 서식을 제거합니다.
• 완전한 초기화를 목표로 하여 거의 모든 요소의 기본 스타일을 제거합니다.
• 2011년 이후로 업데이트가 중단되었습니다.

2. Normalize.css

• 브라우저 간의 차이를 줄이되, 유용한 기본 스타일은 보존합니다.
• 완전한 초기화보다는 일관성에 초점을 맞추어, 브라우저 버그를 수정하고 유용한 기본값은 유지합니다.
• HTML5 요소에 대한 디스플레이 설정, 폼 요소의 일관된 스타일링 등을 제공합니다.

3. sanitize.css

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

4. CSS Remedy

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

5. 사용자 지정 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;
}

/* 기본적인 사용자 지정 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;
}