[CSS] reset.css vs normalize.css

reset.css

모든 브라우저의 형태에서 내장스타일을 모두 없애버려 스타일이 0인 상태에서 시작되는 초기화 스타일 기법이다.

장점

• 초기화 : 모든 브라우저의 기본 스타일을 초기화하므로, 브라우저 간의 차이를 최대한 줄일 수 있다.
• 전체 커스터마이제이션 : 초기 스타일을 완전히 커스터마이즈하고 자체 디자인 스타일을 빠르게 적용하려는 경우에 유용하다.
• 예측 가능한 동작 : 모든 요소의 스타일을 명확하게 초기화하므로 예측 가능한 결과를 얻을 수 있다.

단점

• 과도한 초기화 : 너무 많은 스타일을 초기화할 경우 웹 페이지가 기본 스타일을 완전히 잃을 수 있으며, 모든 스타일을 처음부터 정의해야 한다.
• 관리의 어려움 : 프로젝트가 커질수록 초기화 스타일 시트를 관리하기 어려워질 수 있다.

대표적인 reset.css

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

CSS Tools: Reset CSS

 

normalize.css

모든 브라우저의 스타일링을 동일하게 유지하는 스타일 기법이다.

기존의 기본 스타일링은 유지하되 웹 브라우저마다 내장되어 있는 기본 스타일의 차이를 없애준다.

장점

• 브라우저 간 일관성 : 브라우저 간 차이를 최소화하면서 요소의 스타일을 통일시키므로, 일관성 있는 결과를 얻을 수 있다.
• 디자인 보존 : 웹 페이지가 브라우저의 기본 스타일을 완전히 잃지 않고, 일반적으로 사용되는 스타일을 정의한다.
• 커스터마이즈 가능 : 필요한 경우 사용자 지정 스타일을 추가하고 브라우저 기본 스타일과 결합할 수 있다.

단점

• 모든 스타일이 일반적 : 일부 개발자들은 모든 브라우저에서 동일한 스타일을 원하지 않을 수 있으며, 브라우저별 특정 스타일을 적용하기 어려울 수 있다.
• 사용자 정의 요소 : 사용자 지정 스타일을 적용할 때 브라우저 기본 스타일과의 충돌이 발생할 수 있으며, 이를 해결하기 위해 추가 작업이 필요할 수 있다.

대표적인 normalize.css

https://github.com/necolas/normalize.css

GitHub - necolas/normalize.css: A modern alternative to CSS resets