[CSS] normalize vs reset

Reset.css와 Normalize.css

브라우저마다 각자의 HTML 요소 기본 스타일이 있습니다. 이로 인해 CSS 스타일링을 적용할 때 브라우저마다 다르게 적용되어 보이는 경우가 생기곤 합니다. 이 문제를 해결하기 위한 CSS 스타일 조정 기법들이 바로 Reset, Normalize 입니다.

Reset.css

모든 브라우저의 내장 스타일을 없애는 기법입니다. 모두 초기화시키고 다시 각자 필요한 방식으로 설정해서 사용합니다. 그만큼 자유로운 스타일링 적용이 가능하지만 많은 CSS 규칙을 새로 덮어써야 하기 때문에 성능에 영향이 있을 수 있습니다.

Normalize.css

모든 브라우저의 스타일을 동일하게 만드는 기법입니다. 기존의 스타일은 유지하고 대신 브라우저마다 차이를 보이는 스타일 차이를 보정해서 일관된 스타일이 적용되도록 하는 방식입니다. 덮어쓰는 양이 상대적으로 Reset.css보다 적기 때문에 성능에 이점이 있을 수 있습니다. 또 기본적인 스타일링은 유지하면서 브라우저 간 차이를 줄일 수 있어서 더 널리 사용되는 편입니다.

선택 기준

스타일에 있어 완전한 커스텀이 필요하다면 Reset.css, 기본 스타일은 어느 정도 가져가고자 한다면 Normalize.css를 사용하는 것이 좋습니다.

참고자료

한 번쯤 들어봤을 Reset CSS와 Normalize CSS, 무슨 차이가 있을까?

 

Must-Know-About-Frontend/Notes/css/reset-normalize.md at main · baeharam/Must-Know-About-Frontend