[React] Reset vs Normaliz 어떤 것?

개발 프로젝트를 진행하기 앞서 고려해야 될 것이 있다.
바로 CSS Reset(리셋) 과 CSS Normalize(노멀라이즈) 중에서 어떤 것을 선택할 지 이다.

 

☘️ CSS Reset / Normalize 사용 이유

그렇다면 CSS Reset 과 CSS Normalize 는 왜 사용하는 것일까?

 

브라우저 간 일관성 확보

우리가 사용할 수 있는 브라우저는 크롬, 사파리, 엣지, 파이어폭스 등 매우 다양하다.

하지만 이러한 브라우저는 자체 기본 스타일을 가지고 있어 브라우저마다 다르게 보일 수 있다는 것이다.
그래서 이러한 일관성 확보하고, 브라우저 간 차이를 줄이기 위해 사용한다.

 

☘️ CSS Reset vs CSS Normalize

그렇다면 둘 중에 어떤 것을 사용해야 할까?

 

CSS Reset

CSS Reset 은 말 그대로 모든 브라우저의 기본 스타일을 리셋 을 한다.
즉 margin, padding, font-size 등을 다 똑같이 일정된 스타일으로 리셋 을 한다.

 

사용 방법

CSS Reset 을 React 프로젝트에서 사용하는 방법은

Reset CSS 에 있는 내용을 reset.css 라는 파일에 넣고 import 해준다.
(이외에도 다른 reset 코드 사용해도 됨)

import './reset.css';

 

그러면 모든 태그의 CSS 스타일들이 리셋 이 되어 모두 스타일이 똑같게 변한다.

 

장 / 단점

장점
기본 스타일을 완전히 제거하여 일관된 시작점을 제공
처음부터 스타일을 완전히 제어 가능

단점
코드의 길이가 길어질 수 있음
모든 스타일을 처음부터 다시 작성해야 함

 

---

 

CSS Normaliz

Normalize 는 CSS Reset 와 같이 브라우저 간 일관성을 제공 하지만, CSS Reset 와 달리 유용한 기본 스타일을 보존한다.

 

사용 방법

CSS Normalize 을 React 프로젝트에서 사용하는 방법은

Normalize.css 에 있는 내용을 normalize.css 라는 파일에 넣고 import 해준다.

import './normalize.css';

 

CSS Normalize 을 적용해서 크게 달라진 것은 없지만 브라우저 간 일관성만 맞춰주고 CSS Reset 와 달리 기본 스타일을 보존 되었다.

 

장 / 단점

장점
브라우저 간 일관성을 유지하면서도 합리적인 기본 스타일을 유지
기존 스타일을 완전히 덮어쓰지 않고 필요한 부분만 조정 가능

단점
일부 기본 스타일을 덮어써야 함
프로젝트에 필요하지 않은 스타일이 포함될 수 있어, 경우에 따라 비효율

 

☘️ 결론

그러면 둘 중에 어떤 것이 좋고 어떤 것을 프로젝트에 사용해야 될까?
정답은?? 없다!!

바로 진행하는 프로젝트의 특성과 팀원들의 성향에 따라 달려있다.

 

CSS Reset 사용하는 경우
복잡한 디자인을 가진 프로젝트
팀원이 모든 요소에 대한 완전한 제어를 원할 때

CSS Normalize 사용하는 경우
단순하거나 전통적인 웹 디자인을 가진 프로젝트
팀원이 CSS에 대한 경험이 적거나 빠른 개발을 선호할 때

 

그래서 본인의 상황에 맞게 선호하는 것을 선택하면 된다! 참고로 나는 CSS Reset 을 선호한다!