[CSS] normalize와 modern-normalize 차이점

normalize와 modern-normalize 차이점

normalize.css와 modern-normalize는 모두 브라우저 간의 기본 스타일 차이를 최소화하기 위한 CSS 파일입니다.

 

1. normalize.css

1. 목적 : 모든 브라우저에서 일관된 스타일을 보장하기 위해 브라우저의 기본 스타일을 재설정하는 것을 목표로 합니다.
2. 포함된 스타일 : 보다 포괄적으로 다양한 HTML 요소에 대한 기본 스타일을 재설정합니다. 폼 요소, 리스트, 테이블 등 다양한 요소에 대한 스타일이 포함됩니다.
3. 유지보수 : 프로젝트가 비교적 오래되었으며, 브라우저 호환성을 위해 자주 업데이트 되지 않지만 여전히 널리 사용됩니다.

 

2. modern-normalize

1. 목적: normalize.css의 최신 버전으로, 최신 브라우저와의 호환성을 염두에 두고 더 작은 파일 크기와 간결한 코드베이스를 제공합니다.
2. 포함된 스타일: 최신 브라우저를 대상으로 하며, 필요하지 않은 구식 브라우저 호환성을 제거하여 파일 크기를 줄였습니다.
3. 유지보수: Sindre Sorhus가 유지하고 있으며, 최신 브라우저 동향을 반영하도록 업데이트되고 있습니다.

 

 

modern-normalize를 선택한 이유

1. 파일 크기 최적화 : modern-normalize는 normalize.css보다 파일 크기가 작고 간결합니다. 이는 웹페이지 로딩 속도에 유리합니다.
2. 최신 브라우저 지원 : modern-normalize는 최신 브라우저에 최적화되어 있어 불필요한 스타일을 제거하여 성능을 향상시킵니다.
3. 유지보수 : 최신 브라우저와의 호환성을 지속적으로 업데이트하고 있어 최신 표준을 따르기에 적합합니다.

 

Reference

•  https://www.reddit.com/r/webdev/comments/1bqymin/is_normalizecss_still_a_good_use_despite_being_6/
• https://piccalil.li/blog/a-more-modern-css-reset/
• https://github.com/csstools/normalize.css/