CSS Normalize vs CSS Reset

 

1. 사용하는 이유

각 브라우저는 브라우저 내장 스타일을 가지고 있어서 스타일링을 전혀 하지 않은 HTML이라 할지라도 최소한의 형태를 보장할 수 있다.

스타일이 없는 같은 html이라고 하더라도 사파리, 크롬, 파이어폭스에서 다르게 보일 수 있다.

이와 같은 문제를 최소화하여 사용자들에게 최대한 동일한 사용감을 주기 위해 사용하는 것이 nomalize, reset css입니다.

 

 

 

2. normalize.css

가능한한 브라우저의 내장 스타일을 최대한 건들지 않는 선에서 브라우저 간에 상이한 부분만 스타일을 통일시켜 줍니다. 

기존의 모든 스타일을 제거하는 reset과 달리 기본 브라우저의 스타일을 유지하려는 스타일링이다.

 

 2-1. 장점 

1. 정규화가 필요한 태그들만 터치한다. 
2. 지속적으로 업데이트 중인 프로젝트이다. (github)
3. 버그 및 브라우저 간 차이점을 일치시켜준다.

 2-2. 단점

1. 기존의 reset 스타일링에 익숙해져 있다면 적응하는데 시간이 소요된다.
2. 브라우저간의 디자인 통일에 대한 실시간 업데이트가 필요하다.

• Nicolas : Normalize CSS
• Styled Components : styled-normalize

 

 

3. reset.css

브라우저의 내장 스타일을 전부 초기화시켜준다. 

초기화 후 처음부터 쌓아가는 스타일링 방식이다. 

 

 3-1. 장점 

1. 사용자들에게 익숙한 스타일링이다.
2. 비교적 고려해야할 변수가 적다. 

 3-2. 단점

1. 초기화 후 처음부터 쌓아가는 스타일링으로 코드가 길어질 수 있다.
2. 업데이트가 되고 있지 않다.
3. 유용한 스타일링도 제거한다.

• HTML5 Doctor Reset CSS : http://html5doctor.com/html-5-reset-stylesheet/
• css-wipe : https://github.com/stackcss/css-wipe
• Reset CSS(Eric Meyer's CSS reset) : http://meyerweb.com/eric/tools/css/reset/
• Tinyreset-tiny CSS reset for the modern web : https://github.com/shankariyerr/tinyreset