[CSS] reset.css와 Normalize

등장 이유

CSS가 없던 시절 HTML만 있던 시절에 기본적인 태그에 적당한 서식이 있었다. 이후에 CSS가 등장하면서 이 서식은 CSS의 기본서식이 되었다. 이 스타일은 User-Agent-StyleSheet라고 한다.

브라우저 별 User-Agent-StyleSheet
크롬 : Chromium
Firefox : Gecko
Safari : WebKit

 

하지만 각자 브라우저마다 각자의 스타일은 존재했지만 공통적인 표준이 없어 브라우저는 각자 다른 스타일들을 갖게 된다. 따라서 크로스 브라우징 이슈가 생기게 된다.

이를 위해 표준 스타일을 만들 필요가 있었다. 이게 바로 CSS Reset과 Normalize이다.

CSS Reset

* {
 margin: 0; 
 padding: 0
}

CSS Reset 은 모든 태그에 적용이 되어 있는 margin과 padding을 제거하는 방식으로 시작했다. 브라우저 기본요소의 스타일을 모두 제거하는 것이다. 즉, 브라우저 간의 차이를 최대한 없애는 코드를 넣어서, 브라우저 요소들의 스타일이 0인 상태에서 디자인을 만들어 나가기 위해 생겨난 것입니다.

하지만 이 과정에서도 여러 문제점이 제기되었다.

• 어짜피 추가적으로 CSS 작업을 하면 덮어질 세팅인데 왜 0으로 시작하는가?
• Universal Selector은 성능상에 문제가 있다.
• :focus { outline: 0 }과 같은 Reset은 브라우저의 기본 접근성을 해칠 수 있다.

등등

그래서 브라우저의 스타일을 통일하고자 하는 방법은 모든 스펙을 0으로 Hard Reset!  이라는 노선에서 다른 방향으로 진행이 된다.

@import url("reset.css");

위와 같이 사용하면된다

Normalize

표준이 없던 User-Agent StyleSheet에도 표준이 생겼습니다. 그렇다고 이미 만들어진 브라우저가 표준을 바로 따라 갈 수는 없었지만 새롭게 나오는 스펙들에 대해서는 다소 정리도 될 수 있었고 브라우저간 편차는 점점 줄 수 있었습니다.

여전히 크로스 브라우징의 브라우저의 모든 스타일을 통일을 하는 작업은 필요했으므로 브라우저간에 스타일이 표준 브라우저의 스타일과 동일하게 보일 수 있는 방식이라는 정규화(Normalize)를 통해서 스타일을 통일하려는 방식이 만들어졌습니다.

이는 CSS Reset에서 보이는 거대 규칙 덩어리의 상속체인을 쓰지 않고서 일단 브라우저 스타일을 통일 했기 때문에 내가 개발할때 쓰던 브라우저의 화면과 다른 브라우저와의 화면이 일치할거라고 생각할 수 있게 되었습니다.

둘의 차이

Normalize.css는 reset.css와 조금 다른데, 약간의 디자인적인 요소가 가미되어 있습니다.

결론

Reset css를 본인이 필요한 부분을 추가하고 보완하면서 필요에 맞게 수정해서 사용해라!!

 

---

 

참고

https://meyerweb.com/eric/tools/css/reset/

https://velog.io/@teo/2022-CSS-Reset-다시-써보기