CSS Reset vs CSS Normalize

Nagi·2024년 11월 25일
post-thumbnail

CSS 기본 스타일은 이런 느낌이다.
꾸미지 않은 상태의 기본상태라고 아무것도 없는것은 아니지만, 지금은 이런것들을 사용하기는 힘들다.
바디의 기본 마진 패딩, 리스트, 버튼, 인풋 등에 추가적으로 손이 가는편이다.
그리고 브라우저마다 내장 스타일도 조금씩 다르다고 한다.


이런 문제를 최소화하기 위해 아래의 두가지 방법을 많이 사용한다.


CSS Reset

기존의 내장 스타일을 모두 제거해준다.

The New CSS Reset
A (more) modern CSS Reset

스타일을 적용하지 않고 초기화만 한 상태에서는 구조를 알아보기가 힘들다.
아무것도 없는 상태라 모든 부분을 다 고쳐야 하지만, 이것저것 신경안쓰고 있는 그대로 하기 편하다.


CSS Normalize

구조를 파악할 수 있는 정도의 어느 정도 기본 스타일을 유지하고 나머지만 제거해준다. 처음 적용하면 크게 달라지지 않았다는 느낌이 든다.

Normalize.css

아, 그리고 브라우저간 다른 부분들을 통일해준다!




정리

간단한 페이지에 큰 틀의 스타일만 바꾼다면 CSS Normalize,
하나하나 세세한 부분까지 다 고친다면 CSS Reset
이렇게 고를 것 같다.

그렇지만 당장 세세하게 원하는 걸 구현하려 하니 CSS Reset이 훨씬 편하게 느껴졌다.

필요한 부분만 직접 작성해서 쓰는 것도 괜찮을 것 같다고 생각했지만, 프로젝트를 해보고나서 생각이 바뀌면 다시 업데이트 해야겠다.


(검색해보면 저 링크말고도 많은 종류가 있다. 대표적인 것들은 몇년 더 이전에 나온 것들이 있는데 그나마 최근에 나온 것들로 사용해보았다.)

profile
Front-end 공부 중

0개의 댓글