normalize vs reset css 란

normalize.css / reset.css 이게 뭐임?

브라우저마다 기본적으로 제공하는 element의 style을 통일시키기 위해 사용하는 css를 말하는데,

대표적으로 normalize, reset 이 두 가지가 있다.

 

국내에서는 대부분 reset.css를 사용하며, 대표적으로 Naver와 Daum이 사용

해외에서는 효율성을 중시하기 때문에, 반대로 normalize.css를 더 사용한다고 함

 

그래서 둘은 왜 사용?

브라우저에서 가장 먼저 적용되는 스타일은 user-agent stylesheet, 즉 해당 브라우저에서 제공하는 기본 스타일.

그렇기 때문에 브라우저마다 속성들이 다 다름 (똑같은 <button> 태그여도 chrome, safari, edge 등 다 기본 스타일이 다름)

근데 다 다르면 만지기가 힘들어! → 그래서 각 브라우저의 기본 스타일을 무효화 시키는 방법이 자주 쓰이는데, 그게 바로 이러한 값들을 수정하기 위해서 필요한 게 reset이고 normalize임

 

reset.css란?

- 개발자가 원하는 디자인으로 바꾸자!

• 웹 브라우저마다 각기 다른 기본 스타일이 지정되어 있는데, 해당 값들을 이름 그대로 reset(초기화)해줌으로써 다양한 웹브라우저에서도 동일한 스타일이 적용되도록 하는 설정 파일
• reset.css가 적용되면 <H1>~<H6>, <p>, <strong>, <em>등 과 같은 표준 요소는 완전히 똑같이 보이지만, 브라우저가 제공하는 기본적인 스타일링은 전혀 없음
• W3C에서 공식적으로 권장하는 기법은 아니지만, 앞서 언급한 것처럼 실무에서 편의에 의해 많이 쓰인다. (기본값을 다 없애고 시작하면 원하는 디자인으로 바꾸기 편하기 때문에

적용 안 했을 때 기본 스타일링이 들어간 모습 (크롬)

reset css를 적용했을 때의 모습 margin, padding을 보통 0으로 선언

장점

• 현재 우리나라 FE 개발에서 가장 많이 쓰이는 방법이기 때문에 익숙하다.
• 작업의 속도 측면에서 고려할 부분이 존재하지 않기 때문에, 작업 속도가 빠르다.
• 제대로 resetting을 했다면, 고려해야 할 변수가 적다. (다 초기화 했기 때문에)

단점

• resetting을 하면 우선순위, 상위와 하위 등 어디에 코드를 작성했느냐에 따라 스타일이 다르게 적용될 수 있다.
• 브라우저는 지속적으로 업데이트가 되고 있다 == 즉 코드는 언제나 변하고 있다. 해당 방법엔 표준화된 것이 없어서, 브라우저의 업데이트에 따라 계속 고쳐나가야 한다고 한다. (근데 기본적인 틀이 없어서, 그냥 알아서 고쳐야 하는..ㅋ)

 

normalize.css란?

-  모든 걸 없애지 말고, 유용한 건 살리자~

• normalize.css는 브라우저 간 일관된 스타일링을 목표로 함
  <H1>~<H6>과 같은 요소는 브라우저간에 일관된 방식으로 굵게 표시되고, 추가적인 디자인에 필요한 style만 css로 작성해주면 됨
• normalize.css는 모든 것을 없애기보다는 유용한 기본값을 보존하는 것

크롬에 노멀라이즈를 적용한 예시

사파리에 노멀라이즈를 적용한 예시

두 예시는 기본값을 보존하고 있어, 코드 입력시 바로 스타일이 적용되는 것을 볼 수 있음 (reset은 말그대로 초기화 시켜서, 스타일이 적용이 안 됨)

• normalize.css 는 reset.css보다 넓은 범위를 가지고 있어서 HTML5 요소의 표시 설정, 양식 요소의 글꼴 상속 부족, pre-font 크기 렌더링 수정, IE9 의 SVG 오버플로 및 iOS 의 버튼 스타일링 버그 등에 대한 이슈를 해결해준다고 함

장점

• reset과 달리 기존 코드를 유지하고 이용한다는 측면에서 코드가 간결함
• 코드의 우선순위 등 충돌이 일어날 가능성이 적음
• 브라우저 기본 코드를 유지하기 때문에, 지속적인 업데이트가 진행되는 것과 마찬가지
  > 즉, 친절하게 주석을 보며 커스터마이징하면 된다~

단점

• 우리나라 IT에서 많이 쓰이지 않는다는 것
• reset 방법에 익숙해져 있다면 적응하는 데에 시간이 걸린다는 점

 

그래서 둘 중 뭐가 좋은건데?

- 뭐가 좋은 게 없다 ㅋㅋ 그냥 취향 차이만 존재할뿐^^

 

난 내가 처음부터 끝까지 다 꾸밀 거야 / 제약없는 꾸밈을 원한다면 → reset

일부 스타일은 유지하면서 꾸밀 거야 / 꾸미긴 할 건데, 효율적으로! → normalize

 

끗

• reset.css의 공식문서

meyerweb.com

• noremalize.css 공식 github

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

• reset, normalize

Interview_Question_for_Beginner/FrontEnd at master · JaeYeopHan/Interview_Question_for_Beginner

CSS - Resetting VS Normalize

[CSS] 크로스 브라우징을 위한 Reset CSS, Normalize CSS

reset.css vs. normalize.css

What is the difference between Normalize.css and Reset CSS?