reset.css vs. normalize.css

reset과 normalize가 필요한이유

브라우저에서 가장 먼저 적용되는 스타일은? User-agent Stylesheet !!
이는 브라우저에서 제공하는 기본 스타일인데 브라우저마다 그 내용이 다름다름


그래서 똑같은 <button></button>태그여도 Chrome, Safari, Edge 등 브라우저마다 다르다.

 

이렇게 브라우저마다 차이가 있으면 당연히 작업할 때 화딱지가 남 😵


따라서 ‘사전 정의한 스타일시트’를 적용해 각 브라우저의 기본 스타일을 무효화시키는 방법이 자주 쓰인다.
바로 reset 또는 normalize!

 

둘이 비스무리하지만 사실은 다르다는 거 허허허

 

 

reset vs. normalize

reset

• 모든 브라우저 스타일을 ‘초기화’ 한다. 왜냐면 처음부터 다시 그려줄 거니까!
  • 장점: 익숙한 방법. 그냥 새하얀 종이 위에 원하는 대로 그리자 XD
  • 단점: 표준화된 방법이 없고 브라우저 업데이트에 맞춰 고쳐나가야 합니다. 모든 걸 날려버려서 원래 스타일을 까먹기도 함 💦
• Eric의 Reset CSS
• Styled Components를 쓴다면 → styled-reset

 

normalize

• 브라우저 스타일을 여러 브라우저에서 ‘똑갘아 보이도록’ 한다. 일관되어 보이도록 하는 게 목표.
  • 장점: 굳이 다 날리지 않고 정규화가 필요한 스타일만 건드린다. 지속적으로 업뎃 중인 공동 프로젝트. 친절한 주석을 보며 커스터마이징도 가능 🎨
  • 단점: 초기화에 익숙해져 있다면 적응에 시간이 걸릴 듯. 공동기여지만 어쨌든 브라우저에 맞춰 업데이트는 필요.
• Nicolas의 Normalize CSS
• Styled Components를 쓴다면 → styled-normalize

 

 

 

흐음 뭘 써볼까

결국 무엇을 사용할지는 상황과 취향껏 🤔
크로스 브라우징이 전혀 필요 없다면 reset만 사용할 수도 있고,

일부 기본 스타일(sub, i 등)은 유지하고 싶다면 normalize만 사용할 수도 있고,
아니면 둘을 스까스까 섞어 쓸 수도 있겠다!

 

세세한 장단점은 실사용 해보면서 후기 남기는 걸로 ;)