CSS 초기화?
웹브라우저마다 각자의 HTML 요소에 기본 스타일들(user agent stylesheet)을 가지고 있다. CSS스타일링을 적용할 때 이러한 기본값이 설정된 스타일링은 방해가 되고 브라우저마다 다르게 나타나는 크로스 브라우징을 막기 위해 CSS 초기화인 Resetting과 Normalizing을 시행하게 된다.
CSS앞에 *{margin:0; padding:0; box-sizing:border-box;}와 같이 적혀있는 것들이 바로 이 CSS초기화인 Normalizing과 Resetting에 해당한다.
🧐 정리하자면
1. 브라우저마다 사용자가 설정하지 않은 기본 스타일링값이 존재하기에 스타일링에 방해가 된다.
2. 브라우저마다 다르게 나타나는 크로스 브라우징을 막기 위해 CSS 초기화가 필요하다.
Normalizing VS Resetting ?
그렇다면 노멀라이징과 리셋팅의 차이점은 무엇일까? 결론적으로 말하자면 아래와 같다.
- reset : 완전히 css를 아무것도 없는 백지처럼 초기화
- normalizing : 기존의 모든 스타일을 제거하는 reset과 달리 어느정도를 유지하고 유용한 스타일을 이용하는 방법
| Resetting | Normalizing |
| resets all of the user’s agent-bundled styles for the browser. → Reset은 브라우저에 기본적으로 포함된 스타일을 모두 제거하여 브라우저마다 다른 스타일을 재설정하여 일관된 시작점을 제공합니다. |
ensures that the HTML elements’ user-agent-provided default styling is consistent across browsers. → Normalizing은 모든 브라우저에서 HTML 요소의 기본 스타일을 일관되게 만들어 줍니다. 즉 브라우저에서 요소가 동일한 모양으로 보이도록 합니다. |
| Resetting makes a lot of pointless overrides in the styling and has a long chain of selectors. → Resetting은 스타일링에 무의미한 재지정을 만들어내고 매우 긴 선택자 체인을 가지게 할 수도 있습니다. 모든 스타일 요소에 일관된 기본값을 설정하기 위해서 필요하지만 너무 많은 스타일을 재정의할 수 있어 불필요한 것처럼 보일 수도 있습니다. |
Since it makes use of the User Agent’s styles, there aren’t many long chains of CSS Selectors to be noticed while normalizing. → Normalizing은 사용자에이전트의 스타일(user agent stylesheet)을 활용합니다. 따라서 Resetting처럼 긴 CSS 선택자 체인이 많이 보이지 않게 됩니다. Normalizing은 재정의하는 것보다 브라우저의 기본 스타일을 수정하는데 중점을 둡니다. ※ user agent stylesheet(사용자에이전트 스타일) : 브라우저에서 기본적으로 제공하는 스타일. |
| As it is practically impossible to find bugs, debugging is challenging. → Resetting을 사용하면 브라우저의 기본적인 스타일을 완전히 무시하게 됨으로 때로는 웹페이지가 예상하지 못한 모양으로 보일 수도 있습니다. 초기화된 스타일이 모든 요소에 적용되기에 특정요소에 대한 스타일을 추적하거나 수정하는게 어려울 수 있어 디버깅이 어려울 수 있습니다. |
It’s simple to debug while normalizing → Normalizing은 Resetting보다 디버깅하는 것이 간단할 수 있습니다. Resetting과 달리 사용자에이전트 스타일을 활용하기때문에 예상하지 못한 결과가 발생할 가능성이 더 낮기 때문입니다. |
| Reset is Not Modular (no section breaking in styles) → Resetting은 스타일을 모듈식으로 나누어 관리하는 것이 아니기 때문에 특정 부분을 수정하거나 변경하기가 어려울 수 있습니다. 이는 프로젝트가 커질수록 유지보수가 어려울 수 있습니다. |
Reset Isn’t Modular (no section breaking in styles) |
| Resets are intended to remove all default browser styles. → Resetting은 모든 기본 브라우저 스타일을 제거하여 일관된 시작점을 제공하기 위해 고안되었습니다. |
The goal of normalizing CSS is to apply built-in browser styling across all browsers uniformly. → Normalizing의 목표는 모든 브라우저에서 일관된 스타일을 적용하는 것입니다. |
대표적인 Resetting에는 Eric Meyer's CSS Reset이 있으며 Normalizing에는 Normalize.css가 있다.
Eric Meyer's CSS Reset : https://meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
Normalize.css : https://necolas.github.io/normalize.css/
Normalize.css: Make browsers render all elements more consistently.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
necolas.github.io
참고자료
https://www.geeksforgeeks.org/difference-between-reset-vs-normalize-css/
https://velog.io/@hoho_0815/Resetting%EA%B3%BC-Normalizing-CSS
